/* ==========================================================================
   Home Fresh Eats — design system
   Palette sampled from the site logo: #E06F35 orange, #6C774D olive.
   Every colour pairing used for text is checked to WCAG AA (4.5:1) or better;
   the logo orange itself is 3.23:1 on white so it is used only for display
   type and non-text accents, never for body copy or small labels.
   ========================================================================== */

:root {
  /* Brand */
  --hfe-orange:       #E06F35;  /* logo orange — display type + accents only */
  --hfe-orange-ink:   #B85426;  /* 4.85:1 on white — links, buttons, labels  */
  --hfe-orange-deep:  #A94B20;  /* 5.65:1 — hover / active                   */
  --hfe-olive:        #6C774D;  /* 4.79:1 — secondary brand                  */
  --hfe-olive-deep:   #5A6440;  /* 6.30:1 — olive text on light              */

  /* Neutrals */
  --hfe-ink:          #1F2421;  /* 15.76:1 — headings and body               */
  --hfe-muted:        #5A5F58;  /*  6.54:1 — meta, captions, secondary copy  */
  --hfe-white:        #FFFFFF;
  --hfe-cream:        #FDF8F3;  /* section tint — keeps orange text at 4.59  */
  --hfe-cream-2:      #F6EFE7;  /* deeper tint for chips / inset panels      */
  --hfe-line:         #E8DFD5;  /* hairlines and card borders                */
  --hfe-line-strong:  #D8CCBD;

  /* Type */
  --hfe-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hfe-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --hfe-s1: 4px;   --hfe-s2: 8px;   --hfe-s3: 12px;  --hfe-s4: 16px;
  --hfe-s5: 24px;  --hfe-s6: 32px;  --hfe-s7: 48px;  --hfe-s8: 64px;
  --hfe-s9: 80px;  --hfe-s10: 96px;

  /* Shape */
  --hfe-r-sm: 8px;
  --hfe-r:    12px;
  --hfe-r-lg: 20px;
  --hfe-r-pill: 999px;

  --hfe-shadow:    0 1px 2px rgba(31,36,33,.05), 0 6px 20px rgba(31,36,33,.06);
  --hfe-shadow-lg: 0 2px 6px rgba(31,36,33,.06), 0 18px 44px rgba(31,36,33,.10);

  --hfe-container: 1200px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--hfe-font-body);
  color: var(--hfe-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .hfe-display {
  font-family: var(--hfe-font-head);
  color: var(--hfe-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Prose links.
   Scoped deliberately: .entry-content is ALSO the wrapper around every layout
   component on the homepage and the content pages, and each `:not(.class)` here
   counts as a class, so an unscoped version of this rule reached 0,3,1 and beat
   every component rule — card titles, chips, tiles and the hero caption all came
   out orange and underlined. Article bodies and .hfe-prose blocks only. */
body.single-post .entry-content a:not(.wp-element-button):not(.cpu-btn):not([class*="hfe-"]),
.hfe-prose a {
  color: var(--hfe-orange-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(184, 84, 38, .38);
}
body.single-post .entry-content a:not(.wp-element-button):not(.cpu-btn):not([class*="hfe-"]):hover,
.hfe-prose a:hover {
  color: var(--hfe-orange-deep);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.hfe-wrap {
  width: 100%;
  max-width: var(--hfe-container);
  margin-inline: auto;
  padding-inline: var(--hfe-s5);
  box-sizing: border-box;
}

.hfe-section { padding-block: var(--hfe-s9); }
.hfe-section--tight { padding-block: var(--hfe-s7); }
.hfe-section--cream { background: var(--hfe-cream); }
.hfe-section--olive { background: var(--hfe-olive-deep); color: var(--hfe-white); }
.hfe-section--olive h2,
.hfe-section--olive h3 { color: var(--hfe-white); }

/* Section heading block */
.hfe-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hfe-s5);
  margin-bottom: var(--hfe-s6);
}
.hfe-head__text { max-width: 62ch; }
.hfe-eyebrow {
  display: block;
  font-family: var(--hfe-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hfe-orange-ink);
  margin: 0 0 var(--hfe-s2);
}
.hfe-section--olive .hfe-eyebrow { color: #E9C9A8; }
.hfe-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  line-height: 1.15;
}
.hfe-head p {
  margin: var(--hfe-s3) 0 0;
  color: var(--hfe-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.hfe-section--olive .hfe-head p { color: rgba(255,255,255,.85); }

.hfe-head__link {
  flex: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--hfe-orange-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(184,84,38,.3);
}
.hfe-head__link:hover { color: var(--hfe-orange-deep); border-bottom-color: currentColor; }
.hfe-section--olive .hfe-head__link { color: #F2D9BF; border-bottom-color: rgba(242,217,191,.45); }
.hfe-section--olive .hfe-head__link:hover { color: #fff; }

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

.hfe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hfe-s2);
  min-height: 48px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--hfe-r-sm);
  background: var(--hfe-orange-ink);
  color: var(--hfe-white);
  font-family: var(--hfe-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hfe-btn:hover,
.hfe-btn:focus-visible { background: var(--hfe-orange-deep); color: var(--hfe-white); }

.hfe-btn--ghost {
  background: transparent;
  color: var(--hfe-ink);
  border-color: var(--hfe-line-strong);
}
.hfe-btn--ghost:hover,
.hfe-btn--ghost:focus-visible {
  background: var(--hfe-white);
  color: var(--hfe-orange-deep);
  border-color: var(--hfe-orange-ink);
}

.hfe-btn--olive { background: var(--hfe-olive-deep); }
.hfe-btn--olive:hover, .hfe-btn--olive:focus-visible { background: #4A5334; }

.hfe-btn--light {
  background: var(--hfe-white);
  color: var(--hfe-olive-deep);
}
.hfe-btn--light:hover, .hfe-btn--light:focus-visible { background: var(--hfe-cream); color: var(--hfe-orange-deep); }

/* Visible keyboard focus everywhere, on both light and dark grounds. */
.hfe-btn:focus-visible,
.hfe-chip:focus-visible,
.hfe-card a:focus-visible,
.hfe-tile:focus-visible {
  outline: 3px solid var(--hfe-orange);
  outline-offset: 2px;
}
.hfe-section--olive .hfe-btn:focus-visible { outline-color: #F2D9BF; }

/* --------------------------------------------------------------------------
   Chips — quick category browse
   -------------------------------------------------------------------------- */

.hfe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hfe-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hfe-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--hfe-line-strong);
  border-radius: var(--hfe-r-pill);
  background: var(--hfe-white);
  color: var(--hfe-ink);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hfe-chip:hover,
.hfe-chip:focus-visible {
  background: var(--hfe-orange-ink);
  border-color: var(--hfe-orange-ink);
  color: var(--hfe-white);
}

/* --------------------------------------------------------------------------
   Post cards
   Featured images on this site are a mix of 2:3 portrait (190), 1:1 (90) and
   4:3 landscape (80), and none is wider than 1024px. Square card media is the
   ratio that crops all three acceptably, and cards are kept under ~420px wide
   so the small source files are never upscaled.
   -------------------------------------------------------------------------- */

.hfe-grid {
  display: grid;
  gap: var(--hfe-s5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.hfe-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hfe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hfe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hfe-card {
  display: flex;
  flex-direction: column;
  background: var(--hfe-white);
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hfe-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hfe-shadow-lg);
  border-color: var(--hfe-line-strong);
}
.hfe-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hfe-cream-2);
}
.hfe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.hfe-card:hover .hfe-card__media img { transform: scale(1.04); }

.hfe-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hfe-s2);
  padding: var(--hfe-s4) var(--hfe-s4) var(--hfe-s5);
  flex: 1;
}
.hfe-card__cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hfe-orange-ink);
  text-decoration: none;
}
.hfe-card__cat:hover { color: var(--hfe-orange-deep); text-decoration: underline; }
.hfe-card__title {
  font-family: var(--hfe-font-head);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.hfe-card__title a { color: var(--hfe-ink); text-decoration: none; }
.hfe-card__title a:hover { color: var(--hfe-orange-deep); }
.hfe-card__excerpt {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--hfe-muted);
}

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.hfe-tiles {
  display: grid;
  gap: var(--hfe-s4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hfe-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--hfe-r);
  overflow: hidden;
  text-decoration: none;
  background: var(--hfe-olive-deep);
  isolation: isolate;
}
.hfe-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
  z-index: 0;
}
.hfe-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Dark enough at the foot that white type clears 4.5:1 over any photo. */
  background: linear-gradient(to top, rgba(20,24,18,.86) 0%, rgba(20,24,18,.55) 42%, rgba(20,24,18,.14) 100%);
}
.hfe-tile:hover img { transform: scale(1.06); }
.hfe-tile__label {
  position: absolute;
  z-index: 2;
  left: var(--hfe-s4);
  right: var(--hfe-s4);
  bottom: var(--hfe-s4);
  color: var(--hfe-white);
}
.hfe-tile__name {
  display: block;
  font-family: var(--hfe-font-head);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.hfe-tile__count {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
}

/* --------------------------------------------------------------------------
   Hero
   The source photography tops out at 1024px, so the hero is a typographic
   band with one contained image rather than a full-bleed photo that would
   have to be upscaled.
   -------------------------------------------------------------------------- */

.hfe-hero {
  background: var(--hfe-cream);
  border-bottom: 1px solid var(--hfe-line);
  padding-block: var(--hfe-s9);
}
.hfe-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--hfe-s8);
  align-items: center;
}
.hfe-hero h1 {
  margin: 0 0 var(--hfe-s4);
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hfe-hero h1 em {
  font-style: italic;
  color: var(--hfe-orange);   /* display size only — 3.23:1 is fine ≥24px */
}
.hfe-hero__lead {
  margin: 0 0 var(--hfe-s6);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--hfe-muted);
  max-width: 52ch;
}
.hfe-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hfe-s3);
  margin-bottom: var(--hfe-s6);
}
.hfe-hero__media {
  position: relative;
  border-radius: var(--hfe-r-lg);
  overflow: hidden;
  box-shadow: var(--hfe-shadow-lg);
  aspect-ratio: 4 / 3;
}
.hfe-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hfe-hero__badge {
  position: absolute;
  left: var(--hfe-s4);
  top: var(--hfe-s4);
  background: var(--hfe-white);
  color: var(--hfe-orange-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--hfe-r-pill);
}
.hfe-hero__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--hfe-s7) var(--hfe-s4) var(--hfe-s4);
  background: linear-gradient(to top, rgba(20,24,18,.88), rgba(20,24,18,0));
  color: var(--hfe-white);
  text-decoration: none;
}
.hfe-hero__caption span {
  display: block;
  font-family: var(--hfe-font-head);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}
