/* ==========================================================================
   CERTINAL — shell.css   (shared page chrome)
   --------------------------------------------------------------------------
   Everything Base.astro renders on EVERY page: announce strip, navbar +
   mega-menu, locale (language/region) panel, and footer. The .ctaSpin styles
   remain here (shared) — now used by the hero CTA via CtaSpin.astro.
   Loaded on every page right after tokens.css. Page section styles live in
   the per-page stylesheet, NOT here.
   Depends on tokens.css (variables, reset, helpers) being loaded first.
   ========================================================================== */

/* ==========================================================================
   ANNOUNCE STRIP + NAVBAR
      Three fixed bars: announce (30px) / topbar (68px) / product-tabs pill.
      All hide upward when scrolling down, reappear scrolling up.
   ========================================================================== */
.announceStrip{position:fixed;top:0;left:0;right:0;z-index:101;height:30px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--grad-strip);color:var(--n-950);font-size:13px;font-weight:var(--w-secondary);transition:transform .4s var(--ease-nav),opacity .3s}
.announceStrip .announceText{font-weight:var(--w-primary)}
.announceStrip .announceDivider{width:1px;height:12px;background:rgba(20,20,21,.35)}
.announceStrip .announceArrow{display:inline-flex;transition:transform .2s var(--ease-lift)}
.announceStrip:hover .announceArrow{transform:translateX(3px)}
.announceStripHidden{opacity:0;transform:translateY(-100%)}

/* At page top: full-width bar attached under the announce strip.
   1px transparent border all round (only the bottom is coloured) so the
   float state can colour the rest without any width/layout shift. */
.topBar{position:fixed;top:30px;left:0;right:0;margin-inline:auto;width:100%;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(18px) saturate(160%);border:1px solid transparent;border-bottom-color:rgba(219,222,227,.9);border-radius:0;transition:top .42s var(--ease-nav),width .42s var(--ease-nav),border-radius .42s var(--ease-nav),background .3s,box-shadow .32s,border-color .3s}
/* Scrolled: detach into a floating, rounded, elevated glass bar (chrome radius,
   consistent with the product-tabs pill exception to the 20px card cap). */
.topBar.isFloat{top:12px;width:min(1320px,calc(100vw - 28px));border-color:rgba(219,222,227,.9);border-radius:var(--r-full);background:rgba(255,255,255,.82);box-shadow:0 16px 44px rgba(31,32,36,.14)}
.topBar.isFloat .topBarInner{height:60px;padding:0 clamp(18px,2.4vw,28px)}
.topBarInner{position:relative;height:68px;max-width:1400px;margin:0 auto;padding:0 clamp(24px,4vw,56px);display:flex;align-items:center;gap:var(--s-3);transition:height .42s var(--ease-nav),padding .42s var(--ease-nav)}

/* brand — Certinal logo */
.brand{display:flex;align-items:center}
.brand img{height:32px;width:auto}

/* centered pill nav (audience switcher) — absolutely centered so uneven
   brand/actions widths can't push it off-center */
.audienceNav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.audienceNavInner{display:flex;align-items:center;background:rgba(241,252,219,.6);border:1px solid var(--n-200);border-radius:var(--r-full);overflow:hidden}
.audienceLink{padding:12px clamp(16px,1.7vw,28px);font-size:var(--menu-size);font-weight:var(--w-secondary);color:var(--text-secondary);transition:background .2s,color .2s}
.audienceLink:hover{color:var(--n-950);background:rgba(205,247,87,.35)}
.audienceLinkActive{color:var(--n-950);background:var(--lime-400)}
.audienceDivider{width:1px;height:18px;background:var(--n-200)}

