/*
 * Saffron: the Theme Kit in Saffron's own look. Linked after themes/_shared/assets/css/kit.css, so the variables set
 * here replace its defaults for every block and module section.
 *
 * Warm and a little retro bistro: headings in a big display face (--saffron-heading-weight, the one weight the font
 * palette loads, set by the layout), small labels as ribbon banners with forked ends, solid enamel-like buttons in
 * small capitals, and lists, prices and opening hours that read like a menu, with a dotted leader between a dish and
 * its price. The primary and accent bands have scalloped edges, big icons sit on little plates, numbered steps sit in
 * round tokens, and cards are warm paper with a soft shadow (a dashed edge, like a coupon, when they are outlined).
 * Corners are only slightly rounded. This file may load nothing, so every shape here is drawn with CSS gradients,
 * clip-paths and borders.
 */

.kit-root {
  --saffron-ink: var(--text-primary, #2b190e);
  --kit-radius: 0.6rem;
  --kit-radius-sm: 0.45rem;
  --kit-media-radius: 0.6rem;
  --kit-button-radius: 0.45rem;
  --kit-input-radius: 0.45rem;
  --kit-chip-radius: 0.3rem;
  --kit-shadow: 0 1px 2px color-mix(in srgb, var(--saffron-shade, #1a0f08) 7%, transparent), 0 16px 32px -22px color-mix(in srgb, var(--saffron-shade, #1a0f08) 42%, transparent);
  --kit-shadow-hover: 0 2px 4px color-mix(in srgb, var(--saffron-shade, #1a0f08) 8%, transparent), 0 26px 44px -24px color-mix(in srgb, var(--saffron-shade, #1a0f08) 55%, transparent);
  --kit-heading-weight: var(--saffron-heading-weight, 400);
  --kit-heading-tracking: 0.005em;
  --kit-button-weight: var(--saffron-strong-weight, 600);
  --kit-button-tracking: 0.08em;
  --kit-button-transform: uppercase;
  --kit-eyebrow-tracking: 0.16em;
  --kit-star: var(--accent, #f2a516);
  /* The focus ring uses the readable accent; a band sets its own. */
  --kit-focus: var(--accent-ink, #9c3f08);
  --kit-card-pad: clamp(1.35rem, 2.2vw, 1.9rem);
  --kit-gap-medium: 1.5rem;
  --kit-gap-large: clamp(2rem, 4vw, 3rem);
  --kit-gutter: var(--saffron-gutter, clamp(1.25rem, 4vw, 3rem));
  --kit-width-normal: 74rem;
  --kit-width-narrow: 44rem;
  --kit-width-wide: 90rem;
  --kit-pad-normal: clamp(3.75rem, 7.5vw, 6.5rem);
  --kit-pad-compact: clamp(2.5rem, 4.5vw, 3.75rem);
  --kit-pad-spacious: clamp(5rem, 10vw, 8.5rem);
  --kit-speed: 240ms;
  --kit-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* The primary and accent bands run the full width with a row of scallops along their top and bottom edges, drawn in the
   band's own colour just outside it, like the edge of an awning or a cake box. They sit above their neighbours so the
   scallops show over a plain or muted section. */
.kit-section--inverse:not(.kit-section--video),
.kit-section--accent:not(.kit-section--video) {
  z-index: 1;
}

.kit-section--inverse:not(.kit-section--video)::before,
.kit-section--inverse:not(.kit-section--video)::after,
.kit-section--accent:not(.kit-section--video)::before,
.kit-section--accent:not(.kit-section--video)::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: var(--saffron-scallop, 0.7rem);
  pointer-events: none;
}

.kit-section--inverse:not(.kit-section--video)::before,
.kit-section--accent:not(.kit-section--video)::before {
  bottom: calc(100% - 1px);
  background: radial-gradient(circle var(--saffron-scallop, 0.7rem) at 50% 100%, var(--kit-section-bg) 94%, transparent 100%) 50% 0 / calc(2 * var(--saffron-scallop, 0.7rem)) var(--saffron-scallop, 0.7rem) repeat-x;
}

.kit-section--inverse:not(.kit-section--video)::after,
.kit-section--accent:not(.kit-section--video)::after {
  top: calc(100% - 1px);
  background: radial-gradient(circle var(--saffron-scallop, 0.7rem) at 50% 0, var(--kit-section-bg) 94%, transparent 100%) 50% 0 / calc(2 * var(--saffron-scallop, 0.7rem)) var(--saffron-scallop, 0.7rem) repeat-x;
}

/* On a dark band or a photograph the main button keeps the page's accent colour, outlined in the band's text colour so
   it stands out from any band. On the accent band it takes the primary colour. */
:is(.kit-section--inverse, .kit-section--image, .kit-slide) .kit-button--primary,
:is(.kit-section--inverse, .kit-section--image, .kit-slide) .kit-button--primary:hover {
  border-color: var(--kit-section-fg);
  background: var(--accent, #f2a516);
  color: var(--on-accent, #2b190e);
}

.kit-section--accent .kit-button--primary,
.kit-section--accent .kit-button--primary:hover {
  border-color: var(--kit-section-fg);
  background: var(--primary, #b3301b);
  color: var(--on-primary, #fff6e5);
}

/* ------------------------------------------------------------------ Headings and labels */

/* Big display headings, set with room to breathe. Smaller titles use the title face: the display face, or the body
   face when the display face is a script. */
.kit-heading {
  line-height: calc(1.1 * var(--saffron-leading, 1));
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.7rem, 1.5rem + 4.4vw, 5.4rem);
  line-height: calc(1.04 * var(--saffron-leading, 1));
}

.kit-heading--2 {
  font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.5rem);
  line-height: calc(1.08 * var(--saffron-leading, 1));
}

.kit-heading--3,
.kit-heading--4 {
  font-family: var(--saffron-title-font, var(--font-heading, serif));
  font-weight: var(--saffron-title-weight, var(--kit-heading-weight));
}

.kit-heading--3 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  line-height: 1.2;
}

/* Small labels are ribbon banners: small capitals on the accent colour, with forked ends. */
.kit-eyebrow,
.kit-card__eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.38rem 1.25rem;
  background: var(--kit-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 50%, 100% 100%, 0 100%, 0.55rem 50%);
  color: var(--kit-on-accent);
  font-size: 0.72rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.kit-eyebrow {
  margin-bottom: 0.9rem;
}

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

/* A numbered step (a plain card's label) is a round token in the primary colour with the number in the display face. */
.kit-card--plain .kit-card__eyebrow {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 0.4rem;
  padding: 0;
  border-radius: 50%;
  background: var(--kit-primary);
  box-shadow: 0 0 0 3px var(--kit-surface-alt);
  clip-path: none;
  color: var(--kit-on-primary);
  font-family: var(--font-heading, serif);
  font-size: 1.35rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

/* ------------------------------------------------------------------ Buttons and links */

/* Solid, enamel-like buttons in small capitals with a slightly darker lower edge; they lift on a warm shadow on hover
   and press in on a click. The second button is an outline. */
.kit-button {
  min-height: 3.1rem;
  padding: 0.8rem 1.6rem;
  border-width: 2px;
  font-size: 0.9rem;
  line-height: 1.25;
}

.kit-button--small {
  min-height: 2.65rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
}

.kit-button--primary {
  border-color: transparent;
  background: var(--kit-accent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 16%, transparent);
  color: var(--kit-on-accent);
}

.kit-button--primary:hover {
  border-color: transparent;
  background: var(--kit-accent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 16%, transparent), 0 12px 22px -12px color-mix(in srgb, var(--saffron-shade, #1a0f08) 70%, transparent);
  color: var(--kit-on-accent);
  transform: translateY(-2px);
}

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

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

.kit-button--primary:active,
.kit-button--secondary:active {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #000 16%, transparent);
  transform: translateY(1px);
}

.kit-button--ghost {
  padding-inline: 0.25rem;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.kit-button--ghost:hover {
  background: none;
  text-decoration-style: solid;
}

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

.kit-link:hover {
  text-decoration-style: dotted;
}

/* ------------------------------------------------------------------ Cards and pictures */

/* Cards are warm paper with a soft shadow; an outlined card has a dashed edge like a coupon. A linked card lifts on
   hover and its picture leans in. */
.kit-card--surface {
  border-color: var(--kit-line);
  background: var(--kit-surface);
  box-shadow: var(--kit-shadow);
}

.kit-card--outline {
  border: 2px dashed var(--kit-line-strong);
  background: transparent;
}

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

.kit-card--linked.kit-card--surface:hover {
  box-shadow: var(--kit-shadow-hover);
}

.kit-card__media img {
  transition: transform 700ms var(--kit-ease);
}

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

.kit-card__title {
  font-family: var(--saffron-title-font, var(--font-heading, serif));
  font-size: 1.35rem;
  font-weight: var(--saffron-title-weight, var(--kit-heading-weight));
  letter-spacing: 0.005em;
  line-height: 1.22;
}

.kit-card__meta {
  font-size: 0.78rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Big icons in a row sit on a little plate: a disc with a fine rim inside its edge. */
.kit-grid .kit-icon--large {
  box-sizing: content-box;
  padding: 0.85rem;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--kit-surface) 76%, var(--kit-line-strong) 77% 80%, var(--kit-surface) 81%);
  box-shadow: 0 0 0 1px var(--kit-line), 0 8px 16px -10px color-mix(in srgb, var(--saffron-shade, #1a0f08) 50%, transparent);
  color: var(--kit-accent-text);
  stroke-width: 1.6;
}

.kit-section--muted .kit-grid .kit-icon--large {
  --kit-surface: var(--surface, #fffcf5);
}

/* A gallery's pictures lean in a little when you point at them. */
.kit-picture img {
  transition: transform 700ms var(--kit-ease);
}

.kit-grid > .kit-picture:hover img {
  transform: scale(1.04);
}

/* Round photos of people get a white rim, like a plate. */
.kit-avatar {
  border: 3px solid var(--kit-surface);
  box-shadow: 0 0 0 1px var(--kit-line-strong);
}

/* ------------------------------------------------------------------ The menu: lists, prices and opening hours */

/* Every line with a value on the right (a price) gets a dotted leader to it, as on a menu; the price is set in the
   display face. */
.kit-list-item__line:has(> .kit-list-item__meta) {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.6rem;
}

.kit-list-item__line:has(> .kit-list-item__meta)::after,
.kit-list--menu .kit-list-item__line:has(.kit-list-item__meta)::after {
  content: "";
  order: 1;
  flex: 1 1 1rem;
  min-width: 1rem;
  height: 0.5em;
  border: 0;
  background: radial-gradient(circle, var(--kit-line-strong) 1.1px, transparent 1.7px) 0 100% / 0.45rem 0.45rem repeat-x;
  transform: none;
}

.kit-list-item__title {
  order: 0;
}

.kit-list-item__meta {
  flex-shrink: 0;
  order: 2;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 1.1em;
  font-weight: var(--kit-heading-weight);
}

.kit-list--menu {
  gap: 1.15rem;
}

.kit-list--menu .kit-list-item__title {
  font-family: var(--saffron-title-font, var(--font-heading, serif));
  font-size: 1.15rem;
  font-weight: var(--saffron-title-weight, var(--kit-heading-weight));
  letter-spacing: 0.005em;
}

.kit-list--menu .kit-list-item__note {
  font-style: normal;
}

/* A ticked list (the features of a plan) reads like a menu card: each line on a dotted rule. A line that is not
   included is quieter. */
.kit-list--check {
  gap: 0;
}

.kit-list--check > .kit-list-item {
  padding-block: 0.6rem;
  border-bottom: 2px dotted var(--kit-line);
}

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

.kit-list--check .kit-list-item__title {
  font-weight: 400;
}

.kit-list--check > .kit-list-item:has(> .kit-list-item__icon),
.kit-list--check > .kit-list-item:has(> .kit-list-item__icon) .kit-list-item__title,
.kit-list--check .kit-list-item__icon {
  color: var(--kit-muted);
}

.kit-list--bullets > .kit-list-item::marker,
.kit-list--numbers > .kit-list-item::marker {
  font-weight: var(--saffron-strong-weight, 600);
}

/* Facts such as opening hours: the label, a dotted leader, then the value. */
.kit-key-values__row {
  flex-wrap: nowrap;
  gap: 0.6rem;
  padding-block: 0.5rem;
  border-bottom: 0;
}

.kit-key-values__row::after {
  content: "";
  order: 1;
  flex: 1 1 1rem;
  min-width: 1rem;
  height: 0.5em;
  background: radial-gradient(circle, var(--kit-line-strong) 1.1px, transparent 1.7px) 0 100% / 0.45rem 0.45rem repeat-x;
}

.kit-key-values__row dt {
  order: 0;
}

.kit-key-values__row dd {
  order: 2;
  margin-inline-start: 0;
}

/* Numbers and prices are set in the display face, in the accent colour. */
.kit-output--large,
.kit-price__amount,
.kit-summary__amount,
.kit-stat__value {
  font-family: var(--font-heading, serif);
  font-weight: var(--kit-heading-weight);
  letter-spacing: 0.005em;
}

.kit-stat__value,
.kit-price__amount {
  color: var(--kit-accent-text);
}

.kit-stat__label {
  font-size: 0.8rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Quotes, questions and text */

/* Quotes open with a big quote mark in the display face; the words stay in the easy body face. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  font-style: normal;
  line-height: 1.6;
}

.kit-quote__text::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  margin-bottom: 0.35rem;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 3.4em;
  font-weight: var(--kit-heading-weight);
  line-height: 1;
}

.kit-quote__author {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kit-quote__role {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Questions sit on dotted lines, like a menu; the title face for the question, a chevron in the accent colour. */
.kit-accordion {
  border-top: 2px dotted var(--kit-line-strong);
}

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

.kit-accordion__title {
  padding-block: 1.15rem;
  font-family: var(--saffron-title-font, var(--font-heading, serif));
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  font-weight: var(--saffron-title-weight, var(--kit-heading-weight));
  letter-spacing: 0.005em;
  line-height: 1.3;
}

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

.kit-rich-text blockquote {
  margin-inline: 0;
  padding: 1.25rem 0.5rem;
  border-block: 2px dotted var(--kit-line-strong);
  border-inline-start: 0;
  color: var(--kit-text);
  font-size: 1.15em;
  line-height: 1.5;
  text-align: center;
}

/* A rule in a text is two fine lines with a dot between them. */
.kit-rich-text hr {
  width: 7rem;
  height: 0.6rem;
  margin-inline: auto;
  border: 0;
  background:
    radial-gradient(circle closest-side, var(--kit-accent-text) 92%, transparent) 50% 50% / 0.6rem 0.6rem no-repeat,
    linear-gradient(var(--kit-line-strong) 0 0) 0 50% / 40% 1.5px no-repeat,
    linear-gradient(var(--kit-line-strong) 0 0) 100% 50% / 40% 1.5px no-repeat;
}

.kit-rich-text :is(th, td) {
  border-bottom: 2px dotted var(--kit-line);
}

/* ------------------------------------------------------------------ Fields and small parts */

/* Fields are calm boxes with slightly rounded corners; the one you are typing in gets a ring in the accent colour.
   Labels are small capitals. */
.kit-input {
  min-height: 3.1rem;
  padding-inline: 1rem;
  border: 1.5px solid var(--kit-line-strong);
  background-color: var(--kit-surface);
  transition: border-color var(--kit-speed) ease, box-shadow var(--kit-speed) ease;
}

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

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

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

.kit-input:focus-visible {
  outline: 2px solid var(--kit-accent-text);
  outline-offset: 1px;
}

.kit-field__label {
  font-size: 0.8rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kit-badge,
.kit-chip {
  font-size: 0.75rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.06em;
}

.kit-tabs__tab {
  font-size: 0.82rem;
  font-weight: var(--saffron-strong-weight, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kit-carousel__button {
  border: 1.5px solid var(--kit-line-strong);
  border-radius: 50%;
  background: var(--kit-surface);
}

.kit-carousel__button:hover:not(:disabled) {
  border-color: var(--kit-accent-text);
}

.kit-avatar--initials {
  font-weight: var(--kit-heading-weight);
}

.kit-notice__title,
.kit-empty__title,
.kit-download__label,
.kit-list-item__title,
.kit-key-values__row dd {
  font-weight: var(--saffron-strong-weight, 600);
}

.kit-dialog,
.kit-drawer--right.is-ready,
.kit-drawer--bottom.is-ready {
  border: 1px solid var(--kit-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  .kit-card--linked:hover,
  .kit-button--primary:hover,
  .kit-button--primary:active,
  .kit-button--secondary:active,
  .kit-card--linked:hover .kit-card__media img,
  .kit-grid > .kit-picture:hover img {
    transform: none;
  }
}