.hfe-hero__caption:hover span { text-decoration: underline; }

/* Hero search */
.hfe-search { max-width: 460px; }
.hfe-search form {
  display: flex;
  gap: var(--hfe-s2);
  background: var(--hfe-white);
  border: 1px solid var(--hfe-line-strong);
  border-radius: var(--hfe-r-pill);
  padding: 5px 5px 5px 20px;
  align-items: center;
}
.hfe-search form:focus-within {
  border-color: var(--hfe-orange-ink);
  box-shadow: 0 0 0 3px rgba(184,84,38,.15);
}
/* Kadence wraps the search input in a <label>, so the flex growth has to live
   on the label rather than on the field itself. */
.hfe-search label { flex: 1; display: block; margin: 0; min-width: 0; }
.hfe-search input[type="search"],
.hfe-search input[type="text"] {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-family: var(--hfe-font-body);
  font-size: 1rem;
  color: var(--hfe-ink);
  box-shadow: none;
  outline: none;
}
.hfe-search input::placeholder { color: #7B807A; }
.hfe-search button {
  flex: none;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--hfe-r-pill);
  background: var(--hfe-orange-ink);
  color: var(--hfe-white);
  font-family: var(--hfe-font-body);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.hfe-search button:hover { background: var(--hfe-orange-deep); }

/* --------------------------------------------------------------------------
   Facts band — plain counts of what is actually on the site.
   No audience numbers, no testing claims: nothing here that the database
   cannot back up.
   -------------------------------------------------------------------------- */

.hfe-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hfe-s4);
  text-align: center;
}
.hfe-fact {
  padding: var(--hfe-s5) var(--hfe-s3);
  border-radius: var(--hfe-r);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}
