/*
 * AN Glass UI — v5.0.0
 * Apple Vision OS Spatial Glass System
 * ══════════════════════════════════════════════════════════════
 *
 * ARCHITECTURE DECISIONS (final, definitive):
 *
 * 1. ZERO backdrop-filter on article cards or widgets.
 *    Glass depth = shadow z-system + tinted dark background.
 *    One backdrop-filter: sticky nav only.
 *    Mobile nav: reduced blur for GPU budget.
 *
 * 2. HEADING COLOUR: color + -webkit-text-fill-color ALWAYS.
 *    Critical CSS fires at PHP priority 0 to beat themes.
 *    Covers: block themes, Astra, GeneratePress, Elementor,
 *    OceanWP, Kadence, Twenty Twenty-Four/Five.
 *
 * 3. SEARCH/INPUT TEXT: -webkit-text-fill-color + autofill
 *    box-shadow trick + caret-color. Tested across Chrome,
 *    Safari, Firefox.
 *
 * 4. 144Hz GPU COMPOSITOR:
 *    Animated elements only get will-change + translateZ(0).
 *    Static elements: NO will-change (wastes VRAM).
 *    All transitions: transform, opacity, box-shadow only.
 *    No top/left/width/height transitions.
 *
 * 5. ALIGNMENT: 8px grid system. CSS custom property spacing.
 *    Consistent padding/margin using --sp-* tokens.
 *
 * 6. NO: contain, overflow:hidden on articles, z-index fights,
 *    pointer-events interference, event-consuming overlays.
 *
 * ══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════
   §0  DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* ── Colour palette ── */
  --red:         #FF3B30;
  --red-hover:   #FF6961;
  --red-tint:    rgba(255,59,48,0.13);
  --red-glow:    rgba(255,59,48,0.35);

  --blue:        #0A84FF;
  --blue-hover:  #5AC8FF;
  --blue-tint:   rgba(10,132,255,0.12);
  --blue-glow:   rgba(10,132,255,0.38);

  --green:       #30D158;
  --green-hover: #7EE8A2;
  --green-tint:  rgba(48,209,88,0.11);
  --green-glow:  rgba(48,209,88,0.35);

  /* ── White scale ── */
  --w100: #ffffff;
  --w95:  rgba(255,255,255,0.95);
  --w90:  rgba(255,255,255,0.90);
  --w75:  rgba(255,255,255,0.75);
  --w50:  rgba(255,255,255,0.50);
  --w28:  rgba(255,255,255,0.28);
  --w14:  rgba(255,255,255,0.14);
  --w09:  rgba(255,255,255,0.09);
  --w06:  rgba(255,255,255,0.06);
  --w03:  rgba(255,255,255,0.03);

  /* ── Scene background ── */
  --bg-base:     #04070f;
  --bg-gradient:
    radial-gradient(ellipse 820px 680px at  6% 18%, rgba(48,209,88,0.11)  0%, transparent 68%),
    radial-gradient(ellipse 700px 580px at 93% 12%, rgba(10,132,255,0.13) 0%, transparent 68%),
    radial-gradient(ellipse 500px 420px at 50% 90%, rgba(255,59,48,0.07)  0%, transparent 68%),
    radial-gradient(ellipse 800px 600px at 50% 50%, rgba(4,8,22,0.55)     0%, transparent 100%),
    linear-gradient(160deg, #03060e 0%, #04070f 55%, #020a06 100%);

  /* ── Vision OS glass materials ── */
  --mat-panel:   rgba(16,24,40,0.74);    /* floating panel  */
  --mat-raised:  rgba(20,30,50,0.80);    /* single article  */
  --mat-deep:    rgba(6,10,20,0.88);     /* code, deep UI   */
  --mat-nav:     rgba(4,7,14,0.84);      /* navigation bar  */
  --mat-toc:     rgba(8,14,26,0.72);     /* table of contents */
  --mat-tint-b:  rgba(10,132,255,0.07);  /* blue tinted panel */
  --mat-tint-g:  rgba(48,209,88,0.06);   /* green tinted panel */

  /* ── Spatial shadow z-system ── */
  /* Z1 = resting on surface */
  --z1: 0 2px  8px  rgba(0,0,0,0.32),
        0 1px  2px  rgba(0,0,0,0.22);

  /* Z2 = slightly elevated */
  --z2: 0 4px  16px rgba(0,0,0,0.42),
        0 2px  4px  rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);

  /* Z3 = floating panel */
  --z3: 0 10px 36px rgba(0,0,0,0.52),
        0 4px  10px rgba(0,0,0,0.32),
        0 1px  2px  rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.12);

  /* Z4 = elevated hover */
  --z4: 0 18px 56px rgba(0,0,0,0.64),
        0 6px  18px rgba(0,0,0,0.38),
        0 2px  4px  rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.16);

  /* ── Borders ── */
  --bdr:      rgba(255,255,255,0.10);
  --bdr-mid:  rgba(255,255,255,0.16);
  --bdr-hi:   rgba(255,255,255,0.24);
  --bdr-red:  rgba(255,59,48,0.28);
  --bdr-blue: rgba(10,132,255,0.26);
  --bdr-grn:  rgba(48,209,88,0.24);

  /* ── Spacing — 8px grid ── */
  --sp1: 4px;  --sp2: 8px;   --sp3: 12px; --sp4: 16px;
  --sp5: 20px; --sp6: 24px;  --sp7: 32px; --sp8: 40px;
  --sp9: 48px; --sp10: 64px;

  /* ── Radii ── */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-pill: 100px;

  /* ── Typography ── */
  --f-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── 144Hz easing curves ── */
  --ease-out:    cubic-bezier(0.22, 1.00, 0.36, 1.00);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-snap:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0.00, 0.58, 1.00);
}

