/* ============================================================
   Afrikatek - header & footer
   Dresses Solace's Header Footer Grid markup as the design's
   .nav / .mobile-menu / .foot. Loaded SITE-WIDE (unlike the
   design system, which is scoped to .afk) because the header and
   footer are the same on every page.

   Solace markup this targets:
     header.header > #header-grid > nav.header--row.header-main
       .hfg-slot.left   > .builder-item--header_html1  (brand)
       .hfg-slot.center > .builder-item--primary-menu  (nav)
       .hfg-slot.right  > .builder-item--button_base   (gold CTA)
       .builder-item--nav-icon                          (burger, mobile row)
     #header-menu-sidebar.full_canvas                   (mobile panel)
     #footer-grid > .footer--row.footer-top / .footer-bottom
   ============================================================ */

/* ---------- 1. Header shell ---------- */
header.header{position:relative;z-index:80;}
#header-grid.hfg_header{
  background:var(--ink-800);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s;
}

/* Over a full-bleed ink hero the header floats transparent, exactly as the
   design does. Only design pages have such a hero, so only they get this. */
body.afk header.header{position:fixed;top:0;left:0;right:0;}
body.afk #header-grid.hfg_header{background:transparent;}
body.afk header.header.scrolled #header-grid.hfg_header{
  background:rgba(7,29,38,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-ink);
}

/* Row height, and the shrink on scroll. */
#header-grid .header--row.header-main .header--row-inner{transition:height .3s var(--ease);}
body.afk header.header.scrolled .header--row.header-main .header--row-inner{--height:68px;height:68px;min-height:68px;}
#header-grid .header--row .container{max-width:var(--wrap);}
#header-grid .header--row .row--wrapper{align-items:center;}

/* Solace prints a standalone search overlay outside the grid; the design has
   no search, so it must not occupy space. */
body > .item--inner.builder-item--header_search_responsive{display:none;}

/* ---------- 2. Brand ---------- */
/* wpautop wraps HTML-component markup in <p> - unwrap it. */
.builder-item--header_html1 .nv-html-content p,
.builder-item--footer_html1 .nv-html-content p:first-child{margin:0;padding:0;}
.builder-item--header_html1 .nv-html-content{line-height:1;}

.afk-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.afk-brand svg{transition:transform .4s var(--ease-out);flex:none;}
.afk-brand:hover svg{transform:rotate(-8deg);}
.afk-brand .wm{
  font-family:var(--ff);font-weight:500;font-size:20px;letter-spacing:.01em;
  color:#fff;line-height:1;white-space:nowrap;
}
.afk-brand .wm .dot{color:var(--copper-500);}

/* ---------- 3. Primary menu ---------- */
#header-grid .builder-item--primary-menu .nav-ul{
  display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;
}
#header-grid .builder-item--primary-menu .nav-ul li{margin:0;}
#header-grid .builder-item--primary-menu .nav-ul > li > a{
  /* flex, not block: Solace sets min-height:var(--height) on menu links, and
     block would leave the label sitting at the top of that box. */
  position:relative;display:flex;align-items:center;text-decoration:none;
  font-family:var(--ff);font-size:14px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-200);padding:9px 15px;border-radius:6px;
  transition:color .2s,background .2s;
}
#header-grid .builder-item--primary-menu .nav-ul > li > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
#header-grid .builder-item--primary-menu .nav-ul > li > a:hover{color:#fff;}
#header-grid .builder-item--primary-menu .nav-ul > li > a:hover::after,
#header-grid .builder-item--primary-menu .nav-ul > li.current-menu-item > a::after,
#header-grid .builder-item--primary-menu .nav-ul > li.current_page_item > a::after{transform:scaleX(1);}
#header-grid .builder-item--primary-menu .nav-ul > li.current-menu-item > a,
#header-grid .builder-item--primary-menu .nav-ul > li.current_page_item > a{color:#fff;}