.hfe-fact__num {
  display: block;
  font-family: var(--hfe-font-head);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--hfe-white);
}
.hfe-fact__label {
  display: block;
  margin-top: var(--hfe-s2);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: rgba(255,255,255,.88);
}

/* --------------------------------------------------------------------------
   About band
   -------------------------------------------------------------------------- */

.hfe-about {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--hfe-s8);
  align-items: center;
}
.hfe-about__media {
  border-radius: var(--hfe-r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--hfe-shadow);
  background: var(--hfe-cream-2);
}
.hfe-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfe-about h2 { margin: 0 0 var(--hfe-s4); font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); line-height: 1.15; }
.hfe-about p { margin: 0 0 var(--hfe-s4); font-size: 1.04rem; line-height: 1.7; color: var(--hfe-muted); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Article — single post
   -------------------------------------------------------------------------- */

.hfe-article-head { text-align: left; }
.hfe-kicker {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hfe-orange-ink);
  text-decoration: none;
}

.entry-content { font-size: 1.0625rem; line-height: 1.78; }
.entry-content > p { margin-bottom: 1.35em; }

:where(.entry-content) h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  line-height: 1.22;
  margin-top: 2em;
  margin-bottom: .6em;
}
:where(.entry-content) h3 {
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem);
  line-height: 1.28;
  margin-top: 1.7em;
  margin-bottom: .5em;
}
:where(.entry-content) ul,
:where(.entry-content) ol { margin-bottom: 1.35em; padding-left: 1.35em; }
:where(.entry-content) li { margin-bottom: .5em; }

:where(.entry-content) blockquote {
  margin: 2em 0;
  padding: var(--hfe-s5) var(--hfe-s6);
  border: 0;
  border-left: 4px solid var(--hfe-orange);
  background: var(--hfe-cream);
  border-radius: 0 var(--hfe-r) var(--hfe-r) 0;
  font-size: 1.08rem;
  line-height: 1.65;
}
:where(.entry-content) blockquote p:last-child { margin-bottom: 0; }

:where(.entry-content) img { border-radius: var(--hfe-r); }
:where(.entry-content) figure { margin-block: 2em; }
:where(.entry-content) figcaption {
  font-size: .86rem;
  color: var(--hfe-muted);
  text-align: center;
  margin-top: var(--hfe-s3);
}

:where(.entry-content) table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  margin-block: 2em;
}
:where(.entry-content) th,
:where(.entry-content) td {
  border: 1px solid var(--hfe-line);
  padding: 12px 14px;
  text-align: left;
}
:where(.entry-content) th { background: var(--hfe-cream); font-weight: 600; }

