/* ==========================================================================
   VitaRx — brand layer (tokens, type, wordmark) + WordPress integration.
   Loaded after base.css. Palette is deliberately distinct from PrimeHora
   (navy/gold serif): evergreen ink + persimmon accent + grotesque display.
   All values tagged [VERIFY] until VitaRx supplies brand assets (D5).
   ========================================================================== */

:root {
  --vx-ink: #0F2E2B;
  --vx-ink-strong: #0A201E;
  --vx-muted: #5B6B68;
  --vx-accent: #E2653A;
  --vx-accent-dark: #B24A24;
  --vx-accent-soft: #F6CDB9;
  --vx-accent-tint: #FCEEE6;
  --vx-clay: #D0582C;
  --vx-clay-soft: #FBE3D6;
  --vx-bg: #FAFAF7;
  --vx-bg-alt: #F1F3EE;
  --vx-bg-cool: #EAF2EF;
  --vx-bg-deep: #0F2E2B;
  --vx-border: #E3E6DF;
  --vx-border-cool: #D6E3DF;

  --vx-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vx-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --vx-base: 17px;
  --vx-scale: 1;
  --vx-width: 1200px;
  --vx-radius: 14px;
  --vx-eyebrow-transform: uppercase;
}

/* Grotesque display: heavier, tighter, no serif optical axes. */
h1, h2, h3, h4, h5 { font-weight: 700; font-variation-settings: normal; letter-spacing: -0.035em; }
h3 { font-variation-settings: normal; }

