/* ==========================================================================
   Wholesome Labs — Base
   Tokens, typography, buttons, forms, focus. Loaded first.
   Colour/typography values come from theme.json; the aliases below just make
   the component sheets readable.
   ========================================================================== */

:root {
  /* Colour aliases (source of truth is theme.json) */
  --wl-ivory:       var(--wp--preset--color--ivory, #F7F3EA);
  --wl-ivory-soft:  var(--wp--preset--color--ivory-soft, #FAF6EF);
  --wl-white:       var(--wp--preset--color--white, #FFFFFF);
  --wl-mist:        var(--wp--preset--color--mist, #EEF1F0);
  --wl-forest:      var(--wp--preset--color--forest, #2E4A3B);
  --wl-forest-deep: var(--wp--preset--color--forest-deep, #1F3B2E);
  --wl-eucalyptus:  var(--wp--preset--color--eucalyptus, #6E8F82);
  --wl-sage:        var(--wp--preset--color--sage, #A8B79A);
  --wl-sage-pale:   var(--wp--preset--color--sage-pale, #D8E0D2);
  --wl-gold:        var(--wp--preset--color--gold, #D4B272);
  --wl-taupe:       var(--wp--preset--color--taupe, #B7A892);
  --wl-warm-beige:  var(--wp--preset--color--warm-beige, #E8DFD1);
  --wl-stone:       var(--wp--preset--color--stone, #D6D0C5);
  --wl-warm-gray:   var(--wp--preset--color--warm-gray, #6F726B);
  --wl-ink:         var(--wp--preset--color--ink, #242A26);

  --wl-sans:  var(--wp--preset--font-family--sans, Montserrat, sans-serif);
  --wl-serif: var(--wp--preset--font-family--serif, 'Cormorant Garamond', Georgia, serif);

  --wl-radius-sm:   4px;
  --wl-radius:      10px;
  --wl-radius-lg:   16px;
  --wl-radius-xl:   22px;
  --wl-radius-pill: 999px;

  --wl-border:       1px solid var(--wl-stone);
  --wl-border-soft:  1px solid rgba(214, 208, 197, 0.55);

  --wl-shadow-soft: 0 1px 2px rgba(36, 42, 38, 0.04), 0 6px 20px -8px rgba(36, 42, 38, 0.10);
  --wl-shadow-lift: 0 2px 4px rgba(36, 42, 38, 0.05), 0 16px 36px -14px rgba(36, 42, 38, 0.18);

  --wl-ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --wl-gutter: clamp(1.25rem, 5vw, 3rem);
  --wl-section: clamp(3.5rem, 7vw, 6.5rem);
  --wl-header-h: 100px;

  /* The header sat on the same ivory as the page, so it only read as a header
     once the scroll shadow appeared. A step down separates it standing still.
     Anything that butts against the header (the cart badge ring) reads this. */
  --wl-header-bg:       #E8DFD1;
  --wl-header-bg-alpha: rgba(232, 223, 209, 0.92);
}

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wl-header-h) + 1.5rem);
}

@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;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  overflow-x: hidden;
}

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

/* An author-level display rule beats the user-agent's [hidden] rule regardless
   of specificity, so `img { display: block }` above was un-hiding elements that
   WooCommerce hides with the attribute. That showed up as a duplicate thumbnail
   in the mini cart. Restore the expected behaviour for every element. */
[hidden] { display: none !important; }

hr { border: 0; border-top: var(--wl-border); }

::selection {
  background: var(--wl-sage-pale);
  color: var(--wl-forest-deep);
}

/* --------------------------------------------------------------------------
   Typography refinements
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { text-wrap: balance; }

p { text-wrap: pretty; }

/* Cormorant runs small and light at UI sizes; nudge optical weight up. */
h1, h2, h3 { font-synthesis-weight: none; }

/* Eyebrow / kicker label — the letterspaced small-caps from the logo lockup.

   13px, up from 11. At 11 the label was legible but effortful: uppercase at
   0.16em tracking spreads the word out while making every glyph read thinner,
   so small type set this way is harder than its size suggests.

   The tracking came down as the size went up. The two work against each other
   — wide spacing at a larger size reads as stretched rather than considered —
   and the gold rule grew with the text so it stays a rule and not a tick. */
.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-family: var(--wl-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wl-eucalyptus);
}

.wl-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--wl-gold);
  flex: none;
}

.wl-eyebrow--centered { justify-content: center; }
.wl-eyebrow--centered::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--wl-gold);
  flex: none;
}

/* Lede paragraph under a section heading. */
.wl-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--wl-warm-gray);
  max-width: 62ch;
}

.wl-muted { color: var(--wl-warm-gray); }

/* Small print used for disclaimers and microcopy. */
.wl-fineprint {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--wl-warm-gray);
}

/* Monospaced data values — lot numbers, SKUs, test dates. */
.wl-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--wl-ink);
}

/* The ascending dot triad from the brand mark, used as a quiet divider. */
.wl-dots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 14px;
  margin: 0 auto;
}

