/* ==========================================================================
   SWENGrad Education Consultation — main stylesheet (v1)

   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout helpers
   5.  Skip link
   6.  Header & navigation
   7.  Buttons
   8.  Hero
   9.  Route motif (dividers, steps)
   10. Cards & grids
   11. Callouts, notices, definition lists
   12. FAQ (native details/summary)
   13. Contact page blocks
   14. Footer
   15. Utilities
   16. Reduced motion & print

   Colour contrast: every foreground/background pair used below was checked
   against the WCAG formula. Body text pairs are >= 4.5:1, large text and UI
   boundaries >= 3:1. --teal-600 measures 4.14:1 on white and is therefore
   restricted to large text, icons and borders — never body copy.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Brand palette. Every foreground/background pair used in this file was
     checked against the WCAG formula: body text >= 4.5:1, large text and UI
     boundaries >= 3:1.
     --------------------------------------------------------------------- */
  --navy-900: #0a2440;
  --navy-700: #143a5e;
  --teal-800: #075e66;
  --teal-600: #0e8a93;
  --teal-50:  #eaf6f7;
  --sand-50:  #faf7f2;
  --sand-200: #e6ddd0;
  --sand-500: #8c8272;
  --ink:      #14202b;
  --ink-muted:#4e5c69;
  --white:    #ffffff;
  /* Brand red, introduced with the SWEN/Grad wordmark. The light variant is for
     dark grounds: the base red measures 2.67:1 on navy-900, well under the 4.5:1
     text minimum, while the light one reaches 6.25:1. */
  --brand-red:       #c8102e;
  --brand-red-light: #ff7a85;

  /* Semantic aliases — components reference these, not raw brand colours. */
  --color-bg:            var(--white);
  --color-bg-alt:        var(--sand-50);
  --color-bg-accent:     var(--teal-50);
  --color-bg-inverse:    var(--navy-900);
  --color-surface:       var(--white);
  --color-surface-2:     var(--sand-50);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-muted);
  --color-heading:       var(--navy-900);
  --color-link:          var(--teal-800);
  --color-link-hover:    var(--navy-900);
  --color-accent:        var(--teal-800);
  --color-accent-light:  var(--teal-600);
  --color-border:        var(--sand-200);
  --color-border-strong: var(--sand-500);
  --color-focus:         var(--teal-800);

  /* Typography — system stacks only in v1. A custom typeface can be
     introduced later by changing these two values; nothing else in this
     file names a font family. */
  --font-heading: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.34rem + 0.55vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.55rem + 1vw, 2.3rem);
  --step-4:  clamp(2.1rem, 1.75rem + 1.75vw, 3.1rem);

  /* Spacing — 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Structure */
  --container: 71.25rem;   /* 1140px */
  --measure: 70ch;
  --radius: 10px;
  --radius-lg: 16px;
  --border-thin: 1px;
  --shadow-sm: 0 1px 2px rgba(10, 36, 64, 0.06), 0 2px 8px rgba(10, 36, 64, 0.05);
  --shadow-md: 0 2px 4px rgba(10, 36, 64, 0.07), 0 8px 24px rgba(10, 36, 64, 0.08);
  --header-height: 4.25rem;
  --transition: 160ms ease;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long technical terms and URLs must wrap rather than force a scrollbar. */
  overflow-wrap: break-word;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: 1.25em; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--color-link-hover); }

/* Focus is never removed without a replacement. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: var(--border-thin) solid var(--color-border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--teal-50);
  color: var(--navy-900);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); }

p, li { max-width: var(--measure); }

.lead {
  font-size: var(--step-1);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

small, .small { font-size: var(--step--1); }

strong { font-weight: 650; }

/* Long-form legal / article text */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose li + li { margin-top: var(--space-2); }
.prose ul, .prose ol { padding-left: 1.35em; }

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 48em) {
  .container { padding-inline: var(--space-6); }
}

.section {
  padding-block: var(--space-8);
}

@media (min-width: 48em) {
  .section { padding-block: var(--space-9); }
}

.section--tight { padding-block: var(--space-7); }
.section--alt { background-color: var(--color-bg-alt); }
.section--accent { background-color: var(--color-bg-accent); }

