/*
 * The Theme Kit in Marquee'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 page (the bands' stripes and sunburst, the lit sign of a call
 * to action) is in theme.css.
 *
 * The look: a sign-painter's shop window. Headings are chunky display letters; a section's heading carries a painted
 * shade in the accent colour (theme.css). Buttons are enamel pills with a painted keyline just inside the edge. Cards
 * are cream panels with a keyline of their own; an icon or a step's number stands in a bottle-cap seal of the accent
 * colour; small labels are pills; a price in a menu hangs on a tag; pictures have big round corners.
 *
 * 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 --marquee-heading-weight and --marquee-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: 1.25rem;
  --kit-radius-sm: 0.75rem;
  --kit-button-radius: 999px;
  --kit-input-radius: 0.75rem;
  --kit-media-radius: 1.25rem;
  --kit-chip-radius: 999px;
  --kit-heading-weight: var(--marquee-heading-weight, 800);
  --kit-heading-tracking: -0.015em;
  --kit-button-weight: var(--marquee-body-strong, 600);
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.02em;
  --kit-focus: var(--accent-ink, #8a4705);
  --kit-star: var(--accent-ink, #8a4705);
  /* A hover on a primary button deepens it: primary-alt is one of the theme's three sign colours, not a shade. */
  --kit-primary-hover: color-mix(in srgb, var(--kit-primary) 86%, #000);
  --kit-shadow: none;
  --kit-shadow-hover: 0 6px 0 color-mix(in srgb, var(--kit-text) 14%, transparent);
  --kit-card-pad: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 4vw, 3rem);
  --kit-gutter: clamp(1rem, 4vw, 2.25rem);
  --kit-width-normal: 74rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(3.5rem, 2.5rem + 4vw, 6.25rem);
  --kit-pad-compact: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --kit-pad-spacious: clamp(4.5rem, 3rem + 6vw, 8rem);
  /* The seal an icon or a number stands in: a bottle cap with twelve scallops. */
  --marquee-kit-seal: polygon(50% 0%,54.2% 1.4%,58% 4.5%,61.6% 6.5%,65.8% 6.5%,70.6% 5.8%,75% 6.7%,78% 10.1%,79.7% 14.6%,81.8% 18.2%,85.4% 20.3%,89.9% 22%,93.3% 25%,94.2% 29.4%,93.5% 34.2%,93.5% 38.4%,95.5% 42%,98.6% 45.8%,100% 50%,98.6% 54.2%,95.5% 58%,93.5% 61.6%,93.5% 65.8%,94.2% 70.6%,93.3% 75%,89.9% 78%,85.4% 79.7%,81.8% 81.8%,79.7% 85.4%,78% 89.9%,75% 93.3%,70.6% 94.2%,65.8% 93.5%,61.6% 93.5%,58% 95.5%,54.2% 98.6%,50% 100%,45.8% 98.6%,42% 95.5%,38.4% 93.5%,34.2% 93.5%,29.4% 94.2%,25% 93.3%,22% 89.9%,20.3% 85.4%,18.2% 81.8%,14.6% 79.7%,10.1% 78%,6.7% 75%,5.8% 70.6%,6.5% 65.8%,6.5% 61.6%,4.5% 58%,1.4% 54.2%,0% 50%,1.4% 45.8%,4.5% 42%,6.5% 38.4%,6.5% 34.2%,5.8% 29.4%,6.7% 25%,10.1% 22%,14.6% 20.3%,18.2% 18.2%,20.3% 14.6%,22% 10.1%,25% 6.7%,29.4% 5.8%,34.2% 6.5%,38.4% 6.5%,42% 4.5%,45.8% 1.4%);
}

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

/* Headings in the display face, times the face's scale (theme.css, Faces: Unbounded is broad, Big Shoulders narrow).
   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. */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.14;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: calc(clamp(2rem, 1.15rem + 3.6vw, 4.25rem) * var(--marquee-scale, 1));
  line-height: 1.12;
}

.kit-heading--2 {
  font-size: calc(clamp(1.65rem, 1.2rem + 1.9vw, 2.75rem) * var(--marquee-scale, 1));
}

.kit-heading--3 {
  font-size: calc(clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem) * var(--marquee-scale, 1));
  line-height: 1.25;
}

