/*****************************************************
PAGE HEADER

The header studio — the dark, typographic header drawn above page content when
a page has `header-image` in its front matter.

Three tiers:  hero (full screen), section (~60vh), banner (~22vh)
Five filters: botanical, sketch, woodcut, etching, photo

Loads:    only on pages with `header-image` in front matter
Used by:  layout/page-header.html
Needs:    base.css tokens (--bg-page-header, --page-header-*)
Not here: the home hero, which is placed in the page body and can carry
          buttons (home.css)

Editing guide:
  - Colors:   Edit the page-header variables in assets/css/base.css
  - Tiers:    Scroll to "Tier" sections to adjust heights and spacing
  - Filters:  Scroll to "Filter system" to adjust image treatments

The accent color (vertical bar + eyebrow text) comes from --accent-primary in
base.css. Override it here inside .page-header if you want a different accent
color just for headers.
*****************************************************/

/* =====================================================
   BASE STRUCTURE
   ===================================================== */

.page-header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-page-header);
}



/* The photo/image layer — set via inline style from page front matter */
.page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.28;
}

/* Subtle grid overlay for visual texture */
.page-header-grid {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image:
    linear-gradient(var(--page-header-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-header-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Accent color bar along the left edge */
.page-header-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-primary);
}

/* Text content box — sits above the image and grid layers */
.page-header-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 3rem 5rem;
  margin-left: 3rem;
}


/* =====================================================
   TYPOGRAPHY INSIDE PAGE HEADERS

   These rules override the bare h1/p/etc. rules in
   typography.css. No !important needed: .page-header h1
   has higher specificity than h1, and this file loads
   after typography.css.
   ===================================================== */

/* Large serif title — used by hero tier, inherited by section/banner */
.page-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.05;
  margin-bottom: 0.6rem;
  margin-top: 0;
  text-shadow: var(--page-header-title-shadow);
  text-indent: -0.06em;
  letter-spacing: 0;
}

/* Subtitle paragraph below the title */
.page-header p {
  font-size: 1.4rem;
  color: var(--page-header-subtitle);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 0;
  max-width: 580px;
  text-shadow: var(--page-header-subtitle-shadow);
}


/* =====================================================
   TIER: HERO  (full-screen landing pages)
   ===================================================== */

.page-header--hero {
  display: flex;
  align-items: center;
  padding-bottom: 15vh; /* shifts optical center upward from true middle */
}

/* Top scrim: protects nav links on bright or busy images.
   Invisible on dark images; adds just enough shadow on light ones. */
.page-header--hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--page-header-top-scrim), transparent);
  z-index: 6;
  pointer-events: none;
}

/* Small caps label above the title */
.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--accent-primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Decorative divider between title and subtitle */
.page-header-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.page-header-divider-line {
  height: 1px;
  width: 60px;
  background: var(--page-header-divider-line);
}

.page-header-divider span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--page-header-divider-text);
  text-transform: uppercase;
}

/* Image caption: sits over the bottom of the hero with a gradient scrim behind it */
.page-header-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  padding: 1.4rem 1rem 0.45rem 3rem;
  background: linear-gradient(to top, var(--page-header-caption-scrim), transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--page-header-caption);
  text-align: right;
  pointer-events: none;
}

.page-header-caption a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.page-header-caption a:hover {
  color: var(--page-header-caption-hover);
}

/* Space between header bottom edge and page content */
.page-header ~ .container {
  margin-top: 3rem;
}


/* =====================================================
   TIER: SECTION  (~60vh, mid-level pages)
   ===================================================== */

.page-header--section {
  height: 60vh;
  padding-bottom: 60px;
}

.page-header--section .page-header-content {
  margin-left: 2rem;
  padding: 2rem 3rem;
  max-width: 40%;
}

/* Smaller title for section tier — overrides .page-header h1 above */
.page-header--section h1 {
  font-size: clamp(2.4rem, 3.2vw, 3.5rem);
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: var(--page-header-section-title-shadow);
}

.page-header--section .page-header-grid {
  opacity: 0.015;
}

.page-header--section .page-header-bg {
  opacity: 0.18;
}

/* Reduce gap between section header and first h2 in page content */
.page-header--section ~ .container h2:first-child {
  margin-top: 1.5rem;
}


/* =====================================================
   TIER: BANNER  (~22vh, internal/utility pages)
   ===================================================== */

.page-header--banner {
  height: 22vh;
  padding-bottom: 0;
}

