/* ==========================================================================
   CORE.CSS — Base design system for Elementor builds
   Version 1.1 · Generic starting point, cloned per project
   --------------------------------------------------------------------------
   CHANGES FROM 1.0 — all three were silent failures, not style preferences.

   [FIX 1] Theme scopes redefine --color-text-on-brand.
           .theme-dark and .theme-brand reassigned --color-action but left
           --color-text-on-brand at its :root value (white). Every .c-btn
           inside a themed section rendered white-on-light:
             .theme-dark   #ffffff on #85aee1  = ~2.3:1  (fails AA)
             .theme-brand  #ffffff on #ffffff  =   1:1   (invisible)
           ::selection had the same root cause.

   [FIX 2] Accessibility floor moved OUT of @layer base, which loses.
           Focus rings and touch targets sat in a layer this file explicitly
           designs to lose to Elementor. A normal declaration inside a layer
           always loses to unlayered CSS, so the rule written to restore the
           outline Elementor strips could never win against it. The floor is
           now unlayered, with a documented !important entry for the outline
           (Elementor exposes no focus-ring control, so the UI cannot fix it).
           prefers-reduced-motion kept its !important and still works either
           way — important declarations invert layer precedence.

   [FIX 3] Mobile --card-pad override rescoped to .c-card.
           It was set on :root, but --card-pad is declared ON the component,
           so the component's own value won for its subtree and the override
           was never consulted. Cards kept desktop padding on mobile.

   [ALSO] .u-full-bleed no longer overflows on desktop (100vw counts the
          scrollbar); body gets overflow-x: clip, which unlike hidden does
          not create a scroll container, so sticky headers still work.
          .u-clamp-* gained the standard line-clamp alongside the -webkit- one.
          The 44px touch target no longer applies to every button on the page
          (it was breaking carousel arrows and toggles) — it now targets real
          buttons and links only.
   --------------------------------------------------------------------------
   ARCHITECTURE
     Layer 1  Primitives   --ds-*        Raw values. Never referenced in rules.
     Layer 2  Semantic     --color-*     Meaning. This is what you author with.
                           --space-*
                           --text-*
     Layer 3  Component    --card-*      Per-pattern. Aliases Layer 2 only.
                           --btn-*
     Bridge   Elementor    --e-global-*  Points Elementor's own vars at Layer 2.

   Rule: a rule never touches a primitive. If you need a new value in a
   component, add a semantic token first. That keeps the alias chain traceable
   and makes rebranding a Layer 1 edit.
   --------------------------------------------------------------------------
   INSTALL

   1. Child theme. Save as /assets/css/core.css and enqueue in functions.php:

        add_action( 'wp_enqueue_scripts', function () {
          wp_enqueue_style(
            'core-system',
            get_stylesheet_directory_uri() . '/assets/css/core.css',
            [ 'elementor-frontend' ],                                 // load AFTER Elementor
            filemtime( get_stylesheet_directory() . '/assets/css/core.css' )
          );
        }, 20 );

      Enqueue it in the editor too, so the canvas matches the front end:

        add_action( 'elementor/editor/after_enqueue_styles', ... same handle ... );

   2. Elementor > Site Settings > Layout: set Content Width to 1200, Widgets
      Space to 0 (spacing lives in containers, not widget margins).

   3. Site Settings > Global Colors / Global Fonts: set the four system slots
      to the same values as the tokens below. The bridge keeps them in sync,
      but the picker swatches clients see should match.

   4. Features > Flexbox Container: ON. Optimized Markup: ON. Build in
      Containers. Do not use legacy Sections/Columns.

   5. Per project: edit ONLY the Layer 1 brand ramp, the two font stacks, and
      the radius/shadow character. Everything else stays.
   ========================================================================== */


