/*
 * The header and footer every page on reqlio.eu shares, and the language menu.
 *
 * The homepage's nav and footer come from the Claude Design export; the sync
 * (scripts/sync-marketing-site.mjs) copies that same markup into every hand-
 * maintained page between its site:header / site:footer markers. This file
 * makes it look the same there. Until 2026-10-04 each of those pages had its
 * own topbar and footer, and the site changed shape as soon as you left the
 * homepage.
 *
 * MOST OF THIS IS A COPY of the design page's own rules, character for
 * character, and the sync checks it: CHROME_RULES in the sync script lists
 * every rule copied here, and the build fails if the design changes one and
 * this file does not follow. Same for the design tokens below. Edit the design
 * first, then mirror the rule here.
 *
 * The homepage loads this file too, after its inline styles, for the parts
 * the design does not have: the language menu and the fifth footer column.
 *
 * Scoping: the hand-maintained pages bring compare.css or legal.css, which
 * style bare a, ul, li, details, summary, .wrap and their own tokens for page
 * text. Everything here is either a class only the chrome uses, or scoped to
 * .nav / footer, and the tokens are set ON .nav and footer, so the chrome
 * draws with the design's palette without changing the page around it.
 */

/* Design tokens (copied from the design page's :root and dark blocks). */
.nav,footer,.lang ul{
--ink:oklch(0.16 0.012 270);--ink-2:oklch(0.42 0.01 270);--ink-3:oklch(0.58 0.008 270);
--paper:oklch(0.985 0.003 80);--paper-2:#ffffff;--line:oklch(0.91 0.005 80);
--accent:oklch(0.52 0.14 264);--accent-2:oklch(0.62 0.14 264);--accent-soft:oklch(0.95 0.025 264);
--dark:oklch(0.15 0.015 268);--dark-2:oklch(0.19 0.02 266);--dark-line:oklch(0.28 0.02 266);
--dark-fg:oklch(0.96 0.005 80);--dark-muted:oklch(0.68 0.01 270);
--nav-bg:oklch(0.985 0.003 80/0.85);--hero-tint:oklch(0.94 0.04 264);--cta-tint:oklch(0.93 0.045 264);--ladder-bar:oklch(0.88 0.01 268);
--ok:oklch(0.62 0.12 155);--warn:oklch(0.7 0.13 75);
--sans:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
[data-theme="dark"] .nav,[data-theme="dark"] footer,[data-theme="dark"] .lang ul{
--ink:oklch(0.96 0.005 80);--ink-2:oklch(0.72 0.01 270);--ink-3:oklch(0.56 0.01 270);
--paper:oklch(0.15 0.015 268);--paper-2:oklch(0.19 0.02 266);--line:oklch(0.28 0.02 266);
--accent:oklch(0.62 0.15 264);--accent-2:oklch(0.72 0.14 264);--accent-soft:oklch(0.26 0.06 264);
--nav-bg:oklch(0.15 0.015 268/0.85);--hero-tint:oklch(0.27 0.07 264/0.55);--cta-tint:oklch(0.28 0.08 264/0.6);--ladder-bar:oklch(0.32 0.02 268);
}

/* What the design page gets from its body and bare-element rules, which the
   other pages' stylesheets set differently (link colour and underline, list
   padding, the content column's width, line height). */
.nav,footer{font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.nav a,footer a{color:inherit;text-decoration:none}
.nav a:hover,footer a:hover{text-decoration:none}
.nav>.wrap,footer>.wrap{max-width:1140px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
.foot li{margin:0}
.foot p{margin:0}

/* Copied from the design page (checked by the sync, see above). */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{display:flex;align-items:center;color:var(--ink)}
.logo img{height:30px;display:block}
.nav-links{display:flex;gap:22px;font-size:14px;color:var(--ink-2);margin-left:8px}
.nav-links a:hover{color:var(--ink)}
.nav .cta{margin-left:auto;display:flex;gap:10px}
.nav .btn{padding:7px 15px;font-size:13.5px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:9px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background 140ms,border-color 140ms,transform 140ms}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.theme-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.only-dark{display:none!important}
[data-theme="dark"] .only-dark{display:inline-flex!important}
[data-theme="dark"] .only-light{display:none!important}
footer{background:var(--paper-2);color:var(--ink-2);border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot h4{color:var(--ink);font-size:13px;margin:0 0 14px;font-weight:600;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a:hover{color:var(--ink)}
.foot .blurb{max-width:34ch;font-size:13.5px;line-height:1.6}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12.5px;font-family:var(--mono);color:var(--ink-3)}

/* Not in the design: the Compare column makes four link columns, not three. */
.foot{grid-template-columns:1.6fr repeat(4,1fr)}
.nav .cta{align-items:center}

/* The language menu. A <details>, so it works without JavaScript; theme.js
   closes it on an outside click or Escape. The FAQ styles on every page
   (border, padding, the "+" marker) target bare details/summary, so each of
   those is reset here. */
.lang{position:relative;border:0;padding:0}
.lang summary{list-style:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;margin:0;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink-2);font-family:var(--mono);font-size:12.5px;font-weight:500;cursor:pointer;user-select:none}
.lang summary:hover,.lang[open] summary{color:var(--ink);border-color:var(--ink-3)}
.lang summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after,.lang[open] summary::after{content:none}
.lang img{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px oklch(0 0 0/0.12);display:block;flex:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;margin:0;padding:6px;list-style:none;background:var(--paper-2);border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 36px oklch(0 0 0/0.14);z-index:60}
.lang li{margin:0}
.lang ul a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;font-family:var(--sans);font-size:14px;color:var(--ink);text-decoration:none}
.lang ul a:hover{background:var(--accent-soft);color:var(--ink);text-decoration:none}
.lang ul a[aria-current="true"]{font-weight:600}
.lang ul a[aria-current="true"]::after{content:"✓";margin-left:auto;color:var(--accent);font-weight:600}

/* Not chrome, but every page loads this file: German and Dutch compounds
   ("Anforderungsmanagement", "Requirementsmanagement") are wider than a phone
   at heading size. Headings hyphenate in those languages where the browser has
   a dictionary; headings and body text break anywhere as a last resort
   ("gegevensbeschermingseffectbeoordelingen"). The homepage hero also
   carries soft hyphens in its catalog entry, which work everywhere. */
h1,h2,h3,main p,main li{overflow-wrap:break-word}
:lang(de) :is(h1,h2,h3),:lang(nl) :is(h1,h2,h3){hyphens:auto}

@media(max-width:900px){
.foot{grid-template-columns:1fr 1fr}
.nav-links{display:none}
}
/* A phone has room for the logo, the menu, the theme button and the call to
   action only if the gaps shrink and the menu shows just its flag. */
@media(max-width:560px){
.nav>.wrap,footer>.wrap{padding-left:16px;padding-right:16px}
.nav .wrap{gap:12px}
.nav .cta{gap:8px}
.lang summary{padding:0 8px}
.lang summary span{display:none}
.logo img{height:26px}
}