.page-header--banner .page-header-content {
  margin-left: 2rem;
  padding: 1rem 2rem;
  max-width: none;
}

/* Compact heading for banner tier — uses heading font instead of serif */
.page-header--banner h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-indent: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.page-header--banner .page-header-grid {
  opacity: 0.01;
}

.page-header--banner .page-header-bg {
  opacity: 0.10;
}

.page-header--banner .page-header-bar {
  width: 3px;
}

/* Reduce gap between banner header and first h2 in page content */
.page-header--banner ~ .container h2:first-child {
  margin-top: 1.5rem;
}


/* =====================================================
   FILTER SYSTEM

   Controls how the background image is processed.
   Set via the filter parameter in page front matter.

   botanical  Line-art engravings on white background.
              Inverts the image so dark lines glow as
              accent-colored lines; white background
              becomes transparent via mix-blend-mode: screen.
              Requires: dark lines on white/near-white bg.

   sketch     Like botanical but with a contrast pre-boost
              to darken faint lines before inverting.
              Use when botanical produces dim results.
              Tune: contrast (2–4, higher = thicker lines).

   woodcut    Historical images with natural color preserved.
              Slight darken only, no color transformation.
              Use for manuscripts, illuminations, woodcuts.

   etching    Color photos → high-contrast silhouette + tint.
              Produces bold shapes, not fine lines.
              For photos needing a line-art look, pre-process
              the image and use botanical instead.

   photo      Color photos kept photographic (default).
              Darkened and desaturated slightly for legibility.
   ===================================================== */

/* --- Filter: Botanical --- */
.page-header-bg--botanical {
  filter: invert(1) sepia(0.6) hue-rotate(320deg) saturate(2.5);
  mix-blend-mode: screen;
}

/* --- Filter: Sketch
     Tune: contrast (2–4, higher = thicker lines), final brightness (1.5–2.5) --- */
.page-header-bg--sketch {
  filter: grayscale(1) contrast(2.5) invert(1) sepia(0.6) hue-rotate(320deg) saturate(3) brightness(2);
  mix-blend-mode: screen;
}

.page-header--section .page-header-bg--sketch {
  opacity: 0.55;
}

.page-header--banner .page-header-bg--sketch {
  opacity: 0.35;
}

/* --- Filter: Woodcut
     Tune brightness and opacity to balance image vs. text readability --- */
.page-header-bg--woodcut {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.75;
}

.page-header--section .page-header-bg--woodcut {
  opacity: 0.65;
}

.page-header--banner .page-header-bg--woodcut {
  opacity: 0.45;
}

/* --- Filter: Etching
     Pipeline: grayscale → pre-brighten → threshold → post-darken → invert → tint
     contrast(5+) collapses continuous tone to black/white.
     Pre-brightness(1.3) shifts which tones fall above threshold.
     Post-brightness(0.55) controls darkness of the inverted result. --- */
.page-header-bg--etching {
  filter: grayscale(1) brightness(1.3) contrast(5) brightness(0.55) invert(1) sepia(0.5) hue-rotate(320deg) saturate(3);
  mix-blend-mode: screen;
}

.page-header--section .page-header-bg--etching {
  opacity: 0.40;
}

.page-header--banner .page-header-bg--etching {
  opacity: 0.25;
}

/* --- Filter: Photo (default)
     saturate(1.05) gives a slight color lift; brightness(0.85) darkens for legibility.
     Tune opacity up if image is too faint, down if text becomes hard to read. --- */
.page-header-bg--photo {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.80;
}

.page-header--section .page-header-bg--photo {
  opacity: 0.72;
}

.page-header--banner .page-header-bg--photo {
  opacity: 0.50;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {
  .page-header-content {
    padding: 2rem 1.5rem;
  }

  /* On desktop the title sits over the image's left (unimportant) side,
     leaving the right (important) side visible on its own. There's no
     room for that on mobile, so anchor the title to the right instead,
     putting it directly over the important side of the image. */
  .page-header--hero .page-header-content {
    margin-left: auto;
    margin-right: 0;
    max-width: 85%;
  }

  .page-header--section {
    height: 30vh;
  }

  .page-header--section .page-header-content {
    padding: 1.5rem 1.5rem;
    margin-left: auto;
    margin-right: 0;
    max-width: 70%;
  }

  .page-header--banner .page-header-content {
    padding: 0.75rem 1rem;
    margin-left: auto;
    margin-right: 0;
    max-width: 70%;
  }
}