/* Wide content must scroll inside its own box rather than the page. */
.hfe-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   Contextual Product Unit (the site's own in-content Amazon block).
   Its own inline stylesheet is intentionally plain; these rules only bring it
   onto the site's palette and type without changing what it says.
   -------------------------------------------------------------------------- */

.entry-content .cpu-unit {
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  background: var(--hfe-cream);
  padding: var(--hfe-s5);
  gap: var(--hfe-s5);
}
.entry-content .cpu-unit .cpu-kicker {
  color: var(--hfe-orange-ink);
  font-weight: 700;
  letter-spacing: .09em;
  opacity: 1;
}
.entry-content .cpu-unit .cpu-title {
  font-family: var(--hfe-font-head);
  font-size: 1.08rem;
  color: var(--hfe-ink);
}
.entry-content .cpu-unit .cpu-btn {
  background: var(--hfe-orange-ink);
  border-radius: var(--hfe-r-sm);
  font-family: var(--hfe-font-body);
}
.entry-content .cpu-unit .cpu-btn:hover { background: var(--hfe-orange-deep); opacity: 1; }
.entry-content .cpu-unit .cpu-disclosure { color: var(--hfe-muted); opacity: 1; }
.entry-content .cpu-unit .cpu-image { background: var(--hfe-white); border-radius: var(--hfe-r-sm); }

/* --------------------------------------------------------------------------
   WP Recipe Maker — bring the card onto the palette, leave its structure be.
   -------------------------------------------------------------------------- */

.wprm-recipe-container {
  border-radius: var(--hfe-r) !important;
  border-color: var(--hfe-line) !important;
}
.wprm-recipe-name,
.wprm-recipe-header { font-family: var(--hfe-font-head) !important; }

/* --------------------------------------------------------------------------
   Author box — Kadence positions the avatar absolutely and clears it with
   padding-left alone, so that padding must never be replaced by a shorthand.
   -------------------------------------------------------------------------- */

.entry-author-profile {
  background: var(--hfe-cream);
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  padding-top: var(--hfe-s5);
  padding-right: var(--hfe-s5);
  padding-bottom: var(--hfe-s5);
  /* padding-left is Kadence's avatar clearance — left alone deliberately. */
}
.entry-author-profile .author-title { font-family: var(--hfe-font-head); }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header-row { border-bottom: 1px solid var(--hfe-line); }
.header-navigation .menu-item > a { font-weight: 500; }
.header-navigation .menu-item > a:hover { color: var(--hfe-orange-ink); }
.header-navigation .current-menu-item > a,
.header-navigation .current-menu-ancestor > a { color: var(--hfe-orange-ink); }

/* Dropdowns */
.header-navigation .sub-menu {
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r-sm);
  box-shadow: var(--hfe-shadow);
  overflow: hidden;
  padding-block: 6px;
}
.header-navigation .sub-menu li a { font-size: .93rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { font-size: .95rem; }
.site-footer a:hover { color: var(--hfe-orange); }
.hfe-footer-brand img { max-width: 190px; height: auto; }
.hfe-footer-note {
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  max-width: 46ch;
  margin: var(--hfe-s3) 0 0;
}

/* --------------------------------------------------------------------------
   Archives
   -------------------------------------------------------------------------- */

.hfe-archive-intro {
  background: var(--hfe-cream);
  border-bottom: 1px solid var(--hfe-line);
  padding-block: var(--hfe-s7);
}
.hfe-archive-intro h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);
  line-height: 1.1;
}
.hfe-archive-intro p {
  margin: var(--hfe-s3) 0 0;
  color: var(--hfe-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hfe-hero__inner { grid-template-columns: 1fr; gap: var(--hfe-s7); }
  .hfe-hero__media { max-width: 560px; }
  .hfe-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hfe-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hfe-about { grid-template-columns: 240px 1fr; gap: var(--hfe-s6); }
}

@media (max-width: 767px) {
  .hfe-section { padding-block: var(--hfe-s7); }
  .hfe-section--tight { padding-block: var(--hfe-s6); }
  .hfe-hero { padding-block: var(--hfe-s7); }
  .hfe-head { flex-direction: column; align-items: flex-start; gap: var(--hfe-s3); margin-bottom: var(--hfe-s5); }
  .hfe-grid { gap: var(--hfe-s4); }
  .hfe-grid--4,
  .hfe-grid--3,
  .hfe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfe-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hfe-s3); }
  .hfe-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfe-about { grid-template-columns: 1fr; gap: var(--hfe-s5); }
  .hfe-about__media { max-width: 240px; }
  .hfe-card__body { padding: var(--hfe-s3) var(--hfe-s3) var(--hfe-s4); }
  .hfe-card__title { font-size: 1rem; }
  .hfe-card__excerpt { display: none; }
  .hfe-search form { padding-left: 16px; }
  .hfe-search button { padding: 0 18px; }
  .hfe-hero__actions .hfe-btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .hfe-grid--4,
  .hfe-grid--3,
  .hfe-grid--2 { grid-template-columns: 1fr; }
  .hfe-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfe-card__excerpt { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hfe-card,
  .hfe-card__media img,
  .hfe-tile img { transition: none; }
  .hfe-card:hover { transform: none; }
  .hfe-card:hover .hfe-card__media img,
  .hfe-tile:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Homepage composition pieces
   -------------------------------------------------------------------------- */

.hfe-hero__chips { margin-top: var(--hfe-s5); }

/* Secondary heading inside a section that already has a main one. */
.hfe-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hfe-s4);
  margin: var(--hfe-s8) 0 var(--hfe-s5);
  padding-bottom: var(--hfe-s3);
  border-bottom: 1px solid var(--hfe-line);
}
.hfe-subhead h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.25;
}
.hfe-subhead a {
  flex: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--hfe-orange-ink);
  text-decoration: none;
  white-space: nowrap;
}
.hfe-subhead a:hover { color: var(--hfe-orange-deep); text-decoration: underline; }

/* The closing tile in a browse grid: a way onward rather than a category. */
.hfe-tile--more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--hfe-cream-2);
  border: 1px dashed var(--hfe-line-strong);
}
.hfe-tile--more::after { content: none; }
.hfe-tile--more .hfe-tile__label {
  position: static;
  left: auto; right: auto; bottom: auto;
  padding: var(--hfe-s4);
  color: var(--hfe-orange-ink);
}
.hfe-tile--more .hfe-tile__name { color: var(--hfe-orange-ink); text-shadow: none; }
.hfe-tile--more .hfe-tile__count { color: var(--hfe-muted); }
.hfe-tile--more:hover { background: var(--hfe-white); border-color: var(--hfe-orange-ink); }

/* About band */
.hfe-about__body .hfe-eyebrow { margin-bottom: var(--hfe-s3); }
.hfe-about--panel { grid-template-columns: 1.15fr .85fr; align-items: start; }

.hfe-panel {
  background: var(--hfe-white);
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  padding: var(--hfe-s6);
  box-shadow: var(--hfe-shadow);
}
.hfe-panel h3 {
  margin: 0 0 var(--hfe-s4);
  font-size: 1.15rem;
  line-height: 1.25;
}
.hfe-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hfe-s3);
}
.hfe-panel li {
  position: relative;
  padding-left: 28px;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--hfe-muted);
}
/* Decorative marker — the list text carries the meaning on its own. */
.hfe-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hfe-orange);
}

