/* ==========================================================================
   AfriAgentic header and navigation
   Ported from the approved demo: brand lockup, 13px nav at 10/13 padding,
   chevron parents, navy-surface mega dropdown, gold pill CTA with arrow,
   and a dark off-canvas with expandable submenus.
   ========================================================================== */

:root{
  --aa-navy:#071A2F;
  --aa-navy-deep:#04101D;
  --aa-navy-surface:#0A2340;
  --aa-navy-surface-2:#0E2C4F;
  --aa-gold:#D4AF37;
  --aa-cyan:#00D9FF;
  --aa-white:#FFFFFF;
  --aa-text:#F5F6F8;
  --aa-text-dim:#9BA6B5;
  --aa-line:rgba(245,246,248,0.10);
  --aa-line-strong:rgba(245,246,248,0.20);
  --aa-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Header shell ---------------- */
#masthead,
.site-header{
  background:rgba(4,16,29,0.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--aa-line);
}
.ast-primary-header-bar,
.main-header-bar,
.ast-primary-header-bar .site-primary-header-wrap{
  background:transparent!important;
  border-bottom:0!important;
  min-height:0!important;
}
.ast-primary-header-bar .ast-container,
#ast-desktop-header .site-primary-header-wrap{
  max-width:1320px;
  padding-left:40px;
  padding-right:40px;
}
.ast-primary-header-bar .site-header-primary-section-left,
.ast-primary-header-bar .site-header-primary-section-right{
  align-items:center;
}
#ast-desktop-header .ast-builder-grid-row{
  padding-top:18px;
  padding-bottom:18px;
  align-items:center;
}

/* ---------------- Brand lockup ----------------
   The approved artwork ships on a solid black field. `screen` blending drops
   that field on dark surfaces while leaving every pixel of the artwork itself
   untouched, so the file is never re-cut. */
.aa-logo{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  line-height:0;
  text-decoration:none;
}
.aa-logo img{
  height:56px;
  width:56px;
  object-fit:contain;
  flex-shrink:0;
  mix-blend-mode:screen;
  transition:height .4s var(--aa-ease), width .4s var(--aa-ease);
}
.aa-wordmark{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.015em;
  line-height:1;
  white-space:nowrap;
}
.aa-wordmark .w-afri{color:var(--aa-gold);}
.aa-wordmark .w-agentic{color:var(--aa-cyan);}
.site-header .site-logo-img,
.ast-site-identity{padding:0;}
.site-title,.site-description{display:none!important;}

/* ---------------- Desktop navigation ---------------- */
#ast-desktop-header .main-header-menu{align-items:center;}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 13px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:var(--aa-text-dim);
  background:transparent;
  transition:color .25s var(--aa-ease);
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover{color:var(--aa-white);}
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link,
#ast-desktop-header .main-header-menu > .current_page_item > .menu-link{color:var(--aa-cyan);}

.aa-chev{
  width:8px;height:8px;
  opacity:.7;
  flex-shrink:0;
  transition:transform .3s var(--aa-ease);
}
#ast-desktop-header .menu-item:hover > .menu-link .aa-chev,
#ast-desktop-header .menu-item:focus-within > .menu-link .aa-chev{transform:rotate(180deg);}

/* Astra's own dropdown arrow is redundant next to the demo chevron. */
#ast-desktop-header .ast-icon.icon-arrow,
#ast-desktop-header .main-header-menu .sub-arrow{display:none!important;}

/* ---------------- Mega dropdown ---------------- */
#ast-desktop-header .main-header-menu .sub-menu{
  background:var(--aa-navy-surface);
  border:1px solid var(--aa-line-strong);
  border-radius:8px;
  padding:12px;
  min-width:240px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.75);
  top:calc(100% + 14px);
}
/* invisible bridge so the pointer can travel into the panel */
#ast-desktop-header .main-header-menu > .menu-item-has-children::after{
  content:"";
  position:absolute;
  top:100%;left:0;right:0;
  height:18px;
}
#ast-desktop-header .main-header-menu .sub-menu .menu-link{
  display:block;
  padding:9px 12px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.4;
  color:var(--aa-text-dim);
  border:0;
  border-radius:4px;
  background:transparent;
  transition:background .2s var(--aa-ease), color .2s var(--aa-ease);
}
#ast-desktop-header .main-header-menu .sub-menu .menu-link:hover,
#ast-desktop-header .main-header-menu .sub-menu .menu-link:focus-visible{
  background:var(--aa-navy-surface-2);
  color:var(--aa-cyan);
}

