@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --kf-paper: #FAF8F3;
  --kf-ink:   #2B2B28;
  --kf-rule:  #6B7256;
  --kf-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;

  --font-sans: 'EB Garamond', Georgia, serif;
  --font-serif: 'EB Garamond', Georgia, serif;
  --color--primary-hue: 74;
  --color--primary-saturation: 24%;
  --color--primary-lightness: 38%;

  --max-width: 90rem; /* 1440px centered editorial column */
  --content-left: var(--sp);
}

body {
  background-color: var(--kf-paper);
  color: var(--kf-ink);
  font-family: var(--kf-serif);
  font-size: 1.18rem;
  line-height: 1.6;
  font-feature-settings: "onum" 1;
}

h1, h2, h3, h4,
.node__title,
.page-title,
.block__title {
  font-family: var(--kf-serif);
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--kf-ink);
}
h1, .node__title, .page-title { font-size: 2.4rem; line-height: 1.15; }

.node__title,
.page-title { margin-bottom: 1rem; }

.field__label {
  font-family: var(--kf-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kf-rule);
  border-top: 1px solid var(--kf-rule);
  padding-top: 0.4rem;
  margin-top: 1.4rem;
}

a { color: var(--kf-ink); text-decoration-color: var(--kf-rule); }
a:hover { color: var(--kf-rule); }

.site-header__initial,
.site-header,
.site-header__inner { background-color: var(--kf-paper) !important; }
.site-header { border-bottom: 1px solid var(--kf-rule); }
.site-branding__name a,
.site-branding__name { color: var(--kf-ink); font-family: var(--kf-serif); }

.primary-nav__menu-link,
nav a { font-family: var(--kf-serif); letter-spacing: 0.02em; }

/* ---- Desktop nav: compact the items so all ~13 fit on one row.
   Olivero's JS adds body.is-always-mobile-nav (hamburger at all widths)
   whenever the menu is too wide — Olivero's default --sp2 item gaps
   guarantee overflow, so we tighten until it fits. ---- */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
    margin-inline-end: 0.875rem;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1 {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
}

/* shorthand `background` (not -color) — Olivero's dark footer is a
   linear-gradient, i.e. a background-image, which background-color can't beat */
.site-footer,
.site-footer__top,
.site-footer__bottom {
  background: var(--kf-paper) !important;
  border-top: 1px solid var(--kf-rule);
}
.site-footer,
.site-footer *,
.site-footer a { color: var(--kf-ink); }
.site-footer__bottom * {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}

.layout-content,
main,
.kf-recipe { max-width: none; }

/* ---- Header / branding rework ---- */
.site-header,
.site-header__inner,
.site-header__initial,
.site-header__inner-container,
.site-branding,
.site-branding__inner,
.mobile-buttons,
.header-nav,
.region--header {
  background-color: var(--kf-paper) !important;
  background-image: none !important;
}
/* logo already carries the name + tagline — hide Olivero's text branding */
.site-branding__name,
.site-branding__slogan,
.site-branding__text { display: none !important; }
/* let the logo size to its artwork instead of Olivero's fixed width */
.site-logo,
.site-branding__logo { overflow: visible !important; }
.site-branding img,
.site-logo img { height: 78px !important; width: auto !important; max-width: none !important; }
@media (max-width: 50rem) {
  .site-branding img,
  .site-logo img { height: 54px !important; }
}
/* remove Olivero's decorative background pattern (the droplets) */
body,
.layout-container,
.dialog-off-canvas-main-canvas,
main { background-image: none !important; }

/* ---- Layout: centered editorial column + aligned edges (2026-06-10) ----
   Olivero leaves .page-wrapper/.container left-stuck (margin 0) and offsets
   main content 253px into its grid; logo indented 36px. Center everything
   and share one left edge. */
.page-wrapper,
.container { margin-inline: auto; }
.region--content.grid-full,
.region--content-above.grid-full,
.region--breadcrumb.grid-full { display: block; }
.site-branding__inner { padding-inline-start: 0; }

