/* ==========================================================================
   TERRAVANA — BASE
   Font loading, reset, root typography, and layout primitives.
   Depends on tokens.css. Consumes tokens only; declares no literal values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted, Latin subset
   No Google Fonts CDN call: it removes a third-party round trip from the LCP
   path and sidesteps the GDPR question about leaking visitor IPs.
   Six files, ~110KB total. The two used above the fold are preloaded in
   inc/enqueue.php; the rest resolve during normal parsing.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/*
 * Poppins Bold. Added when the display face moved from Cormorant to Poppins:
 * --tv-fw-display-bold is 700, and with only 400/500/600 on disk every H1 was
 * being synthesised by the browser rather than drawn from a real weight.
 */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Poppins Italic. The serif shipped a true italic; Poppins did not, so the
 * pulled quotations were being slanted by the browser rather than drawn — a
 * mechanical oblique, not a real italic. One 400 face covers every use:
 * blockquote, the testimonial quotes, and inline <em>.
 */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Cormorant Garamond is retired.
 *
 * The site is set entirely in Poppins now, so nothing resolves to the serif and
 * declaring it would only invite it back by accident. The two woff2 files stay
 * in assets/fonts/ so this is reversible, but no rule points at them and a
 * browser therefore never requests either one.
 */

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header must not cover the target of an in-page anchor. */
  scroll-padding-top: calc(var(--tv-header-h-scrolled) + var(--tv-space-5));
}

body {
  margin: 0;
  background-color: var(--tv-bg);
  color: var(--tv-text);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-body);
  font-weight: var(--tv-fw-regular);
  line-height: var(--tv-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /*
   * Long unbroken strings break a narrow layout, and there was no rule for it
   * anywhere in the theme. An email address, a URL in a blog post, or a long
   * compound word will otherwise set a minimum width the column cannot meet and
   * push the page sideways.
   *
   * break-word rather than anywhere: it only breaks a word that has nowhere
   * else to go, instead of breaking mid-word whenever a line is tight.
   */
  overflow-wrap: break-word;
}

/* Locks scroll behind the mobile nav drawer. */
body.tv-nav-open { overflow: hidden; }

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

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

/*
 * BUTTON RESET — matched to Hello Elementor's selector shape.
 *
 * The parent theme's reset.css styles buttons around #C36 (a pink):
 *
 *     [type=button],[type=reset],[type=submit],button {
 *       border: 1px solid #c36; color: #c36; border-radius: 3px;
 *       padding: .5rem 1rem; transition: all .3s;
 *     }
 *     [type=button]:hover, … , button:hover {
 *       background-color: #c36; color: #fff;
 *     }
 *
 * Note the ATTRIBUTE selectors. Every button we author carries type="button",
 * so `[type=button]` matches at (0,1,0) and `[type=button]:hover` at (0,2,0) —
 * both of which beat a bare `button` (0,0,1) / `button:hover` (0,1,1) reset.
 * That is why a pink border survived on the nav dropdown toggle, the FAQ
 * accordion triggers, the compare handle and the slider dots.
 *
 * Matching Hello's selector shape here neutralises it at equal specificity,
 * winning on load order. And because this is base.css — which loads BEFORE
 * components.css — every real component rule still overrides it. Putting this
 * in wp-overrides.css instead would have stripped the borders off .tv-filter-btn
 * and .tv-slider__btn.
 */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: normal;
  transition: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
  background: none;
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY

   One family throughout: Poppins, at every size and in every role.

     Poppins   .tv-display, h1, .tv-headline, blockquote   display + statements
               h2, h3                                      structural subheads
               body, .tv-lead, .tv-eyebrow, .tv-caption    running text and UI

   This replaces the previous serif/sans split. The brand deck pairs a Cormorant
   Garamond H1 with Poppins elsewhere, and p. 5 calls the serif the "elegant
   serif for premium brand statements" — the site was moved to a single family
   on request, so that pairing no longer applies. If the deck is reinstated,
   --tv-font-display in tokens.css is the only value to change back, and both
   cormorant woff2 files are still in assets/fonts/.

   Hierarchy is now carried by weight and size alone rather than by a contrast
   of face, which is why --tv-fw-display-bold has a real 700 file behind it:
   without the serif, a synthesised bold on the H1 would be the only thing
   separating it from an h2.

   Sizes come from the guideline verbatim; see the scale block in tokens.css.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--tv-space-4);
  color: var(--tv-heading);
  text-wrap: balance;
}

h1, .tv-h1 {
  font-family: var(--tv-font-display);
  font-weight: var(--tv-fw-display-bold);
  font-size: var(--tv-fs-h1);
  line-height: var(--tv-lh-display);
  letter-spacing: var(--tv-ls-display);
}

/* The hero step. Used once per page at most. It shares h1's 56px ceiling —
   the guideline defines a single H1 size — and differs only in holding a
   larger minimum, so the hero keeps its weight on a phone. */
.tv-display {
  font-family: var(--tv-font-display);
  font-weight: var(--tv-fw-display-bold);
  font-size: var(--tv-fs-display);
  line-height: var(--tv-lh-display);
  letter-spacing: var(--tv-ls-display);
}

/* Serif section headline — the mockup's "Rooted in nature." treatment. */
.tv-headline {
  font-family: var(--tv-font-display);
  font-weight: var(--tv-fw-display);
  font-size: var(--tv-fs-h2);
  line-height: var(--tv-lh-heading);
  letter-spacing: var(--tv-ls-heading);
  color: var(--tv-heading);
}