/* ---------- 4. Gold CTA ---------- */
#header-grid .builder-item--button_base .button{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:11px 24px;border-radius:999px;border:1.5px solid transparent;
  background:var(--gold);color:var(--ink);text-decoration:none;
  transition:transform .25s var(--ease-out),background .2s,box-shadow .25s;
}
#header-grid .builder-item--button_base .button::after{
  content:"\2192";transition:transform .3s var(--ease-out);display:inline-block;
}
#header-grid .builder-item--button_base .button:hover{
  background:var(--gold-400);color:var(--ink);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(224,162,60,.6);
}
#header-grid .builder-item--button_base .button:hover::after{transform:translateX(4px);}

/* ---------- 5. Burger ---------- */
#header-grid .builder-item--nav-icon .navbar-toggle{
  width:42px;height:42px;padding:0;
  border:1px solid var(--line-ink-2);border-radius:8px;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,border-color .2s;
}
#header-grid .builder-item--nav-icon .navbar-toggle:hover{background:rgba(255,255,255,.06);border-color:var(--gold);}
#header-grid .builder-item--nav-icon .sol_menu_icon svg{width:18px;height:18px;fill:#fff;display:block;}

/* ---------- 6. Full-screen mobile panel ---------- */
#header-menu-sidebar.full_canvas .header-menu-sidebar-bg{background:var(--ink);}
#header-menu-sidebar .header-menu-sidebar-inner{padding:90px 32px 32px;max-width:var(--wrap);}
#header-menu-sidebar .builder-item--primary-menu .nav-ul{
  display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0;
}
#header-menu-sidebar .builder-item--primary-menu .nav-ul > li{width:100%;}
#header-menu-sidebar .builder-item--primary-menu .nav-ul > li > a{
  display:block;font-family:var(--serif);font-size:36px;line-height:1.25;
  color:#fff;text-decoration:none;padding:14px 0;
  border-bottom:1px solid var(--line-ink);letter-spacing:-.015em;
}
#header-menu-sidebar .builder-item--primary-menu .nav-ul > li > a::after{display:none;}
#header-menu-sidebar .builder-item--primary-menu .nav-ul > li > a:hover{color:var(--gold);}
#header-menu-sidebar .builder-item--button_base{margin-top:28px;}
#header-menu-sidebar .close-sidebar-panel .navbar-toggle{background:transparent;border:0;}
#header-menu-sidebar .close-sidebar-panel .icon-bar{background:#fff;}

/* ---------- 7. Footer ---------- */
#footer-grid.site-footer,
#footer-grid .footer--row{position:relative;overflow:hidden;}
#footer-grid .footer--row .container{max-width:var(--wrap);}
#footer-grid .footer--row .footer--row-inner{position:relative;}

/* the dot-matrix Africa, half-bled bottom-left, as in the design */
#footer-grid .footer--row.footer-top .footer--row-inner::before{
  content:"";position:absolute;left:-10%;bottom:-20%;width:40%;height:140%;
  background:url("../img/africa-dots-dark.svg") no-repeat left bottom;
  background-size:contain;opacity:.4;pointer-events:none;z-index:0;
}
#footer-grid .footer--row .row--wrapper{position:relative;z-index:2;}

/* The design's 1.6 / 1 / 1 / 1.2 columns.
   Two things make this necessary:
   - HFG only offers preset ratios (equal / left-half / right-half for 4 cols),
     none of which is 1.6/1/1/1.2;
   - despite the .hfg-grid name, Solace 2.1.23 renders it display:flex, so
     grid-template-columns alone is inert. Declare the grid explicitly. */
#footer-grid .footer--row.footer-top .hfg-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:48px;
  align-items:start;
}
#footer-grid .footer--row .hfg-slot{
  /* slots are flex children by default; inside a grid they must not stretch. */
  flex:none;width:auto;min-width:0;
}

/* Components inside one footer column stack vertically; a slot is a flex ROW
   by default, which would otherwise put the social icons beside the blurb. */
