/* Existing banner, or an existing H1 moved into a decorative header by design.js. */
body.cna-hero main.container .cna-page-banner,
body.cna-hero main.container .cna-gallery-hero {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--cna-hero-height, 250px) !important;
  height: auto !important;
  max-height: none !important;
  padding: 38px 24px 30px !important;
  background-color: var(--cna-forest);
  background-image: linear-gradient(rgba(var(--cna-hero-overlay-rgb, 16, 26, 17), var(--cna-hero-overlay, .6)), rgba(var(--cna-hero-overlay-rgb, 16, 26, 17), var(--cna-hero-overlay, .6))), var(--cna-hero-image, url('../images/forest.webp')) !important;
  background-size: cover !important;
  background-position: var(--cna-hero-x, 50%) var(--cna-hero-y, 52%) !important;
  background-attachment: scroll !important;
  text-align: center;
  /* Soft local contrast instead of a strong, tight outline around letters. */
  --cna-hero-title-shadow: 0 2px 3px rgba(0, 0, 0, .65), 0 4px 14px rgba(0, 0, 0, .55), 0 0 24px rgba(0, 0, 0, .30);
  --cna-hero-breadcrumb-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 3px 10px rgba(0, 0, 0, .6), 0 0 20px rgba(0, 0, 0, .35);
  --cna-hero-halo-opacity: .18;
  border-bottom: 2px solid var(--cna-line);
}
body.cna-hero main.container .cna-page-banner .img-title {
  padding: 0 !important;
  opacity: 1 !important;
  top: auto !important;
}
/* Theme keeps its featured img offscreen; remove it from the new column flow. */
body.cna-hero main.container .cna-page-banner > img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  clip-path: inset(50%);
}
body.cna-hero main.container .cna-gallery-hero h1,
body.cna-hero main.container .cna-page-banner h1 {
  position: relative;
  isolation: isolate;
  color: #F3EBDD !important;
  font-family: var(--cna-serif) !important;
  font-size: clamp(22px, 2.4vw, var(--cna-title-size, 36px)) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1150px;
  overflow-wrap: anywhere;
  text-shadow: var(--cna-hero-title-shadow) !important;
}
/* Broad feathered shadow behind the heading and its ornament, with no box edge.
   Absolutely positioned: it does not change header height or the photo crop. */
body.cna-hero main.container .cna-gallery-hero h1::before,
body.cna-hero main.container .cna-page-banner h1::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -24px;
  bottom: -24px;
  width: calc(100% + 100px);
  max-width: calc(100vw - 32px);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .4) 45%, transparent 75%);
  opacity: var(--cna-hero-halo-opacity, .18);
  filter: blur(16px);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
body.cna-hero main.container .cna-gallery-hero h1::after,
body.cna-hero main.container .cna-page-banner h1::after {
  content: '';
  display: block;
  width: 260px;
  max-width: calc(100vw - 48px);
  height: 30px;
  margin: 12px auto 8px;
  background: url('../images/hero-ornament.svg?v=1.3.1') center / contain no-repeat;
  /* Follow the transparent SVG silhouette, including both fine horizontal lines. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 5px rgba(0, 0, 0, .75));
}
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb {
  border: 0 !important;
  padding: 0 !important;
  margin: 10px auto 0 !important;
  font-family: var(--cna-sans, 'CNA Jost', Jost, Arial, sans-serif);
  font-weight: 500;
  line-height: 1.6;
}
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb,
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb a,
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb span {
  color: var(--cna-light) !important;
}
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb,
body.cna-hero main.container .cna-page-banner .cn-breadcrumb {
  position: relative;
  isolation: isolate;
}
/* Local feathered backing for small text on bright fur or sky. It remains
   behind the original links and never alters the header's layout or crop. */
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb::before,
body.cna-hero main.container .cna-page-banner .cn-breadcrumb::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 50%;
  width: calc(100% + 40px);
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35) 45%, transparent 75%);
  opacity: var(--cna-breadcrumb-halo-opacity, .3);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb,
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb a,
body.cna-hero main.container .cna-gallery-hero .cn-breadcrumb span,
body.cna-hero main.container .cna-page-banner .cn-breadcrumb,
body.cna-hero main.container .cna-page-banner .cn-breadcrumb a,
body.cna-hero main.container .cna-page-banner .cn-breadcrumb span {
  color: var(--cna-light) !important;
  text-shadow: var(--cna-hero-breadcrumb-shadow) !important;
}
@media (max-width: 600px) {
  body.cna-hero main.container .cna-page-banner,
  body.cna-hero main.container .cna-gallery-hero {
    min-height: calc(var(--cna-hero-height, 250px) * .84) !important;
    padding: 30px 20px 24px !important;
    background-position: var(--cna-hero-x, 50%) var(--cna-hero-y, 52%) !important;
  }
}