/* Atlas v33 patch: hard fix for header overlap + stable booking grid + autocomplete dropdown + social icons */
:root{
  --atlas-header-offset-desktop: 190px;
  --atlas-header-offset-mobile: 140px;
}

/* If theme positions header over the hero, force the hero to create space */
section.main-banner#booking-box{
  position: relative !important;
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: var(--atlas-header-offset-mobile) !important;
  scroll-margin-top: var(--atlas-header-offset-mobile) !important;
}
@media (min-width: 992px){
  section.main-banner#booking-box{
    padding-top: var(--atlas-header-offset-desktop) !important;
    scroll-margin-top: var(--atlas-header-offset-desktop) !important;
  }
}

/* Ensure header stays above dropdowns but doesn't visually break layout */
header.main-header{ z-index: 9999 !important; }

/* Google Places dropdown must appear above header/form */
.pac-container{ z-index: 1000000 !important; }

/* Booking form layout */
.main-banner .form-box{ background: rgba(255,255,255,0.92) !important; border-radius: 14px !important; margin-top: 0 !important; }
.atlas-booking-grid{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.atlas-booking-grid .atlas-full{ grid-column: 1 / -1 !important; }
.atlas-booking-grid .atlas-half{ grid-column: auto !important; }
.atlas-booking-grid label{ margin-bottom: 6px !important; font-size: 14px !important; }
.atlas-booking-grid .q-input{ height: 44px !important; }
.atlas-booking-grid textarea.q-input{ height: 88px !important; }
#dvReturn.atlas-half{ grid-column: auto !important; }

/* Social icons: keep only first two */
.social-list li:nth-child(n+3){ display:none !important; }
/* Prevent any stray icon-font letters */
.social-list a{ font-size: 0 !important; }
.social-list a i{ font-size: 16px !important; }
/* v34 additions below */

/* =========================
   v34: Hero/layout fit at 100% zoom
   Goals:
   - Prevent header overlap without relying on vw-based offsets
   - Keep hero content (incl. “Atlas Taxicabs limited” + full form) usable on common laptop/desktop heights
   ========================= */

:root{
  /* Use mostly px (not vw) so zoom/viewport width changes don't shrink the offset */
  --atlas-header-offset-mobile: 130px;
  --atlas-header-offset-tablet: 160px;
  --atlas-header-offset-desktop: 200px;
  --atlas-header-offset: var(--atlas-header-offset-mobile);
}

@media (min-width: 768px){
  :root{ --atlas-header-offset: var(--atlas-header-offset-tablet); }
}

@media (min-width: 992px){
  :root{ --atlas-header-offset: var(--atlas-header-offset-desktop); }
}

/* Apply offset globally so ALL sections start below fixed header */
body{
  padding-top: var(--atlas-header-offset);
}

/* We no longer need large per-section padding hacks */
section.main-banner#booking-box,
section.main-banner.home{
  padding-top: 0 !important;
  /* Avoid clipping the banner content if base CSS uses fixed heights */
  height: auto !important;
  min-height: calc(100vh - var(--atlas-header-offset)) !important;
  overflow: visible !important;
}

/* Ensure the banner content sits comfortably below header even if base CSS uses positioning */
section.main-banner.home .banner-content{
  margin-top: 8px;
}

/* Booking form: keep it fully usable on shorter viewports */
section.main-banner.home .form-box{
  /* If the form is taller than the remaining viewport, allow internal scroll */
  max-height: calc(100vh - var(--atlas-header-offset) - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Slightly tighten the form on desktop so it fits without looking cramped */
section.main-banner.home .form-box label{ margin-bottom: 4px; }
section.main-banner.home .atlas-booking-grid{ gap: 10px; }
section.main-banner.home .input-field,
section.main-banner.home select,
section.main-banner.home textarea{
  font-size: 14px;
  line-height: 1.2;
}

/* Reduce vertical padding inside controls (only if base CSS is generous) */
section.main-banner.home input.input-field,
section.main-banner.home select,
section.main-banner.home textarea{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Keep the headline block from being pushed too low on shorter screens */
@media (max-height: 780px){
  section.main-banner.home h3{ margin-bottom: 10px; }
  section.main-banner.home .hero-btns{ margin-top: 14px; }
}