/* ============================================================
   site.css - this site's own styling.

   Loads after base.css and wins on the cascade. Never replaced by an engine
   update, so anything written here survives every version of Shockwave.

   Most brand work belongs in Settings > Branding rather than here: colours,
   fonts, and type scale are custom properties the engine injects, and base.css
   already wires them to every archetype. Reach for this file when a site needs
   layout or treatment that the token system cannot express.

   Custom colours added under Branding appear here as --color-{name}, so a
   colour named "Warm sand" is callable as var(--color-warm-sand).
   ============================================================ */

/* ---- Fonts --------------------------------------------------------------
   Barlow Condensed and DM Sans are not in the Branding screen's family list
   (Settings::FAMILIES, engine 1.16.1), so they are loaded here. Set all three
   Branding families to "System" so the engine stops fetching Outfit, Lora,
   and Quicksand. Move this to Branding if a later engine offers both. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=DM+Sans:wght@400;500;700&display=swap");

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Brand palette, from Figma. The only raw colour values on the site. */
  --color-red:    #ED1C24;
  --color-yellow: #FCEE21;
  --color-cream:  #FFF7EC;
  --color-white:  #FFFFFF;
  --color-black:  #361E19;

  /* Branding roles. These win over Settings > Branding; enter the same values
     there (ink #361E19, paper #FFF7EC, action #ED1C24) so the two agree. */
  --color-ink:    var(--color-black);
  --color-paper:  var(--color-cream);
  --color-action: var(--color-red);

  /* Type. Headings are Barlow Condensed 800 in caps; body is DM Sans 400. */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-accent:  var(--font-body);
  --body-weight:  400;

  --h1-weight: 800;  --h1-transform: uppercase;  --h1-tracking: 0;
  --h2-weight: 800;  --h2-transform: uppercase;  --h2-tracking: 0;
  --h3-weight: 800;  --h3-transform: uppercase;  --h3-tracking: 0;
  --h4-weight: 800;  --h4-transform: uppercase;
  --h5-weight: 800;  --h5-transform: uppercase;
  --h6-weight: 800;  --h6-transform: uppercase;
}

/* ---- Block 1: home hero, class kd-hero ----------------------------------
   Markup, from templates/blocks/hero.php: section > .hero-inner (eyebrow,
   h1.block-heading, p.block-subheading, .block-body, .hero-actions) and
   .hero-media, as siblings. */

/* Split layout: text left, image right. The engine's split rule puts the grid
   on .hero-inner, whose children are the text, not the media, so the grid
   goes on the section instead and .hero-inner goes back to one column. */
.kd-hero[data-layout="split"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-l);
  align-items: center;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
.kd-hero[data-layout="split"] > :not(.block-bg) {
  inline-size: auto;
  max-inline-size: none;
  margin-inline: 0;
}

.kd-hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.kd-hero .block-eyebrow {
  margin-block-end: var(--space-m);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .2em;
}

/* min-content: the heading is only as wide as its widest unbreakable run.
   With a non-breaking space inside each phrase ("A SUB." and "A SMILE."),
   that puts each phrase on its own line at any screen width. */
.kd-hero .block-heading {
  max-inline-size: min-content;
  color: var(--color-red);
  font-size: clamp(3.5rem, 1.5rem + 5.5vw, 6.75rem);
  line-height: .9;
}

.kd-hero .block-subheading {
  max-inline-size: none;
  margin-block-start: var(--space-m);
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1rem + 4.25vw, 5rem);
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
}

.kd-hero .block-body {
  max-inline-size: 42ch;
  margin-block-start: var(--space-l);
}

.kd-hero .hero-actions {
  align-items: center;
  gap: var(--space-l);
  margin-block-start: var(--space-l);
}

/* White on red is 4.4:1, just under AA for body-size text, so the label is
   set bold at 1.2rem, which counts as large text (3:1). */
.kd-hero .cta--primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-s) var(--space-m);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
}
.kd-hero .cta--primary:hover { background: var(--ink); }
.kd-hero .cta--primary::after {
  content: "\2197";
  content: "\2197" / "";
}

.kd-hero .cta--tertiary {
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration-thickness: .1em;
}
.kd-hero .cta--tertiary:hover { color: var(--accent); }

/* Yellow shape behind the sandwich. Delete this rule if the uploaded image
   already has the yellow in it. */
.kd-hero .hero-media {
  position: relative;
  isolation: isolate;
}
.kd-hero .hero-media::before {
  content: "";
  position: absolute;
  inset: 0 0 25% 15%;
  z-index: -1;
  border-radius: 50%;
  background: var(--color-yellow);
  rotate: -12deg;
}
.kd-hero .hero-media img { border-radius: 0; }

/* ---- Block 2: ticker, class kd-ticker -----------------------------------
   Markup, from templates/blocks/list.php: section > ul.feature-list >
   li.feature-item > div.feature-body. A still row for now: the items sit in
   line, centred, with a yellow asterisk between each, and wrap on narrow
   screens. */
.kd-ticker {
  padding-block: var(--space-m);
  background: var(--color-red);
  color: var(--color-white);
}

.kd-ticker .feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs) var(--space-l);
  margin: 0;
}

.kd-ticker .feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: 0;
  border: 0;
}
.kd-ticker .feature-item + .feature-item::before {
  content: "\2733";
  content: "\2733" / "";
  color: var(--color-yellow);
  font-size: var(--step-1);
  line-height: 1;
}

.kd-ticker .feature-body {
  max-inline-size: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}