/* ==========================================================================
   HEADER & FOOTER — ported from design/homepage-mockup.html. Styles the
   template-part header/footer (and any Theme Builder build that reuses the
   same classes). Prefix: aaa-
   ========================================================================== */

/* ── Utility bar ── */
.aaa-util{background:var(--aaa-navy);color:#cdddf3;font-size:.86rem}
.aaa-util .aaa-container{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:18px}
.aaa-util a:hover{color:var(--aaa-gold)}
.aaa-util__left,.aaa-util__right{display:flex;gap:16px;align-items:center}
.aaa-util .pill{color:var(--aaa-gold);font-weight:700}
.aaa-util .sep{opacity:.3}

/* ── Header shell ── */
.aaa-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(7,32,63,.4);transition:background .3s,box-shadow .3s}
.aaa-header .aaa-container{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:24px}

/* Logo */
.aaa-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.aaa-logo__mark{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3d9bff,var(--aaa-blue-deep));display:grid;place-items:center;color:#fff;font-family:var(--aaa-serif);font-weight:700;font-size:1.45rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.aaa-logo__name{font-family:var(--aaa-serif);font-weight:700;font-size:1.3rem;line-height:1;color:var(--aaa-ink)}
.aaa-logo__name small{display:block;font-family:var(--aaa-sans);font-weight:600;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--aaa-blue);margin-top:6px}

/* Nav */
.aaa-nav{display:flex;gap:30px;align-items:center}
.aaa-nav>a,.aaa-has-mega>a{font-weight:600;font-size:1rem;color:var(--aaa-ink);position:relative;display:flex;align-items:center;gap:6px;padding:6px 0}
.aaa-nav>a:hover,.aaa-has-mega>a:hover{color:var(--aaa-blue)}
.aaa-nav>a::after,.aaa-has-mega>a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--aaa-gold);border-radius:3px;transition:.25s}
.aaa-nav>a:hover::after,.aaa-has-mega:hover>a::after{width:100%}
.aaa-nav>a.is-active,.aaa-has-mega>a.is-active{color:var(--aaa-blue)}
.aaa-nav>a.is-active::after,.aaa-has-mega>a.is-active::after{width:100%}
.aaa-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-bottom:3px;transition:.25s}
.aaa-has-mega:hover .aaa-caret{transform:rotate(-135deg);margin-bottom:-3px}

/* Header CTA */
.aaa-header__cta{display:flex;align-items:center;gap:16px}
.aaa-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;color:var(--aaa-ink)}
.aaa-phone small{display:block;font-weight:500;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aaa-blue)}
.aaa-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.aaa-burger span{width:26px;height:3px;background:var(--aaa-ink);border-radius:3px;transition:.25s}

/* ── Destinations mega-menu (from inc/mega-menu.php) ── */
.aaa-has-mega{position:static}
.mega-menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--aaa-blue);box-shadow:0 28px 50px -24px rgba(7,32,63,.4);opacity:0;visibility:hidden;transform:translateY(8px);transition:.28s;z-index:55}
.aaa-has-mega:hover .mega-menu{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:var(--aaa-maxw);margin:0 auto;padding:34px 30px 40px;display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:24px}
.mega-inner--safaris{grid-template-columns:1.6fr 1fr 1.15fr}
.mega-col h5{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aaa-blue);margin-bottom:14px;font-weight:700}
.mega-card{position:relative;border-radius:13px;overflow:hidden;height:140px;display:flex;align-items:flex-end;color:#fff;margin-bottom:12px;text-decoration:none}
.mega-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.mega-card:hover img{transform:scale(1.08)}
.mega-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,32,63,.9),rgba(7,32,63,.05) 75%)}
.mega-card .t{position:relative;padding:13px 15px}
.mega-card .t b{font-family:var(--aaa-serif);font-size:1.12rem;display:block;color:#fff;line-height:1.15}
.mega-card .t small{font-size:.8rem;opacity:.9}
.mega-cards-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mega-cards-2 .mega-card{height:150px;margin-bottom:0}
.mega-list{list-style:none;margin:0;padding:0}
.mega-list li a{display:block;padding:8px 0;font-size:.96rem;font-weight:500;color:var(--aaa-ink-soft);border-bottom:1px solid var(--aaa-line);transition:.2s}
.mega-list li a:hover{color:var(--aaa-blue);padding-left:6px}
.mega-list li a strong{color:var(--aaa-blue)}
.mega-feature{background:var(--aaa-navy);color:#fff;border-radius:13px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.mega-feature h4{font-family:var(--aaa-serif);font-size:1.4rem;margin:8px 0;color:#fff}
.mega-feature p{font-size:.92rem;opacity:.85}
.mega-feature .aaa-btn{align-self:flex-start}
.mega-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--aaa-gold)}

