/* ==========================================================================
   CPS Tester — Header, Mega Menu, Mobile Menu, Footer, Prose
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:var(--header-height);
  display:flex;
  align-items:center;
  background:var(--surface-raised);
  border-bottom:1px solid var(--surface-border);
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  width:100%;
  position:relative;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-xl);
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text-primary);
  min-width:0;
}
.site-logo__mark{
  width:34px;height:34px;
  border-radius:9px;
  background:var(--grad-orange);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-on-accent);
  font-weight:800;
  font-size:16px;
  flex-shrink:0;
}
.site-logo__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Uploaded logo: height comes from the Customizer (--logo-h*), width is
   auto so aspect ratio is preserved, and max-width stops a very wide logo
   from crowding the menu button on small phones. */
.site-logo__img{
  display:block;
  height:var(--logo-h-mobile,30px);
  width:auto;
  max-width:min(180px,48vw);
  object-fit:contain;
}
@media (min-width:1024px){.site-logo__img{height:var(--logo-h,36px);max-width:240px;}}
.site-footer .site-logo__img{height:var(--logo-h,36px);max-width:220px;}

/* ---------- Primary nav + mega menu ---------- */
.primary-nav{display:none;}
@media (min-width:1024px){
  .primary-nav{
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    justify-content:center;
  }
}
.primary-nav__item{position:relative;}
.primary-nav__item--mega{position:static;}
.primary-nav__link{
  display:flex;
  align-items:center;
  gap:4px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-family:var(--font-heading);
  font-size:var(--fs-base);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--text-secondary);
  transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);
}
@media (min-width:1024px) and (max-width:1279px){
  .primary-nav__link{padding-inline:8px;font-size:var(--fs-sm);}
  .site-header__inner{gap:var(--space-3);}
  #header-level-badge{display:none !important;}
}
.primary-nav__link:hover,.primary-nav__item:hover > .primary-nav__link,.primary-nav__link[aria-current="page"]{color:var(--text-primary);background:var(--surface-card);}
.primary-nav__chevron{width:14px;height:14px;transition:transform var(--duration-base) var(--ease-out);}
.primary-nav__item:hover .primary-nav__chevron{transform:rotate(180deg);}

.mega{
  position:absolute;
  top:100%;
  left:50%;
  width:min(1120px,calc(100vw - 32px));
  transform:translate(-50%,8px);
  padding:var(--space-6);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-6);
  background:var(--surface-raised);
  border:1px solid var(--surface-border-strong);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),visibility var(--duration-base);
}
.primary-nav__item:hover > .mega,
.primary-nav__item:focus-within > .mega{opacity:1;visibility:visible;transform:translate(-50%,0);}
.mega__title{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-sm);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-accent-400);
  margin-bottom:var(--space-3);
}
.mega ul{display:flex;flex-direction:column;gap:2px;}
.mega a{
  display:block;
  padding:6px 8px;
  margin-inline:-8px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  color:var(--text-secondary);
}
.mega a:hover{background:var(--surface-card);color:var(--text-primary);}

.header-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;}
.header-actions .btn{display:none;}
@media (min-width:640px){.header-actions .btn{display:inline-flex;}}
#header-level-badge{display:none;}
@media (min-width:1280px){#header-level-badge{display:inline-flex;}}

.menu-toggle{
  display:flex;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:var(--radius-sm);
  color:var(--text-primary);
}
@media (min-width:1024px){.menu-toggle{display:none;}}
.menu-toggle svg{width:22px;height:22px;}
.menu-toggle .icon-close{display:none;}
.menu-toggle[aria-expanded="true"] .icon-open{display:none;}
.menu-toggle[aria-expanded="true"] .icon-close{display:block;}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed;
  inset:0;
  top:var(--header-height);
  background:var(--surface-canvas);
  z-index:var(--z-mobile-menu);
  padding:var(--space-4) var(--space-5) var(--space-10);
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--duration-slow) var(--ease-out),visibility 0s linear var(--duration-slow);
}
.mobile-menu[data-open="true"]{transform:translateX(0);visibility:visible;transition:transform var(--duration-slow) var(--ease-out);}
@media (min-width:1024px){.mobile-menu{display:none;}}
.mobile-menu details{border-bottom:1px solid var(--surface-border);}
.mobile-menu summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 2px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-lg);
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
  list-style:none;
}
.mobile-menu summary::-webkit-details-marker{display:none;}
.mobile-menu summary::after{content:"+";font-size:1.4rem;color:var(--color-accent-400);line-height:1;}
.mobile-menu details[open] summary::after{content:"\2212";}
.mobile-menu__links{display:flex;flex-direction:column;padding-bottom:var(--space-3);}
.mobile-menu__link{
  display:block;
  padding:11px 6px;
  font-size:var(--fs-base);
  color:var(--text-secondary);
}
.mobile-menu__link:hover{color:var(--text-primary);}
.mobile-menu__single{
  display:block;
  padding:15px 2px;
  border-bottom:1px solid var(--surface-border);
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-lg);
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.mobile-menu__cta{margin-top:var(--space-6);}

