/*
 * The Theme Kit in Terra's look. The kit (themes/_shared/assets/css/kit.css) draws every block the theme has no
 * template for, and every module section; this file sets its tokens, linked after kit.css, so the values here win.
 *
 * Earthy calm, made by hand: cards are flat stones on the paper (no outline, a soft warm shadow, four corners each a
 * little different, and no two neighbours shaped alike); buttons are pebbles; pictures have soft, uneven corners;
 * icons sit on a wash of the accent like a dab of slip on clay; quotations are set in the heading face (in its italic
 * where the font palette has one); questions are quiet rows parted by a fine line; fields are soft stones. Headings are
 * the calm weight of the heading face. theme.css adds the drawn marks (brush strokes, ensō circles, torn edges), because
 * this file may load nothing.
 *
 * Rules for this file: it loads nothing, no picture, font or address of any kind (the kit inlines it into module
 * previews; kit_components.test.php fails for one, and also for these words written in a comment);
 * colours only through the palette tokens the kit already reads (--text-primary, --surface, --primary, ...) or
 * color-mix() of them; weights only through the layout's --terra-heading-weight and --terra-body-strong.
 *
 * --kit-radius and --kit-button-radius are repeated in this theme's line of the shared button table
 * (themes/_shared/assets/css/resilience.css, --chrome-radius and --chrome-button-radius) so the cookie notice and the
 * phone action bar match the theme's own cards and buttons: theme-chrome.test.mjs compares the two. Change both.
 * --kit-radius stays one length: the kit also uses it for single corners (a drawer's), where four would not be read.
 */

