/* NordBus v2 - Section theme system
   Layer on top of home2.css. Any section with .h2-themed gets a set of
   --t-* tokens it can use to repaint background + foreground. Switch the
   theme by setting data-theme="ink" | "violet" | "white" | "sugar2" on the
   same element; otherwise it inherits the default (sugar).
   --------------------------------------------------------------------- */

.h2-themed {
  /* Defaults - sugar (canonical brand bg) */
  --t-bg:         var(--nb-sugar);
  --t-fg:         var(--nb-navy);
  --t-fg-muted:   var(--fg-2);
  --t-fg-faint:   var(--fg-3);
  --t-eb:         var(--nb-violet);
  --t-accent:     var(--nb-violet);
  --t-accent-2:   var(--nb-navy);
  --t-border:     var(--border-1);
  --t-surface:    var(--bg-surface);
  --t-surface-2:  var(--nb-sugar-2);
  --t-cta-bg:     var(--nb-violet);
  --t-cta-fg:     var(--nb-sugar);
  --t-cta-fg-on:  var(--nb-violet-deep);
}
.h2-themed[data-theme="white"] {
  --t-bg:         var(--bg-surface);
}
.h2-themed[data-theme="sugar2"] {
  --t-bg:         var(--nb-sugar-2);
  --t-surface:    var(--bg-surface);
  --t-surface-2:  rgba(23,18,28,.04);
}
.h2-themed[data-theme="ink"] {
  --t-bg:         var(--nb-ink);
  --t-fg:         var(--nb-sugar);
  --t-fg-muted:   rgba(237,235,224,.72);
  --t-fg-faint:   rgba(237,235,224,.5);
  --t-eb:         var(--nb-violet-light);
  --t-accent:     var(--nb-violet-light);
  --t-accent-2:   var(--nb-sugar);
  --t-border:     rgba(237,235,224,.12);
  --t-surface:    rgba(237,235,224,.035);
  --t-surface-2:  rgba(237,235,224,.07);
  --t-cta-bg:     var(--nb-violet);
  --t-cta-fg:     var(--nb-sugar);
  --t-cta-fg-on:  var(--nb-sugar);
}
.h2-themed[data-theme="violet"] {
  --t-bg:         var(--nb-violet-deep);
  --t-fg:         var(--nb-sugar);
  --t-fg-muted:   rgba(237,235,224,.78);
  --t-fg-faint:   rgba(237,235,224,.55);
  --t-eb:         var(--nb-violet-light);
  --t-accent:     var(--nb-violet-light);
  --t-accent-2:   var(--nb-sugar);
  --t-border:     rgba(237,235,224,.14);
  --t-surface:    rgba(255,255,255,.045);
  --t-surface-2:  rgba(255,255,255,.08);
  --t-cta-bg:     var(--nb-sugar);
  --t-cta-fg:     var(--nb-violet-deep);
  --t-cta-fg-on:  var(--nb-sugar);
}

/* Section-level background paint (overrides home2.css defaults) ----------- */
.h2-hero.h2-themed,
.h2-services.h2-themed,
.h2-fleet.h2-themed,
.h2-map.h2-themed,
.h2-stats.h2-themed,
.h2-why.h2-themed,
.h2-partners.h2-themed,
.h2-citi.h2-themed,
.h2-news.h2-themed {
  background: var(--t-bg);
  transition: background .4s var(--ease-out);
}
.h2-fleet.h2-themed,
.h2-citi.h2-themed {
  border-top: 1px solid var(--t-border);
  border-bottom: 1px solid var(--t-border);
}
/* Suppress the seam line when partners (always ink) sits above Citi:
   the dark band already provides visual separation, and the citi
   border-top against the ink partners reads as a stray hairline. */
.h2-partners + .h2-citi.h2-themed { border-top: 0; }

/* Shared section head ---------------------------------------------------- */
.h2-themed .h2-section-head .eb { color: var(--t-eb); }
.h2-themed .h2-section-head h2 { color: var(--t-fg); }
.h2-themed .h2-section-head h2 em { color: var(--t-accent); }
.h2-themed .h2-section-head p  { color: var(--t-fg-muted); }
.h2-themed .h2-section-head .r { color: var(--t-fg-muted); }
.h2-themed .h2-section-head .r b { color: var(--t-fg); }

/* Outline button inside a themed section */
.h2-themed .h2-section-head .btn--outline {
  color: var(--t-fg);
  border-color: var(--t-border);
}
.h2-themed .h2-section-head .btn--outline:hover {
  background: var(--t-accent);
  /* Always sugar (white/cream) on hover for clear contrast against the
     violet accent fill — was using --t-cta-fg-on which mapped to
     violet-deep on sugar themes, leaving the label looking flat purple. */
  color: var(--nb-sugar);
  border-color: var(--t-accent);
}

