/*
 * The Theme Kit in Meridian'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 and the look of its parts, linked after kit.css, so
 * the values here win. How whole sections are laid on the sheet (the opening line, its number, the margin column) is in
 * theme.css, which knows each block's type.
 *
 * The look: square, ruled, flat. A card is a cell of a ruled table, not a box with a shadow; a row of cards shares its
 * lines. Headings are a medium grotesque, set tight. Buttons end in a square tab with an arrow, parted from the label by
 * a fine line. The accent colour is used at full strength on small things only: the tab, a number in a circle, a mark.
 *
 * 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 --meridian-heading-weight and --meridian-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-root {
  --kit-radius: 0px;
  --kit-radius-sm: 0px;
  --kit-button-radius: 0px;
  --kit-input-radius: 0px;
  --kit-media-radius: 0px;
  --kit-chip-radius: 0px;
  --kit-heading-weight: var(--meridian-heading-weight, 500);
  --kit-heading-tracking: -0.028em;
  --kit-button-weight: var(--meridian-body-strong, 600);
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.08em;
  --kit-focus: var(--accent-ink, #b93a0a);
  --kit-star: var(--accent-ink, #b93a0a);
  --kit-shadow: none;
  --kit-shadow-hover: none;
  --kit-card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 1.5rem + 2vw, 3rem);
  --kit-gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* One width for every section: the sheet's grid has four bays of a quarter of it each, and a section set narrower
     would leave the grid. theme.css gives a narrow kind of content (questions, a form) its bays instead. */
  --kit-width-normal: 80rem;
  --kit-width-narrow: 80rem;
  --kit-width-wide: 80rem;
  --kit-pad-normal: clamp(4rem, 3rem + 4.5vw, 7.5rem);
  --kit-pad-compact: clamp(2.5rem, 2rem + 2vw, 4rem);
  --kit-pad-spacious: clamp(5rem, 3.5rem + 6vw, 9rem);
  --kit-measure: 64ch;
}

/* One sheet: a tinted band is not drawn. Sections are parted by the line that opens each (theme.css). */
.kit-section--muted {
  background-color: transparent;
}

/* ------------------------------------------------------------------ Type */

/* Headings: a medium grotesque set tight. Sizes are chosen for ordinary words at 320 px (a word of 14 letters fits the
   first heading there); the shared script is only the net for a longer one (cms/THEME_DEVELOPMENT.md, rule 1). */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.08;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.kit-heading--2 {
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.kit-heading--3 {
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.kit-heading--4 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.kit-heading.kit-heading--long {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.kit-text--lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.55;
}

/* Small labels: the body face in small capitals after the theme's square. Short words only stand here. */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-text);
  font-size: 0.6875rem;
  font-weight: var(--meridian-body-strong, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.4;
}

.kit-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: 0.55rem;
  background: var(--kit-accent);
}

