/* ==========================================================================
   Shared MADDS navbar: transparent at the top, frosted glass after scrolling.
   header-glass.js is the ONLY owner of the .is-scrolled state.
   Keep the background on its own layer; never fade the logo or navigation.
   ========================================================================== */
:root {
  --hdr-full: 108px; /* measured without changing the visible header */
  --hdr-compact: 64px;
  --hdr-dur: 260ms;
  --hdr-ease: cubic-bezier(.22, .61, .36, 1);
  --hdr-glass-rgb: 34, 12, 78;
  --hdr-glass-alpha: .40; /* 40% opacity = 60% transparency */
  --hdr-glass-blur: 18px;
}
html { scroll-padding-top: var(--hdr-compact); }

/* Override the legacy sticky backgrounds in style.css on both header variants.
   No transform/filter/opacity on the header itself: dropdowns must retain their
   positioning and their own backdrop-filter must still see the page behind it. */
header.madds-header,
header.main-header,
header.madds-header.scrolled,
header.main-header.scrolled,
header.madds-header.is-scrolled,
header.main-header.is-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 0;
  z-index: 1000;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  transition: none;
}

/* Remove the old permanent highlight: the default state is truly transparent. */
header.madds-header::before,
header.main-header::before { content: none; }

/* Fixed blur radius and fixed compact height. Only opacity is animated, so
   reverse-scrolling does not recreate/resize the blurred layer every frame.
   Use non-negative stacking, with the navigation explicitly above the glass. */
header.madds-header::after,
header.main-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--hdr-compact);
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
  background: rgba(var(--hdr-glass-rgb), var(--hdr-glass-alpha));
  -webkit-backdrop-filter: blur(var(--hdr-glass-blur));
  backdrop-filter: blur(var(--hdr-glass-blur));
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 22px rgba(15, 0, 45, .12);
  opacity: 0;
  transition: opacity var(--hdr-dur) var(--hdr-ease);
}
header.madds-header.is-scrolled::after,
header.main-header.is-scrolled::after { opacity: 1; }

header.madds-header > .container,
header.main-header > .container {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
  transition: padding var(--hdr-dur) var(--hdr-ease);
}

/* Full and compact dimensions share one state and one duration. These selectors
   also override the old body/header mobile logo rules in style.css. */
header.madds-header .logo > a,
header.main-header .logo > a { display: block; }
header.madds-header .logo img,
header.main-header .logo img {
  display: block;
  height: 100px;
  width: auto;
  padding: 0;
  transition: height var(--hdr-dur) var(--hdr-ease);
}
header.madds-header .nav > ul > li,
header.main-header .nav > ul > li {
  padding-top: 40px;
  padding-bottom: 40px;
  transition: padding var(--hdr-dur) var(--hdr-ease);
}
header.madds-header.is-scrolled .logo img,
header.main-header.is-scrolled .logo img { height: 58px; }
header.madds-header.is-scrolled .nav > ul > li,
header.main-header.is-scrolled .nav > ul > li {
  padding-top: 17px;
  padding-bottom: 17px;
}
header .quote-btn,
header .icon-btn {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    padding var(--hdr-dur) var(--hdr-ease),
    width var(--hdr-dur) var(--hdr-ease),
    height var(--hdr-dur) var(--hdr-ease),
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}
header.is-scrolled .quote-btn { padding: 8px 22px; }
header.is-scrolled .icon-btn { width: 36px; height: 36px; }

/* Existing inner-page banner and pinned-section offsets are preserved. */
header.main-header ~ .other-slider { height: calc(380px + var(--hdr-full)); }
header.main-header ~ .other-slider .about-hd { top: calc(50% + var(--hdr-full) / 2); }
section.custom-tabs .tabs-container { padding-top: calc(var(--hdr-compact) + 1vh); }

/* Preserve the existing menus. dropdown-glass.css supplies their final design. */
.mega-menu {
  background: #fff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  top: calc(100% - 2px);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(15, 0, 45, .22);
}
.dropdown-menu { background: #ccc !important; }

@media (max-width: 1200px) {
  header.madds-header .logo img,
  header.main-header .logo img { height: 78px; }
  header.madds-header.is-scrolled .logo img,
  header.main-header.is-scrolled .logo img { height: 58px; }
}
@media (max-width: 992px) {
  header.madds-header > .container,
  header.main-header > .container { padding-top: 12px; padding-bottom: 12px; }
  header.madds-header.is-scrolled > .container,
  header.main-header.is-scrolled > .container { padding-top: 6px; padding-bottom: 6px; }
  header.madds-header.is-scrolled .logo img,
  header.main-header.is-scrolled .logo img { height: 50px; }
}
@media (max-width: 768px) {
  :root { --hdr-full: 78px; --hdr-compact: 62px; }
  header.madds-header > .container,
  header.main-header > .container { padding-top: 10px; padding-bottom: 10px; }
  header.madds-header .logo img,
  header.main-header .logo img { height: 58px; }
  header.madds-header.is-scrolled > .container,
  header.main-header.is-scrolled > .container { padding-top: 6px; padding-bottom: 6px; }
  header.madds-header.is-scrolled .logo img,
  header.main-header.is-scrolled .logo img { height: 50px; }
  header.madds-header .icon-btn,
  header.main-header .icon-btn { min-width: 44px; min-height: 44px; }
}

/* Unsupported browsers get a legible opaque fallback ONLY in the scrolled
   state; opacity:0 keeps the top state transparent even in this fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.madds-header::after,
  header.main-header::after { background: #220c4e; }
}

/* Measurements happen on an inert off-screen clone, never on the live navbar. */
header[data-header-measurement] {
  position: fixed !important;
  top: -10000px !important;
  left: 0 !important;
  height: auto !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
header[data-header-measurement] *,
header[data-header-measurement]::after,
header.hdr-initializing *,
header.hdr-initializing::after { transition: none !important; animation: none !important; }
header[data-header-measurement]::before,
header[data-header-measurement]::after { content: none !important; }

@media (prefers-reduced-motion: reduce) {
  header.madds-header *,
  header.main-header *,
  header.madds-header::after,
  header.main-header::after { transition: none !important; animation: none !important; }
}