/* ==========================================================================
   neu-style.css — CJK Design 2025 (Typography-First Baseline • LIVE)
   WP 6.8.2 • Divi 4.27.4 • Child Theme: /wp-content/themes/cjk
   Author: Ceven J. Knowles — prepared by Io on 2025-08-28 (Decimal Index Edition)

   Scope & Intent (LIVE):
   - Decimal index for ALL sections + sub-sections (e.g., 4.3.2).
   - Typography-first; tokens drive rhythm; layout clamps; strict a11y.
   - Reserved top-level sections for future work (buttons/forms/components/etc.).
   - Divi-aware scoping; minimal !important; performance-conscious.
   ==========================================================================

   Top-Level Index
   1.0 Tokens & Scales
   2.0 Fonts & Performance
   3.0 Accessibility
   4.0 Global Typography
   5.0 Layout Foundations (sections/rows/modules)
   6.0 Background
   7.0 Buttons (reserved)
   8.0 Forms (reserved)
   9.0 Components (reserved)
   10.0 Utilities (helpers)
   11.0 Headers (reserved)
   12.0 Footers (reserved)
   13.0 Divi Integrations / Overrides (reserved)
   14.0 Surface System — Study Only (commented)
   15.0 Animations (reserved)
   16.0 Grid Systems (reserved)
   17.0 Theme/Plugin Integrations (reserved)
   ========================================================================== */

/* ==========================================================================
   1.0 Tokens & Scales
   ========================================================================== */
/* 1.1–1.6 Tokens (colors, backgrounds, gradients, type, spacing, motion) */
:root {
  /* 1.1 Color Tokens */
  --h1: #ff6700; /* Accent: headings/links */
  --h2: #ffea00; /* Focus ring / high-visibility */
  --h3: #000140; /* Background / surface base (LIVE) */
  --h4: #efefef; /* Body text */
  --h5: #5f5f5f; /* Secondary text */
  --h6: #00001e; /* Deep accent */
  --h7: #000275; /* Shadow light */
  --h8: #00029e; /* Shadow dark */
  --h9: #000000; /* Absolute black */
  --h10: #ffffff; /* Absolute white */
  --h11: #cccccc; /* Quaternary text/lines */
  --h12: #021438; /* Old site background promoted */
  --h13: #080f1d; /* v.3.0 Neumorphism with neon glow - background */
  --h14: #14bece; /* Accent cyan (blue glow base) */
  --h15: #68bac9; /* v.3.0 Neumorphism box shadow 1 */
  --h16: #333c4d; /* Sunken background outside shadow

  /* 1.2 Background Tokens */
  --bg-main: var(--h13);
  --bg-alt: var(--h12);

  /* 1.3 Gradient Tokens */
  --g1: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.06));
  --g2: linear-gradient(112deg, #02070f 0%, #021438 55%, #021438 100%);
  --bg-gradient: radial-gradient(
    ellipse 30% 70% at center,
    var(--h10) 0%,
    var(--h10) 50%,
    var(--h9) 100%
  );

  /* Extended recipes */
  --g3: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(0, 0, 0, 0.12)
  ); /* subtle vertical wash */

  --g4: linear-gradient(
    135deg,
    color-mix(in srgb, var(--h1) 80%, transparent),
    color-mix(in srgb, var(--h4) 80%, transparent)
  ); /* neon diagonal glow (orange→light) */

  --g5: linear-gradient(
    112deg,
    color-mix(in srgb, var(--h3) 80%, black 20%) 0%,
    var(--h12) 50%,
    var(--h3) 100%
  ); /* deep aurora sweep (blue family) */

  --g6: radial-gradient(
    circle at 30% 40%,
    rgba(255, 234, 0, 0.15),
    transparent 60%
  ); /* soft spotlight */

  --g7: repeating-linear-gradient(
    60deg,
    rgba(255, 103, 0, 0.1) 0 20px,
    /* hue1 band */ rgba(20, 190, 206, 0.1) 20px 40px /* hue4 band */
  ); /* double neon bands */

  --g8: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    /* light in upper left */ rgba(0, 0, 0, 0.18) 100% /* darker bottom right */
  ); /* depth wash */

  /* 1.4 Typography Scale */
  --ff-base: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  --fs-body: clamp(0.95rem, 0.25vw + 0.85rem, 1.05rem);
  --lh-body: 1.55;
  --fw-h1: 760;
  --fw-h2: 680;
  --fw-h3: 620;
  --fw-h4: 580;
  --fw-h5: 540;
  --fw-h6: 500;

  /* 1.5 Measure & Spacing Scale */
  --measure: 70ch;
  --space-xs: clamp(0.25rem, 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.5vw, 0.9rem);
  --space-md: clamp(1rem, 0.8vw, 1.5rem);
  --space-lg: clamp(2rem, 1.6vw, 3rem);

  /* 1.6 Motion Tokens */
  --motion-ms: 160ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   2.0 Fonts & Performance
   ========================================================================== */
