/*
 * Phase 2 — header + footer, loaded site-wide (see inc/hook/cab-header-cta.php).
 * Extends real tokens from style.css: --cab-primary, --cab-accent, --cab-dark, --cab-platinum.
 *
 * IMPORTANT — how the mega menu works:
 * No custom PHP nav walker was added. WordPress core's default Walker_Nav_Menu
 * already nests <ul class="sub-menu"> inside <li class="menu-item-has-children">
 * to any depth, so a 3-column mega panel is built entirely in Appearance → Menus:
 *
 *   Book a Cab                     (top-level item)
 *     └─ Trip Type                 (depth-1 "column header" — link to # or a real page)
 *          └─ One Way              (depth-2 — real link)
 *          └─ Round Trip           (depth-2 — real link)
 *     └─ Popular Routes            (depth-1 "column header")
 *          └─ Jaipur → Delhi       (depth-2 — real link)
 *     └─ Car Types                 (depth-1 "column header")
 *          └─ Sedan                (depth-2 — real link)
 *
 * A top-level item with ONLY depth-1 children (no depth-2) renders as a plain
 * single-column dropdown automatically — no extra config needed, no separate
 * "simple dropdown" menu to maintain.
 */

:root{
  --cab-nav-line: rgba(15,27,61,.08);
  --cab-nav-muted: #6B7280;
}

/* ===== Sticky header shell ===== */
#masthead.site-header{
  position: sticky; top: 0; z-index: 200;
  background: #fff;
  box-shadow: 0 1px 0 var(--cab-nav-line);
  transition: box-shadow .2s ease;
}
/* Subtle "shrink" polish once scrolled — toggled by assets/js/cab-header-scroll.js */
#masthead.site-header.is-scrolled{ box-shadow: 0 4px 16px rgba(15,27,61,.10); }
#masthead.site-header.is-scrolled .container{ padding-top: 8px; padding-bottom: 8px; }
#masthead.site-header .container{ transition: padding .2s ease; }
#masthead.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: nowrap;
}
#masthead .site-branding{ flex: 0 0 auto; }

/* Logo — fixed box, image scales inside without distortion or layout
   shift. object-fit:contain keeps the real image's aspect ratio, so it
   won't stretch even though the box ratio (235:100 ≈ 2.35:1) differs
   slightly from the mobile box ratio (120:50 = 2.4:1). */
#masthead .custom-logo-link{ display: block; line-height: 0; }
#masthead .custom-logo{
  width: 235px; height: 100px; object-fit: contain; display: block;
}
@media (max-width: 980px){
  #masthead .custom-logo{ width: 120px; height: 50px; }
}
#masthead #main-nav{ flex: 1 1 auto; display: flex; justify-content: center; }
#masthead .cab-header-cta{ flex: 0 0 auto; display: flex; gap: 10px; }

/* CTA buttons need dark text on this light header (cab-btn-outline in style.css
   is tuned for a dark hero background — override just inside the header). */
#masthead .cab-header-cta .cab-btn{ padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }
#masthead .cab-header-cta .cab-btn-outline{
  background: transparent; color: var(--cab-dark); border: 1.5px solid var(--cab-nav-line);
}
#masthead .cab-header-cta .cab-btn-outline:hover{ border-color: var(--cab-primary); color: var(--cab-primary); }
#masthead .cab-header-cta .cab-btn svg{ margin-right: 6px; vertical-align: -3px; }
#masthead .cab-header-cta-call span{ display: none; } /* icon-only call button on smaller desktops */
@media (min-width: 1200px){ #masthead .cab-header-cta-call span{ display: inline; } }

/* ===== Top contact bar (existing #top-header, restyled only) ===== */
#top-header{ background: var(--cab-dark); color: #B7BFD6; font-size: 12.5px; }
#top-header .container{ display: flex; justify-content: space-between; align-items: center; padding: 7px 0; flex-wrap: wrap; }
#top-header #quick-contact ul{ display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
#top-header #quick-contact a{ color: #D7DCEC; font-weight: 600; }
#top-header #quick-contact a:hover{ color: var(--cab-accent); }
#top-header .quick-message{ color: #8C97BB; }
#top-header .cab-topbar-right{ display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
#top-header .cab-topbar-right a{ color: #D7DCEC; font-weight: 600; }
#top-header .cab-topbar-right a:hover{ color: var(--cab-accent); }

/* ===== Primary nav base ===== */
.main-navigation{ position: relative; }
.main-navigation ul#primary-menu{ display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-navigation ul#primary-menu > li{ position: relative; }
.main-navigation ul#primary-menu > li > a{
  display: block; padding: 22px 14px; font-weight: 600; font-size: 14.5px; color: var(--cab-dark);
  text-decoration: none;
}
.main-navigation ul#primary-menu > li > a:hover{ color: var(--cab-primary); }
.main-navigation ul#primary-menu > li.menu-item-has-children > a::after{
  content: ''; display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 7px; margin-bottom: 1px;
  transition: transform .15s;
}
.main-navigation ul#primary-menu > li.menu-item-has-children:hover > a::after{ transform: rotate(-135deg); }

