/* Dual Indication Header
* Scoped to .dual-topmenu, .dual-mobile-topmenu, .dual-branding
* Only renders on dual indication pages via Drupal visibility rules.
* Uses :has() to override existing header layout when dual blocks are present.
*/

/* ============================================
   Existing header overrides (only when dual blocks present)
   ============================================ */

/* Reset existing header — our dual blocks take over
   High specificity to override compiled Sass (.layout-container > header patterns) */
.layout-container > header:has(.dual-branding) {
  height: auto;
  width: 100%;
}

.layout-container > header:has(.dual-branding) .menu-container .top-bar-region {
  height: auto;
  background: none;
  padding: 0;
}

.layout-container > header:has(.dual-branding) .menu-container .main-header-region {
  display: block;
  height: 0;
  background: none;
  border-radius: 0;
  position: relative;
}

.layout-container > header:has(.dual-branding) .menu-container .main-header-region > .hamburger {
  display: none;
}

/* Reset all intermediate wrappers between header and our blocks */
.layout-container > header:has(.dual-branding) .menu-container .main-header-region > div {
  width: 100%;
  height: auto;
  padding: 0;
  max-width: none;
  pointer-events: none;
}

.layout-container > header:has(.dual-branding) .menu-container .main-header-region > div > div {
  width: 100%;
  max-width: none;
  pointer-events: none;
}

.layout-container > header:has(.dual-branding) .menu-container .top-bar-region > div {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* ============================================
   Top Menu Bar (gold bar)
   ============================================ */

.dual-topmenu {
  background: #fabd26;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  font-family: Poppins, sans-serif;
  position: relative;
  z-index: 1003;
  width: 100%;
}

@media (min-width: 1024px) {
  .dual-topmenu {
    display: flex;
  }
}

.dual-topmenu__residents {
  font-size: 12px;
  font-weight: 400;
  background: linear-gradient(180deg, #4f08b0 3.68%, #21034a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.dual-topmenu__links {
  display: none;
}

.dual-topmenu__links .menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dual-topmenu__links .menu-item {
  position: relative;
  padding: 0 20px;
}

.dual-topmenu__links .menu-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: linear-gradient(180deg, rgba(79, 8, 176, 0.5) 0%, rgba(33, 3, 74, 0.5) 100%);
}

.dual-topmenu__links .menu-item a {
  font-size: 12px;
  font-weight: 500;
  background: linear-gradient(180deg, #4f08b0 3.68%, #21034a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.dual-topmenu__links .menu-item a:hover {
  text-decoration: underline;
}

/* Hide links — hide the entire li so pipes/padding don't remain.
   Note: [link*="..."] targets the menus_attribute module's custom attribute.
   This module places GUI-configured classes in a "link" attr, not "class". */
.dual-topmenu .menu-item:has([link*="shtg-only"]),
.dual-mobile-topmenu .menu-item:has([link*="shtg-only"]),
.dual-topmenu .menu-item:has([link*="hide-dual-link"]),
.dual-mobile-topmenu .menu-item:has([link*="hide-dual-link"]) {
  display: none;
}

@media (min-width: 1024px) {
  .dual-topmenu {
    padding: 6px 30px;
  }

  .dual-topmenu__links {
    display: block;
  }
}

/* ============================================
   Site Branding (centered logo + arc)
   ============================================ */

.dual-branding {
  text-align: center;
  position: relative;
  z-index: 1004;
  padding: 1rem 20px 0;
  margin-top: 0;
  background: transparent;
  overflow: visible;
}

/* Wings and arc sit on top of each other — same position, same top.
   Wings = flat white bar. Arc = SVG shape with curve.
   Together they form the complete white shape. */
.dual-branding__wings,
.dual-branding__arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.dual-branding__wings {
  width: 100vw;
  height: 5.25rem;
  background: #fff;
}

.dual-branding__arc {
  width: 200vw;
  height: 8.75rem;
  background: url('dual-branding-arc.svg') no-repeat center top / auto 100%;
  pointer-events: none;
}

.dual-branding__logo {
  display: inline-block;
  pointer-events: initial;
}

.dual-branding__logo img {
  height: 55px;
  width: auto;
}

.dual-branding {
  p.dual-branding__tagline {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4f08b0;
    margin: 8px 0 2px;
    pointer-events: none;
  }

  p.dual-branding__subtitle {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 4px;
  }
}

@media (min-width: 1024px) {
  .dual-branding {
    padding: 16px 30px 14px;
    pointer-events: none;
  }

  .dual-branding__logo img {
    height: 65px;
  }

  .dual-branding__tagline {
    font-size: 14px;
    margin: 6px 0 2px;
  }

  .dual-branding__subtitle {
    font-size: 12px;
  }
}

/* ============================================
   Mobile Menu
   ============================================ */

.dual-mobile-topmenu {
  position: relative;
  z-index: 1001;
  pointer-events: initial;
}

/* Hamburger button — inside .dual-branding, top-right corner */
.dual-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: initial;
  padding: 0;
  position: absolute;
  top: 2rem;
  right: 20px;
  z-index: 1003;
}

.dual-hamburger__bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #4f08b0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Hamburger → X transition */
body.dual-menu-open .dual-hamburger__bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

body.dual-menu-open .dual-hamburger__bar:nth-child(2) {
  opacity: 0;
}

body.dual-menu-open .dual-hamburger__bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Menu panel — content-height, below branding */
.dual-mobile-topmenu__panel {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1005;
  padding-top: 120px;
  overflow-y: auto;
  pointer-events: auto;
  border-radius: 0 0 1.875rem 0;
}

.dual-mobile-topmenu.is-open .dual-mobile-topmenu__panel {
  display: block;
}

.dual-mobile-topmenu__menu {
  padding: 0 24px;
  flex: 1;
}

.dual-mobile-topmenu__menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dual-mobile-topmenu__menu .menu-item a {
  display: inline;
  padding: 18px 0;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}

.dual-mobile-topmenu__menu .menu-item a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 14px;
  background: url('arrow-right.svg') no-repeat center / contain;
  vertical-align: middle;
  margin-left: 8px;
}