/* ==========================================================================
   CASCADE STRATEGY — read this before adding anything
   --------------------------------------------------------------------------
   Elementor ships unlayered CSS. Unlayered styles beat ALL layered styles
   regardless of specificity. So layers are used deliberately here:

     @layer reset, base  → intentionally LOSE to Elementor. These are defaults
                           Elementor's controls should be able to override.

     unlayered           → components, utilities, and the accessibility floor.
                           These need to WIN, so they stay out of layers and
                           use a doubled class (.elementor-element.u-card) to
                           clear Elementor's own .elementor-widget-x selectors.

   The accessibility floor is unlayered for exactly this reason — see FIX 2.
   Anything a user depends on to operate the page belongs outside a layer.

   Escape hatch: !important is allowed only in the flagged block at the very
   bottom. If you reach for it anywhere else, the fix is in Elementor's UI.
   ========================================================================== */

@layer reset, base;


/* ==========================================================================
   LAYER 1 — PRIMITIVES
   Raw values only. Swap the brand ramp per project; leave the rest.
   ========================================================================== */

:root {

  /* --- Neutral ramp — slightly cool, hue-consistent -------------------- */
  --ds-neutral-0:    #ffffff;
  --ds-neutral-50:   #f8f9fa;
  --ds-neutral-100:  #f1f3f5;
  --ds-neutral-200:  #e6e8eb;
  --ds-neutral-300:  #d3d7dc;
  --ds-neutral-400:  #aeb4bc;
  --ds-neutral-500:  #858c96;
  --ds-neutral-600:  #666d78;
  --ds-neutral-700:  #4c525b;
  --ds-neutral-800:  #343940;
  --ds-neutral-900:  #21252a;
  --ds-neutral-950:  #131619;

  /* --- Brand ramp — PLACEHOLDER. Replace all 11 per project. -----------
     Note: this default is a generic blue, which Elementor's own style
     guidance flags as an overrepresented choice. Replacing it is step 5
     of INSTALL, not optional polish. */
  --ds-brand-50:   #eef4fb;
  --ds-brand-100:  #d8e6f6;
  --ds-brand-200:  #b4cded;
  --ds-brand-300:  #85aee1;
  --ds-brand-400:  #548bd0;
  --ds-brand-500:  #356db8;
  --ds-brand-600:  #275798;   /* default brand stop */
  --ds-brand-700:  #1f457a;
  --ds-brand-800:  #1b3861;
  --ds-brand-900:  #182f4f;
  --ds-brand-950:  #0f1d33;

  /* --- Status ---------------------------------------------------------- */
  --ds-success-100: #dcf5e6;
  --ds-success-600: #1f7a48;
  --ds-warning-100: #fdf0d5;
  --ds-warning-600: #8a5a00;
  --ds-danger-100:  #fce4e4;
  --ds-danger-600:  #a32020;
  --ds-info-100:    #dceefb;
  --ds-info-600:    #14628f;

  /* --- Shadow tint — tinted neutral, never pure black ------------------ */
  --ds-shadow-hue: 220 12% 12%;

  /* --- Size scale — 4px base ------------------------------------------- */
  --ds-size-0:   0;
  --ds-size-1:   0.25rem;   /*   4 */
  --ds-size-2:   0.5rem;    /*   8 */
  --ds-size-3:   0.75rem;   /*  12 */
  --ds-size-4:   1rem;      /*  16 */
  --ds-size-5:   1.5rem;    /*  24 */
  --ds-size-6:   2rem;      /*  32 */
  --ds-size-7:   2.5rem;    /*  40 */
  --ds-size-8:   3rem;      /*  48 */
  --ds-size-9:   4rem;      /*  64 */
  --ds-size-10:  5rem;      /*  80 */
  --ds-size-11:  6rem;      /*  96 */
  --ds-size-12:  8rem;      /* 128 */

  /* --- Type primitives — fluid 320px → 1440px -------------------------- */
  /* Mobile ratio 1.200 · Desktop ratio 1.250 · Base 16 → 18 */
  --ds-step--1: clamp(0.833rem, 0.814rem + 0.10vw, 0.900rem);
  --ds-step-0:  clamp(1.000rem, 0.964rem + 0.18vw, 1.125rem);
  --ds-step-1:  clamp(1.200rem, 1.141rem + 0.29vw, 1.406rem);
  --ds-step-2:  clamp(1.440rem, 1.349rem + 0.45vw, 1.758rem);
  --ds-step-3:  clamp(1.728rem, 1.594rem + 0.67vw, 2.197rem);
  --ds-step-4:  clamp(2.074rem, 1.882rem + 0.96vw, 2.746rem);
  --ds-step-5:  clamp(2.488rem, 2.218rem + 1.35vw, 3.433rem);

  --ds-font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-serif: Georgia, "Times New Roman", serif;
  --ds-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ds-weight-regular: 400;
  --ds-weight-medium:  500;
  --ds-weight-semi:    600;
  --ds-weight-bold:    700;

  --ds-leading-tight:  1.15;
  --ds-leading-snug:   1.3;
  --ds-leading-normal: 1.6;
  --ds-leading-loose:  1.75;

  --ds-tracking-tight:  -0.02em;
  --ds-tracking-normal:  0;
  --ds-tracking-wide:    0.04em;

  /* --- Radius ---------------------------------------------------------- */
  --ds-radius-0:    0;
  --ds-radius-1:    0.1875rem;
  --ds-radius-2:    0.375rem;
  --ds-radius-3:    0.625rem;
  --ds-radius-4:    1rem;
  --ds-radius-full: 9999px;

  /* --- Motion ---------------------------------------------------------- */
  --ds-duration-1: 120ms;
  --ds-duration-2: 200ms;
  --ds-duration-3: 320ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-entrance: cubic-bezier(0, 0, 0, 1);
  --ds-ease-exit:     cubic-bezier(0.3, 0, 1, 1);
}


