/*
 * AN Glass Pro — Agriculture Novel Vision Glass
 * ─────────────────────────────────────────────────────────
 * DESIGN VISION:
 *   Deep space + warm amber light + cool arctic blue.
 *   Like looking through layered glass into a living farm
 *   at golden hour. Confident. Fresh. No jank.
 *
 * PERFORMANCE CONTRACT:
 *   • backdrop-filter: nav bar ONLY
 *   • Mobile nav: solid panel, no blur
 *   • No will-change on static elements
 *   • No overflow:hidden on articles
 *   • Transitions: transform + box-shadow only
 *
 * COLOUR SYSTEM:
 *   Gold    #FFCC00  — H1, hero titles, premium feel
 *   Sky     #34AADC  — H2, structural blue
 *   Frost   #5AC8FA  — H3, links, light interaction
 *   Emerald #32D74B  — categories, growth, agriculture
 *   Coral   #FF6B6B  — accent warmth, hover states
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --gold:      #FFCC00;
  --gold-dim:  rgba(255,204,0,0.14);
  --gold-glow: rgba(255,204,0,0.32);

  --sky:       #34AADC;
  --sky-dim:   rgba(52,170,220,0.13);
  --sky-glow:  rgba(52,170,220,0.35);

  --frost:     #5AC8FA;
  --frost-dim: rgba(90,200,250,0.12);

  --emerald:   #32D74B;
  --em-dim:    rgba(50,215,75,0.12);
  --em-glow:   rgba(50,215,75,0.30);

  --coral:     #FF6B6B;
  --coral-dim: rgba(255,107,107,0.12);

  /* White scale */
  --w100: #ffffff;
  --w92:  rgba(255,255,255,0.92);
  --w80:  rgba(255,255,255,0.80);
  --w65:  rgba(255,255,255,0.65);
  --w42:  rgba(255,255,255,0.42);
  --w22:  rgba(255,255,255,0.22);
  --w12:  rgba(255,255,255,0.12);
  --w08:  rgba(255,255,255,0.08);
  --w05:  rgba(255,255,255,0.05);

  /* Glass materials — dark tinted panels, NO blur needed */
  --glass-card:   rgba(14,20,36,0.76);
  --glass-widget: rgba(12,18,32,0.72);
  --glass-toc:    rgba(10,24,40,0.70);
  --glass-dark:   rgba(6,10,18,0.88);
  --glass-nav:    rgba(4,6,12,0.86);

  /* Spatial shadow layers */
  --shadow-card:
    0 0 0 1px rgba(255,255,255,0.07),
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 8px  rgba(0,0,0,0.35);
  --shadow-hover:
    0 0 0 1px rgba(255,204,0,0.20),
    0 20px 56px rgba(0,0,0,0.65),
    0 4px 12px  rgba(0,0,0,0.40),
    0 0 40px    rgba(255,204,0,0.06);
  --shadow-widget:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 20px rgba(0,0,0,0.42);

  /* Fonts */
  --f-disp: 'Playfair Display', Georgia, serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'SF Mono','JetBrains Mono',ui-monospace,monospace;

  /* Easing */
  --spring: cubic-bezier(0.16,1,0.30,1);
  --snap:   cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ═══════════════════════════════════════════════
   §1  SCENE — Immersive dark canvas
   ═══════════════════════════════════════════════ */
html.ang { scroll-behavior: smooth; }

