/* ============================================================
   CUSTOM.CSS — Clean, Consolidated, Production‑Grade
   Chris — February 2026
   ------------------------------------------------------------
   Structure:
   1. Header Layout (Row 1 & Row 2)
   2. Main Navigation Menu (Header Row 1)
   3. Members Menu (Header Row 2)
   4. Global Aesthetic Wiring (Preset Variables)
   5. Global Layout & Typography
   6. Social Icons
   7. Responsive Adjustments
   8. Legacy (Commented for Reference)
=============================================================== */


/* ============================================================
   1. HEADER LAYOUT (ROW 1 & ROW 2)
=============================================================== */

#sp-header-row-1,
#sp-header-row-1 > .row,
#sp-header-row-2 > .row {
    position: relative;
    overflow: visible;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Restore vertical centering for header utility items */
#sp-membermenu,
#sp-search,
#sp-header-utility {
    display: flex;
    align-items: center;
}

/* Ensure top menu aligns vertically with header utilities */
ul.mod-menu.mod-list.nav {
    align-items: center;
}


/* ============================================================
   2. MAIN NAVIGATION MENU (HEADER ROW 1)
=============================================================== */

/* Top‑level layout */
ul.mod-menu.mod-list.nav {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    align-items: center;
}

/* Top‑level items */
ul.mod-menu.mod-list.nav > li {
    position: relative;
    z-index: 10000;
}

ul.mod-menu.mod-list.nav > li > a,
ul.mod-menu.mod-list.nav > li > span.mod-menu__heading {
    display: block;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

/* Caret */
ul.mod-menu.mod-list.nav > li.deeper.parent > span.mod-menu__heading::after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   LEVEL‑2 DROPDOWN (AUTO‑SIZED, BOUNDARY‑SAFE)
=============================================================== */

ul.mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 10px 0;
    border-top: 2px solid #004188;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 99999;

    /* Option A — auto‑size to longest item */
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 40px);
    white-space: nowrap;

    overflow: visible;
}

/* Show dropdown */
ul.mod-menu.mod-list.nav > li:hover > ul.mod-menu__sub {
    display: block;
}

/* Level‑2 items */
ul.mod-menu__sub > li > a,
ul.mod-menu__sub > li > span {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    text-decoration: none;
}


/* ============================================================
   LEVEL‑3 FLYOUTS (ONLY WHERE THEY EXIST)
=============================================================== */

ul.mod-menu__sub > li.deeper.parent {
    position: relative;
}

ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub {
    top: 0;
    left: 100%;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 40px);
    white-space: nowrap;
}

/* Flip left when near right edge */
@media (min-width: 992px) {
    ul.mod-menu__sub > li.deeper.parent:hover > ul.mod-menu__sub {
        right: auto;
    }

    ul.mod-menu__sub > li.deeper.parent:hover {
        position: relative;
    }

    ul.mod-menu__sub > li.deeper.parent:hover > ul.mod-menu__sub {
        left: auto;
        right: 100%;
    }
}

/* Caret */
ul.mod-menu__sub > li.deeper.parent > a::after,
ul.mod-menu__sub > li.deeper.parent > span::after {
    content: "▸";
    font-size: 12px;
    margin-left: 6px;
}


/* ============================================================
   3. MEMBERS MENU (HEADER ROW 2)
   Mirrors main nav behavior
=============================================================== */

.custom-member-menu ul.mod-menu {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    align-items: center;
}

.custom-member-menu ul.mod-menu > li {
    position: relative;
    z-index: 10000;
}

.custom-member-menu ul.mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 10px 0;
    border-top: 2px solid #004188;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 40px);
    white-space: nowrap;
}

.custom-member-menu ul.mod-menu > li:hover > ul.mod-menu__sub {
    display: block;
}

/* SHOW LEVEL‑3 SUBMENUS ON HOVER */
ul.mod-menu__sub > li.deeper.parent:hover > ul.mod-menu__sub {
    display: block;
}

/* ============================================================
   4. GLOBAL AESTHETIC WIRING
=============================================================== */

body {
    background-color: var(--sppb-bg-color);
    color: var(--sppb-text-color);
}

a { color: var(--sppb-link-color); }
a:hover { color: var(--sppb-link-hover-color); }

.mod-menu__sub {
    background-color: var(--sppb-menu-dropdown-bg-color);
}

.mod-menu__sub a {
    color: var(--sppb-menu-dropdown-text-color);
}

.mod-menu__sub a:hover {
    color: var(--sppb-menu-dropdown-text-hover-color);
}


/* ============================================================
   5. GLOBAL LAYOUT & TYPOGRAPHY
=============================================================== */

#sp-main-body {
    padding: 20px 0;
}

#sp-main-body, .body-innerwrapper, .sp-page-builder { overflow: visible; }

footer#sp-footer {
    border-top: 1px solid #e5e5e5;
    font-size: 11px;
    padding: 12px 0;
}


/* ============================================================
   6. SOCIAL ICONS
=============================================================== */

a#rssocial-facebook-icon { background-color: #4867aa !important; }
a#rssocial-instagram-icon { background-color: #f70d82 !important; }
a#rssocial-youtube-icon { background-color: #ff0000 !important; }




/* ============================================================
   7. RESPONSIVE ADJUSTMENTS
=============================================================== */

@media (max-width: 991px) {
    ul.mod-menu__sub {
        max-width: 100vw;
    }
}


/* ============================================================
   8. LEGACY — PRESERVED FOR REFERENCE ONLY
=============================================================== */
/* (unchanged, commented blocks retained) */

/* ===================== END CUSTOM.CSS ======================= */