.navActions{display:flex;align-items:center;gap:12px;margin-left:auto}
.iconBtn{width:48px;height:48px;border-radius:var(--r-full);border:1px solid var(--n-200);background:#fff;display:grid;place-items:center;color:var(--n-700);transition:border-color .2s,transform .2s var(--ease-lift)}
.iconBtn:hover{border-color:var(--n-700);transform:translateY(-1px)}
.demoBtn{height:48px;padding:0 26px;border-radius:var(--r-sm);background:var(--lime-400);color:var(--n-950);font-weight:var(--w-button);font-size:var(--btn-size);display:inline-flex;align-items:center;transition:background .2s,transform .2s var(--ease-lift),box-shadow .2s}
.demoBtn:hover{background:var(--lime-500);transform:translateY(-1px);box-shadow:0 10px 24px rgba(121,150,27,.3)}
.mobileMenuToggle{display:none}

/* mega-menu popup (opened by the hamburger) — horizontally centered under the
   navbar. menuWrap stays static so the popup anchors to .topBarInner (the
   header's positioned container, centered in the viewport) rather than to the
   right-hand hamburger; left:50% + translateX(-50%) then centers it. */
.menuWrap{position:static}
.popup{position:absolute;top:calc(100% + 14px);left:50%;width:min(1040px,calc(100vw - 40px));max-height:min(74vh,640px);overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(31,32,36,.16);padding:var(--s-4);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s var(--ease-lift),transform .25s var(--ease-lift),visibility .25s;z-index:110}
.popup.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.popupSections{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--s-4);align-items:start}
.popupCol .colTitle{font-size:var(--text-xs);font-weight:var(--w-secondary);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.itemsCol{display:flex;flex-direction:column;gap:10px}
.itemsCol a{font-size:15px;font-weight:var(--w-secondary);color:var(--text-secondary);transition:color .2s,transform .2s}
.itemsCol a:hover{color:var(--lime-800);transform:translateX(3px)}
/* Products group: reachable only where the pill nav is hidden (narrow screens) */
.popupColProducts{display:none}
/* Resources carries 12 items → lay them out across two columns */
.popupColWide .itemsCol{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.popupActions{display:flex;gap:var(--s-2);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--border)}
.popupActions a{font-size:14px;font-weight:var(--w-button);color:var(--lime-800)}

/* ==========================================================================
   LOCALE PANEL — language/region switcher (navbar globe → slide-in sheet)
      Dark sheet on the right (full-width on mobile). Region accordions +
      locale links from site.localeSwitcher. Dark surface = light text is fine
      (the DS "never white on lime" rule is about lime backgrounds only).
   ========================================================================== */
body.noScroll{overflow:hidden}
/* overflow-x:clip contains the closed sheet (translateX(100%) sits off-screen right,
   which would otherwise widen the page and cause horizontal scroll on mobile) */
.localePanel{position:fixed;inset:0;z-index:200;visibility:hidden;overflow-x:clip}
.localePanel:focus{outline:none}
.localePanelClose:focus-visible,.localeRegionHead:focus-visible,.localeItem:focus-visible{outline:2px solid var(--lime-400);outline-offset:2px}
.localePanel.open{visibility:visible}
.localePanelBackdrop{position:absolute;inset:0;background:rgba(20,20,21,.5);backdrop-filter:blur(5px);opacity:0;transition:opacity .32s var(--ease-lift)}
.localePanel.open .localePanelBackdrop{opacity:1}
.localePanelSheet{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);display:flex;flex-direction:column;
  background:radial-gradient(120% 55% at 100% 0%,rgba(205,247,87,.12),transparent 58%),linear-gradient(180deg,#17181A,#0F1011);
  border-left:1px solid rgba(255,255,255,.08);box-shadow:-30px 0 80px rgba(0,0,0,.45);
  transform:translateX(100%);transition:transform .44s var(--ease-nav);
  padding:clamp(22px,3vw,32px) clamp(20px,2.6vw,30px) clamp(28px,4vh,40px);overflow-y:auto}
.localePanel.open .localePanelSheet{transform:none}
.localePanelHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vh,28px)}
.localePanelTitle{font-size:var(--h5);font-weight:var(--w-primary);letter-spacing:-.01em;color:#fff}
.localePanelClose{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s,transform .3s var(--ease-lift)}
.localePanelClose:hover{color:var(--lime-400);border-color:rgba(205,247,87,.5);background:rgba(205,247,87,.08);transform:rotate(90deg)}
/* region accordion */
.localeRegion{border-top:1px solid rgba(255,255,255,.1)}
.localeRegion:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.localeRegionHead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;background:none;border:0;text-align:left;color:#fff}
.localeRegionName{font-size:var(--text-md);font-weight:var(--w-primary)}
.localeRegionCount{color:rgba(255,255,255,.45);font-weight:var(--w-secondary)}
/* +/− toggle: horizontal bar always; vertical bar fades in when collapsed */
.localeRegionToggle{position:relative;width:16px;height:16px;flex:0 0 auto}
.localeRegionToggle::before,.localeRegionToggle::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .28s var(--ease-lift),opacity .28s}
.localeRegionToggle::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.localeRegionToggle::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.localeRegion:not(.is-collapsed) .localeRegionToggle::after{opacity:0}
/* collapsible list */
.localeList{overflow:hidden;max-height:600px;opacity:1;padding-bottom:8px;transition:max-height .34s var(--ease-nav),opacity .3s,padding .3s}
.localeRegion.is-collapsed .localeList{max-height:0;opacity:0;padding-bottom:0}
.localeItem{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 6px;border-radius:var(--r-sm);color:rgba(255,255,255,.72);transition:color .2s,background .2s,transform .2s var(--ease-lift)}
.localeItem:hover{color:#fff;background:rgba(255,255,255,.05);transform:translateX(3px)}
.localeItemMain{display:flex;align-items:baseline;gap:10px;min-width:0}
.localeItemLabel{font-size:var(--text-md);font-weight:var(--w-secondary);letter-spacing:.01em}
.localeItemSub{font-size:var(--text-xs);color:rgba(255,255,255,.4)}
/* current locale: lime dot + lime text */
.localeItemCurrent{color:var(--lime-400)}
.localeItemCurrent .localeItemMain{position:relative;padding-left:18px}
.localeItemCurrent .localeItemMain::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--lime-400);box-shadow:0 0 0 4px rgba(205,247,87,.18)}

