/*****************************************************
PAGE HEADER
All styles for the .page-header component live here.

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

Editing guide:
  - Colors:   Edit the variables in the .page-header block below
  - Tiers:    Scroll to "Tier" sections to adjust heights and spacing
  - Filters:  Scroll to "Filter system" to adjust image treatments
  - Template: _includes/layout/page-header.html

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.
*****************************************************/


/* =====================================================
   COLOR VARIABLES
   All header-specific colors are defined here so you
   can restyle the header in one place.
   ===================================================== */

.page-header {
  --header-bg: #161618;                           /* Dark background behind the image */
  --header-grid-line: rgba(255, 255, 255, 1);     /* Grid overlay lines (see opacity on .page-header-grid) */
  --header-divider-line: rgba(255, 255, 255, 0.12);  /* Thin lines flanking divider text */
  --header-divider-text: rgba(255, 255, 255, 0.28);  /* Divider text color */
  --header-subtitle: rgba(255, 255, 255, 0.45);      /* Subtitle paragraph color */
}


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

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



/* 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(--header-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--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-serif);
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 0.6rem;
  margin-top: 0;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(0, 0, 0, 0.35);
  text-indent: -0.06em;
  letter-spacing: 0;
}

/* Subtitle paragraph below the title */
.page-header p {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 0;
  max-width: 580px;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.75),
    0 0 28px rgba(0, 0, 0, 0.45);
}


/* =====================================================
   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, rgba(0,0,0,0.45), 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(--header-divider-line);
}

.page-header-divider span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--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, rgba(0,0,0,0.72), transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
  pointer-events: none;
}

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

.page-header-caption a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* 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::after {
  height: 180px;
}

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

/* 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:
    0 0 25px rgba(0, 0, 0, 0.95),
    0 0 55px rgba(0, 0, 0, 0.75),
    0 0 90px rgba(0, 0, 0, 0.45);
}

.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::after {
  height: 100px;
}

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

/* 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;
  }

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

  .page-header--section .page-header-content {
    padding: 1.5rem 1.5rem;
    margin-left: 1rem;
  }

  .page-header--banner .page-header-content {
    padding: 0.75rem 1rem;
    margin-left: 1rem;
  }
}