#footer-grid .footer--row.footer-top .hfg-slot{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;
}
#footer-grid .footer--row.footer-top .hfg-slot > .builder-item{
  flex-direction:column;align-items:flex-start;width:100%;
}

#footer-grid .afk-brand .wm{font-size:19px;}
#footer-grid .blurb{
  color:var(--ink-200);font-size:14px;line-height:1.7;max-width:32ch;
  margin:20px 0 0;font-weight:300;
}
#footer-grid h4,
#footer-grid .nv-html-content h2{
  font-family:var(--ff);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-300);font-weight:600;margin:0 0 18px;
}
/* Solace's nav-menu widget titles its list with a plain <h5>, not .widget-title. */
#footer-grid .widget > h2,
#footer-grid .widget > h3,
#footer-grid .widget > h4,
#footer-grid .widget > h5,
#footer-grid .widget > h6,
#footer-grid .widget-title,
#footer-grid .widgettitle{
  font-family:var(--ff);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-300);font-weight:600;margin:0 0 18px;line-height:1.4;
}
#footer-grid .widget_nav_menu ul.menu{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0;}
#footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
#footer-grid li{margin:0;}
#footer-grid a{text-decoration:none;color:var(--ink-100);font-size:14px;transition:color .2s;}
#footer-grid a:hover{color:var(--gold);}
#footer-grid .afk-foot-list li{color:var(--ink-100);font-size:14px;line-height:1.5;}

/* Social. Solace renders .component-wrap-footer-social > .box-social > a.link,
   not a list, so the row has to be declared on the wrap. */
#footer-grid .component-wrap-footer-social{
  display:flex;flex-direction:row;gap:10px;margin-top:22px;flex-wrap:wrap;
}
#footer-grid .box-social{margin:0;}
#footer-grid .box-social > a.link{
  width:38px;height:38px;border:1px solid var(--line-ink-2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .2s,border-color .2s,transform .2s;
}
#footer-grid .box-social > a.link:hover{
  background:var(--copper);border-color:var(--copper);transform:translateY(-2px);color:#fff;
}
#footer-grid .box-social .box-icon{display:flex;align-items:center;justify-content:center;}
#footer-grid .box-social svg{width:17px;height:17px;fill:currentColor;}
#footer-grid .box-social .box-content{display:none!important;}

/* bottom bar */
#footer-grid .footer--row.footer-bottom .hfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;}
.afk-foot-copy,.afk-foot-tag{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-300);letter-spacing:.06em;
}
/* The tagline sits hard right; .builder-item is a flex box, so text-align
   alone would not move it. */
#footer-grid .footer--row.footer-bottom .hfg-slot.c-left{justify-content:flex-end;}
#footer-grid .builder-item--footer_html3{text-align:right;justify-content:flex-end;width:100%;}
#footer-grid .builder-item--copyright_html p,
#footer-grid .builder-item--footer_html3 p{margin:0;}

/* ---------- 8. Responsive ---------- */
@media (max-width:1000px){
  #footer-grid .footer--row.footer-top .hfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
}
@media (max-width:680px){
  #footer-grid .footer--row.footer-top .hfg-grid{display:grid;grid-template-columns:1fr;gap:36px;}
  #footer-grid .footer--row.footer-bottom .hfg-grid{display:grid;grid-template-columns:1fr;text-align:center;}
  #footer-grid .builder-item--footer_html3{text-align:center;}
  #header-menu-sidebar .builder-item--primary-menu .nav-ul > li > a{font-size:30px;}
  #header-menu-sidebar .header-menu-sidebar-inner{padding:90px 22px 32px;}
}

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #header-grid.hfg_header,
  #header-grid .header--row.header-main .header--row-inner,
  .afk-brand svg,
  #header-grid .builder-item--button_base .button,
  #header-grid .builder-item--primary-menu .nav-ul > li > a::after{transition:none;}
}