/* Internal hero: banner image + page title + breadcrumb, as in the
   reference screenshot. Full width because #internal-hero sits
   OUTSIDE .main-container in page.html.twig, so no 100vw trick and
   no horizontal scroll on mobile/tablet.
   Declare in bootstrap_subtheme.libraries.yml:
     internal-hero:
       css:
         theme:
           css/internal-hero.css: {}
   page.html.twig already contains:
     {{ attach_library('bootstrap_subtheme/internal-hero') }}
*/

#internal-hero {
  position: relative;
  overflow: hidden;
  background: #0b1e3a; /* Fallback: dark hero even if no banner block renders. */
  min-height: 337px;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

/* Banner image as background layer. */
#internal-hero .region-internal-banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}
#internal-hero .region-internal-banner .block,
#internal-hero .region-internal-banner .field,
#internal-hero .region-internal-banner .field__item,
#internal-hero .region-internal-banner .field--item,
#internal-hero #navbackwrap,
#internal-hero #navback {
  height: 100%;
  margin: 0;
  padding: 0;
}
#internal-hero #navbackwrap {
  width: 100%;
}
#internal-hero #navback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Dark overlay, like the screenshot, so white title/breadcrumb read. */
#internal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 35, 0.55);
  z-index: 2;
  pointer-events: none;
}

/* Title + breadcrumb, on top of image, at the bottom of the hero. */
.internal-hero-text {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-bottom: 0;
}
.internal-hero-text .region-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.internal-hero-text .region-header #page-title,
.internal-hero-text .region-header .page-header {
  order: 1;
}
.internal-hero-text .region-header .breadcrumb {
  order: 2;
}
#page-title {
  padding: 0px 40px;
  font: bold 24px rwrg;
  color: #fff;
  text-transform: uppercase;
  border: 0;
}
.internal-hero-text .breadcrumb {
  border: 0;
  border-radius: 0;
  margin: 0;
  font: 14.54px twlt;
  color: #99999a;
  background-color: rgba(17, 10, 30, 0.5);
  padding: 8px 40px;
}
.internal-hero-text .breadcrumb a {
  color: #fff;
}
.internal-hero-text .breadcrumb .active {
  color: #c9c9c9;
}

/* Content below the hero. */
.internal-content-wrap {
  padding: 30px 0 0 0;
}

/* Tablet: shorter hero, smaller title, breadcrumb wraps. */
@media (max-width: 991px) {
  #internal-hero {
    min-height: 340px;
  }
  .internal-hero-text #page-title,
  .internal-hero-text .page-header {
    font-size: 28px;
  }
  .internal-hero-text .breadcrumb {
    font-size: 14px;
    padding: 8px 12px;
  }
  .internal-content-wrap {
    padding: 20px 0 0 0;
  }
}

/* Mobile: hero crops (does not squash), text wraps, no overflow. */
@media (max-width: 767px) {
  #internal-hero {
    min-height: 280px;
  }
  .internal-hero-text #page-title,
  .internal-hero-text .page-header {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .internal-hero-text .breadcrumb {
    font-size: 13px;
    padding: 8px 12px;
    white-space: normal;
  }
  .internal-hero-text .breadcrumb li {
    display: inline;
  }
  .internal-content-wrap {
    padding: 20px 0 0 0;
  }
}

/* Navbar OVER the hero (screenshot layout).
   Only on internal pages: the class is added in page.html.twig when
   not is_front, so the front-page navbar is untouched.
   Position absolute (not fixed): the navbar scrolls away with the
   banner, as in the reference, it does not stay pinned. */
#navbar.navbar-over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#navbar.navbar-over-hero .navbar-header,
#navbar.navbar-over-hero .navbar-collapse {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#navbar.navbar-over-hero .logo img {
  height: 70px;
  width: auto;
}
#navbar.navbar-over-hero .navbar-nav > li > a {
  color: #fff;
  background: transparent;
  padding-top: 35px;
  padding-bottom: 35px;
  padding-left: 20px;
  padding-right: 20px;
}
#navbar.navbar-over-hero .navbar-nav > li > a:hover,
#navbar.navbar-over-hero .navbar-nav > li > a:focus,
#navbar.navbar-over-hero .navbar-nav > .open > a,
#navbar.navbar-over-hero .navbar-nav > .open > a:hover,
#navbar.navbar-over-hero .navbar-nav > .open > a:focus {
  color: #fff;
  background: transparent;
}
#navbar.navbar-over-hero .navbar-nav > li > a .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
#navbar.navbar-over-hero .dropdown-menu {
  background: rgba(5, 15, 35, 0.95);
  border: 0;
  box-shadow: none;
}
#navbar.navbar-over-hero .dropdown-menu > li > a {
  color: #fff;
}
#navbar.navbar-over-hero .dropdown-menu > li > a:hover,
#navbar.navbar-over-hero .dropdown-menu > li > a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
#navbar.navbar-over-hero .navbar-toggle {
  border-color: #fff;
  background: transparent;
  margin-top: 28px;
}
#navbar.navbar-over-hero .navbar-toggle .icon-bar {
  background: #fff;
}

/* Tablet: navbar over hero, slightly shorter. */
@media (max-width: 991px) {
  #navbar.navbar-over-hero {
    padding-left: 15px;
    padding-right: 15px;
  }
  #navbar.navbar-over-hero .logo img {
    height: 55px;
  }
  #navbar.navbar-over-hero .navbar-nav > li > a {
    padding-top: 28px;
    padding-bottom: 28px;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Expanded mobile/tablet menu must stay readable: dark background,
     otherwise white links would sit on white page content below the hero. */
  #navbar.navbar-over-hero .navbar-collapse.in,
  #navbar.navbar-over-hero .navbar-collapse.collapsing {
    background: rgba(5, 15, 35, 0.95);
  }
  #navbar.navbar-over-hero .navbar-collapse.in .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Mobile: toggle over hero, menu expands on dark background. */
@media (max-width: 767px) {
  #navbar.navbar-over-hero {
    padding-left: 15px;
    padding-right: 15px;
  }
  #navbar.navbar-over-hero .logo img {
    height: 50px;
  }
  #navbar.navbar-over-hero .navbar-toggle {
    margin-top: 18px;
  }
  #navbar.navbar-over-hero .navbar-collapse.in .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.footer {
  margin-top: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
}