/* ============================================================
   PIONEER — LAYOUT v5
   Fixes: sticky gap, portals horizontal, quick-actions burgundy,
   footer social icons, mobile padding, portals fixed
   ============================================================ */

/* ── BASE ── */
body{overflow-x:hidden;}

/* ── UTILITY BAR ── */
.utility-bar{background:var(--utility-bg);color:#fff;font-size:var(--text-xs);height:var(--util-h);display:flex;align-items:center;}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;width:100%;}
.utility-bar .tagline{color:#fff;letter-spacing:.03em;}
.utility-bar .contacts{display:flex;gap:18px;align-items:center;}
.utility-bar .contacts span{display:flex;align-items:center;gap:4px;white-space:nowrap;}
.utility-bar .contacts a{color:#fff;transition:color var(--ease);}
.utility-bar .contacts a:hover{color:var(--red);}
.highlight{color:var(--red)!important;font-weight:var(--w-semi);}
.ussd-link{color:var(--red)!important;font-weight:var(--w-bold);}

/* Mobile-menu equivalent of the utility bar's quick links (v10 #1) —
   utility-bar itself is hidden below 768px, so these links are repeated
   inside the hamburger menu instead. */
.mob-utility-links{display:flex;flex-wrap:wrap;gap:10px 16px;padding:14px 20px;background:var(--offwhite);border-bottom:1px solid var(--grey-200);flex-shrink:0;}
.mob-utility-links a{font-size:12.5px;font-weight:var(--w-semi);color:var(--burgundy);white-space:nowrap;}
.mob-utility-links a:hover{color:var(--red);}

/* ── SITE HEADER — FIX #5: zero gap on scroll ── */
/* Key: utility-bar is NOT sticky, only site-header is sticky.
   When page scrolls, utility-bar scrolls away, header sticks at top:0. No gap. */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--white);
  height:var(--header-h);
  border-bottom:1px solid var(--grey-200);
  display:flex;align-items:center;
  box-shadow:none;
  transition:box-shadow var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow);}
.site-header .wrap{display:flex;align-items:center;gap:var(--sp-4);width:100%;}
.logo{flex-shrink:0;display:flex;align-items:center;}
.logo img{height:50px;width:auto;}

/* ── PRIMARY NAV ── */
.primary-nav{flex:1;display:flex;align-items:center;padding-left:var(--sp-5);}
.primary-nav>ul{display:flex;align-items:center;list-style:none;overflow-x:auto;scrollbar-width:none;}
.primary-nav>ul::-webkit-scrollbar{display:none;}
.primary-nav>ul>li{position:relative;}
.primary-nav>ul>li>a{
  display:flex;align-items:center;gap:4px;
  padding:0 13px;height:var(--header-h);
  font-size:13.5px;font-weight:var(--w-semi);
  color:var(--black);white-space:nowrap;
  transition:color var(--ease);
  border-bottom:3px solid transparent;
  letter-spacing:.01em;
}
.primary-nav>ul>li>a:hover,.primary-nav>ul>li.active>a{color:var(--red);}
.primary-nav>ul>li.active>a{border-bottom-color:var(--red);}
.chevron{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--ease);}
.primary-nav>ul>li:hover .chevron{transform:rotate(180deg);}

/* ── MEGA MENU ── */
/* FIX #5: mega-menu top must account only for header-h when scrolled,
   but we use fixed positioning so we need JS to update top on scroll.
   Better approach: position fixed, manage top via JS */
.mega-menu{
  position:fixed;
  left:0;right:0;width:100%;
  background:var(--white);
  border-top:3px solid var(--red);
  border-bottom:1px solid var(--grey-200);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-8) 0;
  display:none;z-index:800;
  /* top set dynamically by JS based on header position */
  top:calc(var(--util-h) + var(--header-h));
}
.mega-menu-top{top:var(--header-h)!important;} /* class added by JS when scrolled */
.has-mega:hover .mega-menu{display:block;}
.mega-menu-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6);
  display:grid;grid-template-columns:1fr 1fr 1fr 240px;gap:var(--sp-10);
}
.mega-col{display:flex;flex-direction:column;gap:2px;}
.mega-col h4{font-size:11px;font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-400);border-bottom:1px solid var(--grey-200);padding-bottom:var(--sp-2);margin-bottom:var(--sp-2);}
.mega-col a{font-size:var(--text-sm);color:var(--black);padding:6px 8px;border-radius:var(--radius-sm);transition:color var(--ease),background var(--ease);}
.mega-col a:hover{color:var(--red);background:var(--red-light);}
.mega-img{border-radius:var(--radius);overflow:hidden;}
.mega-img img{width:100%;height:200px;object-fit:cover;}
.mega-img-placeholder svg{width:100%;height:200px;display:block;}
.mega-img-col{display:flex;flex-direction:column;gap:10px;}