/* ═══════════════════════════════════════════════
   §1  SCENE — Deep Vision OS dark canvas
   ═══════════════════════════════════════════════ */
html.ang {
  scroll-behavior: smooth;
  height: 100%;
}

body.ang {
  background-color: var(--bg-base) !important;
  background-image: var(--bg-gradient) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: var(--w90) !important;
  font-family: var(--f-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

/* ═══════════════════════════════════════════════
   §2  UNIVERSAL BACKGROUND OBLITERATION
   Three-layer strategy:
   A) Tag selectors — sets transparent on everything
   B) Class selectors for common theme patterns
   C) Inline [style] attribute selectors
   ═══════════════════════════════════════════════ */

/* A — Tag sweep */
body.ang div,   body.ang section, body.ang article,
body.ang aside, body.ang main,    body.ang header,
body.ang nav,   body.ang ul,      body.ang ol,
body.ang li,    body.ang span,    body.ang p,
body.ang form,  body.ang fieldset,body.ang summary,
body.ang details,body.ang figure, body.ang figcaption,
body.ang blockquote {
  background-color: transparent !important;
  background-image:  none !important;
}
body.ang table, body.ang thead, body.ang tbody,
body.ang tfoot, body.ang tr {
  background-color: transparent !important;
  background-image:  none !important;
}

/* B — Common theme class patterns */
body.ang .site-content,
body.ang .site-inner,
body.ang #page,
body.ang .content-area,
body.ang .post-inner,
body.ang .inside-article,
body.ang .entry,
body.ang .ast-container,
body.ang .ast-article-single,
body.ang .generate-columns-container,
body.ang .inside-header-image,
body.ang .wp-block-template-part,
body.ang .wp-block-post-content,
body.ang .is-layout-flow,
body.ang .is-layout-constrained,
body.ang .elementor-section,
body.ang .elementor-container,
body.ang .elementor-column-wrap,
body.ang .elementor-widget-wrap,
body.ang .vc_row,
body.ang .vc_column-inner,
body.ang .wp-site-blocks,
body.ang .kadence-inner-column-inner,
body.ang .oceanwp-mobile-menu-icon,
body.ang .singular-image-wrap {
  background-color: transparent !important;
  background-image:  none !important;
}

/* C — Inline style overrides */
body.ang [style*="background:#fff"],
body.ang [style*="background: #fff"],
body.ang [style*="background:#FFF"],
body.ang [style*="background:#ffffff"],
body.ang [style*="background:#FFFFFF"],
body.ang [style*="background: #ffffff"],
body.ang [style*="background:white"],
body.ang [style*="background: white"],
body.ang [style*="background-color:#fff"],
body.ang [style*="background-color: #fff"],
body.ang [style*="background-color:#ffffff"],
body.ang [style*="background-color: #ffffff"],
body.ang [style*="background-color:white"],
body.ang [style*="background-color: white"],
body.ang [style*="background-color:#fafafa"],
body.ang [style*="background-color: #fafafa"],
body.ang [style*="background-color:#f9f9f9"],
body.ang [style*="background-color:#f5f5f5"],
body.ang [style*="background-color:#f8f8f8"],
body.ang [style*="background-color:#efefef"],
body.ang [style*="background-color:rgb(255, 255, 255)"],
body.ang [style*="background-color:rgb(255,255,255)"],
body.ang [style*="background-color:rgba(255, 255, 255, 1)"] {
  background-color: var(--mat-panel) !important;
  background-image:  none !important;
}

/* Fix dark text surviving on now-dark backgrounds */
body.ang [style*="color:#000"],
body.ang [style*="color: #000"],
body.ang [style*="color:#000000"],
body.ang [style*="color:#111"],
body.ang [style*="color:#222"],
body.ang [style*="color:#333"],
body.ang [style*="color:#444"],
body.ang [style*="color:#555"],
body.ang [style*="color:black"],
body.ang [style*="color: black"],
body.ang [style*="color:rgb(0, 0, 0)"],
body.ang [style*="color:rgb(0,0,0)"] {
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
}

/* WordPress block theme CSS variable override */
body.ang {
  --wp--preset--color--black:           rgba(255,255,255,0.90) !important;
  --wp--preset--color--white:           rgba(255,255,255,0.90) !important;
  --wp--preset--color--contrast:        rgba(255,255,255,0.90) !important;
  --wp--preset--color--contrast-2:      rgba(255,255,255,0.75) !important;
  --wp--preset--color--base:            transparent            !important;
  --wp--preset--color--base-2:          transparent            !important;
}

/* ═══════════════════════════════════════════════
   §3  NAVIGATION BAR
   THE ONE backdrop-filter in the whole system.
   All other glass = shadow depth.
   ═══════════════════════════════════════════════ */
body.ang .site-header,
body.ang header.site-header,
body.ang #masthead,
body.ang #header,
body.ang .main-header,
body.ang .header-inner,
body.ang #site-header,
body.ang .ast-primary-header {
  background: var(--mat-nav) !important;
  backdrop-filter: blur(44px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(44px) saturate(210%) !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), var(--z2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  transition:
    background 0.28s var(--ease-snap),
    box-shadow 0.28s var(--ease-snap) !important;
}

body.ang .site-header.ang-scrolled,
body.ang #masthead.ang-scrolled {
  background: rgba(2,4,9,0.94) !important;
  box-shadow: 0 1px 0 var(--bdr), var(--z3) !important;
}

/* Site title */
body.ang .site-title,
body.ang .site-title a,
body.ang .site-branding a,
body.ang .custom-logo-link,
body.ang .logo a,
body.ang #site-title,
body.ang #site-title a {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-disp) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-shadow: 0 0 24px var(--green-glow) !important;
}

/* Nav links */
body.ang .main-navigation a,
body.ang .nav-menu a,
body.ang #site-navigation a,
body.ang .menu a,
body.ang nav.navigation a,
body.ang .primary-menu a,
body.ang .ast-main-header-wrap a {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  padding: 7px 12px !important;
  border-radius: var(--r-xs) !important;
  display: inline-block !important;
  /* GPU compositor — active only on hover */
  transition:
    color      0.14s var(--ease-snap),
    background 0.14s var(--ease-snap) !important;
}
body.ang .main-navigation a:hover,
body.ang nav.navigation a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  background: var(--w09) !important;
}
body.ang .current-menu-item > a,
body.ang .current_page_item > a,
body.ang .current-menu-ancestor > a {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  background: var(--green-tint) !important;
}

