/* ==========================================================================
   Open Door Health Community - Header & Navigation
   Matches the design reference:
     Row 1: Logo | Address + Phone | PORTAL LOGIN btn | PAY MY BILL btn
     Row 2: Rounded pill nav bar with dividers: About | Locations | ... | Search
   ========================================================================== */


/* ==========================================================================
   1. HEADER ROW (Logo + Contact + Action Buttons)
   ========================================================================== */

.odh-site-header {
    background-color: var(--odh-white, #FFFFFF);
    padding-bottom: 15px !Important;
    border-bottom: 2px solid #C4D600;
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 100;
}

.odh-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 40px;
    gap: 28px;
}

/* ---------- Logo ---------- */

.odh-header-logo {
    flex-shrink: 0;
    line-height: 0;
}

.odh-header-logo a {
    display: inline-block;
    line-height: 0;
}

.odh-header-logo img {
    max-height: 65px;
    width: auto;
    display: block;
}

/* Fallback site title */
.odh-header-logo .odh-site-title {
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--odh-blue, #007C91);
    text-decoration: none;
    line-height: 1.2;
}

.odh-header-logo .odh-site-title:hover {
    color: var(--odh-teal, #007C91);
}

/* ---------- Contact info (address + phone) ---------- */

.odh-header-contact {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.odh-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--odh-dark, #2D3748);
    text-decoration: none;
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.odh-contact-item:hover {
    color: var(--odh-teal, #007C91);
}

.odh-contact-item svg {
    flex-shrink: 0;
    color: var(--odh-teal, #007C91);
    width: 20px;
    height: 20px;
}

.odh-contact-item span {
    white-space: nowrap;
}

/* Allow address to wrap to 2 lines */
.odh-contact-item span br {
    display: inline;
}

/* ---------- Action buttons (Portal Login + Pay My Bill) ---------- */

.odh-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    z-index: 1;
}

.odh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 8px 30px;
    border-radius: 30px;
    border: 2px solid;
    transition: all 0.2s ease;
    white-space: nowrap;
    background-color: var(--odh-white, #FFFFFF);
}

/* Teal outlined button (Portal Login) */
.odh-btn-outline-teal {
    color: var(--odh-blue, #007C91);
    border-color: var(--odh-teal, #007C91);
}

.odh-btn-outline-teal:hover {
    background-color: var(--odh-teal, #007C91);
    color: var(--odh-white, #FFFFFF);
    border-color: var(--odh-teal, #007C91);
}

/* Green/olive outlined button (Pay My Bill) */
.odh-btn-outline-green {
    color: var(--odh-blue, #007C91);
    border-color: #C4D600;
}

.odh-btn-outline-green:hover {
    background-color: #C4D600;
    color: var(--odh-white, #FFFFFF);
    border-color: #C4D600;
}

/* Decorative chevron arrows – positioned via ::after pseudo-elements */
.odh-btn-outline-teal,
.odh-btn-outline-green {
    position: relative;
}

.odh-btn-outline-teal::after,
.odh-btn-outline-green::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 32px;
    top: -28px;
    right: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: -1;
    transition: transform 0.25s ease;
}

.odh-btn-outline-teal:hover::after,
.odh-btn-outline-green:hover::after {
    transform: translateX(5px);
}

.odh-btn-outline-teal::after {
    background-image: url('assets/blue-arrow.svg');
}

.odh-btn-outline-green::after {
    background-image: url('assets/green-arrow.svg');
}


/* ==========================================================================
   2. NAVIGATION BAR (Rounded pill container with dividers)
   GP structure: nav#site-navigation > .inside-navigation > .main-nav + .menu-bar-items
   ========================================================================== */

#site-navigation.main-navigation,
#sticky-navigation.main-navigation {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    margin-top:-25px;
    position: relative;
    z-index: 100;
}

/* The rounded pill container wrapping the nav */
#site-navigation .inside-navigation,
#sticky-navigation .inside-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
    margin: 0 auto;
    border: 2px solid var(--odh-teal, #007C91);
    border-radius: 11px;
    padding: 0;
    background-color: white;
    padding: 5px 10px;
    box-shadow: 0 0 49px 0 rgba(8, 70, 78, 0.08);
}

/* Nav items fill the pill */
#site-navigation .main-nav,
#sticky-navigation .main-nav {
    display: flex;
    justify-content: center;
    flex: 1;
}

#site-navigation .main-nav > ul,
#sticky-navigation .main-nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

@media (min-width: 769px) {
body .menu-item-has-children .dropdown-menu-toggle {
    padding-right: 0px;
}
}

.slideout-navigation .inside-navigation {
    height:100%;
}
/* ---------- Nav link styling ---------- */

#site-navigation .main-nav ul li a,
#sticky-navigation .main-nav ul li a {
    color: var(--odh-teal, #007C91);
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 0 25px;
    line-height: 48px;
    display: block;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 12px;
    margin: 0px 10px;
}

/* Short centered divider lines between items */
#site-navigation .main-nav > ul > li + li,
#sticky-navigation .main-nav > ul > li + li {
    position: relative;
}

#site-navigation .main-nav > ul > li + li::before,
#sticky-navigation .main-nav > ul > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: rgba(0, 124, 145, 0.4);
}

/* Animated underline base — top-level items only */
#site-navigation .main-nav > ul > li > a::after,
#sticky-navigation .main-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 25px;
    right: 25px;
    height: 2px;
    background-color: #C4D600;
    width: 0;
    transition: width 0.25s ease;
    transform-origin: left center;
}

/* Hover */
#site-navigation .main-nav ul li a:hover,
#site-navigation .main-nav ul li.sfHover > a,
#sticky-navigation .main-nav ul li a:hover,
#sticky-navigation .main-nav ul li.sfHover > a {
    color: var(--odh-blue, #007C91);
    background-color: transparent;
}

#site-navigation .main-nav > ul > li > a:hover::after,
#site-navigation .main-nav > ul > li.sfHover > a::after,
#sticky-navigation .main-nav > ul > li > a:hover::after,
#sticky-navigation .main-nav > ul > li.sfHover > a::after {
    width: calc(100% - 50px);
}

/* Current / active page */
#site-navigation .main-nav ul li[class*="current"] > a,
#sticky-navigation .main-nav ul li[class*="current"] > a {
    color: var(--odh-blue, #007C91);
    background-color: transparent;
    font-weight: 700;
}

#site-navigation .main-nav > ul > li[class*="current"] > a::after,
#sticky-navigation .main-nav > ul > li[class*="current"] > a::after {
    width: calc(100% - 50px);
}


/* ==========================================================================
   3. DROPDOWN / SUB-MENUS
   ========================================================================== */

#site-navigation ul ul,
#sticky-navigation ul ul {
    background-color: var(--odh-white, #FFFFFF);
    border: 1px solid rgba(0, 124, 145, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    min-width: 220px;
    padding: 8px 0;
    margin-top: 0;
}

#site-navigation .main-nav ul ul li a,
#sticky-navigation .main-nav ul ul li a {
    font-size: 13px;
    font-weight: 500;
    padding: 10px 24px;
    line-height: 1.5;
    color: var(--odh-dark, #2D3748);
    border-bottom: none;
}

#site-navigation .main-nav ul ul li + li,
#sticky-navigation .main-nav ul ul li + li {
    border-left: none;
}

#site-navigation .main-nav ul ul li a:hover,
#sticky-navigation .main-nav ul ul li a:hover {
    color: var(--odh-teal, #007C91);
    background-color: var(--odh-off-white, #F7F9FA);
}

#site-navigation .main-nav ul ul li a::after,
#sticky-navigation .main-nav ul ul li a::after {
    display: none;
}

#site-navigation ul ul ul,
#sticky-navigation ul ul ul {
    border-radius: 8px;
}


/* ==========================================================================
   4. SEARCH ICON / MENU BAR ITEMS
   Sits at the end of the pill container, with a left divider.
   ========================================================================== */

#site-navigation .menu-bar-items,
#sticky-navigation .menu-bar-items {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

#site-navigation .menu-bar-items::before,
#sticky-navigation .menu-bar-items::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: rgba(0, 124, 145, 0.4);
}