/* ── PORTALS MEGA — FIX #6: horizontal 3-col, compact ── */
.portals-mega{
  position:fixed;
  left:0;right:0;width:100%;
  background:var(--white);
  border-top:3px solid var(--burgundy);
  border-bottom:1px solid var(--grey-200);
  box-shadow:var(--shadow-lg);
  padding:var(--sp-6) 0;
  display:none;z-index:800;
  top:calc(var(--util-h) + var(--header-h));
}
.portals-mega-top{top:var(--header-h)!important;}
/* FIX (v16 #2): scoped to hover-capable devices only. Left unconditional,
   this :hover rule could get "stuck" active on mobile browsers after a
   tap (since the link uses preventDefault and doesn't navigate away),
   fighting with the JS .open toggle — the panel would open on tap but
   need a tap OUTSIDE the button to actually close, because this rule was
   still matching. Touch devices now rely purely on the JS-driven .open
   class (see .header-cta-portals.open .portals-mega below and main.js). */
@media(hover:hover){
  .has-portals:hover .portals-mega{display:block;}
}
.portals-mega-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6);
}
.portals-mega-inner h3{
  font-size:var(--text-base);font-weight:var(--w-bold);
  color:var(--burgundy);margin-bottom:var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-2);
}
.portals-mega-inner h3 svg{width:16px;height:16px;flex-shrink:0;stroke:var(--burgundy);fill:none;stroke-width:2;}
/* FIX (v12 #1): 3 fixed columns worked fine when this panel only ever
   opened on desktop hover. Now the same button/panel also opens by tap
   on phones and tablets (v11), so the grid needs to actually collapse on
   narrow screens instead of squeezing 3 columns into a viewport that
   can't fit them. */
.portals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);max-width:var(--max-w);}
@media(max-width:900px){
  .portals-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .portals-mega{max-height:calc(100vh - var(--header-h));overflow-y:auto;padding:var(--sp-5) 0;}
  .portals-mega-inner{padding:0 var(--sp-4);}
  .portals-grid{grid-template-columns:1fr;gap:var(--sp-3);}
  .portal-link-card{padding:var(--sp-3) var(--sp-4);}
}
.portal-link-card{
  border:1px solid var(--grey-200);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.portal-link-card:hover{border-color:var(--burgundy);box-shadow:var(--shadow-sm);}
.portal-link-card .icon{width:32px;height:32px;background:var(--burgun-lt);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
.portal-link-card .icon svg{width:16px;height:16px;stroke:var(--burgundy);fill:none;stroke-width:2;}
.portal-link-card h5{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--black);margin:0;}
.portal-link-card p{font-size:var(--text-xs);color:var(--grey-600);margin:0;}
.portal-link-card .arrow{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--burgundy);}

/* ── SEARCH ── */
.header-search{flex:0 1 230px;position:relative;}
.header-search input{width:100%;padding:9px 34px 9px 12px;border:1px solid var(--grey-200);border-radius:20px;font-size:var(--text-sm);background:var(--offwhite);outline:none;transition:border-color var(--ease);font-family:var(--font);}
.header-search input:focus{border-color:var(--red);background:var(--white);}
.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--grey-400);fill:none;stroke-width:2;pointer-events:none;}

/* ── HEADER CTA (Portals dropdown, replaces old "Buy Now") ── */
/* FIX (v12 #1): on narrow screens (primary-nav hidden) this used to sit
   with equal gap from both the logo and the hamburger, making it look
   stranded in the middle. margin-left:auto pulls it — and the hamburger
   next to it — over to the right edge as one tight group instead. */
.header-ctas{display:flex;align-items:center;flex-shrink:0;margin-left:auto;}
.header-cta-portals{position:relative;}
.header-cta-portals .chevron{stroke:var(--white);}
.header-cta-portals:hover .chevron,.header-cta-portals.open .chevron{transform:rotate(180deg);}
/* FIX (v11): single button for every screen size. Desktop still opens on
   hover; .open is toggled by JS on click/tap so it also works on
   touchscreens where hover doesn't exist — no second button needed. */