/* ==========================================================================
   LAYER 2 — SEMANTIC
   The authoring vocabulary. Every rule below this point uses these.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Surfaces --------------------------------------------------------- */
  --color-surface:          var(--ds-neutral-0);
  --color-surface-sunken:   var(--ds-neutral-50);
  --color-surface-raised:   var(--ds-neutral-0);
  --color-surface-inverse:  var(--ds-neutral-900);
  --color-surface-brand:    var(--ds-brand-600);
  --color-surface-brand-subtle: var(--ds-brand-50);

  /* --- Text ------------------------------------------------------------- */
  --color-text:          var(--ds-neutral-900);
  --color-text-muted:    var(--ds-neutral-600);
  --color-text-subtle:   var(--ds-neutral-500);
  --color-text-inverse:  var(--ds-neutral-0);
  --color-text-brand:    var(--ds-brand-700);
  --color-text-on-brand: var(--ds-neutral-0);

  /* --- Lines ------------------------------------------------------------ */
  --color-border:        var(--ds-neutral-200);
  --color-border-strong: var(--ds-neutral-300);
  --color-border-brand:  var(--ds-brand-600);
  --color-divider:       var(--ds-neutral-200);

  /* --- Interactive ------------------------------------------------------ */
  --color-action:        var(--ds-brand-600);
  --color-action-hover:  var(--ds-brand-700);
  --color-action-active: var(--ds-brand-800);
  --color-focus-ring:    var(--ds-brand-500);

  /* --- Status ----------------------------------------------------------- */
  --color-success:         var(--ds-success-600);
  --color-success-surface: var(--ds-success-100);
  --color-warning:         var(--ds-warning-600);
  --color-warning-surface: var(--ds-warning-100);
  --color-danger:          var(--ds-danger-600);
  --color-danger-surface:  var(--ds-danger-100);
  --color-info:            var(--ds-info-600);
  --color-info-surface:    var(--ds-info-100);

  /* --- Space ------------------------------------------------------------ */
  --space-3xs: var(--ds-size-1);
  --space-2xs: var(--ds-size-2);
  --space-xs:  var(--ds-size-3);
  --space-sm:  var(--ds-size-4);
  --space-md:  var(--ds-size-5);
  --space-lg:  var(--ds-size-6);
  --space-xl:  var(--ds-size-8);
  --space-2xl: var(--ds-size-9);
  --space-3xl: var(--ds-size-11);

  /* Fluid vertical rhythm for section padding */
  --space-section:       clamp(3rem, 2rem + 5vw, 6rem);
  --space-section-tight: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

  /* --- Type ------------------------------------------------------------- */
  --text-xs:   var(--ds-step--1);
  --text-base: var(--ds-step-0);
  --text-lg:   var(--ds-step-1);
  --text-xl:   var(--ds-step-2);
  --text-2xl:  var(--ds-step-3);
  --text-3xl:  var(--ds-step-4);
  --text-4xl:  var(--ds-step-5);

  --font-body:    var(--ds-font-sans);
  --font-heading: var(--ds-font-sans);
  --font-mono:    var(--ds-font-mono);

  /* --- Layout ----------------------------------------------------------- */
  --layout-max:     75rem;    /* 1200px — mirror in Site Settings */
  --layout-wide:    87.5rem;  /* 1400px */
  --layout-narrow:  45rem;    /*  720px */
  --layout-gutter:  var(--space-md);
  --layout-measure: 68ch;     /* body copy line length ceiling */

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm:   var(--ds-radius-1);
  --radius-md:   var(--ds-radius-2);
  --radius-lg:   var(--ds-radius-3);
  --radius-xl:   var(--ds-radius-4);
  --radius-pill: var(--ds-radius-full);

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px hsl(var(--ds-shadow-hue) / 0.06),
               0 1px 3px hsl(var(--ds-shadow-hue) / 0.08);
  --shadow-md: 0 2px 4px hsl(var(--ds-shadow-hue) / 0.05),
               0 6px 12px hsl(var(--ds-shadow-hue) / 0.09);
  --shadow-lg: 0 4px 8px hsl(var(--ds-shadow-hue) / 0.05),
               0 16px 32px hsl(var(--ds-shadow-hue) / 0.12);

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  /* --- Motion ----------------------------------------------------------- */
  --motion-fast: var(--ds-duration-1) var(--ds-ease-standard);
  --motion-base: var(--ds-duration-2) var(--ds-ease-standard);
  --motion-slow: var(--ds-duration-3) var(--ds-ease-standard);

  /* --- Z-index — every stacked thing gets a name ------------------------ */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}