body.mobile-menu-open{overflow:hidden;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--surface-raised);
  border-top:1px solid var(--surface-border);
  padding-block:var(--space-10) var(--space-6);
  margin-top:var(--space-10);
}
.footer-tools{
  padding-bottom:var(--space-8);
  margin-bottom:var(--space-8);
  border-bottom:1px solid var(--surface-border);
}
.footer-tools__title{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-xl);
  text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.footer-tools__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2) var(--space-4);
}
@media (min-width:640px){.footer-tools__grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1024px){.footer-tools__grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.footer-tools__grid a{
  padding:7px 0;
  color:var(--text-secondary);
  font-size:var(--fs-sm);
  border-bottom:1px dashed var(--surface-border);
  overflow-wrap:anywhere;
}
.footer-tools__grid a:hover{color:var(--color-accent-400);}

.footer-grid{
  display:grid;
  gap:var(--space-8);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.5fr repeat(3,minmax(0,1fr));}}

.footer-newsletter{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  padding-bottom:var(--space-8);
  margin-bottom:var(--space-8);
  border-bottom:1px solid var(--surface-border);
}
@media (min-width:768px){
  .footer-newsletter{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-8);}
}
.footer-newsletter__copy h3{margin-bottom:4px;text-transform:uppercase;}
.footer-newsletter__form-wrap{width:100%;max-width:440px;flex-shrink:0;}
.newsletter-form{display:flex;gap:var(--space-2);position:relative;}
.newsletter-form .btn{flex-shrink:0;}
.newsletter-form input[type="email"]{
  padding:12px 16px;
  flex:1;
  min-width:0;
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  color:var(--text-primary);
}
.newsletter-form input[type="email"]:focus{border-color:var(--color-accent-400);}
.newsletter-form__message{margin-top:var(--space-3);font-size:var(--fs-sm);font-weight:600;}
.newsletter-form__message.is-success{color:var(--color-success-400);}
.newsletter-form__message.is-error{color:#fca5a5;}
.footer-brand p{color:var(--text-secondary);font-size:var(--fs-sm);max-width:340px;margin-top:var(--space-3);}
.footer-col__title{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-base);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:var(--space-4);
  color:var(--color-accent-400);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-2);}
.footer-col a{color:var(--text-secondary);font-size:var(--fs-sm);}
.footer-col a:hover{color:var(--text-primary);}
.footer-bottom{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:1px solid var(--surface-border);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-5);
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-xs);
  color:var(--text-muted);
}
.footer-bottom a{color:var(--text-muted);}
.footer-bottom a:hover{color:var(--text-secondary);}

/* ---------- Article / prose content ---------- */
.prose{color:var(--text-secondary);font-size:var(--fs-base);line-height:var(--lh-normal);min-width:0;}
.prose > * + *{margin-top:var(--space-4);}
.prose h2{color:var(--text-primary);font-size:var(--fs-2xl);margin-top:var(--space-8);scroll-margin-top:84px;}
.prose h3{color:var(--text-primary);font-size:var(--fs-xl);margin-top:var(--space-6);scroll-margin-top:84px;}
.prose h2 + *,.prose h3 + *{margin-top:var(--space-3);}
.prose ul,.prose ol{padding-left:var(--space-6);}
.prose ul{list-style:disc;}
.prose ol{list-style:decimal;}
.prose li + li{margin-top:var(--space-2);}
.prose li::marker{color:var(--color-accent-400);}
.prose strong{color:var(--text-primary);}
.prose a{color:var(--color-accent-400);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--color-warning-400);}
.prose blockquote{
  border-left:3px solid var(--color-accent-500);
  padding:var(--space-2) var(--space-5);
  background:var(--surface-card);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text-primary);
}
.prose img{border-radius:var(--radius-md);}
.prose code{background:var(--surface-card);padding:2px 6px;border-radius:4px;font-size:0.9em;}
.prose .formula{
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  font-family:var(--font-heading);
  font-size:var(--fs-xl);
  font-weight:700;
  color:var(--text-primary);
  overflow-wrap:anywhere;
}

/* Tables scroll inside their own wrapper so they can never widen the page. */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--surface-border-strong);-webkit-overflow-scrolling:touch;}
.table-wrap table,.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:420px;}
.prose table th,.prose table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--surface-border);}
.prose table thead th{
  background:var(--surface-card);
  color:var(--text-primary);
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:var(--fs-sm);
}
.prose table tbody tr:last-child td{border-bottom:0;}
.prose table tbody tr:nth-child(even){background:rgba(255,255,255,0.02);}