h2, .tv-h2 {
  font-family: var(--tv-font-body);
  font-weight: var(--tv-fw-semibold);
  font-size: var(--tv-fs-h2);
  line-height: var(--tv-lh-heading);
  letter-spacing: var(--tv-ls-heading);
}

h3, .tv-h3 {
  font-family: var(--tv-font-body);
  font-weight: var(--tv-fw-medium);
  font-size: var(--tv-fs-h3);
  line-height: var(--tv-lh-snug);
}

/* The card / sub-item step. See the note on --tv-fs-h4 in tokens.css. */
h4, .tv-h4 {
  font-family: var(--tv-font-body);
  font-weight: var(--tv-fw-medium);
  font-size: var(--tv-fs-h4);
  line-height: var(--tv-lh-snug);
}

h5, h6 {
  font-family: var(--tv-font-body);
  font-weight: var(--tv-fw-semibold);
  font-size: var(--tv-fs-body);
  line-height: var(--tv-lh-snug);
}

p {
  margin: 0 0 var(--tv-space-4);
  max-width: var(--tv-measure);
}

p:last-child { margin-bottom: 0; }

.tv-lead {
  font-size: var(--tv-fs-lead);
  font-weight: var(--tv-fw-regular);
  line-height: 1.65;
  color: var(--tv-muted);
}

/* Uppercase overline. Always deep gold, always tracked — the accent proper is
   2.16:1 on ivory and this is text. */
.tv-eyebrow {
  display: inline-block;
  margin: 0 0 var(--tv-space-4);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-eyebrow);
  font-weight: var(--tv-fw-medium);
  letter-spacing: var(--tv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tv-gold-deep);
}

.tv-caption {
  font-size: var(--tv-fs-caption);
  color: var(--tv-muted);
}

a {
  color: var(--tv-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tv-dur-fast) var(--tv-ease);
}
a:hover { color: var(--tv-link-hover); }

strong, b { font-weight: var(--tv-fw-semibold); color: var(--tv-heading); }
em, i     { font-style: italic; }

blockquote {
  margin: var(--tv-space-6) 0;
  padding-left: var(--tv-space-5);
  border-left: 2px solid var(--tv-gold);
  font-family: var(--tv-font-display);
  font-size: var(--tv-fs-h3);
  font-style: italic;
  line-height: var(--tv-lh-snug);
  color: var(--tv-heading);
}

hr {
  height: 1px;
  margin: var(--tv-space-7) 0;
  border: 0;
  background-color: var(--tv-rule);
}

ul, ol { margin: 0 0 var(--tv-space-4); padding-left: var(--tv-space-5); }
li { margin-bottom: var(--tv-space-2); }

::selection {
  background-color: var(--tv-gold-wash);
  color: var(--tv-heading);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.tv-container {
  width: 100%;
  max-width: var(--tv-container);
  margin-inline: auto;
  padding-inline: var(--tv-gutter);
}

.tv-container--narrow { max-width: var(--tv-container-narrow); }

.tv-section {
  position: relative;
  padding-block: var(--tv-section-y);
}

.tv-section--tight { padding-block: var(--tv-section-y-tight); }
.tv-section--flush-top    { padding-top: 0; }
.tv-section--flush-bottom { padding-bottom: 0; }

/* Section header block — eyebrow + headline + lead, used by most sections. */
.tv-section-head { margin-bottom: var(--tv-space-7); }
.tv-section-head--center {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}
.tv-section-head--center p { margin-inline: auto; }

.tv-grid { display: grid; gap: var(--tv-grid-gap); }
.tv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .tv-grid--3,
  .tv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tv-grid--2,
  .tv-grid--3,
  .tv-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.tv-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;
}

.tv-skip-link {
  position: absolute;
  top: 0;
  left: var(--tv-space-4);
  z-index: var(--tv-z-toast);
  padding: var(--tv-space-3) var(--tv-space-5);
  background-color: var(--tv-forest);
  color: var(--tv-on-dark);
  font-size: var(--tv-fs-body);
  font-weight: var(--tv-fw-medium);
  text-decoration: none;
  border-radius: 0 0 var(--tv-radius-sm) var(--tv-radius-sm);
  transform: translateY(-110%);
  transition: transform var(--tv-dur-fast) var(--tv-ease);
}
.tv-skip-link:focus {
  transform: translateY(0);
  color: var(--tv-on-dark);
}

:focus-visible {
  outline: 2px solid var(--tv-focus);
  outline-offset: 2px;
  border-radius: var(--tv-radius-xs);
}

/* Only suppress the default ring where a custom focus style is provided. */
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   6. SCROLL REVEAL
   Opt-in per element via data-tv-reveal. A single IntersectionObserver in
   site.js adds .is-revealed. Elements stay visible if JS never runs.
   -------------------------------------------------------------------------- */

[data-tv-reveal] {
  opacity: 0;
  transform: translateY(var(--tv-reveal-shift));
  transition:
    opacity   var(--tv-dur-slow) var(--tv-ease),
    transform var(--tv-dur-slow) var(--tv-ease);
  will-change: opacity, transform;
}

[data-tv-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children — index set by site.js as --tv-i. */
[data-tv-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--tv-reveal-shift));
  transition:
    opacity   var(--tv-dur-slow) var(--tv-ease),
    transform var(--tv-dur-slow) var(--tv-ease);
  transition-delay: calc(var(--tv-i, 0) * 80ms);
}
[data-tv-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* No-JS and reduced-motion both fall back to fully visible, never hidden. */
.no-js [data-tv-reveal],
.no-js [data-tv-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}

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

  [data-tv-reveal],
  [data-tv-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }
}