/*
 * Parent overrides: WoodMart defaults the design does not want. Everything here
 * is specific to a WoodMart, WooCommerce or core-block selector; the shop's own
 * components live in base.css and the per-screen sheets.
 *
 * WoodMart's Theme Settings (applied by scripts/shop/configure.php) generate a
 * stylesheet that prints after this one and defines its variables on :root.
 * Where a setting cannot express the design, the variable is redefined on body
 * instead: an element's own custom property beats the one it would inherit,
 * whatever the source order.
 */

/* --- Variables the settings cannot express -------------------------------- */
body {
  --wd-brd-radius: 0;
  --wd-main-bgcolor: var(--tt-cream);
  --wd-text-line-height: var(--tt-lh-body);
  --wd-entities-title-color-hover: var(--tt-royal);

  --btn-default-brd-radius: var(--tt-radius-pill);
  --btn-default-color: var(--tt-cream);
  --btn-default-color-hover: var(--tt-cream);
  --btn-default-height: var(--tt-button-height);
  --btn-accented-brd-radius: var(--tt-radius-pill);
  --btn-accented-color: var(--tt-cream);
  --btn-accented-color-hover: var(--tt-cream);
  --btn-accented-height: var(--tt-button-height);

  --wd-form-brd-radius: var(--tt-radius-input);
  --wd-form-brd-width: var(--tt-hairline);
  --wd-form-height: var(--tt-input-height);

  /* Parent notices use white text on pale yellow/green by default. */
  --notices-success-bg: var(--tt-forest-3);
  --notices-success-color: var(--tt-cream);
  --notices-warning-bg: var(--tt-error-fill);
  --notices-warning-color: var(--tt-ink);

  /* The content container is the 1400 grid plus the section gutters. */
  --wd-container-w: calc(var(--tt-container) + 2 * var(--tt-section-x));
}

/* --- Page ------------------------------------------------------------------ */
/* The main site's fluid root: 17px, growing to 19px with the viewport, so the
 * rem scale in tokens.css lands on the same pixels as little-my. */
html {
  font-size: clamp(1.0625rem, 0.9018rem + 0.1786vw, 1.1875rem);
}

body {
  background: var(--tt-cream);
  color: var(--tt-ink);
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-body);
  line-height: var(--tt-lh-body);
  -webkit-font-smoothing: antialiased;
}

.container {
  padding-inline: var(--tt-section-x);
}

p {
  color: var(--tt-ink-2);
}

a {
  transition: color var(--tt-motion-chip) var(--tt-ease);
}

/* --- Headings ---------------------------------------------------------------
 * Cormorant 500, balanced, with the italic accent convention of the main site:
 * an <em> inside any heading is the accent, royal on cream and sage on green.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.wd-entities-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--tt-display);
  font-weight: 500;
  color: var(--tt-ink);
  text-transform: none;
  text-wrap: balance;
}

h1 {
  font-size: var(--tt-size-display-page);
  line-height: 1;
  letter-spacing: var(--tt-tracking-display);
}

h2 {
  font-size: var(--tt-size-title);
  line-height: var(--tt-lh-tight);
}

h3 {
  font-size: var(--tt-size-card-title);
  line-height: 1;
}

h4 {
  font-size: var(--tt-size-card-title-s);
  line-height: 1.1;
}

h5,
h6 {
  font-size: var(--tt-size-quote);
  line-height: 1.2;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  font-style: italic;
  font-weight: 400;
  color: var(--tt-royal);
}

.color-scheme-light h1 em,
.color-scheme-light h2 em,
.color-scheme-light h3 em,
.tt-on-green h1 em,
.tt-on-green h2 em,
.tt-on-green h3 em {
  color: var(--tt-sage-3);
}

/* --- Buttons ----------------------------------------------------------------
 * The forest pill: WoodMart's own buttons through its variables, WooCommerce's
 * and the core button block through the same rules.
 */
.btn,
.button,
.wp-block-button .wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
  letter-spacing: var(--tt-tracking-button);
  text-transform: uppercase;
  font-family: var(--tt-sans);
  font-weight: 500;
  font-size: var(--tt-size-button);
  line-height: 1.2;
  border-radius: var(--tt-radius-pill);
  transition: background-color var(--tt-motion-chip) var(--tt-ease), border-color var(--tt-motion-chip) var(--tt-ease), color var(--tt-motion-chip) var(--tt-ease);
}

/* The core button block: WoodMart restyles it with its own compound selectors,
 * so these are written at the same depth. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--tt-forest-1);
  color: var(--tt-cream);
  min-height: var(--tt-button-height);
  padding: var(--tt-button-padding);
  border: var(--tt-hairline) solid transparent;
  box-shadow: none;
  text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
  background: var(--tt-forest-3);
  color: var(--tt-cream);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.btn.btn-style-bordered {
  background: transparent;
  border-color: var(--tt-btn-outline);
  color: var(--tt-ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.btn.btn-style-bordered:hover,
.btn.btn-style-bordered:focus-visible {
  background: transparent;
  border-color: var(--tt-ink);
  color: var(--tt-ink);
}

.btn.btn-color-white {
  background: var(--tt-cream);
  color: var(--tt-ink);
}

.btn.btn-color-white:hover,
.btn.btn-color-white:focus-visible {
  background: var(--tt-white);
  color: var(--tt-ink);
}

.btn:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--tt-royal);
  outline-offset: 3px;
}

/* --- Forms ------------------------------------------------------------------
 * SPEC.md §04 "Form": labels as captions, 15px inputs on the input fill with an
 * 8px radius, royal focus border.
 */
label,
.form-row label,
.woocommerce-form label {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-label);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tt-ink-3);
}

input[type="email"],
input[type="date"],
input[type="search"],
input[type="number"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
.wd textarea,
.wd select {
  font-family: var(--tt-sans);
  font-size: var(--tt-size-input);
  font-weight: 300;
  color: var(--tt-ink);
  box-shadow: none;
}

.wd textarea {
  min-height: 100px;
  padding: var(--tt-input-padding);
}

.form-row .optional {
  color: var(--tt-ink-3);
  font-size: inherit;
}

.woocommerce form,
.woocommerce .cart_totals {
  --wd-form-brd-color: var(--tt-moss);
}

.woocommerce .show-password-input:hover {
  color: var(--tt-ink);
}

/* Text nested inside notices must follow the notice's surface, too. */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wd-notice) :is(p, .amount) {
  color: inherit;
}

body .wd-notice.wd-info {
  background: var(--tt-cream-alt);
  color: var(--tt-ink);
}

/* WoodMart's deferred keyboard outline is !important. Set its variables so
 * dark surfaces get a light ring outside the control, including cream pills. */
:is(.tt-on-green, .color-scheme-light, .tt-hero) {
  --wd-otl-color: var(--tt-sage-2);
  --wd-otl-width: var(--tt-focus-width);
  --wd-otl-style: solid;
  --wd-otl-offset: var(--tt-focus-offset);
}

/* --- Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  a,
  .btn,
  .button,
  .wp-block-button__link {
    transition: none;
  }
}