/*
 * RUADE — base.css (v5)
 * Foundations only: reset-ish, tokens, typography defaults.
 * Home layout lives in home-v2.css; this file is intentionally minimal
 * so the redesigned home wins the cascade without fighting old rules.
 */

:root {
	/* phase-3-design-system.md tokens */
	--rr-navy-900: #152549;
	--rr-navy-700: #194b7d;
	--rr-blue-600: #1f6da7;
	--rr-teal-800: #105f4f;
	--rr-teal-900: #0b473b;
	--rr-gray-500: #9e9ea2;
	--rr-ink:      #111318;
	--rr-ink-2:    #41464f;
	--rr-line:     #d9dde3;
	--rr-line-2:   #c2c8d1;
	--rr-surface:  #f3f5f7;
	--rr-paper:    #ffffff;
	--rr-amber:    #765600;
	--rr-amber-bg: #fdf6e3;
	--rr-amber-line:#e0d3a1;
	--rr-error:    #a12622;
	--rr-success:  #17613d;

	/* semantic roles (light) */
	--rr-bg:        var(--rr-paper);
	--rr-bg-alt:    var(--rr-surface);
	--rr-bg-inv:    var(--rr-navy-900);
	--rr-fg:        var(--rr-ink);
	--rr-fg-mute:   var(--rr-ink-2);
	--rr-fg-inv:    #f5f7fa;
	--rr-border:    var(--rr-line);
	--rr-border-strong: var(--rr-line-2);
	--rr-brand:     var(--rr-navy-900);
	--rr-brand-2:   var(--rr-navy-700);
	--rr-link:      var(--rr-blue-600);
	--rr-cta:       var(--rr-teal-800);
	--rr-cta-hover: var(--rr-teal-900);

	--rr-radius-s: 4px;
	--rr-radius-m: 8px;
	--rr-radius-l: 12px;

	--rr-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--rr-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--rr-max: 1240px;
	--rr-gutter: clamp(16px, 4vw, 40px);
	--rr-rhythm: clamp(56px, 9vw, 112px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--rr-bg:      #0b1428;
		--rr-bg-alt:  #101d3a;
		--rr-bg-inv:  #f3f5f7;
		--rr-fg:      #eaeef6;
		--rr-fg-mute: #a9b6cd;
		--rr-fg-inv:  var(--rr-ink);
		--rr-border:  #223255;
		--rr-border-strong:#324670;
		--rr-brand:   #cfe0f4;
		--rr-brand-2: #a9c5ea;
		--rr-link:    #7ab3e0;
		--rr-cta:     #219a7f;
		--rr-cta-hover:#1a806a;
		--rr-amber-bg:#2a220b;
		--rr-amber-line:#6b5a24;
	}
}
:root[data-theme="dark"] {
	--rr-bg:      #0b1428;
	--rr-bg-alt:  #101d3a;
	--rr-bg-inv:  #f3f5f7;
	--rr-fg:      #eaeef6;
	--rr-fg-mute: #a9b6cd;
	--rr-fg-inv:  var(--rr-ink);
	--rr-border:  #223255;
	--rr-border-strong:#324670;
	--rr-brand:   #cfe0f4;
	--rr-brand-2: #a9c5ea;
	--rr-link:    #7ab3e0;
	--rr-cta:     #219a7f;
	--rr-cta-hover:#1a806a;
	--rr-amber-bg:#2a220b;
	--rr-amber-line:#6b5a24;
}

/* ---- global reset (light-touch) ---- */
html { background: var(--rr-bg); }
body {
	background: var(--rr-bg);
	color: var(--rr-fg);
	font-family: var(--rr-font-sans);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.6;
	margin: 0;
	padding: 0 !important;
	width: 100%;
}

.wp-site-blocks {
	padding: 0;
	overflow: clip;
}