.section--inverse {
  background-color: var(--color-bg-inverse);
  color: var(--white);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3 { color: var(--white); }

.section--inverse .lead,
.section--inverse p { color: #dbe4ee; }

.section--inverse .eyebrow { color: #8fd3d8; }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-6);
}

.section-head .lead { margin-bottom: 0; }

/* ==========================================================================
   5. Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
}

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

/* NOTE: no `backdrop-filter`, `filter` or `transform` may be applied to this
   element. Any of those would make it a containing block for `position: fixed`
   descendants, which would collapse the mobile nav panel to the height of the
   header instead of the viewport. A solid background is used instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-900);
  min-width: 0; /* allow the label to shrink rather than push the toggle out */
}

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand-sub {
  /* "EDUCATION CONSULTATION" is 22 characters against the old "EDUCATION" at
     nine, so tracking and size are pulled in to keep the brand block from
     pushing the nav onto a second row in the 900-1080px band. nowrap keeps it
     on one line: split across two it reads as two separate labels. */
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Wordmark: SWEN black, Grad red. Two spans rather than one coloured string,
   so the split survives a font change and can be restated per background.

   No single pair works on both grounds. Measured against the WCAG formula:
   black is 21:1 on white but 1.34:1 on the navy footer, and the light-ground
   red #c8102e is 5.88:1 on white but 2.67:1 on navy. Both halves are therefore
   restated for the footer, where white reads 15.68:1 and #ff7a85 reads 6.25:1. */
.brand-swen { color: #000000; }
.brand-grad { color: var(--brand-red); }

.footer-brand .brand-swen { color: var(--white); }
.footer-brand .brand-grad { color: var(--brand-red-light); }

/* Hamburger — visible below 56.25em (900px) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--navy-900);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.site-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-bg);
  border-top: var(--border-thin) solid var(--color-border);
  padding: var(--space-5);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: var(--space-5);
}

.site-nav.is-open { display: flex; }

body.nav-open { overflow: hidden; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-list a {
  display: block;
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  color: var(--navy-700);
  text-decoration: none;
  font-weight: 550;
  border-radius: var(--radius);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.nav-list a:hover {
  color: var(--teal-800);
  background: var(--color-bg-alt);
}

.nav-list a[aria-current="page"] {
  color: var(--teal-800);
  font-weight: 700;
}

.nav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Below 360px the brand and the toggle label compete for the same space —
   e.g. 280px-wide folding-phone cover screens. The toggle keeps its text as its
   accessible name but hides it visually, and gutters tighten, so the header
   never overflows. */
@media (max-width: 22.5em) {
  .container { padding-inline: var(--space-4); }

  /* The descriptor is the least load-bearing part of the brand; the name and
     mark still identify the site. */
  .brand-sub { display: none; }

  .nav-toggle { padding: var(--space-2); }

  .nav-toggle > span:last-child {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 56.25em) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
    padding: 0;
    border-top: 0;
    background: transparent;
    overflow: visible;
    flex: 1;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    min-width: 0;
  }

  .nav-list a {
    padding: var(--space-2) var(--space-3);
    border-bottom: 0;
    font-size: var(--step--1);
    letter-spacing: 0.01em;
  }

  .nav-list a[aria-current="page"] {
    background: var(--color-bg-accent);
  }

  .nav-actions { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--navy-900);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--navy-700);
  color: var(--white);
}

.btn-accent {
  background: var(--teal-800);
  color: var(--white);
}

.btn-accent:hover {
  background: var(--navy-900);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--color-border-strong);
}

.btn-outline:hover {
  background: var(--color-bg-alt);
  border-color: var(--navy-900);
  color: var(--navy-900);
}

.btn-on-dark {
  background: var(--color-surface);
  color: var(--navy-900);
}

.btn-on-dark:hover {
  background: var(--teal-50);
  color: var(--navy-900);
}

/* Still 44px tall — .btn-sm is compact horizontally, not vertically, so that
   every interactive target stays at the 44px minimum used across the site. */
.btn-sm {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
}

.section--inverse .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.section--inverse .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Text link with a forward chevron */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent-light);
  padding-bottom: 1px;
}

.link-more::after {
  content: "\2192";
  transition: transform var(--transition);
}

.link-more:hover { border-bottom-color: var(--navy-900); }
.link-more:hover::after { transform: translateX(3px); }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sand-50) 0%, var(--white) 100%);
  padding-block: var(--space-8) var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-border);
}

@media (min-width: 48em) {
  .hero { padding-block: var(--space-9); }
}