.kit-root {
  --terra-kit-shade: color-mix(in srgb, var(--text-primary, #2c2520) 70%, var(--accent, #a65a35));
  --kit-radius: 1.5rem;
  --kit-radius-sm: 0.9rem;
  --kit-button-radius: 1.6rem 1.1rem 1.5rem 1.2rem / 1.25rem 1.55rem 1.1rem 1.45rem;
  --kit-input-radius: 1rem 0.8rem 1.1rem 0.85rem / 0.85rem 1.05rem 0.8rem 1rem;
  --kit-media-radius: 2rem 1.4rem 2.25rem 1.25rem / 1.5rem 2.25rem 1.3rem 2rem;
  --kit-heading-weight: var(--terra-heading-weight, 400);
  --kit-heading-tracking: -0.01em;
  --kit-button-weight: var(--terra-body-strong, 500);
  --kit-button-tracking: 0.01em;
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.04em;
  --kit-focus: var(--accent-ink, #924a28);
  --kit-star: var(--accent-ink, #924a28);
  --kit-card-pad: clamp(1.5rem, 2.4vw, 2.1rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.85rem);
  --kit-gap-large: clamp(2.25rem, 4.5vw, 3.75rem);
  --kit-gutter: clamp(1.25rem, 5vw, 3rem);
  --kit-width-normal: 74rem;
  --kit-width-narrow: 42rem;
  --kit-pad-normal: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --kit-pad-compact: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  --kit-pad-spacious: clamp(5.5rem, 3.5rem + 8vw, 10.5rem);
  --kit-speed: 260ms;
  --kit-ease: cubic-bezier(0.3, 0.7, 0.3, 1);
  --kit-shadow: 0 1px 2px color-mix(in srgb, var(--terra-kit-shade) 6%, transparent), 0 22px 44px -32px color-mix(in srgb, var(--terra-kit-shade) 42%, transparent);
  --kit-shadow-hover: 0 2px 4px color-mix(in srgb, var(--terra-kit-shade) 8%, transparent), 0 30px 54px -30px color-mix(in srgb, var(--terra-kit-shade) 55%, transparent);
}

/* Headings in the heading face, at its calm weight. Sizes are set for ordinary words at 320 px; the shared script is
   only the net for a long word (cms/THEME_DEVELOPMENT.md, rule 1). A line height under about 1.1 cuts marks in a box
   that clips. --terra-head-scale (theme.css) evens out faces with small letters. */
.kit-heading {
  font-family: var(--font-heading, serif);
  line-height: 1.15;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: calc(clamp(2.35rem, 1.5rem + 3.4vw, 4.4rem) * var(--terra-head-scale, 1));
  line-height: 1.08;
}

.kit-heading--2 {
  font-size: calc(clamp(1.9rem, 1.4rem + 2vw, 3rem) * var(--terra-head-scale, 1));
  line-height: 1.14;
}

.kit-heading--3 {
  font-size: calc(clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem) * var(--terra-head-scale, 1));
  line-height: 1.28;
}

.kit-text--lead {
  line-height: 1.65;
}

/* A small button (a row of review links, Next under a list of posts) is still 40 px tall: the kit's own 36 px is under
   what a thumb needs on a phone (verify-theme-stress.mjs, button-small). */
.kit-button {
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  line-height: 1.3;
  transition: background-color var(--kit-speed) ease, border-color var(--kit-speed) ease, color var(--kit-speed) ease, border-radius 600ms var(--kit-ease), box-shadow var(--kit-speed) ease;
}

.kit-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.9375rem;
}

/* On hover a pebble turns a little in the hand: its corners trade places, slowly. */
.kit-button--primary:hover,
.kit-button--secondary:hover,
.kit-button--light:hover {
  border-radius: 1.2rem 1.5rem 1.1rem 1.6rem / 1.45rem 1.1rem 1.55rem 1.25rem;
}

.kit-button--secondary {
  border-color: var(--kit-line-strong);
}

.kit-button--secondary:hover {
  border-color: var(--kit-text);
  background: color-mix(in srgb, var(--kit-text) 6%, transparent);
}

.kit-button--ghost {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--kit-accent-text) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.kit-button--ghost:hover {
  text-decoration-color: var(--kit-accent-text);
}

.kit-link {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Figures (stats_counter, a plan's price) in the heading face. From 1200 px five statistics stand in a row of about
   200 px each: the size stops at about 46 px so "1500 m²" stays whole there. */
.kit-stat__value,
.kit-output--large,
.kit-price__amount,
.kit-summary__amount {
  font-family: var(--font-heading, serif);
  font-weight: var(--kit-heading-weight);
}

.kit-stat__value {
  font-size: calc(clamp(2.1rem, 1.4rem + 1.8vw, 2.9rem) * var(--terra-head-scale, 1));
  line-height: 1.1;
}

/* A price on a plan card is set a size down: four plans give a card about 190 px. */
.kit-card .kit-stat__value {
  font-size: calc(clamp(1.9rem, 1.35rem + 1.3vw, 2.5rem) * var(--terra-head-scale, 1));
}

/* Small labels above headings: the accent's readable shade, in the heading face's italic where the font palette has
   one (html.terra-italic), otherwise upright in the body face. Never in capitals: capitals make long Lithuanian words
   much wider. */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-size: 0.9375rem;
  font-weight: var(--terra-body-strong, 500);
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-transform: none;
}

html.terra-italic .kit-eyebrow,
html.terra-italic .kit-card__eyebrow {
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: var(--kit-heading-weight);
  letter-spacing: 0.005em;
  font-synthesis: none;
}

/* Cards are flat stones on the paper: no outline, a soft warm shadow, four corners each a little different, and no two
   neighbours shaped alike. A linked one lifts a little; its picture drifts closer, slowly. */
.kit-card--surface {
  border-color: transparent;
  border-radius: 2rem 1.4rem 2.25rem 1.25rem / 1.5rem 2.25rem 1.3rem 2rem;
  background: var(--kit-surface);
  box-shadow: var(--kit-shadow);
}

.kit-card--outline {
  border-color: var(--kit-line-strong);
  border-radius: 2rem 1.4rem 2.25rem 1.25rem / 1.5rem 2.25rem 1.3rem 2rem;
}

:is(.kit-grid, .kit-carousel__track) > :nth-child(3n + 2):is(.kit-card--surface, .kit-card--outline) {
  border-radius: 1.35rem 2.2rem 1.5rem 2.1rem / 2.1rem 1.3rem 2.3rem 1.4rem;
}

:is(.kit-grid, .kit-carousel__track) > :nth-child(3n):is(.kit-card--surface, .kit-card--outline) {
  border-radius: 2.3rem 1.6rem 1.25rem 2rem / 1.6rem 2rem 2.2rem 1.25rem;
}

.kit-card--linked {
  transition: transform 600ms var(--kit-ease), box-shadow var(--kit-speed) ease;
}

.kit-card--linked:hover {
  transform: translateY(-4px);
  box-shadow: var(--kit-shadow-hover);
}

.kit-card__media img,
.kit-picture img {
  transition: transform 1.4s var(--kit-ease);
}

.kit-card--linked:hover .kit-card__media img {
  transform: scale(1.04);
}

.kit-card__title {
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem) * var(--terra-head-scale, 1));
  font-weight: var(--kit-heading-weight);
  letter-spacing: -0.005em;
  line-height: 1.28;
}

/* Big icons are drawn in a fine line over a round stone of the accent's tint that lies a little off their centre, low
   and to the left, as a stamp rests on a dab of slip. */
.kit-icon--large {
  box-sizing: content-box;
  padding: 0.6rem;
  background: radial-gradient(ellipse 42% 40% at 38% 62%, color-mix(in srgb, var(--kit-accent) 22%, transparent) 0 96%, color-mix(in srgb, var(--kit-accent) 0%, transparent) 100%);
  color: var(--kit-accent-text);
  stroke-width: 1.5;
}

/* Facts (a number and what it counts) stand on the paper without a box. */
.kit-stat__label {
  color: var(--kit-muted);
}

/* Chips and badges are soft pebbles of a tint. */
.kit-chip,
.kit-badge {
  border-color: transparent;
  font-size: 0.8125rem;
  font-weight: var(--terra-body-strong, 500);
  letter-spacing: 0.01em;
}

.kit-chip {
  padding: 0.25rem 0.85rem;
  background: color-mix(in srgb, var(--kit-tone, var(--kit-accent)) 12%, transparent);
}

/* A picture beside words (text with image, about) is a slab with soft, uneven corners; a second one is shaped the other
   way round. */
.kit-picture.kit-rounded {
  border-radius: var(--kit-media-radius);
}

.kit-split > .kit-picture.kit-rounded:last-child {
  border-radius: 1.4rem 2.6rem 1.3rem 2.4rem / 2.4rem 1.5rem 2.6rem 1.3rem;
}

/* People are drawn as pebbles. */
.kit-avatar {
  border-radius: 57% 43% 52% 48% / 46% 56% 44% 54%;
}

.kit-avatar img {
  border-radius: inherit;
}

/* Fields are soft stones on the paper; the one being typed in gets a soft ring of the accent. */
.kit-input {
  min-height: 3rem;
  padding-inline: 1.1rem;
  border-color: var(--kit-line-strong);
  background-color: var(--kit-surface);
}

.kit-textarea {
  padding-block: 0.85rem;
}

.kit-select {
  padding-inline-end: 2.75rem;
}

.kit-input:focus {
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-accent) 16%, transparent);
}