/* ============ Category / taxonomy listing layouts ============
   Category, season and holiday pages are all the taxonomy_term view, rendering
   nodes in the "teaser" view mode. Without a layout here they fall back to
   Olivero's single stack (one giant card per row).

   Five variants ship at once, each behind a body class set from
   /admin/appearance/settings/kulkafood → "Category page layout".
   The class comes from kulkafood_preprocess_html() in kulkafood.theme;
   the select lives in theme-settings.php.

   Adding a variant: pick a class, add a block here, add an option to the select
   in theme-settings.php, and add the machine name to $allowed in kulkafood.theme.
   Never edit a variant in place to try a new direction — add a new one, so the
   old one survives and switching back stays a dropdown, not a rewrite.

   All rules are scoped to .view-taxonomy-term. The homepage teaser zones
   (.kf-home__featured / __grid / __index) share the same markup and must not
   be affected by anything in this section. */


/* ---- Variant: index — aligned columns, no illustrations (default) ----
   Title, ingredients, source and status in fixed columns so the eye runs
   straight down each one. Fastest to scan; best for choosing. */
.kf-cat--index .view-taxonomy-term .view-content { display: block; margin-bottom: 3rem; }
.kf-cat--index .view-taxonomy-term .views-row {
  border-top: 1px solid color-mix(in srgb, var(--kf-rule) 45%, transparent);
}
.kf-cat--index .view-taxonomy-term .kf-teaser {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.9fr 5.5rem;
  gap: 0 1.5rem;
  align-items: baseline;
  padding: 0.7rem 0;
}
/* display:contents promotes the text block's children to grid items so they
   align as columns. Columns are assigned explicitly, not by auto-placement —
   a recipe with no ingredients would otherwise slide its source left a column. */
.kf-cat--index .view-taxonomy-term .kf-teaser__text { display: contents; }
.kf-cat--index .view-taxonomy-term .kf-teaser__title { grid-column: 1; font-size: 1.15rem; margin: 0; }
.kf-cat--index .view-taxonomy-term .kf-teaser__ingredients { grid-column: 2; margin: 0; }
.kf-cat--index .view-taxonomy-term .kf-teaser__source { grid-column: 3; margin: 0; }
.kf-cat--index .view-taxonomy-term .kf-teaser__cap { display: none; }
/* The illustration goes, but its link is also the status badge's parent, so the
   link stays and becomes the status column. Hide EVERY child — the image field
   renders wrapper divs around the img, and leaving those in place kept an empty
   block in the row that held height and broke baseline alignment. */
.kf-cat--index .view-taxonomy-term .kf-teaser__img {
  grid-column: 4;
  aspect-ratio: auto;
  background: none;
  overflow: visible;
  line-height: 1.3;
}
.kf-cat--index .view-taxonomy-term .kf-teaser__img > * { display: none; }
.kf-cat--index .view-taxonomy-term .kf-teaser__img > .kf-teaser__status {
  position: static;
  display: inline-block;
  background: none;
  color: var(--kf-rule-text);
  font-size: 0.66rem;
  padding: 0;
  letter-spacing: 0.1em;
}
.kf-cat--index .view-taxonomy-term .kf-teaser__img > .kf-teaser__status.kf-status--to-cook {
  background: none;
  color: var(--kf-ink);
}
/* Drop the "Original Source:" prefix — the column position already says it. */
.kf-cat--index .view-taxonomy-term .kf-teaser__source::before { content: none; }
@media (max-width: 60rem) {
  .kf-cat--index .view-taxonomy-term .kf-teaser { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .kf-cat--index .view-taxonomy-term .kf-teaser__title,
  .kf-cat--index .view-taxonomy-term .kf-teaser__ingredients,
  .kf-cat--index .view-taxonomy-term .kf-teaser__source,
  .kf-cat--index .view-taxonomy-term .kf-teaser__img { grid-column: 1; }
}


/* ---- Variant: textlead — two columns, small illustration trailing right ----
   Words own the left edge; the artwork is present but subordinate. */
.kf-cat--textlead .view-taxonomy-term .view-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.75rem;
  margin-bottom: 3rem;
}
.kf-cat--textlead .view-taxonomy-term .views-row {
  min-width: 0;
  display: flex;
  border-top: 1px solid color-mix(in srgb, var(--kf-rule) 45%, transparent);
}
.kf-cat--textlead .view-taxonomy-term .kf-teaser {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  width: 100%;
}
/* The image link comes first in the template; `order` moves it right without
   flipping the whole row (row-reverse would drag alignment with it). */
