/* Hero title overlay — positioning and styling for static title/subtitle/byline inside hero */

/* Inline hero pages: reorder hero before alert banner.
   The page-alert-banner.html include renders before #hawaii-top in page
   content. This flexbox reorder puts the hero first visually.
   Only applies to inline-hero pages — auto-hero pages use .has-sidebar-grid
   and have a layout-rendered hero, so the in-content #hawaii-top is a
   legacy CMS artifact that must NOT trigger flex layout. */
.main.nopad:has(> #hawaii-top) {
  display: flex;
  flex-direction: column;
}
.main.nopad > #hawaii-top {
  order: -1;
}
/* Undo flex reorder for auto-hero pages inside the sidebar grid.
   These have a legacy #hawaii-top from CMS conversion that incorrectly
   triggers the :has() rule above. Specificity 1,3,0 beats 1,2,0. */
.has-sidebar-grid .main.nopad:has(> #hawaii-top) {
  display: block;
}

/* Hide body byline + article-header ONLY when the hero actually renders an
   overlay title to replace it. Auto-hero pages handle this via inline CSS in
   hero-fullwidth.html; this rule covers inline-hero pages on body.cover-page /
   body.video-page that include an overlay title element.

   Before :has() this was an unconditional hide based on body class alone, but
   ~50 legacy CMS-converted pages (Kīlauea eruption updates, monthly events
   posts, Big Island activities hub, Waipio Valley, etc.) carry the video-page
   / cover-page body class WITHOUT ever rendering an overlay title in their
   inline hero. The unconditional hide made their H1 article-header invisible
   with no visible title to replace it — bad for SEO, accessibility, and the
   editorial intent of the page. The :has() qualifier keeps the overlay
   pattern working on pages that do have one, and lets the H1 render
   naturally on pages that don't.

   Overlay-title detection covers four element classes used across the site:
   - .hero-title-overlay-box      (current convention, hero-fullwidth.html)
   - .hero-overlay-title          (auto-hero pages with overlay)
   - .single-slide-full-text      (legacy CMS overlay title markup)
   - .hero-clean-text             (clean-style hero overlay)

   Browsers without :has() (none in our active user base — Chrome 105+,
   Safari 15.4+, Firefox 121+ have all shipped it) drop the entire rule and
   safely fall back to showing the H1, which is the right failure mode. */
body.cover-page:has(.hero-title-overlay-box, .hero-overlay-title, .single-slide-full-text, .hero-clean-text) .article-header.clearfix.pt10,
body.cover-page:has(.hero-title-overlay-box, .hero-overlay-title, .single-slide-full-text, .hero-clean-text) .blog-byline-inline,
body.video-page:has(.hero-title-overlay-box, .hero-overlay-title, .single-slide-full-text, .hero-clean-text) .article-header.clearfix.pt10,
body.video-page:has(.hero-title-overlay-box, .hero-overlay-title, .single-slide-full-text, .hero-clean-text) .blog-byline-inline {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  padding: 0 !important; margin: -1px !important;
}

/* When the article-header H1 is hidden by the rule above, the inline back-button
   action bar (legacy CMS pattern: .wrapper-sides > .text-right.clearfix.mt10)
   ends up rendering directly under #hawaii-top. The decorative .wave SVG sits at
   bottom:-10px desktop / -18px tablet / -14px mobile (height 57/32/26px) and
   protrudes into the same vertical band as the button, so the scallops crowd
   its top edge. Push the container down past the wave on these pages only —
   pages with a visible H1 above the back button have natural spacing and
   should keep the original mt10. Specificity (0,5,1) + !important beats .mt10. */
body.cover-page .wrapper-sides > .text-right.clearfix.mt10:first-child,
body.video-page .wrapper-sides > .text-right.clearfix.mt10:first-child {
  margin-top: 30px !important;
}

.image-container-main.has-overlay-title::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 65%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-title-overlay-box {
  position: absolute;
  bottom: 100px;
  left: 5%;
  z-index: 2;
  width: max-content;
  max-width: 85%;
  pointer-events: none;
}
.hero-title-overlay-box.has-region-badge {
  left: 140px;
  max-width: calc(95% - 140px);
}
.hero-title-overlay-box .hero-overlay-title {
  display: block;
  font-family: "brother-1816-printed", "Proxima", Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.4);
  margin: 0 0 4px;
  padding: 0;
  max-width: none;
}
.hero-overlay-subtitle {
  font-family: "Proxima", Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 2.2vw, 20px);
  color: rgba(255,255,255,0.88);
  text-shadow: 1px 1px 6px rgba(0,0,0,.6);
  margin: 0 0 12px;
  line-height: 1.3;
}
.hero-overlay-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.hero-overlay-byline img {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: none;
  background: none !important;
}
.hero-overlay-byline > a:first-child {
  border: none !important;
  border-bottom: none !important;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0;
}
.hero-overlay-byline span {
  font-family: "Proxima", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  text-shadow: 1px 1px 4px rgba(0,0,0,.5);
}
.hero-overlay-byline a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.4);
}
@media only screen and (min-width: 1024px) {
  .hero-title-overlay-box {
    left: 8%;
    bottom: 110px;
  }
  .hero-title-overlay-box.has-region-badge {
    left: 180px;
    max-width: calc(92% - 180px);
  }
}
@media only screen and (max-width: 641px) {
  .hero-title-overlay-box {
    bottom: 100px;
    max-width: 90%;
  }
  .hero-title-overlay-box.has-region-badge {
    left: 5%;
    max-width: 90%;
  }
  .hero-title-overlay-box.overlay-at-top {
    top: 10px;
    bottom: auto;
  }
  .image-container-main.has-overlay-title.overlay-gradient-top::after {
    top: 0;
    bottom: auto;
    height: 65%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
  }
  .hero-title-overlay-box .hero-overlay-title {
    font-size: clamp(20px, 5vw, 32px);
  }
  .hero-overlay-subtitle {
    font-size: 13px;
    margin: 0 0 8px;
  }
  .hero-overlay-byline img {
    width: 32px; height: 32px;
  }
  .hero-overlay-byline span {
    font-size: 13px;
  }
}