/*
 * Independent clean-room implementation, written from a component
 * specification document only. No prior version of this stylesheet
 * was read, diffed, or otherwise inspected while authoring this file.
 *
 * Component: the shared page-header band ("#page-header") that sits
 * at the top of inner pages -- a full-bleed image/gradient section
 * with an eyebrow-or-breadcrumb line, a headline, an optional
 * subtitle, and a thin divider beneath.
 */

/* ---------------------------------------------------------------------
 * Section root
 * ------------------------------------------------------------------- */

.ocf-page-header {
  /* Local tokens the rest of this file draws from. Each falls back to
     a shared design token so the section still renders sanely if a
     caller never supplies its own override. */
  --page-header-image-opacity: 0.88;
  --page-header-border-color: var(--ocf-border-alt);
  --page-header-background: var(--ocf-bg-dark);
  --page-header-gradient: var(--gradient-media-dark);
  --page-header-headline-size: var(--oc-owner-font-h1-size, var(--font-h1-size));
  --page-header-body-color: var(--ocf-body-alt);
  --page-header-headline-color: var(--ocf-heading-alt);
  --page-header-eyebrow-color: var(--page-header-headline-color);

  border-bottom: 1px solid var(--page-header-border-color);
  color: var(--page-header-body-color);
  background: var(--section-gradient, var(--page-header-gradient)), var(--page-header-background);
  overflow: hidden;
  position: relative;
}

/* Light-tone branch: swaps the palette above from the dark/"alt" set
   to the standard light set. */
.ocf-page-header[data-ocf-tone="light"] {
  --page-header-border-color: var(--ocf-border-light);
  --page-header-background: var(--ocf-bg);
  --page-header-body-color: var(--ocf-body);
  --page-header-headline-color: var(--ocf-heading);
  --page-header-eyebrow-color: var(--page-header-headline-color);
}

/* Painted background layer sitting behind the section content. */
.ocf-page-header::before {
  opacity: var(--section-overlay-opacity, var(--page-header-image-opacity));
  background-position: center;
  background-size: cover;
  background-image: var(--section-gradient, var(--page-header-gradient)), var(--page-header-image);
  inset: 0;
  position: absolute;
  content: "";
}

/* Editor/a11y-only image node: kept in the DOM at ~zero footprint,
   not a full sr-only pattern (no clip / nowrap), just invisible and
   inert. */
.ocf-page-header__editor-image {
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  height: 1px;
  width: 1px;
  position: absolute;
}

/* ---------------------------------------------------------------------
 * Layout wrapper + content stack
 * ------------------------------------------------------------------- */

.ocf-page-header__inner {
  padding-block: clamp(3rem, 8vw, 6rem);
  position: relative;
}

/* Whatever follows the header directly gets a matching top pad so the
   next section doesn't collide with the header's own bottom border. */
.ocf-page-header + .section-padding {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.ocf-page-header__content {
  max-width: min(100%, 56rem);
  gap: 1rem;
  display: grid;
}

/* ---------------------------------------------------------------------
 * Eyebrow / breadcrumb line
 * ------------------------------------------------------------------- */

/* Shared by two mutually-exclusive markup shapes: a plain <p> eyebrow
   label, or a breadcrumb <nav> that also carries this class. */
.ocf-page-header__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: var(--field-font-weight, var(--oc-owner-font-eyebrow-weight, var(--font-weight-bold)));
  font-size: var(--field-font-size, var(--oc-owner-font-eyebrow-size, var(--font-label-size)));
  color: var(--page-header-eyebrow-color);
  margin: 0 0 0.75rem;
  display: inline-flex;
}

.ocf-page-header__breadcrumb,
.ocf-breadcrumb {
  font-size: var(--font-label-size);
  color: var(--page-header-eyebrow-color);
  margin-bottom: 1rem;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
}

.ocf-page-header__breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.ocf-page-header__breadcrumb a:hover,
.ocf-page-header__breadcrumb a:focus-visible {
  text-underline-offset: 0.18em;
  text-decoration: underline;
}

.ocf-page-header__breadcrumb-separator {
  opacity: 0.62;
}

/* ---------------------------------------------------------------------
 * Headline + subtitle
 * ------------------------------------------------------------------- */

.ocf-page-header__headline,
.ocf-page-header__title {
  text-decoration: var(--field-text-decoration, none);
  letter-spacing: 0;
  line-height: 1.08;
  font-style: var(--field-font-style, normal);
  font-weight: var(--field-font-weight, var(--oc-owner-font-h1-weight, var(--font-weight-bold)));
  font-size: var(--field-font-size, var(--page-header-headline-size));
  font-family: var(--ocf-font-heading), system-ui, sans-serif;
  color: var(--field-color, var(--page-header-headline-color));
  margin: 0;
}

.ocf-page-header__subtitle {
  line-height: 1.65;
  font-size: var(--font-body-lg-size, 1.125rem);
  color: var(--field-color, var(--page-header-body-color));
  max-width: 46rem;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------
 * Divider
 * ------------------------------------------------------------------- */

.ocf-page-header__divider {
  width: min(100%, 14rem);
}

.ocf-page-header__divider .divider {
  background: var(--page-header-border-color);
  height: 1px;
}