/* ==========================================================================
   THEME SCOPES
   Add `theme-dark` or `theme-brand` to a Container's CSS Classes field in
   Elementor and everything inside re-resolves. This is the single biggest win
   of the token approach in a page builder — an inverted section is one class,
   not twenty overrides.

   [FIX 1] Every scope that reassigns --color-action MUST also reassign
   --color-text-on-brand. .c-btn derives its foreground from the latter, so
   changing one without the other produces an unreadable button. Treat them
   as a pair whenever you add a new scope.
   ========================================================================== */

.theme-dark {
  color-scheme: dark;
  --color-surface:         var(--ds-neutral-900);
  --color-surface-sunken:  var(--ds-neutral-950);
  --color-surface-raised:  var(--ds-neutral-800);
  --color-surface-inverse: var(--ds-neutral-0);

  --color-text:          var(--ds-neutral-50);
  --color-text-muted:    var(--ds-neutral-300);
  --color-text-subtle:   var(--ds-neutral-400);
  --color-text-inverse:  var(--ds-neutral-900);
  --color-text-brand:    var(--ds-brand-200);

  /* [FIX 1] Action is a light blue here, so its foreground must go dark.
     #21252a on #85aee1 = 6.7:1 (was #ffffff on #85aee1 = 2.3:1). */
  --color-text-on-brand: var(--ds-neutral-900);

  --color-border:        var(--ds-neutral-700);
  --color-border-strong: var(--ds-neutral-600);
  --color-divider:       var(--ds-neutral-700);

  --color-action:       var(--ds-brand-300);
  --color-action-hover: var(--ds-brand-200);
  --color-action-active: var(--ds-brand-100);
  --color-focus-ring:   var(--ds-brand-300);
}

.theme-brand {
  --color-surface:        var(--ds-brand-700);
  --color-surface-sunken: var(--ds-brand-800);
  --color-surface-raised: var(--ds-brand-600);

  --color-text:        var(--ds-neutral-0);
  --color-text-muted:  var(--ds-brand-100);
  --color-text-subtle: var(--ds-brand-200);

  /* [FIX 1] Action is white here, so its foreground must be the deep brand
     stop. #1f457a on #ffffff = 9.6:1 (was #ffffff on #ffffff = 1:1). */
  --color-text-on-brand: var(--ds-brand-700);

  --color-border:  var(--ds-brand-500);
  --color-divider: var(--ds-brand-500);

  --color-action:        var(--ds-neutral-0);
  --color-action-hover:  var(--ds-brand-100);
  --color-action-active: var(--ds-brand-200);
  --color-focus-ring:    var(--ds-neutral-0);
}