.kit-field__label {
  font-size: 0.9688rem;
  font-weight: var(--terra-body-strong, 500);
}

/* What somebody said, in the heading face (in its italic where the font palette has one), opened by a large quotation
   mark in the accent's readable shade. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(1.125rem, 1.02rem + 0.4vw, 1.3rem) * var(--terra-head-scale, 1));
  font-style: normal;
  font-weight: var(--kit-heading-weight);
  line-height: 1.55;
  font-synthesis: none;
}

html.terra-italic .kit-quote__text {
  font-style: italic;
}

.kit-quote__text::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 2.6em;
  font-style: normal;
  line-height: 1;
}

.kit-quote__author {
  margin-top: 1rem;
  font-size: 0.9688rem;
  font-weight: var(--terra-body-strong, 500);
}

.kit-quote__role {
  margin-top: 0.15rem;
  font-size: 0.875rem;
}

/* Questions are quiet rows parted by a fine line; the question in the heading face, its sign in a small pebble. */
.kit-accordion__title {
  padding-block: 1.25rem;
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem) * var(--terra-head-scale, 1));
  font-weight: var(--kit-heading-weight);
  line-height: 1.35;
}

.kit-accordion__chevron {
  box-sizing: content-box;
  padding: 0.3rem;
  border-radius: 57% 43% 52% 48% / 46% 56% 44% 54%;
  background: color-mix(in srgb, var(--kit-accent) 13%, transparent);
  color: var(--kit-accent-text);
  stroke-width: 1.75;
}

.kit-rich-text blockquote {
  margin-inline: 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 0.25rem solid var(--kit-accent);
  color: var(--kit-text);
  font-family: var(--font-heading, serif);
  font-size: 1.15em;
  line-height: 1.55;
}

/* Room under a row of slides for the cards' soft shadows; the arrows are pebbles. */
.kit-carousel__track {
  padding-bottom: 2.25rem;
}

.kit-carousel__controls {
  margin-top: -0.75rem;
}

.kit-carousel__button {
  border: 1px solid var(--kit-line-strong);
  border-radius: 57% 43% 52% 48% / 46% 56% 44% 54%;
  background: var(--kit-surface);
  color: var(--kit-text);
}

.kit-carousel__button:hover {
  border-color: var(--kit-text);
  background: var(--kit-surface-alt);
}

.kit-dialog,
.kit-drawer--right.is-ready,
.kit-drawer--bottom.is-ready {
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--terra-kit-shade) 60%, transparent);
}

.kit-notice {
  border-radius: 1.4rem 1rem 1.5rem 0.9rem / 1rem 1.4rem 0.9rem 1.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .kit-card--linked:hover,
  .kit-card--linked:hover .kit-card__media img {
    transform: none;
  }
}