.hero-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brand-red);
  opacity: 0.28;
  pointer-events: none;

  /* The headline column is 44rem inside a 71.25rem container, so text occupies
     roughly the left 60% on a wide screen. The line is drawn to the right of
     that, and this mask guarantees it: it is fully transparent across the text
     column and only fades in past it, so no viewport width can push the line
     behind the words. */
  -webkit-mask-image: linear-gradient(to right, transparent 56%, #000 74%);
          mask-image: linear-gradient(to right, transparent 56%, #000 74%);
}

/* Below this width the text column fills the container, leaving no clear band
   for the line to occupy. Decoration is not worth costing legibility, so it
   is dropped rather than faded. */
@media (max-width: 60em) {
  .hero-route { display: none; }
}

.hero-inner {
  position: relative;
  max-width: 44rem;
}

.hero h1 { margin-bottom: var(--space-5); }

.hero .lead { max-width: 38rem; }



.hero-note {
  margin-top: var(--space-6);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  max-width: 34rem;
}

/* ==========================================================================
   9. Route motif
   ========================================================================== */

/* Dashed divider with a single waypoint node */
.route-divider {
  display: block;
  width: 100%;
  height: 24px;
  color: var(--teal-600);
  opacity: 0.5;
}

/* Numbered route: vertical on mobile, horizontal from 60em */
.route-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}

.route-step {
  position: relative;
  padding-left: 3.75rem;
  max-width: var(--measure);
  counter-increment: step;
}

.route-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--teal-600);
  color: var(--navy-900);
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: 1.05rem;
  z-index: 1;
}

/* Dashed connector between nodes */
.route-step::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: calc(var(--space-6) * -1);
  width: 0;
  border-left: 2px dashed var(--teal-600);
  opacity: 0.55;
}

.route-step:last-child::after { display: none; }

.route-step h3 {
  margin-bottom: var(--space-2);
  padding-top: 0.35rem;
}

.route-step p:last-child { margin-bottom: 0; }

.route-step-role {
  display: block;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.route-step-role strong { color: var(--navy-700); }

@media (min-width: 60em) {
  .route-steps--horizontal {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7) var(--space-6);
  }

  .route-steps--horizontal .route-step {
    padding-left: 0;
    padding-top: 3.5rem;
  }

  .route-steps--horizontal .route-step::after {
    left: 2.5rem;
    top: 1.25rem;
    right: calc(var(--space-6) * -1);
    bottom: auto;
    width: auto;
    border-left: 0;
    border-top: 2px dashed var(--teal-600);
  }

  /* No trailing connector at the end of each row */
  .route-steps--horizontal .route-step:nth-child(3n)::after { display: none; }
}

/* ==========================================================================
   10. Cards & grids
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-5);
}

/* Grid items default to min-width:auto, so a single long unbreakable word
   (German compounds such as "Hochschulzugangsberechtigung") would widen its
   track and push the whole grid past the viewport. */
.grid > * { min-width: 0; }

@media (min-width: 40em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-3);
}

.card p { margin-bottom: var(--space-3); }
.card > :last-child { margin-bottom: 0; margin-top: auto; }

.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--teal-800);
  margin-bottom: var(--space-4);
}

.card--plain {
  box-shadow: none;
  background: transparent;
}

/* Two-column text/aside split */
.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 60em) {
  .split {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* ==========================================================================
   11. Callouts, notices, definition lists
   ========================================================================== */

.callout {
  background: var(--color-bg-accent);
  border-left: 4px solid var(--teal-800);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-5);
  margin-block: var(--space-6);
}

.callout > :last-child { margin-bottom: 0; }

.callout h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.callout--neutral {
  background: var(--color-bg-alt);
  border-left-color: var(--sand-500);
}

/* Visible draft banner used on the three legal pages only.
   Removing these is a launch-checklist item. */
.draft-notice {
  background: var(--color-bg-alt);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--step--1);
  color: var(--ink);
}

.draft-notice strong { color: var(--navy-900); }
.draft-notice > :last-child { margin-bottom: 0; }

/* "What's included / not included" pairs */
.scope-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.scope-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-2);
}

.scope-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* Marks are paired with text labels — colour is never the only signal. */
.scope-list--in li::before {
  content: "\2713";
  color: var(--teal-800);
}

.scope-list--out li::before {
  content: "\2013";
  color: var(--ink-muted);
}

.scope-heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: var(--space-3);
}

/* Destination fact lists */
.facts {
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}

/* Deliberately always stacked. A two-column term/definition layout was tried,
   but these lists sit inside cards that are roughly half the viewport width on
   tablet, and a viewport media query cannot know that — a fixed label column
   overflowed the card at 768px. Stacking is also easier to read with the long
   labels used here. */