/* Scoped themes paint their own background and text so the Container doesn't
   need Elementor background settings fighting the token. */
.theme-dark,
.theme-brand {
  background-color: var(--color-surface);
  color: var(--color-text);
}


/* ==========================================================================
   ELEMENTOR BRIDGE
   Elementor's Kit emits :root { --e-global-color-primary: #hex; ... }.
   Only the four system colors and four system typography sets have stable,
   predictable names — custom globals get hashed IDs, so do not rely on them.

   Repointing these means anything styled via the Global picker inherits the
   token, including widgets you never touch.

   NOTE: the typography bridge covers font-family only. Elementor's typography
   globals also carry size, weight and line-height, which still come from the
   Kit. Set those in Site Settings to match Layer 2, or they will drift.

   IMPORTANT: Elementor's Kit CSS also lives in :root. Load order decides the
   winner, which is why the enqueue above depends on 'elementor-frontend'.
   ========================================================================== */

:root {
  --e-global-color-primary:   var(--color-text);
  --e-global-color-secondary: var(--color-text-muted);
  --e-global-color-text:      var(--color-text);
  --e-global-color-accent:    var(--color-action);

  --e-global-typography-primary-font-family:   var(--font-heading);
  --e-global-typography-secondary-font-family: var(--font-heading);
  --e-global-typography-text-font-family:      var(--font-body);
  --e-global-typography-accent-font-family:    var(--font-body);

  /* Container widths — keep numerically in sync with Site Settings */
  --container-max-width: var(--layout-max);
  --content-width:       var(--layout-max);
}


/* ==========================================================================
   @layer reset — intentionally loses to Elementor controls
   ========================================================================== */

@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--ds-leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* :where() keeps these at zero specificity — Elementor always wins */
  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 var(--space-xs);
    font-family: var(--font-heading);
    font-weight: var(--ds-weight-semi);
    line-height: var(--ds-leading-tight);
    letter-spacing: var(--ds-tracking-tight);
    text-wrap: balance;
    color: var(--color-text);
  }

h1 { font-size: var(--text-4xl); }
  :where(h2) { font-size: var(--text-3xl); }
  :where(h3) { font-size: var(--text-2xl); }
  :where(h4) { font-size: var(--text-xl); }
  :where(h5) { font-size: var(--text-lg); }
  :where(h6) { font-size: var(--text-base); letter-spacing: var(--ds-tracking-normal); }

  :where(p, ul, ol, dl, blockquote, figure, table) { margin-block: 0 var(--space-sm); }
  :where(p) { text-wrap: pretty; }

  :where(a) {
    color: var(--color-action);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--motion-fast);
  }
  :where(a:hover) { color: var(--color-action-hover); }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }

  :where(strong, b) { font-weight: var(--ds-weight-semi); }
  :where(small) { font-size: var(--text-xs); }
  :where(code, kbd, pre, samp) { font-family: var(--font-mono); font-size: 0.9em; }

  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--color-divider);
    margin-block: var(--space-lg);
  }

  :where(blockquote) {
    padding-inline-start: var(--space-sm);
    border-inline-start: 3px solid var(--color-border-brand);
    color: var(--color-text-muted);
  }

  :where(table) {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }
  :where(th, td) {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
  }
  :where(th) { font-weight: var(--ds-weight-semi); }

  :where(input, select, textarea, button) { font: inherit; color: inherit; }
}


/* ==========================================================================
   @layer base — cross-cutting behaviour Elementor MAY override
   Anything a user depends on to operate the page has moved out of this layer.
   What is left is presentational and safe to lose.
   ========================================================================== */

@layer base {
  html { scroll-behavior: smooth; }
  :target { scroll-margin-block-start: var(--space-2xl); }
}