.kit-heading--4 {
  font-size: calc(1.0625rem * var(--marquee-scale, 1));
}

.kit-heading.kit-heading--long {
  font-size: calc(clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem) * var(--marquee-scale, 1));
  line-height: 1.3;
}

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

/* Small labels: a pill outlined in the accent's readable shade, in the body face, not in capitals (capitals make long
   Lithuanian words much wider). On a band the kit's own colour roles take over. */
.kit-eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.85rem;
  padding: 0.15rem 0.85rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--kit-accent-text);
  font-size: 0.8125rem;
  font-weight: var(--marquee-body-strong, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.5;
  text-transform: none;
}

.kit-text--center > .kit-eyebrow,
.kit-heading-group.kit-text--center .kit-eyebrow {
  margin-inline: auto;
}

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

/* The recommended plan of a price table wears its label as a tag of the accent colour hung over its top edge. */
.kit-grid > .kit-card--surface > .kit-card__content > .kit-card__eyebrow:first-child:not(:only-child) {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-link,
.kit-rich-text a {
  color: var(--kit-accent-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

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

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

/* An enamel pill with a painted keyline just inside its edge, in the colour of its words. On hover it lifts and its
   shade shows under it. theme-chrome.test.mjs holds this corner and the shared notice's together. */
.kit-button {
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border-width: 2px;
  font-size: 0.9875rem;
  line-height: 1.3;
  transition: transform var(--kit-speed) var(--kit-ease), box-shadow var(--kit-speed) var(--kit-ease), background-color var(--kit-speed) var(--kit-ease);
}

.kit-button--primary {
  box-shadow: inset 0 0 0 3px var(--kit-primary), inset 0 0 0 4.5px color-mix(in srgb, var(--kit-on-primary) 55%, transparent);
}

.kit-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px var(--kit-primary-hover), inset 0 0 0 4.5px var(--kit-on-primary), 0 4px 0 var(--accent, #f0a81c);
}

.kit-section--inverse .kit-button--primary:hover,
.kit-section--accent .kit-button--primary:hover,
.kit-section--image .kit-button--primary:hover,
.kit-slide .kit-button--primary:hover {
  box-shadow: inset 0 0 0 3px var(--kit-primary-hover), inset 0 0 0 4.5px var(--kit-on-primary), 0 4px 0 color-mix(in srgb, var(--kit-text) 45%, transparent);
}

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

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

/* 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--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
}

.kit-button--small.kit-button--primary {
  box-shadow: inset 0 0 0 2.5px var(--kit-primary), inset 0 0 0 3.75px color-mix(in srgb, var(--kit-on-primary) 55%, transparent);
}

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

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

/* A cream panel with a keyline painted a little inside its edge, as a sign-writer frames a board. A linked card lifts on
   hover and its keyline turns to the accent. */
.kit-card {
  border-radius: var(--kit-radius);
}

.kit-card--surface,
.kit-card--outline {
  border: 0;
  background: var(--kit-surface);
  box-shadow: inset 0 0 0 0.4rem var(--kit-surface), inset 0 0 0 calc(0.4rem + 1.5px) var(--kit-line-strong);
}

.kit-card--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--kit-line-strong);
}

.kit-card__title {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem) * var(--marquee-scale, 1));
  font-weight: var(--marquee-heading-weight, 800);
  line-height: 1.25;
}

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

.kit-card--linked:hover {
  transform: translateY(-3px);
}

.kit-card--linked.kit-card--surface:hover,
.kit-card--linked.kit-card--outline:hover {
  box-shadow: inset 0 0 0 0.4rem var(--kit-surface), inset 0 0 0 calc(0.4rem + 2px) var(--kit-accent), 0 6px 0 color-mix(in srgb, var(--kit-text) 14%, transparent);
}

.kit-card--linked.kit-card--outline:hover {
  box-shadow: inset 0 0 0 2px var(--kit-accent), 0 6px 0 color-mix(in srgb, var(--kit-text) 14%, transparent);
}

.kit-card__link:hover {
  color: inherit;
}

/* A picture at the top of a card keeps the card's rounded corners and stands clear of the keyline. */
.kit-card__media {
  border-radius: var(--kit-radius) var(--kit-radius) 0 0;
}

