/* ─────────────────────────────────────────────────────────────────────
   Travel RiskMap — canonical design tokens
   Loaded on every authenticated page BEFORE the page's inline <style>,
   so page-specific overrides still win where genuinely needed.

   The three product areas are colour-coded:
     Risiko-Karte         → cyan   (--risk / --risk-2)
     Reise-Planer         → violet (--planner / --planner-2)
     Journal + Entdecken  → gold   (--journal / --journal-2)

   Every page declares its section via <body data-section="...">,
   which swaps --accent to the matching colour. Anything using
   var(--accent) therefore re-colours automatically per section.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Section accents — always available on every page */
  --risk:         #3DE0FF;
  --risk-2:       #7DEFFF;
  --risk-soft:    rgba(61,224,255,0.14);
  --risk-glow:    rgba(61,224,255,0.35);
  --risk-strong:  rgba(61,224,255,0.55);

  --planner:      #7B5CFF;
  --planner-2:    #9B7FFF;
  --planner-soft: rgba(123,92,255,0.14);
  --planner-glow: rgba(123,92,255,0.35);
  --planner-strong: rgba(123,92,255,0.55);

  --journal:      #F4B740;
  --journal-2:    #FFD278;
  --journal-soft: rgba(244,183,64,0.14);
  --journal-glow: rgba(244,183,64,0.35);
  --journal-strong: rgba(244,183,64,0.55);

  /* Legacy aliases kept so existing references keep working */
  --planner2:     var(--planner-2);

  /* Canonical radius scale — prefer these over arbitrary values */
  --radius-sm:    12px;
  --radius-md:    18px;
  --radius-lg:    22px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  /* Canonical motion */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* Per-section accent swap. body[data-section="planner"] makes
   var(--accent) resolve to the violet palette, etc. */
body[data-section="risk"] {
  --accent:      var(--risk);
  --accent-2:    var(--risk-2);
  --accent-soft: var(--risk-soft);
  --accent-glow: var(--risk-glow);
  --accent-strong: var(--risk-strong);
}
body[data-section="planner"] {
  --accent:      var(--planner);
  --accent-2:    var(--planner-2);
  --accent-soft: var(--planner-soft);
  --accent-glow: var(--planner-glow);
  --accent-strong: var(--planner-strong);
}
body[data-section="journal"] {
  --accent:      var(--journal);
  --accent-2:    var(--journal-2);
  --accent-soft: var(--journal-soft);
  --accent-glow: var(--journal-glow);
  --accent-strong: var(--journal-strong);
}
/* Home / landing default to cyan to match the brand mark */
body[data-section="home"] {
  --accent:      var(--risk);
  --accent-2:    var(--risk-2);
  --accent-soft: var(--risk-soft);
  --accent-glow: var(--risk-glow);
  --accent-strong: var(--risk-strong);
}

/* ── Section-aware top nav ──
   Sub-nav entries are marked data-section on the <a>. The one that
   matches the current body gets the section colour + underline glow. */
.subnav a[data-section],
.subnav-link[data-section] {
  position: relative;
  transition: color .2s var(--ease-out-quart);
}
.subnav a[data-section]::after,
.subnav-link[data-section]::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity .2s, transform .3s var(--ease-out-quart);
}
body[data-section="risk"] .subnav a[data-section="risk"],
body[data-section="risk"] .subnav-link[data-section="risk"] {
  color: var(--risk);
}
body[data-section="risk"] .subnav a[data-section="risk"]::after,
body[data-section="risk"] .subnav-link[data-section="risk"]::after {
  opacity: 1; transform: scaleX(1);
  box-shadow: 0 0 10px var(--risk-glow);
}
body[data-section="planner"] .subnav a[data-section="planner"],
body[data-section="planner"] .subnav-link[data-section="planner"] {
  color: var(--planner);
}
body[data-section="planner"] .subnav a[data-section="planner"]::after,
body[data-section="planner"] .subnav-link[data-section="planner"]::after {
  opacity: 1; transform: scaleX(1);
  box-shadow: 0 0 10px var(--planner-glow);
}
body[data-section="journal"] .subnav a[data-section="journal"],
body[data-section="journal"] .subnav-link[data-section="journal"],
body[data-section="journal"] .subnav a[data-section="explore"],
body[data-section="journal"] .subnav-link[data-section="explore"] {
  color: var(--journal);
}
body[data-section="journal"] .subnav a[data-section="journal"]::after,
body[data-section="journal"] .subnav-link[data-section="journal"]::after,
body[data-section="journal"] .subnav a[data-section="explore"]::after,
body[data-section="journal"] .subnav-link[data-section="explore"]::after {
  opacity: 1; transform: scaleX(1);
  box-shadow: 0 0 10px var(--journal-glow);
}