/* HERO ------------------------------------------------------------------- */
.h2-hero.h2-themed .h2-hero-eyebrow { color: var(--t-eb); }
.h2-hero.h2-themed .h2-hero-eyebrow::before { background: var(--t-accent); }
.h2-hero.h2-themed .h2-hero-h1 { color: var(--t-fg); }
.h2-hero.h2-themed .h2-hero-h1 .accent,
.h2-hero.h2-themed .h2-hero-h1 .accent::after { color: var(--t-accent); }
.h2-hero.h2-themed .h2-hero-sub { color: var(--t-fg-muted); }
.h2-hero.h2-themed .h2-hero-trust li { color: var(--t-fg); }
.h2-hero.h2-themed .h2-hero-trust .dot { background: var(--t-accent); }
.h2-hero.h2-themed .h2-hero-wm { color: var(--t-fg-faint); }

/* SERVICES --------------------------------------------------------------- */
.h2-themed .h2-svc-grid { border-top-color: var(--t-border); }
.h2-themed .h2-svc      { border-bottom-color: var(--t-border); }
.h2-themed .h2-svc-thumb { background: var(--t-surface-2); }
.h2-themed .h2-svc-idx  { color: var(--t-fg-faint); }
.h2-themed .h2-svc-body h3 { color: var(--t-fg); }
.h2-themed .h2-svc-body p  { color: var(--t-fg-muted); }
.h2-themed .h2-svc-body .h2-svc-link { color: var(--t-accent); }

/* Recolor the brand-svg icons inside themed sections so they pop on every
   ground. The source SVGs ship with a fixed violet-ish fill; on ink/violet
   themes we lift them to the violet-light token via a filter. */
.h2-themed[data-theme="ink"]    .h2-svc-amen-i,
.h2-themed[data-theme="violet"] .h2-svc-amen-i,
.h2-themed[data-theme="ink"]    .h2-why-point-i,
.h2-themed[data-theme="violet"] .h2-why-point-i {
  background: rgba(196,149,229,.16);
  color: var(--nb-violet-light);
}
.h2-themed[data-theme="ink"]    .h2-svc-amen-i img.icn,
.h2-themed[data-theme="violet"] .h2-svc-amen-i img.icn,
.h2-themed[data-theme="ink"]    .h2-why-point-i img.icn,
.h2-themed[data-theme="violet"] .h2-why-point-i img.icn,
.h2-themed[data-theme="ink"]    .h2-unit-feats img.icn,
.h2-themed[data-theme="violet"] .h2-unit-feats img.icn {
  /* Map the source greenish-purple fill to the brand violet-light (#C495E5). */
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(740%) hue-rotate(229deg) brightness(95%) contrast(92%);
}

/* FLEET ------------------------------------------------------------------ */
.h2-themed .h2-fleet-tabs { border-bottom-color: var(--t-border); }
.h2-themed .h2-fleet-tab  { color: var(--t-fg-muted); }
.h2-themed .h2-fleet-tab:hover { color: var(--t-fg); }
.h2-themed .h2-fleet-tab[aria-selected="true"] {
  color: var(--t-fg);
  border-bottom-color: var(--t-accent);
}
.h2-themed .h2-fleet-tab .cnt {
  color: var(--t-accent);
  background: rgba(196,149,229,.18);
}
.h2-themed[data-theme="ink"] .h2-fleet-tab .cnt,
.h2-themed[data-theme="violet"] .h2-fleet-tab .cnt {
  background: rgba(237,235,224,.10);
}
.h2-themed .h2-fleet-tab[aria-selected="true"] .cnt {
  background: var(--t-accent);
  color: var(--t-cta-fg-on);
}

.h2-themed .h2-unit { background: var(--t-surface); border-color: var(--t-border); }
.h2-themed .h2-unit:hover {
  border-color: var(--t-accent);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.5);
}
.h2-themed .h2-unit-img    { background-color: var(--t-surface-2); }
.h2-themed .h2-unit-tier   { background: var(--t-surface); color: var(--t-fg); }
.h2-themed .h2-unit-make   { color: var(--t-fg-muted); }
.h2-themed .h2-unit-model  { color: var(--t-fg); }
.h2-themed .h2-unit-row    { border-top-color: var(--t-border); }
.h2-themed .h2-unit-row > div .v { color: var(--t-fg); }
.h2-themed .h2-unit-row > div .l { color: var(--t-fg-faint); }
.h2-themed .h2-unit-feats > span { color: var(--t-fg-muted); }
.h2-themed .h2-unit-feats .icn   { color: var(--t-accent); }
.h2-themed .h2-unit-foot { border-top-color: var(--t-border); }
.h2-themed .h2-unit-foot a { color: var(--t-accent); }
.h2-themed .h2-unit-foot .price { color: var(--t-fg-faint); }
.h2-themed .h2-unit-foot .price b { color: var(--t-fg); }

