/*
Theme Name: FBL Child
Theme URI: https://vegan-recipe.net
Author: FBL Network
Author URI: https://vegan-recipe.net
Description: Child theme for Divi 5 (vegan-recipe.net pilot). Design layer fbl-: design tokens (divi5-presets-export.md 1.1-1.3), clamp typography (1.2), WPRM styles (recipe card, ingredient checklist, nutrition chips, FAQ), prefers-reduced-motion, mini-JS hooks (1.6). Namespace fbl-, BEM-like class names.
Template: Divi
Version: 0.2.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fbl-child
*/

/* ==========================================================================
   0. Font metric fallbacks — CLS < 0.1 (design-system 7)
   While Fraunces / Source Sans 3 download, Divi's global font stacks fall
   back to Georgia / Helvetica. These @font-face rules replace those fallback
   names with metric-adjusted stand-ins, so the font swap produces no layout
   shift (measured in Chrome, 2026-10-19):
     Fraunces      100px: width 2884, asc 98, desc 26
     Georgia       100px: width 3348, asc 92, desc 22
     Source Sans 3 100px: width 3101, asc 102, desc 40
     Arial         100px: width 3441, asc 91, desc 21
   In Chrome metric overrides are multiplied by size-adjust, hence the
   > 100% ascent/descent overrides below. font-weight 100 900 prevents
   synthetic bold from breaking the matched metrics.
   If a platform lacks the local fonts, the face is skipped and the rest
   of the stack renders (graceful).
   ========================================================================== */
@font-face {
  font-family: "Georgia"; /* stands in for Fraunces */
  src: local("Georgia");
  font-weight: 100 900;
  size-adjust: 86.14%;
  ascent-override: 113.77%;
  descent-override: 30.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Helvetica"; /* stands in for Source Sans 3 */
  src: local("Arial");
  font-weight: 100 900;
  size-adjust: 90.13%;
  ascent-override: 113.17%;
  descent-override: 44.38%;
  line-gap-override: 0%;
}

/* ==========================================================================
   1. Design tokens (design-system 2.1-2.3 via divi5-presets-export 1.1;
      spacing/geometry 1.3). Colors resolve to Divi Design Variables
      (gcid-*) when present, hex fallback otherwise. No hardcoded hex below
      this block is allowed outside var() fallbacks.
   ========================================================================== */
