/*
 * patterns/interior-hero-banner.css — "Interior Hero Banner"
 * Markup: wp-content/themes/fcs/patterns/interior-hero-banner.php
 * Roots:  .fcs-interior-hero (title band) + .fcs-interior-hero__nav (nav bar)
 *
 * Figma: title band 7953:2768, title band with a photograph 10030:9342,
 * nav bar 7911:7249.
 *
 * TWO ROOTS, ONE PATTERN. The nav bar is a sibling of the cover rather than a
 * child of it — it carries its own full-bleed navy background and must keep it
 * when the cover above is showing a photograph. See the note in the .php.
 *
 * The nav list itself is built by fcs-core/inc/interior-hero-banner.php, so the
 * class names below are that file's contract as much as this 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. See
 * CLAUDE.md § "Section padding".
 *
 * TYPE IS GLOBAL. Figma's title is Display/60px/Outfit ExtraBold/-0.2px, which is
 * theme.json's `display` preset carried on the heading block — so nothing here
 * sets a font size, weight or family. Same for the nav links: Figma's 16px/24px
 * body at weight 400 is already the site-wide default.
 */

/* ====== TITLE BAND ====== */

/*
 * The 20px gutter, and why it is on the inner rather than the root.
 *
 * The band is .alignfull and the inner is .alignwide, so WordPress caps the
 * inner at wideSize (1240px) but gives it no side gutter — at Small the title
 * would otherwise run edge to edge. 20px is the gutter the utility bar, the text
 * banner and the breadcrumbs all use, so the logo, the trail and this title line
 * up down the left edge.
 *
 * At Large it goes away: past the 1240px cap the viewport is wide enough that
 * the gutter protects nothing, and keeping it would measure the content at
 * 1200px instead of the design's 1240px. This is .fcs-header-cta__inner's
 * arrangement verbatim (layout/header.css).
 */
.fcs-interior-hero__inner {
  padding-inline: 20px;
}

/*
 * THE BAND IS CONTENT-HEIGHT. CORE'S 430px DEFAULT IS NOT WANTED.
 *
 * core/cover ships `min-height: 430px` in its own stylesheet, applied whenever
 * the block carries no minHeight attribute of its own. Omitting minHeight from
 * the pattern markup therefore does NOT mean "size to the content" — it means
 * "take core's 430px", which drew the title band nearly three times its designed
 * height.
 *
 * Both Figma frames (7953:2768, 10030:9342) are content-height: the 64px padding
 * plus one line of display type is the whole band. So the default is unset here
 * rather than a number being picked, which keeps the height following the title
 * when it wraps to two lines on a narrow screen.
 *
 * This is NOT pinned in layout/spacing.css the way .fcs-home-hero's min-height
 * is. That one exists because an editor sets a real height from the Minimum
 * height control and core writes it inline at every breakpoint. Here there is no
 * inline value to beat — this is a stylesheet default losing to a stylesheet
 * rule — and an editor who does set a minimum should get it at every size.
 */
.fcs-interior-hero.wp-block-cover {
  min-height: 0;
}

/*
 * margin is zeroed because the heading is the only child of the band and
 * base/typography.css gives headings a block margin that would add to the
 * section's own 64px.
 */
.fcs-interior-hero__title {
  margin: 0;
}

/*
 * THE DARK/WHITE TITLE FLIP, DRIVEN OFF THE PRESENCE OF A PHOTOGRAPH.
 *
 * Two Figma frames, one heading:
 *
 *   7953:2768   flat #edf5f8 band, #222222 title   (as shipped)
 *   10030:9342  photograph + 50% black, white title
 *
 * The signal is the background IMAGE, not the overlay strength. Both states
 * carry a dim — the flat band is the `surface` colour at 100%, because core
 * renders .has-background-dim-0 as opacity 0 and a dimRatio of 0 would leave no
 * colour at all — so the dim classes cannot tell the two apart. An image can:
 * core/cover renders one as .wp-block-cover__image-background (or, for a
 * featured-image cover, .wp-block-cover__background--…), and there is no image
 * in the flat state.
 *
 * :has() lets the title react to that without touching core's markup.
 *
 * This is why the heading carries no textColor in the pattern markup: one
 * heading serves both frames, and an editor gets the white title by doing the
 * obvious thing in the Media panel rather than by also remembering to change a
 * colour. An editor who adds a photograph still has to take the overlay to
 * black — the scrim is what makes the title legible, and no stylesheet can
 * guess which photograph needs how much.
 *
 * The default is stated rather than inherited so the two rules read as a pair
 * and neither depends on what the cover's own colour handling does first.
 */
