/* ==========================================================================
   chrome.css — Global HEADER, NAVIGATION, MEGA MENUS, MOBILE DRAWER & FOOTER
   ---------------------------------------------------------------------------
   Loaded after styles.css so it authoritatively owns the site chrome. All
   colour, spacing and radius values come from design tokens (mapped onto the
   existing brand palette) so the header and footer stay easy to maintain.
   Premium, minimal, technology-driven — aligned with the Tripgation brand.
   ========================================================================== */

:root{
  /* Chrome design tokens (mapped onto the established brand palette) */
  --primary:            #23246b;   /* deep brand navy   */
  --primary-dark:       #14153a;   /* darker navy       */
  --primary-light:      #363a9e;   /* lighter navy      */
  --accent:             #ff2045;   /* brand red accent  */
  --accent-dark:        #d10f34;
  --gold:               #f5a623;   /* brand gold        */
  --text:               #14152f;
  --text-muted:         #5b5e82;
  --background:         #ffffff;
  --border:             #e7e8f2;
  --footer-background:  #101126;   /* deep navy footer  */
  --footer-panel:       #17193a;
  --footer-text:        #c9cbe6;
  --footer-muted:       #8f92bd;
  --header-h:           76px;
  --utility-h:          40px;
  --chrome-ease:        200ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark){
  :root{ --text:#eef0ff; --text-muted:#a6a9d0; --background:#0d0e26; --border:#26284f; }
}

/* Prevent the off-canvas mobile drawer (translateX(100%)) from ever creating
   horizontal scroll. Clipping on the root affects fixed descendants too, and
   leaves the sticky header and vertical scrolling intact. */
html{ overflow-x:hidden; }

/* --------------------------------------------------------------------------
   1. UTILITY BAR
   -------------------------------------------------------------------------- */
.utility-bar{
  background:var(--primary-dark); color:rgba(255,255,255,.82);
  font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.08);
  position:relative; z-index:60;
}
.utility-bar-inner{
  height:var(--utility-h); display:flex; align-items:center;
  justify-content:space-between; gap:18px;
}
.utility-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.utility-tagline{
  display:inline-flex; align-items:center; gap:7px; font-weight:500;
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.utility-tagline svg{ color:var(--gold); flex:0 0 auto; }
.utility-right{ display:flex; align-items:center; gap:8px; }
.utility-right > *{ display:flex; align-items:center; }
.utility-div{ width:1px; height:16px; background:rgba(255,255,255,.16); }
.utility-link,.utility-fx,.utility-login-toggle{
  color:rgba(255,255,255,.82); display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:8px; font-size:12.5px; line-height:1;
  transition:background var(--chrome-ease), color var(--chrome-ease);
  background:transparent; border:0; cursor:pointer; white-space:nowrap;
}
.utility-link:hover,.utility-fx:hover,.utility-login-toggle:hover{
  background:rgba(255,255,255,.10); color:#fff;
}
.utility-fx b{ color:#fff; font-weight:600; }
.utility-fx .fx-sep{ opacity:.4; margin:0 2px; }
.utility-support strong{ color:#fff; font-weight:600; }
.utility-account{ position:relative; }
.utility-login-toggle .caret{ width:12px; height:12px; transition:transform var(--chrome-ease); }
.utility-account.open .caret{ transform:rotate(180deg); }
.utility-login-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 20px 40px -12px rgba(20,21,47,.28); padding:6px; z-index:70;
}
.utility-login-menu[hidden]{ display:none; }
.utility-login-menu a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  border-radius:9px; color:var(--text);
}
.utility-login-menu a:hover{ background:var(--primary); color:#fff; }
.utility-login-menu a strong{ font-size:13.5px; font-weight:600; }
.utility-login-menu a span{ font-size:12px; color:var(--text-muted); }
.utility-login-menu a:hover span{ color:rgba(255,255,255,.8); }

/* --------------------------------------------------------------------------
   2. HEADER SHELL + STICKY BEHAVIOUR
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--background);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--chrome-ease), background var(--chrome-ease);
}
.site-header.is-stuck{
  box-shadow:0 6px 24px -10px rgba(20,21,47,.28);
  background:color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
}
.header-inner{
  height:var(--header-h); display:flex; align-items:center; gap:20px;
  transition:height var(--chrome-ease);
}
.site-header.is-stuck .header-inner{ height:64px; }

.logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.logo img{ height:40px; width:auto; transition:height var(--chrome-ease); }
.site-header.is-stuck .logo img{ height:34px; }

/* --------------------------------------------------------------------------
   3. MAIN NAV (desktop)
   -------------------------------------------------------------------------- */
.main-nav{
  display:flex; align-items:center; gap:2px; margin:0 auto 0 6px;
  list-style:none; padding:0; flex:1 1 auto;
}
.main-nav > li{ position:static; }
.main-nav.has-mega-static > li.has-mega{ position:static; }
.main-nav > li > a{
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 12px; border-radius:10px; font-size:14.5px; font-weight:600;
  color:var(--text); line-height:1; white-space:nowrap;
  transition:background var(--chrome-ease), color var(--chrome-ease);
}
.main-nav > li > a .caret{ width:14px; height:14px; opacity:.6; transition:transform var(--chrome-ease); }
.main-nav > li > a:hover,
.main-nav > li.open > a,
.main-nav > li:focus-within > a{ background:var(--primary); color:#fff; }
.main-nav > li > a:hover .caret,
.main-nav > li.open > a .caret,
.main-nav > li:focus-within > a .caret{ opacity:1; transform:rotate(180deg); }

/* --- Panel shell shared by simple dropdowns and mega menus --- */
.dropdown{
  position:absolute; top:calc(100% + 10px); opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity var(--chrome-ease),
  transform var(--chrome-ease), visibility var(--chrome-ease);
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 50px -18px rgba(20,21,47,.35); padding:10px; z-index:55;
}
.main-nav > li.has-dropdown:not(.has-mega) .dropdown{ min-width:230px; }
.main-nav > li.has-dropdown:not(.has-mega) .dropdown{ list-style:none; }
.dropdown li{ list-style:none; }
.dropdown a{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--text);
  transition:background var(--chrome-ease), color var(--chrome-ease);
}
.dropdown a:hover,.dropdown a:focus-visible{ background:var(--primary); color:#fff; }

/* Reveal on hover (desktop) and keyboard focus */
@media (min-width:1025px){
  .main-nav > li.has-dropdown:hover > .dropdown,
  .main-nav > li.has-dropdown:focus-within > .dropdown,
  .main-nav > li.has-dropdown.open > .dropdown{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  /* simple dropdown anchors to its own li */
  .main-nav > li.has-dropdown:not(.has-mega){ position:relative; }
}

/* --- Mega menu --- */
.dropdown--mega{
  left:0; right:0; margin:0 auto; width:min(1120px, calc(100vw - 40px));
  padding:22px; display:grid; grid-template-columns:repeat(4,1fr) 260px; gap:8px 28px;
}
.dropdown--mega.mega-3{ grid-template-columns:repeat(3,1fr) 260px; }
.dropdown--mega.mega-2{ grid-template-columns:repeat(2,1fr) 260px; }
.mega-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mega-head{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin:2px 0 8px; padding:0 10px;
}
.mega-col > a{
  display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px;
  color:var(--text); font-size:14px; font-weight:500; line-height:1.25;
}
.mega-col > a .mega-ico{
  flex:0 0 auto; width:18px; height:18px; color:var(--primary-light);
  margin-top:1px; transition:color var(--chrome-ease);
}
.mega-col > a .mega-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mega-col > a .mega-txt small{ font-size:11.5px; font-weight:400; color:var(--text-muted); }
.mega-col > a:hover,.mega-col > a:focus-visible{ background:var(--primary); color:#fff; }
.mega-col > a:hover .mega-ico,.mega-col > a:focus-visible .mega-ico{ color:#fff; }
.mega-col > a:hover .mega-txt small,.mega-col > a:focus-visible .mega-txt small{ color:rgba(255,255,255,.78); }

.mega-promo{
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  background:var(--grad-navy, linear-gradient(160deg,#14153a,#23246b 60%,#2c2d84));
  color:#fff; border-radius:14px; padding:20px; text-decoration:none;
  transition:transform var(--chrome-ease);
}
.mega-promo:hover{ transform:translateY(-2px); }
.mega-promo strong{ font-size:15.5px; font-weight:800; line-height:1.25; }
.mega-promo span{ font-size:12.5px; color:rgba(255,255,255,.82); line-height:1.45; }
.mega-promo .mega-promo-cta{ color:var(--gold); font-weight:700; margin-top:4px; font-size:12.5px; }

/* --------------------------------------------------------------------------
   4. HEADER ACTIONS / CTA
   -------------------------------------------------------------------------- */
.header-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto; }
.header-phone{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px;
  color:var(--primary); padding:8px 10px; border-radius:10px; white-space:nowrap;
  transition:background var(--chrome-ease);
}
.header-phone:hover{ background:var(--border); }
.header-phone svg{ color:var(--accent); }
.header-phone small{ display:block; font-size:10.5px; font-weight:600; color:var(--text-muted); letter-spacing:.04em; }
.header-cta{
  display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff;
  font-weight:700; font-size:14px; padding:11px 18px; border-radius:11px; white-space:nowrap;
  box-shadow:0 8px 22px -8px rgba(255,32,69,.5); transition:transform var(--chrome-ease), box-shadow var(--chrome-ease), background var(--chrome-ease);
}
.header-cta:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 12px 30px -8px rgba(255,32,69,.6); }

/* Fit the 8-item nav within the 1200px container on mid-desktop widths:
   drop the inline phone (still in the utility bar) and tighten nav spacing. */
@media (max-width:1499px){ .header-phone{ display:none; } }
@media (min-width:1025px) and (max-width:1499px){
  .header-inner{ gap:12px; }
  .main-nav{ margin-left:2px; gap:0; }
  .main-nav > li > a{ padding:8px 9px; font-size:13.5px; }
}
/* Compact mobile top bar so the logo + CTA + toggle always fit */
@media (max-width:480px){
  .container{ padding-inline:16px; }
  .header-inner{ gap:10px; }
  .logo img{ height:32px; }
  .site-header.is-stuck .logo img{ height:30px; }
  .header-cta{ padding:10px 14px; font-size:13px; }
  .header-actions{ gap:8px; }
}
@media (max-width:360px){
  .container{ padding-inline:12px; }
  .logo img{ height:30px; }
  .header-cta{ padding:9px 12px; font-size:12.5px; }
}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--border);
  background:var(--background); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--chrome-ease), opacity var(--chrome-ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* keyboard focus visibility across chrome */
.site-header a:focus-visible,.site-header button:focus-visible,
.site-footer a:focus-visible,.site-footer button:focus-visible,
.utility-bar a:focus-visible,.utility-bar button:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:8px;
}

/* --------------------------------------------------------------------------
   5. MOBILE DRAWER (≤1024px)
   -------------------------------------------------------------------------- */
.nav-scrim{
  position:fixed; inset:0; background:rgba(16,17,38,.5); opacity:0; visibility:hidden;
  transition:opacity var(--chrome-ease), visibility var(--chrome-ease); z-index:45;
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* Utility bar compaction on small screens (prevents right-cluster overflow) */
@media (max-width:768px){
  .utility-support-label,.utility-login-label{ display:none; }
  .utility-link,.utility-login-toggle{ padding:5px 6px; }
  .utility-div{ display:none; }
  .utility-right{ gap:4px; }
}
@media (max-width:600px){ .utility-tagline{ display:none; } }
@media (max-width:400px){
  .utility-support,.utility-login-toggle{ padding:5px 4px; }
  .utility-login-toggle .caret{ display:none; }
  .utility-right{ gap:2px; }
}

@media (max-width:1024px){
  .nav-toggle{ display:flex; }
  .header-phone{ display:none; }

  .main-nav{
    position:fixed; top:0; right:0; left:auto; bottom:0; width:min(380px,86vw);
    background:var(--background); flex-direction:column; align-items:stretch;
    gap:0; margin:0; padding:calc(var(--header-h) + 12px) 0 32px; overflow-y:auto;
    transform:translateX(100%); transition:transform var(--chrome-ease);
    box-shadow:-20px 0 50px -20px rgba(20,21,47,.4); z-index:48;
    opacity:1; visibility:visible;   /* override legacy hidden-nav rules */
  }
  body.nav-open .main-nav{ transform:translateX(0); }

  .main-nav > li{ width:100%; border-bottom:1px solid var(--border); }
  .main-nav > li > a{
    width:100%; justify-content:space-between; padding:15px 20px; border-radius:0;
    font-size:15.5px;
  }
  .main-nav > li > a:hover,.main-nav > li.open > a,.main-nav > li:focus-within > a{ background:var(--primary-dark); }
  .main-nav > li > a .caret{ opacity:.8; }

  /* Panels become inline accordions in the drawer */
  .dropdown,.dropdown--mega{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; padding:0; width:auto;
    display:none; background:var(--paper-alt,#f7f7fc);
  }
  .main-nav > li.open > .dropdown,
  .main-nav > li.open > .dropdown--mega{ display:block; }
  .dropdown--mega{ display:none; }
  .main-nav > li.open > .dropdown--mega{ display:grid; grid-template-columns:1fr; gap:0; }
  .mega-head{ padding:14px 22px 4px; margin:0; }
  .mega-col{ gap:0; }
  .mega-col > a,.dropdown a{ padding:12px 24px; border-radius:0; font-size:14.5px; }
  .mega-col > a .mega-ico{ display:none; }
  .mega-promo{ margin:12px 20px; border-radius:12px; }
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.footer-cta{
  background:var(--grad-navy, linear-gradient(160deg,#14153a,#23246b 60%,#2c2d84));
  color:#fff;
}
.footer-cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:44px 0; flex-wrap:wrap;
}
.footer-cta-text h2{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; margin:0 0 6px; color:#fff; }
.footer-cta-text p{ font-size:.95rem; color:rgba(255,255,255,.82); margin:0; max-width:56ch; }
.footer-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.fcta-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:12px;
  font-weight:700; font-size:14.5px; transition:transform var(--chrome-ease), box-shadow var(--chrome-ease), background var(--chrome-ease);
}
.fcta-btn svg{ width:18px; height:18px; }
.fcta-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 26px -10px rgba(255,32,69,.6); }
.fcta-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.fcta-ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.22); }
.fcta-ghost:hover{ background:rgba(255,255,255,.18); }
.fcta-whatsapp{ background:#25D366; color:#0b2e1a; }
.fcta-whatsapp:hover{ background:#1fbb59; transform:translateY(-1px); }

.site-footer{ background:var(--footer-background); color:var(--footer-text); }
.footer-cols{
  display:grid; grid-template-columns:repeat(5,1fr); gap:32px 28px; padding:56px 0 40px;
}
.footer-col h4{
  color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  margin:0 0 16px;
}
.footer-col{ display:flex; flex-direction:column; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:var(--footer-text); font-size:.875rem; transition:color var(--chrome-ease); }
.footer-col a:hover{ color:var(--gold); }
.footer-col-toggle{
  display:none; width:100%; background:none; border:0; color:#fff; cursor:pointer;
  align-items:center; justify-content:space-between; padding:16px 0; font:inherit;
  font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col-toggle .fc-plus{ font-size:1.2rem; transition:transform var(--chrome-ease); }

/* Company / contact band */
.footer-company{
  border-top:1px solid rgba(255,255,255,.09);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; padding:36px 0;
}
.footer-brand-name{ display:inline-flex; align-items:baseline; font-size:1.5rem; font-weight:800; color:#fff; }
.footer-brand-name sup{ font-size:.6rem; color:var(--gold); margin-left:1px; }
.footer-brand-blurb{ color:var(--footer-muted); font-size:.875rem; line-height:1.6; margin:12px 0 18px; max-width:42ch; }
.footer-contact-list{ display:flex; flex-direction:column; gap:12px; font-size:.875rem; }
.footer-contact-list .fc-item{ display:flex; gap:10px; align-items:flex-start; color:var(--footer-text); }
.footer-contact-list .fc-item svg{ width:17px; height:17px; color:var(--gold); flex:0 0 auto; margin-top:2px; }
.footer-contact-list a:hover{ color:var(--gold); }
.footer-contact-list strong{ color:#fff; font-weight:600; display:block; }
.footer-contact-list small{ color:var(--footer-muted); }

/* Trust strip */
.footer-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.footer-trust .ft-label{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--footer-muted); width:100%; margin-bottom:2px; }
.footer-trust .ft-badge{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  font-size:.78rem; font-weight:600; color:#fff;
}
.footer-trust .ft-badge svg{ width:15px; height:15px; color:var(--gold); }

/* Social */
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:#fff;
  transition:background var(--chrome-ease), transform var(--chrome-ease);
}
.footer-social a:hover{ background:var(--accent); transform:translateY(-2px); }
.footer-social a svg{ width:17px; height:17px; }

/* Payment methods */
.footer-payments{ margin-top:18px; }
.footer-payments-label{ display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--footer-muted); margin-bottom:8px; }
.footer-payments img{ max-width:100%; height:auto; opacity:.95; }

/* Copyright bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 0; flex-wrap:wrap;
}
.footer-bottom p{ margin:0; font-size:.82rem; color:var(--footer-muted); }
.footer-bottom nav{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-bottom nav a{ font-size:.82rem; color:var(--footer-text); }
.footer-bottom nav a:hover{ color:var(--gold); }

/* --- Footer responsive --- */
@media (max-width:1024px){
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:8px 24px; padding:32px 0 8px; }
  .footer-company{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px){
  .footer-cta-inner{ padding:32px 0; }
  .footer-cta-actions{ width:100%; }
  .fcta-btn{ flex:1 1 auto; justify-content:center; }
  .footer-cols{ grid-template-columns:1fr; gap:0; padding:8px 0; }
  .footer-col h4{ display:none; }             /* replaced by accordion toggle */
  .footer-col-toggle{ display:flex; }
  .footer-col ul{ max-height:0; overflow:hidden; gap:0; transition:max-height var(--chrome-ease); }
  .footer-col.open ul{ max-height:640px; padding:6px 0 16px; gap:12px; }
  .footer-col.open .fc-plus{ transform:rotate(45deg); }
  .footer-bottom{ justify-content:flex-start; }
}