.wl-dots span {
  display: block;
  border-radius: 50%;
  background: var(--wl-gold);
  opacity: 0.9;
}

.wl-dots span:nth-child(1) { width: 4px; height: 4px; }
.wl-dots span:nth-child(2) { width: 6px; height: 6px; }
.wl-dots span:nth-child(3) { width: 9px; height: 9px; }

/* --------------------------------------------------------------------------
   Focus — visible, branded, never removed
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wl-eucalyptus);
  outline-offset: 3px;
  border-radius: var(--wl-radius-sm);
}

/* Skip link */
.wl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.85rem 1.5rem;
  background: var(--wl-forest);
  color: var(--wl-ivory);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 var(--wl-radius) 0;
  text-decoration: none;
}

.wl-skip-link:focus {
  left: 0;
}

/* Visually hidden but available to screen readers. */
.wl-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons — core/button plus WooCommerce's .button share these rules
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.wl-btn,
button.wl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--wl-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--wl-radius-pill);
  border: 1px solid transparent;
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.22s var(--wl-ease),
              border-color 0.22s var(--wl-ease),
              color 0.22s var(--wl-ease),
              transform 0.22s var(--wl-ease),
              box-shadow 0.22s var(--wl-ease);
}

/* wl_icon() emits a viewBox-only SVG, which fills its flex container unless
   it is given an explicit size. Without this, "View documentation" wrapped
   onto three lines around a giant icon. */
.wp-block-button__link svg,
.wl-btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.wl-btn {
  white-space: nowrap;
}

.wp-block-button__link:hover,
.wl-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--wl-shadow-soft);
}

.wp-block-button__link:active,
.wl-btn:active { transform: translateY(0); }

/* Primary */
.wl-btn--primary {
  background: var(--wl-forest);
  border-color: var(--wl-forest);
  color: var(--wl-ivory);
}

.wl-btn--primary:hover {
  background: var(--wl-forest-deep);
  border-color: var(--wl-forest-deep);
  color: var(--wl-ivory);
}

/* Secondary — outline. Also the style core applies to "outline" buttons. */
.wl-btn--secondary,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  border-color: var(--wl-forest);
  color: var(--wl-forest);
}

.wl-btn--secondary:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wl-forest);
  border-color: var(--wl-forest);
  color: var(--wl-ivory);
}

/* Outline button sitting on a dark forest panel. */
.has-forest-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-forest-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.wl-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: rgba(247, 243, 234, 0.45);
  color: var(--wl-ivory);
}

.has-forest-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-forest-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wl-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wl-ivory);
  border-color: var(--wl-ivory);
  color: var(--wl-forest-deep);
}

/* Quiet text button with a moving underline. */
.wl-btn--quiet {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--wl-forest);
  text-decoration: none;
  position: relative;
}

.wl-btn--quiet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.28s var(--wl-ease);
}

.wl-btn--quiet:hover {
  transform: none;
  box-shadow: none;
  color: var(--wl-forest-deep);
}

.wl-btn--quiet:hover::after { transform: scaleX(0.35); }

.wl-btn--small { padding: 0.6rem 1.15rem; font-size: 0.8125rem; }
.wl-btn--full  { width: 100%; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  font-family: var(--wl-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--wl-ink);
  background: var(--wl-white);
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s var(--wl-ease), box-shadow 0.2s var(--wl-ease);
  appearance: none;
}

textarea { min-height: 8rem; resize: vertical; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236F726B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

input::placeholder,
textarea::placeholder { color: var(--wl-taupe); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--wl-eucalyptus);
  box-shadow: 0 0 0 3px rgba(110, 143, 130, 0.16);
  outline: none;
}

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wl-ink);
  margin-bottom: 0.4rem;
}

/* Checkbox and radio — keep the native control, restyle the accent. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--wl-forest);
  cursor: pointer;
  flex: none;
}

fieldset {
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}

legend {
  padding: 0 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wl-warm-gray);
}

/* Search form (core/search block and WordPress default). */
.wp-block-search__inside-wrapper {
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-white);
  padding: 0.25rem 0.25rem 0.25rem 1.15rem;
  overflow: hidden;
}

.wp-block-search__input {
  border: 0 !important;
  background: transparent !important;
  padding: 0.55rem 0 !important;
  border-radius: 0 !important;
}

.wp-block-search__input:focus { box-shadow: none !important; }

.wp-block-search__button {
  border-radius: var(--wl-radius-pill) !important;
  background: var(--wl-forest);
  color: var(--wl-ivory);
  border: 0;
  padding: 0.6rem 1.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.wp-block-search__button:hover { background: var(--wl-forest-deep); }

.wp-block-search__button.has-icon { padding: 0.55rem 0.85rem; }