body.ang {
  background-color: #060a12 !important;
  background-image:
    /* Warm amber bloom — agriculture / golden hour */
    radial-gradient(ellipse 900px 700px at  5% 15%,  rgba(255,180,0,0.09)   0%, transparent 60%),
    /* Cool arctic sky top-right */
    radial-gradient(ellipse 800px 650px at 95% 8%,   rgba(52,170,220,0.11)  0%, transparent 60%),
    /* Emerald life — bottom centre */
    radial-gradient(ellipse 700px 550px at 50% 95%,  rgba(50,215,75,0.08)   0%, transparent 62%),
    /* Deep blue void — anchors the scene */
    radial-gradient(ellipse 1100px 800px at 50% 50%, rgba(5,10,25,0.55)     0%, transparent 100%),
    /* Base gradient — very dark, cool blue-black */
    linear-gradient(162deg, #04060e 0%, #060a14 40%, #050912 70%, #03070a 100%)
    !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  font-family: var(--f-body) !important;
  color: var(--w92) !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

/* ═══════════════════════════════════════════════
   §2  BACKGROUND OBLITERATION
   ═══════════════════════════════════════════════ */
body.ang div,  body.ang section, body.ang article,
body.ang aside,body.ang main,    body.ang header,
body.ang nav,  body.ang li,      body.ang span,
body.ang p,    body.ang ul,      body.ang ol,
body.ang form, body.ang figure,  body.ang blockquote,
body.ang table,body.ang tbody,   body.ang thead,
body.ang tr,   body.ang td,      body.ang th,
body.ang details, body.ang summary, body.ang figcaption {
  background-color: transparent !important;
  background-image:  none !important;
}

/* Theme layout shells */
body.ang .site-content, body.ang #page, body.ang .inside-article,
body.ang .ast-container, body.ang .ast-article-single,
body.ang .generate-columns-container, body.ang .entry,
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 .wp-site-blocks, body.ang .singular-image-wrap {
  background: transparent !important;
}

/* Page builder inline whites */
body.ang [style*="background:#fff"],
body.ang [style*="background: #fff"],
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:white"],
body.ang [style*="background-color: white"],
body.ang [style*="background-color:#fafafa"],
body.ang [style*="background-color:#f9f9f9"],
body.ang [style*="background-color:#f5f5f5"] {
  background-color: var(--glass-card) !important;
  background-image:  none !important;
}
body.ang [style*="color:#000"],  body.ang [style*="color: #000"],
body.ang [style*="color:#333"],  body.ang [style*="color:black"],
body.ang [style*="color: black"],body.ang [style*="color:#222"],
body.ang [style*="color:#444"],  body.ang [style*="color:#111"] {
  color: var(--w92) !important;
  -webkit-text-fill-color: var(--w92) !important;
}

/* ═══════════════════════════════════════════════
   §3  NAVIGATION
   ═══════════════════════════════════════════════ */
body.ang .site-header,
body.ang header.site-header,
body.ang #masthead,
body.ang #header,
body.ang .main-header,
body.ang .ast-primary-header {
  background: var(--glass-nav) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06),
    0 4px 24px rgba(0,0,0,0.40) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

body.ang .site-title, body.ang .site-title a,
body.ang .site-branding a, body.ang .custom-logo-link {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-disp) !important;
  font-style: italic !important;
}

body.ang .main-navigation a, body.ang .nav-menu a,
body.ang #site-navigation a, body.ang nav a {
  color: var(--w65) !important;
  -webkit-text-fill-color: var(--w65) !important;
  font-family: var(--f-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  transition: color 0.14s, background 0.14s !important;
}
body.ang .main-navigation a:hover, body.ang nav a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  background: var(--w08) !important;
}
body.ang .current-menu-item > a, body.ang .current_page_item > a {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  background: var(--gold-dim) !important;
}
body.ang .sub-menu {
  background: rgba(3,5,10,0.97) !important;
  border: 1px solid var(--w12) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65) !important;
  padding: 6px !important;
}
body.ang .sub-menu a {
  display: block !important;
  border-radius: 6px !important;
  color: var(--w65) !important;
  -webkit-text-fill-color: var(--w65) !important;
}
body.ang .sub-menu a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  background: var(--w08) !important;
}

/* ═══════════════════════════════════════════════
   §4  HOMEPAGE — HIDE META DESCRIPTIONS
   The user requested: meta description/excerpt
   not visible on landing page / archive
   ═══════════════════════════════════════════════ */
body.ang.ang-home .entry-summary,
body.ang.ang-home .entry-summary p,
body.ang.ang-home .post-excerpt,
body.ang.ang-home .excerpt,
body.ang.ang-home p.excerpt,
body.ang.ang-home .blog-entry-text p,
body.ang.ang-home .entry-content > p:first-of-type,
body.ang.ang-home article .entry-content p,
body.ang.ang-home .post-content-excerpt,
body.ang.ang-home .ast-blog-post-element[data-element="read-more"] {
  display: none !important;
}

