/* =============================================================
   BEAST OF AFRICA — HEADER v11.0
   Luxury Cinematic Safari Header
   Tokens from style.css: --forest, --sand, --mist, --surface,
   --surface-2, --text, --muted, --font-serif, --font-body,
   --ease, --contain, --gutter
============================================================= */

/* ── Outer shell ── */
.boa-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

/* Direction-aware hide */
.boa-header.hidden {
  transform: translateY(-100%);
}

/* ── Resets inside header ── */
.boa-header *,
.boa-header *::before,
.boa-header *::after {
  box-sizing: border-box;
}
.boa-header a { text-decoration: none; }

/* =============================================================
   TOP BAR
============================================================= */

.boa-topbar {
  height: var(--hdr-topbar, 32px);
  overflow: hidden;
  background: rgba(8, 14, 12, .98);
  border-bottom: 1px solid rgba(200, 178, 138, .07);
  transition:
    height  .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
  will-change: height, opacity;
}

.boa-header.scrolled .boa-topbar {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.boa-topbar__inner {
  max-width: var(--contain, 1380px);
  margin: 0 auto;
  padding: 0 var(--gutter, 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.boa-topbar__left,
.boa-topbar__right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Live pulse dot */
.boa-topbar__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sand, #c8b28a);
  box-shadow: 0 0 10px var(--sand, #c8b28a);
  animation: boaPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes boaPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.7); opacity: .3; }
}

.boa-topbar__tagline {
  font-family: var(--font-body, sans-serif);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200, 178, 138, .55);
  font-weight: 500;
}

.boa-topbar__link,
.boa-topbar__wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-body, sans-serif);
  font-size: .72rem;
  color: rgba(238, 245, 242, .52);
  transition: color .3s var(--ease, ease);
}

.boa-topbar__link:hover { color: var(--sand, #c8b28a); }

.boa-topbar__wa { color: rgba(37, 211, 102, .65); }
.boa-topbar__wa:hover { color: rgba(37, 211, 102, .9); }

.boa-topbar__sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .1);
  flex-shrink: 0;
}

/* =============================================================
   MAIN BAND
============================================================= */

.boa-header__main {
  height: var(--hdr-main, 68px);
  background: rgba(8, 14, 12, .72);
  border-bottom: 1px solid rgba(200, 178, 138, .06);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  transition:
    height           .45s cubic-bezier(.22,1,.36,1),
    background       .4s ease,
    backdrop-filter  .4s ease;
  will-change: height, background;
}

/* Shrink on scroll */
.boa-header.scrolled .boa-header__main {
  height: var(--hdr-scrolled-main, 58px);
  background: rgba(8, 14, 12, .92);
}

.boa-header__inner {
  max-width: var(--contain, 1380px);
  margin: 0 auto;
  padding: 0 var(--gutter, 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* =============================================================
   BRAND
============================================================= */

.boa-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  color: var(--text, #eef5f2);
}

.boa-brand__mark {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(200,178,138,.2), transparent 68%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(200, 178, 138, .1);
  flex-shrink: 0;
  transition: transform .45s var(--ease, ease);
}

.boa-brand:hover .boa-brand__mark { transform: scale(1.06); }

.boa-brand__mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Spinning ring */
.boa-brand__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(200, 178, 138, .22);
  animation: boaRingSpin 20s linear infinite;
  pointer-events: none;
}

@keyframes boaRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.boa-header.scrolled .boa-brand__ring {
  border-color: rgba(200, 178, 138, .14);
}

.boa-brand__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.boa-brand__name {
  font-family: var(--font-serif, serif);
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--text, #eef5f2);
  line-height: 1;
  letter-spacing: .01em;
}

.boa-brand__name em {
  color: var(--sand, #c8b28a);
  font-style: italic;
  font-weight: 300;
}

.boa-brand__sub {
  font-family: var(--font-body, sans-serif);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(200, 178, 138, .48);
}

/* =============================================================
   DESKTOP NAVIGATION
============================================================= */

.boa-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.boa-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
}

.boa-nav__list li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top-level links */
.boa-nav__list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-body, sans-serif);
  font-size: .82rem;
  font-weight: 500;
  color: rgba(238, 245, 242, .72);
  letter-spacing: .01em;
  overflow: hidden;
  transition:
    color      .3s var(--ease, ease),
    background .3s var(--ease, ease);
}

/* Hover shimmer fill */
.boa-nav__list > li > a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(200,178,138,.14), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

