/*******************************************************
  SIS — HEADER & NAVIGATION
  Divi Child Theme
*******************************************************/

/* Divi Builder only: helper background behind transparent header */
html.et-vb-app-ancestor .sis-builder-header-bg {
  background-color: #00558c !important;
}

/* =====================================================
   SIS — LOGO SOURCES (single place to update)
   ===================================================== */

:root{
  /* Use FULL URLs or correct /uploads/YYYY/MM paths */
  --sis-logo-for-light-menu: url("https://seniors1.sunspiredweb.com/wp-content/uploads/sis-logo.svg");
  --sis-logo-for-dark-menu:  url("https://seniors1.sunspiredweb.com/wp-content/uploads/sis-logo-wtype.svg");
}

/* =====================================================
   HEADER LOGO — LIGHT vs DARK MENU BACKGROUND
   ===================================================== */

/* Body-class rules for first paint (prevents flash before JS runs)
   These are set by SIS Page Settings via body_class(). */
body.sis-header-dark #custom-menu .et_pb_menu__logo img {
  content: url("/wp-content/uploads/2025/11/sis-logo-wtype.svg");
}

body.sis-header-light #custom-menu .et_pb_menu__logo img {
  content: url("/wp-content/uploads/2025/11/sis-logo.svg");
}

body.sis-header-dark #custom-menu .et_pb_menu__menu > nav > ul > li > a,
body.sis-header-dark #custom-menu .et-menu-nav > ul > li > a {
  color: #FFF !important;
}

body.sis-header-light #custom-menu .et_pb_menu__menu > nav > ul > li > a,
body.sis-header-light #custom-menu .et-menu-nav > ul > li > a {
  color: #444 !important;
}

/* DARK header (white logo + white TOP-LEVEL links only) */
#custom-menu.et_pb_bg_layout_dark .et_pb_menu__logo img {
  content: url("/wp-content/uploads/2025/11/sis-logo-wtype.svg");
}

#custom-menu.et_pb_bg_layout_dark .et_pb_menu__menu > nav > ul > li > a,
#custom-menu.et_pb_bg_layout_dark .et-menu-nav > ul > li > a {
  color: #FFF !important;
}

/* LIGHT header (dark logo + dark TOP-LEVEL links only) */
#custom-menu.et_pb_bg_layout_light .et_pb_menu__logo img {
  content: url("/wp-content/uploads/2025/11/sis-logo.svg");
}

#custom-menu.et_pb_bg_layout_light .et_pb_menu__menu > nav > ul > li > a,
#custom-menu.et_pb_bg_layout_light .et-menu-nav > ul > li > a {
  color: #444 !important;
}

/* Dropdowns stay readable */
#custom-menu ul.sub-menu li a,
#custom-menu.et_pb_bg_layout_dark ul.sub-menu li a,
#custom-menu.et_pb_bg_layout_light ul.sub-menu li a {
  color: #444 !important;
}

#custom-menu ul.sub-menu li a:hover,
#custom-menu.et_pb_bg_layout_dark ul.sub-menu li a:hover,
#custom-menu.et_pb_bg_layout_light ul.sub-menu li a:hover {
  color: var(--gcid-primary-color) !important;
}

/* =====================================================
   DROPDOWN MENU (spacing + line-height)
   ===================================================== */
#top-menu.nav li ul li.current-menu-item a,
#top-menu.nav li ul a,
.et-menu-nav ul.et-menu ul.sub-menu li a {
  line-height: 1.2em;
  padding: 12px 20px; /* (replaces any older 6px 20px rules) */
}

/* If you’re using a menu module class, this wins cleanly */
.sis-main-menu .et-menu li li > a {
  padding: 12px 20px;
}
.sis-main-menu .et-menu li li {
  line-height: 1.1em;
}

/* =====================================================
   SUBMENU ACTIVE STATE + CARET
   ===================================================== */

/* Current page inside ANY dropdown submenu */
.sub-menu li.current-menu-item > a,
.sub-menu li.current_page_item > a {
  border-bottom: 2px solid #fc8d2c;
  background-color: rgba(20, 20, 20, 0.05);
}

/* Parent underline when descendant is active */
.sub-menu li.menu-item-has-children.current-menu-ancestor > a {
  border-bottom: 2px solid #fc8d2c;
}

/* Caret spacing */
.sub-menu li.menu-item-has-children > a {
  position: relative;
  padding-right: 34px;
}

