/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ── wn-nav scrolled state ─────────────────────────────────────────────────
   POSITION IS DELIBERATE: this rule sits FIRST, above the migrated
   template-pack CSS. That block uses native CSS nesting, and the hypothesis
   under test (2026-07-30) is that a parse break there discards every rule
   after it — which is where this rule previously sat, and it never applied.
   If it works from here, do not move it back.

   The JS (WPCodeBox snippet `wn-nav`) toggles `.wn-nav--scrolled` on scroll.
   Spec: 03-projects/design-implementation-system/specs/nav-d15-port.md
   ------------------------------------------------------------------------- */
.wn-nav.wn-nav--scrolled {
  background: var(--wn-color-brand-bg);
  border-bottom-color: var(--wn-rule);
}


/* ── --wn-sticky-offset ────────────────────────────────────
   The fixed-nav clearance token. Three global classes were authored against it
   BEFORE template 442 became the active header, each with a 0px fallback:

     wn-cat-crumb   padding-top  calc(var(--wn-sticky-offset,0px) + 22px)
     wn-pg__tabs    sticky top   var(--wn-sticky-offset,0px)
     wn-ben__sticky sticky top   calc(var(--wn-sticky-offset,0px) + 32px)

   Defining it was the documented follow-up to the header activation
   (HANDOFF-build-phase.md § 702-703, HANDOFF-homepage-build.md § 138/295)
   and it was never done — so all three resolved to 0 under a 76.75px fixed
   nav. The category breadcrumb rendered at document y=0, under the logo.

   Value is var(--wn-nav-h), NEVER a literal 77px — the whole site reserves
   clearance from that token (pdp-and-header-activation.md § 3). It also
   restores wn-ben__sticky to the design's intended 120px (88 + 32).
   ------------------------------------------------------------------------- */
:root { --wn-sticky-offset: var(--wn-nav-h); }

/* 2026-08-27 — at <=1150px the header inner pads drop 14px->10px (wn-nav__inner
   media rule), so the fixed nav is 65px tall (10+44+10+1 rule), not
   --wn-nav-h (88px): the sticky tab bar sat 23px below the nav on phones.
   Mirror the header's own breakpoint so the offset tracks the real nav. */
@media (max-width: 1150px) {
  :root { --wn-sticky-offset: 65px; }
}


/* ── FOCUS RING — --focus-color, site-wide ─────────────────────────────────
   2026-08-24. Restores the DESIGNED focus ring on every focusable element.

   THE DEFECT (found by the Consultatie lane, HANDOFF-homepage-copy.md § 2026-08-24)
   It is NOT Bricks. It is ACSS. `automatic-bricks.css` emits

     body.bricks-is-frontend.bricks-is-frontend :focus-visible {
       outline-style: solid;
       outline-color: var(--focus-color);
       outline-width: var(--focus-width);
       outline-offset: var(--focus-offset);
     }

   at specificity (0,3,1), and `automatic.css` sets `:root { --focus-color: var(--neutral) }`
   = #171717. All four outline longhands therefore beat every `wn-*` focus rule
   on the site — 19 of them, all authored as the shorthand `outline: 2px solid …`
   at (0,1,0)/(0,2,0). Every designed ring was silently repainted #171717:
   high-contrast but wrong on light, and near-invisible on the dark band
   (#171717 on #01361D measured 1.32:1).

   THE MECHANISM — a token, not a specificity war.
   The ACSS rule is not the enemy; its *input* was wrong. Feeding it the design
   token makes ACSS itself paint the correct ring on EVERYTHING, including the
   Woo / CommerceKit / checkout controls that have no `wn-*` rule at all. No
   `!important`, no per-element patches, nothing to keep in sync.
   `:root:root` is (0,2,0) and beats ACSS's `:root` (0,1,0) on specificity, so
   it holds regardless of stylesheet load order.

   THE VALUES — read off the design, not invented. The 19 existing wn-* focus
   rules use exactly two outline colours:
     14 x  var(--wn-color-accent-text)  #B65317  — light surfaces
      5 x  var(--wn-color-accent-dark)  #E8762B  — the dark band
   That is the same light/dark accent split 01-styling-architecture.md § 4
   prescribes for accent-as-text. Measured contrast:
     #B65317 on #FFFFFF ......... 4.96:1  ✅
     #E8762B on #01361D (band) .. 4.56:1  ✅
     #E8762B on #012011 (footer)  5.81:1  ✅
     (#B65317 on the band would be 1.9:1 — hence the dark override.)

   Colour ONLY. `--focus-width` (0.15rem ≈ 2.4px) and `--focus-offset` (0.15em)
   are left at the ACSS defaults: within a hair of the designed 2px, and
   changing them would move geometry on every focusable element site-wide for
   no accessibility gain. Never remove a focus indicator here — only recolour.

   THE DARK CONTEXTS are enumerated because CSS cannot detect a backdrop. These
   three are the only surfaces on the site with luminance < 0.25 that contain
   focusable children (surveyed on home, category, PDP at 1440):
     .wn-section--band   #01361D   the green band (#alcalina, #consultatie, …)
     .wn-mega__finder    #01361D   the mega-menu finder panel
     #brx-footer         #012011   the Bricks footer wrapper
   Custom properties INHERIT, so declaring on the container recolours every
   descendant automatically — specificity is irrelevant between elements.
   ⚠️ If a new dark surface is added, add it to this list.

   THE SKIP LINKS are the one place ACSS declares `--focus-color` on the element
   itself: `.skip-link, .link--skip { --focus-color: var(--primary-light) }`
   = #C6ECD8. Measured 1.28:1 against the white page — a real WCAG 1.4.11 miss
   on the FIRST keyboard stop of every page. That declaration sits on the same
   element, so `:root:root` cannot reach it (custom properties resolve by
   nearest declaring ancestor, not specificity), and a plain `.skip-link` would
   tie at (0,1,0) and LOSE on source order — automatic-bricks.css (sheet 39)
   loads after this file (sheet 36). Hence the doubled class, per the house
   "write it doubled" rule in 01-styling-architecture.md § 2.
   The ring sits at outline-offset 2px, so both of its adjacent colours are the
   white page, not the green pill: #B65317 on #FFFFFF = 4.96:1 ✅.
   ------------------------------------------------------------------------- */
