/* ==========================================================================
   CPS Tester — Header, Navigation, Footer
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:var(--header-height);
  display:flex;
  align-items:center;
  background:rgba(8,9,13,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--surface-border);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  width:100%;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-lg);
  color:var(--text-primary);
  flex-shrink:0;
}
.site-logo__mark{
  width:34px;height:34px;
  border-radius:10px;
  background:var(--brand-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:15px;
}

.primary-nav{display:none;}
@media (min-width:1024px){
  .primary-nav{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex:1;
    justify-content:center;
  }
}
.primary-nav__item{position:relative;}
.primary-nav__link{
  display:flex;
  align-items:center;
  gap:4px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-secondary);
  transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);
}
.primary-nav__link:hover,.primary-nav__item:hover .primary-nav__link{color:var(--text-primary);background:var(--surface-raised);}
.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);}

.primary-nav__dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:var(--surface-raised);
  border:1px solid var(--surface-border-strong);
  border-radius:var(--radius-md);
  padding:var(--space-2);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),visibility var(--duration-base);
}
.primary-nav__item:hover .primary-nav__dropdown,
.primary-nav__item:focus-within .primary-nav__dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.primary-nav__dropdown a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  color:var(--text-secondary);
}
.primary-nav__dropdown a:hover{background:var(--surface-card-hover);color:var(--text-primary);}
.primary-nav__dropdown small{color:var(--text-muted);font-size:11px;}

.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:900px){#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{
  position:fixed;
  inset:0;
  top:var(--header-height);
  background:var(--surface-canvas);
  z-index:var(--z-mobile-menu);
  padding:var(--space-6) var(--space-5) var(--space-10);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--duration-slow) var(--ease-out);
}
.mobile-menu[data-open="true"]{transform:translateX(0);}
@media (min-width:1024px){.mobile-menu{display:none;}}
.mobile-menu__group{margin-bottom:var(--space-6);}
.mobile-menu__label{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  margin-bottom:var(--space-3);
  font-weight:600;
}
.mobile-menu__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 4px;
  border-bottom:1px solid var(--surface-border);
  font-size:var(--fs-base);
  font-weight:500;
}
.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-16) var(--space-8);
}
.footer-grid{
  display:grid;
  gap:var(--space-8);
  grid-template-columns:1fr;
}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.4fr repeat(4,1fr);}}

/* ---------- Footer newsletter ---------- */
.footer-newsletter{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  padding-bottom:var(--space-10);
  margin-bottom:var(--space-10);
  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;}
.newsletter-form{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  flex-shrink:0;
}
.newsletter-form input[type="email"]{
  padding:12px 16px;
  min-width:240px;
  border-radius:var(--radius-pill);
  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-brand-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:320px;margin-top:var(--space-3);}
.footer-col__title{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--space-4);color:var(--text-primary);}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col a{color:var(--text-secondary);font-size:var(--fs-sm);}
.footer-col a:hover{color:var(--color-brand-300);}
.footer-bottom{
  margin-top:var(--space-12);
  padding-top:var(--space-6);
  border-top:1px solid var(--surface-border);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  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);}
.prose > * + *{margin-top:var(--space-5);}
.prose h2{color:var(--text-primary);font-size:var(--fs-2xl);margin-top:var(--space-10);}
.prose h3{color:var(--text-primary);font-size:var(--fs-xl);margin-top:var(--space-8);}
.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 a{color:var(--color-brand-300);text-decoration:underline;text-underline-offset:3px;}
.prose blockquote{
  border-left:3px solid var(--color-brand-500);
  padding-left:var(--space-5);
  color:var(--text-primary);
  font-style:italic;
}
.prose img{border-radius:var(--radius-md);}
.prose code{background:var(--surface-card);padding:2px 6px;border-radius:4px;font-size:0.9em;}