/* ==========================================================================
   Quark 2 — SWSG Custom Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. General Cleanups
   -------------------------------------------------------------------------- */
h1::before,
h2::before,
.content-wrapper h1::before,
.content-wrapper h2::before {
    display: none !important;
    content: none !important;
}

/* --------------------------------------------------------------------------
   2. Light Theme (Default)
   -------------------------------------------------------------------------- */

/* Outer Page Background */
:root,
html,
body,
#page-wrapper,
html:not([data-theme='dark']),
body:not([data-theme='dark']) {
    background-color: #383838 !important;
}

/* Header & Banner */
:root:not([data-theme='dark']) #header {
    background-color: #383838 !important;
}

/* Navigation Bar */
:root:not([data-theme='dark']) .main-navigation {
    background-color: #a8a8a8 !important;
}

:root:not([data-theme='dark']) .main-navigation a {
    color: #000000 !important;
}

/* Central Content Panel */
:root:not([data-theme='dark']) #body-wrapper,
:root:not([data-theme='dark']) #body-wrapper .container,
:root:not([data-theme='dark']) #body-wrapper .columns,
:root:not([data-theme='dark']) #body-wrapper .column,
:root:not([data-theme='dark']) #body-wrapper #item,
:root:not([data-theme='dark']) #body-wrapper .content-wrapper,
:root:not([data-theme='dark']) #body-wrapper .content-padding,
:root:not([data-theme='dark']) #body-wrapper .card,
:root:not([data-theme='dark']) #body-wrapper .card-body,
:root:not([data-theme='dark']) #body-wrapper .card-header {
    background-color: #a8a8a8 !important;
    box-shadow: none !important;
    border: none !important;
}

:root:not([data-theme='dark']) #body-wrapper p,
:root:not([data-theme='dark']) #body-wrapper li:not(.main-navigation li),
:root:not([data-theme='dark']) #body-wrapper span,
:root:not([data-theme='dark']) #body-wrapper h1,
:root:not([data-theme='dark']) #body-wrapper h2,
:root:not([data-theme='dark']) #body-wrapper h3,
:root:not([data-theme='dark']) #body-wrapper h4,
:root:not([data-theme='dark']) #body-wrapper h5,
:root:not([data-theme='dark']) #body-wrapper h6 {
    color: #000000 !important;
}

:root:not([data-theme='dark']) #body-wrapper a:not(.main-navigation a) {
    color: #003366 !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   3. Dark Theme Overrides
   -------------------------------------------------------------------------- */

/* Outer Page Background */
html[data-theme='dark'],
body[data-theme='dark'],
[data-theme='dark'] #page-wrapper {
    background-color: #121212 !important;
}

/* Header & Banner */
html[data-theme='dark'] #header,
body[data-theme='dark'] #header {
    background-color: #222222 !important;
}

/* Navigation Bar */
html[data-theme='dark'] .main-navigation,
body[data-theme='dark'] .main-navigation {
    background-color: #2a2a2a !important;
}

html[data-theme='dark'] .main-navigation a,
body[data-theme='dark'] .main-navigation a {
    color: #e0e0e0 !important;
}

/* Central Content Panel */
html[data-theme='dark'] #body-wrapper,
html[data-theme='dark'] #body-wrapper .container,
html[data-theme='dark'] #body-wrapper .columns,
html[data-theme='dark'] #body-wrapper .column,
html[data-theme='dark'] #body-wrapper #item,
html[data-theme='dark'] #body-wrapper .content-wrapper,
html[data-theme='dark'] #body-wrapper .content-padding,
html[data-theme='dark'] #body-wrapper .card,
html[data-theme='dark'] #body-wrapper .card-body,
html[data-theme='dark'] #body-wrapper .card-header {
    background-color: #1e1e1e !important;
    box-shadow: none !important;
    border: none !important;
}

html[data-theme='dark'] #body-wrapper p,
html[data-theme='dark'] #body-wrapper li:not(.main-navigation li),
html[data-theme='dark'] #body-wrapper span,
html[data-theme='dark'] #body-wrapper h1,
html[data-theme='dark'] #body-wrapper h2,
html[data-theme='dark'] #body-wrapper h3,
html[data-theme='dark'] #body-wrapper h4,
html[data-theme='dark'] #body-wrapper h5,
html[data-theme='dark'] #body-wrapper h6 {
    color: #e0e0e0 !important;
}

