/* ==========================================================================
   TAF 2026 — Recipe post footer zone
   Owned by the post-footer build unit with inc/post-footer.php. Loads after
   main.css (enqueue.php), so equal-specificity rules here win ties.

   Zone (single posts, between content end and comments):
     1. "Filed under" category pills (.taf-pf-tags) — article column
     2. Prev/next cards (.taf-pf-nav) — article column
     3. Related-recipes band (.taf-pf-band) — full-bleed cream,
        inner max 1080px centered on the viewport.

   Also carries the two "while in this template" fixes from the handoff:
   italic in-content headings -> Poppins 600 roman, and the seasonal nav
   item recolored to match sibling nav links.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Retire the superseded stock modules.
   Kadence tags / core post-navigation / Similar Posts are already removed
   server-side (inc/post-footer.php filters) — the selectors stay as a
   belt-and-braces safety net. The Feast "More <category>" block lives inside
   post content (FSRI markup must not be rewritten), so CSS-hide is the
   mechanism there; display:none keeps its lazyloaded images from ever
   observing/loading.
   ------------------------------------------------------------------------ */
.single-post .entry-content .feast-modern-prev-next,
.single-post .entry-footer .entry-tags,
.single-post nav.navigation.post-navigation,
.single-post .entry-related { display: none; }

/* --------------------------------------------------------------------------
   1. Article-column close (tags + prev/next share the content column)
   ------------------------------------------------------------------------ */
.taf-pf { margin-top: var(--space-16); }

/* ---- Tags: "FILED UNDER" label + rose-tint pills ---- */
.taf-pf-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  /* NO HAIRLINE under the Filed-under row. The full-bleed rose band that
     follows is its own edge — a rule immediately above a colour change reads
     as a second, competing divider.
     Padding 32 -> 16 (2026-08-09): 32 was breathing room for a line that no
     longer exists, and what sits below this row is Raptive's ad reserve, not
     the band. */
  padding-bottom: var(--space-16);
}
.taf-pf-tags__label {
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-08em);
  text-transform: uppercase;
  color: var(--cocoa);
  margin-right: var(--space-4);
}
.taf-pf-tag {
  background: var(--rose-tint);
  color: var(--rose-deep);
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full); /* handoff: pills fully rounded (supersedes the 6px chip) */
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.taf-pf-tag:hover,
.taf-pf-tag:focus-visible { background: var(--cream); color: var(--rose-deep); }

/* ---- Prev/next cards ---- */
.taf-pf-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  padding: var(--space-32) 0 0;
}
.taf-pf-navcard {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-12) var(--space-16);
  text-decoration: none;
  color: var(--chocolate);
  transition: box-shadow var(--speed) var(--ease);
  min-width: 0;
}
.taf-pf-navcard:hover,
.taf-pf-navcard:focus-visible { box-shadow: var(--shadow-hover); color: var(--chocolate); }
.taf-pf-navcard__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  background: var(--cream);
}
.taf-pf-navcard__text {
  min-width: 0;
  /* Top-aligned so PREVIOUS/NEXT eyebrows sit at the same y in both cards
     regardless of title line count. Thumbs stay
     vertically centered via the card's own align-items. */
  align-self: flex-start;
}
.taf-pf-navcard__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-08em);
  text-transform: uppercase;
  color: var(--cocoa);
}
.taf-pf-navcard__title {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-16);
  font-weight: var(--w-bold);
  line-height: var(--lh-13);
  margin-top: var(--space-4);
}
.taf-pf-arrow { width: 13px; height: 13px; flex: none; }