/* Keep title and thumbnail, hide excerpts cleanly */
body.ang.ang-home .hentry .entry-content {
  padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════
   §5  TYPOGRAPHY — Gold / Sky / Frost hierarchy
   Every rule: color + -webkit-text-fill-color
   ═══════════════════════════════════════════════ */

/* ── H1: GOLD — premium, editorial power ── */
body.ang h1,
body.ang .entry-title,
body.ang .page-title,
body.ang .wp-block-post-title,
body.ang article h1,
body.ang main h1,
body.ang #primary h1,
body.ang .site-content h1,
body.ang .entry-header h1 {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -0.022em !important;
  line-height: 1.13 !important;
  text-shadow:
    0 0 48px var(--gold-glow),
    0 2px 14px rgba(0,0,0,0.65) !important;
}

/* H1 links — stay gold */
body.ang h1 a, body.ang .entry-title a,
body.ang .entry-title a:visited, body.ang .entry-title a:link {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  text-shadow: 0 0 36px var(--gold-glow) !important;
}
body.ang h1 a:hover, body.ang .entry-title a:hover {
  color: #FFD84D !important;
  -webkit-text-fill-color: #FFD84D !important;
}

/* ── H2: SKY BLUE — structural authority ── */
body.ang h2,
body.ang article h2,
body.ang .entry-content h2,
body.ang main h2,
body.ang #primary h2,
body.ang .site-content h2 {
  color: var(--sky) !important;
  -webkit-text-fill-color: var(--sky) !important;
  font-family: var(--f-disp) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  letter-spacing: -0.016em !important;
  line-height: 1.22 !important;
  text-shadow:
    0 0 40px var(--sky-glow),
    0 2px 10px rgba(0,0,0,0.55) !important;
}

/* ── H3: FROST — clean subheadings ── */
body.ang h3,
body.ang article h3,
body.ang .entry-content h3,
body.ang main h3,
body.ang .site-content h3 {
  color: var(--frost) !important;
  -webkit-text-fill-color: var(--frost) !important;
  font-family: var(--f-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-shadow:
    0 0 28px rgba(90,200,250,0.28),
    0 1px 8px rgba(0,0,0,0.50) !important;
}

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

/* ── H5, H6 ── */
body.ang h5, body.ang h6 {
  color: var(--w65) !important;
  -webkit-text-fill-color: var(--w65) !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 {
  color: var(--w92) !important;
  -webkit-text-fill-color: var(--w92) !important;
  font-family: var(--f-body) !important;
  font-size: 1.04rem !important;
  font-weight: 400 !important;
  line-height: 1.88 !important;
  letter-spacing: 0.003em !important;
}

/* ── Lists ── */
body.ang li, body.ang .entry-content li {
  color: var(--w92) !important;
  -webkit-text-fill-color: var(--w92) !important;
  line-height: 1.82 !important;
}
body.ang .entry-content ul li::marker { color: var(--emerald) !important; }
body.ang .entry-content ol li::marker { color: var(--gold) !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 {
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !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 rgba(50,215,75,0.20) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ── Links ── */
body.ang a, body.ang a:visited, body.ang a:link {
  color: var(--frost) !important;
  -webkit-text-fill-color: var(--frost) !important;
  text-decoration: none !important;
  transition: color 0.14s var(--snap), text-shadow 0.14s var(--snap) !important;
}
body.ang a:hover {
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  text-shadow: 0 0 18px var(--sky-glow) !important;
}

/* ═══════════════════════════════════════════════
   §6  ARTICLE CARDS
   Glass panels: dark tint + specular edge + depth shadow
   ZERO backdrop-filter — smooth scroll guaranteed
   ═══════════════════════════════════════════════ */
body.ang article.post,
body.ang article.page,
body.ang .hentry,
body.ang .type-post {
  background: var(--glass-card) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  /* Specular top edge — glass catching light */
  border-top: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 28px !important;
  position: relative !important;
  overflow: visible !important; /* NEVER overflow:hidden on articles */
}

/* Warm ambient glow line at base — depth */
body.ang article.post::after,
body.ang .hentry::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 20% !important; right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,204,0,0.18), transparent) !important;
  pointer-events: none !important;
}

/* Archive / blog card hover — transform only, no repaint */
body.ang .archive .hentry,
body.ang .blog   .hentry,
body.ang .home   .hentry {
  transition:
    transform    0.32s var(--spring),
    box-shadow   0.32s cubic-bezier(0.22,1,0.36,1),
    border-color 0.22s var(--snap) !important;
}
body.ang .archive .hentry:hover,
body.ang .blog   .hentry:hover,
body.ang .home   .hentry:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-top-color: rgba(255,204,0,0.35) !important;
  border-color: rgba(255,204,0,0.16) !important;
}

/* Single post — slightly warmer surface */
body.ang.ang-single article.post,
body.ang.ang-single .hentry {
  background: rgba(16,22,40,0.80) !important;
}

/* Featured image */
body.ang .post-thumbnail,
body.ang .featured-image {
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
body.ang .post-thumbnail img,
body.ang .featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════
   §7  HOMEPAGE CARD SPECIAL TREATMENT
   Big, confident, editorial feel on landing
   ═══════════════════════════════════════════════ */
body.ang.ang-home .entry-title {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  margin-bottom: 8px !important;
}

/* Clean card grid — title + thumbnail + meta only */
body.ang.ang-home .hentry {
  display: flex !important;
  flex-direction: column !important;
}
body.ang.ang-home .entry-header {
  padding: 20px 22px 14px !important;
  order: 2 !important;
}
body.ang.ang-home .post-thumbnail { order: 1 !important; }
body.ang.ang-home .entry-content  { order: 3 !important; }
body.ang.ang-home .entry-footer   { order: 4 !important; padding: 0 22px 20px !important; }

/* ═══════════════════════════════════════════════
   §8  SEARCH & INPUTS — 3-layer white text fix
   ═══════════════════════════════════════════════ */
body.ang input[type="search"],
body.ang input[type="text"],
body.ang input[type="email"],
body.ang input[type="url"],
body.ang input[type="password"],
body.ang input[type="number"],
body.ang textarea,
body.ang select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 100px !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  font-family: var(--f-body) !important;
  font-size: 0.95rem !important;
  padding: 10px 18px !important;
  outline: none !important;
  caret-color: var(--gold) !important;
  transition: border-color 0.14s var(--snap), box-shadow 0.14s var(--snap) !important;
}
body.ang textarea { border-radius: 12px !important; }
body.ang input::placeholder, body.ang textarea::placeholder {
  color: rgba(255,255,255,0.38) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.38) !important;
  opacity: 1 !important;
}
body.ang input:focus, body.ang textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(255,204,0,0.14) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
}
/* Complete autofill fix */
body.ang input:-webkit-autofill,
body.ang input:-webkit-autofill:focus,
body.ang input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 9999px #060a12 inset !important;
  -webkit-text-fill-color: var(--w100) !important;
  caret-color: var(--gold) !important;
}

