/*
 * The Theme Kit in Apothecary'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.
 * Change the look here first: the tokens reach every block at once, a rule for one kit class reaches one part.
 *
 * The look: an old pharmacy's labels. A card is a label: paper under a square ruled frame with a second, finer rule
 * just inside it whose corners are cut across, the way a printed label's inner frame is. Buttons are small labels too:
 * their corners cut, spaced capitals, a fine rule inside their edge. Headings are in the heading face; small
 * labels are spaced capitals in the accent's readable shade; quotations and lead lines are in the heading face's own
 * italic where the font palette loads one (html.apothecary-italic, written by the layout). No shadows: paper on paper.
 *
 * 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 --apothecary-heading-weight and --apothecary-body-strong.
 *
 * --kit-radius, --kit-button-radius and --kit-button-transform are repeated in this theme's line of the shared button
 * table (themes/_shared/assets/css/resilience.css, --chrome-radius, --chrome-button-radius and --chrome-button-case),
 * with the cut corners (--chrome-button-clip), so the cookie notice and the phone action bar match the theme's own cards
 * and buttons: theme-chrome.test.mjs compares them. Change both.
 *
 * The inner rule with cut corners is drawn as a mask of gradients (--apothecary-frame): one line for each edge and one
 * diagonal for each corner, so it is the same in every browser and loads nothing.
 */