.header-cta-portals.open .portals-mega{display:block;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--w-bold);letter-spacing:.02em;transition:background var(--ease),color var(--ease),border-color var(--ease),transform .12s;white-space:nowrap;cursor:pointer;font-family:var(--font);border:none;}
.btn:active{transform:scale(.97);}
.btn-red{background:var(--red);color:var(--white);}
.btn-red:hover{background:var(--red-dark);}
.btn-burgundy{background:var(--burgundy);color:var(--white);}
.btn-burgundy:hover{background:var(--burgun-dk);}
.btn-dark{background:var(--black);color:var(--white);}
.btn-dark:hover{background:#333;}
.btn-outline{background:transparent;color:var(--black);border:1.5px solid var(--grey-200);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-outline-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5);}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:var(--white);}
.btn-outline-burgundy{background:transparent;color:var(--burgundy);border:1.5px solid var(--burgundy);}
.btn-outline-burgundy:hover{background:var(--burgundy);color:var(--white);}
.btn-lg{padding:12px 28px;font-size:var(--text-base);border-radius:999px;}
.btn-sm{padding:7px 14px;font-size:var(--text-xs);}
.btn-pill{border-radius:999px;}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;}
.hamburger span{display:block;width:24px;height:2px;background:var(--black);border-radius:2px;transition:var(--ease);}

/* ── MOBILE NAV ── */
.mobile-nav{display:none;position:fixed;inset:0;background:var(--white);z-index:9999;flex-direction:column;overflow-y:auto;}
.mobile-nav.open{display:flex;}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--grey-200);flex-shrink:0;}
.mobile-nav-head .close-btn{font-size:24px;color:var(--grey-600);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.mobile-nav-body{flex:1;overflow-y:auto;}
.mob-nav-item{border-bottom:1px solid var(--grey-100);}
.mob-nav-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:var(--text-base);font-weight:var(--w-semi);color:var(--black);width:100%;text-align:left;font-family:var(--font);cursor:pointer;}
.mob-nav-toggle:hover{color:var(--red);}
.mob-chevron{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;transition:transform .2s;}
.mob-nav-item.open .mob-chevron{transform:rotate(180deg);}
.mob-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--offwhite);}
.mob-nav-item.open .mob-submenu{max-height:800px;}
.mob-submenu a{display:block;padding:10px 20px 10px 32px;font-size:var(--text-sm);color:var(--grey-600);border-bottom:1px solid var(--grey-100);transition:color var(--ease);}
.mob-submenu a:hover{color:var(--red);}
.mob-plain-link{display:block;padding:14px 20px;font-size:var(--text-base);font-weight:var(--w-semi);color:var(--black);border-bottom:1px solid var(--grey-100);}
.mob-plain-link:hover{color:var(--red);}
.mobile-nav-footer{padding:20px;border-top:1px solid var(--grey-200);display:flex;gap:10px;flex-shrink:0;}
.mobile-nav-footer .btn{flex:1;justify-content:center;}

/* ── USSD BANNER ── */
.ussd-banner{background:#1a1a1a;color:var(--white);padding:var(--sp-16) 0;}
.ussd-banner .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center;}
.ussd-text .tag{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-2);}
.ussd-text h3{font-size:clamp(22px,3vw,32px);font-weight:var(--w-black);line-height:1.2;margin-bottom:var(--sp-4);}
.ussd-text p{font-size:var(--text-base);color:#aaa;margin-bottom:var(--sp-8);max-width:380px;line-height:1.7;}
.ussd-phone-wrap{background:var(--white);border-radius:var(--radius-xl);padding:var(--sp-6);position:relative;overflow:hidden;}
.ussd-phone-wrap .ussd-code-label{font-size:var(--text-lg);font-weight:var(--w-bold);color:var(--black);text-align:center;margin-bottom:var(--sp-4);}
.ussd-phone-wrap .phone-img{height:220px;display:flex;align-items:center;justify-content:center;}
.ussd-phone-wrap .phone-img img{max-height:100%;object-fit:contain;}

/* ── FOOTER ── */
.site-footer{background:var(--white);border-top:1px solid var(--grey-200);}
.footer-main{padding:var(--sp-16) 0 var(--sp-10);}
.footer-main .wrap{display:grid;grid-template-columns:200px repeat(4,1fr);gap:var(--sp-10);}
.footer-brand .logo img{height:56px;margin-bottom:var(--sp-4);}
.footer-brand p{font-size:var(--text-sm);color:var(--grey-600);line-height:1.7;max-width:180px;}
.footer-col h5{font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--burgundy);margin-bottom:var(--sp-4);letter-spacing:.01em;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col ul li a{font-size:var(--text-sm);color:var(--grey-600);transition:color var(--ease);}
.footer-col ul li a:hover{color:var(--red);}
/* FIX #12: Social icons — proper fill/stroke per icon type */
.footer-social{display:flex;flex-direction:column;gap:8px;}
.footer-social a{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey-600);transition:color var(--ease);}
.footer-social a:hover{color:var(--red);}
.footer-social .si{width:16px;height:16px;flex-shrink:0;}
.footer-social .si-filled{fill:currentColor;}
/* FIX (v7 #6): the YouTube play-triangle (the <polygon>) was set to the
   same fill:currentColor as the rounded body around it, so the triangle
   was invisible — same color on same color. It needs a fixed contrasting
   fill (white) regardless of hover state so it always reads as a play icon. */