body.ang input[type="submit"],
body.ang .search-submit,
body.ang button[type="submit"] {
  background: var(--gold-dim) !important;
  border: 1px solid rgba(255,204,0,0.28) !important;
  border-radius: 100px !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition: background 0.14s, box-shadow 0.14s !important;
}
body.ang input[type="submit"]:hover, body.ang .search-submit:hover {
  background: rgba(255,204,0,0.22) !important;
  box-shadow: 0 4px 20px var(--gold-glow) !important;
}

body.ang .button, body.ang a.button,
body.ang .more-link, body.ang .read-more,
body.ang .wp-block-button__link {
  background: var(--w08) !important;
  border: 1px solid var(--w22) !important;
  border-radius: 100px !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
  padding: 9px 22px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  transition: background 0.14s !important;
}
body.ang .more-link:hover { background: var(--w12) !important; }

/* ═══════════════════════════════════════════════
   §9  TABLE OF CONTENTS — Blue glass panel
   ═══════════════════════════════════════════════ */
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"] {
  background: var(--glass-toc) !important;
  border: 1px solid rgba(52,170,220,0.20) !important;
  border-top: 1px solid rgba(52,170,220,0.35) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  margin: 24px 0 !important;
  box-shadow:
    0 0 0 1px rgba(52,170,220,0.06),
    0 6px 24px rgba(0,0,0,0.40) !important;
}
body.ang .ez-toc-title,
body.ang #ez-toc-container p.ez-toc-title,
body.ang .table-of-contents .title {
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
body.ang #ez-toc-container ul { 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 {
  color: rgba(90,200,250,0.88) !important;
  -webkit-text-fill-color: rgba(90,200,250,0.88) !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  display: block !important;
  padding: 2px 0 !important;
  transition: color 0.12s !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;
}
body.ang #ez-toc-container ul ul {
  padding-left: 14px !important;
  border-left: 1px solid rgba(52,170,220,0.14) !important;
  margin: 2px 0 2px 8px !important;
}