/* spinning conic border pill — landing "premium" CTA trick, lime edition
   (used by the hero CTA via CtaSpin.astro) */
.ctaSpin{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 22px;border-radius:var(--r-full);font-weight:var(--w-button);font-size:14px;color:var(--n-950);border:1.5px solid transparent;background:
  linear-gradient(#fff,#fff) padding-box,
  conic-gradient(from var(--cta-angle),var(--lime-400),var(--lime-100) 30%,var(--lime-400) 50%,var(--lime-600) 72%,var(--lime-400)) border-box;
  animation:ctaSpin 4s linear infinite;transition:transform .2s var(--ease-lift),box-shadow .28s}
.ctaSpin:hover{animation-duration:2.4s;transform:translateY(-2px);box-shadow:0 16px 34px rgba(121,150,27,.34);background:
  linear-gradient(var(--lime-400),var(--lime-400)) padding-box,
  conic-gradient(from var(--cta-angle),var(--lime-400),var(--lime-100) 30%,var(--lime-400) 50%,var(--lime-600) 72%,var(--lime-400)) border-box}
@keyframes ctaSpin{to{--cta-angle:360deg}}

/* arrow-swap: two stacked arrows slide on hover */
.arrowSwap{position:relative;width:34px;height:34px;border-radius:var(--r-full);background:var(--n-950);color:var(--lime-400);overflow:hidden;display:grid;place-items:center}
.arrowSwap svg{position:absolute;transition:transform .52s var(--ease-arrow)}
.arrowSwap .clone{transform:translateX(-32px)}
.ctaSpin:hover .arrowSwap svg{transform:translateX(32px)}
.ctaSpin:hover .arrowSwap .clone{transform:translateX(0)}

/* ==========================================================================
   FOOTER — brand card, 3 link columns, address strip, socials
   ========================================================================== */
.footer{background:#FAFAFA;border-top:1px solid rgba(0,0,0,.05);padding:36px 0 60px;font-size:var(--text-sm)}
.footerMain{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,2.55fr);gap:clamp(28px,3.2vw,52px);max-width:1360px;margin:0 auto;padding:0 32px}
.brandCol{background:linear-gradient(#fff,#FDFFF7);border:1px solid rgba(92,115,18,.14);border-radius:var(--r-lg);padding:32px;box-shadow:0 8px 28px rgba(62,79,5,.05);height:fit-content}
.footerAbout{font-size:15px;line-height:1.62;color:var(--text-secondary);margin:18px 0 24px}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.certBadge{display:grid;place-items:center;height:44px;font-size:10px;font-weight:var(--w-primary);letter-spacing:.08em;text-transform:uppercase;color:var(--n-700);background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r-sm);opacity:.9;transition:opacity .2s,transform .2s var(--ease-lift)}
.certBadge:hover{opacity:1;transform:translateY(-2px)}
.linkColumns{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,28px)}
.linksColB{border-left:1px solid rgba(92,115,18,.14);padding-left:clamp(16px,2.5vw,28px)}
/* a `wide` column (footer Resources) spans 2 tracks and flows its links into 2 sub-columns */
.linksColWide{grid-column:span 2}
.linksColWide .footerList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(16px,2vw,28px)}
.blockTitle{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);font-weight:var(--w-primary);letter-spacing:.06em;text-transform:uppercase;color:var(--lime-900);margin:0 0 16px}
.blockIcon{width:22px;height:22px;border-radius:50%;background:var(--lime-100);color:var(--lime-900);display:grid;place-items:center;flex:0 0 auto}
.footerList{display:flex;flex-direction:column;gap:10px}
.footerList a{font-size:15px;font-weight:var(--w-secondary);color:var(--n-800);display:inline-block;transition:color .2s,transform .2s}
.footerList a:hover{color:var(--lime-800);transform:translateX(3px)}
.addressStrip{max-width:1360px;margin:var(--s-5) auto 0;padding:0 32px}
.addressStripInner{background:rgba(241,252,219,.5);border:1px solid rgba(153,186,53,.25);border-radius:var(--r-lg);padding:24px 28px}
.addressGrid{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:14px}
.addressItem{flex:1;min-width:220px;border-right:1px solid rgba(153,186,53,.35);padding-right:var(--s-3);font-size:var(--text-sm);color:var(--text-secondary)}
.addressItem:last-child{border-right:0}
.addressItem strong{display:block;color:var(--n-950);margin-bottom:4px}
.socialsRow{max-width:1360px;margin:var(--s-4) auto 0;padding:0 32px}
.socialsContent{display:flex;align-items:center;gap:var(--s-2);border-top:1px solid var(--n-200);padding-top:var(--s-3)}
.socialsLabel{font-size:var(--text-sm);font-weight:var(--w-secondary);color:var(--text-muted)}
.socialLink{width:36px;height:36px;border-radius:50%;border:1px solid var(--n-200);display:grid;place-items:center;color:var(--n-700);transition:color .2s,transform .2s var(--ease-lift),border-color .2s}
.socialLink:hover{color:var(--lime-800);border-color:var(--lime-600);transform:translateY(-2px)}