:root:root {
  --focus-color: var(--wn-color-accent-text);
}

.wn-section--band,
.wn-mega__finder,
#brx-footer {
  --focus-color: var(--wn-color-accent-dark);
}

.skip-link.skip-link {
  --focus-color: var(--wn-color-accent-text);
}


/* ============================================================================
   Migrated out of Bricks `code` elements — 2026-07-29
   ----------------------------------------------------------------------------
   WHY: Bricks signs `code` elements with a SITE-SPECIFIC key. Cloning the
   database (which the cutover does — see launch-cutover-contract.md § 3.6b)
   invalidates every signature and Bricks then emits NOTHING, silently.
   These rules shipped with the purchased template pack, signed by user_id 2,
   so they could not simply be re-saved either.

   Full rule: .claude/skills/design-to-bricks/references/bricks.md § R34
   Inventory: 03-projects/website-redesign/signed-elements-inventory.md

   NOTE: these use native CSS nesting, exactly as authored in the code element.
   ⚠️ Keep NEW rules ABOVE this block until the nesting is confirmed parse-safe.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   FROM: template 92 "Single Product", element `sokggp` (cssCode, executeCode)
   --------------------------------------------------------------------------- */

/* Border radius on the main gallery photo */
.single-product-4__gallery{
  .flex-viewport, .woocommerce-product-gallery__image{
    border-radius: var(--radius-m);
  }
}

.single-product-4__add-cart{
  /* Product sold individually */
  &:has(.input-text[type="hidden"]){
    .woocommerce-variation-add-to-cart, .cart{
      flex-direction: column;
    }
  }

  /* The container holding the quantity form + button varies with variations */
  .variations_button, .cart:not(:has(.variations_button)){
    display:flex;
    gap: var(--space-xs);

    /* "Add to cart" button */
    .button{
      margin-top:0;
      flex: 1;
    }

    @media(max-width: 766px){
      flex-direction:column;
    }
  }

  /* Border radius on the quantity input */
  .quantity{
    .action.minus{
      border-radius: var(--radius-s) 0 0  var(--radius-s);
    }

    .action.plus{
      border-radius: 0  var(--radius-s)  var(--radius-s) 0;
    }
  }
}

/* ---------------------------------------------------------------------------
   FROM: page 12 "Shop", element `asvwdr` (cssCode, executeCode, noRoot)
   --------------------------------------------------------------------------- */

.card-product-2__price{
  /* Regular price only — excludes cards that carry a <del> (sale price) */
  .price:not(:has(del)) bdi {
    color: var(--neutral);
    font-weight: 700;
  }
}

/* ── wn-pg__tabs mobile scroll affordance ──────────────────────────
   2026-08-27. At <=860px the tab bar is a nowrap overflow-x scroller,
   scrollbar hidden (global-class CSS): nothing hinted the 4th tab exists.
   Scrolling shadows: local covers hide each edge shadow at that scroll
   end, so the hint vanishes once fully scrolled. */