.fcs-interior-hero .fcs-interior-hero__title {
  color: var(--wp--preset--color--foreground);
}

.fcs-interior-hero:has(.wp-block-cover__image-background)
  .fcs-interior-hero__title,
.fcs-interior-hero:has(.wp-block-cover__video-background)
  .fcs-interior-hero__title,
/*
 * A mobile-only background has no <img> to match: fcs-core paints it as a CSS
 * background-image from a custom property and marks the block
 * .has-fcs-mobile-background (inc/cover-mobile-image.php). Without this the
 * title would go white on desktop and back to dark on a phone, which is the one
 * place the scrim is doing the most work.
 */
.fcs-interior-hero.has-fcs-mobile-background .fcs-interior-hero__title {
  color: var(--wp--preset--color--background);
}

/* ====== NAV BAR ====== */

/*
 * Matched to the header's navy bar (layout/header.css) so the two read as the
 * same component, with the measurements taken from Figma 7911:7249.
 *
 * The one place they differ is the item gap: the header uses 24px, this uses
 * 40px. That is the design's own figure and it is doing work — the sub-nav
 * carries fewer, longer items than the header, so the wider gap keeps them from
 * reading as one run-on string.
 *
 * Background and text colour are NOT set here. They come from the block's
 * `primary` / `on-primary` attributes in the pattern markup, so the Site Editor
 * exposes them and the editor canvas matches the front end. theme.json first.
 */

/*
 * The same 20px gutter as the title band above, for the same reason and with the
 * same Large release — the first nav item lines up with the title, the
 * breadcrumb home icon and the header logo.
 */
.fcs-interior-hero__nav-inner {
  padding-inline: 20px;
}

.fcs-interior-hero__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

/*
 * SMALL: ONE ROW THAT SCROLLS SIDEWAYS — a derived decision, since no mobile
 * design exists.
 *
 * This is the same call bread-crumbs.css makes, for the same reason: a wrapped
 * bar changes height from page to page depending on how long the child titles
 * happen to be, and it does it on exactly the narrow screens with least room.
 * Scrolling keeps the bar one row tall.
 *
 * NOT justify-content: center. A centred flex row that is wider than its box
 * overflows on BOTH sides, and the part hanging off the left edge is outside
 * the scrollable area — the first items were cut off and could not be scrolled
 * back to. Instead the row starts at the left and the first and last items take
 * auto margins: when the links fit, the margins split the spare room and the row
 * is centred exactly as before; when they do not, the margins collapse to zero
 * and the row scrolls from its first item to its last.
 *
 * The scrollbar is hidden because a visible bar inside a 24px row is mostly bar,
 * and the clipped last item already reads as "there is more this way".
 *
 * If a mobile design round ever arrives, this is the choice to review.
 */
.fcs-interior-hero__nav-list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.fcs-interior-hero__nav-list::-webkit-scrollbar {
  display: none;
}

.fcs-interior-hero__nav-item:first-child {
  margin-inline-start: auto;
}

.fcs-interior-hero__nav-item:last-child {
  margin-inline-end: auto;
}

/*
 * Items do not shrink: in a scrolling flex row the browser would otherwise
 * squash the titles before it scrolls, and a squashed title wraps, which is the
 * thing the row exists to avoid.
 */
.fcs-interior-hero__nav-item {
  flex-shrink: 0;
}

/*
 * 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 — so `text-decoration: none` does NOT switch it off, the bar
 * being a background and a different property entirely. This section lives in
 * post content, so it inherits it. Same opt-out bread-crumbs.css documents.
 *
 * The selector is weighted to match links.css, which is (0,2,1) — :is(...) plus
 * a :where(:not(...)) that contributes nothing. Two classes and an element here
 * beats it without !important.
 *
 * inline-block matters, and for the reason layout/header.css spells out: the
 * hover bar below is drawn on the link, and a display:block link fills its <li>
 * so the bar would span the whole cell rather than the words.
 */
