/*
 * patterns/bread-crumbs.css — "Breadcrumbs"
 * Markup: wp-content/themes/fcs/patterns/bread-crumbs.php
 * Root:   .fcs-bread-crumbs
 *
 * Figma: instance 7953:7451, master 3278:2741, item states 3278:2872,
 * full string 3278:2863. 31 instances across the design, all identical.
 *
 * The trail itself is built by fcs-core/inc/bread-crumbs.php, so the class
 * names below are that file's contract as much as the pattern's — the two have
 * to move together.
 *
 * SECTION PADDING is not declared here at any size. Medium and Large belong to
 * the editor's Dimensions panel, Small is pinned in layout/spacing.css, which
 * also carries this section's 20px exception. See CLAUDE.md § "Section padding".
 *
 * TYPE IS GLOBAL. Figma's crumb is the 16px/24px body paragraph, which is
 * theme.json's `medium` and already the site-wide default — so nothing here
 * sets a font size. The only typographic rule below is the underline opt-out.
 */

/*
 * BELT AND BRACES AGAINST THE 768px CAP.
 *
 * theme.json sets contentSize to 768px, and core's constrained layout applies
 *
 *     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 *         { max-width: var( --wp--style--global--content-size ) }
 *
 * to every direct child that is not explicitly aligned. The .alignwide wrapper
 * in the pattern opts out of it — but a pattern is copied into a page when it is
 * inserted, so a page that took this section before the wrapper existed still
 * holds the old markup and would show a 768px trail.
 *
 * fcs-core re-adds the wrapper at render time for exactly that case. This rule
 * is the belt to that braces: it restores the intended measure even if the list
 * ends up a direct child of the section with core's cap applied. The :where()
 * keeps it at zero specificity so nothing here fights the wrapper when it is
 * present.
 */
.fcs-bread-crumbs :where(.fcs-bread-crumbs__list) {
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
}

/* Inner ----------------------------------------------------------------- */

/*
 * THE INNER HAS NO HORIZONTAL PADDING AT MEDIUM AND LARGE.
 *
 * At those sizes .alignwide caps the inner at 1240px and centres it, which is
 * exactly the edge the header logo and the banner copy above sit on. Adding a
 * gutter here would push the trail 20px INSIDE that edge and break the
 * alignment — which is what it did when this rule was unscoped.
 *
 * The 20px mobile gutter is the standard for every pattern, but it belongs to
 * Small only and is pinned in layout/spacing.css, where all the Small spacing
 * lives. Nothing is needed here.
 *
 * The section ROOT also carries no horizontal padding, for the same reason it
 * cannot: it is alignfull, so padding there lands inside the 1240px cap. See
 * the note in patterns/bread-crumbs.php.
 */

/* List ------------------------------------------------------------------ */

/*
 * An <ol> carrying no numbers: the sequence is conveyed by the chevrons
 * visually and by the list structure to a screen reader, so the markers would
 * be a third, redundant telling of it.
 */
/*
 * THE SELECTOR IS WEIGHTED ON PURPOSE.
 *
 * base/typography.css indents editor lists:
 *
 *     .wp-block-post-content :where( ul, ol ):not( [class*="wp-block-"] )
 *         { padding-inline-start: 1.5em }
 *
 * That is (0,2,0) — one class plus an attribute selector, since :where() adds
 * nothing. A bare .fcs-bread-crumbs__list is (0,1,0) and loses, which is what
 * left a 1.5em gap before the home icon and pushed the trail off the 1240px
 * edge it is supposed to share with the header logo.
 *
 * Two classes plus the element is (0,2,1), so this wins on weight rather than on
 * load order alone. It deliberately does NOT use that file's
 * [class*="wp-block-"] escape hatch: the list is ours, not core's, and giving it
 * a fake wp-block class to dodge a selector would be worse than being explicit.
 */
.fcs-bread-crumbs ol.fcs-bread-crumbs__list {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
  gap: 16px;

  /*
   * margin-block only. The inline margins are left to the belt-and-braces rule
   * above, which sets `margin-inline: auto` to centre the trail in the cases
   * where it is not inside the alignwide wrapper. `margin: 0` here would be
   * more specific and would quietly undo that.
   */
  margin-block: 0;
}

/*
 * NO WRAPPING — a derived decision, since no mobile design exists.
 *
 * A wrapped trail is worse than a clipped one: it pushes the page content down
 * by a line on exactly the narrow screens with least room, and it does it
 * unpredictably, because the wrap point depends on how long the page titles
 * happen to be. Scrolling keeps the band at its designed 64px on every page and
 * keeps the current crumb — the one that says where you are — adjacent to the
 * content it labels.
 *
 * The scrollbar is hidden because the chevrons already read as "there is more
 * this way", and a visible bar inside a 24px row is mostly bar.
 *
 * If a mobile design round ever arrives, this is the choice to review.
 */
