/* Reusable components. Mobile-first. */

/* --- Header / primary nav ---------------------------------------------- */
.site-header {
  background: var(--gm-forest);
  color: var(--gm-white);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--space-4);
}
/* --- Logo (views/components/logo.php, built by tools/build-logo.js) ---------- */
.logo { display: block; height: 34px; width: auto; flex-shrink: 0; overflow: visible; }
.logo__tile { fill: var(--gm-green-2); }
.logo__fold { fill: var(--gm-green); }
.logo__route { fill: none; stroke: var(--gm-white); stroke-linecap: round; stroke-linejoin: round; }
.logo__node { fill: var(--gm-white); }
.logo--inverse .logo__word { fill: var(--gm-white); }
.logo--inverse .logo__accent { fill: var(--gm-green-2); }
.logo--default .logo__word { fill: var(--gm-ink); }
.logo--default .logo__accent { fill: var(--gm-green); }
.logo--mark { width: 34px; }

.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-radius: var(--radius-control); }
.brand .logo__fold { transition: fill var(--duration-base) var(--ease-standard); }
.brand:hover .logo__fold { fill: var(--gm-canopy); }
.brand--footer .logo { height: 40px; }
.brand--compact .logo { height: 30px; }

.primary-nav { display: none; }
.primary-nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; }
.primary-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.primary-nav a:hover { color: var(--gm-white); }

.site-header__actions { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bars { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.nav-toggle__bars span { display: block; height: 2px; background: var(--gm-white); }

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .site-header__actions { display: inline-flex; gap: var(--space-3); }
  .nav-toggle { display: none; }
}

/* Mobile nav — CSS-only slide animation, transform + opacity only */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.is-open { visibility: visible; pointer-events: auto; }
.mobile-nav__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 23, 18, 0.5);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--gm-forest);
  color: var(--gm-white);
  padding: var(--space-5);
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  transform: translateX(100%);
  will-change: transform;
  transition: transform var(--duration-base) var(--ease-standard);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.nav-close { width: 44px; height: 44px; background: transparent; border: 0; color: var(--gm-white); font-size: 1.5rem; cursor: pointer; }
.mobile-nav__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-nav__list a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--gm-white); text-decoration: none; font-size: var(--text-md);
}
.mobile-nav__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }

body.nav-locked { overflow: hidden; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--gm-forest); color: rgba(255,255,255,0.8); padding-block: var(--space-16) var(--space-8); }
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
.site-footer p { color: rgba(255,255,255,0.7); }
.site-footer .site-footer__legal-name { margin: var(--space-4) 0 var(--space-1); font-weight: 600; color: var(--gm-white); }
.site-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.site-footer a:hover { color: var(--gm-white); }
.site-footer__col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--gm-white); margin-bottom: var(--space-3); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--space-12); padding-top: var(--space-6); font-size: var(--text-xs); }

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* --- Hero / corridor board -----------------------------------------------
   A photograph sits behind the whole hero to establish place; the board
   stays the star because its own opaque white background naturally
   covers the photo on that side. Only the headline side needs a scrim. */
.hero { position: relative; padding-block: var(--space-12) var(--space-16); overflow: hidden; color: var(--gm-white); }
@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(calc(100vh - 64px), 760px);
    padding-block: var(--space-16) var(--space-24);
  }
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .site-img,
.hero__media .img-placeholder { width: 100%; height: 100%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 23, 18, 0.9) 0%, rgba(10, 23, 18, 0.72) 38%, rgba(10, 23, 18, 0.35) 62%, rgba(10, 23, 18, 0.12) 80%);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--space-10); }
.hero__intro h1 { margin-bottom: var(--space-5); color: var(--gm-white); }
.hero__intro .hero__lede { color: rgba(255, 255, 255, 0.82); line-height: 1.6; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Live counts — ochre is earned here: these are current database figures. */
.hero__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 6px var(--space-4) 6px var(--space-3);
  background: rgba(10, 23, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
}
.hero__live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-signal); flex-shrink: 0; }
.hero__live strong { color: var(--gm-white); font-weight: 600; font-family: var(--font-mono); }

.hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
}
.hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); }
.hero__trust .icon { color: var(--gm-green-2); }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
}
@media (max-width: 1023px) {
  /* Board sits below the intro on mobile/tablet — needs its own scrim
     since the photo is still full-bleed behind it there. */
  .hero__media::after { background: linear-gradient(180deg, rgba(10, 23, 18, 0.88) 0%, rgba(10, 23, 18, 0.6) 55%, rgba(10, 23, 18, 0.4) 100%); }
}