/* ═══════════════════════════════════════════════
   §10  CONTENT ELEMENTS
   ═══════════════════════════════════════════════ */

/* Blockquotes */
body.ang blockquote, body.ang .wp-block-quote {
  background: var(--sky-dim) !important;
  border-left: 3px solid var(--sky) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
}
body.ang blockquote p {
  font-style: italic !important;
  font-family: var(--f-disp) !important;
  color: var(--w92) !important;
  -webkit-text-fill-color: var(--w92) !important;
}
body.ang .wp-block-pullquote {
  background: var(--gold-dim) !important;
  border-top: 2px solid var(--gold) !important;
  border-bottom: 2px solid var(--gold) !important;
  border-left: none !important;
  padding: 24px 20px !important;
  border-radius: 4px !important;
}
body.ang .wp-block-pullquote p {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  font-family: var(--f-disp) !important;
  font-style: italic !important;
}

/* Code */
body.ang pre, body.ang .wp-block-code {
  background: rgba(0,0,0,0.58) !important;
  border: 1px solid var(--w08) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  overflow-x: auto !important;
}
body.ang pre code, body.ang .wp-block-code code {
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !important;
  font-family: var(--f-mono) !important;
  font-size: 0.875rem !important;
  line-height: 1.72 !important;
}
body.ang p code, body.ang li code {
  background: rgba(50,215,75,0.09) !important;
  color: #80E89A !important;
  -webkit-text-fill-color: #80E89A !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}

/* Tables */
body.ang table {
  width: 100% !important;
  background: var(--glass-dark) !important;
  border: 1px solid var(--w08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 20px 0 !important;
}
body.ang thead th {
  background: rgba(50,215,75,0.09) !important;
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(50,215,75,0.16) !important;
}
body.ang tbody td {
  padding: 10px 14px !important;
  color: var(--w92) !important;
  -webkit-text-fill-color: var(--w92) !important;
  border-bottom: 1px solid var(--w05) !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(--w05) !important; }

/* Images */
body.ang .entry-content img, body.ang article img, body.ang .wp-post-image {
  border-radius: 10px !important;
  border: 1px solid var(--w08) !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════
   §11  TAXONOMY — Colourful pill system
   ═══════════════════════════════════════════════ */
body.ang .cat-links a, body.ang a[rel="category tag"] {
  background: var(--em-dim) !important;
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !important;
  border: 1px solid rgba(50,215,75,0.22) !important;
  border-radius: 100px !important;
  padding: 2px 11px !important;
  font-size: 0.70rem !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"] {
  background: var(--frost-dim) !important;
  color: var(--frost) !important;
  -webkit-text-fill-color: var(--frost) !important;
  border: 1px solid rgba(90,200,250,0.22) !important;
  border-radius: 6px !important;
  padding: 2px 9px !important;
  font-size: 0.75rem !important;
  display: inline-block !important;
  margin: 2px !important;
}
body.ang .entry-meta * { color: var(--w42) !important; font-size: 0.82rem !important; }
body.ang .entry-meta a { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .entry-meta a:hover { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }

/* ═══════════════════════════════════════════════
   §12  SIDEBAR, FOOTER, AUTHOR, COMMENTS
   ═══════════════════════════════════════════════ */
body.ang #secondary, body.ang .widget-area { background: transparent !important; }

body.ang .widget {
  background: var(--glass-widget) !important;
  border: 1px solid var(--w08) !important;
  border-top: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-widget) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
}
body.ang .widget li { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .widget p  { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .widget a  { color: var(--frost) !important; -webkit-text-fill-color: var(--frost) !important; }
body.ang .widget a:hover { color: var(--w100) !important; -webkit-text-fill-color: var(--w100) !important; }

body.ang .author-box, body.ang .about-author, body.ang .post-author-box {
  background: rgba(50,215,75,0.05) !important;
  border: 1px solid rgba(50,215,75,0.18) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  margin-top: 28px !important;
}
body.ang .author-box h3, body.ang .author-name {
  color: var(--emerald) !important;
  -webkit-text-fill-color: var(--emerald) !important;
}
body.ang .author-box p { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }

body.ang .site-footer, body.ang #colophon {
  background: rgba(2,4,8,0.94) !important;
  border-top: 1px solid var(--w08) !important;
}
body.ang .site-footer *  { color: var(--w42) !important; -webkit-text-fill-color: var(--w42) !important; }
body.ang .site-footer a  { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .site-footer a:hover { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }

body.ang .comments-title { color: var(--sky) !important; -webkit-text-fill-color: var(--sky) !important; font-family: var(--f-disp) !important; }
body.ang .comment-body {
  background: var(--w05) !important;
  border: 1px solid var(--w08) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
}
body.ang .comment-content p { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .comment-author .fn { color: var(--emerald) !important; -webkit-text-fill-color: var(--emerald) !important; font-weight: 600 !important; }
body.ang .comment-metadata { color: var(--w42) !important; font-size: 0.78rem !important; }
body.ang #respond {
  background: var(--w05) !important;
  border: 1px solid var(--w08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}
body.ang .comment-reply-title { color: var(--sky) !important; -webkit-text-fill-color: var(--sky) !important; font-family: var(--f-disp) !important; }

body.ang .yoast-breadcrumb *, body.ang .breadcrumbs * {
  color: var(--w42) !important;
  -webkit-text-fill-color: var(--w42) !important;
  font-size: 0.80rem !important;
}
body.ang .yoast-breadcrumb a { color: var(--w65) !important; -webkit-text-fill-color: var(--w65) !important; }
body.ang .yoast-breadcrumb a:hover { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }

body.ang .page-numbers {
  background: var(--w08) !important;
  color: var(--w65) !important;
  -webkit-text-fill-color: var(--w65) !important;
  border: 1px solid var(--w12) !important;
  border-radius: 8px !important;
  padding: 6px 13px !important;
  display: inline-block !important;
  margin: 2px !important;
  transition: background 0.14s !important;
}
body.ang .page-numbers.current {
  background: var(--gold-dim) !important;
  border-color: rgba(255,204,0,0.25) !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}
body.ang .page-numbers:hover {
  background: var(--w12) !important;
  color: var(--w100) !important;
  -webkit-text-fill-color: var(--w100) !important;
}

/* ═══════════════════════════════════════════════
   §13  UI POLISH
   ═══════════════════════════════════════════════ */
body.ang ::selection { background: rgba(255,204,0,0.28); color: #fff; }
body.ang ::-webkit-scrollbar { width: 4px; }
body.ang ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
body.ang ::-webkit-scrollbar-thumb { background: rgba(255,204,0,0.22); border-radius: 100px; }
body.ang ::-webkit-scrollbar-thumb:hover { background: rgba(255,204,0,0.48); }

/* ═══════════════════════════════════════════════
   §14  ENTRANCE ANIMATIONS
   Only transform + opacity → compositor thread
   ═══════════════════════════════════════════════ */
@keyframes ang-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ang-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Slow ambient orbs — pure CSS, zero JS loop */
@keyframes ang-orb-a {
  0%,100%{ transform:translate(0,0) scale(1);   }
  40%    { transform:translate(24px,-16px) scale(1.04); }
  75%    { transform:translate(-14px,12px) scale(0.97); }
}
@keyframes ang-orb-b {
  0%,100%{ transform:translate(0,0) scale(1);   }
  45%    { transform:translate(-20px,18px) scale(1.03); }
  80%    { transform:translate(12px,-10px) scale(0.98); }
}

body.ang article, body.ang .hentry {
  animation: ang-up 0.52s cubic-bezier(.16,1,.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 .widget { animation: ang-fade 0.40s ease both !important; }

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

/* ═══════════════════════════════════════════════
   §15  RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.ang .site-header, body.ang #masthead {
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
}
@media (max-width: 768px) {
  /* No backdrop-filter on mobile — solid panel instead */
  body.ang .site-header, body.ang #masthead {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(4,6,12,0.97) !important;
  }
  body.ang article.post, body.ang .hentry {
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }
  body.ang h1, body.ang .entry-title {
    font-size: clamp(1.35rem, 5vw, 1.9rem) !important;
    line-height: 1.18 !important;
  }
  body.ang h2, body.ang .entry-content h2 {
    font-size: clamp(1.08rem, 4vw, 1.45rem) !important;
  }
  body.ang p, body.ang .entry-content p {
    font-size: 0.975rem !important;
    line-height: 1.84 !important;
  }
  body.ang.ang-home .entry-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
  }
}
@media (max-width: 480px) {
  body.ang h1, body.ang .entry-title { font-size: 1.32rem !important; }
  body.ang h2 { font-size: 1.08rem !important; }
}
@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;
  }
}