/* Headline accent: a persimmon highlighter stroke instead of PrimeHora's italic. */
.hl {
  font-style: normal;
  font-variation-settings: normal;
  color: var(--vx-ink);
  background: linear-gradient(transparent 62%, var(--vx-accent-soft) 62%, var(--vx-accent-soft) 92%, transparent 92%);
  padding-inline: .06em;
}
.section--deep .hl, .s-cta .hl { color: #FAFAF7; background: linear-gradient(transparent 64%, rgba(226, 101, 58, .55) 64%, rgba(226, 101, 58, .55) 92%, transparent 92%); }

/* Wordmark (placeholder until D5). */
.vx-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--vx-ink); }
.vx-logo img { width: 34px; height: 34px; }
.vx-logo__word { font-family: var(--vx-font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.045em; line-height: 1; }
.vx-logo__word b { color: var(--vx-accent-dark); font-weight: 800; }
.s-footer .vx-logo { color: #FAFAF7; }
.s-footer .vx-logo__word b { color: var(--vx-accent); }

/* Buttons: persimmon primary CTA on light surfaces. */
.btn--accent { --btn-bg: var(--vx-accent); --btn-bd: var(--vx-accent); --btn-fg: #FFFFFF; }
.btn--accent:hover { --btn-bg: var(--vx-accent-dark); --btn-bd: var(--vx-accent-dark); }

/* ---- WordPress integration ------------------------------------------------ */
/* Sticky header: the template part wrapper is the sticky element. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
/* Kill block-layout gaps between our full-bleed sections. */
.wp-site-blocks > *, .wp-block-post-content > *, .entry-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-site-blocks { padding: 0 !important; }
main.vx-main { display: block; }
/* WordPress adds underline to links globally; our components manage their own. */
.s-header a, .s-footer a, .btn, .textlink, .vx-logo { text-decoration: none; }

/* ---- Components added for VitaRx ------------------------------------------ */
.vx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.vx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .vx-cards, .vx-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vx-cards, .vx-cards--3, .vx-cards--2 { grid-template-columns: minmax(0, 1fr); } }
.vx-cards .card h3 { font-size: 1.2rem; margin: 0; }
.vx-cards .card p { color: var(--vx-muted); font-size: .96rem; margin: 0; }

.vx-placeholder {
  border: 1.5px dashed color-mix(in srgb, var(--vx-accent) 55%, #fff);
  background: var(--vx-accent-tint);
}
.vx-flag {
  display: inline-block; font-family: var(--vx-font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8E3B1B; background: var(--vx-clay-soft); border-radius: 6px; padding: .2rem .45rem;
}
.vx-isi { font-size: .84rem; color: var(--vx-muted); border-top: 1px solid var(--vx-border); padding-top: .8rem; margin-top: .2rem; }

/* BMI tool (client-side only; nothing is submitted or stored). */
.vx-bmi .form-grid { align-items: end; }
.vx-bmi__out { margin-top: 1.1rem; padding: 1rem 1.15rem; border-radius: 12px; background: var(--vx-bg-alt); min-height: 3.2rem; }
.vx-bmi__num { font-family: var(--vx-font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.04em; }

/* Stubbed forms in the draft. */
.vx-draft-note {
  font-family: var(--vx-font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8E3B1B; background: var(--vx-clay-soft); border-radius: 10px; padding: .6rem .8rem; margin-top: .9rem;
}
button[disabled].btn { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Review notes. */
.vx-notes table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 2rem; font-size: .95rem; }
.vx-notes th, .vx-notes td { border: 1px solid var(--vx-border); padding: .7rem .85rem; text-align: left; vertical-align: top; }
.vx-notes th { background: var(--vx-bg-alt); font-weight: 600; }

/* Footer: the mark sits on the evergreen band, so give it a light ring. */
.s-footer .vx-logo img { border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(250, 250, 247, .35); }

/* ---- Treatment catalog (Ro-style) ------------------------------------------ */
.vx-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, .5rem + 1vw, 1.4rem); }
@media (max-width: 960px) { .vx-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vx-catgrid { grid-template-columns: minmax(0, 1fr); } }
.vx-cat {
  display: flex; flex-direction: column; gap: .55rem; text-decoration: none; color: var(--vx-ink);
  background: #fff; border: 1px solid var(--vx-border); border-radius: 18px; padding: 1.3rem 1.35rem 1.2rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.vx-cat:hover { border-color: color-mix(in srgb, var(--vx-accent) 60%, var(--vx-border)); box-shadow: 0 18px 38px -28px rgba(15, 46, 43, .5); transform: translateY(-2px); }
.vx-cat h3 { font-size: 1.15rem; margin: .35rem 0 0; }
.vx-cat p { margin: 0; color: var(--vx-muted); font-size: .92rem; }
.vx-cat__meta { margin-top: auto; padding-top: .6rem; font-family: var(--vx-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-accent-dark); }
.vx-cat.is-off { background: var(--vx-bg-alt); border-style: dashed; }
.vx-cat.is-off .icon-badge { background: #E3E6DF; color: var(--vx-muted); }
.vx-cat.is-off .vx-cat__meta { color: var(--vx-muted); }

.vx-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.6rem); }
@media (max-width: 960px) { .vx-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vx-products { grid-template-columns: minmax(0, 1fr); } }
.vx-product { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vx-border); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--vx-ink); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
a.vx-product:hover { border-color: color-mix(in srgb, var(--vx-accent) 60%, var(--vx-border)); box-shadow: 0 22px 44px -30px rgba(15, 46, 43, .55); transform: translateY(-2px); }
.vx-product__art { aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative; background: radial-gradient(120% 90% at 20% 10%, #FCEEE6 0%, #F6CDB9 55%, #EFA985 100%); color: var(--vx-ink); }
.vx-product__art--green { background: radial-gradient(120% 90% at 20% 10%, #EAF2EF 0%, #CFE0DA 55%, #9DB5AD 100%); }
.vx-product__art--sand { background: radial-gradient(120% 90% at 20% 10%, #FAFAF7 0%, #F1F3EE 50%, #D6E3DF 100%); }
.vx-product__art svg { width: 64px; height: 64px; opacity: .85; }
.vx-product__art .pill { position: absolute; left: 1rem; top: 1rem; background: rgba(255,255,255,.85); }
.vx-product__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.vx-product__body h3 { margin: 0; font-size: 1.3rem; }
.vx-product__type { font-family: var(--vx-font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--vx-muted); }
.vx-product__body p { margin: 0; color: var(--vx-muted); font-size: .94rem; }
.vx-product__foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* Product detail */
.vx-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .vx-pdp { grid-template-columns: minmax(0, 1fr); } }
.vx-pdp__art { border-radius: 24px; aspect-ratio: 1 / 1; }
.vx-pdp__art svg { width: 120px; height: 120px; }
.vx-facts { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--vx-border); margin: 1.4rem 0; }
.vx-facts li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--vx-border); font-size: .95rem; }
.vx-facts b { font-family: var(--vx-font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--vx-muted); padding-top: .2rem; }
.vx-isi-box { border: 1px solid var(--vx-border); border-left: 4px solid var(--vx-ink); border-radius: 0 14px 14px 0; background: #fff; padding: 1.3rem 1.5rem; }
.vx-isi-box h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.vx-isi-box p { font-size: .92rem; color: var(--vx-muted); }

/* Anchor targets clear the sticky header (e.g. /treatments/#weight). */
section[id] { scroll-margin-top: 96px; }