/* ===== Dropdown / mega panel (depth-1 <ul class="sub-menu">) ===== */
.main-navigation ul.sub-menu{
  list-style: none; margin: 0; padding: 18px; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--cab-nav-line); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(15,27,61,.14);
  min-width: 220px; display: none; z-index: 50;
}
.main-navigation ul#primary-menu > li.menu-item-has-children:hover > ul.sub-menu{ display: block; }

/* Plain dropdown (no grandchildren): simple vertical link list */
.main-navigation ul.sub-menu > li > a{
  display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--cab-dark); text-decoration: none; white-space: nowrap;
}
.main-navigation ul.sub-menu > li > a:hover{ background: var(--cab-platinum); color: var(--cab-primary); }

/* Mega panel (has grandchildren via :has()): switch to a multi-column grid.
   Browsers without :has() support simply keep the plain vertical dropdown
   above — a safe, non-broken fallback, not a hard requirement. */
.main-navigation ul.sub-menu:has(> li.menu-item-has-children){
  display: none; padding: 26px; min-width: 620px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px;
}
.main-navigation ul#primary-menu > li.menu-item-has-children:hover > ul.sub-menu:has(> li.menu-item-has-children){
  display: grid;
}
.main-navigation ul.sub-menu:has(> li.menu-item-has-children) > li > a{
  display: block; padding: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cab-nav-muted); pointer-events: none; /* column header, not a link target */
}
.main-navigation ul.sub-menu:has(> li.menu-item-has-children) > li > ul.sub-menu{
  position: static; display: block; box-shadow: none; border: none; padding: 0; margin: 0; min-width: 0;
}
.main-navigation ul.sub-menu:has(> li.menu-item-has-children) > li > ul.sub-menu > li > a{
  padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--cab-dark); pointer-events: auto;
}
.main-navigation ul.sub-menu:has(> li.menu-item-has-children) > li > ul.sub-menu > li > a:hover{ color: var(--cab-primary); }

/* ===== Mobile: hide desktop nav/CTA, let existing Sidr off-canvas menu handle mobile ===== */
@media (max-width: 980px){
  #masthead #main-nav{ display: none; } /* desktop nav hidden below 980px */
  #masthead .cab-header-cta{ display: none; }
}
/* NOTE: mobile menu itself (#mobile-trigger → Sidr off-canvas panel, dark skin,
   third-party/sidr/) is untouched — it's a real, working plugin-based menu, not
   a plain toggle div. Restyling it safely would need its own pass against
   third-party/sidr/css/jquery.sidr.dark.css rather than guessed CSS here. */

/* ===== Footer polish (dynamic content untouched, wrapper/spacing only) ===== */
.site-footer{ padding: 40px 0 0; background: var(--cab-dark); color: #B7BFD6; }
.site-footer .copyright{ font-size: 12.5px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 24px; }
.site-footer .site-info{ font-size: 12px; color: #7C88AC; padding-bottom: 24px; }
.site-footer .site-info a{ color: #96A0C0; }
.site-footer #footer-navigation ul{ display: flex; gap: 18px; list-style: none; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.site-footer #footer-navigation a{ color: #96A0C0; font-size: 13px; }
.site-footer #footer-navigation a:hover{ color: #fff; }

/* ===== Sitewide testimonials-before-footer (every page except homepage) ===== */
.cab-sitewide-testimonials{ background: var(--cab-dark, #0f1b3d); padding: 56px 24px; }
.cab-sitewide-testimonials .cab-section-title h2,
.cab-sitewide-testimonials .cab-section-eyebrow{ color: #fff; }
.cab-sitewide-testimonials-grid{ max-width: 1100px; margin: 0 auto; }
.cab-sitewide-testimonials .cab-review-card{ background: #16234a; border: 1px solid rgba(255,255,255,.08); }
.cab-sitewide-testimonials .cab-review-card p{ color: #D7DCEC !important; }
.cab-sitewide-testimonials .cab-review-author strong{ color: #fff; }