/* GCIC Header Menu. Port of the Education Collaborative header menu
   (CoWork/educollab-tecnav-header.html) in the GCIC greens. */

/* Arial scaled to Poppins' width for these labels, so the bar keeps its size when
   the real font lands (same fix as the ashesi.edu.gh menu). */
@font-face{
  font-family:"GCICnav Fallback";
  src:local("Arial"),local("Liberation Sans"),local("Helvetica");
  size-adjust:111.6%;
}

/* ────────────────────────────────────────────────────────────────────────────
   THEME-PROOFING
   Reset every descendant aggressively. Themes commonly leak padding, margins,
   borders, line-heights, list bullets, and pseudo-element content into nav
   trees. These !important resets neutralize all of that. Specific elements
   below then re-add only the spacing we want.
   ──────────────────────────────────────────────────────────────────────── */
.gcicnav{ all:initial; display:block !important; position:relative !important;
  /* EDIT COLOURS: GCIC site palette. --accent is the brand green #639826 darkened
     to pass 4.5:1 on white; the brand green itself is only 3.47:1, so it's kept for
     decoration and focus rings. */
  --accent:#4f7a1e; --brand:#639826; --forest:#1d443c;
  --ink:#212121; --white:#fff; --grey:#666;
  --rule:rgba(0,0,0,.12); --rule-soft:rgba(0,0,0,.08);
  --serif:"Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Poppins","GCICnav Fallback",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:max(80%,920px); --bar:88px; --bar-m:76px;
  font-family:var(--sans) !important; color:var(--ink) !important;
  line-height:1.6 !important; font-size:17px !important; text-align:left !important;
}
.gcicnav *, .gcicnav *::before, .gcicnav *::after{
  box-sizing:border-box !important;
  font-family:var(--sans) !important;
  padding:0 !important; margin:0 !important;
  border:0 !important; background:none !important;
  text-transform:none !important; letter-spacing:normal !important;
  line-height:inherit !important;
  list-style:none !important;
}
.gcicnav *::before, .gcicnav *::after{ content:none !important; }
/* Re-enable our own deliberate pseudo-elements by class */
.gcicnav button.gcicnav__group-btn::after{ content:"+" !important; }
.gcicnav .gcicnav__group.is-open button.gcicnav__group-btn::after{ content:"\2013" !important; }
.gcicnav .gcicnav__sub a::before{ content:"" !important; }
.gcicnav a{ text-decoration:none !important; color:inherit !important; cursor:pointer !important; }
.gcicnav button{ cursor:pointer !important; background:none !important; border:0 !important; color:inherit !important; }
.gcicnav img{ max-width:100% !important; height:auto !important; display:block !important; border:0 !important; }
.gcicnav input, .gcicnav button[type="submit"]{ -webkit-appearance:none !important; appearance:none !important; }
.gcicnav a:focus-visible, .gcicnav button:focus-visible{ outline:2px solid var(--brand) !important; outline-offset:2px !important; }

.gcicnav__bar{ position:relative !important; z-index:9000 !important; background:var(--white) !important; border-bottom:1px solid var(--rule-soft) !important; }

/* Smooth the swappable colors */
.gcicnav .gcicnav__top, .gcicnav .gcicnav__searchbtn,
.gcicnav .gcicnav__mega-links a,
.gcicnav .gcicnav__searchform input, .gcicnav .gcicnav__searchform button,
.gcicnav .gcicnav__group-btn, .gcicnav .gcicnav__sub a, .gcicnav .gcicnav__contact-link{
  transition:color .25s ease, background .25s ease, border-color .25s ease !important;
}

/* --wrap is the site's 80% grid, so the logo lines up with the page content and the
   search icon with the strip above. 920px keeps seven items on one line at 1025px. */
.gcicnav__in{ width:min(var(--wrap),calc(100% - 48px)) !important; margin:0 auto !important; height:var(--bar) !important; display:flex !important; align-items:center !important; gap:34px !important; }
.gcicnav__logo{ display:flex !important; align-items:center !important; flex:0 0 auto !important; }
.gcicnav__logo img{ height:68px !important; width:auto !important; }
.gcicnav__nav{ display:flex !important; gap:8px !important; margin-left:auto !important; height:100% !important; }
.gcicnav__item{ height:100% !important; display:flex !important; align-items:center !important; position:static !important; }
.gcicnav__top{ display:flex !important; align-items:center !important; gap:8px !important; font:500 17px/1 var(--sans) !important; color:var(--ink) !important; padding:8px 14px !important; white-space:nowrap !important; }
.gcicnav__item:hover .gcicnav__top,
.gcicnav__item.is-open .gcicnav__top,
.gcicnav__item.is-current .gcicnav__top{ color:var(--accent) !important; }