:root {
  /* palette 1.1 */
  --bg: var(--gcid-651b5dcf-00c8-4e84-aec7-d738e65dc4cd, #FAF7F2);
  --surface: var(--gcid-9aee01c6-1d6f-4f93-b5c2-7571736ea655, #FFFFFF);
  --bg-alt: var(--gcid-8dbcf498-185d-42cb-a5bd-ac3a6793b3b9, #F3EEE6);
  --text: var(--gcid-263be1dd-55e3-47a4-a883-058a47636002, #22302A);
  --text-muted: var(--gcid-6dc3010f-491d-473b-b484-5949c50d9a49, #5C665F);
  --border: var(--gcid-5b91b99e-728c-4dfe-82c6-a7125862c9e4, #E4DDD3);
  --accent: var(--gcid-65c89e48-b36e-42df-a80e-cd9a5090cc57, #3E7C4F);
  --accent-hover: var(--gcid-525b6c1e-1757-474c-b7a3-129d4eed2bc4, #2F5D3E);
  --accent-soft: var(--gcid-d9cb8f73-5a3f-47cb-9ed6-eb9d179e1fa5, #E8F1E7);
  --accent-warm: var(--gcid-93320714-15d3-497c-ad30-962895d8835a, #A85527);
  --cat-greens: var(--gcid-017182a5-6f14-4fa5-a1b1-c7a2eb3f9ea3, #45804D);
  --cat-greens-soft: var(--gcid-b12742af-e87c-41b0-8251-ec72204c36b0, #E8F1E7);
  --cat-avocado: var(--gcid-4e82e6c2-14cb-4d11-aec2-45b7906f1314, #5A7A2C);
  --cat-avocado-soft: var(--gcid-80ceaac7-8615-481f-bc68-bd9171cedeb7, #EAF3E4);
  --cat-berry: var(--gcid-543875d6-dba7-4309-b6c8-67cc5bece659, #96446A);
  --cat-berry-soft: var(--gcid-43ad2db4-d7b3-4e28-af6c-a7f22c92bffa, #F4E9EF);
  --success: var(--gcid-e1a57971-2890-4294-9760-ffebe413be93, #3E7C4F);
  --warning: var(--gcid-9f249711-b345-485b-9266-781fcc62f611, #9A6B00);
  --error: var(--gcid-1ce28b7d-b67e-4e01-9e70-61f57e623153, #B3261E);

  /* spacing scale 1.3 -> Divi variables fbl-space-* */
  --fbl-space-4: var(--gvid-f8930412-80ba-4d29-b7cf-1e4f921780a4, 4px);
  --fbl-space-8: var(--gvid-b345f123-7a54-411b-800e-998e224b3fb4, 8px);
  --fbl-space-12: var(--gvid-51d20c87-5399-4987-a19e-377be7f2fd06, 12px);
  --fbl-space-16: var(--gvid-9a5764d5-9861-4e5d-9e72-8c6fec636c8c, 16px);
  --fbl-space-24: var(--gvid-7b4f7a33-9951-4420-86ee-b6fa02495c14, 24px);
  --fbl-space-32: var(--gvid-ad361938-2534-419b-8f4d-624896116434, 32px);
  --fbl-space-48: var(--gvid-2e264391-2cc5-4ba0-8f10-caab92e980db, 48px);
  --fbl-space-64: var(--gvid-427ec2d6-5f36-45ef-8f56-945dfca2c941, 64px);
  --fbl-space-96: var(--gvid-55f48bdd-a802-4198-acc1-16bd6d79f1e6, 96px);
  --fbl-space-128: var(--gvid-9bf5d596-3d8f-4888-949a-07b99d2056f5, 128px);

  /* radii 1.3 -> Divi variables fbl-radius-* */
  --fbl-radius-4: var(--gvid-63a42d5a-7e37-4bef-a56a-4b8858952754, 4px);
  --fbl-radius-8: var(--gvid-b0910aa4-f048-433e-97ea-63182057b1ec, 8px);
  --fbl-radius-12: var(--gvid-1ab7ac15-880a-475f-9c5b-f3d3a06d26e8, 12px);
  --fbl-radius-999: var(--gvid-f1e966e9-af15-43e4-9e8e-2c2610f426ba, 999px);

  /* containers 1.3 -> Divi variables fbl-container-* */
  --fbl-container-1200: var(--gvid-bdf5515d-2905-4964-b08c-97ef46c943a4, 1200px);
  --fbl-container-720: var(--gvid-d2c20430-f473-412f-a221-329a53e9a8f6, 720px);
  --fbl-container-300: var(--gvid-12621bbd-bb97-4264-9200-a701f24bf437, 300px);

  /* type scale 1.2 (clamp, mobile-first).
     Font stacks keep the same fallback names Divi's Global Fonts use
     (Georgia / Helvetica) — those resolve to the metric-adjusted faces
     from section 0 (CLS). */
  --fbl-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fbl-font-body: "Source Sans 3", Helvetica, Arial, sans-serif;
  --fbl-fs-display: clamp(36px, 4.6vw, 55px);
  --fbl-fs-h1: clamp(34px, 3.6vw, 44px);
  --fbl-fs-h2: clamp(28px, 2.8vw, 35px);
  --fbl-fs-h3: clamp(24px, 2.2vw, 28px);
  --fbl-fs-h4: clamp(21px, 1.8vw, 23px);
  --fbl-fs-body: clamp(17px, 1.1vw, 18px);
  --fbl-fs-body-small: 16px;
  --fbl-fs-meta: 14px;
  --fbl-fs-button: clamp(16px, 1vw, 17px);

  /* allowed shadows only (design-system 4) */
  --fbl-shadow-card: 0 8px 24px rgba(34, 48, 42, 0.08);
  --fbl-shadow-sticky: 0 12px 32px rgba(34, 48, 42, 0.10);

  --fbl-anchor-offset: 88px;
}

/* ==========================================================================
   2. Layout primitives (1.3)
   ========================================================================== */
.fbl-container {
  max-width: var(--fbl-container-1200);
  margin-inline: auto;
  padding-inline: var(--fbl-space-24);
}
@media (min-width: 1024px) {
  .fbl-container { padding-inline: var(--fbl-space-48); }
}
.fbl-col-recipe { max-width: var(--fbl-container-720); }
.fbl-col-sidebar {
  max-width: var(--fbl-container-300);
  position: sticky;
  top: var(--fbl-space-32);
}

/* smooth anchors + sticky header clearance (motion 6) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: var(--fbl-anchor-offset); }

/* ==========================================================================
   3. Components fbl- (1.4) — hover/focus states not expressible in Divi
      presets live here; presets carry the base look.
   ========================================================================== */

/* fbl-btn-primary: preset 141711ae… + hover/focus (1.4, design-system 6) */
.fbl-btn-primary,
.fbl-btn-primary .et_pb_button,
button.fbl-btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--fbl-radius-8);
  padding: var(--fbl-space-12) var(--fbl-space-24);
  min-height: 48px;
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-button);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: background-color 150ms ease-in-out;
}
.fbl-btn-primary:hover,
.fbl-btn-primary:focus-visible,
.fbl-btn-primary .et_pb_button:hover,
.fbl-btn-primary .et_pb_button:focus-visible {
  background: var(--accent-hover);
  color: #FFFFFF;
}

/* fbl-chip: badges, <= 3 per card (1.4) */
.fbl-chip {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  color: var(--text);
  border-radius: var(--fbl-radius-999);
  padding: var(--fbl-space-8) var(--fbl-space-12);
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fbl-chip--greens { background: var(--cat-greens-soft); }
.fbl-chip--avocado { background: var(--cat-avocado-soft); }
.fbl-chip--berry { background: var(--cat-berry-soft); }

/* fbl-nutrition-chip: kcal / protein / fat / carbs row (1.4, design-system 4) */
.fbl-nutrition {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fbl-space-8);
}
.fbl-nutrition-chip {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: var(--fbl-radius-999);
  padding: var(--fbl-space-8) var(--fbl-space-12);
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* fbl-notes: recipe notes callout (1.4) */
.fbl-notes {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: var(--fbl-radius-8);
  padding: var(--fbl-space-16) var(--fbl-space-24);
  font-family: var(--fbl-font-body);
  font-size: var(--fbl-fs-body);
  line-height: 1.7;
  color: var(--text);
}

/* fbl-newsletter: surface + hairline (1.4, design-system 4) */
.fbl-newsletter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--fbl-radius-12);
  padding: var(--fbl-space-24);
}
@media (min-width: 768px) {
  .fbl-newsletter { padding: var(--fbl-space-32); }
}

/* fbl-card-recipe: photo 4:3, one link per card (1.4, design-system 5.3) */
.fbl-card-recipe {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--fbl-radius-8);
  overflow: hidden;
}
.fbl-card-recipe__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.fbl-card-recipe__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}
.fbl-card-recipe:hover .fbl-card-recipe__photo img,
.fbl-card-recipe:focus-within .fbl-card-recipe__photo img {
  transform: scale(1.03);
}
.fbl-card-recipe:hover,
.fbl-card-recipe:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--fbl-shadow-card);
}
.fbl-card-recipe__title {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h3);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.fbl-card-recipe:hover .fbl-card-recipe__title { text-decoration: underline; }

/* recipe card grid (design-system 5.3): photo 4:3, cover — the Divi blog loop
   otherwise renders featured images at natural size */
.et_pb_blog .et_pb_post .entry-featured-image-url {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fbl-radius-8);
}
.et_pb_blog .et_pb_post .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}
.et_pb_blog .et_pb_post:hover .entry-featured-image-url img,
.et_pb_blog .et_pb_post:focus-within .entry-featured-image-url img {
  transform: scale(1.03);
}
.et_pb_blog .et_pb_post:hover .entry-title a,
.et_pb_blog .et_pb_post:focus-within .entry-title a {
  text-decoration: underline;
}

/* fbl-card-category: photo 3:2 + H4 plate + meta counter (design-system 5.2).
   Works on the Divi 5 blurb DOM (class fbl-card-category on the module root;
   title renders as .et_pb_module_header, image as .et_pb_main_blurb_image)
   and on hand-built markup (.fbl-card-category__* BEM hooks). */
.fbl-card-category {
  position: relative;
  border-radius: var(--fbl-radius-8);
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.fbl-card-category__photo,
.fbl-card-category .et_pb_blurb_image,
.fbl-card-category .et_pb_main_blurb_image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.fbl-card-category__photo img,
.fbl-card-category .et_pb_blurb_image img,
.fbl-card-category .et_pb_main_blurb_image img,
.fbl-card-category .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}
.fbl-card-category:hover .fbl-card-category__photo img,
.fbl-card-category:hover .et_pb_blurb_image img,
.fbl-card-category:hover .et_pb_main_blurb_image img,
.fbl-card-category:focus-within .fbl-card-category__photo img,
.fbl-card-category:focus-within .et_pb_blurb_image img,
.fbl-card-category:focus-within .et_pb_main_blurb_image img {
  transform: scale(1.03);
}
.fbl-card-category:hover,
.fbl-card-category:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--fbl-shadow-card);
}
/* whole tile is one link: stretched anchor from the title (5.2) */
.fbl-card-category .et_pb_module_header a,
.fbl-card-category .et_pb_blurb_title a {
  display: inline-flex;
  align-items: center;
  padding-block: 10px;
  margin-block: -10px;
}
.fbl-card-category .et_pb_module_header a::after,
.fbl-card-category .et_pb_blurb_title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fbl-card-category__plate,
.fbl-card-category .et_pb_blurb_title,
.fbl-card-category .et_pb_module_header {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h4);
  line-height: 1.28;
  letter-spacing: -0.01em;
  padding: var(--fbl-space-12) var(--fbl-space-16);
  background: var(--cat-greens);
  color: #FFFFFF;
}
.fbl-card-category__plate a,
.fbl-card-category .et_pb_module_header a,
.fbl-card-category .et_pb_blurb_title a {
  color: #FFFFFF;
}
.fbl-card-category__counter,
.fbl-card-category .et_pb_blurb_description {
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: var(--fbl-space-12) var(--fbl-space-16) var(--fbl-space-16);
}
/* category tints (design-system 2.3): plate white-on-cat or text-on-soft */
.fbl-cat-greens .fbl-card-category__plate,
.fbl-cat-greens .et_pb_blurb_title,
.fbl-cat-greens .et_pb_module_header { background: var(--cat-greens); color: #FFFFFF; }
.fbl-cat-greens-soft .fbl-card-category__plate,
.fbl-cat-greens-soft .et_pb_blurb_title,
.fbl-cat-greens-soft .et_pb_module_header { background: var(--cat-greens-soft); color: var(--text); }
.fbl-cat-avocado .fbl-card-category__plate,
.fbl-cat-avocado .et_pb_blurb_title,
.fbl-cat-avocado .et_pb_module_header { background: var(--cat-avocado); color: #FFFFFF; }
.fbl-cat-avocado-soft .fbl-card-category__plate,
.fbl-cat-avocado-soft .et_pb_blurb_title,
.fbl-cat-avocado-soft .et_pb_module_header { background: var(--cat-avocado-soft); color: var(--text); }
.fbl-cat-berry .fbl-card-category__plate,
.fbl-cat-berry .et_pb_blurb_title,
.fbl-cat-berry .et_pb_module_header { background: var(--cat-berry); color: #FFFFFF; }
.fbl-cat-berry-soft .fbl-card-category__plate,
.fbl-cat-berry-soft .et_pb_blurb_title,
.fbl-cat-berry-soft .et_pb_module_header { background: var(--cat-berry-soft); color: var(--text); }

/* category tiles grid: 3 / 2 / 1 columns (design-system 5.2) — Divi stacks
   the 1/3 columns below 980px, so the tablet case is restored here */
@media (min-width: 768px) and (max-width: 980px) {
  .fbl-cat-grid,
  .et_pb_row:has(.fbl-card-category) {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--fbl-space-24);
  }
  .fbl-cat-grid > .et_pb_column,
  .et_pb_row:has(.fbl-card-category) > .et_pb_column {
    width: calc(50% - var(--fbl-space-12)) !important;
  }
}

/* fbl-faq: details/summary accordion, questions H4 (1.4, design-system 5.4) */
.fbl-faq details,
details.fbl-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--fbl-radius-8);
  padding: var(--fbl-space-16) var(--fbl-space-24);
}
.fbl-faq details + details,
details.fbl-faq-item + details.fbl-faq-item {
  margin-top: var(--fbl-space-12);
}
.fbl-faq summary,
details.fbl-faq-item summary {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h4);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}
.fbl-faq details p,
details.fbl-faq-item p {
  font-family: var(--fbl-font-body);
  font-size: var(--fbl-fs-body);
  line-height: 1.7;
}

/* fbl-breadcrumbs: meta 14px muted, "/" separator (1.4) */
.fbl-breadcrumbs,
.fbl-breadcrumbs a {
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.fbl-breadcrumbs a:hover { color: var(--accent); }

/* fbl-author-box: 96px round photo, name-link, role, bio (1.4, design-system 5.4) */
.fbl-author-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--fbl-radius-8);
  padding: var(--fbl-space-24);
  display: flex;
  gap: var(--fbl-space-24);
  align-items: flex-start;
}
.fbl-author-box__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--fbl-radius-999);
  object-fit: cover;
  flex-shrink: 0;
}
.fbl-author-box__name {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h4);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.fbl-author-box__role {
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.fbl-author-box__bio {
  font-family: var(--fbl-font-body);
  font-size: var(--fbl-fs-body);
  line-height: 1.7;
}

/* ==========================================================================
   4. WP Recipe Maker (1.6): recipe card / checklist / nutrition / FAQ
   ========================================================================== */
.wprm-recipe-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--fbl-radius-8);
  padding: var(--fbl-space-24);
  color: var(--text);
  font-family: var(--fbl-font-body);
  font-size: var(--fbl-fs-body);
  line-height: 1.7;
}
@media (min-width: 768px) {
  .wprm-recipe-container { padding: var(--fbl-space-32); }
}
.wprm-recipe-name {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h3);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

/* ingredient checklist (design-system 5.4) */
.wprm-recipe-ingredient {
  font-size: 17px;
  display: flex;
  align-items: baseline;
  gap: var(--fbl-space-8);
}
.wprm-recipe-ingredient input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  border-radius: var(--fbl-radius-4);
  accent-color: var(--success);
  align-self: center;
}
.wprm-recipe-ingredient input[type="checkbox"]:checked + *,
.wprm-recipe-ingredient--checked .wprm-recipe-ingredient-name {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* nutrition chips (design-system 4, 5.4) */
.wprm-recipe-nutrition-container,
.fbl-nutrition {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fbl-space-8);
}
.wprm-nutrition-label,
.wprm-recipe-nutrition-container .wprm-nutrition-label {
  background: var(--accent-soft);
  border-radius: var(--fbl-radius-999);
  padding: var(--fbl-space-8) var(--fbl-space-12);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.wprm-recipe-nutrition-disclaimer,
.fbl-disclaimer {
  font-family: var(--fbl-font-body);
  font-weight: 600;
  font-size: var(--fbl-fs-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* WPRM FAQ fallback styles (native details/summary styled above) */
.wprm-faq-item { border-radius: var(--fbl-radius-8); }
.wprm-faq-question {
  font-family: var(--fbl-font-display);
  font-weight: 600;
  font-size: var(--fbl-fs-h4);
  line-height: 1.28;
}

/* print recipe: hide chrome, keep card (WPRM print layout parity) */
@media print {
  .fbl-jump-bar,
  .fbl-newsletter,
  .fbl-skip-link { display: none !important; }
}

/* ==========================================================================
   5. Sticky jump bar (design-system 5.7) — mobile only, safe-area aware
   ========================================================================== */
.fbl-jump-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--fbl-space-12);
  min-height: 56px;
  padding: var(--fbl-space-8) var(--fbl-space-16);
  padding-bottom: calc(var(--fbl-space-8) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--fbl-shadow-sticky);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 250ms ease, visibility 0s linear 250ms;
}
.fbl-jump-bar--visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 250ms ease, visibility 0s;
}
@media (max-width: 767px) {
  .fbl-jump-bar { display: flex; }
}