/* Icons: in a bottle-cap seal of the accent colour, with the accent's own readable ink. A seal is the same pair on every
   band (the kit sets both colours there). */
.kit-grid.kit-features .kit-icon--large,
.kit-card__body > .kit-icon--large:first-child,
.kit-stack > .kit-icon--large:first-child {
  box-sizing: content-box;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0.85rem;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
  clip-path: var(--marquee-kit-seal);
}

@media (max-width: 639.98px) {
  .kit-grid.kit-features .kit-icon--large {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.65rem;
  }
}

/* Steps: each number in a bottle-cap seal of the accent colour, in the display face. A step with an icon has one lead
   mark, the icon in its seal; its number is then the kit's small label over the title (kit.css), so the seal is only
   drawn for a step without an icon. */
.kit-grid.kit-steps > .kit-card {
  overflow: visible;
}

.kit-grid.kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1rem;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.15rem * var(--marquee-scale, 1));
  font-weight: var(--marquee-heading-weight, 800);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  clip-path: var(--marquee-kit-seal);
}

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

/* Figures (stats_counter, a plan's price) in the display face with the painted shade. From 1200 px five statistics stand
   in a row of about 200 px each: the sizes here hold "1500 m²" there. */
.kit-stat__value {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.35rem + 1.7vw, 2.9rem) * var(--marquee-scale, 1));
  font-weight: var(--marquee-heading-weight, 800);
  line-height: 1.1;
  text-shadow: 0.05em 0.05em 0 var(--marquee-shade, var(--accent, #f0a81c));
}

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

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

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

/* Questions: each a cream pill-cornered row with its keyline; the open one shows its answer in the same panel. */
.kit-accordion {
  display: grid;
  gap: 0.7rem;
  border: 0;
}

.kit-accordion__item {
  border: 0;
  border-radius: var(--kit-radius);
  background: var(--kit-surface);
  box-shadow: inset 0 0 0 2px var(--kit-line);
}

.kit-accordion__item[open] {
  box-shadow: inset 0 0 0 2px var(--kit-accent);
}

.kit-accordion__title {
  padding: 1.05rem 1.35rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.0625rem, 1rem + 0.3vw, 1.2rem) * var(--marquee-scale, 1));
  font-weight: var(--marquee-heading-weight, 800);
  line-height: 1.3;
}

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

.kit-accordion__chevron {
  box-sizing: content-box;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-accordion__body {
  padding: 0 1.35rem 1.25rem;
}

/* A quotation under a large painted quotation mark. Upright: the font palettes load no slanted letters, and a browser's
   own slant is a fake. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, sans-serif);
  font-size: 4rem;
  font-weight: var(--marquee-heading-weight, 800);
  line-height: 1;
}

/* The words of a quotation are in the body face: a long sentence in a chunky display face is hard to read. */
.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-style: normal;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
}

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

/* An avatar inside rings of the three sign colours, like the picture of the opening. */
.kit-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--kit-surface), 0 0 0 6px var(--primary, #0e5b57), 0 0 0 9px var(--accent, #f0a81c), 0 0 0 12px var(--primary-alt, #b33a22);
  margin: 12px;
}

/* A price in a menu hangs on a small tag of the accent colour. The row keeps the kit's wrapping: the price moves under
   its label when the label's longest word cannot stand beside it (kit.css, the menu list). */
.kit-list--menu .kit-list-item__title {
  font-weight: var(--marquee-body-strong, 600);
}

.kit-list--menu .kit-list-item__meta {
  padding: 0.05rem 0.7rem;
  border-radius: 999px;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
  font-weight: var(--marquee-body-strong, 600);
  font-variant-numeric: lining-nums tabular-nums;
}

.kit-list--menu .kit-list-item + .kit-list-item {
  border-top: 2px dotted var(--kit-line);
}

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

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

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

.kit-input,
.kit-select,
.kit-textarea {
  min-height: 3rem;
  border-width: 2px;
  border-color: var(--kit-line-strong);
  background: var(--kit-surface);
}

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

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

.kit-picture,
.kit-picture.kit-rounded,
.kit-frame,
.kit-video,
.kit-compare__frame {
  border-radius: var(--kit-media-radius);
}

.kit-carousel__button,
.kit-slideshow__button {
  border-radius: 50%;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

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