/* ==========================================================================
   SpOki — BREADCRUMB SYSTEM (design-system component) v1.1  · 2026-07-06
   Reorders the Woodmart page-title so breadcrumbs sit ABOVE the H1, and
   styles them per Colour Law v3 (Nunito, deep-teal links, quiet separators).
   Activated per page by a body flag added in spoki-breadcrumb-system.php:
     .spoki-bc-left   = Variant A (DEFAULT, left-aligned)  — functional pages
     .spoki-bc-center = Variant B (centered)               — hero/campaign only
   Inert without the flag. Schema untouched (Rank Math emits BreadcrumbList
   JSON-LD separately). Kill-switch: remove the require in functions.php or
   delete this file.
   NOTE: WoodMart styles .wd-breadcrumbs with a high-specificity selector
   (body.page:not(...5x)... .wd-breadcrumbs) that is a CENTERED, WRAPPING flex
   row. A few !important overrides below are required to own alignment/size
   — scoped to this one component only (consistent with the WoodMart-override
   pattern already used for selects/buttons).
   ========================================================================== */
:root{
  --spoki-bc-link:#00838A;      /* deep-teal link on WHITE bg (single product) */
  --spoki-bc-link-on-cream:#007B82; /* darker teal link on CREAM #FFF7EB (AA) */
  --spoki-bc-current:#2E3A67;   /* navy 600 — current page, not a link */
  --spoki-bc-sep:#C8C8C8;       /* decorative separator, aria-hidden */
  --spoki-bc-gap:16px;          /* space below breadcrumbs before H1 (14–22px) */
}

/* ---- Shared: breadcrumb ABOVE the H1 inside the Woodmart title block ---- */
body.spoki-bc-left  .wd-page-title .container,
body.spoki-bc-center .wd-page-title .container{ display:flex; flex-direction:column; }
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs{ order:-1; margin:0 0 var(--spoki-bc-gap); }
body.spoki-bc-left  .wd-page-title .entry-title,
body.spoki-bc-center .wd-page-title .entry-title{ order:0; margin-top:0; }

/* ---- Own the breadcrumb flex row (WoodMart makes it centered + wrapping) ---- */
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs{
  display:flex; flex-wrap:wrap; align-items:center;
}
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs > *,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs > *{ flex:0 0 auto; }

/* ---- Typography / colour (both variants) — small, quiet, not a headline ---- */
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs{
  font-family:'Nunito', sans-serif;
  font-size:14px !important; line-height:1.5; font-weight:600;
  letter-spacing:normal; text-transform:none;
}
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs a,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs a{ color:var(--spoki-bc-link-on-cream) !important; text-decoration:none; }
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs a:hover,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs a:hover{ color:var(--spoki-bc-link); text-decoration:underline; }
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs .wd-last,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs .wd-last{ color:var(--spoki-bc-current); font-weight:600; }
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs .wd-delimiter,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs .wd-delimiter{ color:var(--spoki-bc-sep); margin:0 8px; }

/* ---- Variant A — DEFAULT, left-aligned (functional pages) ---- */
body.spoki-bc-left .wd-page-title{ text-align:left; }
body.spoki-bc-left .wd-page-title .container{ align-items:flex-start; }
body.spoki-bc-left .wd-page-title .wd-breadcrumbs{ justify-content:flex-start !important; text-align:left; }

/* ---- Variant B — centered (hero/campaign pages only) ---- */
body.spoki-bc-center .wd-page-title{ text-align:center; }
body.spoki-bc-center .wd-page-title .container{ align-items:center; }
body.spoki-bc-center .wd-page-title .wd-breadcrumbs{ justify-content:center !important; text-align:center; }

/* ---- Mobile: smaller, wraps to as many lines as needed so the LAST
   (active) crumb is always fully visible without requiring a scroll gesture.
   FIX 2026-07-21: previous "one line + horizontal scroll" approach defaulted
   to scrollLeft 0, hiding the active crumb on long trails with no visible
   affordance to reach it. Also gets an explicit width (not just max-width) so
   it can never grow past the viewport regardless of a shrink-to-fit parent. ---- */
@media (max-width:767px){
  body.spoki-bc-left  .wd-page-title .wd-breadcrumbs,
  body.spoki-bc-center .wd-page-title .wd-breadcrumbs{
    font-size:13px !important; --spoki-bc-gap:12px;
    flex-wrap:wrap !important; justify-content:flex-start !important;
    white-space:normal; overflow:visible;
    width:100%; max-width:100%; box-sizing:border-box; row-gap:2px;
    min-width:0;
  }
  /* Guard 2026-07-21: an unbreakable single word (long brand/SKU/slug-like
     term with no spaces) could still exceed the row width even while
     wrapping; let it break inside the word as a last resort. */
  body.spoki-bc-left  .wd-page-title .wd-breadcrumbs a,
  body.spoki-bc-center .wd-page-title .wd-breadcrumbs a,
  body.spoki-bc-left  .wd-page-title .wd-breadcrumbs .wd-last,
  body.spoki-bc-center .wd-page-title .wd-breadcrumbs .wd-last{
    overflow-wrap:anywhere; min-width:0; flex-shrink:1 !important;
  }
}
/* ==========================================================
   GLOBAL ROLLOUT EXTENSION (2026-07-06) — same component, three DOM variants
   ========================================================== */