/* Dropdown */
body.ang .sub-menu {
  background: rgba(3,5,12,0.97) !important;
  border: 1px solid var(--bdr-mid) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--z4) !important;
  padding: var(--sp2) !important;
  animation: ang-fade-in 0.18s var(--ease-out) !important;
}
body.ang .sub-menu a {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
  border-radius: var(--r-xs) !important;
  display: block !important;
}
body.ang .sub-menu a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  background: var(--w09) !important;
}

/* Mobile menu toggle */
body.ang .menu-toggle,
body.ang button.menu-toggle {
  background: var(--w09) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-xs) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  padding: var(--sp2) var(--sp3) !important;
  font-family: var(--f-body) !important;
}

/* ═══════════════════════════════════════════════
   §4  TYPOGRAPHY — Colour hierarchy
   EVERY rule: color + -webkit-text-fill-color.
   Critical CSS also sets these but we re-assert
   at maximum specificity here for theme overrides.
   ═══════════════════════════════════════════════ */

/* ── H1: RED — commanding, editorial ── */
body.ang h1,
body.ang h1.entry-title,
body.ang .entry-title,
body.ang .page-title,
body.ang .post-title,
body.ang .hero-title,
body.ang .wp-block-post-title,
body.ang .wp-block-heading h1,
body.ang article h1,
body.ang .hentry h1,
body.ang main h1,
body.ang #primary h1,
body.ang .site-content h1,
body.ang .content-area h1,
body.ang h1.ast-blog-single-element,
body.ang .entry-header h1,
body.ang .page-header h1 {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.026em !important;
  line-height: 1.13 !important;
  text-shadow:
    0 0 60px var(--red-glow),
    0 2px 16px rgba(0,0,0,0.70) !important;
}
/* H1 links — must stay red, not inherit blue */
body.ang h1 a,
body.ang h1 a:link,
body.ang h1 a:visited,
body.ang .entry-title a,
body.ang .entry-title a:link,
body.ang .entry-title a:visited,
body.ang .page-title a,
body.ang .post-title a {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  text-shadow: 0 0 44px var(--red-glow) !important;
}
body.ang h1 a:hover,
body.ang .entry-title a:hover {
  color: var(--red-hover) !important;
  -webkit-text-fill-color: var(--red-hover) !important;
}

