/* === DF Innerbanner: hero-style stacked title (ASCII only) === */
:root{
  --df-cyan:#00ccff;
  --df-shadow-1:#111; /* first hard step */
  --df-shadow-2:#222; /* second hard step */
}

/* Container breathing room scales with viewport (keeps layout stable) */
.innerbanner .container{
  padding: clamp(3.5em, 8vh, 6em) 1em;
}

/* Hero-style title */
h1.innerpage-title{
  color:#fff;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.02em;
  text-align:center;
  margin:0;
  /* hard, stacked shadow to pop over photos */
  text-shadow: 2px 2px 0 var(--df-shadow-1),
               3px 3px 0 var(--df-shadow-2);
  /* responsive sizing; !important to win against theme’s size rule */
  font-size: clamp(30px, 4.6vw, 48px) !important;
  /* optional wrap width so very long titles don’t look too wide */
  max-width: 22ch;
  margin-left:auto;
  margin-right:auto;
}

/* If the banner image is extremely dark, you can flip to a lighter stack
   by adding .innerbanner--dark to the banner wrapper on that page. */
.innerbanner.innerbanner--dark h1.innerpage-title{
  text-shadow: 2px 2px 0 rgba(255,255,255,.22),
               3px 3px 0 rgba(255,255,255,.18);
}

/* Breadcrumbs: subtle lift so they read over imagery */
.innerbanner .breadcrumbs{
  color:#fff;
  text-align:center;
  padding:0;
  opacity:.95;
  text-shadow: 1px 1px 0 var(--df-shadow-1);
}
.innerbanner .breadcrumbs span{ font-size:12px; }

/* Keep “without-banner” variant tidy */
h1.innerpage-title.without-banner{ margin-top:0; }





/* Remove the narrow 22ch cap so long titles can span the full banner width */
.innerbanner h1.innerpage-title {
  max-width: none !important;
  width: 100% !important;
  display: block;
  margin-left: 0;
  margin-right: 0;
  white-space: normal;      /* allow wrap only when truly needed */
  overflow-wrap: anywhere;  /* avoid odd breaks on long words */
}



/* Innerbanner: reliable height + proper background scaling */
.innerbanner{
  /* make the image fill the area without letterboxing */
  background-size: cover !important;
  background-position: center 40% !important; /* show a bit more of the upper area */
  background-repeat: no-repeat;

  /* give the banner real height so it does not collapse */
  min-height: 540px; /* desktop default */
}

/* center the title block inside the banner area */
.innerbanner .container{
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px; /* keep some breathing room */
}

/* very wide screens: allow a taller window to reduce cropping */
@media (min-width: 1440px){
  .innerbanner{ min-height: 640px; background-position: center 38%; }
}
@media (min-width: 1680px){
  .innerbanner{ min-height: 720px; background-position: center 36%; }
}

/* tablets */
@media (max-width: 1024px){
  .innerbanner{ min-height: 420px; background-position: center 45%; }
}

/* phones */
@media (max-width: 768px){
  .innerbanner{ min-height: 340px; background-position: center 50%; }
}

/* safety: ensure the title can use the full line inside the banner */
.innerbanner h1.innerpage-title{
  max-width: none !important;
  width: 100% !important;
}