/* Caret base */
.sub-menu li.menu-item-has-children > a::after {
  position: absolute;
  right: 12px;
  top: 1.15em;
  font-size: 18px;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* Active ancestor caret */
.sub-menu li.menu-item-has-children.current-menu-ancestor > a::after {
  color: #fc8d2c;
  transform: rotate(270deg);
  top: 0.6em !important;
  right: 6px !important;
  font-size: 30px;
  font-weight: 500;
}

/* When a CURRENT submenu item has its own submenu,
   reset the styling for the items inside that submenu (2nd column) */
.sub-menu li.current-menu-item.menu-item-has-children > ul.sub-menu > li > a,
.sub-menu li.current_page_item.menu-item-has-children > ul.sub-menu > li > a {
  background: transparent !important;
}
.sub-menu li.current-menu-item.menu-item-has-children > ul.sub-menu > li > a:hover,
.sub-menu li.current_page_item.menu-item-has-children > ul.sub-menu > li > a:hover {
  background: rgba(0,0,0,.03) !important;
}

/* =====================================================
   HEADER CTA BUTTON (Divi Pixel)
   ===================================================== */
.et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button,
.et-db #et-boc .et-l ul > li > a.dipi-cta-button,
body #page-container .et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button,
header.et-l--header ul > li > a.dipi-cta-button,
header#main-header #et-top-navigation nav > ul > li > a.dipi-cta-button,
#top-header #et-secondary-menu > ul > li > a.dipi-cta-button,
nav > ul > li > a.dipi-cta-button {
  font-family: var(--et_global_heading_font);
  font-weight: 700;
  color: var(--gcid-body-color);
  font-size: clamp(16px, 1.8vw, 26px);
}

.et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button,
.et-db #et-boc .et-l ul > li > a.dipi-cta-button,
body #page-container .et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button,
header.et-l--header ul > li > a.dipi-cta-button,
header#main-header #et-top-navigation nav > ul > li > a.dipi-cta-button,
#top-header #et-secondary-menu > ul > li > a.dipi-cta-button,
nav > ul > li > a.dipi-cta-button,
.et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button:hover,
.et-db #et-boc .et-l ul > li > a.dipi-cta-button:hover,
body #page-container .et-db #et-boc .et-l .et_pb_menu ul li a.dipi-cta-button:hover,
ul li a.dipi-cta-button:hover,
nav > ul > li > a.dipi-cta-button:hover,
#top-header #et-secondary-menu > ul > li > a.dipi-cta-button:hover,
header.et-l--header ul > li > a.dipi-cta-button:hover,
header#main-header ul > li > a.dipi-cta-button:hover,
header#main-header #et-top-navigation nav > ul > li > a.dipi-cta-button:hover {
  padding: 0.5rem 1.5rem !important;
  border-radius: 3rem !important;
}

/* =====================================================
   MAIN MENU CURRENT / HOVER STATE
   ===================================================== */
ul li.current-menu-item a:hover,
ul li.current-menu-ancestor a:hover,
ul:hover:not(.sub-menu) li.current-menu-ancestor a {
  color: var(--gcid-2mb814oem9) !important;
}

.grow_below_center .et_pb_menu__menu > nav > ul > li.current-menu-item > a > span:after,
.grow_below_center .et_pb_menu__menu > nav > ul > li.current-menu-ancestor > a > span:after {
  background: #fc8d2c !important;
}

ul.sub-menu li.current-menu-item a {
  background: rgba(251, 142, 45, 0.2) !important;
}

/* =====================================================
   STACKED HEADER SYSTEM (.sis-header-stack)
   ===================================================== */

/* Default: desktop inline header (adjust if needed) */
body.page-template-default:not(.et-fb):not(.et_pb_editor) #main-content, body.search-results:not(.et-fb):not(.et_pb_editor) #main-content, body.search-no-results:not(.et-fb):not(.et_pb_editor) #main-content, body.error404:not(.et-fb):not(.et_pb_editor) #main-content {
  margin-top: -6.5em;
}

/* 1050–1499: stacked header is taller — use a smaller negative offset */
@media (min-width: 1050px) and (max-width: 1499px) {
  body.page-template-default:not(.et-fb):not(.et_pb_editor) #main-content, body.search-results:not(.et-fb):not(.et_pb_editor) #main-content, body.search-no-results:not(.et-fb):not(.et_pb_editor) #main-content, body.error404:not(.et-fb):not(.et_pb_editor) #main-content {
    margin-top: -10.5em;
  }
}

/* ≤1049: mobile — usually don’t pull content under the header */
@media (max-width: 1049px) {
  body.page-template-default:not(.et-fb):not(.et_pb_editor) #main-content, body.search-results:not(.et-fb):not(.et_pb_editor) #main-content, body.search-no-results:not(.et-fb):not(.et_pb_editor) #main-content, body.error404:not(.et-fb):not(.et_pb_editor) #main-content {
    margin-top: -4.5em;
  }
}