#site-navigation .menu-bar-items .menu-bar-item > a,
#sticky-navigation .menu-bar-items .menu-bar-item > a {
    color: var(--odh-teal, #007C91);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 48px;
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
}

#site-navigation .menu-bar-items .menu-bar-item > a:hover,
#sticky-navigation .menu-bar-items .menu-bar-item > a:hover {
    color: var(--odh-blue, #007C91);
}

#site-navigation .menu-bar-items .gp-icon svg,
#sticky-navigation .menu-bar-items .gp-icon svg {
    width: 16px;
    height: 16px;
}

/* Search modal */
.gp-modal input[type="search"] {
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 18px;
    color: var(--odh-dark, #2D3748);
    border: 2px solid #e8ecef;
    border-radius: 25px;
    padding: 12px 20px;
    transition: border-color 0.2s ease;
}

.gp-modal input[type="search"]:focus {
    border-color: var(--odh-teal, #007C91);
    outline: none;
}


/* ==========================================================================
   5. STICKY NAVIGATION
   ========================================================================== */

/* Override GP's .grid-container max-width when sticky */
.main-navigation.is_stuck.grid-container,
.main-navigation.navigation-stick.grid-container {
    max-width: 100%;
    width: 100%;
}

#site-navigation.is_stuck,
#site-navigation.navigation-stick,
#sticky-navigation {
    background-color: transparent !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 8px 40px;
    margin-top: 0;
}

#site-navigation.is_stuck .main-nav ul li a,
#site-navigation.navigation-stick .main-nav ul li a,
#sticky-navigation .main-nav ul li a {
    line-height: 42px;
}