.kit-root {
  --kit-radius: 0px;
  --kit-radius-sm: 0px;
  --kit-button-radius: 0px;
  --kit-input-radius: 0px;
  --kit-media-radius: 0px;
  --kit-chip-radius: 2px;
  --kit-heading-weight: var(--apothecary-heading-weight, 600);
  --kit-heading-tracking: 0;
  --kit-button-weight: var(--apothecary-body-strong, 600);
  --kit-button-tracking: 0.12em;
  --kit-button-transform: uppercase;
  --kit-eyebrow-tracking: 0.18em;
  --kit-focus: var(--accent-ink, #45603f);
  --kit-star: var(--accent-ink, #45603f);
  --kit-card-pad: clamp(1.4rem, 2.2vw, 1.85rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 3.6vw, 3rem);
  --kit-gutter: clamp(1rem, 4.5vw, 2.5rem);
  --kit-width-normal: 74rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(3.75rem, 2.75rem + 4.5vw, 6.75rem);
  --kit-pad-compact: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --kit-pad-spacious: clamp(4.75rem, 3.25rem + 6.5vw, 8.75rem);
  --kit-measure: 64ch;
  /* Paper on paper: the label's rules do the work of a shadow. */
  --kit-shadow: none;
  --kit-shadow-hover: none;
  /* The corner cut of a label's inner rule, and of a button. */
  --apothecary-cut: 14px;
  --apothecary-button-cut: 6px;
  /* A rule of 1 px round a box with its corners cut by --apothecary-cut: four edges and four diagonals, and a dot in
     each corner outside the cut, like the inner frame of a printed label. */
  --apothecary-frame:
    linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--apothecary-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(100% - 2 * var(--apothecary-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 0 50% / 1px calc(100% - 2 * var(--apothecary-cut)) no-repeat,
    linear-gradient(#000 0 0) 100% 50% / 1px calc(100% - 2 * var(--apothecary-cut)) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 0 / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 0 / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 100% / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 100% / var(--apothecary-cut) var(--apothecary-cut) no-repeat,
    radial-gradient(circle at 4px 4px, #000 1.6px, transparent 2.2px) 0 0 / 9px 9px no-repeat,
    radial-gradient(circle at 5px 4px, #000 1.6px, transparent 2.2px) 100% 0 / 9px 9px no-repeat,
    radial-gradient(circle at 4px 5px, #000 1.6px, transparent 2.2px) 0 100% / 9px 9px no-repeat,
    radial-gradient(circle at 5px 5px, #000 1.6px, transparent 2.2px) 100% 100% / 9px 9px no-repeat;
  /* The same rule round a button, with the button's own cut. */
  --apothecary-button-frame:
    linear-gradient(#000 0 0) 50% 0 / calc(100% - 2 * var(--apothecary-button-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(100% - 2 * var(--apothecary-button-cut)) 1px no-repeat,
    linear-gradient(#000 0 0) 0 50% / 1px calc(100% - 2 * var(--apothecary-button-cut)) no-repeat,
    linear-gradient(#000 0 0) 100% 50% / 1px calc(100% - 2 * var(--apothecary-button-cut)) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 0 / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 0 / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 0 100% / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1px), #000 50%, transparent calc(50% + 1px)) 100% 100% / var(--apothecary-button-cut) var(--apothecary-button-cut) no-repeat;
  /* An octagon: a box with its four corners cut by --apothecary-button-cut. */
  --apothecary-button-shape: polygon(var(--apothecary-button-cut) 0, calc(100% - var(--apothecary-button-cut)) 0, 100% var(--apothecary-button-cut), 100% calc(100% - var(--apothecary-button-cut)), calc(100% - var(--apothecary-button-cut)) 100%, var(--apothecary-button-cut) 100%, 0 calc(100% - var(--apothecary-button-cut)), 0 var(--apothecary-button-cut));
}

/* The label's two rules, in the words' colour, thinned: the outer one firmer, the inner one finer. Declared again on
   every band and card, because a custom property that reads another is worked out where it is declared, and a band
   changes --kit-text. */
.kit-root,
.kit-section,
.kit-slide,
.kit-card {
  --apothecary-rule: color-mix(in srgb, var(--kit-text) 44%, transparent);
  --apothecary-rule-fine: color-mix(in srgb, var(--kit-text) 24%, transparent);
}

/* A grid's cards stand closer than a section's parts. */
.kit-grid.kit-gap--large {
  --kit-gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* ------------------------------------------------------------------ Words */

/* Headings in the heading face. 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, serif);
  line-height: 1.14;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.15rem, 1.35rem + 3vw, 3.75rem);
  line-height: 1.1;
}

.kit-heading--2 {
  font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.75rem);
}

.kit-heading--3 {
  font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  line-height: 1.25;
}

/* Small labels above headings: spaced capitals in the body face, small, in the accent's readable shade, the way a label
   names its contents. Small enough that a long Lithuanian word in capitals still fits a phone. */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong, 600);
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* A lead line in the heading face, in its own italic where the font palette has one. */
.kit-text--lead {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  font-synthesis: none;
  line-height: 1.45;
}

html.apothecary-italic .kit-text--lead {
  font-style: italic;
}

.kit-card__title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.3rem, 1.18rem + 0.4vw, 1.5rem);
  font-weight: var(--apothecary-heading-weight, 600);
  line-height: 1.22;
}

/* What somebody said, in the heading face, in its own italic where the font palette has one. */
.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  font-weight: 400;
  line-height: 1.45;
}

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

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

/* 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 kit's own size (up to 52 px) splits "1500 m²" there, so the figures here stop at about 44 px. */
.kit-stat__value {
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.4rem + 1.7vw, 2.75rem);
  font-weight: var(--apothecary-heading-weight, 600);
  line-height: 1.1;
}

.kit-stat__label {
  font-size: 0.75rem;
  font-weight: var(--apothecary-body-strong, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kit-price__amount {
  font-family: var(--font-heading, serif);
  font-weight: var(--apothecary-heading-weight, 600);
}

/* Links in text: the accent's readable shade over a fine line. */
.kit-link {
  font-weight: var(--apothecary-body-strong, 600);
  text-underline-offset: 0.28em;
}

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

/* A small label: its corners cut, spaced capitals, a fine rule just inside its edge. The label may take two lines; it
   never runs out of the button. A small button 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). The cut hides an outline drawn outside, so focus is drawn inside, in
   the button's own words' colour. */
.kit-button {
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.kit-button:not(.kit-button--ghost) {
  position: relative;
  clip-path: var(--apothecary-button-shape);
}

.kit-button:not(.kit-button--ghost):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -7px;
}

.kit-button--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.75rem;
}

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

.kit-button--primary:hover {
  box-shadow: inset 0 0 0 4px var(--kit-primary-hover), inset 0 0 0 5px color-mix(in srgb, var(--kit-on-primary) 70%, transparent);
}

/* The outline button: its edge is the cut frame, drawn as a mask; a finer rule stands inside it. */
.kit-button--secondary {
  border-color: transparent;
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px var(--apothecary-rule-fine);
  color: var(--kit-text);
}

.kit-button--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apothecary-rule);
  -webkit-mask: var(--apothecary-button-frame);
  mask: var(--apothecary-button-frame);
  pointer-events: none;
}

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

.kit-button--secondary:hover::before {
  background: var(--kit-text);
}

/* ------------------------------------------------------------------ Labels: cards */

/* A card is a label: the square outer rule on its edge, a finer one four pixels inside it with its corners cut across.
   The inner rule is drawn above the card's ground and under nothing a visitor touches. */
.kit-card--surface,
.kit-card--outline {
  border-color: var(--apothecary-rule);
}

.kit-card--surface::before,
.kit-card--outline::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  background: var(--apothecary-rule-fine);
  -webkit-mask: var(--apothecary-frame);
  mask: var(--apothecary-frame);
  pointer-events: none;
}

/* A card's picture sits inside both rules, like a print mounted on the label. */
.kit-card--surface > .kit-card__media,
.kit-card--outline > .kit-card__media {
  position: relative;
  z-index: 1;
  margin: 10px 10px 0;
}

.kit-card--surface > .kit-card__content,
.kit-card--outline > .kit-card__content {
  position: relative;
  z-index: 1;
}

.kit-card--linked:hover {
  border-color: color-mix(in srgb, var(--kit-text) 75%, transparent);
}

/* ------------------------------------------------------------------ Pictures, portraits, fields */

/* A portrait is a cameo: round, inside a fine ring with a little paper between. */
.kit-avatar {
  box-shadow: 0 0 0 3px var(--kit-surface-alt), 0 0 0 4px var(--apothecary-rule);
}

.kit-input,
.kit-select {
  border-color: var(--apothecary-rule);
}

.kit-accordion__title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  font-weight: var(--apothecary-heading-weight, 600);
  line-height: 1.3;
}

/* ------------------------------------------------------------------ Bands */

/* A band of the brand or the accent colour is engraved: fine diagonal hatching in its own words' colour, too faint to
   stand behind the words. */
.kit-section--inverse,
.kit-section--accent {
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--kit-section-fg) 6%, transparent) 0 1px, transparent 1px 7px);
}