.boa-nav__list > li > a:hover { color: #fff; }
.boa-nav__list > li > a:hover::before { opacity: 1; }

/* Active */
.boa-nav__list .current-menu-item > a,
.boa-nav__list .current-menu-parent > a,
.boa-nav__list .current-menu-ancestor > a {
  background: rgba(200, 178, 138, .12);
  color: var(--sand, #c8b28a);
}

/* =============================================================
   DROPDOWN
============================================================= */

.boa-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 220px;
  padding: 10px;
  list-style: none;
  margin: 0;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    rgba(8, 14, 12, .97);

  border: 1px solid rgba(200, 178, 138, .1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity    .3s var(--ease, ease),
    transform  .3s var(--ease, ease),
    visibility .3s;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.boa-nav__list li:hover > .sub-menu,
.boa-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.boa-nav__list .sub-menu li { width: 100%; }

.boa-nav__list .sub-menu a {
  display: flex;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: var(--font-body, sans-serif);
  font-size: .82rem;
  color: rgba(238, 245, 242, .76);
  transition: background .25s ease, color .25s ease;
}

.boa-nav__list .sub-menu a:hover {
  background: rgba(200, 178, 138, .1);
  color: #fff;
}

/* =============================================================
   ACTION BUTTONS
============================================================= */

.boa-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}

/* WhatsApp */
.boa-act-wa {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(37, 211, 102, .08);
  border: 1px solid rgba(37, 211, 102, .16);
  font-family: var(--font-body, sans-serif);
  font-size: .78rem;
  font-weight: 600;
  color: rgba(37, 211, 102, .82);
  transition:
    transform    .3s var(--ease, ease),
    background   .3s ease,
    border-color .3s ease;
}

.boa-act-wa:hover {
  transform: translateY(-2px);
  background: rgba(37, 211, 102, .14);
  border-color: rgba(37, 211, 102, .3);
  color: rgba(37, 211, 102, .95);
}

/* CTA */
.boa-act-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sand, #c8b28a), #d4c09e);
  font-family: var(--font-body, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--surface, #0d1615);
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(200, 178, 138, .22);
  transition:
    transform    .35s var(--ease, ease),
    box-shadow   .35s ease;
}

.boa-act-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(200, 178, 138, .32);
}

/* Shimmer sweep */
.boa-act-cta__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, .38) 50%,
    transparent 100%
  );
  transform: translateX(-130%);
  animation: boaShimmer 3.6s ease-in-out infinite 1.5s;
  pointer-events: none;
}

@keyframes boaShimmer {
  to { transform: translateX(130%); }
}

/* =============================================================
   HAMBURGER
============================================================= */

.boa-hamburger {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease;
}

.boa-hamburger:hover {
  background: rgba(200, 178, 138, .1);
  border-color: rgba(200, 178, 138, .18);
}

.boa-hamburger__line {
  width: 20px;
  height: 1.5px;
  background: rgba(238, 245, 242, .82);
  border-radius: 999px;
  transform-origin: center;
  display: block;
}

/* =============================================================
   MOBILE DRAWER
============================================================= */

.boa-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.boa-drawer.is-open { pointer-events: auto; }

/* Backdrop */
.boa-drawer__bd {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .4s ease;
}

.boa-drawer.is-open .boa-drawer__bd { opacity: 1; }

/* Panel */
.boa-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(92vw, 400px);
  height: 100%;
  padding: 26px 24px;
  background: var(--surface, #0d1615);
  border-left: 1px solid rgba(200, 178, 138, .08);
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .48s cubic-bezier(.22,1,.36,1);
}

.boa-drawer.is-open .boa-drawer__panel { transform: translateX(0); }

/* Panel head */
.boa-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.boa-drawer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif, serif);
  font-size: 1.1rem;
  color: var(--text, #eef5f2);
}

.boa-drawer__brand img { border-radius: 50%; }

.boa-drawer__x {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  color: rgba(238, 245, 242, .7);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .3s ease, color .3s;
}

.boa-drawer__x:hover {
  background: rgba(200, 178, 138, .1);
  color: var(--sand, #c8b28a);
}

/* Nav list */
.boa-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.boa-drawer__list li { margin-bottom: 6px; }

.boa-drawer__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(200, 178, 138, .06);
  font-family: var(--font-body, sans-serif);
  font-size: .92rem;
  color: rgba(238, 245, 242, .78);
  transition: background .3s ease, border-color .3s, color .3s;
}

.boa-drawer__list a:hover {
  background: rgba(200, 178, 138, .1);
  border-color: rgba(200, 178, 138, .18);
  color: #fff;
}

.boa-drawer__num {
  font-family: var(--font-body, sans-serif);
  font-size: .62rem;
  letter-spacing: .12em;
  color: rgba(200, 178, 138, .45);
  flex-shrink: 0;
  min-width: 22px;
}