/* ==========================================================================
   RESPONSIVE — shell collapse points
   ========================================================================== */
/* The centred pill product-switcher needs the full middle width. Below this it
   would collide with the right-hand actions cluster (globe/menu/demo), so it
   collapses into the mega-menu, which reveals its Products group here (and
   re-flows to two columns) so the products stay reachable. */
@media (max-width:1280px){
  .audienceNav{display:none}
  .popupColProducts{display:block}
  .popupSections{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .footerMain{grid-template-columns:1fr}
}
@media (max-width:768px){
  .audienceNav{display:none}
  /* dissolve the actions wrappers (empty boxes were eating the right slot of
     space-between, pushing the hamburger to the middle) while keeping the
     popup inside them renderable for the mobile menu */
  .navActions,.menuWrap{display:contents}
  .navActions .iconBtn,.demoBtn{display:none}
  .mobileMenuToggle{display:grid;width:42px;height:42px;background:var(--lime-50);order:3}
  /* keep the globe (locale switcher) visible on mobile, right-aligned before the menu */
  .navActions .localeBtn{display:grid;width:42px;height:42px;order:2;margin-left:auto}
  /* mobile header: logo left, hamburger right */
  .topBarInner{height:52px;padding:0 14px;justify-content:space-between}
  /* footer: stack link columns, drop the column divider lines */
  .linkColumns{grid-template-columns:1fr;gap:var(--s-4)}
  .linksColB{border-left:0;padding-left:0}
  .linksColWide{grid-column:auto}
  .linksColWide .footerList{grid-template-columns:1fr}
  /* footer: center everything on mobile */
  .brandCol{text-align:center}
  .brandCol .brand{justify-content:center}
  .blockTitle{justify-content:center}
  .footerList{align-items:center;text-align:center}
  .addressStripInner{text-align:center}
  .addressItem{text-align:center}
  .socialsContent{justify-content:center}
  /* address strip: stack items, swap right-side lines for bottom dividers */
  .addressGrid{flex-direction:column;gap:var(--s-2)}
  .addressItem{border-right:0;padding-right:0;border-bottom:1px solid rgba(153,186,53,.35);padding-bottom:var(--s-2)}
  .addressItem:last-child{border-bottom:0;padding-bottom:0}
  .topBar{top:26px}
  .topBar.isFloat{top:8px;width:calc(100vw - 16px);border-radius:var(--r-full)}
  .topBar.isFloat .topBarInner{height:52px;padding:0 12px}
  .announceStrip{height:26px;font-size:12px}
  .announceStrip .announceDivider,.announceStrip .announceDate{display:none}
  /* full-width sheet — reset the desktop centre-transform so left/right pin */
  .popup{position:fixed;top:82px;left:14px;right:14px;width:auto;transform:translateY(8px)}
  .popup.open{transform:none}
  .popupSections{grid-template-columns:1fr}
}

/* ---- reduced motion: kill the spinning CTA border --------------------- */
@media (prefers-reduced-motion:reduce){
  .ctaSpin{animation:none!important}
}