.facts div {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-border);
  min-width: 0;
}

/* `overflow-wrap: anywhere` rather than `break-word`: only `anywhere` reduces
   an element's min-content width, which is what stops a long term such as
   "Hochschulzugangsberechtigung" from sizing the grid track and overflowing the
   card on narrow screens. `break-word` alone wraps but still reserves the full
   word width during track sizing. */
.facts dt,
.facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.facts dt {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--navy-700);
}

.facts dd {
  margin: 0;
  color: var(--color-text);
}

/* ==========================================================================
   12. FAQ — native details/summary, no JavaScript
   ========================================================================== */

.faq-list {
  border-top: var(--border-thin) solid var(--color-border);
  max-width: var(--measure);
}

.faq-item {
  border-bottom: var(--border-thin) solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy-900);
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teal-800);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item summary:hover { color: var(--teal-800); }

.faq-answer {
  padding-bottom: var(--space-5);
}

.faq-answer > :last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Contact page blocks
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

.contact-card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.contact-card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.contact-card > :last-child { margin-bottom: 0; }

.contact-link {
  font-size: var(--step-1);
  font-weight: 600;
  word-break: break-word;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: #dbe4ee;
  padding-block: var(--space-8) var(--space-5);
  font-size: var(--step--1);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 40em) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--space-7); }
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.site-footer p { color: #c6d3e2; }

.site-footer a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.site-footer a:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.site-footer :focus-visible {
  outline-color: var(--white);
}

.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-sub { color: #a9bdd4; }

.footer-brand .brand {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.footer-links a {
  display: inline-block;
  padding-block: var(--space-1);
}

.footer-disclaimer {
  color: #c6d3e2;
  max-width: 34rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  color: #a9bdd4;
}

.footer-bottom p { margin: 0; color: #a9bdd4; }

/* ==========================================================================
   15. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }

.mx-auto { margin-inline: auto; }

.stack > * + * { margin-top: var(--space-4); }

.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.narrow { max-width: 46rem; }

.cta-band .container { position: relative; }

.cta-band h2 { max-width: 32rem; }

/* ==========================================================================
   16. Reduced motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   21. Service tiles — icon, title, blurb, "learn more"
   ========================================================================== */

.tiles {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .tiles-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
  .tiles-3 { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  min-width: 0;
  background: var(--white);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-lg);
  transition: background var(--transition), border-color var(--transition);
}

.tile:hover {
  background: var(--sand-50);
  border-color: var(--color-border-strong);
}

.tile-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-50);
  border: var(--border-thin) solid var(--color-border);
  color: var(--teal-800);
}

.tile-icon svg { width: 1.5rem; height: 1.5rem; }

.tile h3 {
  font-size: var(--step-1);
  margin: 0;
}

.tile p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.tile .link-more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--step--1);
  align-self: flex-start;
}

/* ==========================================================================
   22. EU / EEA map
   ========================================================================== */

.map-wrap {
  background: var(--white);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  position: relative;
}

/* Real geographic map, inlined so each country can be coloured and hovered.
   The source SVG's own <style> blocks are stripped before inlining: they would
   otherwise become document stylesheets and fight the site's CSS. The viewBox
   is cropped to Europe because the source extends to overseas territories.

   The artwork is roughly square (1400 x 1450), so width drives the height and
   a phone gets a map about as tall as it is wide. max-height only matters on
   short, wide viewports — a laptop in landscape, or a phone turned sideways —
   where an unbounded square would push the country list off screen entirely. */
.map-wrap svg {
  width: 100%;
  height: auto;
  max-height: 78vh;
  display: block;
  margin-inline: auto;
  overflow: hidden;
  touch-action: manipulation;   /* no 300ms tap delay on the country paths */
}

/* The classes sit on the <path> elements themselves, so these must be plain
   class selectors — a descendant combinator (.nr-eu path) matches nothing. */
.nr-ctx {
  fill: #e8eaec;
  stroke: var(--white);
  stroke-width: 1;
}

.nr-c {
  stroke: var(--white);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 160ms ease;
}

/* Highlight by fill, not transform. A country is often several paths (the UK,
   Greece and Denmark each have dozens); scaling with transform-box: fill-box
   scales each path around its own centre, so the country visibly breaks apart
   into drifting islands. Changing fill moves nothing. */
.nr-c.is-hot {
  fill: #ffd166;
  stroke: var(--navy-900);
  stroke-width: 1.5;
}