.kf-cat--textlead .view-taxonomy-term .kf-teaser__img {
  order: 2;
  flex: 0 0 56px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--kf-rule) 8%, transparent);
  border-radius: 2px;
}
.kf-cat--textlead .view-taxonomy-term .kf-teaser__img img,
.kf-cat--textlead .view-taxonomy-term .kf-teaser__img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kf-cat--textlead .view-taxonomy-term .kf-teaser__text { order: 1; flex: 1; min-width: 0; }
.kf-cat--textlead .view-taxonomy-term .kf-teaser__title { font-size: 1.2rem; margin: 0; }
.kf-cat--textlead .view-taxonomy-term .kf-teaser__cap { display: none; }
.kf-cat--textlead .view-taxonomy-term .kf-teaser__ingredients { margin-top: 0.2rem; }
.kf-cat--textlead .view-taxonomy-term .kf-teaser__source { margin-top: 0.15rem; }
.kf-cat--textlead .view-taxonomy-term .kf-teaser__status {
  top: auto; right: auto; bottom: 0; left: 0;
  font-size: 0.55rem;
  padding: 0.08rem 0.26rem;
  border-radius: 2px 0 0 0;
}
@media (max-width: 60rem) {
  .kf-cat--textlead .view-taxonomy-term .view-content { grid-template-columns: 1fr; gap: 0; }
}


/* ---- Variant: rows — two columns, 84px illustration leading left ---- */
.kf-cat--rows .view-taxonomy-term .view-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin-bottom: 3rem;
}
.kf-cat--rows .view-taxonomy-term .views-row {
  min-width: 0;
  display: flex;
  border-top: 1px solid color-mix(in srgb, var(--kf-rule) 45%, transparent);
}
.kf-cat--rows .view-taxonomy-term .kf-teaser {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding: 1rem 0;
  width: 100%;
}
.kf-cat--rows .view-taxonomy-term .kf-teaser__img {
  flex: 0 0 84px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--kf-rule) 8%, transparent);
  border-radius: 2px;
}
.kf-cat--rows .view-taxonomy-term .kf-teaser__img img,
.kf-cat--rows .view-taxonomy-term .kf-teaser__img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kf-cat--rows .view-taxonomy-term .kf-teaser__text { flex: 1; min-width: 0; }
.kf-cat--rows .view-taxonomy-term .kf-teaser__title { font-size: 1.3rem; margin: 0; }
.kf-cat--rows .view-taxonomy-term .kf-teaser__cap { display: none; }
.kf-cat--rows .view-taxonomy-term .kf-teaser__ingredients { margin-top: 0.25rem; }
.kf-cat--rows .view-taxonomy-term .kf-teaser__source { margin-top: 0.2rem; }
.kf-cat--rows .view-taxonomy-term .kf-teaser__status {
  top: auto; right: auto; bottom: 0; left: 0;
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  border-radius: 2px 0 0 0;
}
@media (max-width: 60rem) {
  .kf-cat--rows .view-taxonomy-term .view-content { grid-template-columns: 1fr; gap: 0; }
}


/* ---- Variant: grid3 — the original card grid, 3 across ----
   Images at their natural aspect ratio, so card bottoms don't align. This is
   what the site shipped with before 2026-07-25; kept verbatim. */