@media (max-width: 1024px) {
  .hfe-about--panel { grid-template-columns: 1fr; gap: var(--hfe-s6); }
}
@media (max-width: 767px) {
  .hfe-subhead { margin-top: var(--hfe-s6); }
  .hfe-panel { padding: var(--hfe-s5); }
}

/* --------------------------------------------------------------------------
   Advertising slots
   The ad script injects a fixed-height unit immediately after every <p> it
   finds, wherever that paragraph sits. Left to itself it lands inside cards
   and section headings and breaks them. So the layout's own running text uses
   .hfe-head__sub / .hfe-prose / .hfe-card__excerpt instead of <p>, and these
   deliberate full-width slots carry the only <p> on the page — which puts the
   inventory in places built to hold it rather than wherever the script guessed.
   -------------------------------------------------------------------------- */

/* An unfilled slot collapses to nothing rather than leaving an "Advertisement"
   label standing over empty space. The label element itself stays rendered —
   only its type size collapses — because display:none would hide the anchor
   from the very script that needs to find it. */
.hfe-adslot {
  padding-block: 0;
  background: var(--hfe-white);
  text-align: center;
}
.hfe-adslot:has([id^="mmt-"]) { padding-block: var(--hfe-s5); }

.hfe-adslot__label {
  margin: 0;
  font-family: var(--hfe-font-body);
  font-size: 0;
  line-height: 0;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7B807A;         /* 4.55:1 on white */
}
.hfe-adslot:has([id^="mmt-"]) .hfe-adslot__label {
  font-size: .68rem;
  line-height: 1.4;
  margin-bottom: var(--hfe-s2);
}
/* The injected unit is centred and never allowed to widen the page. */
.hfe-adslot [id^="mmt-"],
.hfe-adslot [class*="mmt-"] {
  margin-inline: auto;
  max-width: 100%;
}

/* Running text that must not become an ad anchor. Styled exactly as the
   paragraphs they replace. */
.hfe-head .hfe-head__sub {
  margin: var(--hfe-s3) 0 0;
  color: var(--hfe-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.hfe-section--olive .hfe-head .hfe-head__sub { color: rgba(255,255,255,.85); }

.hfe-about__body .hfe-prose {
  margin: 0 0 var(--hfe-s4);
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--hfe-muted);
  max-width: 62ch;
}

/* ==========================================================================
   Single post / page — the article template
   ========================================================================== */

/* --- Title band ---------------------------------------------------------- */

.entry-hero .entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hfe-s3);
}
.entry-hero .entry-title {
  margin: 0;
  max-width: 24ch;
}
/* A long headline should not stretch to a 1240px measure. */
@media (min-width: 1025px) {
  .entry-hero .entry-title { max-width: 20ch; }
}

/* --- Breadcrumbs --------------------------------------------------------- */

.kadence-breadcrumbs {
  font-family: var(--hfe-font-body);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--hfe-muted);
}
.kadence-breadcrumbs a {
  color: var(--hfe-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.kadence-breadcrumbs a:hover {
  color: var(--hfe-orange-ink);
  border-bottom-color: currentColor;
}
.kadence-breadcrumbs .bc-delimiter {
  margin-inline: 6px;
  color: var(--hfe-line-strong);
}
/* The trail is configured not to repeat the post title, which leaves Kadence's
   separator dangling after the last crumb. */
.kadence-breadcrumb-container > .bc-delimiter:last-child { display: none; }

/* --- Meta line ----------------------------------------------------------- */

.entry-meta {
  font-family: var(--hfe-font-body);
  font-size: .88rem;
  color: var(--hfe-muted);
}
.entry-meta a { color: var(--hfe-muted); text-decoration: none; }
.entry-meta a:hover { color: var(--hfe-orange-ink); text-decoration: underline; }
.entry-meta .meta-label { margin-right: 4px; }

/* WordPress prints a second <time class="updated"> purely so the published and
   modified dates are both in the markup for machines. Only the published one
   is meant to be read, so the schema copy is hidden rather than removed. */
.entry-meta time.updated:not(.published) {
  display: none;
}

/* Category chip above the title */
.entry-hero .entry-taxonomies {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.entry-hero .entry-taxonomies a {
  color: var(--hfe-orange-ink);
  text-decoration: none;
}
.entry-hero .entry-taxonomies a:hover { color: var(--hfe-orange-deep); text-decoration: underline; }

/* --- Article body -------------------------------------------------------- */

/* Kadence's unboxed content still carries a card shadow rule; the article
   should read as a page, not a floating panel. */
.single-entry.content-bg,
.entry.single-entry { box-shadow: none; }

/* A comfortable reading measure regardless of the 1240px container.
   Scoped to single posts only, and never applied to this theme's own layout
   components: .single-content is also the wrapper on every page, so an
   unscoped rule squeezed the homepage's full-width sections down to 760px. */
body.single-post .single-content > *:not(.alignwide):not(.alignfull):not(.wprm-recipe-container):not([class*="hfe-"]) {
  max-width: 760px;
  margin-inline: auto;
}
body.single-post .single-content > .alignwide { max-width: 1000px; margin-inline: auto; }

/* The recipe card gets a little more room than the prose so its ingredient and
   instruction columns are not cramped — but not the full 1240px container,
   which stretched a two-column card across the whole page. */
body.single-post .single-content > .wprm-recipe-container {
  max-width: 860px;
  margin-inline: auto;
}

.entry-content .wp-block-image img,
.entry-content > figure img { border-radius: var(--hfe-r); }

/* --- Tags ---------------------------------------------------------------- */

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hfe-s2);
  align-items: center;
  margin-top: var(--hfe-s6);
  padding-top: var(--hfe-s5);
  border-top: 1px solid var(--hfe-line);
}
.entry-tags a,
.entry-tags .tags-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid var(--hfe-line-strong);
  border-radius: var(--hfe-r-pill);
  background: var(--hfe-cream);
  color: var(--hfe-muted);
  font-size: .84rem;
  text-decoration: none;
}
.entry-tags a:hover {
  background: var(--hfe-orange-ink);
  border-color: var(--hfe-orange-ink);
  color: var(--hfe-white);
}