/* ==========================================================================
   ACCESSIBILITY FLOOR — unlayered, so it survives Elementor
   [FIX 2] This block was in @layer base, which this file designs to LOSE.
   A normal declaration in a layer always loses to unlayered CSS, so the
   focus-ring restore could never beat the outline Elementor strips. These
   rules are not defaults to be overridden — they are the floor.
   ========================================================================== */

/* Consistent, visible focus everywhere. Never remove without replacing.
   #356db8 on #ffffff = 5.2:1, comfortably past the 3:1 WCAG 2.2 needs for a
   focus indicator. Both theme scopes reassign --color-focus-ring to keep it. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:focus-visible,
.elementor :is(input, select, textarea):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Minimum touch target — WCAG 2.2 SC 2.5.8 floors at 24x24; 44px is the
   comfortable mobile target. Scoped to real buttons and button-links only:
   applying it to every `button` stretched carousel arrows, accordion toggles
   and close icons, which have their own sizing. */
.elementor a.elementor-button,
.elementor .c-btn,
.elementor button[type="submit"] {
  min-block-size: 44px;
}

::selection {
  background-color: var(--color-action);
  color: var(--color-text-on-brand);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   COMPONENTS — unlayered so they beat Elementor's widget CSS
   Layer 3 tokens are declared on the component itself, so a variant is a
   token override rather than a new rule.

   Because these tokens live ON the component, any responsive override must
   also target the component — setting them on :root does nothing. See FIX 3.

   Applied via the CSS Classes field on a widget or container.
   ========================================================================== */

/* --- Card ---------------------------------------------------------------- */
.elementor-element.c-card,
.c-card {
  --card-surface: var(--color-surface-raised);
  --card-border:  var(--color-border);
  --card-pad:     var(--space-md);
  --card-radius:  var(--radius-lg);
  --card-shadow:  var(--shadow-sm);

  background-color: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}

.c-card--flat   { --card-shadow: none; }
.c-card--sunken { --card-surface: var(--color-surface-sunken); --card-border: transparent; --card-shadow: none; }
.c-card--roomy  { --card-pad: var(--space-lg); }

/* Lift only where the whole card is a link — not decoration on every card */
a.c-card:hover,
.c-card--interactive:hover {
  --card-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Button -------------------------------------------------------------- */
/* Elementor's button widget is styled in the UI. Use this only for buttons
   you author in HTML widgets or templates. */
.elementor-element .c-btn,
.c-btn {
  --btn-bg:     var(--color-action);
  --btn-fg:     var(--color-text-on-brand);
  --btn-border: transparent;
  --btn-pad-i:  var(--space-md);
  --btn-pad-b:  var(--space-xs);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  padding: var(--btn-pad-b) var(--btn-pad-i);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  font-weight: var(--ds-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.c-btn:hover  { --btn-bg: var(--color-action-hover);  color: var(--btn-fg); }
.c-btn:active { --btn-bg: var(--color-action-active); }

.c-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-action);
  --btn-border: var(--color-border-strong);
}
.c-btn--secondary:hover {
  --btn-bg: var(--color-surface-sunken);
  --btn-fg: var(--color-action-hover);
}

.c-btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--color-action);
  --btn-pad-i: var(--space-2xs);
}

/* --- Eyebrow / label ----------------------------------------------------- */
/* Sentence case by default. Uppercase is opt-in, not the house style. */
.c-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--ds-weight-semi);
  color: var(--color-text-muted);
  margin-block-end: var(--space-3xs);
  text-transform: uppercase;
  letter-spacing:1px;
}

/* --- Prose --------------------------------------------------------------- */
/* Apply to a Text Editor widget holding long-form content. */
.elementor-element.c-prose .elementor-widget-container,
.c-prose { max-inline-size: var(--layout-measure); }

.c-prose :is(h2, h3, h4) { margin-block-start: var(--space-lg); }
.c-prose > :first-child  { margin-block-start: 0; }
.c-prose > :last-child   { margin-block-end: 0; }
.c-prose :is(ul, ol)     { padding-inline-start: var(--space-md); }
.c-prose li              { margin-block-end: var(--space-3xs); }