/* ── H2: BLUE — structural, authoritative ── */
body.ang h2,
body.ang article h2,
body.ang .entry-content h2,
body.ang .post-content h2,
body.ang .hentry h2,
body.ang main h2,
body.ang #primary h2,
body.ang .site-content h2,
body.ang .content-area h2,
body.ang .entry-header h2,
body.ang .wp-block-heading:is(h2) {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  font-family: var(--f-disp) !important;
  font-weight: 600 !important;
  letter-spacing: -0.020em !important;
  line-height: 1.22 !important;
  text-shadow:
    0 0 44px var(--blue-glow),
    0 2px 12px rgba(0,0,0,0.60) !important;
}

/* ── H3: GREEN — fresh, living, agricultural ── */
body.ang h3,
body.ang article h3,
body.ang .entry-content h3,
body.ang .post-content h3,
body.ang .hentry h3,
body.ang main h3,
body.ang #primary h3,
body.ang .site-content h3,
body.ang .content-area h3,
body.ang .wp-block-heading:is(h3) {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  text-shadow:
    0 0 32px var(--green-glow),
    0 1px 8px rgba(0,0,0,0.55) !important;
}

/* ── H4: Bright white ── */
body.ang h4,
body.ang article h4,
body.ang .entry-content h4 {
  color: var(--w95) !important;
  -webkit-text-fill-color: var(--w95) !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* ── H5, H6: Soft white ── */
body.ang h5, body.ang h6,
body.ang article h5, body.ang article h6 {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
}

/* ── Body text ── */
body.ang p,
body.ang .entry-content p,
body.ang article p,
body.ang .post-content p,
body.ang .page-content p {
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
  font-family: var(--f-body) !important;
  font-size: 1.04rem !important;
  font-weight: 400 !important;
  line-height: 1.90 !important;
  letter-spacing: 0.003em !important;
}

/* ── Lists ── */
body.ang li,
body.ang .entry-content li,
body.ang article li {
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
  font-family: var(--f-body) !important;
  line-height: 1.82 !important;
}
body.ang .entry-content ul li::marker { color: var(--green) !important; }
body.ang .entry-content ol li::marker { color: var(--blue)  !important; }

/* ── Table cells ── */
body.ang td,
body.ang th {
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
}

/* ── Spans / divs inherit correctly ── */
body.ang span,
body.ang div,
body.ang label {
  color: inherit !important;
}

/* ── Widget titles ── */
body.ang .widget-title,
body.ang .widgettitle,
body.ang .widget h2,
body.ang .widget h3,
body.ang .sidebar h2,
body.ang .sidebar h3,
body.ang #secondary h2,
body.ang #secondary h3 {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--bdr-grn) !important;
  padding-bottom: var(--sp3) !important;
  margin-bottom: var(--sp4) !important;
}

/* ═══════════════════════════════════════════════
   §5  LINKS
   ═══════════════════════════════════════════════ */
body.ang a,
body.ang a:link,
body.ang a:visited {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  text-decoration: none !important;
  transition: color 0.14s var(--ease-snap), text-shadow 0.14s var(--ease-snap) !important;
}
body.ang a:hover {
  color: var(--blue-hover) !important;
  -webkit-text-fill-color: var(--blue-hover) !important;
  text-shadow: 0 0 18px var(--blue-glow) !important;
}

/* ═══════════════════════════════════════════════
   §6  ARTICLE CARDS — Vision OS spatial float
   Depth via z-system shadows, NOT backdrop-filter.
   No overflow:hidden, no contain, no pointer-events.
   ═══════════════════════════════════════════════ */
body.ang article.post,
body.ang article.page,
body.ang .hentry,
body.ang .type-post,
body.ang .type-page {
  background: var(--mat-panel) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--z3) !important;
  margin-bottom: var(--sp7) !important;
  position: relative !important;
}

/* Top specular — glass light refraction line */
body.ang article.post::after,
body.ang .hentry::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 25%,
    rgba(255,255,255,0.44) 50%,
    rgba(255,255,255,0.28) 75%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}

/* Archive hover — GPU-compositor via transform only */
body.ang .archive .hentry,
body.ang .blog .hentry,
body.ang .home .hentry {
  transition:
    transform   0.30s var(--ease-spring),
    box-shadow  0.30s var(--ease-out),
    border-color 0.20s var(--ease-snap) !important;
  /* GPU layer only during hover, not always */
}
body.ang .archive .hentry:hover,
body.ang .blog .hentry:hover,
body.ang .home .hentry:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--z4) !important;
  border-color: var(--bdr-grn) !important;
  will-change: transform !important;
}