/* Safety: ensure builder never clips */
body.et-fb #main-content,
body.et_pb_editor #main-content{
  margin-top: 0 !important;
}
/* =====================================================
   ≥1500px (inline header alignment)
   ===================================================== */
@media (min-width: 1500px) {
  .sis-header-stack .et_pb_menu__menu {
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
}

/* =====================================================
   1050px–1499px (stacked header: center menu correctly)
   ===================================================== */
@media (min-width: 1050px) and (max-width: 1499px) {
  .sis-header-stack.et_pb_menu .et_pb_menu_inner_container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* Logo: full width + centered */
  .sis-header-stack .et_pb_menu__logo-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Menu wrap: full width + centered */
  .sis-header-stack .et_pb_menu__menu {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .sis-header-stack .et_pb_menu__menu > nav {
    width: auto !important;
  }

  .sis-header-stack .et_pb_menu__menu > nav > ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sis-header-stack .et_mobile_nav_menu {
    display: none !important;
  }
}

/* =====================================================
   LOGO — HARD ENFORCE HEIGHT (Firefox-safe)
   ===================================================== */
@media (min-width: 1050px) {
  .sis-header-stack .et_pb_menu__logo-wrap,
  .sis-header-stack .et_pb_menu__logo,
  .sis-header-stack .et_pb_menu__logo > a {
    display: flex !important;
    align-items: center !important;
    height: 78px !important;
    min-height: 78px !important;
    overflow: visible !important;
  }

  .sis-header-stack .et_pb_menu__logo img {
    display: block !important;
    height: 78px !important;
    min-height: 78px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =====================================================
   ≤1049px (mobile menu)
   ===================================================== */
@media (max-width: 1049px) {
  .sis-header-stack .et_pb_menu__menu {
    display: none !important;
  }

  .sis-header-stack .et_mobile_nav_menu {
    display: flex !important;
    margin-left: auto !important;
  }

  .sis-header-stack ul.et_mobile_menu {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 96px !important;
    max-width: 520px !important;
    z-index: 9990 !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }
 
 /*** Correct Submenu Styles ***/
 .et_mobile_menu li {
    margin: 0 5px;
}

  /*ul.et_mobile_menu li.current-menu-item a:hover, ul.et_mobile_menu li.current-menu-ancestor a:hover, ul.et_mobile_menu:hover:not(.sub-menu) li.current-menu-ancestor a  {
      color: #444!important;
  }*/
  ul.et_mobile_menu li a {
      color:#fff;
  }
  ul.et_mobile_menu li ul.submenu a, ul.et_mobile_menu ul.sub-menu li.current-menu-ancestor a, ul:hover:not(.sub-menu) li.current-menu-ancestor a {
      color:#444!important;
  }
/*  ul.et_mobile_menu ul.sub-menu li.current-menu-ancestor a, */ul.et_mobile_menu ul.sub-menu li.current-menu-item a {
      color:#11578d !important;
  }
  ul.et_mobile_menu li.current-menu-item a {
        font-weight:900 !important;
  }
  ul.et_mobile_menu li a:hover, ul.et_mobile_menu li ul.sub-menu li a:hover {
      opacity:1;
      background:#444 !important;
      color:#fff !important;
  }
  ul.et_mobile_menu li ul.sub-menu li.current-menu-item a:hover {
      opacity:1;
      background:#ccc !important;
      color:#11578d !important;
  }
  ul.et_mobile_menu li.dipi-cta-button-menu-item a span {
      padding: 0.3em 1.5em;
  }
/* When the mobile menu/modal is open, float the logo above everything */
  .et_pb_menu__logo-wrap {
    position: relative;
    z-index: 2147483646;
  }

/* Make sure the logo remains clickable/visible */
  .mobile_nav.opened .et_pb_menu__logo-wrap {
    pointer-events: auto !important;
  }
  body.dipi-mobile-menu-fullscreen #main-header .mobile_nav.dipi-menu-background-animation-circle.mobile_nav::before,
  body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu.dipi-menu-background-animation-circle .mobile_nav.mobile_nav::before,
  body.dipi-mobile-menu-fullscreen #main-header .mobile_nav.opened.mobile_nav::before,
  body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu .mobile_nav.opened.mobile_nav::before {

    background: linear-gradient(
      to bottom,
      rgba(20, 20, 20, 0.9) 0%,
      rgba(40, 40, 40, 0.9) 10%,
      rgba(80, 80, 80, 0.9) 20%,
      rgba(110, 129, 148, 0.9) 100%
    ) !important;

    /* optional: ensures no separate bg-color leaks in */
    background-color: transparent !important;
  }

}