/* =========================================================================
   Trailblaze design system — site-wide tokens, contour background, and the
   shared UI primitives (buttons, cards, chips, sections) used by the new
   homepage, shop and product templates. Matches the approved concept and the
   m.trailblaze.co.za app palette.
   ========================================================================= */

:root{
  --tb-green:#1B4332; --tb-green-2:#2D6A4F; --tb-green-3:#40916C;
  --tb-leaf:#52B788; --tb-leaf-2:#74C69D; --tb-pale:#D8F3DC; --tb-soft:#EAF6EE;
  --tb-forest:#20422A; --tb-amber:#E9972A; --tb-amber-bg:#FBEEDD; --tb-river:#3E86AE;
  --tb-ground:#F1F5EF; --page-bg:#F1F3F4; --tb-surface:#FFFFFF; --tb-ink:#16221A; --tb-muted:#586558; --tb-line:#E1E8DD;
  --tb-shadow:0 1px 2px rgba(20,45,32,.05),0 16px 38px rgba(20,45,32,.08);
  --tb-topo:rgba(27,67,50,.07);
  --tb-disp:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --tb-body:"Public Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  body.tb-auto-dark{
    --tb-green:#8FD6AE; --tb-green-2:#74C69D; --tb-green-3:#52B788; --tb-leaf:#63C57F; --tb-leaf-2:#8FD6AE;
    --tb-pale:#1D3327; --tb-soft:#16261C; --tb-forest:#0C2018; --tb-amber:#E4A65E; --tb-amber-bg:#241a10;
    --tb-ground:#0B120D; --page-bg:#0B120D; --tb-surface:#131D16; --tb-ink:#E9F0E7; --tb-muted:#93a294; --tb-line:#223027;
    --tb-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.5); --tb-topo:rgba(143,214,174,.06);
  }
}

/* Base + topographic contour-line background (fixed = terrain under the page) */
body{ background:var(--page-bg); color:var(--tb-ink); font-family:var(--tb-body); }
/* Plain flat ground colour — contour texture disabled. */
body::before{ display:none; }
:root:not([data-theme="light"]) body::before,
:root[data-theme="dark"] body::before{ opacity:.4; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{ opacity:.4; } }

/* Blocksy's grey page-title hero band — hidden site-wide (pages carry their own
   heading in content, matching the custom design). */
.hero-section{ display:none; }
#main, .ct-container, .site-main, main, footer{ position:relative; z-index:1; }

/* Sticky header — stays visible while scrolling down the page. */
#header.ct-header{
  position:sticky; top:0; z-index:100;
  background:var(--tb-surface,#fff);
  box-shadow:0 1px 0 var(--tb-line,#e5e7eb);
}
.admin-bar #header.ct-header{ top:32px; }
@media (max-width:782px){ .admin-bar #header.ct-header{ top:46px; } }

h1,h2,h3,.tb-disp{ font-family:var(--tb-disp); letter-spacing:-.02em; }

/* Wrap */
.tb-wrap{ max-width:1140px; margin:0 auto; padding:0 22px; }

/* Buttons */
.tb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:11px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  text-decoration:none; line-height:1.2; transition:filter .15s ease, transform .1s ease; }
.tb-btn:hover{ filter:brightness(1.05); } .tb-btn:active{ transform:scale(.98); }
.tb-btn.primary{ background:var(--tb-green); color:#fff; }
.tb-btn.leaf{ background:var(--tb-green-3); color:#fff; }
.tb-btn.ghost{ background:transparent; border-color:var(--tb-line); color:var(--tb-ink); }
.tb-btn.block{ width:100%; }

.tb-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tb-green-3); background:var(--tb-soft); border:1px solid var(--tb-line);
  padding:6px 13px; border-radius:30px; }

/* Sections */
.tb-section{ padding:24px 0 40px; }
.tb-shead{ margin-bottom:28px; max-width:60ch; }
.tb-shead h2{ font-size:clamp(26px,3.6vw,36px); font-weight:800; margin:10px 0 8px; }
.tb-shead p{ margin:0; color:var(--tb-muted); font-size:16px; }
.tb-rowhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.tb-rowhead a{ font-size:14px; font-weight:600; color:var(--tb-green-3); white-space:nowrap; }

/* Map / product cards */
.tb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .tb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tb-grid{ grid-template-columns:1fr; } }
.tb-card{ background:var(--tb-surface); border:1px solid var(--tb-line); border-radius:16px; overflow:hidden;
  box-shadow:var(--tb-shadow); transition:transform .15s ease; display:block; color:inherit; }