/* Single post — brighter surface */
body.ang.ang-single article.post,
body.ang.ang-single .hentry {
  background: var(--mat-raised) !important;
}

/* ═══════════════════════════════════════════════
   §7  SEARCH & ALL INPUTS
   Three-layer text guarantee:
   1. color
   2. -webkit-text-fill-color
   3. autofill box-shadow trick
   ═══════════════════════════════════════════════ */
body.ang input[type="search"],
body.ang input[type="text"],
body.ang input[type="email"],
body.ang input[type="url"],
body.ang input[type="tel"],
body.ang input[type="number"],
body.ang input[type="password"],
body.ang input[type="date"],
body.ang input[type="time"],
body.ang textarea,
body.ang select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--bdr-mid) !important;
  border-radius: var(--r-pill) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  padding: var(--sp3) var(--sp5) !important;
  outline: none !important;
  caret-color: var(--green) !important;
  box-shadow: var(--z1) !important;
  transition:
    border-color 0.14s var(--ease-snap),
    box-shadow   0.14s var(--ease-snap),
    background   0.14s var(--ease-snap) !important;
}
body.ang textarea {
  border-radius: var(--r-sm) !important;
  line-height: 1.72 !important;
  min-height: 100px !important;
}
body.ang select {
  border-radius: var(--r-sm) !important;
}

body.ang input::placeholder,
body.ang textarea::placeholder {
  color: var(--w50) !important;
  -webkit-text-fill-color: var(--w50) !important;
  opacity: 1 !important;
}

body.ang input:focus,
body.ang textarea:focus,
body.ang select:focus {
  border-color: var(--blue) !important;
  background: rgba(255,255,255,0.11) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.18), var(--z1) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
}

/* Fight browser yellow autofill — COMPLETE FIX */
body.ang input:-webkit-autofill,
body.ang input:-webkit-autofill:hover,
body.ang input:-webkit-autofill:focus,
body.ang input:-webkit-autofill:active,
body.ang textarea:-webkit-autofill,
body.ang select:-webkit-autofill {
  -webkit-box-shadow:
    0 0 0 9999px rgba(4,7,18,0.98) inset,
    var(--z1) !important;
  -webkit-text-fill-color: var(--w100) !important;
  caret-color: var(--green) !important;
  border-color: var(--bdr-mid) !important;
}

/* Submit / search button */
body.ang input[type="submit"],
body.ang button[type="submit"],
body.ang .search-submit {
  background: var(--blue-tint) !important;
  border: 1px solid var(--bdr-blue) !important;
  border-radius: var(--r-pill) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  padding: var(--sp3) var(--sp6) !important;
  cursor: pointer !important;
  box-shadow: var(--z1) !important;
  transition:
    background  0.14s var(--ease-snap),
    box-shadow  0.14s var(--ease-snap),
    transform   0.10s var(--ease-snap) !important;
}
body.ang input[type="submit"]:hover,
body.ang .search-submit:hover {
  background: rgba(10,132,255,0.26) !important;
  box-shadow: 0 4px 20px var(--blue-glow) !important;
  transform: translateY(-1px) !important;
}
body.ang input[type="submit"]:active { transform: translateY(0) !important; }

/* Generic buttons / CTAs */
body.ang button,
body.ang .button,
body.ang a.button,
body.ang .btn,
body.ang .more-link,
body.ang .read-more,
body.ang .wp-block-button__link {
  background: var(--w09) !important;
  border: 1px solid var(--bdr-mid) !important;
  border-radius: var(--r-pill) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
  padding: var(--sp3) var(--sp6) !important;
  cursor: pointer !important;
  display: inline-block !important;
  box-shadow: var(--z1) !important;
  transition: background 0.14s var(--ease-snap), box-shadow 0.14s var(--ease-snap) !important;
}
body.ang .button:hover,
body.ang .more-link:hover {
  background: var(--w14) !important;
  box-shadow: var(--z2) !important;
}

/* ═══════════════════════════════════════════════
   §8  TABLE OF CONTENTS
   ═══════════════════════════════════════════════ */