.board {
  background: var(--gm-white);
  border: var(--hairline);
  border-radius: var(--radius-control);
  overflow: hidden;
  color: var(--color-text);
}
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--gm-forest);
  color: var(--gm-white);
}
.board__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--gm-white); }
.board__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gm-signal); }
.board__asof { font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.66); white-space: nowrap; }
.board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--hairline);
  background: var(--gm-paper);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.board__foot a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; text-decoration: none; }
.board__foot a:hover { text-decoration: underline; }
.board__tabs { display: flex; border-bottom: var(--hairline); }
.board__tab {
  flex: 1;
  min-height: 44px;
  padding: var(--space-3) var(--space-3);
  background: var(--gm-paper);
  border: 0;
  border-right: var(--hairline);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}
.board__tab:last-child { border-right: 0; }
.board__tab.is-active { background: var(--gm-white); color: var(--color-text); }

.board__table { font-size: var(--text-sm); }
.board__table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--hairline);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.board__table td { padding: 13px var(--space-3); border-bottom: var(--hairline); }
/* Place names, dates, tonnage and status must stay on one line — a board
   row that wraps "18 / Sep" reads as two rows. Only the cargo description
   is allowed to wrap. */
.board .board__table th,
.board .board__table td { white-space: nowrap; }
.board .board__table td.board__cargo { white-space: normal; min-width: 120px; }
.board .board__table th:first-child, .board .board__table td:first-child { padding-left: var(--space-4); }
.board .board__table th:last-child, .board .board__table td:last-child { padding-right: var(--space-4); }
.board__table tbody tr:last-child td { border-bottom: 0; }

/* Below 768px the board reflows to stacked rows, each cell labelled */
@media (max-width: 767px) {
  .board__table thead { display: none; }
  .board__table[hidden] { display: none; }
  .board__table:not([hidden]), .board__table tbody, .board__table tr, .board__table td { display: block; width: 100%; }
  .board__table tr { padding: var(--space-3) 0; border-bottom: var(--hairline); }
  .board .board__table tr { padding-inline: var(--space-4); }
  .board__table td,
  .board .board__table td:first-child,
  .board .board__table td:last-child { border: 0; padding: var(--space-1) 0; display: flex; justify-content: space-between; gap: var(--space-4); }
  .board__table td::before { content: attr(data-label); font-family: var(--font-body); font-weight: 600; color: var(--color-text-muted); flex-shrink: 0; }
  /* Stacked, each row is ~180px tall; six of them bury everything below
     the hero on a phone. Three is enough to show the board is live — the
     footer link takes the user to the rest. */
  .board .board__row:nth-child(n + 4) { display: none; }
}

/* Hero load-in: rows settle with a stagger, transform+opacity only */
.board__row { opacity: 0; transform: translateY(8px); animation: board-row-in 260ms var(--ease-standard) forwards; animation-delay: calc(var(--board-row-index, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .board__row { opacity: 1; transform: none; animation: none; } }
@keyframes board-row-in { to { opacity: 1; transform: translateY(0); } }

/* --- Audience panels ------------------------------------------------------ */
.audiences__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.audience-panel { padding-top: var(--space-6); }
.audience-panel .line-draw { margin-bottom: var(--space-6); }
.link-arrow { font-weight: 600; text-decoration: none; }

/* Static, always-visible by default (the fallback for mobile, no-JS and
   reduced-motion). motion.js progressively enhances this into a
   scroll-triggered draw-in on desktop only — see Section 5 motion spot 3. */
.line-draw { display: block; height: 2px; width: 100%; background: var(--gm-green); transform-origin: left center; }

@media (min-width: 768px) {
  .audiences__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .audiences__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- How it works (the one legitimate numbered sequence) ----------------- */
.how__steps { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-8); position: relative; }
.how__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 2px solid var(--gm-green); color: var(--gm-green);
  font-family: var(--font-mono); font-weight: 500; margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
  .how__steps { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pricing summary ------------------------------------------------------- */
.pricing-summary__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-8); }
.pricing-summary__audience { color: var(--color-text-muted); font-size: var(--text-sm); }
.pricing-summary__price { font-family: var(--font-mono); font-size: var(--text-lg); }
.pricing-summary__period { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 768px) { .pricing-summary__grid { grid-template-columns: repeat(4, 1fr); } }

/* Colour weight increases with tier, per Section 6 — no photography needed
   to differentiate them. */
.pricing-summary__tier--basic { border-top: 2px solid var(--gm-line); }
.pricing-summary__tier--standard { border-top: 2px solid var(--gm-green-2); }
.pricing-summary__tier--premium { border-top: 3px solid var(--gm-green); background: var(--gm-green-tint); }
.pricing-summary__tier--enterprise { border-top: 3px solid var(--gm-forest); background: var(--gm-forest); color: var(--gm-white); }
.pricing-summary__tier--enterprise .pricing-summary__audience,
.pricing-summary__tier--enterprise .pricing-summary__period { color: rgba(255, 255, 255, 0.7); }

/* --- CTA band --------------------------------------------------------------- */
.cta-band { background: var(--gm-canopy); color: var(--gm-white); }
.cta-band h2 { color: var(--gm-white); max-width: 30ch; }
.cta-band__inner { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* --- Insights --------------------------------------------------------------- */
.insights-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Contact page --------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; }
.contact-details { border-top: var(--hairline); padding-top: var(--space-6); }
.contact-map { margin-top: var(--space-4); height: 220px; background: var(--gm-paper); border: var(--hairline); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 3fr 2fr; }
  .contact-details { border-top: 0; border-left: var(--hairline); padding-top: 0; padding-left: var(--space-8); }
}

