/* ============================================================================
 * ja_voyara — Home (Itemid 101) page overlay.
 * Pixel-parity fixes vs .pen Page/Home (EjCGg / dark rwLd4 / mobile F50Vgf).
 * Loaded by index.php only on the Home menu item, after template.css.
 * All values var-driven so darkmode.css auto-remaps in dark.
 * ========================================================================== */

/* §0 Hero lead max-width — .pen fnYfc width:680 (css sets 560 in acm/hero — override here) */
body.layout-home .acm-hero-lead {
  max-width: 680px;
}

/* §0b Hero CTA primary button padding — .pen jtXPw padding=[14,26] vs .btn base 13px */
body.layout-home .acm-hero-actions .btn-primary {
  padding: 14px 26px !important;
}

/* §1 Section eyebrows — .pen home uses PRIMARY orange (#C2562F), not the
 * default teal. WHY VOYARA / FEATURED TRIPS / DESIGNED, NOT PACKAGED /
 * TRAVELLER STORIES. (Trust-strip caption keeps its own muted grey.) */
body.layout-home .acm-features .voy-eyebrow,
body.layout-home .acm-destinations .voy-eyebrow,
body.layout-home .acm-fsplit .voy-eyebrow,
body.layout-home .acm-testimonials .voy-eyebrow {
  color: var(--voy-primary);
}

/* §2 Section heading sizes — base h2 renders ~36px; .pen wants:
 * Why=40, Destinations=40, Testimonials=40, Feature-split=38, CTA=44. */
body.layout-home .acm-features .voy-section__head h2,
body.layout-home .acm-destinations .acm-dest-head h2,
body.layout-home .acm-testimonials .voy-section__head h2 {
  font-size: 40px;
  line-height: 1.15;
}
body.layout-home .acm-fsplit .acm-fsplit-body h2 {
  font-size: 38px;
  line-height: 1.15;
}
body.layout-home .acm-cta .acm-cta-title {
  font-size: 44px;
  line-height: 1.12;
}

/* §2b Why-section head width — .pen Why Head (a2J0ua) is max-width 640,
 * not the shared .voy-section__head default of 680. */
body.layout-home .acm-features .voy-section__head {
  max-width: 640px;
}

/* §3 Why-section feature items — .pen Card/Feature (wwueo) is a white,
 * bordered, rounded card (r22, pad 26, border #E5DCD0), not a flat column. */
body.layout-home .acm-features .acm-feature {
  background: var(--voy-surface);
  border: 1px solid var(--voy-border);
  border-radius: var(--voy-r-lg);
  padding: 26px;
  box-shadow: var(--voy-sh-sm);
}

/* §4 Stats band label — .pen qKVf8/etc fill #FFFFFFCC (translucent white .8),
 * not the solid --voy-secondary-ink (#EAF4F3) the ACM css applies. */
body.layout-home .acm-statistics .acm-stat-label {
  color: rgba(255, 255, 255, 0.8);
}

/* §5 CTA sub on the image card — .pen RXTKm fill #FFFFFFD9 (white .85),
 * not solid #fff. */
body.layout-home .acm-cta .acm-cta-card.has-image .acm-cta-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* §6 Hero desktop search bar in DARK — .pen dark Search Bar (rbMr5) is a dark
 * surface (#211B16 / border #352C24), NOT the white the ACM css forces.
 * [DARK-STUCK-LIGHT] override (specificity beats html.t4-dark .acm-hero-search). */
html.t4-dark body.layout-home .acm-hero-search {
  background: var(--voy-surface);
  border-color: var(--voy-border);
}
html.t4-dark body.layout-home .acm-hero-search-input {
  color: var(--voy-text);
}
html.t4-dark body.layout-home .acm-hero-search-input::placeholder {
  color: var(--voy-muted);
}
html.t4-dark body.layout-home .acm-hero-search-icon {
  color: var(--voy-muted);
}

/* ============================================================================
 * §7 MOBILE (≤767.98) — .pen mobile frame F50Vgf.
 * Section titles drop 40→28, fsplit 38→28, CTA 44→28 (sub 17→15); section
 * vertical padding 88→56 (stats 64→48) per the mobile frame.
 * ========================================================================== */
@media (max-width: 767.98px) {
  body.layout-home .acm-features .voy-section__head h2,
  body.layout-home .acm-destinations .acm-dest-head h2,
  body.layout-home .acm-testimonials .voy-section__head h2,
  body.layout-home .acm-fsplit .acm-fsplit-body h2,
  body.layout-home .acm-cta .acm-cta-title {
    font-size: 28px;
    line-height: 1.15;
  }
  body.layout-home .acm-cta .acm-cta-sub {
    font-size: 15px;
  }
  /* Section vertical rhythm: .pen mobile Why/Dest/Test/CTA [56,20], Stats [48,20] */
  body.layout-home .acm-features,
  body.layout-home .acm-destinations,
  body.layout-home .acm-fsplit,
  body.layout-home .acm-testimonials,
  body.layout-home .acm-cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  body.layout-home .acm-statistics {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}