/*
Theme Name: Axiom Peptides
Theme URI: https://axiomlabz.edu
Author: AxiomLabz
Author URI: https://axiomlabz.edu
Description: High-end peptide education platform. Scientific credibility meets premium wellness design.
Version: 3.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: axiom-peptides
Tags: dark, education, science, wellness, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   CRITICAL ABOVE-FOLD STYLES
   (Inlined to prevent flash of unstyled content)
   ============================================================ */

:root {
  /* Color tokens (dark theme - the only theme) */
  --clr-bg:          #070B14;
  --clr-surface:     #0D1526;
  --clr-surface-2:   #111C32;
  --clr-surface-3:   #162038;
  --clr-accent:      #1F6FEB;   /* Axiom Labz brand blue (PMS 293 family) */
  --clr-accent-h:    #1A5FD0;
  --clr-accent-dim:  rgba(31,111,235,.12);
  --clr-accent-glow: rgba(31,111,235,.28);
  --clr-text-1:      #F8FAFC;
  --clr-text-2:      #CBD5E1;
  --clr-text-3:      #94A3B8;
  --clr-text-4:      #64748B;
  --clr-border:      rgba(255,255,255,.07);
  --clr-border-a:    rgba(31,111,235,.22);
  --clr-vignette:    7, 11, 20;     /* used by rgba() in vignette + scrolled header */
  --bg-noise-blend:  overlay;
  --webgl-opacity:   .45;
  --bg-mesh-opacity: 1;
}

/* Theme-INDEPENDENT tokens (typography, spacing, motion) */
:root {
  /* Typography */
  --font-display: 'Satoshi', 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --text-sm:   clamp(.875rem, .8rem  + .375vw, 1rem);
  --text-base: clamp(1rem,    .9rem  + .5vw,   1.125rem);
  --text-lg:   clamp(1.125rem,1rem   + .6vw,   1.375rem);
  --text-xl:   clamp(1.25rem, 1.1rem + .75vw,  1.625rem);
  --text-2xl:  clamp(1.5rem,  1.25rem + 1.2vw, 2.25rem);
  --text-3xl:  clamp(2rem,    1.6rem  + 2vw,   3.25rem);
  --text-4xl:  clamp(2.5rem,  2rem    + 2.5vw, 4.5rem);
  --text-hero: clamp(3.25rem, 2.5rem  + 4vw,   7.5rem);

  /* Spacing */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;
  --sp-4:  1rem;    --sp-5:  1.25rem; --sp-6:  1.5rem;
  --sp-7:  1.75rem; --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;
  --sp-24: 6rem;    --sp-32: 8rem;

  /* Shape - ONE radius system */
  --r-sm:   8px;
  --r:      16px;
  --r-lg:   24px;
  --r-full: 9999px;

  /* Motion */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
}

/* Nav critical. The header is ABSOLUTE (not fixed) so it smoothly scrolls
   off the top of the screen as you scroll down - no flashing sticky bar. */
#site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  background: transparent;
}
/* (.scrolled is still toggled by JS but intentionally has no visual change
   now that the header simply scrolls away.) */

/* On mobile the header is FIXED (standard mobile pattern) so the hamburger
   is always reachable and the drawer overlay behaves predictably. The
   scroll-away behaviour is desktop-only. */
@media (max-width: 768px) {
  /* IMPORTANT: no backdrop-filter / transform / filter here. Any of those
     create a containing block that TRAPS the fixed .nav-drawer child,
     collapsing it so it can't cover the page (the "transparent menu" bug). */
  #site-header {
    position: fixed;
    background: rgba(7, 11, 20, .92);
    border-bottom: 1px solid var(--clr-border);
  }
  /* While the drawer is open, the header bar matches the drawer's solid
     background so the logo + close-X sit on one seamless dark panel. */
  body.nav-open #site-header { background: #070B14; border-bottom: 0; }
}

/* WordPress admin bar: header starts below the 32px (46px mobile) admin bar.
   The sticky category filter sticks to the very top (admin-bar offset only). */
.admin-bar #site-header     { top: 32px; }
.admin-bar .library-filters { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header     { top: 46px; }
  .admin-bar .library-filters { top: 46px; }
}

/* Body lock during mobile nav */
body.nav-open { overflow: hidden; }