.gcicnav__mega{ position:absolute !important; left:0 !important; right:0 !important; top:100% !important; background:var(--white) !important; background-image:none !important; border-bottom:1px solid var(--rule) !important;
  opacity:0 !important; visibility:hidden !important; transform:translateY(12px) !important; transition:opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1), visibility .28s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index:8999 !important; }
.gcicnav__item.is-open .gcicnav__mega{ opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }
.gcicnav.is-megaoff .gcicnav__mega{ opacity:0 !important; visibility:hidden !important; }
/* grid geometry is measured in JS so the link rows line up under the nav:
   col1 = the empty offset before the links; col2 = the full nav width, so every
   row line spans that whole distance. Defaults are a fallback if JS hasn't run. */
.gcicnav__mega-in{ width:min(var(--wrap),calc(100% - 48px)) !important; margin:0 auto !important; padding:40px 0 !important; display:grid !important; grid-template-columns:var(--mega-col1,300px) var(--mega-col2,max-content) 1fr !important; gap:56px !important; align-items:start !important; }
.gcicnav__mega-links{ grid-column:2 !important; }
.gcicnav__mega-links a{ display:block !important; padding:12px 14px !important; font:500 17px/1.3 var(--sans) !important; color:var(--ink) !important; border-bottom:1px solid var(--rule-soft) !important; }
/* keep the last row's divider invisible by default, but let it show on hover so
   every row gives the same text + line feedback */
.gcicnav__mega-links a:last-child{ border-bottom-color:transparent !important; }
.gcicnav__mega-links a:hover,
.gcicnav__mega-links a[aria-current]{ color:var(--accent) !important; }
.gcicnav__mega-links a:hover{ border-bottom-color:var(--accent) !important; }

/* ── search as a mega-menu dropdown ── */
.gcicnav__searchitem{ height:100% !important; display:flex !important; align-items:center !important; position:static !important; margin:0 -11px 0 8px !important; }
.gcicnav__searchbtn{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; color:var(--ink) !important; }
.gcicnav__searchbtn:hover, .gcicnav.is-search .gcicnav__searchbtn{ color:var(--accent) !important; }
.gcicnav__searchbtn svg{ width:21px !important; height:21px !important; stroke:currentColor !important; stroke-width:1.9 !important; fill:none !important; display:block !important; position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; transition:opacity .15s ease !important; }
.gcicnav__searchbtn .icon-close{ opacity:0 !important; }
.gcicnav.is-search .gcicnav__searchbtn .icon-search{ opacity:0 !important; }
.gcicnav.is-search .gcicnav__searchbtn .icon-close{ opacity:1 !important; }
.gcicnav__searchmega{ position:absolute !important; left:0 !important; right:0 !important; top:100% !important; background:var(--white) !important; background-image:none !important; border-bottom:1px solid var(--rule) !important;
  opacity:0 !important; visibility:hidden !important; transform:translateY(12px) !important; transition:opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1), visibility .28s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index:8999 !important; }
.gcicnav.is-search .gcicnav__searchmega{ opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; }
.gcicnav__searchmega-in{ width:min(var(--wrap),calc(100% - 48px)) !important; margin:0 auto !important; padding:48px 0 !important; }
.gcicnav__searchform{ display:flex !important; gap:12px !important; width:100% !important; }
.gcicnav__searchform input{ flex:1 1 auto !important; min-width:0 !important; padding:18px 22px !important; border:1px solid var(--rule) !important; border-radius:0 !important; font:400 19px var(--sans) !important; color:var(--ink) !important; background:var(--white) !important; }
.gcicnav__searchform input:focus{ outline:1px solid var(--accent) !important; border-color:var(--accent) !important; }
.gcicnav__searchform button{ padding:18px 32px !important; border:1px solid var(--accent) !important; background:var(--accent) !important; color:var(--white) !important; font:500 16px var(--sans) !important; white-space:nowrap !important; }
.gcicnav__searchform button:hover{ background:var(--forest) !important; border-color:var(--forest) !important; color:var(--white) !important; }

/* ── contact prompt under the mobile search ── */
.gcicnav__contact{ display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:18px !important; padding-top:16px !important; border-top:1px solid var(--rule-soft) !important; }
.gcicnav__contact-title{ font:500 15px/1.45 var(--sans) !important; color:var(--grey) !important; }
.gcicnav__contact-link{ display:inline-block !important; font:600 17px/1.4 var(--sans) !important; color:var(--accent) !important; border-bottom:1px solid rgba(79,122,30,.35) !important; padding-bottom:1px !important; align-self:flex-start !important; }
.gcicnav__contact-link:hover{ color:var(--forest) !important; border-color:var(--forest) !important; }