/* Next card mirrors: text right-aligned, thumb on the right */
.taf-pf-navcard--next { justify-content: flex-end; text-align: right; }
.taf-pf-navcard--next .taf-pf-navcard__eyebrow { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   2. Related-recipes band — full-bleed cream.
   Full-bleed from an off-center container: below 1024px the single content
   column is viewport-centered, so the classic calc(50% - 50vw) holds. At
   >= 1024px main.css gives single posts a centered [728px | 48px | 320px]
   grid (justify-content: center, symmetric 32px container padding), which
   puts the content-column center a constant 184px left of the viewport
   center — (sidebar 320 + gutter 48) / 2 — at every viewport width; one
   fixed correction re-centers the band. (Was 174px = (300 + 48) / 2 before
   the 2026-08-01 rail widening.) #wrapper.site already clips overflow-x,
   so 100vw cannot introduce a horizontal scrollbar.
   ------------------------------------------------------------------------ */
.taf-pf-band {
  background: var(--cream);
  width: 100vw;
  /* Tightened 2026-08-09. Was `margin-top: 48` and `padding: 40 / 20 / 48` —
     asymmetric top-to-bottom, and generous enough that the band read as
     over-padded once the hairlines around it were removed and the tint became
     the only edge. Now 24 above and an even 32 top and bottom inside.
     ⚠️ The remaining space ABOVE the band is NOT ours: Raptive injects
     `AdThrive_Below_Post_1_desktop`, a 250px reserve, between the Filed-under
     row and this band. It is empty under headless Chrome (trap 16) and in
     screenshots, which makes the gap look like theme spacing. It is not.
     DO NOT collapse it — an unfilled container that collapses is exactly the
     CLS problem Raptive raised in email 4. */
  margin: var(--space-24) 0 0 calc(50% - 50vw);
  padding: var(--space-32) var(--space-20);
}
@media (min-width: 1024px) {
  /* 184px is a hand-computed geometric offset — (320px sidebar + 48px gutter)
     / 2, i.e. how far the content-column center sits left of the viewport
     center in main.css's single-post grid — not a spacing step. --space-184
     would be nonsense, and it would invite T6 to "snap" it onto a scale,
     which would misalign the band. Recompute if the grid columns change. */
  body.single-post .taf-pf-band { margin-left: calc(50% - 50vw + 184px); /* token-exempt: hand-computed geometric offset, not a spacing step */ }
}
@media (min-width: 900px) {
  .taf-pf-band { padding-left: var(--space-32); padding-right: var(--space-32); }
}
/* Inner measure = the ARTICLE measure (--maxw, 728px), not the old 1080px.
   "too large, make it standard size tiles". Measured cause at
   1280 — the band inner ran 1080px while the content column above it is 728px,
   so its 4 tiles came out 255px wide against the 160px tiles of the in-content
   recommendation row on the same page, and the whole band overhung the article
   measure by 190px each side. Capping to --maxw lands the tiles at 160px —
   identical to that row — and squares the band's left edge with the body copy.
   The cream stays FULL-BLEED (that is the band's whole idiom); only its
   contents are re-measured. Mobile was already correct: 167px tiles there
   match the category-archive grid exactly, so nothing moves below 1024. */
.taf-pf-band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  /* Re-measuring the inner to --maxw exposed an alignment bug that the old
     1080px width had been hiding. The band is 100vw, so `margin: 0 auto`
     centres its contents on the VIEWPORT — but a single post's content column
     is not viewport-centred, it sits 184px left of centre (half of sidebar 320
     + gutter 48). At 1080 the inner landed at x=100 against the article's 106
     and the 6px error was invisible; at --maxw it landed at x=290, a 184px miss
     (measured when --maxw was 700px).
     Same hand-computed 184px correction the band itself uses above, applied in
     the opposite direction. Percentages here resolve against the band's CONTENT
     box (100vw minus its 32px padding), which is why this lands exactly:
     32 + 608 - --maxw/2 - 184 = the article's left edge. At --maxw 728 that is
     32 + 608 - 364 - 184 = 92; at the old 700 it was 106. Verified rendered. */
  body.single-post .taf-pf-band__inner {
    margin-left: calc(50% - var(--maxw) / 2 - 184px); /* token-exempt: hand-computed geometric offset, not a spacing step */
    margin-right: 0;
  }
}

/* ---- Header row: eyebrow + adaptive H2 left, "All N ..." link right ---- */
.taf-pf-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12) var(--space-24);
  flex-wrap: wrap;
  margin-bottom: var(--space-20);
}
/* The eyebrow ("If you liked this one") is GONE —. Its rule
   went with it, and the title's 8px top margin (which only existed to sit it
   under the eyebrow) is now 0 so the band opens on the title. */
.taf-pf-band__title {
  font-family: var(--display);
  font-size: var(--fs-30);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-display);
  color: var(--chocolate);
  margin: 0;
}
.taf-pf-band__all {
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  color: var(--rose-link);
  text-decoration: underline; /* canvas: default-underlined link */
  text-underline-offset: 3px;
  white-space: nowrap;
  position: relative; /* anchors the 44px tap extension */
}
.taf-pf-band__all::after {
  /* token-frozen: WCAG 2.5.5 — invisible centered 44px extension, all widths
     (was a mobile-only inset that came out just under the floor).
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--space-44);
  transform: translateY(-50%); /* 44px tap target */
}
.taf-pf-band__all:hover,
.taf-pf-band__all:focus-visible { color: var(--rose-deep); }

