/*
Theme Name: TRE House Replica
Theme URI: https://trehouse.local
Author: In-house
Description: Classic WordPress + WooCommerce theme replicating trehouse.com (Shopify). Tokens are measured from the source's own --scheme-* custom properties, not eyeballed.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: trehouse
*/

/* =============================================================================
   DESIGN TOKENS — MEASURED FROM SOURCE, NOT CHOSEN
   Source exposes --scheme-* custom properties on :root. Every value below was
   read out of scrape/source-cdp/design-tokens.json at 1440/1024/390.
   Provenance matters: if you change one of these, say where the new value
   came from. A token commented "from source" that was actually guessed is
   worse than a wrong value, because the next person trusts it.
   ============================================================================= */
:root {
  /* --- brand / scheme (verbatim from --scheme-*) --- */
  --th-bg:                #ffffff;
  --th-text:              #212529;   /* --scheme-text-color       */
  --th-heading:           #000000;   /* --scheme-headings-color   */
  --th-border:            #eeefed;   /* --scheme-borders-color    */
  --th-highlight:         #000000;   /* --scheme-highlights       */

  /* primary CTA — the brand magenta. RADIUS IS 0; do not round it. */
  --th-btn-bg:            #b8006d;   /* --scheme-buttons-background */
  --th-btn-label:         #ffffff;
  --th-btn-border:        #b8006d;
  --th-btn-bg-hover:      #ffffff;   /* CTA INVERTS on hover */
  --th-btn-label-hover:   #b8006d;
  --th-btn-border-hover:  #b8006d;

  /* secondary button */
  --th-btn2-label:        #212529;
  --th-btn2-border:       #212529;
  --th-btn2-bg-hover:     #212529;
  --th-btn2-label-hover:  #ffffff;

  /* fields */
  --th-field-bg:          #ffffff;
  --th-field-border:      #000000;
  --th-field-label:       #000000;

  /* state */
  --th-error:             #d50000;   /* --scheme-errors-color  */
  --th-success:           #00ae42;   /* --scheme-success-color */

  /* badges */
  --th-badge-bg:          #f4f4f4;
  --th-badge-border:      #f4f4f4;
  --th-badge-label:       #212529;

  /* carousel */
  --th-dot-off:           #cccccc;
  --th-dot-on:            #666666;
  --th-arrow-bg:          #ffffff;
  --th-arrow-border:      #000000;
  --th-arrow-label:       #000000;

  /* measured greys not exposed as scheme vars */
  --th-muted:             #6b6f76;   /* rgb(107,111,118) */
  --th-footer-heading:    #b2b2b2;   /* rgb(178,178,178) — footer column headings */

  /* --- type ---
     Roboto dominates measured usage 193:1 over Montserrat. Montserrat IS
     loaded by the source but barely used; we load both and keep Roboto as
     the body face until a component proves otherwise. There is NO weight 500
     anywhere in the measured set: 400 / 600 / 700 only. */
  --th-font:              Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --th-font-alt:          Montserrat, var(--th-font);

  /* ⚠ SIZES ARE IN REM, AND html IS 62.5% (below), SO 1rem = 10px.
     That is the SOURCE's own mechanism, not a stylistic choice:
       html{font-size:62.5%}  ·  body{font-size:calc(1.6rem * var(--font-body-scale))}
     Using rem means the type scale respects a reader's browser font-size
     setting exactly as the source does. Hard-coded px would look identical
     in a diff and quietly break that.

     The scale STEPS at two breakpoints (measured across 12 widths with
     tools/sweep-widths.mjs — they are steps, not a fluid ramp):
       <= 38em (608px)   and   <= 48em (768px)
     Overrides live at the bottom of this block. Change a size HERE and it
     cascades everywhere; never patch a font-size at the component level. */
  --th-fs-base:           1.6rem;   /* 16px */
  --th-lh-base:           1.4;      /* unitless so it scales with the step */
  --th-fs-h2:             3.2rem;   /* 32px */
  --th-lh-h2:             1;        /* tight, measured */
  --th-fs-h4:             2.4rem;   /* 24px */
  --th-lh-h4:             1;
  --th-fs-sm:             1.4rem;   /* 14px */
  --th-fs-xs:             1.2rem;   /* 12px */
  --th-fs-announce:       1.4rem;   /* 14px */
  --th-lh-announce:       1.2;
  --th-fs-card-title:     1.6rem;   /* 16px */
  --th-lh-card-title:     1.2;
  --th-fs-card-cta:       1.808rem; /* 18.08px — measured on a.btn */
  --th-fs-badge:          1.2rem;   /* 12px */
  --th-fs-collection-h1:  4rem;     /* 40px — collection hero */
  --th-fs-pdp-title:      2.064rem; /* 20.64px — the source's h6-class PDP title */
  --th-fw-nav:            700;      /* desktop nav links are BOLD */
  --th-fw-normal:         400;
  --th-fw-semi:           600;
  --th-fw-bold:           700;

  /* --- geometry --- */
  --th-container:         1300px;   /* --container-width 130rem */
  --th-gutter:            25px;
  --th-header-h:          85px;     /* measured 84.7969px */
  --th-announce-h:        37px;     /* measured 36.7969px */
  --th-radius-0:          0;        /* primary CTA + age gate = square */
  --th-radius-sm:         5px;
  --th-radius-md:         10px;
  --th-radius-pill:       50%;
  --th-shadow-sm:         0 0 5px rgba(0, 0, 0, .2);
  --th-shadow-md:         0 0 20px rgba(0, 0, 0, .1);

  /* --- motion (from --animation-speed-*) --- */
  --th-speed-fast:        .2s;
  --th-speed-med:         .35s;
  --th-speed-slow:        .5s;

  /* --- age gate (app-owned, NOT part of the scheme) --- */
  --th-age-accent:        #fe4d01;  /* measured on the YES button */
  --th-age-decline:       #a0a0a0;
}