.kf-cat--grid3 .view-taxonomy-term .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 3rem;
}
.kf-cat--grid3 .view-taxonomy-term .views-row { min-width: 0; }
.kf-cat--grid3 .view-taxonomy-term .kf-teaser__title { font-size: 1.25rem; }
@media (max-width: 60rem) {
  .kf-cat--grid3 .view-taxonomy-term .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .kf-cat--grid3 .view-taxonomy-term .view-content { grid-template-columns: 1fr; }
}


/* ---- Variant: grid4 — refined card grid, 4 across ----
   Fixed 4:3 image box so image bottoms line up across a row; flex column so
   source lines share a baseline. Recipes with no illustration hold an empty
   box instead of collapsing. */
.kf-cat--grid4 .view-taxonomy-term .view-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  margin-bottom: 3rem;
}
.kf-cat--grid4 .view-taxonomy-term .views-row { min-width: 0; display: flex; }
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__title { font-size: 1.15rem; }
.kf-cat--grid4 .view-taxonomy-term .kf-teaser {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--kf-rule) 8%, transparent);
  border-radius: 2px;
}
/* contain, not cover: illustrations have text typeset inside the artwork, so
   cropping to fill would slice the lettering off. */
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__img img,
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kf-cat--grid4 .view-taxonomy-term .kf-teaser__source { margin-top: auto; padding-top: 0.4rem; }
@media (max-width: 75rem) {
  .kf-cat--grid4 .view-taxonomy-term .view-content { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 60rem) {
  .kf-cat--grid4 .view-taxonomy-term .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .kf-cat--grid4 .view-taxonomy-term .view-content { grid-template-columns: 1fr; }
}

/* ---- Recipe full template ---- */
.kf-recipe__byline { font-style: italic; color: var(--kf-rule); margin-bottom: 1.5rem; }
.kf-recipe__grid { display: block; }
@media (min-width: 60rem) {
  .kf-recipe__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
}
.kf-recipe__right { font-size: 1.05em; }
.kf-recipe__meta { margin-top: 2rem; }
.kf-recipe__left .field--name-field-recipe-image img,
.kf-recipe__left .field--name-field-recipe-image svg { width: 100%; height: auto; margin-bottom: 1.5rem; }

/* Recipe ingredient list sits above the body (right column); flow into two
   balanced columns so a long list doesn't run down the page. */
.kf-recipe__right .field--name-field-ingredients { margin-bottom: 1.75rem; }
.kf-recipe__right .field--name-field-ingredients ul,
.kf-recipe__right .field--name-field-ingredients .field__items { columns: 2; column-gap: 2.5rem; }
.kf-recipe__right .field--name-field-ingredients li,
.kf-recipe__right .field--name-field-ingredients .field__item { break-inside: avoid; }

/* ============ Homepage ============ */
.kf-home { padding-top: 1rem; }

/* Shared teaser images (PNG or SVG) */
.kf-teaser__img { display: block; }
.kf-teaser__img img,
.kf-teaser__img svg { display: block; width: 100%; height: auto; border-radius: 2px; }

.kf-teaser__cap {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kf-rule); margin-top: 0.5rem;
}
.kf-teaser__cap a { color: var(--kf-rule); text-decoration: none; }
.kf-teaser__title { font-weight: 500; line-height: 1.2; margin: 0.15rem 0 0; }
.kf-teaser__title a { color: var(--kf-ink); text-decoration: none; }
.kf-teaser__title a:hover { color: var(--kf-rule); }

/* Featured: same 3-col grid as the cards below, so the image lines up with the 2nd card.
   Text = column 1, image = columns 2-3. Text floats to the top. */
.kf-home__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* 24px — on the 8pt grid */
  align-items: start;
  text-align: left;
  margin-bottom: 3rem;
}
.kf-feature__img { grid-column: 2 / 4; }
.kf-feature__title { font-size: 2.6rem; line-height: 1.15; }
.kf-feature__title a { color: var(--kf-ink); text-decoration: none; }
.kf-feature__title a:hover { color: var(--kf-rule); }
.kf-home__featured .kf-home__intro { font-style: italic; font-size: 1.25rem; margin: 0.6rem 0 0; max-width: none; }
.kf-home__featured .kf-feature__img .kf-teaser__text { display: none; }
.kf-home__featured .kf-feature__img img,
.kf-home__featured .kf-feature__img svg { width: 100%; max-width: none; }
@media (max-width: 48rem) {
  .kf-home__featured { grid-template-columns: 1fr; }
  .kf-feature__img { grid-column: auto; }
}

