/* ==========================================================================
   synbar-system.css — det fælles lag under hele synbar.dk

   Hvorfor filen findes: sitet var vokset til tre adskilte "øer". Forsiden og
   de store sider havde én font, ét navigationsdesign og ét sæt bevægelser.
   Branchesiderne havde et andet. Guiderne, de juridiske sider og
   bookingsiderne havde slet ingen navigation og intet mørkt tema. Man kunne
   mærke, at man skiftede hjemmeside, når man klikkede rundt.

   Filen indlæses som det FØRSTE stylesheet på hver side, lige efter
   fonts.css og før sidens egen <style>. Derfor vinder sidens egne regler
   altid ved konflikt: det her er et gulv, ikke et loft. Sider, der allerede
   har navigationen skrevet ind lokalt, ser præcis ud som før. Sider, der
   manglede den, får den herfra.
   ========================================================================== */

/* ── 1. Farver og mål ──────────────────────────────────────────────────
   Samme værdier som sidernes egne :root-blokke. De står her, så en side
   uden egen blok stadig har et fuldt sæt at trække på. */
:root {
  --white:    #FFFFFF;
  --gray:     #F8FAFC;
  --blue:     #1D4ED8;
  --blue-lt:  #EFF6FF;
  --blue-md:  #1e40af;
  --blue-xlt: #dbeafe;
  --dark:     #0F172A;
  --slate:    #475569;
  --muted:    #94a3b8;
  --green:    #16A34A;
  --amber:    #D97706;
  --red:      #DC2626;

  /* Ét kortudtryk på tværs af sitet */
  --radius-card: 16px;
  --radius-btn:  10px;
  --border-card: 1px solid rgba(15,23,42,.07);
  --shadow-card: 0 1px 3px rgba(15,23,42,.04), 0 8px 30px rgba(15,23,42,.05);

  /* Én bevægelseskurve. Rolig, uden bounce. */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── 2. Mørkt tema ─────────────────────────────────────────────────────
   color-scheme er den vigtigste linje her. Uden den bliver rullepanel,
   dropdowns, datovælgere og tekstfelter ved med at være lyse, selvom
   resten af siden er mørk. Det er den slags detalje, man ikke kan sætte
   ord på, men godt kan mærke. */
[data-theme="dark"] {
  --white:   #0f172a;
  --gray:    #1e293b;
  --dark:    #e2e8f0;
  --slate:   #94a3b8;
  --blue-lt: rgba(29,78,216,.20);
  --border-card: 1px solid rgba(255,255,255,.07);
  --shadow-card: 0 1px 3px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.30);
  color-scheme: dark;
}
:root { color-scheme: light; }

/* Skiftet mellem lyst og mørkt må ikke blinke. Kun farver overgår, aldrig
   layout, og aldrig på elementer der animerer i forvejen. */
:where(body, header, footer, nav, section, main, article, aside, table, th, td) {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  :where(body, header, footer, nav, section, main, article, aside, table, th, td) {
    transition: none;
  }
}

/* ── 3. Markering og fokus ─────────────────────────────────────────────
   Ét blåt udtryk, når man markerer tekst, og én synlig fokusring hele
   vejen rundt. Fokusringen er et krav, ikke pynt: uden den kan man ikke
   se, hvor man er, når man bruger tastaturet. */
::selection {
  background: rgba(29,78,216,.18);
  color: inherit;
}
[data-theme="dark"] ::selection {
  background: rgba(96,165,250,.28);
}