/* -----------------------------------------------------------------------------
   RESPONSIVE TYPE STEPS — the source's own breakpoints, verified by measuring
   12 viewport widths (360..1440). Every value below was READ OFF THE SOURCE,
   not interpolated.

   <= 48em (768px): h2 32->27, footer h4 24->23, nav links lose their bold
   <= 38em (608px): the whole scale steps down again
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
  :root {
    --th-fs-h2:   2.7rem;   /* 27px */
    --th-fs-h4:   2.3rem;   /* 23px */
    --th-fw-nav:  400;      /* measured: nav links are NOT bold below 48em */
  }
}

@media (max-width: 38em) {
  :root {
    --th-fs-base:       1.4rem;   /* 14px */
    --th-fs-h2:         2.4rem;   /* 24px */
    --th-fs-h4:         2.0rem;   /* 20px */
    --th-fs-announce:   1.2rem;   /* 12px */
    --th-fs-card-title: 1.4rem;   /* 14px */
    --th-fs-card-cta:   1.6rem;   /* 16px */
    --th-fs-badge:      1.0rem;   /* 10px */
    --th-fs-sm:         1.4rem;
    --th-fs-collection-h1: 3.2rem;  /* 32px — measured at 390 */
    --th-fs-pdp-title:     1.8rem;  /* 18px — measured at 390 */
  }
}

/* =============================================================================
   RESET / BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* 62.5% makes 1rem = 10px, matching the source exactly. Every rem value in
   this theme assumes it. */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--th-bg);
  color: var(--th-text);
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
  line-height: var(--th-lh-base);
  font-weight: var(--th-fw-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--th-heading);
  font-family: var(--th-font);
  font-weight: var(--th-fw-bold);
}
h2 { font-size: var(--th-fs-h2); line-height: var(--th-lh-h2); }
h4 { font-size: var(--th-fs-h4); line-height: var(--th-lh-h4); }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--th-btn-bg); outline-offset: 2px; }

/* =============================================================================
   LAYOUT
   ============================================================================= */
.th-container {
  width: 100%;
  max-width: var(--th-container);
  margin-inline: auto;
  padding-inline: var(--th-gutter);
}

.th-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.th-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #000; color: #fff; padding: 12px 20px; font-weight: var(--th-fw-bold);
}
.th-skip-link:focus { left: 0; }

/* =============================================================================
   BUTTONS
   The source's primary CTA is SQUARE, magenta, white label, and INVERTS on
   hover (bg->white, label->magenta, border stays magenta).
   ============================================================================= */
.th-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--th-btn-bg);
  color: var(--th-btn-label);
  border: 1px solid var(--th-btn-border);
  border-radius: var(--th-radius-0);
  font-family: var(--th-font);
  font-weight: var(--th-fw-bold);
  font-size: 15.68px;
  line-height: 1;
  padding: 15.68px 34.5px;
  text-align: center;
  transition: background var(--th-speed-fast), color var(--th-speed-fast);
}
.th-btn:hover {
  background: var(--th-btn-bg-hover);
  color: var(--th-btn-label-hover);
  border-color: var(--th-btn-border-hover);
  text-decoration: none;
}

.th-btn--secondary {
  background: transparent;
  color: var(--th-btn2-label);
  border-color: var(--th-btn2-border);
}
.th-btn--secondary:hover {
  background: var(--th-btn2-bg-hover);
  color: var(--th-btn2-label-hover);
}

/* =============================================================================
   WOOCOMMERCE OVERRIDES — see LAW in STANDARDS.md
   Woo's own skin outranks a natural override. `.woocommerce:where(body:not(...))
   a.button` computes at (0,2,1) because :where() contributes nothing, so a bare
   class loses and every CTA silently repaints as Woo's purple pill (#7f54b3).
   These live in the SITEWIDE stylesheet on purpose: the shared card also renders
   on the PDP related row and in cart cross-sells, and /cart/ does not load shop CSS.
   ============================================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--th-btn-bg);
  color: var(--th-btn-label);
  border: 1px solid var(--th-btn-border);
  border-radius: var(--th-radius-0);
  font-family: var(--th-font);
  font-weight: var(--th-fw-bold);
  text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--th-btn-bg-hover);
  color: var(--th-btn-label-hover);
  border-color: var(--th-btn-border-hover);
}

/* ul.products ships a ::before/::after float clearfix. Inside a CSS grid those
   become REAL GRID ITEMS, eat the first cell and shift the whole catalogue one
   slot right at every breakpoint. Card COUNT stays correct, so no count-based
   test catches it. Assert firstCell.offsetLeft === 0. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}