/* Grid: 3 cards — scope to the OUTER grid field only (> avoids nested image fields) */
.kf-home__grid > .field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.kf-home__grid .kf-teaser__title { font-size: 1.25rem; }
@media (max-width: 48rem) {
  .kf-home__grid > .field { grid-template-columns: 1fr; }
}

/* Index rows — scope to the OUTER list field only.
   Lighter hairlines + roomier rows so it reads editorial, not admin-table. */
.kf-home__index > .field > .field__item { border-top: 1px solid color-mix(in srgb, var(--kf-rule) 45%, transparent); }
.kf-home__index > .field > .field__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--kf-rule) 45%, transparent); }
.kf-home__index .kf-teaser { display: flex; gap: 1.5rem; align-items: center; padding: 1rem 0; }
.kf-home__index .kf-teaser__img { flex: 0 0 96px; }
.kf-home__index .kf-teaser__img img,
.kf-home__index .kf-teaser__img svg { width: 96px; }
.kf-home__index .kf-teaser__text { flex: 1; }
.kf-home__index .kf-teaser__cap { margin-top: 0.1rem; }
.kf-home__index .kf-teaser__title { font-size: 1.3rem; }

/* hide Olivero empty social-media rail (grey left bar) */
.social-bar { display: none; }

/* ================= A11y polish (2026-06) ================= */
:root { --kf-rule-text: #565C42; } /* darker olive (6.6:1) for small text; hairline borders keep --kf-rule */

.field__label,
.kf-teaser__cap,
.kf-teaser__cap a,
.kf-recipe__byline { color: var(--kf-rule-text); }
a:hover { color: var(--kf-rule-text); }

/* Always-visible keyboard focus ring (reinforces Olivero core) */
a:focus-visible,
button:focus-visible,
.primary-nav__menu-link:focus-visible,
.kf-teaser__title a:focus-visible {
  outline: 2px solid var(--kf-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================= Featured ingredients (2026-06) =================
   Replaces the title + 4-ingredient line that used to be baked into the
   recipe SVGs. Real text now: selectable, searchable, AA-contrast olive. */
.kf-featured-ingredients,
.kf-teaser__ingredients {
  font-style: italic;
  color: var(--kf-rule-text);
  line-height: 1.5;
  margin: 0.35rem 0 0;
  padding: 0;
}
.kf-featured-ingredients span:not(:last-child)::after,
.kf-teaser__ingredients span:not(:last-child)::after {
  content: " · ";
  color: var(--kf-rule);
}
.kf-teaser__ingredients { font-size: 0.9rem; }

/* Recipe page: larger, centred italic line above the image — echoes the old
   baked-in title/ingredient block. Divider centred beneath it. */
.kf-featured-ingredients {
  font-size: 1.1rem;
  text-align: center;
  margin: 0 0 0.85rem;
}
.kf-featured-ingredients::after {
  content: "";
  display: block;
  width: 160px;
  height: 2px;
  background: var(--kf-rule);
  margin: 0.9rem auto 0;
}

/* ================= Browse-card enrichments (2026-06) =================
   Status badge on the card image + a source line under the ingredients. */
.kf-teaser__img { position: relative; display: block; }
.kf-teaser__status {
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-family: var(--kf-serif); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 2px;
  color: var(--kf-paper); background: var(--kf-rule-text);
}
.kf-teaser__status.kf-status--to-cook { background: var(--kf-ink); }
.kf-teaser__source {
  font-style: italic; font-size: 0.82rem; color: var(--kf-rule-text);
  margin: 0.25rem 0 0;
}
.kf-teaser__source::before { content: "Original Source: "; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72em; color: var(--kf-rule); }