body.ang #ez-toc-container,
body.ang .ez-toc-container,
body.ang nav.ez-toc-sticky-fixed,
body.ang .ez-toc-sticky,
body.ang #ez-toc-sticky-container,
body.ang .table-of-contents,
body.ang .rank-math-toc,
body.ang .luckywp-toc,
body.ang [class*="toc-container"],
body.ang [id*="toc-container"] {
  background: var(--mat-toc) !important;
  border: 1px solid var(--bdr-blue) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp5) var(--sp6) !important;
  margin: var(--sp7) 0 !important;
  box-shadow: var(--z2), inset 0 0 28px rgba(10,132,255,0.04) !important;
  position: relative !important;
}
/* Ambient inner glow */
body.ang #ez-toc-container::before,
body.ang .table-of-contents::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse 55% 38% at 85% 0%,
    rgba(10,132,255,0.09) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
/* TOC title */
body.ang .ez-toc-title,
body.ang #ez-toc-container p.ez-toc-title,
body.ang .table-of-contents .title,
body.ang .rank-math-toc h5,
body.ang .luckywp-toc .title {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
/* TOC list */
body.ang #ez-toc-container ul,
body.ang .ez-toc-list,
body.ang .toc-list {
  list-style: none !important;
  padding-left: 0 !important;
}
body.ang #ez-toc-container ul li a,
body.ang .ez-toc-list a,
body.ang .toc-list a,
body.ang .luckywp-toc a {
  color: rgba(90,200,255,0.90) !important;
  -webkit-text-fill-color: rgba(90,200,255,0.90) !important;
  font-size: 0.875rem !important;
  line-height: 1.68 !important;
  display: block !important;
  padding: 2px 0 !important;
  transition: color 0.12s var(--ease-snap) !important;
}
body.ang #ez-toc-container ul li a:hover,
body.ang .ez-toc-list a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  text-shadow: 0 0 16px var(--blue-glow) !important;
}
body.ang #ez-toc-container ul ul,
body.ang .ez-toc-list ul {
  padding-left: var(--sp4) !important;
  border-left: 1px solid rgba(10,132,255,0.16) !important;
  margin: var(--sp1) 0 var(--sp1) var(--sp2) !important;
}

/* ═══════════════════════════════════════════════
   §9  BLOCKQUOTES
   ═══════════════════════════════════════════════ */
body.ang blockquote,
body.ang .wp-block-quote {
  background: var(--blue-tint) !important;
  border: none !important;
  border-left: 3px solid var(--blue) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  padding: var(--sp5) var(--sp6) !important;
  margin: var(--sp6) 0 !important;
  box-shadow: var(--z1) !important;
}
body.ang blockquote p {
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
  font-style: italic !important;
  font-family: var(--f-disp) !important;
  font-size: 1.06rem !important;
  line-height: 1.76 !important;
}
body.ang blockquote cite,
body.ang blockquote footer {
  color: var(--w50) !important;
  -webkit-text-fill-color: var(--w50) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
}
body.ang .wp-block-pullquote {
  background: var(--red-tint) !important;
  border-top: 2px solid var(--red) !important;
  border-bottom: 2px solid var(--red) !important;
  border-left: none !important;
  border-radius: var(--r-xs) !important;
  padding: var(--sp7) var(--sp6) !important;
}
body.ang .wp-block-pullquote p {
  color: var(--red-hover) !important;
  -webkit-text-fill-color: var(--red-hover) !important;
  font-family: var(--f-disp) !important;
  font-style: italic !important;
  font-size: 1.20rem !important;
}

/* ═══════════════════════════════════════════════
   §10  CODE
   ═══════════════════════════════════════════════ */
body.ang pre,
body.ang .wp-block-code {
  background: rgba(0,0,0,0.60) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--sp5) var(--sp6) !important;
  overflow-x: auto !important;
  box-shadow: var(--z1) !important;
}
body.ang pre code,
body.ang .wp-block-code code {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.875rem !important;
  line-height: 1.72 !important;
  background: transparent !important;
  border: none !important;
}
body.ang p code,
body.ang li code,
body.ang td code {
  background: rgba(48,209,88,0.09) !important;
  color: var(--green-hover) !important;
  -webkit-text-fill-color: var(--green-hover) !important;
  border: 1px solid rgba(48,209,88,0.16) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: var(--f-mono) !important;
  font-size: 0.875em !important;
}

/* ═══════════════════════════════════════════════
   §11  TABLES
   ═══════════════════════════════════════════════ */
body.ang table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--mat-deep) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--z1) !important;
  margin: var(--sp6) 0 !important;
}
body.ang thead th {
  background: rgba(48,209,88,0.09) !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-weight: 700 !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: var(--sp3) var(--sp4) !important;
  border-bottom: 1px solid var(--bdr-grn) !important;
}
body.ang tbody td {
  padding: var(--sp3) var(--sp4) !important;
  color: var(--w90) !important;
  -webkit-text-fill-color: var(--w90) !important;
  border-bottom: 1px solid var(--bdr) !important;
  font-size: 0.925rem !important;
}
body.ang tbody tr:last-child td { border-bottom: none !important; }
body.ang tbody tr:nth-child(even) { background: var(--w03) !important; }