/* CTA block */
.boa-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.boa-drawer__wa,
.boa-drawer__plan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  border-radius: 16px;
  font-family: var(--font-body, sans-serif);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .3s var(--ease, ease), box-shadow .3s;
}

.boa-drawer__wa {
  background: rgba(37, 211, 102, .1);
  border: 1px solid rgba(37, 211, 102, .18);
  color: rgba(37, 211, 102, .9);
}
.boa-drawer__wa:hover { background: rgba(37, 211, 102, .16); transform: translateY(-1px); }

.boa-drawer__plan {
  background: linear-gradient(135deg, var(--sand, #c8b28a), #d4c09e);
  color: var(--surface, #0d1615);
  box-shadow: 0 6px 20px rgba(200, 178, 138, .2);
}
.boa-drawer__plan:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(200, 178, 138, .3); }

/* Footer */
.boa-drawer__foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 178, 138, .07);
}

.boa-drawer__foot p {
  font-family: var(--font-body, sans-serif);
  font-size: .74rem;
  color: rgba(238, 245, 242, .32);
  margin: 0 0 6px;
  line-height: 1.5;
}

.boa-drawer__foot a {
  font-family: var(--font-body, sans-serif);
  font-size: .78rem;
  color: rgba(238, 245, 242, .56);
  transition: color .3s;
}
.boa-drawer__foot a:hover { color: var(--sand, #c8b28a); }

/* =============================================================
   RESPONSIVE
============================================================= */

/* Hide desktop nav at 1200px */
@media (max-width: 1200px) {
  .boa-nav { display: none; }
  .boa-hamburger { display: flex; }
}

/* Tighten up below 820px */
@media (max-width: 820px) {
  .boa-topbar { display: none; }
  :root { --hdr-total: 68px; }
  .boa-header__inner { padding: 0 1rem; gap: .75rem; }
  .boa-brand__sub { display: none; }
  .boa-act-wa { display: none; }
  .boa-brand__name { font-size: 1.05rem; }
  .boa-brand__mark { width: 40px; height: 40px; }
  .boa-brand__mark img { width: 28px; height: 28px; }
  .boa-act-cta { padding: 10px 16px; font-size: .74rem; }
}

/* Icon-only CTA on very small phones */
@media (max-width: 480px) {
  .boa-act-cta__text { display: none; }
  .boa-act-cta { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 14px; }
  .boa-brand { gap: 8px; }
  .boa-drawer__panel { width: 100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .boa-brand__ring,
  .boa-topbar__pulse,
  .boa-act-cta__shimmer {
    animation: none !important;
  }
  .boa-header,
  .boa-drawer__panel,
  .boa-drawer__bd,
  .boa-header__main,
  .boa-topbar {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   NAV OVERFLOW FIX
   Handles too many menu items gracefully
═══════════════════════════════════════════════════ */

/* Ensure nav never wraps or overflows header */
.boa-nav {
  flex: 1;
  min-width: 0;       /* allow shrinking */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boa-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;  /* never wrap — hide overflow instead */
  overflow: hidden;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Collapse nav at 1100px (before items overflow) */
@media (max-width: 1100px) {
  .boa-nav     { display: none; }
  .boa-hamburger { display: flex !important; }
}

/* "More" dropdown trigger */
.boa-nav__item--more {
  position: relative;
}
.boa-nav__more-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.boa-nav__more-btn svg {
  transition: transform .28s var(--ease);
  flex-shrink: 0;
}
.boa-nav__item--more:hover .boa-nav__more-btn svg,
.boa-nav__item--more .boa-nav__more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown panel */
.boa-nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  list-style: none;
  padding: .6rem;
  margin: 0;
  background: rgba(8,14,12,.96);
  border: 1px solid rgba(200,178,138,.14);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 100;
}

.boa-nav__item--more:hover .boa-nav__dropdown,
.boa-nav__item--more:focus-within .boa-nav__dropdown,
.boa-nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.boa-nav__dropdown li { list-style: none; }
.boa-nav__dropdown-link {
  display: block;
  padding: .65rem .88rem;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: .8rem;
  color: rgba(238,245,242,.7);
  text-decoration: none;
  transition: background .22s, color .22s;
  white-space: nowrap;
}
.boa-nav__dropdown-link:hover {
  background: rgba(23,53,44,.5);
  color: var(--sand);
}

/* Hamburger — ensure visible at 1100px */
@media (min-width: 1101px) {
  .boa-hamburger { display: none !important; }
}