/* --- Route line (corridor device: two places joined by a measured line) -------- */
.route-line { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--hairline); }
.route-line__place { font-weight: 600; white-space: nowrap; }
.route-line__rule { position: relative; flex-grow: 1; height: 1px; background: var(--gm-line); }
.route-line__rule .line-draw { position: absolute; inset: 0; height: 1px; }
.route-line__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.route-line__rule { min-width: 8px; }
@media (max-width: 419px) {
  .route-line { gap: var(--space-2); }
  .route-line__place { font-size: var(--text-sm); }
}
.route-line__arrow { color: var(--gm-steel); }
.corridor-group { margin-bottom: var(--space-10); }
.corridor-group h2 { margin-bottom: var(--space-1); }
.corridor-group__label { color: var(--color-text-muted); margin-bottom: var(--space-4); }

.hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.hub-list li { border-bottom: var(--hairline); padding: var(--space-3) 0; display: flex; justify-content: space-between; }
@media (min-width: 768px) { .hub-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); } }

/* --- Badge -------------------------------------------------------------------- */
.badge-verified {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--gm-signal); color: var(--gm-signal-ink);
  padding: 2px var(--space-2); border-radius: var(--radius-chip);
  font-size: var(--text-xs); font-weight: 600;
}

/* --- Pricing comparison table (Section 7 Pricing page) ------------------------- */
.pricing-table { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.pricing-table__col { border-top: 2px solid var(--gm-green); padding-top: var(--space-5); display: flex; flex-direction: column; }
.pricing-table__price { font-family: var(--font-mono); font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-5); }
.pricing-table__features { list-style: none; margin: 0 0 var(--space-6); padding: 0; flex-grow: 1; }
.pricing-table__features li { padding: var(--space-2) 0; border-bottom: var(--hairline); font-size: var(--text-sm); }
@media (min-width: 1024px) { .pricing-table { grid-template-columns: repeat(4, 1fr); } }

.faq { display: grid; gap: var(--space-6); max-width: 720px; }
.faq__item { border-bottom: var(--hairline); padding-bottom: var(--space-6); }

/* --- Search filters & results -------------------------------------------------- */
.search-filters { border: var(--hairline); padding: var(--space-5); margin: var(--space-6) 0 var(--space-8); background: var(--gm-white); }
.search-filters__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.search-filters__actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
@media (min-width: 768px) { .search-filters__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .search-filters__grid { grid-template-columns: repeat(6, 1fr); } }

.empty-state { border: var(--hairline); border-style: dashed; padding: var(--space-10) var(--space-6); text-align: center; }
.empty-state h2 { margin-bottom: var(--space-2); }

/* --- Sticky mobile action bar (listing detail pages) --------------------------- */
.sticky-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--gm-white); border-top: var(--hairline);
  padding: var(--space-3) var(--gutter);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  display: flex; gap: var(--space-3);
}
@media (min-width: 1024px) { .sticky-action-bar { display: none; } }