.footer-social .si-filled polygon{fill:var(--white);}
.footer-social .si-stroked{fill:none;stroke:currentColor;stroke-width:1.8;} /* Twitter */
.footer-social .si-instagram{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.footer-bottom{border-top:1px solid var(--grey-200);padding:var(--sp-5) 0;}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:var(--text-sm);color:var(--grey-400);}
.legal-links{display:flex;gap:var(--sp-5);align-items:center;}
.legal-links a{font-size:var(--text-sm);color:var(--grey-400);transition:color var(--ease);}
.legal-links a:hover{color:var(--red);}
.legal-links .sep{color:var(--grey-200);}

/* ── POPUP ── */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.popup-overlay.show{opacity:1;visibility:visible;}
.popup-box{background:var(--white);border-radius:var(--radius-lg);max-width:500px;width:100%;overflow:hidden;position:relative;transform:scale(.92) translateY(10px);transition:transform .3s;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.popup-overlay.show .popup-box{transform:scale(1) translateY(0);}
.popup-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;z-index:2;}
.popup-img{aspect-ratio:5/2;overflow:hidden;position:relative;}
.popup-img img{width:100%;height:100%;object-fit:cover;}
.popup-img .popup-badge{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:11px;font-weight:var(--w-bold);padding:4px 12px;border-radius:999px;text-transform:uppercase;}
.popup-body{padding:24px 28px 28px;}
.popup-body h3{font-size:20px;font-weight:var(--w-black);color:var(--burgundy);margin-bottom:8px;line-height:1.2;}
.popup-body p{font-size:var(--text-sm);color:var(--grey-600);margin-bottom:18px;line-height:1.7;}
.popup-body .btn{width:100%;justify-content:center;padding:13px;}
/* ── COOKIE ── */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:8000;background:var(--white);border-top:1px solid var(--grey-200);box-shadow:0 -4px 20px rgba(0,0,0,.08);padding:14px 24px;transform:translateY(100%);transition:transform .4s ease;}
.cookie-bar.show{transform:translateY(0);}
.cookie-bar .inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cookie-bar p{font-size:13px;color:var(--grey-600);}
.cookie-bar p a{color:var(--red);font-weight:var(--w-semi);}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .footer-main .wrap{grid-template-columns:1fr 1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:1024px){
  .primary-nav,.header-search{display:none;}
  .hamburger{display:flex;}
}
@media(max-width:768px){
  .utility-bar .contacts{display:none;}
  .ussd-banner .wrap{grid-template-columns:1fr;}
  .footer-main .wrap{grid-template-columns:1fr 1fr;}
}
/* FIX #11: mobile left/right padding — ensure wrap has proper padding */
@media(max-width:560px){
  .wrap{padding:0 16px;}
  .footer-main .wrap{grid-template-columns:1fr 1fr;gap:16px;}
  .footer-bottom .wrap{flex-direction:column;text-align:center;}
  .legal-links{justify-content:center;}
  .cookie-bar .inner{flex-direction:column;align-items:flex-start;}
  .header-cta-portals .btn{padding:8px 14px;font-size:12px;}
  .logo img{height:40px;}
}
/* Only drop to single column on truly small screens (very small phones) */
@media(max-width:380px){
  .footer-main .wrap{grid-template-columns:1fr;gap:24px;}
}