/* --- WooCommerce taxonomy/shop archives: breadcrumbs live in .wd-title-wrapp --- */
body.spoki-bc-left .wd-page-title .wd-title-wrapp{display:flex !important;flex-direction:column;align-items:center;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs{order:-1;margin:0 0 var(--spoki-bc-gap);align-self:flex-start;justify-content:flex-start !important;text-align:left;display:flex;flex-wrap:wrap;align-items:center;font-family:'Nunito',sans-serif;font-size:14px !important;line-height:1.5;font-weight:600;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .entry-title,body.spoki-bc-left .wd-page-title .wd-title-wrapp .title{order:0;margin-top:0;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs a{color:var(--spoki-bc-link-on-cream) !important;text-decoration:none;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs a:hover{text-decoration:underline;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs .wd-last{color:var(--spoki-bc-current);font-weight:600;}
body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs .wd-delimiter{color:var(--spoki-bc-sep);margin:0 8px;}

/* --- Single product: breadcrumbs already above title; unify typography/colour, keep left --- */
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs{font-family:'Nunito',sans-serif;font-size:14px !important;line-height:1.5;font-weight:600;justify-content:flex-start !important;text-align:left;}
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs a{color:var(--spoki-bc-link) !important;text-decoration:none;}
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs a:hover{text-decoration:underline;}
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-last{color:var(--spoki-bc-current);font-weight:600;}
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-delimiter{color:var(--spoki-bc-sep);margin:0 8px;}

/* --- Age hub hero (.spoki-age-hero2, intentionally centered family): breadcrumbs move ABOVE H1, stay centered --- */
.spoki-age-hero2{display:flex;flex-direction:column;}
.spoki-age-hero2 .spoki-age-hero2__bc{order:-1;margin:0 0 14px;}
.spoki-age-hero2 .spoki-age-hero2__h1{order:0;}

/* --- Mobile: archives + product, wraps (see FIX note above), smaller --- */
@media (max-width:767px){
  body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs,
  body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs{font-size:13px !important;flex-wrap:wrap !important;white-space:normal;overflow:visible;width:100%;max-width:100%;box-sizing:border-box;row-gap:2px;min-width:0;}
  /* Guard 2026-07-21: same unbreakable-word protection as the page-title variant above. */
  body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs a,
  body.spoki-bc-left .wd-page-title .wd-title-wrapp .wd-breadcrumbs .wd-last,
  body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs a,
  body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-last{
    overflow-wrap:anywhere; min-width:0; flex-shrink:1 !important;
  }
}

/* --- FIX 2026-07-21: WoodMart core (woo-single-prod-el-base.css) hides the final
   plain-text crumb on single product at <=1024px via
   ".woocommerce-breadcrumb .wd-last-link ~ span{display:none}" -- that final span
   IS .wd-last, i.e. the active/current crumb the user is complaining is missing.
   Un-hide it; layout safety (wrap/width) is handled by the mobile block above.
   Targets .wd-last directly (WoodMart's own semantic "current crumb" class --
   already relied on elsewhere in this file for color, present on every
   breadcrumb variant, no aria-current attribute exists to target instead)
   rather than the "~ span" sibling combinator, so this keeps working even if
   a WoodMart update changes element order/type around .wd-last-link. --- */
@media (max-width:1024px){
  body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-last{
    display:inline !important;
  }
}

/* --- C.18 PATCH (2026-07-06): on single product the colour-law link rule outranks
   the C.17 current/separator colours (they computed teal). Component-local !important,
   same accepted WoodMart-override pattern. Extend-only per C.17 LOCK. --- */
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs span.wd-last{color:var(--spoki-bc-current) !important;font-weight:600;}
body.spoki-bc-left .single-breadcrumbs-wrapper .wd-breadcrumbs .wd-delimiter{color:var(--spoki-bc-sep) !important;}

/* --- Batch 1A (2026-07-13): keyboard focus ring on breadcrumb links (a11y) --- */
body.spoki-bc-left  .wd-page-title .wd-breadcrumbs a:focus-visible,
body.spoki-bc-center .wd-page-title .wd-breadcrumbs a:focus-visible,
body.spoki-bc-left  .wd-page-title .wd-title-wrapp .wd-breadcrumbs a:focus-visible,
body.spoki-bc-left  .single-breadcrumbs-wrapper .wd-breadcrumbs a:focus-visible{
  outline:2px solid currentColor; outline-offset:2px; border-radius:2px;
}