/* ==========================================================================
   6. Accessibility floor v0.2.0 (design-system 7, 8)
      - touch targets >= 44px; buttons / CTA >= 48px
      - form fields >= 16px (no iOS zoom), search field >= 44px high
      - visible 2px --accent focus outline
   ========================================================================== */

/* visible keyboard + form focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* form fields: 16px floor + token colors (fixes 13.3px / #666 search field) */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="password"], textarea, select,
.et_pb_search input.et_pb_s,
.et_pb_search input.et_pb_searchsubmit,
.et_pb_menu .et_pb_menu__search-input {
  font-size: 16px !important;
  color: var(--text) !important;
}
.et_pb_search input.et_pb_s,
.et_pb_search input.et_pb_searchsubmit,
.et_pb_menu .et_pb_menu__search-input,
.et_pb_newsletter .et_pb_newsletter_field input {
  min-height: 44px;
  box-sizing: border-box;
}
input::placeholder, textarea::placeholder,
.et_pb_search input.et_pb_s::placeholder,
.et_pb_menu .et_pb_menu__search-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

/* buttons / CTA: >= 48px (design-system 7) */
.et_pb_button, .fbl-btn-primary, button.fbl-btn-primary,
input[type="submit"], input[type="button"], button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* cookie banner buttons: >= 44px even against plugin styles */
.cookieadmin_btn { min-height: 44px !important; }