#site-navigation.is_stuck .menu-bar-items .menu-bar-item > a,
#site-navigation.navigation-stick .menu-bar-items .menu-bar-item > a,
#sticky-navigation .menu-bar-items .menu-bar-item > a {
    line-height: 42px;
}


/* ==========================================================================
   6. MOBILE HEADER (GP Menu Plus)
   ========================================================================== */

.mobile-header-navigation {
    background-color: var(--odh-white, #FFFFFF);
    border-bottom: 1px solid #e8ecef;
    position: relative;
    z-index: 100;
}

.mobile-header-navigation .inside-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.mobile-header-navigation .site-logo img,
.mobile-header-navigation .custom-logo-link img,
.mobile-header-navigation .mobile-header-logo img {
    max-height: 50px;
    width: auto;
}

/* Hamburger toggle */
.menu-toggle {
    color: var(--odh-blue, #007C91);
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--odh-teal, #007C91);
    background: none;
}

.menu-toggle .gp-icon svg {
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.menu-toggle .mobile-menu {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mobile-header-navigation .menu-bar-items .menu-bar-item > a {
    color: var(--odh-blue, #007C91);
    padding: 0 10px;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    font-size:20px;
}

.mobile-header-navigation .menu-bar-items .menu-bar-item > a:hover {
    color: var(--odh-teal, #007C91);
}
.mobile-header-navigation .menu-bar-items .menu-bar-item  a .gp-icon {
    line-height:1;
    display:block;
}


/* ==========================================================================
   7. SLIDEOUT / OFF-CANVAS MENU (Mobile)
   ========================================================================== */

.slideout-navigation {
    background-color: var(--odh-white, #FFFFFF);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.slideout-navigation .inside-navigation {
    padding: 20px 0;
}

body .main-navigation.offside {
    height: 100dvh !Important;
}
/* iOS Safari only — -webkit-touch-callout is exclusive to iOS WebKit.
   Adds generous bottom clearance so the last button scrolls above
   Safari's dynamic bottom toolbar / home indicator. */
@supports (-webkit-touch-callout: none) {
    .slideout-navigation .inside-navigation {
        padding-bottom: 140px !important;
    }
}

.slideout-navigation .main-nav ul li a {
    color: var(--odh-blue, #007C91);
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #f0f2f4;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.slideout-navigation .main-nav ul li a:hover {
    color: var(--odh-teal, #007C91);
    background-color: var(--odh-off-white, #F7F9FA);
}

.slideout-navigation .main-nav ul li[class*="current"] > a {
    color: var(--odh-teal, #007C91);
    border-left: 3px solid var(--odh-teal, #007C91);
    font-weight: 600;
}

/* Sub-menu smooth expand/collapse */
.slideout-navigation .main-nav ul ul {
    display: block !important;
    max-height: 0;
    overflow: hidden !important;
    transition: max-height 0.35s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    border-bottom: none;
}

.slideout-navigation .main-nav ul ul.toggled-on {
    max-height: 500px;
}
 .site-logo.mobile-header-logo img {
    padding: 5px !Important;
}

body .mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    margin-left:0px
}

#generate-slideout-menu.main-navigation .main-nav ul ul {
    background: #f6fafd;
}
.slideout-navigation .main-nav ul li.sfHover > a {
background-color: var(--odh-teal, #007C91);
color:white !important;
}

.slideout-navigation .main-nav ul ul li a {
    padding-left: 40px;
    font-size: 14px;
    font-weight: 400;
    color: var(--odh-gray, #445D6C);
}

.slideout-navigation .main-nav ul ul li a:hover {
    color: var(--odh-teal, #007C91);
}

.slideout-navigation .slideout-close {
    color: var(--odh-blue, #007C91);
    padding: 12px 24px;
    transition: color 0.2s ease;
}

.slideout-navigation .slideout-close:hover {
    color: var(--odh-teal, #007C91);
}

/* ---------- Slideout Utilities (Contact + Action Buttons) ---------- */

.odh-slideout-actions {
    padding: 20px 24px 28px;
    margin-top: 8px;
    border-top: 1px solid #e8ecef;
    justify-self: stretch;
    align-self: flex-end;
    width: 100%;
}

/* Contact info — stack vertically in the slideout */
.odh-slideout-actions .odh-header-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.odh-slideout-actions .odh-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--odh-gray, #445D6C);
    font-family: var(--odh-font-primary, 'Montserrat', sans-serif);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.odh-slideout-actions .odh-contact-item:hover {
    color: var(--odh-teal, #007C91);
}

.odh-slideout-actions .odh-contact-item svg {
    flex-shrink: 0;
    color: var(--odh-teal, #007C91);
}

/* Action buttons — full-width stacked */
.odh-slideout-actions .odh-header-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.odh-slideout-actions .odh-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 12px;
    padding: 9px 18px;
}

/* Decorative arrows — smaller, after button, vertically centered */
.odh-slideout-actions .odh-btn-outline-teal::after,
.odh-slideout-actions .odh-btn-outline-green::after {
  display:none;
}


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

/* Mobile: hide custom header, GP mobile-header takes over */
@media (max-width: 768px) {
    .odh-site-header {
        display: none;
    }
    #mobile-header.toggled .main-nav > ul, #mobile-header .menu-toggle, #mobile-header .mobile-bar-items {
        min-height:50px;
        line-height:1;
    }
    .nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container {
        padding:0px !Important;
    }
    .main-navigation .inside-navigation {
        align-items: stretch !Important;
    }

    .main-navigation .menu-bar-item {
        height:100%;
        display:flex;
    }
}

/* Tablet */
@media (max-width: 1200px) and (min-width: 769px) {
    .odh-site-header-inner {
        padding: 16px 24px;
        gap: 16px;
    }

    .odh-header-logo img {
        max-height: 50px;
    }

    .odh-header-contact {
        gap: 16px;
    }

    .odh-contact-item {
        font-size: 12px;
    }

    .odh-btn {
        font-size: 11px;
        padding: 10px 20px;
    }

    .odh-btn-outline-teal::after,
    .odh-btn-outline-green::after {
        width: 34px;
        height: 24px;
        top: -8px;
        right: -20px;
    }

 

    #site-navigation .inside-navigation,
    #sticky-navigation .inside-navigation {
        min-width: 700px;
    }

    #site-navigation .main-nav ul li a,
    #sticky-navigation .main-nav ul li a {
        padding: 0 18px;
        font-size: 14px;
    }
}

/* Small tablet: condense further */
@media (max-width: 960px) and (min-width: 769px) {
    .odh-header-contact {
        gap: 12px;
    }

    .odh-contact-item span br {
        display: none;
    }

    .odh-contact-item {
        font-size: 11px;
    }

    .odh-btn {
        font-size: 10px;
        padding: 8px 16px;
    }

    #site-navigation .main-nav ul li a,
    #sticky-navigation .main-nav ul li a {
        padding: 0 12px;
        font-size: 13px;
    }
}

/* Tablet nav: hide sticky logo so the right-side menu items don't stack.
   Between mobile breakpoint and 1023px the pill nav doesn't have enough
   horizontal room to accommodate the logo + menu + bar items together. */
@media (max-width: 1023px) and (min-width: 769px) {
    .sticky-navigation-logo {
        display: none !important;
    }
}

/* Narrow tablet: hide address, keep phone, tighten buttons */
@media (max-width: 850px) and (min-width: 769px) {
    /* Hide address text but keep the location icon */
    .odh-header-contact .odh-contact-item:first-child span {
        display: none;
    }

    .odh-btn {
        font-size: 10px;
        padding: 6px 14px;
        letter-spacing: 0.5px;
    }

    .odh-btn-outline-teal::after,
    .odh-btn-outline-green::after {
        display: none;
    }

    .odh-header-actions {
        gap: 8px;
    }
}

/* ==========================================================================
   9. MOBILE MENU – SCROLL LOCK & SAFE AREA FIXES
   ========================================================================== */

/* Scroll lock is handled entirely in JS (position:fixed + saved offset)
   because overflow:hidden on body does not work on iOS Safari.            */

/* iOS Safari extends the <html> background-color into the URL bar gap
   and overscroll zone. Match the slideout panel color when open so
   the gap area fills white instead of showing the page through.          */
html.slide-opened {
    background-color: #ffffff;
}

/* ── iOS Safe Area / dynamic viewport fixes ──────────────────────────────
   100dvh is still buggy on newer iOS Safari. 100lvh (large viewport height)
   is more reliable — represents the max height when browser UI is retracted.
   Extra height added to ensure coverage past safe area edges.             */
html body .slideout-overlay,
#generate-slideout-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100lvh !important;
    min-height: calc(100lvh + 60px) !important;
}

/* Slideout panel — extend background into notch/home indicator areas */
.slideout-navigation {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: 100lvh;
    /* Ensure the panel itself scrolls if content exceeds screen height,
       so the bottom buttons are always reachable on small devices */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}