/* ---------------- Call to action ---------------- */
.ast-custom-button{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  color:#050505!important;
  background:var(--aa-gold)!important;
  border:0!important;
  border-radius:4px;
  transition:background .25s var(--aa-ease), transform .25s var(--aa-ease);
}
.ast-custom-button:hover{background:#E3C255!important;transform:translateY(-1px);}
.aa-btn-arrow{width:14px;height:14px;flex-shrink:0;}
.ast-header-button-1 .ast-builder-button-wrap{padding:0;}

/* ---------------- Focus ---------------- */
#masthead a:focus-visible,
#masthead button:focus-visible{outline:2px solid var(--aa-cyan);outline-offset:3px;border-radius:2px;}

/* ---------------- Mobile header ---------------- */
#ast-mobile-header .aa-logo img{height:46px;width:46px;}
#ast-mobile-header .aa-wordmark{font-size:19px;}
#ast-mobile-header .ast-builder-grid-row{padding-top:14px;padding-bottom:14px;}
#ast-mobile-header .menu-toggle,
#ast-mobile-header .menu-toggle .ast-mobile-svg{
  color:var(--aa-text)!important;
  fill:var(--aa-text)!important;
  background:transparent!important;
}
#ast-mobile-header .menu-toggle:hover .ast-mobile-svg{fill:var(--aa-cyan)!important;}

/* ---------------- Off-canvas drawer ----------------
   Astra paints .ast-nav-menu #F9F9F9 inside the drawer, which sat over our
   dark panel and under near-white text: the menu opened but read as blank. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--aa-navy-deep)!important;}
.ast-mobile-popup-overlay{background:rgba(4,16,29,.72)!important;}
#ast-mobile-popup-wrapper .ast-nav-menu,
.ast-mobile-popup-drawer .ast-nav-menu,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .main-navigation,
.ast-mobile-popup-drawer .main-header-bar-navigation,
.ast-mobile-popup-drawer .sub-menu{background:transparent!important;box-shadow:none!important;border:0!important;}

.ast-mobile-popup-drawer .ast-nav-menu > .menu-item{border-bottom:1px solid var(--aa-line);}
.ast-mobile-popup-drawer .ast-nav-menu > .menu-item > .menu-link{
  font-family:'Space Grotesk',sans-serif!important;
  font-size:24px!important;
  font-weight:500!important;
  color:var(--aa-white)!important;
  padding:16px 0!important;
  border:0!important;
}
.ast-mobile-popup-drawer .ast-nav-menu > .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-nav-menu > .current-menu-ancestor > .menu-link{color:var(--aa-cyan)!important;}
.ast-mobile-popup-drawer .ast-nav-menu > .menu-item > .menu-link .aa-chev{display:none;}

/* Expandable submenus */
.ast-mobile-popup-drawer .sub-menu .menu-link{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:16px!important;
  font-weight:400!important;
  color:var(--aa-text-dim)!important;
  padding:11px 0 11px 6px!important;
  border:0!important;
}
.ast-mobile-popup-drawer .sub-menu .menu-link:hover{color:var(--aa-cyan)!important;}
.ast-mobile-popup-drawer .sub-menu{padding-bottom:10px;}
.ast-mobile-popup-drawer .ast-menu-toggle{
  color:var(--aa-text-dim)!important;
  width:44px;height:44px;
}
.ast-mobile-popup-drawer .ast-menu-toggle svg,
.ast-mobile-popup-drawer .ast-menu-toggle .ast-icon{width:13px;height:13px;transition:transform .3s var(--aa-ease);}
.ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .ast-menu-toggle svg{transform:rotate(180deg);}
.ast-mobile-popup-drawer .menu-toggle-close{color:var(--aa-text)!important;}
.ast-mobile-popup-drawer .menu-toggle-close:hover{color:var(--aa-cyan)!important;}
.ast-mobile-popup-drawer .ast-builder-layout-element{padding:0;}
.ast-mobile-popup-drawer .ast-button-wrap{padding:26px 0 0;}
.ast-mobile-popup-drawer .ast-custom-button{margin-top:6px;}