/* MAP -------------------------------------------------------------------- */
.h2-themed .h2-map-stats { border-top-color: var(--t-border); }
.h2-themed .h2-map-stats .v { color: var(--t-fg); }
.h2-themed .h2-map-stats .l { color: var(--t-fg-muted); }
.h2-themed .h2-map-canvas { background: var(--t-surface); border-color: var(--t-border); }
.h2-themed .h2-map-canvas .country { fill: var(--t-surface-2); stroke: var(--t-border); }
.h2-themed .h2-map-canvas .country.home {
  fill: var(--t-surface); stroke: var(--t-accent);
}
.h2-themed .h2-map-canvas .route { stroke: var(--t-accent); }
.h2-themed .h2-map-canvas .route.long { stroke: var(--t-accent-2); }
.h2-themed .h2-map-canvas .city { fill: var(--t-accent); }
.h2-themed .h2-map-canvas .city.origin { fill: var(--t-accent-2); }
.h2-themed .h2-map-canvas .city-label { fill: var(--t-fg); }
.h2-themed .h2-map-canvas .city-label.sm { fill: var(--t-fg-muted); }
.h2-themed .h2-map-legend {
  background: var(--t-surface);
  border-color: var(--t-border);
  color: var(--t-fg-muted);
}
.h2-themed .h2-map-legend .sw,
.h2-themed .h2-map-legend .sw.dash {
  background: var(--t-accent);
  background-image: linear-gradient(90deg, var(--t-accent) 50%, transparent 50%);
  background-size: 4px 100%;
}

/* STATS ------------------------------------------------------------------ */
.h2-themed .h2-stats-l .eb { color: var(--t-eb); }
.h2-themed .h2-stats-l h2 { color: var(--t-fg); }
.h2-themed .h2-stats-l p  { color: var(--t-fg-muted); }
.h2-themed .h2-stat { border-left-color: var(--t-border); }
.h2-themed .h2-stat .v { color: var(--t-fg); }
.h2-themed .h2-stat .v .accent { color: var(--t-accent); }
.h2-themed .h2-stat .l { color: var(--t-fg-muted); letter-spacing: .12em; }

/* WHY -------------------------------------------------------------------- */
.h2-themed .h2-why-l .eb { color: var(--t-eb); }
.h2-themed .h2-why-l h2  { color: var(--t-fg); }
.h2-themed .h2-why-l h2 em,
.h2-themed .h2-why-l h2 .pause { color: var(--t-accent); }
.h2-themed .h2-why-l .lead { color: var(--t-fg-muted); }
.h2-themed .h2-why-points li { border-top-color: var(--t-border); }
.h2-themed .h2-why-points h4 { color: var(--t-fg); }
.h2-themed .h2-why-points p  { color: var(--t-fg-muted); }
.h2-themed .h2-why-overlay {
  background: var(--t-bg);
  color: var(--t-fg);
  border-left-color: var(--t-accent);
}
.h2-themed .h2-why-overlay .sub { color: var(--t-fg-muted); }

/* CITI ------------------------------------------------------------------- */
.h2-themed .h2-citi-row { border-bottom-color: var(--t-border); }
.h2-themed .h2-citi-row .num { color: var(--t-accent); }
.h2-themed .h2-citi-row h3   { color: var(--t-fg); }
.h2-themed .h2-citi-row .desc { color: var(--t-fg-muted); }
.h2-themed .h2-citi-row .partners { color: var(--t-fg-faint); }
.h2-themed .h2-citi-row .partners b { color: var(--t-fg); }
.h2-themed .h2-citi-row .cta {
  color: var(--t-accent);
  border-color: var(--t-border);
}
.h2-themed .h2-citi-row .cta:hover {
  background: var(--t-accent);
  color: var(--t-cta-fg-on);
  border-color: var(--t-accent);
}

/* NEWS ------------------------------------------------------------------- */
.h2-themed .h2-news-card { background: var(--t-surface); border-color: var(--t-border); }
.h2-themed .h2-news-card:hover { border-color: var(--t-accent); }
.h2-themed .h2-news-card .h2-news-img { background-color: var(--t-surface-2); }
.h2-themed .h2-news-card .h2-news-meta  { color: var(--t-fg-faint); }
.h2-themed .h2-news-card .h2-news-meta b { color: var(--t-accent); }
.h2-themed .h2-news-card h3 { color: var(--t-fg); }
.h2-themed .h2-news-card .h2-news-excerpt { color: var(--t-fg-muted); }

/* Karoga divider, brand pattern band that lives between sections.
   Takes 12px in flow so it can't be painted over by the next section's bg,
   and uses z-index so it stacks above any wave silhouette overlap.
   Transparent gaps show the page bg (--nb-sugar) through. */
.h2-karoga-band {
  height: 12px;
  position: relative;
  z-index: 5;
}
.h2-karoga-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      100deg,
      var(--nb-violet)       0  6px,
      transparent            6px 11px,
      var(--nb-violet-light) 11px 16px,
      transparent            16px 22px,
      var(--nb-violet-deep)  22px 28px,
      transparent            28px 44px
    );
}

/* When two adjacent sections have different bgs and you want a hard band
   instead of a gradient, set .h2-karoga-band--lg */
.h2-karoga-band--lg::before { height: 18px; }