/*
 * The Theme Kit in Riso'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 stock blocks are composed (printed photographs, the halftone rows a band rises out of, the cards of
 * a services block) is in theme.css, which knows each block's type.
 *
 * The look: two flat inks on paper. Square corners, no shadows and no hairlines: a card is a plain sheet, a button a
 * block of the main ink with the spot ink printed a little out of register behind it (they come into register on hover),
 * a small label a sticker of the spot ink cut a little askew, a heading big poster type with the spot ink slipping behind
 * it, a field a box ruled in the text colour.
 *
 * 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 --riso-heading-weight and --riso-body-strong. Every heading
 * size is multiplied by --riso-face (theme.css): 1 where the theme's stylesheet is not linked.
 *
 * --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(--riso-heading-weight, 800);
  --kit-heading-tracking: var(--riso-track, -0.015em);
  --kit-button-weight: var(--riso-body-strong, 700);
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.05em;
  --kit-focus: var(--accent-ink, #b0106a);
  --kit-star: var(--accent-ink, #b0106a);
  --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(1rem, 4vw, 2.5rem);
  --kit-width-normal: 76rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --kit-pad-compact: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --kit-pad-spacious: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  /* How far the spot ink slips out of register behind a button. */
  --riso-kit-offset: 0.3rem;
}

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

/* Headings: big poster type in the display face, set tight, the first two sizes with the spot ink slipping out of
   register behind them. Sizes are chosen for ordinary words at 320 px in each heading face (--riso-face); the shared
   script is only the net for a longer word (cms/THEME_DEVELOPMENT.md, rule 1). The line height keeps the marks of Š and
   Ž clear of the line above. */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.08;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: calc(clamp(2.1rem, 1.25rem + 4.2vw, 5rem) * var(--riso-face, 1));
  line-height: 1.03;
  padding-block-start: 0.06em;
  text-shadow: 0.045em 0.045em 0 var(--riso-slip-ink, var(--accent, #ff48b0));
}

.kit-heading--2 {
  font-size: calc(clamp(1.8rem, 1.25rem + 2.5vw, 3.3rem) * var(--riso-face, 1));
  line-height: 1.05;
  padding-block-start: 0.05em;
  text-shadow: 0.045em 0.045em 0 var(--riso-slip-ink, var(--accent, #ff48b0));
}

.kit-heading--3 {
  font-size: calc(clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem) * var(--riso-face, 1));
  line-height: 1.12;
}

.kit-heading--4 {
  font-size: calc(1.15rem * var(--riso-face, 1));
  line-height: 1.2;
}

.kit-heading.kit-heading--long {
  font-size: calc(clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem) * var(--riso-face, 1));
  line-height: 1.2;
  text-shadow: none;
}

/* On a band of the spot ink, the main ink slips behind the heading instead. */
.kit-section--accent {
  --riso-slip-ink: var(--primary, #2c4a9e);
}

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

/* Small labels: a sticker of the spot ink, cut a little askew, its words in the ink's own colour. Short words only stand
   here; they are not set in capitals (capitals make long Lithuanian words much wider). On a band of the spot ink the
   sticker is the main ink. */
.kit-eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.85rem;
  padding: 0.2rem 0.6rem;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  font-size: 0.8125rem;
  font-weight: var(--riso-body-strong, 700);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.4;
  text-transform: none;
  transform: rotate(-2deg);
}

.kit-section--accent .kit-eyebrow {
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
}

.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-size: 0.8125rem;
  font-weight: var(--riso-body-strong, 700);
  letter-spacing: 0.04em;
  text-transform: none;
}