/* ── burger ── */
.gcicnav__burger{ display:none !important; margin-left:auto !important; width:46px !important; height:46px !important; position:relative !important; flex:0 0 46px !important; }
.gcicnav__burger i{ position:absolute !important; left:11px !important; right:11px !important; height:2px !important; background:var(--ink) !important; transition:all .25s ease !important; display:block !important; }
.gcicnav__burger i:nth-child(1){ top:15px !important; } .gcicnav__burger i:nth-child(2){ top:22px !important; } .gcicnav__burger i:nth-child(3){ top:29px !important; }
.gcicnav.is-open .gcicnav__burger i:nth-child(1){ top:22px !important; transform:rotate(45deg) !important; }
.gcicnav.is-open .gcicnav__burger i:nth-child(2){ opacity:0 !important; }
.gcicnav.is-open .gcicnav__burger i:nth-child(3){ top:22px !important; transform:rotate(-45deg) !important; }

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE PANEL
   Every line item starts at the same x-offset; the visible indent is applied only
   to .gcicnav__sub a. --panel-top is measured on open, because the Ashesi strip
   above the bar and any scrolling move the bar.
   ──────────────────────────────────────────────────────────────────────── */
.gcicnav__panel{ position:fixed !important; left:0 !important; right:0 !important; top:var(--panel-top,var(--bar-m)) !important; bottom:0 !important; background:var(--white) !important; background-image:none !important; z-index:8998 !important; overflow-y:auto !important; display:none !important; -webkit-overflow-scrolling:touch !important; }
.gcicnav.is-open .gcicnav__panel{ display:block !important; }
.gcicnav__panel-nav{ padding:8px 0 0 !important; }
.gcicnav__panel-foot{ padding:24px 26px 40px !important; background:var(--white) !important; }
.gcicnav__group{ border-bottom:1px solid var(--rule-soft) !important; display:block !important; }
.gcicnav__group-btn{ width:100% !important; display:flex !important; justify-content:space-between !important; align-items:center !important; gap:16px !important; font:500 19px/1.3 var(--sans) !important; color:var(--ink) !important; padding:20px 26px !important; text-align:left !important; min-height:62px !important; }
.gcicnav__group.is-current > .gcicnav__group-btn{ color:var(--accent) !important; }
.gcicnav button.gcicnav__group-btn::after{ font:500 29px/1 var(--serif) !important; color:var(--accent) !important; flex-shrink:0 !important; }
.gcicnav__sub{ display:none !important; padding:4px 0 14px 0 !important; background:rgba(0,0,0,.02) !important; border-top:1px solid var(--rule-soft) !important; }
.gcicnav__group.is-open .gcicnav__sub{ display:block !important; }
.gcicnav__sub a{ display:block !important; padding:12px 26px 12px 46px !important; font:400 17px/1.4 var(--sans) !important; color:var(--ink) !important; border-bottom:1px solid var(--rule-soft) !important; position:relative !important; }
.gcicnav__sub a:last-child{ border-bottom:0 !important; }
.gcicnav .gcicnav__sub a::before{ position:absolute !important; left:26px !important; top:50% !important; transform:translateY(-50%) !important; width:8px !important; height:1px !important; background:var(--accent) !important; }
.gcicnav__sub a:hover, .gcicnav__sub a[aria-current]{ color:var(--accent) !important; }
.gcicnav__panel-foot .gcicnav__searchform input{ padding:14px 16px !important; font:400 17px var(--sans) !important; }
.gcicnav__panel-foot .gcicnav__searchform button{ padding:14px 20px !important; font:500 15px var(--sans) !important; }

@media (max-width:1024px){
  .gcicnav__nav, .gcicnav__searchitem{ display:none !important; }
  .gcicnav__burger{ display:block !important; }
  .gcicnav__in{ width:100% !important; height:var(--bar-m) !important; padding:0 16px !important; gap:14px !important; }
  .gcicnav__logo img{ height:60px !important; }
}
@media (max-width:480px){
  .gcicnav__group-btn{ font-size:18px !important; padding:18px 22px !important; }
  .gcicnav__sub a{ font-size:16px !important; padding:11px 22px 11px 42px !important; }
  .gcicnav .gcicnav__sub a::before{ left:22px !important; }
  .gcicnav__panel-foot{ padding:20px 22px 36px !important; }
}
@media (prefers-reduced-motion:reduce){
  .gcicnav *, .gcicnav *::before, .gcicnav *::after{ transition:none !important; }
}