/* --- Author box ----------------------------------------------------------
   Kadence positions the avatar absolutely and clears it with padding-left
   ALONE. A padding shorthand here does not add padding — it deletes that
   clearance and drops the name on top of the photo. Sides set individually.
   -------------------------------------------------------------------------- */

.entry-author-profile {
  margin-top: var(--hfe-s7);
}
.entry-author-profile .entry-author-name,
.entry-author-profile .author-name {
  font-family: var(--hfe-font-head);
  font-size: 1.08rem;
  color: var(--hfe-ink);
}
.entry-author-profile .author-description {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--hfe-muted);
}

/* --- Post navigation ----------------------------------------------------- */

.post-navigation {
  margin-top: var(--hfe-s7);
  padding-top: var(--hfe-s5);
  border-top: 1px solid var(--hfe-line);
}
.post-navigation .post-title {
  font-family: var(--hfe-font-head);
  font-size: 1rem;
  line-height: 1.3;
}
.post-navigation a { color: var(--hfe-ink); text-decoration: none; }
.post-navigation a:hover { color: var(--hfe-orange-deep); }

/* --- Related posts ------------------------------------------------------- */

.entry-related {
  background: var(--hfe-cream);
  border-top: 1px solid var(--hfe-line);
  padding-block: var(--hfe-s8);
  margin-top: var(--hfe-s8);
}
/* Kadence's own `.has-sidebar .entry-related { background: transparent }` is
   specificity 0,2,0 and would beat a plain class rule — this page has no
   sidebar, but the tint is set on the element itself to stay safe either way. */
.entry-related .entry-related-title,
.entry-related h2 {
  font-family: var(--hfe-font-head);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 var(--hfe-s5);
}
.entry-related .loop-entry {
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  overflow: hidden;
  background: var(--hfe-white);
  box-shadow: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.entry-related .loop-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--hfe-shadow-lg);
}
.entry-related .entry-title {
  font-size: 1rem;
  line-height: 1.3;
}
.entry-related .entry-content-wrap { padding: var(--hfe-s4); }

/* --- Comments ------------------------------------------------------------ */

.comments-area {
  margin-top: var(--hfe-s8);
}
.comments-area .comment-reply-title,
.comments-area .comments-title {
  font-family: var(--hfe-font-head);
}

@media (max-width: 767px) {
  .entry-related { padding-block: var(--hfe-s6); margin-top: var(--hfe-s6); }
  body.single-post .single-content > *:not(.alignwide):not(.alignfull) { max-width: 100%; }
}

/* ==========================================================================
   Archives — category, tag, author, search
   Kadence renders these with its own .loop-entry cards rather than the
   .hfe-card component, so the two are brought onto the same visual system.
   ========================================================================== */

.entry-hero .archive-description,
.entry-hero .taxonomy-description {
  margin-top: var(--hfe-s3);
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--hfe-muted);
}
.entry-hero .archive-description p { margin: 0; }

.post-archive .loop-entry,
.search-archive .loop-entry {
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  overflow: hidden;
  background: var(--hfe-white);
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-archive .loop-entry:hover,
.search-archive .loop-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--hfe-shadow-lg);
  border-color: var(--hfe-line-strong);
}

.loop-entry .post-thumbnail { background: var(--hfe-cream-2); }
.loop-entry .post-thumbnail img { transition: transform .4s ease; }
.loop-entry:hover .post-thumbnail img { transform: scale(1.04); }

.loop-entry .entry-content-wrap { padding: var(--hfe-s4) var(--hfe-s4) var(--hfe-s5); }
.loop-entry .entry-title { margin: 0 0 var(--hfe-s2); }
.loop-entry .entry-title a { color: var(--hfe-ink); text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--hfe-orange-deep); }

.loop-entry .entry-taxonomies {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: var(--hfe-s2);
}
.loop-entry .entry-taxonomies a { color: var(--hfe-orange-ink); text-decoration: none; }
.loop-entry .entry-taxonomies a:hover { color: var(--hfe-orange-deep); text-decoration: underline; }

.loop-entry .entry-summary {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--hfe-muted);
}
.loop-entry .entry-summary p { margin: 0; }
.loop-entry .entry-meta { font-size: .8rem; }

/* --- Pagination ---------------------------------------------------------- */

.navigation.pagination {
  margin-top: var(--hfe-s8);
  padding-top: var(--hfe-s5);
  border-top: 1px solid var(--hfe-line);
}
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  margin: 0 3px;
  border: 1px solid var(--hfe-line-strong);
  border-radius: var(--hfe-r-sm);
  background: var(--hfe-white);
  color: var(--hfe-ink);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
}
.navigation.pagination .page-numbers:hover {
  border-color: var(--hfe-orange-ink);
  color: var(--hfe-orange-deep);
}
.navigation.pagination .page-numbers.current {
  background: var(--hfe-orange-ink);
  border-color: var(--hfe-orange-ink);
  color: var(--hfe-white);
}
.navigation.pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: 24px;
}

/* --- Search results ------------------------------------------------------ */

.search-no-results .entry-content { max-width: 640px; }

