/* EU Cyber Laws — shared brand layer for the Crosswalk product site.
   Panton typeface, the EU-flag palette (blue #003399 + gold #ffcd00), the shield
   lockup and the "by EU Cyber Laws" endorsement, so every /crosswalk page reads as
   part of eu-cyber-laws.com. Page-specific CSS stays inline in each page.
   Mirrors www/DESIGN-LANGUAGE.md. */

/* Panton — the eu-cyber-laws.com brand typeface, served from the site root
   (same files the parent site loads). Falls back cleanly to the system UI stack. */
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_A_0.woff2') format('woff2'),url('/fonts/2D5048_A_0.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_B_0.woff2') format('woff2'),url('/fonts/2D5048_B_0.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_D_0.woff2') format('woff2'),url('/fonts/2D5048_D_0.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_E_0.woff2') format('woff2'),url('/fonts/2D5048_E_0.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_5_0.woff2') format('woff2'),url('/fonts/2D5048_5_0.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Panton'; src:url('/fonts/2D5048_2_0.woff2') format('woff2'),url('/fonts/2D5048_2_0.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; }

:root {
  --font: 'Panton', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ink:#0f172a; --muted:#55627a; --line:#e2e8f0; --bg:#ffffff; --wash:#f6f8fb;
  --accent:#003399;        /* EU-flag blue — primary (eu-blue-600) */
  --accent-2:#1d4ed8;      /* brighter blue — hover / links on dark (eu-blue-700) */
  --gold:#ffcd00;          /* EU-flag gold — accent, used sparingly (eu-yellow-500) */
  --accent-ink:#ffffff; --good:#15803d;
}

html, body { font-family: var(--font); }

/* Shared product-site nav — shield mark + "by EU Cyber Laws" endorsement lockup. */
.topnav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px;
  padding:10px 20px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topnav .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.topnav .brand .mark { width:34px; height:34px; display:block; flex:none; }
.topnav .brand .brand-txt { display:flex; flex-direction:column; line-height:1.05; }
.topnav .brand .wm { font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
.topnav .brand .wm i { font-style:normal; color:var(--accent); }
.topnav .brand .by { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.topnav .navlinks { margin-left:auto; display:flex; align-items:center; gap:6px; }
.topnav .navlinks a { color:var(--muted); text-decoration:none; font-size:14px; padding:7px 11px; border-radius:8px; }
.topnav .navlinks a:hover { color:var(--ink); background:var(--wash); }
.topnav .navlinks a.navcta { color:var(--accent-ink); background:var(--accent); font-weight:600; }
.topnav .navlinks a.navcta:hover { filter:brightness(1.15); }

/* Shared buttons (12px-family radius, EU-blue primary). */
.btn { display:inline-block; text-decoration:none; font-weight:600; border-radius:10px; padding:12px 20px;
  border:1px solid var(--accent); color:var(--accent); }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.btn:hover { filter:brightness(1.1); }

/* Shared footer endorsement lockup (shield + "part of EU Cyber Laws"). */
footer .endorse { display:flex; justify-content:center; align-items:center; gap:9px; margin:0 auto 12px; }
footer .endorse img { width:26px; height:26px; display:block; }
footer .endorse .etxt { text-align:left; line-height:1.25; }
footer .endorse .etxt b { color:var(--ink); font-weight:700; }
footer .endorse a { color:var(--accent); font-weight:600; text-decoration:none; }
footer .endorse a:hover { text-decoration:underline; }

@media (max-width:880px){ .topnav .navlinks a:not(.navcta){ display:none; } }