.com-page-header {
  /* Typography — fluid from mobile (~375px) to desktop (~1200px+).
     Title is anchored in px + vw (NOT rem): the root is `font-size: 125%`,
     which Chrome on Android inflates via the device text-scaling setting,
     making a rem-based title balloon on real phones. px/vw are immune to
     that, so the title renders consistently across devices.
     Floor 46px (small phones) → caps at 64px around a 1175px viewport. */
  --com-page-header-title-font-size    : clamp(46px, 16px + 4vw, 64px);
  --com-page-header-subtitle-font-size : clamp(1.125rem, 0.9rem + 1.2vw, 26px);
  /* Colors */
  --color-com-page-header-text         : hsl(0 0% 100% / 1);
  --color-com-page-header-bg           : hsl(0 0% 0% / 0.7);
}

.com-page-header {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%; margin: 0 auto 80px; padding: 180px 0;
  max-height: 50vh;
  text-align: center;
  overflow: hidden;
  color: var(--color-com-page-header-text);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: hsl(0 0% 0% / 1);
}

.com-page-header.is-full-height {
  min-height: calc(100vh - 190px);
  max-height: none;
  padding: 0;
}

.com-page-header.align-left  { align-items: flex-start; text-align: left; }
.com-page-header.align-right { align-items: flex-end;   text-align: right; }

.com-page-header-title, .com-page-header-subtitle {
  position: relative;
  /* background: var(--color-com-page-header-bg); */
  /* backdrop-filter: blur(10px); */
}

.com-page-header-title {
  padding: 0 2rem;
  margin: 0;
  font-size: var(--com-page-header-title-font-size);
  line-height: calc(var(--com-page-header-title-font-size) * 1.3);
  font-weight: bold;
}

.com-page-header-subtitle {
  padding: 40px;
  font-size: var(--com-page-header-subtitle-font-size);
}

.com-page-header-title.has-text-shadow .com-page-header-text,
.com-page-header-subtitle.has-text-shadow .com-page-header-text {
  text-shadow: 0 2px 12px hsl(0 0% 0% / 0.85), 0 0 40px hsl(0 0% 0% / 0.5);
}

/* The title element is now an <h1> (was a <div>) for correct document outline.
   Neutralize the browser/theme default heading margin, size, weight and color so
   the hero looks exactly as before — all typographic styling stays on the
   .com-page-header-title wrapper above. */
h1.com-page-header-text {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* When the "Hide title & subtitle" toggle is on, the inner text elements get
   .screen-reader-text (kept for AT and crawlers). Collapse the now-empty
   wrappers' spacing so the hero is purely the background image. */
.com-page-header.is-text-hidden .com-page-header-title,
.com-page-header.is-text-hidden .com-page-header-subtitle {
  padding: 0;
  margin: 0;
}

@media (width <= 800px) {
  .com-page-header-title, .com-page-header-subtitle {
    max-width: 96%;
    margin: 0;
    padding: 0;
    /* padding-left: 0; padding-right: 0; */
  }
  /* Tighter leading on mobile: a bold display title wants less line
     spacing than running subtitle text. */
  .com-page-header-title {
    line-height: 1.1;
  }
  .com-page-header-subtitle {
    line-height: 1.25;
    margin: 2rem;
  }
  .com-page-header.is-full-height {
    min-height: calc(100vh - 120px);
    max-height: none;
  }
}