@media (max-width: 767px) {
  .loop-entry .entry-content-wrap { padding: var(--hfe-s3) var(--hfe-s3) var(--hfe-s4); }
  .navigation.pagination .page-numbers { min-width: 40px; min-height: 40px; padding: 0 8px; margin: 0 2px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer .widget-title,
.site-footer .wp-block-heading {
  font-family: var(--hfe-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E9C9A8;          /* 7.4:1 on the #2C322A footer ground */
  margin: 0 0 var(--hfe-s4);
}

.site-footer .hfe-footer-brand img {
  max-width: 180px;
  height: auto;
  /* The logo is dark ink on white; on the dark footer it needs its own plate. */
  background: var(--hfe-white);
  padding: 10px 14px;
  border-radius: var(--hfe-r-sm);
}
.site-footer .hfe-footer-note {
  margin: var(--hfe-s4) 0 0;
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(255,255,255,.74);
  max-width: 42ch;
}

.site-footer .hfe-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.site-footer .hfe-footer-col a {
  color: rgba(255,255,255,.80);
  text-decoration: none;
  font-size: .94rem;
  border-bottom: 1px solid transparent;
}
.site-footer .hfe-footer-col a:hover,
.site-footer .hfe-footer-col a:focus-visible {
  color: var(--hfe-white);
  border-bottom-color: var(--hfe-orange);
}

.hfe-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hfe-s2) var(--hfe-s5);
  font-size: .84rem;
  color: rgba(255,255,255,.7);
}
.hfe-footer-bottom .hfe-footer-assoc { color: rgba(255,255,255,.55); }

/* Kadence prints its own theme credit in the bottom row when no HTML is set;
   with content set it is replaced, but the separator dot it adds is not. */
.site-footer .footer-html .kadence-footer-credit { display: none; }

@media (max-width: 767px) {
  .site-footer .hfe-footer-brand img { max-width: 150px; }
  .hfe-footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
}

/* ==========================================================================
   Content pages — About, Contact and any other written page
   Same no-<p> rule as the homepage: these blocks use .hfe-prose so the ad
   script does not treat a two-column layout as a place to wedge a 510px unit.
   ========================================================================== */

.hfe-page {
  max-width: 1000px;
  margin-inline: auto;
  margin-block: var(--hfe-s7);
}
.hfe-page:first-child { margin-top: 0; }

.hfe-page h2 {
  margin: 0 0 var(--hfe-s4);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.2;
}
.hfe-page h3 { margin: 0 0 var(--hfe-s3); font-size: 1.15rem; line-height: 1.25; }

.hfe-prose {
  margin: 0 0 var(--hfe-s4);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--hfe-ink);
  max-width: 68ch;
}
.hfe-prose:last-child { margin-bottom: 0; }
.hfe-prose a { color: var(--hfe-orange-ink); text-decoration: underline; text-underline-offset: 2px; }
.hfe-prose a:hover { color: var(--hfe-orange-deep); }

.hfe-prose--lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.28rem);
  line-height: 1.6;
  color: var(--hfe-muted);
  max-width: 60ch;
}

/* --- Two-column page layouts --------------------------------------------- */

.hfe-split {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: var(--hfe-s8);
  align-items: start;
}
.hfe-split--even { grid-template-columns: 1fr 1fr; gap: var(--hfe-s7); }
.hfe-split__side { display: grid; gap: var(--hfe-s4); }

/* --- Info cards ---------------------------------------------------------- */

.hfe-infocard {
  background: var(--hfe-white);
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r);
  padding: var(--hfe-s5);
}
.hfe-infocard--quiet { background: var(--hfe-cream); }
.hfe-infocard ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hfe-infocard li {
  position: relative;
  padding-left: 22px;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--hfe-muted);
}
.hfe-infocard li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hfe-orange);
}
.hfe-infocard .hfe-btn { margin-top: var(--hfe-s4); }

.hfe-deflist { margin: 0; font-size: .96rem; line-height: 1.55; }
.hfe-deflist dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hfe-orange-ink);
  margin-top: var(--hfe-s4);
}
.hfe-deflist dt:first-child { margin-top: 0; }
.hfe-deflist dd { margin: 4px 0 0; color: var(--hfe-muted); }
.hfe-deflist dd a { color: var(--hfe-orange-ink); }

/* --- Full-width bands inside a page -------------------------------------- */

.hfe-band {
  border-radius: var(--hfe-r-lg);
  padding: var(--hfe-s7) var(--hfe-s6);
}
.hfe-band--olive { background: var(--hfe-olive-deep); color: var(--hfe-white); }

/* --- Closing call to action ---------------------------------------------- */

.hfe-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hfe-s6);
  background: var(--hfe-cream);
  border: 1px solid var(--hfe-line);
  border-radius: var(--hfe-r-lg);
  padding: var(--hfe-s6);
}
.hfe-cta h2 { margin-bottom: var(--hfe-s2); }
.hfe-cta .hfe-btn { flex: none; }

/* --- Contact form (Contact Form 7) --------------------------------------- */

.hfe-panel--form { margin-top: var(--hfe-s5); }

/* The form is built from divs rather than Contact Form 7's default paragraph
   wrappers, because wpautop's <p> tags were anchoring a 250px advert in the
   middle of the contact form. */