.kit-link {
  color: var(--kit-accent-text);
  font-weight: var(--riso-body-strong, 700);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.kit-rich-text a {
  color: var(--kit-accent-text);
  font-weight: var(--riso-body-strong, 700);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

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

/* A square block of ink with the spot ink printed a little down and to the right of it, out of register; on hover and
   focus the button moves onto it and the two inks register. A label may take two lines; it never runs out of the
   button. theme-chrome.test.mjs holds this corner and the shared notice's together. */
.kit-button {
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-width: 2px;
  font-size: 0.9375rem;
  line-height: 1.25;
}

.kit-button--primary {
  box-shadow: var(--riso-kit-offset) var(--riso-kit-offset) 0 0 var(--riso-pass-ink, var(--accent, #ff48b0));
}

.kit-button--primary:hover,
.kit-button--primary:focus-visible {
  box-shadow: 0 0 0 0 var(--riso-pass-ink, var(--accent, #ff48b0));
  transform: translate(var(--riso-kit-offset), var(--riso-kit-offset));
}

.kit-button--primary:active {
  transform: translate(var(--riso-kit-offset), var(--riso-kit-offset));
}

/* On a band of either ink the button is the band's opposite, and the pass behind it is the other ink. */
.kit-section--inverse,
.kit-slide {
  --riso-pass-ink: var(--accent, #ff48b0);
}

.kit-section--accent {
  --riso-pass-ink: var(--primary, #2c4a9e);
}

/* The framed button: a box ruled in the text colour; on hover the spot ink fills it. */
.kit-button--secondary {
  border-color: var(--kit-text);
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  border-color: var(--kit-accent);
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

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

.kit-button--small {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

.kit-button-group {
  gap: 1rem 1.15rem;
}

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

/* A card is a plain sheet of paper: no line, no shadow. On a sheet of the same paper as the page it is set apart by
   a rule of the main ink along its top. */
.kit-card {
  border-radius: 0;
}

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

.kit-card--outline {
  border: 2px solid var(--kit-text);
  background: transparent;
}

.kit-card__title {
  font-size: calc(clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem) * var(--riso-face, 1));
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.15;
}

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

/* A linked card lifts off the page with the spot ink's pass under it. */
.kit-card--linked:hover {
  box-shadow: var(--riso-kit-offset) var(--riso-kit-offset) 0 0 var(--accent, #ff48b0);
  transform: translate(calc(-1 * var(--riso-kit-offset)), calc(-1 * var(--riso-kit-offset)));
}

.kit-card--linked.kit-card--surface:hover {
  box-shadow: var(--riso-kit-offset) var(--riso-kit-offset) 0 0 var(--accent, #ff48b0);
}

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

.kit-card--linked .kit-card__link:focus-visible::after {
  outline-offset: -3px;
}

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

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

/* A statistic: the figure huge in the display face with the spot ink slipping behind it. */
.kit-stat__value {
  font-size: calc(clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem) * var(--riso-face, 1));
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.05;
  text-shadow: 0.05em 0.05em 0 var(--riso-slip-ink, var(--accent, #ff48b0));
}

/* A figure inside a card (a plan's price) has a quarter of the row at most: it stays big, but smaller than a statistic
   standing in the open, so "nuo 1 250 €" holds one line in a row of four plans. */
.kit-card .kit-stat__value {
  font-size: calc(clamp(1.9rem, 1.6rem + 0.6vw, 2.5rem) * var(--riso-face, 1));
}

.kit-stat__suffix {
  color: inherit;
}

.kit-stat__label {
  font-size: 0.9375rem;
  font-weight: var(--riso-body-strong, 700);
}

.kit-price__amount {
  letter-spacing: var(--kit-heading-tracking);
}

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

.kit-list--check > .kit-list-item::before {
  color: var(--kit-accent-text);
}

.kit-accordion {
  border-top: 3px solid var(--kit-text);
}

.kit-accordion__item {
  border-bottom: 2px solid var(--kit-line);
}

.kit-accordion__title {
  padding: 1.15rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem) * var(--riso-face, 1));
  font-weight: var(--riso-heading-weight, 800);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.2;
}

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

/* The chevron on a square of the spot ink. */
.kit-accordion__chevron {
  box-sizing: content-box;
  padding: 0.3rem;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
}

.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. It is set in
   the body face a little larger than the text (a testimonial runs to several sentences, too many for poster type), with a
   bar of the spot ink at its side. */
.kit-quote {
  padding-inline-start: 1.1rem;
  border-inline-start: 0.35rem solid var(--kit-accent);
}

.kit-quote__text {
  font-style: normal;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
}

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

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

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

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

.kit-field__label {
  font-size: 0.875rem;
  font-weight: var(--riso-body-strong, 700);
}

.kit-input {
  min-height: 3rem;
  border-width: 2px;
  border-color: var(--kit-text);
  background: var(--kit-surface);
}

.kit-input:focus {
  border-color: var(--kit-text);
  box-shadow: 0.25rem 0.25rem 0 0 var(--accent, #ff48b0);
}

/* ------------------------------------------------------------------ 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-width: 2px;
  border-radius: 0;
}

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

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