@media (max-width: 860px) {
  .wn-pg__tabs.wn-pg__tabs.wn-pg__tabs.wn-pg__tabs {
    -webkit-overflow-scrolling: touch;
    /* the base rule pins width:100% while the -wrap-pad margins shift the
       bar left, leaving a 40px uncovered strip on the right. Stretch the
       full-bleed width to match the margins. */
    width: calc(100% + (var(--wn-wrap-pad) * 2));
    max-width: none; /* Bricks' max-width:100% clamps the bleed */
    background:
      linear-gradient(90deg, var(--wn-color-brand-surface) 46%, rgba(255,255,255,0)) left/48px 100% no-repeat local,
      linear-gradient(270deg, var(--wn-color-brand-surface) 46%, rgba(255,255,255,0)) right/48px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(1,54,29,.16), rgba(1,54,29,0)) left/16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(1,54,29,.16), rgba(1,54,29,0)) right/16px 100% no-repeat scroll
      var(--wn-color-brand-surface);
    background-origin: border-box;
    background-clip: border-box;
  }
}

/* ── PARSE CANARY ──────────────────────────────────────────────────────────
   If this rule applies, everything above it parsed cleanly. Read it with
   getComputedStyle(document.documentElement).getPropertyValue('--wn-parse-canary')
   — expect "ok". Empty means the nested CSS above broke the parser.
   ------------------------------------------------------------------------- */
:root { --wn-parse-canary: ok; }

/* ── POST-ACSS BLOCK ───────────────────────────────────────────────────────
   2026-08-28. Automatic.css 3.3.7 is being removed (analysis:
   03-projects/website-redesign/drafts/acss-4-analiza-2026-08-28.md — the site
   uses ZERO ACSS utility classes; the plugin only supplied the behaviours and
   tokens below). Every value here is the one MEASURED on dev with ACSS still
   active, so nothing moves visually. While ACSS remains active this block is
   inert: identical declarations, and ACSS loads later so it wins every tie.
   The focus-ring rule is now OURS — the R48 token mechanism above
   (:root:root --focus-color + the dark-context overrides) feeds it directly.
   ------------------------------------------------------------------------- */

:root {
  /* ex-ACSS tokens consumed by the legacy migrated CSS below + focus rules */
  --focus-width: 0.15rem;
  --focus-offset: 0.15em;
  --neutral: #171717;
  --radius-s: 0.8rem;
  --radius-m: 1.6rem;
  --space-xs: clamp(0.7034766944rem, calc(0.2098693155vw + 0.6562560984rem), 0.8333333333rem);
}

/* Base typography reset (ex automatic.css). Measured leak without these:
   ~200 elements/page shift line-height (li 24->23.2, buttons 1.5->normal,
   inputs -> Bricks' 40px, h* 1.2->1.4). ACSS won these fights by loading
   LAST at bare-element specificity (0,0,1); this sheet loads EARLY, so each
   selector is prefixed with `body` -> (0,0,2), which beats the same earlier
   bare rules ACSS used to beat, and still loses to every class-based wn-*
   rule exactly as ACSS did. Values verbatim from ACSS defaults. */
body {
  min-block-size: 100vh;
  line-height: 1.5;
  text-wrap: pretty;
}
body :is(p, li) {
  line-height: 1.5;
}
body :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
  text-wrap: balance;
}
/* NO font-weight here: ACSS declared 700 but LOST it everywhere visible to the
   later theme-style 500 — measured: shipping 700 at (0,0,2) regressed 10+
   headings on the legal page alone. Heading sizes below are ACSS's operative
   fluid scale, verbatim (the final clamp() :root set in automatic.css), so
   unclassed headings (checkout .wn-ck-legend h3, PDP „Despre acest produs”,
   my-account/Woo headings) keep their exact baseline size at every viewport. */
:root {
  --h1: clamp(1.728rem, calc(1.5138055218vw + 1.3873937576rem), 2.6646671666rem);
  --h2: clamp(1.44rem, calc(0.9034345455vw + 1.2367272273rem), 1.999000125rem);
  --h3: clamp(1.2rem, calc(0.4842424242vw + 1.0910454545rem), 1.499625rem);
  --h4: clamp(1rem, calc(0.202020202vw + 0.9545454545rem), 1.125rem);
  --h5: clamp(0.8125rem, calc(0.0508460448vw + 0.8010596399rem), 0.8439609902rem);
  --h6: clamp(0.75rem, calc(-0.1888823839vw + 0.7924985364rem), 0.6331290249rem);
}
body h1 { font-size: var(--h1); }
body h2 { font-size: var(--h2); }
body h3 { font-size: var(--h3); }
body h4 { font-size: var(--h4); }
body h5 { font-size: var(--h5); }
body h6 { font-size: var(--h6); }
body :is(input, button, textarea, select) {
  font: inherit;
}