/* 2.1 @font-face — Lexend Latin */
@font-face {
  font-family: "Lexend";
  src: url("/wp-content/themes/cjk/fonts/lexend-latin-wght-normal.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* 2.2 @font-face — Lexend Latin-Extended */
@font-face {
  font-family: "Lexend";
  src: url("/wp-content/themes/cjk/fonts/lexend-latin-ext-wght-normal.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0259;
}
/* 2.3 Font Synthesis Policy */
html {
  font-synthesis: none;
}
/* 2.4 (Note) Preload for performance is handled in PHP via wp_head() */

/* ==========================================================================
   3.0 Accessibility
   ========================================================================== */
/* 3.1 Focus Styles */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus {
  outline: none;
}
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 2px solid var(--h2);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: none;
}
/* 3.2 Disabled States */
:where(button, [role="button"], .et_pb_button)[disabled],
:where(a).is-disabled,
:where(input, select, textarea)[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}
/* 3.3 Visibility Semantics */
[hidden] {
  display: none !important;
}
/* 3.4 Motion Hygiene */
.anim-none {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.anim-safe {
  animation-duration: 120ms !important;
  transition-duration: 120ms !important;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .et_parallax_bg,
  .et_pb_parallax_css,
  .et_pb_section_parallax,
  .et_pb_slider,
  .et_pb_fullwidth_slider,
  .et_pb_gallery,
  .et_pb_promo,
  .et_pb_number_counter,
  .et_pb_circle_counter,
  .et_pb_bars,
  .et_pb_section_video_bg,
  .et_pb_row_video_bg {
    transform: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   4.0 Global Typography
   ========================================================================== */
/* 4.1 Body Baseline */
body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--h4);
  text-rendering: optimizeLegibility;
}
/* 4.2 Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-md);
  color: var(--h1);
}
h1 {
  font-weight: var(--fw-h1);
}
h2 {
  font-weight: var(--fw-h2);
}
h3 {
  font-weight: var(--fw-h3);
}
h4 {
  font-weight: var(--fw-h4);
}
h5 {
  font-weight: var(--fw-h5);
}
h6 {
  font-weight: var(--fw-h6);
}
/* 4.3 Links */
a {
  color: var(--h1);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
  transition: color var(--motion-ms), text-decoration-thickness var(--motion-ms),
    text-underline-offset var(--motion-ms);
}
/* 4.3.1 Hover */
a:hover {
  color: var(--h1);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
  font-weight: 600;
}
/* 4.3.2 Focus-visible */
a:focus-visible {
  outline: 2px solid var(--h2);
  outline-offset: 3px;
}
/* 4.3.3 Current/Active */
a:active,
a[aria-current="page"],
a.is-current {
  color: var(--h4);
  font-weight: 600;
}
/* 4.3.4 Disabled */
a[disabled],
a.is-disabled,
a[aria-disabled="true"] {
  color: var(--h5);
  font-weight: 400;
  pointer-events: none;
}
/* 4.4 Lists */
ul,
ol {
  padding-left: 1.25em;
  margin: 0 0 var(--space-md);
}
li {
  margin: 0 0 0.35em;
}
/* 4.5 Code & KBD */
code,
kbd,
pre {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
/* 4.6 Blockquotes */
blockquote {
  margin: 0 0 var(--space-lg);
  padding-left: 1em;
  border-left: 3px solid var(--h2);
  color: var(--h11);
  max-width: var(--measure);
}
/* 4.7 Small */
small {
  font-size: 0.875em;
}
/* 4.9 Visual Builder Font Parity */
html,
body,
.et-fb #et-boc .et-l .et_pb_module {
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   5.0 Layout Foundations (sections/rows/modules)
   ========================================================================== */

/* 5.2 Spacing Tokens (clamps for sections, rows, modules)
   Baseline defaults (good judging baseline):
   - Sections: roomy enough to breathe
   - Rows: leaner than sections
   - Modules: modest rhythm between blocks
*/
:root {
  /* Sections (baseline = --sec-py) */
  --sec-py-compact: clamp(1.25rem, 2.5vw + 0.25rem, 3rem);
  --sec-py: clamp(2rem, 4vw + 0.5rem, 5rem); /* BASELINE */
  --sec-py-roomy: clamp(2.75rem, 5vw + 0.75rem, 6.5rem);
  --sec-py-hero: clamp(3.5rem, 6.5vw + 1rem, 9rem);
  --sec-px: clamp(1rem, 2vw + 0.5rem, 3rem);

  /* Rows (baseline = --row-py) */
  --row-py-compact: clamp(0.75rem, 1.5vw + 0.25rem, 1.75rem);
  --row-py: clamp(1rem, 2vw + 0.25rem, 2.25rem); /* BASELINE */
  --row-py-roomy: clamp(1.5rem, 3vw + 0.5rem, 3rem);
  --row-px: clamp(0.5rem, 1.25vw + 0.25rem, 1.5rem);

  /* Modules (baseline = --mod-gap) */
  --mod-gap-tight: clamp(0.5rem, 0.8vw, 1rem);
  --mod-gap: clamp(0.75rem, 1vw, 1.5rem); /* BASELINE */
  --mod-gap-roomy: clamp(1rem, 1.6vw, 2rem);
}

/* 5.3 Section Defaults (BASELINE) */
body #page-container .et_pb_section {
  padding-block: var(--sec-py);
  padding-inline: var(--sec-px);
}

/* 5.4 Section Variants (opt-in via Section → Advanced → CSS Class) */
body #page-container .et_pb_section.cjk-compact {
  padding-block: var(--sec-py-compact);
}
body #page-container .et_pb_section.cjk-roomy {
  padding-block: var(--sec-py-roomy);
}
body #page-container .et_pb_section.cjk-hero {
  padding-block: var(--sec-py-hero);
}

