/* ==========================================================================
   ELEMENTOR OVERRIDES — conflict fixes & edge-to-edge. Loads AFTER Elementor.
   Fixes the four homepage-hero issues flagged on the live site:
     1. header styling   2. white space around hero
     3. content alignment 4. font/style not matching the mockup
   ========================================================================== */

/* Container width to match the design system */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px}
.e-con{--container-max-width:1280px}

/* ── (4) FONT/STYLE — force our brand fonts over Elementor / Hello defaults ──
   Our widgets output raw <h1>…<h3>, so Elementor never injects a font on them;
   Hello Elementor's base rules can win on the front end. Force ours with !important. */
body,
.elementor-widget-container,
.e-con,.e-con-inner,
.aaa-hero,.aaa-trust,.aaa-how,.aaa-reviews,.aaa-cta,
.aaa-why,.aaa-tour-card,.aaa-post,.aaa-dest{font-family:var(--aaa-sans)}

.aaa-hero h1,.aaa-hero h1 em,
.aaa-sec-head h2,.aaa-sec-head h2 em,
.aaa-tour-card h3,.aaa-step h3,.aaa-dest h3,
.aaa-why h2,.aaa-why h2 em,.aaa-feature b,
.aaa-reviews h2,.aaa-rev__quote,.aaa-rev__stat b,
.aaa-post h3,.aaa-cta h2,.aaa-cta h2 em,
.aaa-trust__item b{font-family:var(--aaa-serif) !important}

.aaa-hero h1 em,.aaa-sec-head h2 em,.aaa-why h2 em,.aaa-cta h2 em{font-style:italic !important}

/* Future-proof: force the Fraunces display serif on EVERY heading inside any
   Afrikan Accent widget (About, Contact, Experts, listings, …) and our single-CPT
   templates. The explicit list above missed newer widgets, so Hello's base font
   was winning on their <h1>–<h4>. This one rule covers them all. */
[class*="elementor-widget-aaa_"] h1,
[class*="elementor-widget-aaa_"] h2,
[class*="elementor-widget-aaa_"] h3,
[class*="elementor-widget-aaa_"] h4,
.aaa-tour-single h1,.aaa-tour-single h2,.aaa-tour-single h3,
.aaa-acc-single h1,.aaa-acc-single h2,.aaa-acc-single h3,
.single-aaa-destination h1,.single-aaa-destination h2,.single-aaa-destination h3{font-family:var(--aaa-serif) !important}

/* ── (2) WHITE SPACE — let our full-width sections bleed edge-to-edge ──
   regardless of whether the host Elementor container is boxed or full-width. */
.aaa-full-bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Kill the vertical padding/gap of any Elementor container that wraps one of our
   section widgets — our widgets supply their own band padding (.aaa-section), so
   the container padding only shows up as white seams between full-bleed bands. */
.e-con:has(> .e-con-inner > [class*="elementor-widget-aaa_"]),
.e-con-inner:has(> [class*="elementor-widget-aaa_"]),
.e-con:has(> .elementor-widget-wrap > [class*="elementor-widget-aaa_"]){
  padding-top:0 !important;padding-bottom:0 !important;--gap:0px;gap:0
}
[class*="elementor-widget-aaa_"]{margin-top:0 !important;margin-bottom:0 !important}

/* Image fills must beat the global `img{height:auto}` + Elementor's own img rules. */
.aaa-why__main img,.aaa-hero__bg img,.aaa-cta__bg img,.aaa-dest img,
.aaa-tour-card .ph img,.aaa-post .ph img,.aaa-gallery a img,.aaa-insta a img{height:100% !important}

/* (1) Transparent header overlaying the hero on the front page:
   when the body carries .aaa-header-transparent (set on is_front_page),
   pull the first hero up under a fixed/sticky Theme-Builder or part header. */
.aaa-header-transparent .elementor-widget-aaa_hero .aaa-hero{margin-top:0}

/* (3) ALIGNMENT — our hero centres a 1280 content rail and left-aligns inside it
   (matches the mockup). The full-bleed above restores the correct page gutter. */
.aaa-hero .aaa-container{width:100%}

/* Remove default theme content padding on Elementor full-width pages */
.elementor-page .site-main,
.elementor-page .entry-content{margin:0;padding:0}

/* Editor canvas: keep full-bleed sections from forcing a horizontal scrollbar */
.elementor-editor-active .aaa-full-bleed{margin-left:auto;margin-right:auto;width:100%}

/* Brand buttons rendered as <button> (planner, tour inquiry, wizard…) lose their
   pill radius to Elementor/Hello's button reset — restore the rounded corners. */
button.aaa-btn{border-radius:50px !important}

/* (4b) Planner / search button — Elementor resets <button>, so force our fill and
   let it fill the search-card cell so it reads as a real, prominent button. */
.aaa-planner__card .aaa-planner__btn{height:100%;min-width:172px;white-space:nowrap;border-radius:50px !important}
.aaa-planner__card .aaa-btn--primary{background:var(--aaa-blue) !important;color:#fff !important;border-color:var(--aaa-blue) !important;box-shadow:0 14px 30px -12px rgba(23,129,254,.7) !important}
.aaa-planner__card .aaa-btn--primary:hover{background:var(--aaa-blue-deep) !important;color:#fff !important}