/* --- touch targets >= 44px (design-system 7, 8) --- */

/* header menu links */
.et-menu li a,
.fbl-header-menu .et-menu li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--fbl-space-8);
}

/* mobile menu drawer + hamburger toggle */
.et_mobile_menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--fbl-space-12) 5%;
}
.mobile_menu_bar,
.mobile_menu_bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* footer / widget link lists: hit area grows via padding, layout untouched */
.et-l--footer .et_pb_text_inner a,
.et_pb_widget a {
  display: inline-flex;
  align-items: center;
  padding-block: 12px;
  margin-block: -12px;
}

/* post meta + breadcrumbs links (author, category, crumbs) */
.et_pb_post .post-meta a,
#left-area .post-meta a,
.et_pb_breadcrumbs a,
.fbl-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  padding-block: 12px;
  margin-block: -12px;
}

/* blog card titles and read-more links */
.et_pb_post .entry-title a,
.et_pb_post h2 a,
.et_pb_post_title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.et_pb_post .more,
.et_pb_posts a.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* pagination */
.et_pb_blog_grid .pagination a,
.pagination a,
.wp-pagenavi a,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* social share / follow icons */
.et_pb_social_icon a,
.fbl-share a,
.sharemypost-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* breadcrumbs links (Divi inline CSS forces inline-block — matched 1:1) */
.et_pb_breadcrumbs .et_pb_breadcrumbs--trail a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-block: 12px;
  margin-block: -12px;
}