.ruade-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--rr-cta); color: #fff; padding: 12px 16px; z-index: 999;
	text-decoration: none; font-weight: 600;
}
.ruade-skip-link:focus { left: 8px; top: 8px; outline: 3px solid #fff; }

:focus-visible {
	outline: 3px solid var(--rr-cta);
	outline-offset: 2px;
	border-radius: 3px;
}

img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	html:focus-within { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Site header (block plugin renders inside .ruade-header-shell) ---- */
.ruade-header-shell {
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid #dce7e2;
	position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
	padding: 0;
}
.ruade-header-shell,
.ruade-site-header { color: #152549; }
.ruade-site-header .desktop-nav a,
.ruade-site-header .mobile-nav summary { color: #152549; }
.ruade-site-header .desktop-nav a:hover { color: #0b5a45; background: #edf7f2; }
.ruade-site-header .desktop-nav .language-switch a { border-color: #83ad9e; color: #0b5a45; }
.ruade-site-header .desktop-nav .is-rfq a { background: #0b6b50; color: #fff; }
.ruade-site-header .desktop-nav .is-rfq a:hover { background: #084d3b; color: #fff; }
.ruade-site-header {
	max-width: var(--rr-max);
	margin-inline: auto;
	padding: 12px var(--rr-gutter);
	display: flex; align-items: center; gap: 16px;
}
.ruade-site-header .ruade-brand { display: inline-flex; align-items: center; text-decoration: none; }
.ruade-site-header .ruade-brand img {
	height: 44px; width: auto; display: block;
	background: #fff; padding: 4px; border-radius: 4px;
}
.ruade-site-header .desktop-nav { margin-inline-start: auto; }
.ruade-site-header .desktop-nav ul {
	display: flex; align-items: center; gap: 4px;
	list-style: none; margin: 0; padding: 0;
}
.ruade-site-header .desktop-nav a {
	color: var(--rr-fg); text-decoration: none;
	font-size: 14px; font-weight: 500;
	padding: 8px 12px; border-radius: 6px;
}
.ruade-site-header .desktop-nav a:hover { background: var(--rr-bg-alt); }
.ruade-site-header .desktop-nav .language-switch a {
	border: 1px solid var(--rr-border-strong);
	font-family: var(--rr-font-mono); font-size: 12px; letter-spacing: 0.08em;
	padding: 8px 10px;
}
.ruade-site-header .desktop-nav .is-rfq a {
	background: var(--rr-cta); color: #fff; padding: 11px 18px; min-height: 44px;
	display: inline-flex; align-items: center;
}
.ruade-site-header .desktop-nav .is-rfq a:hover { background: var(--rr-cta-hover); }
.ruade-site-header .mobile-nav { display: none; margin-inline-start: auto; }
.ruade-site-header .mobile-nav summary {
	list-style: none; cursor: pointer;
	padding: 10px 14px; border: 1px solid var(--rr-border-strong); border-radius: 6px;
	font-weight: 600; font-size: 14px;
	display: inline-flex; align-items: center; gap: 8px;
}
.ruade-site-header .mobile-nav summary::-webkit-details-marker { display: none; }
.ruade-site-header .mobile-nav[open] > nav {
	position: absolute; inset-inline: var(--rr-gutter); top: calc(100% + 8px);
	background: var(--rr-bg); border: 1px solid var(--rr-border); border-radius: 8px;
	padding: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
.ruade-site-header .mobile-nav[open] > nav ul {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
}
.ruade-site-header .mobile-nav[open] > nav a {
	color: var(--rr-fg); text-decoration: none; padding: 12px; border-radius: 6px; display: block;
}
.ruade-site-header .mobile-nav[open] > nav a:hover { background: var(--rr-bg-alt); }
@media (max-width: 900px) {
	.ruade-site-header .desktop-nav { display: none; }
	.ruade-site-header .mobile-nav { display: inline-block; position: relative; }
}

/* White brand bar with the green used in the RUADE identity. */
.ruade-header-shell .ruade-site-header .desktop-nav a { color:#152549; }
.ruade-header-shell .ruade-site-header .desktop-nav a:hover { color:#0b5a45; background:#edf7f2; }
.ruade-header-shell .ruade-site-header .desktop-nav .language-switch a { border-color:#83ad9e; color:#0b5a45; }
.ruade-header-shell .ruade-site-header .desktop-nav .is-rfq a { background:#0b6b50; color:#fff; }
.ruade-header-shell .ruade-site-header .desktop-nav .is-rfq a:hover { background:#084d3b; color:#fff; }

/* Persistent white navigation and high-contrast RFQ action. */
.wp-site-blocks > header:has(.ruade-header-shell),.wp-block-template-part:has(.ruade-header-shell){position:sticky;top:0;z-index:999;}
.ruade-header-shell{top:0!important;box-shadow:0 8px 28px rgba(21,37,73,.08);}
.ruade-site-header .ruade-brand img{width:auto;height:64px;max-width:190px;object-fit:contain;padding:0;background:transparent;}
.ruade-header-shell .ruade-site-header .desktop-nav .is-rfq a,.ruade-site-header .mobile-nav .is-rfq a{background:#0b6b50!important;color:#fff!important;border:1px solid #0b6b50!important;text-shadow:none!important;}
.ruade-header-shell .ruade-site-header .desktop-nav .is-rfq a:hover,.ruade-site-header .mobile-nav .is-rfq a:hover{background:#084d3b!important;color:#fff!important;}
@media(max-width:900px){.ruade-site-header .ruade-brand img{height:56px;max-width:165px;}.ruade-site-header{padding-block:8px;}}