.wpcf7 form.wpcf7-form { display: grid; gap: var(--hfe-s4); }
.wpcf7 .hfe-field { display: grid; gap: 6px; }
.wpcf7 .hfe-field--submit { margin-top: var(--hfe-s2); }
.wpcf7 label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--hfe-ink);
}
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--hfe-line-strong);
  border-radius: var(--hfe-r-sm);
  background: var(--hfe-white);
  font-family: var(--hfe-font-body);
  font-size: 1rem;
  color: var(--hfe-ink);
  font-weight: 400;
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--hfe-orange-ink);
  box-shadow: 0 0 0 3px rgba(184,84,38,.15);
}
.wpcf7 input[type="submit"] {
  justify-self: start;
  min-height: 48px;
  padding: 13px 30px;
  border: 0;
  border-radius: var(--hfe-r-sm);
  background: var(--hfe-orange-ink);
  color: var(--hfe-white);
  font-family: var(--hfe-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--hfe-orange-deep); }
.wpcf7-not-valid-tip { font-size: .84rem; color: #A3231A; font-weight: 500; }
.wpcf7 .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--hfe-r-sm);
  border-width: 1px;
  font-size: .94rem;
}

@media (max-width: 1024px) {
  .hfe-split,
  .hfe-split--even { grid-template-columns: 1fr; gap: var(--hfe-s6); }
}
@media (max-width: 767px) {
  .hfe-page { margin-block: var(--hfe-s6); }
  .hfe-band { padding: var(--hfe-s6) var(--hfe-s4); }
  .hfe-cta { flex-direction: column; align-items: flex-start; padding: var(--hfe-s5); }
}

/* ==========================================================================
   Article index pages — Recipe Index, Browse, All Guides
   ========================================================================== */

.hfe-index { margin-top: var(--hfe-s6); }

.hfe-jumpnav {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-block: var(--hfe-s3);
  margin-bottom: var(--hfe-s6);
  background: var(--hfe-white);
  border-bottom: 1px solid var(--hfe-line);
}
.hfe-jumpnav .hfe-chip { min-height: 36px; padding: 6px 15px; font-size: .88rem; }

.hfe-indexgroup {
  padding-top: var(--hfe-s6);
  margin-bottom: var(--hfe-s6);
  border-top: 1px solid var(--hfe-line);
  /* clears the sticky jump bar when a chip scrolls a section into view */
  scroll-margin-top: 84px;
}
.hfe-indexgroup:first-of-type { border-top: 0; padding-top: 0; }

.hfe-indexgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hfe-s4);
  margin-bottom: var(--hfe-s3);
}
.hfe-indexgroup__title {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem);
  line-height: 1.2;
}
.hfe-indexgroup__link {
  flex: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--hfe-orange-ink);
  text-decoration: none;
  white-space: nowrap;
}
.hfe-indexgroup__link:hover { color: var(--hfe-orange-deep); text-decoration: underline; }

.hfe-indexgroup__desc {
  margin: 0 0 var(--hfe-s5);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--hfe-muted);
  max-width: 70ch;
}

.hfe-indexlist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--hfe-s7);
}
.hfe-indexlist li {
  break-inside: avoid;
  margin-bottom: 2px;
}
.hfe-indexlist a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--hfe-r-sm);
  color: var(--hfe-ink);
  font-size: .97rem;
  line-height: 1.45;
  text-decoration: none;
}
.hfe-indexlist a:hover,
.hfe-indexlist a:focus-visible {
  background: var(--hfe-cream);
  color: var(--hfe-orange-deep);
}

@media (max-width: 900px) {
  .hfe-indexlist { columns: 1; }
}
@media (max-width: 767px) {
  .hfe-jumpnav { margin-bottom: var(--hfe-s5); }
  .hfe-indexgroup__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ==========================================================================
   404
   ========================================================================== */

.hfe-404 {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--hfe-s6) var(--hfe-s7);
}
.hfe-404 .hfe-eyebrow { margin-bottom: var(--hfe-s3); }
.hfe-404 h1 {
  margin: 0 0 var(--hfe-s4);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);
  line-height: 1.12;
}
.hfe-404__lead {
  margin: 0 auto var(--hfe-s6);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--hfe-muted);
  max-width: 52ch;
}
.hfe-404 .hfe-search { margin-inline: auto; }
.hfe-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hfe-s3);
  justify-content: center;
  margin-top: var(--hfe-s5);
}
.hfe-404__chips { justify-content: center; margin-top: var(--hfe-s5); }

.hfe-404__recent {
  max-width: var(--hfe-container);
  margin-inline: auto;
  padding-inline: var(--hfe-s5);
  padding-bottom: var(--hfe-s7);
}
.hfe-404__recent .hfe-subhead { margin-top: 0; }

/* ==========================================================================
   Heading margins inside layout components

   Kadence styles article headings as `.entry-content h2`, `.entry-content h3`
   and so on — specificity 0,1,1, which beats any single-class rule of ours.
   Every layout component on the homepage and the content pages sits inside
   .entry-content, so card titles, section headings and the hero H1 were all
   inheriting article margins: 24px above a card title, 38px above a section
   heading, 50px above the hero H1. The reset below is scoped to two classes
   (0,2,1) so it wins, and the component margins are re-stated at the same
   specificity underneath it.
   ========================================================================== */

.entry-content [class*="hfe-"] :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: 0;
}

.entry-content .hfe-hero h1        { margin-bottom: var(--hfe-s4); }
.entry-content .hfe-page h2        { margin-bottom: var(--hfe-s4); }
.entry-content .hfe-page h3        { margin-bottom: var(--hfe-s3); }
.entry-content .hfe-panel h3       { margin-bottom: var(--hfe-s4); }
.entry-content .hfe-infocard h3    { margin-bottom: var(--hfe-s3); }
.entry-content .hfe-cta h2         { margin-bottom: var(--hfe-s2); }
.entry-content .hfe-about h2       { margin-bottom: var(--hfe-s4); }