/* 5.5 Row Defaults (BASELINE; inside standard sections) */
body #page-container .et_pb_section > .et_pb_row {
  padding-block: var(--row-py);
  padding-inline: var(--row-px);
  background: transparent;
}

/* 5.6 Row Variants (opt-in via Row → Advanced → CSS Class) */
body #page-container .et_pb_section > .et_pb_row.cjk-row-tight {
  padding-block: var(--row-py-compact);
}
body #page-container .et_pb_section > .et_pb_row.cjk-row-roomy {
  padding-block: var(--row-py-roomy);
}

/* 5.7 Row Container Widths (scoped: exclude fullwidth/specialty/header/footer) */
body
  #page-container
  .et_pb_section:not(.et_pb_fullwidth_section)
  > .et_pb_row:not(.et_pb_row_fullwidth) {
  width: 80%;
  max-width: 80%;
  margin-inline: auto;
}
@media (max-width: 980px) {
  body
    #page-container
    .et_pb_section:not(.et_pb_fullwidth_section)
    > .et_pb_row:not(.et_pb_row_fullwidth) {
    width: 90%;
    max-width: 90%;
  }
}
@media (max-width: 767px) {
  body
    #page-container
    .et_pb_section:not(.et_pb_fullwidth_section)
    > .et_pb_row:not(.et_pb_row_fullwidth) {
    width: 95%;
    max-width: 95%;
  }
}