.fcs-interior-hero__nav .fcs-interior-hero__nav-list a.fcs-interior-hero__nav-link {
  position: relative;
  display: inline-block;
  color: var(--wp--preset--color--on-primary);
  text-decoration: none;
  background-image: none;
  padding-bottom: 0;
  white-space: nowrap;
}

/* The current item is a <span>, not a link, so it needs the box and the
 * nowrap on its own account. */
.fcs-interior-hero__nav-link {
  display: inline-block;
  white-space: nowrap;
}

/*
 * THE FOCUS RING HAS TO BE WHITE HERE.
 *
 * base/reset.css draws it in --wp--preset--color--primary, which is #003b70 —
 * the exact navy this bar is painted in. A keyboard user tabbing along the row
 * would get a navy ring on a navy background and see nothing at all.
 *
 * The sweep underline does fire on :focus-visible, but 2px of underline is not a
 * focus indicator; it is the same affordance a mouse user gets on hover, and it
 * does not mark which item the keyboard is actually on when one of them is
 * already underlined as the current page.
 *
 * So the ring is restated in on-primary. Same offset as the global rule, so the
 * shape matches the rest of the site.
 */
.fcs-interior-hero__nav-list .fcs-interior-hero__nav-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--on-primary);
  outline-offset: 2px;
}

/* Figma 7911:7249 draws the active item bold and underlined. */
.fcs-interior-hero__nav-link.is-current {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: var(--fcs-underline-size);
  text-underline-offset: var(--fcs-underline-gap);
}

/*
 * THE SWEEP UNDERLINE IS THE WHOLE HOVER AFFORDANCE. THE TEXT STAYS WHITE.
 *
 * The header nav takes its links to #fbbc05 on hover as well as drawing this
 * bar. This one does not, deliberately: that bar is permanent chrome competing
 * with a utility row above it, while this is a short list inside the page, where
 * the underline alone reads clearly and a colour change on top of it is one
 * signal too many. Do not "restore" the accent colour without checking this.
 *
 * The bar is therefore white and pinned rather than currentcolor — which here
 * would amount to the same thing, but states the intent and keeps the rule
 * correct if the link colour is ever changed.
 *
 * The bar sits at bottom: 0, INSIDE the link's box. Pushing it below the box to
 * clear the descenders would overflow the list's `overflow-x: auto` and raise a
 * scrollbar on hover. Keep this at 0.
 *
 * The origin flip between rest and hover is the whole trick: the bar enters from
 * the left and leaves to the right rather than snapping back the way it came.
 * base/reset.css already zeroes every transition under prefers-reduced-motion,
 * so this needs no media query.
 */
.fcs-interior-hero__nav-list a.fcs-interior-hero__nav-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fcs-underline-size);
  background-color: var(--wp--preset--color--on-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--fcs-sweep-link);
}

.fcs-interior-hero__nav-list a.fcs-interior-hero__nav-link:hover::after,
.fcs-interior-hero__nav-list a.fcs-interior-hero__nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/*
 * The current item never animates. The sweep is a hover affordance; an
 * always-on animated bar would read as permanently hovered, and it would sit
 * under the static underline above rather than replacing it.
 */
.fcs-interior-hero__nav-link.is-current::after {
  content: none;
}

/* ====== Medium (768px+) ====== */

@media (min-width: 768px) {
  /*
   * Figma 7911:7249 — 40px between items once there is room for it.
   *
   * Scrolling is Small only. From Medium up the row is centred as drawn, and a
   * section with more links than fit on one line wraps onto a second, centred
   * row rather than scrolling or being clipped.
   */
  .fcs-interior-hero__nav-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    column-gap: 40px;
    overflow-x: visible;
  }

  .fcs-interior-hero__nav-item:first-child,
  .fcs-interior-hero__nav-item:last-child {
    margin-inline: 0;
  }
}

/* ====== Large (1024px+) ====== */

@media (min-width: 1024px) {
  /*
   * Past the 1240px cap the viewport is wide enough that the gutter is no longer
   * protecting anything, and keeping it would measure the content at 1200px
   * instead of the design's 1240px.
   */
  .fcs-interior-hero__inner,
  .fcs-interior-hero__nav-inner {
    padding-inline: 0;
  }
}