/* ==========================================================================
   Header layout fix

   Problem observed: the nav wrapped onto a second line and the header read as
   clunky. Cause was a size conflict, not spacing - the wordmark is 200px wide
   but box-header2 constrains .logo-header to 145px, so the logo was squeezed
   illegibly small while the remaining nav had too little room and wrapped.

   Fix: give the logo the width it actually needs, tighten nav spacing, and
   force the bar onto a single row.
   ========================================================================== */

/* ----------------------------------------------------------------- logo -- */

.site-header.box-header2 .main-bar .container .header-part-left .logo-header {
  width: 150px;
  height: 72px;
  padding-right: 16px;
  margin-left: 0;
  border-right: 1px solid var(--bs-border-color);
  flex: none;
}
.site-header.box-header2 .main-bar .container .header-part-left .logo-header a {
  display: flex;
  align-items: center;
  height: 100%;
}
.site-header .logo-header img {
  width: auto;
  max-width: 132px;
  max-height: 64px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------------------------ bar -- */

/* Single row, no wrapping. The three regions size themselves: logo and CTA
   take what they need, nav absorbs the remainder. */
.site-header.box-header2 .main-bar .container.inner-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 82px;
}
.site-header.box-header2 .main-bar .container .header-part-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.site-header.box-header2 .header-part-right {
  flex: none;
  margin-left: auto;
  padding-left: 18px;
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* ------------------------------------------------------------------ nav -- */

/* Tighter than the template's 23px/15px, and nowrap on each item so a long
   label like "Our Doctors" cannot break mid-phrase. */
.site-header.box-header2 .header-nav.w3menu {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.site-header.box-header2 .header-nav.w3menu .nav {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-height: 100%;
}
.site-header.box-header2 .header-nav.w3menu .nav > li {
  flex: none;
  display: flex;
  align-items: center;
}
.site-header.box-header2 .header-nav.w3menu .nav > li > a {
  display: flex;
  align-items: center;
  padding: 0 13px;
  min-height: 72px;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -.004em;
}

/* Centre the desktop navigation against the complete header bar. The logo and
   appointment button remain independently anchored to their respective sides. */
@media only screen and (min-width: 1200px) {
  .site-header.box-header2 .main-bar .container.inner-bar {
    position: relative;
  }
  .site-header.box-header2 .header-nav.w3menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 390px);
    transform: translateX(-50%);
    z-index: 2;
  }
  .site-header.box-header2 .header-nav.w3menu .nav {
    justify-content: center;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .site-header.box-header2 .header-nav.w3menu .nav > li > a {
    padding: 0 10px;
    font-size: .88rem;
  }
  .site-header.box-header2 .main-bar .container .header-part-left .logo-header {
    width: 140px;
  }
}

/* ------------------------------------------------------------- header CTA -- */

/* Was btn-lg with all-caps and a heavy pill. Now sized to the bar so it reads
   as a header control rather than a page-body button. */
.site-header .header-part-right .btn {
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 10px;
  --bs-btn-font-size: .86rem;
  --bs-btn-font-weight: 600;
  border-radius: 5px !important;
  box-shadow: none !important;
  white-space: nowrap;
  letter-spacing: -.004em;
}
.site-header .header-part-right .btn i {
  font-size: .95rem;
  margin-right: .4rem;
}

/* --------------------------------------------------------------- mobile -- */

@media only screen and (max-width: 1199px) {
  .fol-topbar {
    display: none;
  }
  .site-header.box-header2 .main-bar .container.inner-bar {
    justify-content: space-between;
    padding-left: 18px;
    padding-right: 18px;
  }
  .site-header.box-header2 .main-bar .container .header-part-left {
    flex: 1 1 100%;
    width: 100%;
  }
  .site-header.box-header2 .main-bar .container .header-part-left .w3menu-toggler {
    margin-left: auto !important;
    margin-right: 6px !important;
  }
  .site-header.box-header2 .main-bar .container .header-part-left .logo-header {
    width: 92px;
    border-right: 0;
    padding-right: 10px;
  }
  .site-header .logo-header img {
    width: 64px;
    height: 64px;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 10px;
  }
  .site-header .header-part-right .btn {
    --bs-btn-padding-x: 14px;
    --bs-btn-font-size: .82rem;
  }
}

@media only screen and (max-width: 575px) {
  .site-header.box-header2 .main-bar .container.inner-bar {
    min-height: 82px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header.box-header2 .main-bar .container .header-part-left .logo-header {
    width: 82px;
  }
  .site-header .logo-header img {
    width: 58px;
    height: 58px;
  }
  .site-header.box-header2 .main-bar .container .header-part-left .w3menu-toggler {
    margin-right: 8px !important;
  }
  /* The CTA text is redundant next to the icon at this size. */
  .site-header .header-part-right .btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 0;
  }
  .site-header .header-part-right .btn i {
    font-size: 1.05rem;
    margin-right: 0;
  }
}


/* --------------------------------------------------- opaque header bar -- */

/* The template's box-header2 is a "floating pill" design: the bar itself is
   transparent and a white rounded capsule is painted behind the logo and nav
   by .header-part-left:before (border-radius:50px, width:100%+30px). That is
   where the rounded ends came from, and it is also why the bar did not span
   the window.

   This is a hospital, not a product landing page. The pill is removed and the
   header becomes a plain full-width band. */
.site-header.box-header2 .main-bar .container .header-part-left:before {
  display: none !important;
}

/* The template header is transparent, so the hero image bled through behind
   the nav - visible as colour smears either side of the menu and the reason
   the bar looked cluttered. Give it a solid ground and let the hero start
   below it. */
.site-header.header-transparent .main-bar,
.site-header.box-header2 .main-bar {
  position: relative;
  background: #fff;
  border-bottom: 0;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 10px 26px rgba(11, 42, 53, .055);
}
.site-header.header-transparent .main-bar::after,
.site-header.box-header2 .main-bar::after {
  content: none;
}
.site-header.box-header2 .main-bar .container.inner-bar {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* The template pads the bar away from the top of the window at three
   breakpoints to make the pill float. A full-width band sits flush. */
.site-header.box-header2,
.site-header.box-header2 .main-bar {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The transparent variant pulls the hero up under the header with a negative
   offset. With an opaque bar that just hides the top of the hero. */
.site-header.header-transparent + .page-content .hero-banner,
.site-header.header-transparent ~ .page-content .hero-banner {
  margin-top: 0;
}

/* ------------------------------------------------- emergency bar clearance -- */

/* The emergency bar carries the address and the 24/7 number, and the header
   was covering it completely.

   Cause: .header-transparent is `position:absolute; top:0`, which lifts the
   whole header out of flow and parks it over whatever precedes it - here, the
   dark topbar. The transparent treatment is not wanted anyway (the bar is a
   solid white band now), so the header goes back into normal flow and simply
   follows the topbar down the page. */
.site-header.header-transparent {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

/* The topbar keeps its own stacking order above the page but below the
   sticky bar, which must slide over it on scroll. */
.fol-topbar {
  position: relative;
  z-index: 1;
}

/* Sticky state: a shadow rather than a heavier border. */
.site-header.box-header2 .is-fixed .main-bar {
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 34px rgba(11, 42, 53, .085);
  border-bottom: 0;
}

/* Interior page banners carry a dark navy gradient, but the template
   leaves the heading at --bs-heading-color (#0B2A35) - navy text on a navy
   ground, which was effectively invisible. The banner is a dark surface, so
   its contents are set light. */
.page-content .dz-bnr-inr[style*="linear-gradient"],
.page-content .dz-bnr-inr.style-1.dz-bnr-inr-md[style*="linear-gradient"] {
  background-image: linear-gradient(120deg, #04284F 0%, #063B73 58%, #0A548D 100%) !important;
}
.page-content .dz-bnr-inr[style*="linear-gradient"] .dz-bnr-inr-entry .dz-title,
.page-content .dz-bnr-inr[style*="linear-gradient"] .dz-bnr-inr-entry h1,
.page-content .dz-bnr-inr[style*="linear-gradient"] .dz-bnr-inr-entry h2 {
  color: #fff;
}
.page-content .dz-bnr-inr[style*="linear-gradient"] .breadcrumb-row .breadcrumb {
  background: linear-gradient(135deg, var(--fol-green-dark), var(--fol-green)) !important;
  box-shadow: 0 10px 26px rgba(var(--fol-green-rgb), .22);
}
.page-content .dz-bnr-inr[style*="linear-gradient"] .breadcrumb-row .breadcrumb li,
.page-content .dz-bnr-inr[style*="linear-gradient"] .breadcrumb-row .breadcrumb li a {
  color: rgba(255, 255, 255, .92);
}
.page-content .dz-bnr-inr[style*="linear-gradient"] .breadcrumb-row .breadcrumb li.active {
  color: #fff;
}

/* Interior page banners were padded 90px at the top to clear the transparent
   header. With an opaque bar that reads as an empty gap. */
.header-transparent ~ .page-content .dz-bnr-inr .dz-bnr-inr-entry {
  padding: 42px 0 34px 0;
}
@media only screen and (max-width: 575px) {
  .header-transparent ~ .page-content .dz-bnr-inr.style-1 .dz-bnr-inr-entry {
    padding: 30px 0 26px 0;
  }
}

/* Banner height. The template sizes these for a hero image with copy over it;
   these pages carry only a title and a breadcrumb, so 500px left most of the
   band empty and pushed the actual page content below the fold. Roughly half
   is enough to read as a header rather than a hero. */
.page-content .dz-bnr-inr.style-1.dz-bnr-inr-md,
.page-content .dz-bnr-inr.dz-bnr-inr-md {
  --dz-banner-height: 260px;
}
@media only screen and (max-width: 991px) {
  .page-content .dz-bnr-inr.style-1.dz-bnr-inr-md,
  .page-content .dz-bnr-inr.dz-bnr-inr-md {
    --dz-banner-height: 220px;
  }
}
@media only screen and (max-width: 575px) {
  .page-content .dz-bnr-inr.style-1.dz-bnr-inr-md,
  .page-content .dz-bnr-inr.dz-bnr-inr-md {
    --dz-banner-height: 180px;
  }
}
/* style-1 adds a 30px tail below the band for an illustration these pages do
   not use. */
.page-content .dz-bnr-inr.style-1 { padding-bottom: 0; }