.tb-card:hover{ transform:translateY(-3px); }
.tb-thumb{ position:relative; aspect-ratio:16/10; background:var(--tb-soft); overflow:hidden; }
.tb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-thumb .tb-svg{ position:absolute; inset:0; width:100%; height:100%; }
.tb-badge{ position:absolute; top:11px; right:11px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:20px; z-index:2; }
.tb-badge.free{ background:var(--tb-green-3); color:#fff; }
.tb-badge.paid{ background:var(--tb-amber-bg); color:var(--tb-amber); }
.tb-pdfflag{ position:absolute; top:11px; left:11px; font-size:10.5px; font-weight:700; background:var(--tb-surface);
  color:var(--tb-green); border:1px solid var(--tb-line); padding:3px 8px; border-radius:20px; z-index:2; }
.tb-cbody{ padding:14px 15px 16px; }
.tb-cbody h3{ font-size:16px; font-weight:700; margin:0 0 2px; }
.tb-region{ font-size:12.5px; color:var(--tb-muted); display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.tb-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.tb-chip{ font-size:11.5px; font-weight:600; color:var(--tb-green); background:var(--tb-soft); border:1px solid var(--tb-line);
  padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }

/* Feature grid (app section) */
.tb-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 30px; }
@media (max-width:820px){ .tb-feats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tb-feats{ grid-template-columns:1fr; } }
.tb-feat{ display:flex; gap:13px; align-items:flex-start; }
.tb-feat .ic{ flex:none; width:38px; height:38px; border-radius:10px; background:var(--tb-soft); color:var(--tb-green);
  display:flex; align-items:center; justify-content:center; }
.tb-feat .ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tb-feat h4{ font-size:15px; font-weight:700; margin:1px 0 3px; font-family:var(--tb-body); }
.tb-feat p{ margin:0; font-size:13.5px; color:var(--tb-muted); line-height:1.5; }

/* thumbnail topo helper for placeholder card art */
.tb-topo-thumb{ position:absolute; inset:0; background:var(--tb-soft); }

/* Header "Open the app" menu button */
.menu li.tb-menu-cta{ display:flex; align-items:center; }
.menu li.tb-menu-cta > a.tb-btn{ color:#fff !important; padding:9px 16px; margin-left:6px; }
.menu li.tb-menu-cta > a.tb-btn::after{ display:none !important; }
.menu li.tb-menu-cta > a.tb-btn:hover{ color:#fff !important; }

/* ---- Homepage ---- */
.tb-home{ overflow-x:clip; }
.tb-hero .tb-wrap{ padding:74px 22px 56px; }

/* Photo hero: the MTB-in-the-mist image with a green overlay + white text. */
.tb-hero-photo{ position:relative; isolation:isolate; background:#0f2117; }
.tb-hero-photo::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(102deg, rgba(11,28,20,.90) 0%, rgba(11,28,20,.66) 46%, rgba(11,28,20,.30) 100%), var(--hero-img) center/cover no-repeat; }
.tb-hero-photo .tb-wrap{ padding-top:96px; padding-bottom:92px; }
.tb-hero-photo .tb-kicker{ color:#cdebd7; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.tb-hero-photo h1{ color:#ffffff; }
.tb-hero-photo .tb-lead{ color:#dbe8de; }
.tb-hero-photo .tb-btn.ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.tb-hero-photo .tb-btn.ghost:hover{ background:rgba(255,255,255,.1); }
.tb-hero h1{ font-size:clamp(36px,6vw,62px); font-weight:800; line-height:1.01; margin:18px 0 18px; max-width:15ch; text-wrap:balance; }
.tb-lead{ font-size:19px; color:var(--tb-muted); max-width:56ch; margin:0 0 28px; }
.tb-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Centre the hero content on the page. */
.tb-hero .tb-wrap{ text-align:center; }
.tb-hero h1{ margin-left:auto; margin-right:auto; }
.tb-hero .tb-lead{ margin-left:auto; margin-right:auto; }
.tb-hero .tb-cta{ justify-content:center; }
.tb-stats{ display:flex; gap:34px; margin-top:40px; flex-wrap:wrap; }
.tb-stats b{ font-family:var(--tb-disp); font-size:25px; font-weight:800; display:block; line-height:1; }
.tb-stats span{ font-size:13px; color:var(--tb-muted); }

.tb-dostrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* The feature-cards strip bridges hero -> content; keep its bottom tight. */
.tb-section:has(.tb-dostrip){ padding-bottom:16px; }
@media (max-width:860px){ .tb-dostrip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tb-dostrip{ grid-template-columns:1fr; } }
.tb-do{ background:var(--tb-surface); border:1px solid var(--tb-line); border-radius:15px; padding:20px 18px; box-shadow:var(--tb-shadow); position:relative; }
.tb-do .ic{ width:40px; height:40px; border-radius:11px; background:var(--tb-soft); color:var(--tb-green); display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.tb-do .ic svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tb-do h3{ font-size:16px; font-weight:700; margin:0 0 4px; }
.tb-do p{ margin:0; font-size:13.5px; color:var(--tb-muted); line-height:1.5; }
.tb-do .tb-flag{ position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tb-amber); background:var(--tb-amber-bg); padding:3px 9px; border-radius:20px; }

.tb-appsec{ background:var(--tb-surface); border-top:1px solid var(--tb-line); border-bottom:1px solid var(--tb-line); padding:40px 0; }
/* Tighten the gap where the app section follows the feature-cards strip. */
.tb-section:has(.tb-dostrip) + .tb-appsec{ padding-top:28px; }
/* Tighten the final contact CTA section. */
#contact.tb-section{ padding-top:28px; padding-bottom:40px; }

.tb-split{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; }
@media (max-width:820px){ .tb-split{ grid-template-columns:1fr; gap:26px; } }
.tb-split.rev .txt{ order:2; }
@media (max-width:820px){ .tb-split.rev .txt{ order:0; } }
.tb-svc{ list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:10px; }
.tb-svc li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; }
.tb-svc svg{ flex:none; width:19px; height:19px; stroke:var(--tb-green-3); fill:none; stroke-width:1.9; margin-top:2px; }
.tb-visual{ background:var(--tb-surface); border:1px solid var(--tb-line); border-radius:18px; box-shadow:var(--tb-shadow); overflow:hidden; }
.tb-visual svg{ display:block; width:100%; height:auto; }

.tb-contact{ background:var(--tb-forest); color:#EAF3EC; border-radius:22px; padding:46px; display:flex; justify-content:space-between; gap:26px; align-items:center; flex-wrap:wrap; }
.tb-contact h2{ font-size:clamp(26px,3.6vw,38px); font-weight:800; margin:0 0 8px; color:#fff; max-width:20ch; }
.tb-contact p{ margin:0; color:#BFE0CD; font-size:16px; }
.tb-contact .tb-btn.leaf{ background:var(--tb-leaf); color:#0C2417; }

/* =========================================================================
   Site footer (multi-column, matches the concept)
   ========================================================================= */
.tb-footer{ background:var(--tb-forest); color:#EAF3EC; padding:56px 0 34px; position:relative; z-index:1; }
.tb-footer-inner{ max-width:1140px; margin:0 auto; padding:0 22px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; }
.tb-foot-brand .tb-foot-logo{ font-size:1.7rem; font-weight:800; color:#fff; text-decoration:none; letter-spacing:-.02em; }
.tb-foot-brand p{ margin:12px 0 0; color:#BFE0CD; max-width:34ch; line-height:1.6; font-size:.95rem; }
.tb-foot-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:#8FBFA0; margin:2px 0 14px; }
.tb-foot-col ul{ list-style:none; margin:0; padding:0; }
.tb-foot-col li{ margin-bottom:9px; }
.tb-foot-col a{ color:#DCEBE1; text-decoration:none; font-size:.95rem; transition:color .15s ease; }
.tb-foot-col a:hover{ color:var(--tb-leaf); }

/* Copyright row — same dark ground so it reads as one footer. */
#footer.ct-footer{ background:var(--tb-forest) !important; }
#footer .ct-footer-copyright{ color:#8FBFA0; }
#footer .ct-footer-copyright a{ color:#DCEBE1; }

@media (max-width:860px){ .tb-footer-inner{ grid-template-columns:1fr 1fr; row-gap:30px; } }
@media (max-width:480px){ .tb-footer-inner{ grid-template-columns:1fr; } }

/* Minimal footer (link columns removed) — brand spans full width. */
.tb-footer--minimal .tb-footer-inner{ display:block; }
.tb-footer--minimal{ padding:44px 0 30px; }

/* Footer now has 3 items (brand + Company + Legal) — balance the grid. */
.tb-footer-inner{ grid-template-columns:1.9fr 1fr 1fr; }
@media (max-width:860px){ .tb-footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .tb-footer-inner{ grid-template-columns:1fr; } }

/* Tighter footer padding. */
.tb-footer{ padding:24px 0 18px !important; }

/* Breathing room on regular pages/posts so content isn't flush to the footer. */
body:not(.home):not(.blog):not(.archive) #main > .ct-container,
body:not(.home):not(.blog):not(.archive) #main > .ct-container-full{
  padding-top:26px;
  padding-bottom:60px;
}

/* App screenshots — phone frames (placeholders until real screenshots added) */
.tb-phones{ display:flex; gap:18px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin:10px 0 34px; }
.tb-phone{ width:180px; aspect-ratio:9/19; background:#0e1f16; border-radius:28px; padding:7px; box-shadow:var(--tb-shadow); position:relative; }
.tb-phone-lift{ margin-bottom:22px; }
.tb-phone::after{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.28); z-index:2; }
.tb-phone-screen{ position:relative; width:100%; height:100%; border-radius:22px; overflow:hidden; background:var(--tb-soft); }
.tb-phone-screen img, .tb-phone-svg{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-phone-cap{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff; padding:10px 6px 8px; background:linear-gradient(transparent, rgba(11,28,20,.75)); }
@media (max-width:600px){ .tb-phone{ width:44vw; max-width:180px; } .tb-phone-lift{ margin-bottom:0; } }

/* 5-phone app showcase — smaller phones so the row fits. */
.tb-phones-5{ gap:14px; }
.tb-phones-5 .tb-phone{ width:150px; }
@media (max-width:980px){ .tb-phones-5 .tb-phone{ width:160px; } .tb-phones-5{ flex-wrap:wrap; } .tb-phones-5 .tb-phone-lift{ margin-bottom:0; } }