@media (max-width:1200px){
  .ast-primary-header-bar .ast-container{padding-left:24px;padding-right:24px;}
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link{padding:10px 9px;font-size:12.5px;}
  .aa-logo img{height:48px;width:48px;}
  .aa-wordmark{font-size:20px;}
  .ast-custom-button{padding:12px 18px;}
}

/* ---------- AA-CTA-ARROW ----------
   The demo CTA carries a trailing arrow. Astra offers no markup filter for
   the button label, so it is drawn as a pseudo element. */
.ast-custom-button::after{content:'';width:14px;height:14px;flex:0 0 14px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMiA3aDEwTTggM2w0IDQtNCA0IiBzdHJva2U9IiUyMzA1MDUwNSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center/contain no-repeat;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.ast-custom-button:hover::after{transform:translateX(3px)}
/* Centre each dropdown beneath its parent, as in the demo. */
#ast-desktop-header .main-header-menu > .menu-item-has-children{position:relative}
#ast-desktop-header .main-header-menu > .menu-item-has-children > .sub-menu{left:50%!important;right:auto!important;transform:translateX(-50%)}

/* ---------- AA-HDR-FINAL ----------
   Astra's own button radius and the theme header tint were still winning
   over the ported rules. The demo CTA is a 4px rectangle, not a pill, and
   the bar reads as one field with the near-black hero beneath it. */
.ast-custom-button,
#masthead .ast-custom-button,
.ast-header-button-1 .ast-custom-button{border-radius:4px!important;}
#masthead,.site-header{background:rgba(5,5,5,0.90)!important;}
#ast-desktop-header .ast-builder-grid-row{padding-top:16px;padding-bottom:16px;}

/* ---------- AA-BAR-COMPACT ----------
   The bar scrolls away with the page (static), and sits at the demo's
   compact height rather than Astra's default block. */
#masthead,.site-header{position:static!important;top:auto!important;}
.ast-sticky-active,.ast-header-sticked,.ast-main-header-wrap.ast-sticky-active{position:static!important;box-shadow:none!important;}
#ast-desktop-header .ast-builder-grid-row{padding-top:10px!important;padding-bottom:10px!important;}
.ast-primary-header-bar,.main-header-bar{padding-top:0!important;padding-bottom:0!important;min-height:0!important;}
.aa-logo img{height:44px!important;width:44px!important;}
.aa-wordmark{font-size:19px!important;}
.ast-custom-button{padding:11px 20px!important;font-size:12.5px!important;}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{padding:8px 12px!important;font-size:12.5px!important;}
#ast-mobile-header .ast-builder-grid-row{padding-top:8px!important;padding-bottom:8px!important;}
#ast-mobile-header .aa-logo img{height:38px!important;width:38px!important;}
/* Hero starts directly under the bar: the demo's 150px top padding only
   existed because its header floated over the content. */
.aa-hero{min-height:0!important;padding-top:56px!important;padding-bottom:72px!important;}
@media(max-width:1024px){.aa-hero{padding-top:40px!important;padding-bottom:56px!important;}}
@media(max-width:767px){.aa-hero{padding-top:28px!important;padding-bottom:44px!important;}}

/* ---------- AA-BAR-TRIM ----------
   Astra pads the site-identity block by 1em top and bottom, which was
   adding 32px to a 44px lockup. Strip it so the bar is content height. */
#masthead .ast-builder-layout-element,
#masthead .ast-site-identity,
#masthead .site-logo-img,
#masthead .ast-header-button-1,
#masthead .ast-builder-menu{padding:0!important;margin:0!important;}
#masthead .ast-builder-grid-row{align-items:center!important;padding-top:9px!important;padding-bottom:9px!important;}
#masthead .site-header-primary-section-left,
#masthead .site-header-primary-section-right{align-items:center!important;}
#masthead .aa-logo{margin:0!important;}