/* --- Divider ------------------------------------------------------------- */
.c-rule {
  border: 0;
  border-block-start: 1px solid var(--color-divider);
  margin-block: var(--space-lg);
}


/* ==========================================================================
   UTILITIES — unlayered, single-purpose, typed into CSS Classes
   Deliberately small. Do NOT add utilities for layout, gap, or padding:
   Elementor's Container controls already do that well, and duplicating them
   splits the source of truth between the UI and this file.
   These cover only what Elementor's UI cannot express.
   ========================================================================== */

/* 100vw counts the scrollbar gutter, so a full-bleed block overflows by that
   width on any desktop with a classic scrollbar. `clip` contains it without
   creating a scroll container, so sticky headers keep working (`hidden`
   would break them). */
body { overflow-x: clip; }

/* Width constraints */
.u-measure    { max-inline-size: var(--layout-measure); }
.u-narrow     { max-inline-size: var(--layout-narrow); margin-inline: auto; }
.u-full-bleed { inline-size: 100vw; margin-inline: calc(50% - 50vw); }

/* Typography */
.u-balance { text-wrap: balance; }
.u-lead    { font-size: var(--text-lg); line-height: var(--ds-leading-snug); color: var(--color-text-muted); }
.u-muted   { color: var(--color-text-muted); }
.u-subtle  { color: var(--color-text-subtle); }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-caps    { text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); font-size: var(--text-xs); }

/* Truncation */
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-clamp-2,
.u-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Media */
.u-ratio-16x9 :is(img, video, iframe) { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
.u-ratio-4x3  :is(img, video, iframe) { aspect-ratio: 4 / 3;  object-fit: cover; inline-size: 100%; }
.u-ratio-1x1  :is(img, video, iframe) { aspect-ratio: 1 / 1;  object-fit: cover; inline-size: 100%; }

/* Surfaces */
.u-surface-sunken { background-color: var(--color-surface-sunken); }
.u-border-top     { border-block-start: 1px solid var(--color-divider); }
.u-border-bottom  { border-block-end: 1px solid var(--color-divider); }
.u-radius-lg      { border-radius: var(--radius-lg); overflow: hidden; }
.u-shadow-md      { box-shadow: var(--shadow-md); }

/* Accessibility */
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: -100%;
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.u-skip-link:focus { inset-block-start: var(--space-sm); }


/* ==========================================================================
   BREAKPOINTS
   Custom properties cannot be used in media queries, so these values are
   hardcoded. They MUST match Elementor > Site Settings > Layout > Breakpoints.
   Default Elementor: mobile ≤767 · tablet ≤1024.
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --layout-gutter: var(--space-sm); }
}

@media (max-width: 767px) {
  :root {
    --space-section: clamp(2.5rem, 2rem + 4vw, 3.5rem);
  }

  /* [FIX 3] --card-pad is declared ON .c-card, so the component's own value
     wins for its subtree and a :root override here is never consulted.
     Responsive overrides of a Layer 3 token must target the component. */
  .elementor-element.c-card,
  .c-card { --card-pad: var(--space-sm); }

  .u-full-bleed { inline-size: auto; margin-inline: 0; }
}


/* ==========================================================================
   ESCAPE HATCH — the only place !important is permitted
   Every entry needs a comment naming what it overrides and why the fix
   couldn't be made in Elementor's UI. Prune this on every project.
   ========================================================================== */

/* Elementor sets inline styles on Container backgrounds; theme scopes need to
   win so a `.theme-dark` container can't be silently un-themed. */
.elementor-element.theme-dark,
.elementor-element.theme-brand {
  background-color: var(--color-surface) !important;
}

/* [FIX 2] Elementor and Hello Elementor ship unlayered `outline: none` on
   focused buttons and links. Unlayered beats layered, and matching their
   specificity per widget type is brittle, so the focus ring is the one
   accessibility rule allowed to force the win. Elementor exposes no
   focus-ring control, so this genuinely cannot be fixed in the UI.
   Remove any line here you can prove is no longer being stripped. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}


/* ==========================================================================
   PROJECT OVERRIDES
   Keep project-specific CSS below this line, or in a separate project.css
   loaded after this file. Do not edit anything above except Layer 1.
   ========================================================================== */