.kit-link {
  color: var(--kit-text);
  text-decoration-color: var(--kit-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.kit-rich-text a {
  color: var(--kit-text);
  text-decoration-color: var(--kit-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.kit-rich-text a:hover,
.kit-link:hover {
  color: var(--kit-accent-text);
}

/* ------------------------------------------------------------------ Buttons */

/* The label, then a square tab with an arrow. The tab is the accent colour with its own readable ink, a pair the
   colour contract keeps in every palette, so it reads on any band. A label may take two lines; the tab then grows
   with the button. theme-chrome.test.mjs holds this shape and the shared notice's together. */
.kit-button {
  gap: 1.25rem;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light):not(.kit-button--small)::before {
  content: "\2192";
  order: 2;
  display: grid;
  flex: none;
  align-self: stretch;
  place-items: center;
  width: 3rem;
  /* auto: in a button as wide as its form the tab stands at the right end, not after the label. */
  margin: calc(-0.7rem - 1px) calc(-1.25rem - 1px) calc(-0.7rem - 1px) auto;
  background: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
  font-family: var(--font-body, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1;
  transition: padding-inline-start var(--kit-speed) var(--kit-ease);
}

.kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light):not(.kit-button--small):hover::before {
  padding-inline-start: 0.4rem;
}

/* With a tab the label stands at the left, whatever the button's width. */
.kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light):not(.kit-button--small) {
  justify-content: flex-start;
  text-align: start;
}

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

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

/* The framed button's tab is a frame too: a fine line, no fill. */
.kit-button.kit-button--secondary:not(.kit-button--small)::before {
  margin-block: -0.7rem;
  margin-inline-end: -1.25rem;
  border-inline-start: 1px solid currentColor;
  background: transparent;
  color: inherit;
}

.kit-button--ghost {
  color: var(--kit-text);
  text-decoration: underline;
  text-decoration-color: var(--kit-accent-text);
  text-underline-offset: 0.3em;
}

.kit-button-group {
  gap: 0.75rem;
}

/* ------------------------------------------------------------------ Cards */

/* A card is a ruled cell. In a grid the cells share their lines (the grid has no gap and each cell covers its
   neighbour's line by a pixel), so a row of cards reads as one table, however the rows break. */
.kit-card {
  border-radius: 0;
}

.kit-card--surface,
.kit-card--outline {
  border-color: var(--kit-line);
  background: transparent;
  box-shadow: none;
}

.kit-card__title {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.kit-card__meta {
  font-size: 0.8125rem;
}

.kit-card--linked {
  transition: background-color var(--kit-speed) ease, border-color var(--kit-speed) ease;
}

.kit-card--linked:hover {
  z-index: 1;
  border-color: var(--kit-text);
  background: var(--kit-surface);
}

.kit-card--linked.kit-card--surface:hover {
  box-shadow: none;
}

.kit-card--linked:hover .kit-card__link {
  color: var(--kit-text);
}

.kit-grid:has(> .kit-card),
.kit-grid.kit-features,
.kit-grid.kit-steps {
  --kit-gap: 0px;
  gap: 0;
}

.kit-grid > .kit-card,
.kit-grid.kit-features > .kit-stack {
  margin: 0 -1px -1px 0;
}

.kit-grid.kit-features > .kit-stack {
  padding: var(--kit-card-pad);
  border: 1px solid var(--kit-line);
}

.kit-grid.kit-features .kit-icon,
.kit-card__body > .kit-icon:first-child {
  color: var(--kit-accent-text);
}

/* Steps: stations on one line. Each cell hangs from the line that runs across the row; its number stands in a circle
   on that line, the way the sheet numbers its sections. */
.kit-grid.kit-steps > .kit-card {
  margin: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--kit-line-strong);
}

.kit-grid.kit-steps .kit-card__content {
  padding: 1.75rem 1.5rem 0.5rem 0;
}

.kit-grid.kit-steps .kit-card__eyebrow {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: calc(-1.75rem - 0.875rem) 0 1.25rem;
  border-radius: 50%;
  background: var(--accent, #ff5a1f);
  color: var(--on-accent, #17191c);
  font-size: 0.6875rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ Figures */

/* A statistic stands on a dimension line: a line with a short stroke at each end, as a drawing writes a measure. The
   sizes hold "1500 m²" on one line in a row of four on a desktop and two on a phone; theme.css sets a row of five or
   more smaller. */
.kit-stat {
  position: relative;
  gap: 0.35rem;
  padding-top: 1.35rem;
  text-align: start;
}

.kit-stat::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.5625rem;
  border-inline: 1px solid var(--kit-line-strong);
  background: linear-gradient(var(--kit-line-strong), var(--kit-line-strong)) 0 50% / 100% 1px no-repeat;
}

.kit-stat__value {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.75rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.kit-stat__suffix {
  color: var(--kit-accent-text);
}

.kit-stat__label {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ Lists, questions, quotes */

.kit-accordion {
  border-top-color: var(--kit-line-strong);
}

.kit-accordion__title {
  padding: 1.2rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  font-weight: var(--meridian-heading-weight, 500);
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.kit-accordion__title:hover {
  color: var(--kit-text);
}

.kit-accordion__chevron {
  color: var(--kit-accent-text);
}

.kit-accordion__body {
  padding-bottom: 1.4rem;
}

/* A quotation is upright: the font palettes load no slanted letters, and a browser's own slant is a fake. No bar at its
   side either; the cell it stands in frames it. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__author {
  font-weight: var(--meridian-body-strong, 600);
}

.kit-quote__text {
  font-style: normal;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: var(--meridian-heading-weight, 500);
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.kit-list--menu .kit-list-item__title {
  font-weight: var(--meridian-body-strong, 600);
}

.kit-list--menu .kit-list-item__meta {
  font-weight: var(--meridian-body-strong, 600);
}

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

.kit-field__label {
  font-size: 0.8125rem;
  font-weight: var(--meridian-body-strong, 600);
}

.kit-input {
  min-height: 3rem;
  border-color: var(--kit-line-strong);
  background: var(--kit-surface);
}

.kit-input:focus {
  border-color: var(--kit-text);
}

/* ------------------------------------------------------------------ Pictures and frames */

.kit-picture,
.kit-picture.kit-rounded,
.kit-card__media,
.kit-frame,
.kit-video,
.kit-compare__frame {
  border-radius: 0;
}

.kit-carousel__button,
.kit-slideshow__button {
  border-radius: 0;
}

.kit-avatar {
  border-radius: 50%;
}

.kit-slideshow__dot {
  border-radius: 0;
}