/* Malta renders about two pixels across at this scale, which makes it neither
   visible nor clickable. Enlarge it around its own centre. This is the same
   transform that fragments multi-path countries, but Malta is two adjacent
   islands (Malta and Gozo) rather than a mainland plus outliers, so growing
   each around its own centre reads correctly. The stroke is scaled back down
   so the outline does not thicken with it. */
.nr-c[data-code="MLT"] {
  transform: scale(3);
  transform-box: fill-box;
  transform-origin: center;
  stroke-width: 0.35;
}

.nr-c[data-code="MLT"].is-hot { stroke-width: 0.5; }

.nr-eu   { fill: #123c66; }  /* EU member state                        */
.nr-efta { fill: #1a7a4a; }  /* EFTA / EEA — Norway                    */
.nr-ch   { fill: #2a7fd4; }  /* Non-EEA EFTA — Switzerland             */
.nr-uk   { fill: #075e66; }  /* Outside the EU/EEA, still covered — UK */

/* Floating name that follows the pointer. */
.map-wrap { position: relative; }

.map-tip {
  position: absolute;
  z-index: 5;
  padding: var(--space-2) var(--space-3);
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%) scale(0.9);
  transition: opacity 150ms ease, transform 150ms ease;
  box-shadow: var(--shadow-md);
}

.map-tip[data-show="true"] {
  opacity: 1;
  transform: translate(-50%, -150%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .nr-c, .map-tip { transition: none; }
}

.map-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.map-key span { display: inline-flex; align-items: center; gap: var(--space-2); }

.map-key i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.map-key .k-eu   { background: #123c66; }
.map-key .k-efta { background: #1a7a4a; }
.map-key .k-ch   { background: #2a7fd4; }
.map-key .k-uk   { background: #075e66; }

/* --------------------------------------------------------------------------
   Touch devices
   --------------------------------------------------------------------------
   Detection is by capability, not by screen width or user-agent sniffing: a
   touchscreen laptop and a phone both want the tap behaviour, and a narrow
   desktop window does not. (hover: none) asks the only question that matters.

   The pointer-following tooltip is meaningless without a pointer, and worse
   than meaningless on iOS, where a tap fires a synthetic mouseover that leaves
   the label stranded on screen until you tap elsewhere. Tapping a country
   already opens its entry, so nothing is lost by removing it. */
@media (hover: none) {
  .map-tip { display: none; }

  /* Bigger hit area: a fingertip is far blunter than a cursor, and several
     countries are only a few pixels across at phone width. */
  .nr-c { stroke-width: 1.5; }
  .nr-c[data-code="MLT"] { transform: scale(4); }
}

/* Hover styling only where hovering exists, so it cannot stick after a tap. */
@media (hover: hover) {
  .country > summary:hover { background: var(--color-bg-alt); color: var(--teal-800); }
}

/* The instruction has to match the device: "hover" is wrong on a phone and
   "tap" is wrong on a desktop. Two spans, one shown, no JS and no flash of the
   wrong text — the media query resolves before first paint. */
.hint-tap { display: none; }

@media (hover: none) {
  .hint-hover { display: none; }
  .hint-tap   { display: inline; }
}

/* Phones: reclaim the frame padding for the map itself. */
@media (max-width: 30em) {
  .map-wrap { padding: var(--space-2); }
  .map-key  { gap: var(--space-2) var(--space-4); }
}

/* ==========================================================================
   17. Language switcher
   ========================================================================== */

/* Dropdown: the button shows the language you are reading, and opening it
   lists the alternatives. Adding a third language means adding one <li> —
   nothing else changes. Falls back to a plain visible list without JS. */
.lang-menu {
  position: relative;
  flex-shrink: 0;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  background: transparent;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--navy-700);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.lang-trigger:hover { background: var(--color-bg-alt); }

.lang-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition);
}

.lang-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

.lang-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-1);
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 8rem;
  background: var(--white);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 60;
}

/* Without JS the list simply sits open beneath the button. */
.lang-menu[data-enhanced="true"] .lang-list { display: none; }
.lang-menu[data-enhanced="true"] .lang-trigger[aria-expanded="true"] + .lang-list { display: block; }

.lang-list a,
.lang-list span {
  display: block;
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  border-radius: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--navy-700);
  line-height: 1.6;
}

.lang-list a:hover { background: var(--color-bg-alt); color: var(--teal-800); }

.lang-list [aria-current="true"] {
  background: var(--navy-900);
  color: var(--white);
  cursor: default;
}

@media (min-width: 56.25em) {
  .lang-trigger { min-height: 38px; }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

/* The current language is a <span>, not a link. Linking a page to itself gives
   the visitor a control that appears clickable and then does nothing, which is
   what made the old switcher feel broken. Only the other language is
   actionable, and following it is an ordinary page load. */
.lang-switch a,
.lang-switch .lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 48px;
  padding: 0 var(--space-3);
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: none;
  color: var(--navy-700);
  background: var(--color-surface);
  white-space: nowrap;
}

.lang-switch > * + * {
  border-left: var(--border-thin) solid var(--color-border-strong);
}

.lang-switch a:hover {
  background: var(--color-bg-alt);
  color: var(--navy-900);
}

.lang-switch .lang-current {
  background: var(--navy-900);
  color: var(--white);
  cursor: default;
}

@media (min-width: 56.25em) {
  .lang-switch a,
  .lang-switch .lang-current { min-height: 38px; }
}

/* ==========================================================================
   18. Country directory
   ========================================================================== */

.country-tools {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: 34rem;
}

.country-search {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--step-0);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
}

.country-search::placeholder { color: var(--color-text-muted); }

.country-count {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.country-list {
  display: grid;
  gap: var(--space-2);
  border-top: var(--border-thin) solid var(--color-border);
}

@media (min-width: 48em) {
  .country-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-5);
  }
}

.country {
  border-bottom: var(--border-thin) solid var(--color-border);
  min-width: 0;
}

.country > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy-900);
  border-radius: var(--radius);
}