/* ═══════════════════════════════════════════════
   §12  IMAGES
   ═══════════════════════════════════════════════ */
body.ang .entry-content img,
body.ang article img,
body.ang .wp-post-image {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--bdr) !important;
  box-shadow: var(--z2) !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}
body.ang .post-thumbnail img,
body.ang .featured-image img {
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════
   §13  TAXONOMY PILLS — Categories & Tags
   ═══════════════════════════════════════════════ */
body.ang .cat-links a,
body.ang .post-categories a,
body.ang a[rel="category tag"] {
  background: var(--green-tint) !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  border: 1px solid var(--bdr-grn) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 12px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  display: inline-block !important;
}
body.ang .tags-links a,
body.ang a[rel="tag"],
body.ang .post-tags a {
  background: var(--blue-tint) !important;
  color: var(--blue-hover) !important;
  -webkit-text-fill-color: var(--blue-hover) !important;
  border: 1px solid var(--bdr-blue) !important;
  border-radius: var(--r-xs) !important;
  padding: 2px 9px !important;
  font-size: 0.75rem !important;
  text-shadow: none !important;
  display: inline-block !important;
  margin: 2px !important;
}
/* Entry meta */
body.ang .entry-meta,
body.ang .post-meta {
  font-size: 0.82rem !important;
  font-family: var(--f-body) !important;
}
body.ang .entry-meta *,
body.ang .post-meta * {
  color: var(--w50) !important;
  -webkit-text-fill-color: var(--w50) !important;
}
body.ang .entry-meta a {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .entry-meta a:hover {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* ═══════════════════════════════════════════════
   §14  SIDEBAR & WIDGETS
   ═══════════════════════════════════════════════ */
body.ang #secondary,
body.ang .widget-area,
body.ang .sidebar {
  background: transparent !important;
}
body.ang .widget {
  background: var(--mat-panel) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--z2) !important;
  padding: var(--sp5) !important;
  margin-bottom: var(--sp5) !important;
  position: relative !important;
}
body.ang .widget li {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .widget p {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .widget a {
  color: var(--blue-hover) !important;
  -webkit-text-fill-color: var(--blue-hover) !important;
}
body.ang .widget a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
}

/* ═══════════════════════════════════════════════
   §15  AUTHOR BOX
   ═══════════════════════════════════════════════ */
body.ang .author-box,
body.ang .author-card,
body.ang .about-author,
body.ang .post-author-box,
body.ang [class*="author-bio"] {
  background: var(--mat-tint-g) !important;
  border: 1px solid var(--bdr-grn) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--z2) !important;
  padding: var(--sp6) !important;
  margin-top: var(--sp7) !important;
}
body.ang .author-box h3,
body.ang .author-name {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
body.ang .author-box p {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}

/* ═══════════════════════════════════════════════
   §16  FOOTER
   ═══════════════════════════════════════════════ */
body.ang .site-footer,
body.ang #colophon,
body.ang footer.site-footer {
  background: rgba(2,4,9,0.92) !important;
  border-top: 1px solid var(--bdr) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.28) !important;
}
body.ang .site-footer * {
  color: var(--w50) !important;
  -webkit-text-fill-color: var(--w50) !important;
}
body.ang .site-footer a {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .site-footer a:hover {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}

/* ═══════════════════════════════════════════════
   §17  COMMENTS
   ═══════════════════════════════════════════════ */
body.ang .comments-title,
body.ang #reply-title,
body.ang .comment-reply-title {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue) !important;
  font-family: var(--f-disp) !important;
}
body.ang .comment-body {
  background: var(--w06) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--sp5) !important;
  margin-bottom: var(--sp4) !important;
  box-shadow: var(--z1) !important;
}
body.ang .comment-content p {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .comment-author .fn,
body.ang .comment-author .fn a {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  font-weight: 600 !important;
}
body.ang .comment-metadata,
body.ang .comment-meta { color: var(--w50) !important; font-size: 0.78rem !important; }
body.ang #respond {
  background: var(--w06) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp7) !important;
  margin-top: var(--sp7) !important;
  box-shadow: var(--z1) !important;
}

/* ═══════════════════════════════════════════════
   §18  BREADCRUMBS & PAGINATION
   ═══════════════════════════════════════════════ */
