/* ============================================================
   Ingenious Traveler — shared site styles  (site.css)
   ------------------------------------------------------------
   Same design SYSTEM as Green Yogi Traveler's site.css (tokens,
   base typography, buttons, nav, footer, subscribe modal, FAQ,
   section label/title/intro) — only the colour tokens differ.
   Colours are exact hex from Dropbox\Ingenious Traveler\Logo\
   Logo Color Guide.pdf, not estimated.

   Page-SPECIFIC components (hero, cards, etc.) stay in each
   page's own <style> block. Linked FIRST in every page's <head>.
   ============================================================ */

/* Comfort-capacity note (added 29 Jul 2026): every vehicle's price row states
   the official max capacity, but a car/van rides more comfortably with one
   fewer person — this footnote and the matching per-vehicle sub-line in the
   booking modal make that distinction honest instead of just stating "up to
   N" and letting a full-capacity group be surprised on the day. */
.price-comfort-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.veh-comfort{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- Design tokens ---------- */
:root{
  --orange:#D97D17;       /* primary brand orange (Logo Color Guide) */
  --orange-dark:#B3660E;  /* hover / pressed                          */
  --cream:#F5F4F4;        /* soft section backgrounds (was --mint)    */
  --text:#4A4A4A;         /* default body text                        */
  --ink:#313131;          /* all headings (Logo Color Guide dark ink) */
  --body-soft:#5c5c5c;    /* secondary / supporting body              */
  --muted:#8a8a8a;        /* roles, credentials, captions              */
  --grey:#E2E0DE;         /* borders / dividers (warm-neutral)        */
  --white:#FFFFFF;
  --dark:#313131;         /* deep accent / footer (was --teal)        */
  --radius:18px;
}

/* ---------- Reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Lato',sans-serif;color:var(--text);background:var(--white);line-height:1.7;font-size:18px}
h1,h2,h3,h4{font-family:'Merriweather',serif;font-weight:700;color:var(--ink);letter-spacing:-0.03em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- Buttons (pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 36px;border-radius:999px;font-family:'Lato',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;border:2px solid transparent;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 4px 18px rgba(217,125,23,.30)}
.btn-solid:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-solid:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-outline:focus-visible{outline:2px solid #fff;outline-offset:2px}
.btn-outline-orange{background:transparent;color:var(--orange);border-color:var(--orange)}
.btn-outline-orange:hover{background:var(--cream)}
.btn-outline-orange:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- Nav ---------- */
header nav{position:absolute;top:0;left:0;right:0;z-index:10;padding:22px 0}
header nav .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;color:#fff}
.logo svg{width:42px;height:42px}
.logo img{display:block;width:220px;height:auto}
.logo span{font-family:'Merriweather',serif;font-size:20px;letter-spacing:.02em;line-height:1}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.nav-links a{transition:opacity .15s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:.75}
@media(max-width:880px){.nav-links{display:none}}

/* Hamburger + mobile overlay */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px;z-index:101}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
@media(max-width:880px){.hamburger{display:flex}}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--dark);z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:36px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:#fff;font-family:'Lato',sans-serif;font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase;opacity:.9;transition:opacity .15s}
.mobile-menu a:hover{opacity:1}
.mobile-menu .close-btn{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.mobile-menu .close-btn svg{width:28px;height:28px;stroke:#fff;stroke-width:2}

/* ---------- Trust strip ---------- */
.trust{background:var(--cream);padding:18px 0}
.trust .container{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.03em}
.trust span{display:flex;align-items:center;gap:8px}

/* Book-a-call link — sits under .book-ticks on every product page's booking
   strip (dark photo band), so it uses the same light-on-dark palette as the
   ticks rather than the page's usual ink-on-cream text. */
.book-call-link{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);color:#fff;font-size:14.5px;text-decoration:none}
.book-call-link strong{color:#EFB25F;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.book-call-link:hover strong{color:#fff}
.book-call-link svg{flex:none;width:17px;height:17px;stroke:#EFB25F;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Section design system (uniform site-wide) ---------- */
.bg-cream{background:var(--cream)}
.section-label{color:var(--orange);font-weight:700;font-size:13px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:8px}
.section-title{font-size:clamp(24px,3.2vw,36px);margin-bottom:20px}
.section-intro{max-width:640px;font-size:18px;line-height:1.7;margin-bottom:40px}

/* Role / credential subtitle */
.role-label{color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.01em}

/* ---------- Product cards (transfers / day trips / multi-day tours) ----------
   HARD RULE (Gorana, 2 Aug 2026): inside one row of cards, the product TITLE,
   the DESCRIPTION, the PRICE row and the BOOK NOW row must each sit at the same
   y position in every card of that row. What enforces it:
     .card-img      fixed height                -> titles start level
     .card-body h3  min-height of two lines     -> descriptions start level
     .card-foot     margin-top:auto + grid stretch -> price + CTA rows level
   Do not remove any of the three. Re-verify after touching card markup or copy.

   These are BASE rules. Every listing page keeps its own card block in its
   <style> tag; site.css is linked FIRST, the selectors are identical, so those
   page rules win on source order and page-level sizing/colour is untouched.
   The base exists so pages with NO card CSS of their own — every product page's
   "Related Trips" strip, which was rendering completely unstyled until 2 Aug
   2026 — still get proper cards, from one place.
   Do NOT wrap this in @layer: the unlayered `*{margin:0;padding:0}` reset above
   beats any layered rule, so every padding/margin here would be silently
   dropped (tried it — the related-trips cards came out with no padding and
   clipped feet). */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 24px rgba(49,49,49,.10),0 2px 6px rgba(49,49,49,.06);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(49,49,49,.15),0 4px 10px rgba(49,49,49,.08)}
.card-img{position:relative;height:190px;background:var(--grey);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img a{display:block;width:100%;height:100%}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:18px;margin-bottom:8px;line-height:1.3}
.card-body p{font-size:14.5px;color:var(--text);margin-bottom:14px}
.card-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.cp-amt{font-family:'Merriweather',serif;font-weight:700;font-size:21px;color:var(--ink);line-height:1.15}
.cp-qual{font-family:'Lato',sans-serif;font-size:12px;font-weight:400;color:var(--muted)}
.card-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column}
.card-cta{padding-top:13px;border-top:1px solid var(--grey);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Lato',sans-serif;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);text-decoration:none}
.card-cta .arw{transition:transform .18s ease}
.card:hover .card-cta .arw{transform:translateX(3px)}
.card-cta:hover{text-decoration:underline}
.card-cta:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* The alignment rule itself. Listing pages re-declare .card-body h3 with their
   own font-size but never a min-height, so this one survives their override.
   2 lines at the card line-height of 1.3 = 2.6em, and em resolves against the
   h3's own font-size, so it stays exactly two lines on every page.

   Only from 672px up. That is the measured point where minmax(300px,1fr) + a
   24px gap first fits two columns; below it every card is alone on its row, so
   there is nothing to line up and reserving a second title line just leaves a
   visible empty gap under one-line titles on phones. */
@media(min-width:672px){.card-body h3{min-height:2.6em}}

/* ---------- Browse-by-city chips ---------- */
.city-nav{display:flex;flex-wrap:wrap;gap:12px}
.city-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1.5px solid var(--orange);border-radius:999px;background:#fff;color:var(--ink);font-family:'Lato',sans-serif;font-weight:700;font-size:15px;line-height:1.2;transition:background .18s,border-color .18s,color .18s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.city-chip svg{flex:none;width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.city-chip .arw{color:var(--orange);font-weight:400;transition:transform .18s,color .18s}
/* Hover fills with --dark rather than --orange: white on our orange is 4.35:1,
   just under the 4.5:1 AA minimum for text this size. */
.city-chip:hover{background:var(--dark);border-color:var(--dark);color:#fff;transform:translateY(-2px)}
.city-chip:hover svg{stroke:#fff}
.city-chip:hover .arw{color:#fff;transform:translateX(3px)}
.city-chip:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- FAQ (collapsible) ---------- */
.faq-wrap{max-width:760px;margin:0 auto}
details{background:#fff;border:1.5px solid var(--grey);border-radius:14px;padding:20px 26px;margin-bottom:14px;transition:border-color .15s}
details[open]{border-color:var(--orange)}
summary{font-weight:700;font-size:16px;cursor:pointer;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'＋';font-weight:300;font-size:20px;color:var(--orange);flex-shrink:0}
details[open] summary::after{content:'－'}
details p{margin-top:12px;font-size:16px;line-height:1.7}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:#e3ddd6;padding:54px 0 30px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr}}
footer h3{color:#fff;font-family:'Merriweather',serif;font-size:16px;margin-bottom:14px;letter-spacing:0}
footer a{display:block;margin-bottom:8px;transition:color .15s;font-size:14.5px;color:#e3ddd6}
footer a:hover{color:#fff}
.footer-subscribe{border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);padding:22px 0;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-subscribe span{color:#fff;font-size:15px;font-weight:700;font-family:'Merriweather',serif;white-space:nowrap}
.footer-sub-form{display:flex;gap:10px;flex:1;max-width:420px}
.footer-sub-form input{flex:1;padding:0 18px;min-height:44px;border-radius:999px;border:none;background:rgba(255,255,255,.12);color:#fff;font-family:'Lato',sans-serif;font-size:14px}
.footer-sub-form input::placeholder{color:rgba(255,255,255,.6)}
.footer-sub-form input:focus{outline:2px solid var(--orange);outline-offset:2px;background:rgba(255,255,255,.18)}
.footer-sub-form .btn{min-height:44px;padding:0 22px;font-size:14px;white-space:nowrap}
.footer-sub-status{flex-basis:100%;font-size:13px;color:rgba(255,255,255,.75);min-height:1em}
.footer-bottom{padding-top:22px;text-align:center;font-size:13px;color:#b8ada2}