.country > summary::-webkit-details-marker { display: none; }

.country > summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--teal-800);
}

.country[open] > summary::after { content: "\2212"; }
.country[open] > summary { color: var(--teal-800); }
/* :hover for this lives in the touch-devices block above, gated on
   (hover: hover). Repeating it ungated here would win on cascade order and
   the highlight would stick after a tap. */

.country-body {
  padding: 0 var(--space-2) var(--space-5);
}

.country-body p { margin-bottom: var(--space-3); }
.country-body > :last-child { margin-bottom: 0; }

.country-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.country-points li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
}

.country-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--teal-600);
}

.country-cta {
  font-size: var(--step--1);
  font-weight: 600;
}

.country-empty {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   19. Forms
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
  max-width: 38rem;
}

.field { display: grid; gap: var(--space-2); }

.field label {
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--navy-900);
}

.field .hint {
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--step-0);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.country-search:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}

.field-error {
  font-size: var(--step--1);
  font-weight: 600;
  color: #8a1c1c;
}

/* Errors are announced by text, never by colour alone. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #8a1c1c;
  border-width: 2px;
}

.field-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.field-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin-top: 0.2em;
  padding: 0;
  accent-color: var(--teal-800);
}

.field-consent label {
  font-weight: 400;
  font-size: var(--step--1);
  line-height: 1.55;
}

.form-status {
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
}

.form-status:empty { display: none; }
.form-status[data-state="error"] { background: #fbeaea; color: #7a1818; }
.form-status[data-state="ok"] { background: var(--teal-50); color: #05494f; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   20. Contact methods
   ========================================================================== */

.contact-methods {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40em) {
  .contact-methods { grid-template-columns: repeat(3, 1fr); }
}

.method {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.method h3 {
  font-size: var(--step-1);
  margin: 0;
}

.method p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

/* A card can hold more than one number, so these stack rather than being
   pushed to the bottom of the card. */
.method .method-value {
  font-size: var(--step-0);
  font-weight: 650;
  word-break: break-word;
  margin: 0;
  padding-top: var(--space-3);
}

.method .method-value + .method-value {
  padding-top: var(--space-2);
}

/* Language flags.
   A flag is a country, not a language, so the emoji is decorative
   (aria-hidden) and the languages are always spelled out in text beside it.
   That keeps the meaning available to screen readers and to anyone who does
   not recognise a flag — the information is never carried by the image alone. */
/* Sits on its own line under the number — the language list is long enough
   that setting it inline crowds the number on a narrow card. */
.langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.langs-flags {
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

.langs-text {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-text-muted);
}

@media print {
  .site-header,
  .site-nav,
  .nav-toggle,
  .skip-link,
  .cta-band,
  .country-tools,
  .form,
  .hero-route { display: none !important; }

  .country[open] .country-body,
  .country .country-body { display: block !important; }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  a { color: #000; text-decoration: underline; }

  .faq-item .faq-answer { display: block !important; }

  .section { padding-block: 1rem; }
}