/* Site-wide focus ring (ex automatic-bricks.css). The :focus reset keeps
   mouse clicks ring-free; keyboard gets the ring. The class is TRIPLED, not
   doubled as ACSS had it: ACSS loaded after wn-checkout.css and won the tie
   against `.wn-ck input.input-text:focus { outline: 0 }` (0,3,1) by ORDER;
   this sheet loads first, so it needs (0,4,1) to keep that same win —
   measured: at (0,3,1) the checkout inputs lose their keyboard ring. */
body.bricks-is-frontend.bricks-is-frontend.bricks-is-frontend :focus {
  outline: none;
  box-shadow: none;
}
body.bricks-is-frontend.bricks-is-frontend.bricks-is-frontend :focus-visible {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
@supports not selector(:focus-visible) {
  body.bricks-is-frontend.bricks-is-frontend.bricks-is-frontend :focus {
    outline-style: solid;
    outline-color: var(--focus-color);
    outline-width: var(--focus-width);
    outline-offset: var(--focus-offset);
  }
}

/* Skip-link (markup emitted by Bricks core). Same geometry as ACSS's version,
   contrast fixed: #FFF on --wn-color-band #01361D = 14.9:1 (ACSS shipped
   #ECF9F2 on #339965 ≈ 2.5:1). Ring #B65317 on the white page = 4.96:1. */
.skip-link {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  transform: translateY(-250%);
  background: var(--wn-color-band);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 20px;
  border: 1.5px solid var(--wn-color-band);
  border-radius: var(--wn-radius);
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

/* Default link colour for anchors no wn-* rule covers — my-account, nav brand
   link, image-card links (ex ACSS `body a:where(...)`, same sphere/values). */
body a:where(:not([class*="btn--"])) {
  color: var(--link-color, #047A52);
  font-weight: var(--link-weight, 400);
  text-decoration: var(--link-decoration, none);
  text-underline-offset: var(--link-underline-offset, auto);
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  body a:where(:not([class*="btn--"])):hover {
    color: var(--link-color-hover, #B65317);
  }
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
  text-decoration: inherit;
  color: currentcolor;
  text-underline-offset: var(--link-underline-offset, auto);
}

/* Reduced-motion kill-switch (ex automatic.css, verbatim) */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── wn foundation: tokens the .ro child style.css does not define ─────────
   wn-foundation-missing-tokens (added 2026-08-29, wellnessist.com port)
   The ported global classes still consume the ACSS-era token names. wellnessist.ro
   defines only --space-xs, --radius-s, --radius-m and --neutral after its ACSS
   removal, so these nine are declared here to keep the design intact. Values are
   the clamp() definitions extracted from the .ro production ACSS output on
   2026-08-28. Canonical copy: 03-projects/website-redesign/theme-files/wn-foundation.css
   NOTE: wellnessist.ro is currently MISSING these too (--space-s and --radius-xs
   are referenced by its own theme styles) - reported to the .ro lane. */
:root {
  --space-s: clamp(0.9377344336rem, calc(0.5046716225vw + 0.8241833186rem), 1.25rem);
  --space-m: clamp(1.25rem, calc(1.0101010101vw + 1.0227272727rem), 1.875rem);
  --space-l: clamp(1.66625rem, calc(1.8525252525vw + 1.2494318182rem), 2.8125rem);
  --radius-xs: 0.4rem;
  --text-s: clamp(0.8125rem, calc(0.0508460448vw + 0.8010596399rem), 0.8439609902rem);
  --text-m: clamp(1rem, calc(0.202020202vw + 0.9545454545rem), 1.125rem);
  --white: #fff;
  --grid-1: repeat(1, minmax(0, 1fr));
  --content-gap: var(--space-m);
}


/* ── wn foundation: link tokens ─────────────────────────────────
   wn-foundation-link-tokens (added 2026-08-29, wellnessist.com)
   The mirrored .ro rule styles bare content links with var(--link-color),
   which nothing defined here: links were falling back to #339965, the RETIRED
   palette green that 00-brain/business-profile.md forbids. Reported by the .ro
   lane and verified independently (1 reference, 0 definitions).
   Hover uses the accent TEXT colour (#B65317, 4.61:1 on light), not the
   dark-background accent. Hardcoded fallbacks in the mirrored rule were also
   repointed to brand values so no failure mode can resurrect the old green. */
:root {
  --link-color: var(--wn-color-brand-primary, #047A52);
  --link-color-hover: var(--wn-color-accent-text, #B65317);
}