.fcs-bread-crumbs__list {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.fcs-bread-crumbs__list::-webkit-scrollbar {
  display: none;
}

/* Items ----------------------------------------------------------------- */

/*
 * The chevron sits inside the item that FOLLOWS it rather than between items,
 * because an <ol> may only contain <li>. So each item is itself a flex row of
 * [chevron] + [crumb], with the same 16px gap the list uses between items.
 */
.fcs-bread-crumbs__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

/*
 * Long titles are kept on one line. "About Friends Christian School" is the
 * current crumb in the Figma instance and is already 287px wide; letting it
 * break would make the band two lines tall on a phone, which is what the
 * horizontal scroll above exists to avoid.
 */
.fcs-bread-crumbs__link,
.fcs-bread-crumbs__current {
  white-space: nowrap;
}

/* Crumbs ---------------------------------------------------------------- */

/*
 * OPTING OUT OF THE SITE-WIDE PROSE UNDERLINE.
 *
 * components/links.css gives every link inside .wp-block-post-content an
 * animated underline drawn as a background-image gradient, not as
 * text-decoration. A breadcrumb lives in post content, so it inherits that —
 * and `text-decoration: none` does NOT switch it off, because the bar is a
 * background, a different property entirely. That is what put a line under the
 * home icon: on an icon-only link the gradient draws across the glyph.
 *
 * So the background, its padding and its transition are all unset here, and the
 * underline is reinstated on hover as a real text-decoration. A row of
 * underlined words would otherwise read as body copy that has come apart.
 *
 * The selector is weighted to match links.css, which uses :is(...) plus
 * :where(:not(...)) — :where contributes no specificity, so that rule is
 * (0,2,1). Two classes and an element here beats it without !important.
 */
.fcs-bread-crumbs .fcs-bread-crumbs__list a.fcs-bread-crumbs__link {
  color: var(--wp--preset--color--link);
  text-decoration: none;
  background-image: none;
  padding-bottom: 0;
  transition: color var(--fcs-transition);
}

/*
 * The current crumb is not a link, and the home crumb is an icon — neither
 * should ever grow an underline, so only the worded links get one back.
 */
.fcs-bread-crumbs__link:hover,
.fcs-bread-crumbs__link:focus-visible {
  color: var(--wp--preset--color--primary);
}

.fcs-bread-crumbs__link:not(:has(.fcs-bread-crumbs__home)):hover,
.fcs-bread-crumbs__link:not(:has(.fcs-bread-crumbs__home)):focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--fcs-underline-size);
  text-underline-offset: var(--fcs-underline-gap);
}

/*
 * The sweeping ::after bar from links.css, suppressed the way that file
 * documents as the opt-out: `a::after { content: none; }` next to the rule
 * replacing it. Harmless if the trail never gains .fcs-link--animated, and it
 * costs nothing to be certain.
 */
.fcs-bread-crumbs__link::after {
  content: none;
}

/*
 * The current page is dark and deliberately not a link — Figma draws it in
 * #222222 against the blue of the rest, and linking a page to itself only
 * costs someone their place.
 */
.fcs-bread-crumbs__current {
  color: var(--wp--preset--color--foreground);
}

/* Icons ----------------------------------------------------------------- */

/*
 * Both glyphs are fill="currentColor", so the home icon takes the link colour
 * from its <a> and the chevrons take it from the list. That is the whole reason
 * they are inlined rather than used as <img>: one file each, tinted by context.
 *
 * flex-shrink is pinned because these sit in a scrolling flex row, which would
 * otherwise squash the icons before it scrolls.
 */
.fcs-bread-crumbs__home,
.fcs-bread-crumbs__sep {
  display: block;
  flex-shrink: 0;
}

.fcs-bread-crumbs__home {
  width: 20px;
  height: 20px;
}

.fcs-bread-crumbs__sep {
  width: 10px;
  height: 10px;
  color: var(--wp--preset--color--link);
}

/*
 * The home crumb is icon-only, so its <a> is sized by the icon. Making it a
 * flex box keeps the visually hidden "Home" label from affecting that box —
 * .fcs-sr-only is absolutely positioned, but the anchor still needs to be a
 * clean 20px target rather than an inline box with a text baseline under it.
 */
.fcs-bread-crumbs__link:has(.fcs-bread-crumbs__home) {
  display: flex;
  align-items: center;
}