.dual-mobile-topmenu__menu .menu-item {
  padding: 18px 0;
}

/* Nested submenus — flatten for mobile */
.dual-mobile-topmenu__menu .menu .menu {
  padding: 0;
}

.dual-mobile-topmenu__menu .menu-item--expanded > a {
  display: none;
}

/* Bump header above scrim when menu is open */
body.dual-menu-open .layout-container > header {
  z-index: 1002;
}

/* When menu open: hide branding decorations, keep logo + hamburger visible */
body.dual-menu-open .dual-branding__tagline,
body.dual-menu-open .dual-branding__subtitle,
body.dual-menu-open .dual-branding__wings,
body.dual-menu-open .dual-branding__arc {
  display: none;
}

/* Gradient scrim overlay behind menu */
body.dual-menu-open::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  background: linear-gradient(160deg, #fa7821 0%, #4f08b0 100%);
  opacity: 0.8;
  z-index: 1001;
  pointer-events: none;
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .dual-hamburger {
    display: none;
  }

  .dual-mobile-topmenu__panel {
    display: none;
  }
}

/* ============================================
   Hide ISI when menu is open
   ============================================ */

body.dual-menu-open .isi .fixed {
  display: none;
}

/* Prevent body scroll when menu is open */
body.dual-menu-open {
  overflow: hidden;
}

/* Real page-scroll lock: <html> is the scroller, so target it.
   (The body rule above is a no-op for page scroll.) */
@media (max-width: 1023px) {
  html:has(body.dual-menu-open) {
    overflow-y: hidden;
  }
}
.dual-mobile-topmenu__menu > ul > li > ul > li:has(a[link*="hide-dual-menu-link"]) {
  display: none !important;
}
.dual-topmenu__links > ul > li:has(a[link*="hide-shtg-link"]) {
  display: none !important;
}


@media (max-width: 429px) {
  .dual-branding__arc {
    height: 7.65rem;
  }

  .dual-branding {
    padding: 5px 20px 0 !important;
  }
  .dual-branding__logo img {
    height: 45px !important;
    width: auto;
  }

  .dual-branding__wings,
  .dual-branding__arc {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
}