/* "See more <Category>" under an in-content category grid (inc/related-recipes.php,
   the id-less Feast variant). New class, new element — touches nothing existing.
   Right-aligned to match what Feast's own stylesheet does with the link it
   replaces (`.feast-recipe-index .feast-category-link { text-align: right }`,
   identical in 15.1.5 and 15.6.0). The link itself reuses .taf-pf-band__all above,
   so it inherits that rule's 44px tap extension. */
.taf-rr-more {
  margin-top: var(--space-12);
  text-align: right;
}

/* ---- Tile grid: 4-up desktop/tablet, 2-up phone ---- */
.taf-pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}
.taf-pf-tile {
  display: block;
  color: var(--chocolate);
  text-decoration: none;
  min-width: 0;
}
.taf-pf-tile__imgwrap {
  display: block;
  aspect-ratio: var(--ar-4-5);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rose-tint);
  transition: box-shadow var(--speed) var(--ease);
}
.taf-pf-tile__img,
.taf-pf-tile__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.taf-pf-tile__title {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-17);
  /* 400: in-flow tile titles are regular sitewide;
     the drawer tile labels keep 600 as a white-on-scrim legibility exception. */
  font-weight: var(--w-regular);
  line-height: var(--lh-13);
  margin-top: var(--space-8);
}
.taf-pf-tile__meta {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-13);
  font-weight: var(--w-regular);
  color: var(--cocoa);
  margin-top: var(--space-4);
}

/* Hover: title underline + shadow lift on the photo. Photos never zoom. */
.taf-pf-tile:hover,
.taf-pf-tile:focus-visible { color: var(--chocolate); }
.taf-pf-tile:hover .taf-pf-tile__title,
.taf-pf-tile:focus-visible .taf-pf-tile__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.taf-pf-tile:hover .taf-pf-tile__imgwrap,
.taf-pf-tile:focus-visible .taf-pf-tile__imgwrap { box-shadow: var(--shadow-hover); }
.taf-pf-tile:hover .taf-pf-tile__img,
.taf-pf-tile__imgwrap img { transform: none; } /* guard: no photo zoom, ever */

/* --------------------------------------------------------------------------
   3. Mobile (<700px): stacked prev/next (Previous first in source), 2-col
   tiles, >= 44px hit targets (pills keep the 8/14 spec padding and extend
   their tap area with an invisible overlay).
   ------------------------------------------------------------------------ */
@media (max-width: 699.98px) {
  .taf-pf-nav { grid-template-columns: 1fr; }

  .taf-pf-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }

  .taf-pf-band__title { font-size: var(--fs-24); }

  .taf-pf-tag { position: relative; }
  .taf-pf-tag::after { content: ""; position: absolute; inset: -4px 0; }

}

/* --------------------------------------------------------------------------
   4. Handoff "also fix" #1 — italic in-content headings ("How does it
   work?", "Now, let's bake...") render Poppins 600 roman. Scoped to
   single-post content only; Poppins itself comes from the sitewide
   h1-h6 font-family counter in inc/enqueue.php.
   ------------------------------------------------------------------------ */
.single-post .taf-post-content :is(h1, h2, h3, h4, h5, h6) { font-style: normal; font-weight: var(--w-semibold); }
.single-post .taf-post-content :is(h1, h2, h3, h4, h5, h6) :is(em, i) { font-style: normal; }
.single-post .taf-post-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: var(--w-semibold); }

/* --------------------------------------------------------------------------
   5. Handoff "also fix" #2 — seasonal nav item ("Summer Baking"): drop the
   rose/orange tint, match sibling nav links (chocolate, hover/focus rose —
   siblings hover var(--accent) in main.css, matched here for consistency;
   the README's "hover rose-deep" is noted as a delta). Same specificity as
   the main.css seasonal rule; this file loads later, so it wins.
   ------------------------------------------------------------------------ */
.main-navigation .primary-menu-container > ul > li.menu-item.taf-nav-seasonal > a { color: var(--chocolate); }
.main-navigation .primary-menu-container > ul > li.menu-item.taf-nav-seasonal > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.taf-nav-seasonal > a:focus-visible { color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Reduced motion: kill the zone's transitions.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .taf-pf-tag,
  .taf-pf-navcard,
  .taf-pf-tile__imgwrap { transition: none; }
}