/* 5.8 Module Rhythm (BASELINE)
   Creates consistent vertical spacing between sibling modules.
   Notes:
   - Divi modules often ship with margins; this normalizes rhythm gently.
   - Adjust only --mod-gap tokens to retune site-wide feel.
*/
body
  #page-container
  .et_pb_section
  > .et_pb_row
  > .et_pb_column
  > .et_pb_module
  + .et_pb_module {
  margin-top: var(--mod-gap);
}

/* Module rhythm variants (opt-in via Module → Advanced → CSS Class) */
body #page-container .et_pb_module.cjk-tight + .et_pb_module {
  margin-top: var(--mod-gap-tight);
}
body #page-container .et_pb_module.cjk-roomy + .et_pb_module {
  margin-top: var(--mod-gap-roomy);
}

/* 5.9 Notes:
   - Baseline = (--sec-py, --row-py, --mod-gap). Use these to judge all pages.
   - Variants let you tighten/loosen without touching tokens.
   - Keep section padding larger than row padding; rows larger than module gaps.
*/

/* ==========================================================================
   6.0 Background
   ========================================================================== */

/* 6.1 Page Background — dark base + WebP (viewport-fit) */
html,
body {
  min-height: 100%;
  margin: 0;

  /* Solid base from token (fallback if image fails) */
  background-color: var(--h13);

  /* WebP background */
  /* background-image: url("https://cevenknowles.com/wp-content/uploads/2025/08/cjk-background-1-scaled.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100vw 100vh; /* force match viewport */
  /* background-attachment: scroll; */
}

/* 6.2 Overlay — soft additive blue */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: radial-gradient(
    ellipse 65% 85% at 50% 55%,
    rgba(21, 39, 113, 0.2) 0%,
    rgba(20, 57, 206, 0.1) 40%,
    transparent 80%
  );

  mix-blend-mode: screen; /* additive; try plus-lighter if supported */
  opacity: 0.8;
}