body.ang .yoast-breadcrumb *,
body.ang .breadcrumbs *,
body.ang .breadcrumb * {
  color: var(--w50) !important;
  -webkit-text-fill-color: var(--w50) !important;
  font-size: 0.80rem !important;
}
body.ang .yoast-breadcrumb a {
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
}
body.ang .yoast-breadcrumb a:hover {
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
}
body.ang .page-numbers {
  background: var(--w09) !important;
  color: var(--w75) !important;
  -webkit-text-fill-color: var(--w75) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-xs) !important;
  padding: 6px 14px !important;
  display: inline-block !important;
  margin: 2px !important;
  transition: background 0.14s var(--ease-snap) !important;
}
body.ang .page-numbers.current {
  background: rgba(10,132,255,0.22) !important;
  border-color: var(--bdr-blue) !important;
  color: var(--blue-hover) !important;
  -webkit-text-fill-color: var(--blue-hover) !important;
}
body.ang .page-numbers:hover {
  background: var(--w14) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
}

/* ═══════════════════════════════════════════════
   §19  SCROLLBAR & SELECTION
   ═══════════════════════════════════════════════ */
body.ang ::-webkit-scrollbar { width: 4px; height: 4px; }
body.ang ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
body.ang ::-webkit-scrollbar-thumb {
  background: rgba(48,209,88,0.22);
  border-radius: var(--r-pill);
}
body.ang ::-webkit-scrollbar-thumb:hover { background: rgba(48,209,88,0.48); }
body.ang ::selection {
  background: rgba(10,132,255,0.38);
  color: var(--w100);
  -webkit-text-fill-color: var(--w100);
}

/* ═══════════════════════════════════════════════
   §20  KEYFRAMES
   ═══════════════════════════════════════════════ */
@keyframes ang-rise {
  from { opacity: 0; transform: translateY(24px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)     translateZ(0); }
}
@keyframes ang-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ang-scale {
  from { opacity: 0; transform: scale(0.97) translateZ(0); }
  to   { opacity: 1; transform: scale(1)    translateZ(0); }
}
/* Orb float — pure CSS, zero JS loop */
@keyframes ang-orb-a {
  0%,100% { transform: translate(0px,0px)   scale(1.00) translateZ(0); }
  38%     { transform: translate(28px,-18px) scale(1.04) translateZ(0); }
  75%     { transform: translate(-16px,13px) scale(0.97) translateZ(0); }
}
@keyframes ang-orb-b {
  0%,100% { transform: translate(0px,0px)    scale(1.00) translateZ(0); }
  42%     { transform: translate(-22px,19px) scale(1.03) translateZ(0); }
  78%     { transform: translate(13px,-9px)  scale(0.98) translateZ(0); }
}

/* ═══════════════════════════════════════════════
   §21  ENTRANCE ANIMATIONS — 144Hz smooth
   Only transform + opacity: GPU compositor only.
   ═══════════════════════════════════════════════ */
body.ang article,
body.ang .hentry {
  animation: ang-rise 0.52s cubic-bezier(0.16,1,0.3,1) both !important;
}
body.ang article:nth-child(1) { animation-delay:   0ms !important; }
body.ang article:nth-child(2) { animation-delay:  55ms !important; }
body.ang article:nth-child(3) { animation-delay: 110ms !important; }
body.ang article:nth-child(4) { animation-delay: 165ms !important; }
body.ang article:nth-child(5) { animation-delay: 220ms !important; }
body.ang article:nth-child(6) { animation-delay: 275ms !important; }

body.ang .widget {
  animation: ang-scale 0.40s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* Accessibility: no motion */
@media (prefers-reduced-motion: reduce) {
  body.ang *, body.ang *::before, body.ang *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ═══════════════════════════════════════════════
   §22  RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Reduce nav blur — mobile GPU budget */
  body.ang .site-header,
  body.ang #masthead {
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  }
}

@media (max-width: 768px) {
  body.ang article.post,
  body.ang .hentry {
    border-radius: var(--r-md) !important;
    margin-bottom: var(--sp5) !important;
  }
  body.ang h1,
  body.ang .entry-title {
    font-size: clamp(1.40rem, 5vw, 2.2rem) !important;
    line-height: 1.18 !important;
  }
  body.ang h2,
  body.ang .entry-content h2 {
    font-size: clamp(1.10rem, 4vw, 1.55rem) !important;
  }
  body.ang p,
  body.ang .entry-content p {
    font-size: 0.975rem !important;
    line-height: 1.84 !important;
  }
  body.ang #ez-toc-container,
  body.ang .table-of-contents {
    padding: var(--sp4) var(--sp5) !important;
  }
  /* Mobile nav: lightest blur */
  body.ang .site-header,
  body.ang #masthead {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  }
}

@media (max-width: 480px) {
  body.ang h1,
  body.ang .entry-title { font-size: 1.35rem !important; }
  body.ang h2 { font-size: 1.10rem !important; }
  body.ang h3 { font-size: 1.00rem !important; }
}

/* Retina hairline borders */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.ang article.post,
  body.ang .hentry,
  body.ang .widget {
    border-width: 0.5px !important;
  }
}