/* ── Transparent header over hero (body.aaa-header-transparent, front page) ──
   Util bar + header both overlay the hero as a stack (util at top:0, header below)
   so they never collide, and the hero image runs to the very top behind them. */
.aaa-header-transparent .aaa-util{position:absolute;top:0;left:0;right:0;z-index:61;background:transparent;color:#eaf2ff}
.aaa-header-transparent .aaa-header{position:absolute;top:44px;left:0;right:0;background:transparent;box-shadow:none;backdrop-filter:none}
/* …but NOT once the mobile drawer is open (.aaa-nav.is-open), or the white text
   would be invisible on the white drawer. */
.aaa-header-transparent .aaa-header:not(.is-scrolled) .aaa-nav:not(.is-open)>a,
.aaa-header-transparent .aaa-header:not(.is-scrolled) .aaa-nav:not(.is-open) .aaa-has-mega>a,
.aaa-header-transparent .aaa-header:not(.is-scrolled) .aaa-phone,
.aaa-header-transparent .aaa-header:not(.is-scrolled) .aaa-logo__name{color:#fff}
.aaa-header-transparent .aaa-header:not(.is-scrolled) .aaa-burger span{background:#fff}
/* On scroll: util slides away, header becomes a solid fixed bar */
.aaa-header-transparent .aaa-header.is-scrolled{position:fixed;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(7,32,63,.4)}

/* ── Footer ── */
.aaa-footer{background:var(--aaa-navy);color:#aec4e0;padding-top:74px}
.aaa-footer h5{color:#fff;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.aaa-footer a{color:#aec4e0}
.aaa-footer a:hover{color:var(--aaa-gold)}
.aaa-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.aaa-footer__brand .name{font-family:var(--aaa-serif);color:#fff;font-size:1.6rem;margin-bottom:14px;font-weight:700}
.aaa-footer__brandlogo{display:inline-block;margin-bottom:16px;text-decoration:none}
.aaa-footer__brandlogo img{height:56px;width:auto;max-width:230px;display:block}
.aaa-footer__brand p{opacity:.82;font-size:.96rem;max-width:34ch}
.aaa-footer__contact{display:grid;gap:9px;margin-top:18px;font-size:.95rem}
.aaa-footer__contact a{display:flex;gap:10px;align-items:flex-start}
.aaa-footer__menu{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aaa-footer__menu a{font-size:1rem}
.aaa-socials{display:flex;gap:11px;margin-top:18px}
.aaa-socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-weight:700;color:#fff}
.aaa-socials a:hover{background:var(--aaa-gold);border-color:var(--aaa-gold);color:var(--aaa-navy)}
.aaa-footer__badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.aaa-footer__badges .b{border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px;font-size:.78rem;text-align:center;line-height:1.25}
.aaa-footer__badges .b b{color:var(--aaa-gold);font-family:var(--aaa-serif)}
.aaa-footer__bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0 30px;font-size:.86rem;opacity:.85;flex-wrap:wrap;gap:12px}
.aaa-pay{display:flex;gap:8px}
.aaa-pay span{background:rgba(255,255,255,.09);border-radius:6px;padding:4px 9px;font-size:.72rem;letter-spacing:.05em}

/* ── Floating WhatsApp + mobile sticky bar ── */
.aaa-wa{position:fixed;right:24px;bottom:24px;z-index:9000;display:flex;align-items:center;background:#25d366;color:#fff;border-radius:50px;overflow:hidden;font-weight:700;text-decoration:none;transition:transform .25s ease,filter .25s ease;animation:aaaWaPulse 2.4s ease-out infinite}
.aaa-wa:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.07)}
.aaa-wa:active{transform:scale(.98)}
.aaa-wa .ic{width:60px;height:60px;display:grid;place-items:center;font-size:2rem;color:#fff}
.aaa-wa .ic i{line-height:1}
.aaa-wa .lbl{max-width:0;overflow:hidden;white-space:nowrap;transition:.35s}
.aaa-wa:hover .lbl{max-width:220px;padding-right:22px}
@keyframes aaaWaPulse{
  0%{box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 0 0 0 rgba(37,211,102,0)}
}
@media(prefers-reduced-motion:reduce){.aaa-wa{animation:none}}
.aaa-mobile-bar{display:none}

/* ── Responsive ── */
@media(max-width:1024px){.aaa-util__left .aaa-util__email{display:none}.mega-inner{grid-template-columns:1fr 1fr}}
/* Drawer backdrop (created by navigation.js) — taps close the menu */
.aaa-nav-backdrop{position:fixed;inset:0;background:rgba(7,18,38,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:999}
.aaa-nav-backdrop.is-on{opacity:1;visibility:visible}
body.aaa-nav-locked{overflow:hidden}
/* hide the floating CTAs while the drawer is open (they sit above it otherwise) */
body.aaa-nav-locked .aaa-mobile-bar,body.aaa-nav-locked .aaa-wa{display:none!important}
.aaa-nav-close{display:none}

@media(max-width:980px){
  .aaa-phone{display:none}
  .aaa-burger{display:flex}
  .aaa-footer__grid{grid-template-columns:1fr 1fr}

  /* ── Mobile slide-in drawer ── */
  .aaa-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:330px;max-width:88vw;height:100vh;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:74px 22px 32px;
    background:#fff;box-shadow:-20px 0 50px -20px rgba(7,32,63,.4);
    transform:translateX(100%);transition:transform .3s ease;
    z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .aaa-nav.is-open{transform:none}
  .aaa-nav-close{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:16px;width:42px;height:42px;border:none;background:var(--aaa-mist);border-radius:50%;font-size:1.7rem;line-height:1;color:var(--aaa-ink);cursor:pointer;padding:0;flex:0 0 auto}

  /* Every row: full width, dark text (beat the transparent-header white), visible */
  .aaa-nav>a,.aaa-has-mega{display:block;width:100%;flex:0 0 auto}
  .aaa-nav.is-open a{color:var(--aaa-ink)!important}
  .aaa-nav>a,.aaa-has-mega>a{
    display:flex;align-items:center;width:100%;
    padding:15px 2px;font-size:1.06rem;font-weight:600;
    border-bottom:1px solid var(--aaa-line);
  }
  .aaa-nav>a::after,.aaa-has-mega>a::after{display:none} /* no desktop underline bar */
  .aaa-has-mega .aaa-caret{margin-left:auto;transition:transform .25s}
  .aaa-has-mega.mega-open>a{color:var(--aaa-blue)!important}
  .aaa-has-mega.mega-open .aaa-caret{transform:rotate(-135deg);margin-bottom:0}

  /* Mega = collapsible accordion, COLLAPSED by default */
  .mega-menu{position:static;transform:none;box-shadow:none;border:none;background:#fff;
    display:none;opacity:1;visibility:visible;width:100%;min-width:0}
  .aaa-has-mega.mega-open .mega-menu{display:block}
  .mega-inner,.mega-inner--safaris{display:block;max-width:100%;padding:2px 0 10px;margin:0}
  .mega-col{display:block;margin:0}
  .mega-col h5{margin:14px 0 2px;font-size:.7rem;color:var(--aaa-blue)}

  /* Featured image cards → tidy text rows (no oversized images in the drawer) */
  .mega-card{position:static;height:auto;display:block;border-radius:0;margin:0;overflow:visible;color:var(--aaa-ink)}
  .mega-card img,.mega-card .ov,.mega-card .t small{display:none!important}
  .mega-card .t{position:static;padding:12px 8px;border-bottom:1px solid var(--aaa-line)}
  .mega-card .t b{font-family:var(--aaa-sans);font-size:.98rem;font-weight:600;color:var(--aaa-ink)!important;line-height:1.3}
  .mega-cards-2{display:block}
  .mega-list{padding-left:8px}
  .mega-list li a{padding:11px 0;font-size:.97rem}
  .mega-feature{display:none}
}
@media(max-width:680px){
  .aaa-footer__grid{grid-template-columns:1fr}
  .aaa-header__cta .aaa-btn{display:none}
  .aaa-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:8999;background:#fff;box-shadow:0 -8px 24px -12px rgba(7,32,63,.4);padding:12px 16px;display:flex;gap:12px}
  .aaa-mobile-bar .aaa-btn{flex:1;padding:.9em 1em}
  body{padding-bottom:74px}
  .aaa-wa{bottom:84px}
}