/* Ensure site content stays above overlay */
#page-container,
main {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   7.0 Buttons - Site Default
   ========================================================================== */
/* 7.1 Base (future) */
/* 7.2 Variants (future) */
/* 7.3 Sizes (future) */
/* 7.9 Divi adapter (future) */

/* ==========================================================================
   7.1 Buttons — Default + States (strict 1px border, subtle states)
   ========================================================================== */

/* 7.1.1 Default */
.et_pb_button {
  position: relative;
  border-radius: var(--surface-radius);
  background: var(--h13);
  border: 1px solid var(--h1); /* always 1px across states */
  /* No outside glow in default */
  box-shadow: -1px -1px 3px var(--h1), 1px 1px 3px var(--h1);
  transition: color var(--motion-ms) var(--motion-ease),
    background-color var(--motion-ms) var(--motion-ease),
    border-color var(--motion-ms) var(--motion-ease),
    box-shadow var(--motion-ms) var(--motion-ease);
}

/* Remove previous pseudo-glows entirely (per spec #2) */
.et_pb_button::before,
.et_pb_button::after {
  content: none !important;
}

/* 7.1.2 Hover + Focus-visible
   - Text + border stay as-is unless you want Hue4.
   - Subtle soft edge glow only (1–3px, ~29% opacity), not a big halo. */
.et_pb_button:hover,
.et_pb_button:focus-visible {
  /* Keep your current text/border unless you want Hue4; if yes, uncomment:
  color: var(--h4);
  border-color: var(--h4);
  */
  /* Subtle 0–3px edge glow; last shadow adds the soft bloom */
  box-shadow: -1px -1px 12px var(--h1), 1px 1px 12px var(--h1),
    0 0 3px rgba(239, 239, 239, 0.29); /* Hue4 @ 29% */
  color: var(--h4);
}

/* 7.1.3 Active (Click/Press)
   Spec:
   - background: Hue6
   - Shadow 1: Hue16, x:0, y:1, blur:1, spread:2, opacity:1
   - Shadow 2: Hue4,  x:0, y:0, blur:3, spread:1, opacity:1
   - Shadow 3: INSET Hue4, x:2, y:2, blur:4, spread:0, opacity:0.5
   - Shadow 4: INSET Hue4, x:-1, y:-1, blur:1, spread:0, opacity:0.5
*/
.et_pb_button:active {
  background: var(--h6);
  border-width: 1px; /* enforce 1px */
  box-shadow: 0 1px 1px 2px var(--h16), /* Shadow 1 */ 0 0 3px 1px var(--h4),
    /* Shadow 2 */ inset 2px 2px 4px 0 rgba(239, 239, 239, 0.5),
    /* Shadow 3 (inset Hue4 50%) */ inset -1px -1px 1px 0
      rgba(239, 239, 239, 0.5); /* Shadow 4 (inset Hue4 50%) */
}

/* 7.1.4 Disabled
   - Text & border: Hue1 @ 0.5
   - No glow */
.et_pb_button[disabled],
.et_pb_button.is-disabled,
.et_pb_button[aria-disabled="true"] {
  color: color-mix(in srgb, var(--h1) 50%, transparent); /* Hue1 @ 0.5 */
  border-color: color-mix(in srgb, var(--h1) 50%, transparent); /* Hue1 @ 0.5 */
  border-width: 1px;
  cursor: not-allowed;
  pointer-events: none;
  /* Keep the base depth shadows, but remove any soft bloom */
  /* box-shadow: -6px -6px 12px color-mix(in srgb, var(--h1) 50%, transparent),
    6px 6px 12px color-mix(in srgb, var(--h1) 50%, transparent); */
}

/* 7.1.5 Buttons — stop Divi hover widen (no icons, no padding shift) */
.et_pb_button:after {
  display: none !important; /* kill the auto-added icon */
  content: none !important;
}

.et_pb_button {
  padding-right: 1.2em; /* keep your current feel */
}
.et_pb_button:hover,
.et_pb_button:focus-visible {
  padding-right: 1.2em !important; /* prevent Divi's hover bump */
}

/* Some Divi layouts add a helper class that bumps padding — neutralize it */
.et_pb_button_helper_class,
.et_pb_more_button {
  padding-right: 1.2em !important;
}

/* ==========================================================================
   8.0 Forms (reserved)
   ========================================================================== */
/* 8.1 Base (future) */
/* 8.2 Inputs (future) */
/* 8.3 Validation (future) */
/* 8.4 Plugins adapters (future) */

/* ==========================================================================
   9.0 Components (reserved)
   ========================================================================== */
/* 9.1 Card (future) */
/* 9.2 Media Block (future) */
/* 9.3 Badges (future) */
/* 9.4 Nav (future) */

/* ==========================================================================
   10.0 Utilities (helpers)
   ========================================================================== */
/* 10.1 Stack */
.u-stack > * + * {
  margin-top: var(--space-md);
}
/* 10.2 Padding helpers */
.u-pad-xs {
  padding: var(--space-xs);
}
.u-pad-sm {
  padding: var(--space-sm);
}
.u-pad-md {
  padding: var(--space-md);
}
.u-pad-lg {
  padding: var(--space-lg);
}
/* 10.3 Animation helpers (opt-in) */
.u-anim {
  transition-timing-function: var(--motion-ease);
}
.u-anim-all {
  transition: all var(--motion-ms) var(--motion-ease);
}
/* 10.4 Media defaults */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   11.0 Headers (Theme Builder — reserved)
   ========================================================================== */
/* 11.1 Header base (future) */
/* 11.2 Sticky/Transparent variants (future) */

/* ==========================================================================
   12.0 Footers (Theme Builder — reserved)
   ========================================================================== */
/* 12.1 Footer base (future) */
/* 12.2 Compact footer (future) */

/* ==========================================================================
   13.0 Divi Integrations / Overrides (reserved)
   ========================================================================== */

/* 13.1 Divi Overrides */

/* 13.1.1 Rewove Divi Button underline on hover */
.et_pb_button:hover {
  text-decoration: none !important;
}

/* 13.2 Exceptional fixes only (future) */

/* ==========================================================================
   14.0 Surface System — Study Only (commented)
   ========================================================================== */

/* ==========================================================================
   14.0 Surface System
   ========================================================================== */

/* 14.1 Tokens */
:root {
  --neu-shadow-light: color-mix(in srgb, var(--h7) 24%, transparent);
  --neu-shadow-dark: color-mix(in srgb, var(--h9) 60%, transparent);
  --neu-wash-alpha: 0.15;
  --surface-radius: 13px;

  /* Rim/Glow (for the multi-border variant) */
  --neu-rim-inner: var(--h10); /* crisp white rim */
  --neu-rim-outer: color-mix(in srgb, var(--h14) 85%, white 15%); /* cyan rim */
  --neu-rim1-w: 1px; /* inner rim width */
  --neu-rim2-w: 2px; /* outer rim width */
  --neu-glow-color: var(--h14); /* cyan haze */
  --neu-glow-blur: 28px;
}

/* 14.2 Raised & Sunken (ACTIVE baseline) */
.neu-raised,
.neu-sunken {
  border-radius: var(--surface-radius);
  background: var(--h13) var(--g8);
  background-blend-mode: overlay;
  position: relative;
}

/* 14.3 Raised — your current recipe (kept as-is) */
.neu-raised {
  position: relative;
  border-radius: var(--surface-radius);
  background: var(--h13);
  border: 3px solid var(--h10); /* width + style + color */
  box-shadow: -6px -6px 12px var(--neu-shadow-light),
    6px 6px 12px var(--neu-shadow-dark);
}
.neu-raised::before {
  /* outer glow (additive) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px var(--h10);
  mix-blend-mode: screen;
  pointer-events: none;
}
.neu-raised::after {
  /* inner glow (additive) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 12px var(--h15);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 14.3b Raised — multi-border “glow-rim” variant (no dark edge)
   Usage: class="neu-raised neu--glow-rim"
*/
.neu-raised.neu--glow-rim {
  /* remove real border to avoid the sign-edge; draw rims as shadow rings */
  border: none;
  background: var(--h13) var(--g8);
  background-blend-mode: overlay;
  background-clip: padding-box;
  box-shadow:
    /* inner crisp rim drawn ON the edge, inside */ inset 0 0 0
      var(--neu-rim1-w) var(--neu-rim-inner),
    /* outer cyan rim drawn ON the edge, outside */ 0 0 0 var(--neu-rim2-w)
      var(--neu-rim-outer),
    /* depth shadows */ -6px -6px 12px var(--neu-shadow-light),
    6px 6px 12px var(--neu-shadow-dark);
}
.neu-raised.neu--glow-rim::after {
  /* soft additive haze */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  box-shadow: 0 0 var(--neu-glow-blur) var(--neu-glow-color);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 14.4 Sunken */
.neu-sunken {
  box-shadow: inset -5px -5px 10px var(--neu-shadow-light),
    inset 5px 5px 10px var(--neu-shadow-dark);
}

/* Optional pseudo-elements would go here if re-activated:
   .neu-raised::before, .neu-sunken::before { ... }
   .neu-raised::after,  .neu-sunken::after  { ... }
*/

/* ==========================================================================
   14.5 Buttons - Divi integration
   ========================================================================== */

/*
.et_pb_button.neu-raised {
  border-radius: var(--surface-radius);
  box-shadow: 4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
  background: var(--h3); /* or your surface token */
/*
  color: var(--h1); /* button text color */

/* transition: box-shadow 0.2s ease;
}
.et_pb_button.neu-raised:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

/* ==========================================================================
   15.0 Animations (reserved)
   ========================================================================== */
/* 15.1 Keyframes (future) */
/* 15.2 Reveal/Parallax controls (future) */

/* ==========================================================================
   16.0 Grid Systems (reserved)
   ========================================================================== */
/* 16.1 cjk-grid (future) */
/* 16.2 Fraction helpers (future) */

/* ==========================================================================
   17.0 Theme/Plugin Integrations (reserved)
   ========================================================================== */

/* 17.1 Polylang (future) */
/* 17.2 WooCommerce (future) */
/* 17.3 Other plugins (future) */

/* End of neu-style.css */