/* ─────────────────────────────────────────────────────────────────
   Universal header — "dashboard style" flat nav used on every
   authenticated page. Brand mark (animated mini-globe) + wordmark on
   the left, user/auth area on the right. No box, no backdrop — sits
   on the page like the dashboard nav does so it feels like one
   continuous surface everywhere.
   ───────────────────────────────────────────────────────────────── */
/* ── Unified app width — every authenticated page caps at 1200px,
   the same figure the dashboard already used. margin-inline auto
   is critical: some pages (trips, explore) had body without any
   max-width, so just setting a cap left them pinned top-left. */
body[data-section="risk"],
body[data-section="planner"],
body[data-section="journal"],
body[data-section="home"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-section] .page-wrap { max-width: 1200px !important; }

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 28px 14px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text, #FFFFFF);
  font-family: var(--font-brand, 'Unbounded', system-ui);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: filter .25s ease;
}
.app-brand:hover { filter: drop-shadow(0 0 16px rgba(61,224,255,0.4)); }
.app-brand .brand-dot {
  color: var(--journal, #F4B740);
  margin: 0 4px;
  font-weight: 800;
}
/* "RiskMap" wordmark paints with the same cyan→gold sweep the landing
   hero globe uses. Gives every header the brand signature. */
.app-brand .brand-riskmap {
  background: linear-gradient(100deg,
    var(--risk, #3DE0FF) 0%,
    #7BE6FF 25%,
    #FFE5B0 60%,
    var(--warm, #FFB454) 90%,
    var(--journal-2, #FFD278) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(61,224,255,0.22));
}
.app-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.app-sub-nav-wrap {
  display: flex;
  justify-content: center;
  padding: 2px 28px 22px;
  max-width: 1200px;
  margin: 0 auto;
}
.app-sub-nav-wrap > #sub-nav {
  max-width: 780px;
  width: fit-content;
  margin: 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
/* Page-level toolbar (search, help, live pill) that lives below the
   sub-nav on pages that need it. Stays flat so the header doesn't
   feel heavy. */
.page-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 28px;
  flex-wrap: wrap;
}
.page-toolbar-spacer { flex: 1; }

@media (max-width: 640px) {
  .app-nav { padding: 16px 18px 10px; gap: 12px; }
  .app-brand { font-size: 16px; gap: 10px; }
  .app-sub-nav-wrap { padding: 0 12px 14px; }
  .page-toolbar { padding: 0 18px; gap: 8px; margin-bottom: 14px; }
}

/* ─── Mini-globe brand mark — a scaled-down version of the landing
   hero globe. Earth sphere with risk-colour continent patches, two
   counter-rotating orbital rings (cyan outer, violet inner), and an
   amber "live location" dot. 40px default, 32px on mobile.
   ───────────────────────────────────────────────────────────── */
.app-brand-mark {
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(61,224,255,0.35));
}
@media (max-width: 640px) {
  .app-brand-mark { width: 32px; height: 32px; }
}
.app-brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Orbit tracks stay still — only the planes fly along them. Each
   plane uses CSS offset-path so it actually traces the ellipse the
   ring is drawn on, not a circle, giving the "airplane circling the
   globe" feel. The outer plane runs clockwise, the inner one counter.
   Paths match the ellipse geometry: outer rx=18 ry=6.5, inner rx=16
   ry=5.2, both centred at 20,20. */
.app-brand-mark .abm-orbit-plane-1 {
  offset-path: path("M 38 20 A 18 6.5 0 1 1 2 20 A 18 6.5 0 1 1 38 20");
  offset-rotate: 0deg;
  animation: abm-fly-outer 9s linear infinite;
}
.app-brand-mark .abm-orbit-plane-2 {
  offset-path: path("M 36 20 A 16 5.2 0 1 1 4 20 A 16 5.2 0 1 1 36 20");
  offset-rotate: 0deg;
  animation: abm-fly-inner 13s linear infinite reverse;
}
.app-brand-mark .abm-sparkle {
  animation: abm-sparkle 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes abm-fly-outer { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes abm-fly-inner { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Legacy rotation keyframes kept so any still-existing rotating-ring
   markup keeps animating smoothly. */
@keyframes abm-fly1 { from { transform: rotate(20deg); } to { transform: rotate(380deg); } }
@keyframes abm-fly2 { from { transform: rotate(-30deg); } to { transform: rotate(-390deg); } }
@keyframes abm-sparkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-brand-mark .abm-orbit-plane,
  .app-brand-mark .abm-sparkle { animation: none !important; }
}

/* Legacy shim: older markup with class .abm-ring still spins (kept
   so any cached header SVG keeps animating) but new pages use planes. */
.app-brand-mark .abm-ring,
.logo-mark svg.abm-svg .abm-ring {
  transform-origin: 20px 20px;
  transform-box: fill-box;
}
.app-brand-mark .abm-ring-1,
.logo-mark svg.abm-svg .abm-ring-1 { animation: abm-fly1 14s linear infinite; }
.app-brand-mark .abm-ring-2,
.logo-mark svg.abm-svg .abm-ring-2 { animation: abm-fly2 18s linear infinite reverse; }

/* ── Welcome banner (Guten Morgen, Martin …) — free-floating text
   override on every authenticated page. Before: each section page
   wrapped the greeting in its own glass box with border + radius.
   Now it sits directly on the page background like the dashboard. */
body[data-section] #welcome-banner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 0 18px !important;
  margin: 8px auto 16px !important;
  max-width: 1200px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-section] #welcome-banner .wb-greeting {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
}

/* Universal focus-visible ring in the section accent colour. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, var(--risk));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sub-nav hover: pre-colour links by destination section so users
   get a colour-hint of where they're about to land. Active link
   already uses var(--accent) via the page's data-section. */
.sn-item[data-section="risk"]:hover:not(.active) {
  color: var(--risk);
  background: var(--risk-soft);
}
.sn-item[data-section="planner"]:hover:not(.active) {
  color: var(--planner);
  background: var(--planner-soft);
}
.sn-item[data-section="journal"]:hover:not(.active) {
  color: var(--journal);
  background: var(--journal-soft);
}
.sn-item[data-section="home"]:hover:not(.active),
.sn-item[data-section="dashboard"]:hover:not(.active) {
  color: var(--risk-2);
  background: rgba(255,255,255,0.06);
}

/* ── Universal section-accent strip at the very top of every
   authenticated page. Auto-coloured by the body's data-section so
   risk reads cyan, planner violet, journal gold, dashboard a soft
   cyan→violet→gold sweep that signals "all sections live here". */
.app-top-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  transition: background .35s var(--ease-out-quart);
}
body[data-section="risk"]    .app-top-strip { background: linear-gradient(90deg, var(--risk-2) 0%, var(--risk) 100%); box-shadow: 0 0 14px var(--risk-glow); }
body[data-section="planner"] .app-top-strip { background: linear-gradient(90deg, var(--planner-2) 0%, var(--planner) 100%); box-shadow: 0 0 14px var(--planner-glow); }
body[data-section="journal"] .app-top-strip { background: linear-gradient(90deg, var(--journal-2) 0%, var(--journal) 100%); box-shadow: 0 0 14px var(--journal-glow); }
body[data-section="home"]    .app-top-strip,
body:not([data-section])     .app-top-strip {
  background: linear-gradient(90deg, var(--risk) 0%, var(--planner) 50%, var(--journal) 100%);
}