:where(a, button, [role="button"], [role="switch"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(29,78,216,.45);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-theme="dark"] :where(a, button, [role="button"], [role="switch"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: rgba(96,165,250,.6);
}

/* ── 4. Springlink ─────────────────────────────────────────────────────
   Første tabstop på siden. Usynligt indtil det får fokus. */
.skip-link {
  position: absolute;
  left: 14px;
  top: -60px;
  z-index: 2000;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus {
  top: 14px;
}

/* ── 5. Billeder ───────────────────────────────────────────────────────
   Ingen side må kunne skubbes vandret ud af skærmen af et billede. */
img, svg, video {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   6. NAVIGATION

   Nøjagtig samme regler, som forsiden og branchesiderne har skrevet ind
   lokalt. De sider bliver derfor ikke rørt. Guiderne og de juridiske
   sider havde ingen navigation overhovedet, og henter den her.
   ══════════════════════════════════════════════════════════════════════ */

#nav {
  position: sticky;
  top: 10px;
  z-index: 1000;
  margin: 10px 14px 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  overflow: hidden;
  transition: box-shadow .3s ease, background-color .25s ease, border-color .25s ease;
}
#nav.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
#nav.scrolled .nav-inner { height: 60px; }

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height .3s ease;
}

.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img-full { height: 56px; width: auto; display: block; }
.logo-img-icon { height: 46px; width: auto; display: none; }
#nav .logo-img-full { mix-blend-mode: multiply; }
[data-theme="dark"] #nav .logo-img-full,
[data-theme="dark"] #nav .logo-img-icon { filter: invert(1) brightness(1.1); mix-blend-mode: screen; }
@media (max-width: 640px) {
  .logo-img-full { display: none; }
  .logo-img-icon { display: block; }
}

.pill-nav {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1.5px solid rgba(15,23,42,.13);
  background: rgba(255,255,255,.85);
  isolation: isolate;
}
.pill-tab {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: white;
  mix-blend-mode: difference;
  user-select: none;
  border-radius: 999px;
}
.pill-cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  height: calc(100% - 8px);
  background: var(--dark);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: left .22s var(--ease), width .22s var(--ease), opacity .15s;
}
[data-theme="dark"] #nav { background: rgba(15,23,42,.96); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .pill-nav { border-color: rgba(255,255,255,.12); background: rgba(15,23,42,.85); }

#hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
#hamburger svg { stroke: #0F172A; }
[data-theme="dark"] #hamburger svg { stroke: #94a3b8; }

#mobile-menu { display: none; border-top: 1px solid rgba(15,23,42,.07); }
#mobile-menu.open { display: block; }
.mobile-links { padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.mobile-links a { color: var(--dark); font-size: 15px; font-weight: 500; text-decoration: none; }
[data-theme="dark"] #mobile-menu { background: #0f172a; }
[data-theme="dark"] .mobile-links a { color: #94a3b8; }

@media (max-width: 768px) {
  #hamburger { display: block; }
  #nav-links-d, #nav-cta-d, #sw-wrap-d, .pill-nav { display: none; }
}

/* ── Temakontakt ── */
.sw-wrap { display: flex; align-items: center; gap: 7px; }
.sw-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sw-icon-sun { color: #fbbf24; }
.sw-icon-moon { color: #818cf8; }
.sw-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s;
}
.sw-track[aria-checked="true"] { background: var(--blue); }
[data-theme="dark"] .sw-track { background: #475569; }
[data-theme="dark"] .sw-track[aria-checked="true"] { background: var(--blue); }
.sw-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.sw-track[aria-checked="true"] .sw-thumb { transform: translateX(20px); }

/* ── Knapper ── */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: var(--radius-btn);
  transition: background .2s, transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.btn-blue {
  background: var(--blue);
  color: white;
  padding: 11px 24px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(29,78,216,.28);
}
.btn-blue:hover { background: var(--blue-md); box-shadow: 0 6px 22px rgba(29,78,216,.38); }
.btn-blue-lg { padding: 16px 36px; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   7. BRØDKRUMME
   ══════════════════════════════════════════════════════════════════════ */
.breadcrumb-bar { background: var(--gray); border-bottom: 1px solid rgba(15,23,42,.06); padding: 12px 28px; }
.breadcrumb { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span { color: var(--muted); }
.breadcrumb .current { color: var(--slate); font-weight: 500; }
.breadcrumb svg { flex-shrink: 0; color: var(--muted); }
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .breadcrumb span { color: rgba(255,255,255,.4); }
[data-theme="dark"] .breadcrumb .current { color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════════════════════
   8. SIDEFOD
   Samme mørke bund på alle sider, i begge temaer. Det er den ene flade,
   der aldrig skifter, og derfor den, der binder sitet sammen.
   ══════════════════════════════════════════════════════════════════════ */
footer { background: #060d1a; border-top: 1px solid rgba(255,255,255,.05); padding: 52px 28px 28px; }
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 22px; }
.footer-nav a { font-size: 13.5px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 22px; font-size: 12.5px; color: rgba(255,255,255,.4); line-height: 1.7; }
.footer-bottom a { color: rgba(147,197,253,.8); text-decoration: none; }
.footer-bottom a:hover { color: #93c5fd; }

/* ══════════════════════════════════════════════════════════════════════
   9. KORT

   Ét kortudtryk på hele sitet: samme radius, samme kant, samme bløde
   skygge. Hover er med vilje næsten ingenting. Et kort, der hopper og
   skifter farve, når musen strejfer det, ser lavet ud. Et kort, hvor
   kanten bare bliver en anelse tydeligere, ser bygget ud.

   Bemærk, at der ikke er nogen animation ved sideskift her. Både
   opacity og transform på <body> gør body til udgangspunkt for alt med
   position: fixed, og så ville læselinjen i toppen og cookiebanneret
   flytte sig, hver gang en side åbnede.
   ══════════════════════════════════════════════════════════════════════ */
.sb-card {
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.sb-card:hover {
  border-color: rgba(29,78,216,.28);
  box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 12px 36px rgba(15,23,42,.08);
}
[data-theme="dark"] .sb-card:hover {
  border-color: rgba(96,165,250,.32);
}

/* Berøringsskærme har ingen hover. Der skal ikke hænge en aktiv tilstand
   tilbage, efter man har trykket. */
@media (hover: none) {
  .sb-card:hover {
    border-color: rgba(15,23,42,.07);
    box-shadow: var(--shadow-card);
  }
}