/* WPRM interactive links / toggles — !important beats plugin CSS specificity */
.wprm-recipe-link,
.wprm-recipe-print,
.wprm-recipe-pin {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
}
button.wprm-toggle,
.wprm-toggle,
.wprm-recipe-adjustable-servings {
  min-width: 44px !important;
  min-height: 44px !important;
}
.wprm-expandable-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* footer link lists: keep hit area >= 44px wide too */
.et-l--footer .et_pb_text_inner a,
.et_pb_widget a {
  min-width: 44px;
}

/* CookieAdmin banner attribution link */
.cookieadmin-poweredby a {
  display: inline-flex;
  align-items: center;
  padding-block: 14px;
  margin-block: -14px;
}

/* WPRM call-to-action inline link ("Let us know") */
.wprm-call-to-action a {
  display: inline-flex;
  align-items: center;
  padding-block: 14px;
  margin-block: -14px;
}

/* comment form cookie consent: 24px box + label row >= 44px hit area
   (native checkbox ignores padding, so the clickable label carries the
   target size) */
.comment-form-cookies-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
}
.comment-form-cookies-consent label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  margin-block: -10px;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ==========================================================================
   7. Legacy Divi palette -> design tokens v0.2.0 (design-system 2, 8)
      The Divi base stylesheet paints body text #666 and headings #333
      (plus #2ea3f2 / #82c0c7 link accents). Nothing may be lighter than
      --text-muted #5C665F. Element-level selectors here stay low-specificity
      on purpose: module-level token colors (inline styles) keep winning.
   ========================================================================== */
body {
  color: var(--text);
  font-family: var(--fbl-font-body);
}
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* body copy inside blog cards (legacy #666) */
.et_pb_bg_layout_light .et_pb_post p,
.et_pb_bg_layout_light_tablet .et_pb_post p,
.et_pb_bg_layout_light_phone .et_pb_post p {
  color: var(--text);
}

/* muted meta layer (legacy #666) */
.et_pb_post .post-meta,
#left-area .post-meta,
.et_pb_post .post-meta a,
#left-area .post-meta a,
.et_pb_breadcrumbs,
.et_pb_breadcrumbs a {
  color: var(--text-muted);
}

/* legacy responsive rules carry !important — matched here 1:1 */
.et_pb_bg_layout_light_tablet,
.et_pb_bg_layout_light_phone {
  color: var(--text) !important;
}
.et_pb_bg_layout_light_tablet h1, .et_pb_bg_layout_light_tablet h2,
.et_pb_bg_layout_light_tablet h3, .et_pb_bg_layout_light_tablet h4,
.et_pb_bg_layout_light_tablet h5, .et_pb_bg_layout_light_tablet h6,
.et_pb_bg_layout_light_phone h1, .et_pb_bg_layout_light_phone h2,
.et_pb_bg_layout_light_phone h3, .et_pb_bg_layout_light_phone h4,
.et_pb_bg_layout_light_phone h5, .et_pb_bg_layout_light_phone h6 {
  color: var(--text) !important;
}

/* legacy accent blues -> --accent */
.et_pb_post .more,
.nav-single a,
.et_pb_widget a {
  color: var(--accent);
}

/* WPRM paints text colors inline (#333333) — tokens win via !important */
.wprm-nutrition-label-text-nutrition-label { color: var(--text) !important; }
.wprm-recipe-link,
.wprm-recipe-print,
.wprm-recipe-pin {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   8. prefers-reduced-motion (1.6, design-system 6): no transitions/transforms
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .fbl-card-recipe:hover .fbl-card-recipe__photo img,
  .fbl-card-recipe:focus-within .fbl-card-recipe__photo img,
  .fbl-card-category:hover .fbl-card-category__photo img,
  .fbl-card-category:hover .et_pb_blurb_image img,
  .fbl-card-category:hover .et_pb_main_blurb_image img,
  .fbl-card-category:focus-within .fbl-card-category__photo img,
  .fbl-card-category:focus-within .et_pb_blurb_image img,
  .fbl-card-category:focus-within .et_pb_main_blurb_image img {
    transform: none;
  }
  .fbl-card-recipe:hover, .fbl-card-recipe:focus-within,
  .fbl-card-category:hover, .fbl-card-category:focus-within {
    transform: none;
  }
  .fbl-jump-bar { transform: none; }
}