html[data-theme='dark'] #body-wrapper a:not(.main-navigation a),
body[data-theme='dark'] #body-wrapper a:not(.main-navigation a) {
    color: #38bdf8 !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   4. Blockquotes & Code Callouts
   -------------------------------------------------------------------------- */
#body-wrapper blockquote,
#body-wrapper pre,
#body-wrapper code {
    background-color: #555555 !important;
    color: #ffffff !important;
    border-left: 4px solid #38bdf8 !important;
    padding: 12px 16px !important;
    margin: 20px 0 !important;
    border-radius: 4px;
}

#body-wrapper blockquote p,
#body-wrapper blockquote * {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. Header Banner Layout
   -------------------------------------------------------------------------- */
.header-banner-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.banner-images-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.banner-photo img,
.banner-logo img {
    max-height: 180px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   6. Desktop Navigation Layout & Dropdown Submenus (Min-Width 961px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 961px) {
    .main-navigation {
        display: block !important;
        padding: 12px 0;
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .nav-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .main-navigation ul {
        display: flex;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 16px !important; /* Reduced from 30px to prevent overflow/wrapping */
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap !important;
    }

    .main-navigation ul li {
        position: relative;
        white-space: nowrap !important;
    }

    .main-navigation a {
        font-weight: 600 !important;
        font-size: 1rem !important;
        text-decoration: none !important;
        padding: 6px 10px !important;
        display: block;
    }

    /* Hide submenus by default */
    .main-navigation ul li ul {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 8px 0 !important;
        min-width: 220px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        z-index: 9999 !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Dropdown background colors matching theme */
    :root:not([data-theme='dark']) .main-navigation ul li ul {
        background-color: #a8a8a8 !important;
    }

    html[data-theme='dark'] .main-navigation ul li ul,
    body[data-theme='dark'] .main-navigation ul li ul {
        background-color: #2a2a2a !important;
    }

    /* Reveal dropdown on hover */
    .main-navigation ul li:hover > ul {
        display: flex !important;
    }

    .main-navigation ul li ul li {
        width: 100%;
    }

    .main-navigation ul li ul li a {
        padding: 8px 16px !important;
        white-space: nowrap;
        text-align: left;
    }

    .main-navigation a:hover {
        color: #38bdf8 !important;
        text-decoration: underline !important;
        text-underline-offset: 6px;
    }
}

/* --------------------------------------------------------------------------
   7. Mobile Navigation & Touch Controls (Max-Width 960px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
    /* Hide the desktop navigation bar completely on phone/tablet views */
    .main-navigation {
        display: none !important;
    }

    /* Ensure wrapper doesn't overflow horizontally */
    html, body, #page-wrapper, #header {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Fix mobile overlay submenus staying open on touch */
    .mobile-menu ul li ul,
    .overlay-menu ul li ul,
    #overlay ul li ul {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
        padding-left: 20px !important;
        margin: 6px 0 !important;
        background: transparent !important;
    }

    .mobile-menu ul li ul li a,
    .overlay-menu ul li ul li a,
    #overlay ul li ul li a {
        font-size: 0.95rem !important;
        padding: 6px 0 !important;
        opacity: 0.9 !important;
    }
}

/* --------------------------------------------------------------------------
   8. Shared Miscellaneous
   -------------------------------------------------------------------------- */
/* Theme Toggle Button */
button.theme-toggle {
    background: transparent !important;
    border: 1px solid #666666 !important;
    border-radius: 6px !important;
    color: inherit !important;
    cursor: pointer !important;
    font-size: 1.25rem !important;
    padding: 6px 10px !important;
}

/* Title Font Weights */
#body-wrapper h1,
#body-wrapper h2,
#body-wrapper h3,
#body-wrapper .content-title {
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
}

/* Header Social Links (Column 1) */
.header-banner-container > div:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

a.facebook-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem !important; /* Increased size */
    color: #ffffff !important;   /* Force white color across both themes */
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

a.facebook-icon:hover {
    color: #1877f2 !important;   /* Brand Facebook blue on hover */
    transform: scale(1.1);
}