/**
 * ANCA Mobile Navigation Styles
 *
 * Scope: Mobile drawer, hamburger button, accordion submenus.
 * Desktop nav is NOT touched — all rules here are scoped to
 * .anca-hamburger, .anca-mobile-drawer, and related classes.
 *
 * Brand colors:
 *   --anca-blue:       #296FA2  (main header / nav background)
 *   --anca-dark-blue:  #2870A2  (deeper blue, footer)
 *   --anca-charcoal:   #323232  (top bar)
 *   --anca-border:     #3c83b5  (nav border accent)
 *   --anca-light-blue: #aac8e6  (accent / subtext)
 *
 * @package anca
 * @version 1.0.0
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
    --anca-blue:        #296FA2;
    --anca-dark-blue:   #2870A2;
    --anca-charcoal:    #323232;
    --anca-border:      #3c83b5;
    --anca-light-blue:  #aac8e6;
    --anca-white:       #ffffff;
    --anca-drawer-width: 320px;
    --anca-transition:  0.3s ease;
}

/* ============================================================
   Prevent body scroll when drawer is open
   ============================================================ */
body.anca-drawer-open {
    overflow: hidden;
}

/* ============================================================
   HAMBURGER BUTTON
   Shown only on xs (< 768px), positioned in header-one band
   ============================================================ */
.anca-hamburger {
    display: none; /* shown via .visible-xs Bootstrap class */
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    height: 26px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-top: 8px;
}

.anca-hamburger:focus {
    outline: 2px solid var(--anca-light-blue);
    outline-offset: 4px;
    border-radius: 2px;
}

.anca-hamburger__bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--anca-white);
    border-radius: 2px;
    transition: transform var(--anca-transition), opacity var(--anca-transition);
}

/* Animate bars into X when drawer is open */
body.anca-drawer-open .anca-hamburger__bar:nth-child(1) {
    transform: translateY(11.5px) rotate(45deg);
}
body.anca-drawer-open .anca-hamburger__bar:nth-child(2) {
    opacity: 0;
}
body.anca-drawer-open .anca-hamburger__bar:nth-child(3) {
    transform: translateY(-11.5px) rotate(-45deg);
}

/* Bootstrap .visible-xs sets display:block — override to flex for our layout */
@media (max-width: 767px) {
    .anca-hamburger.visible-xs {
        display: flex !important;
    }
}

/* ============================================================
   OVERLAY BACKDROP
   ============================================================ */
.anca-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1039;
    opacity: 0;
    transition: opacity var(--anca-transition);
}

.anca-mobile-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* ============================================================
   MOBILE DRAWER
   Slides in from the right on xs breakpoint only
   ============================================================ */
.anca-mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(var(--anca-drawer-width), 85vw);
    height: 100%;
    background-color: var(--anca-blue);
    z-index: 1040;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: right var(--anca-transition);
    padding: 0 0 2rem 0;

    /* Subtle inner shadow for depth */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35);
}

.anca-mobile-drawer.is-open {
    right: 0;
}

/* Only show drawer mechanism on mobile */
@media (min-width: 768px) {
    .anca-mobile-drawer,
    .anca-mobile-overlay {
        display: none !important;
    }
}

/* ============================================================
   DRAWER CLOSE BUTTON
   ============================================================ */
.anca-mobile-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--anca-white);
    font-size: 1.25rem;
    cursor: pointer;
    margin: 0.75rem 0.75rem 0 auto;
    border-radius: 4px;
    transition: background var(--anca-transition);
}

.anca-mobile-drawer__close:hover,
.anca-mobile-drawer__close:focus {
    background: rgba(255, 255, 255, 0.15);
    outline: 2px solid var(--anca-light-blue);
    outline-offset: 2px;
}

/* ============================================================
   DRAWER SECTION + LABEL
   ============================================================ */
.anca-mobile-drawer__section {
    padding: 0.5rem 0;
}

/* ============================================================
   MOBILE MENU LIST
   ============================================================ */
.anca-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Reset _an_header.scss .header-one-menu .navbar-nav > li override.
   That rule sets font-size:13px on li elements and cascades into
   our drawer links. We reset it here at the li level. */
#anca-mobile-drawer li {
    font-size: 1.25rem !important;
    letter-spacing: normal !important;
    float: none !important;
    line-height: normal !important;
    display: block !important;
}

/* Items with children must be flex so link + chevron sit side by side */
#anca-mobile-drawer li.anca-mobile-menu__item--has-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#anca-mobile-drawer li a {
    font-size: 1.25rem !important;
    letter-spacing: normal !important;
    float: none !important;
    line-height: normal !important;
}

.anca-mobile-menu__item {
    margin: 0;
    border-bottom: 1px solid rgba(60, 131, 181, 0.3);
}

.anca-mobile-menu__item:last-child {
    border-bottom: none;
}

/* Items with children get a flex row so link + toggle sit side by side */
.anca-mobile-menu__item--has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* ============================================================
   MENU LINKS
   ============================================================ */
.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__link {
    display: block;
    flex: 1;
    padding: 1rem 1.25rem;
    color: var(--anca-white);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background var(--anca-transition), color var(--anca-transition);
}

.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__link:hover,
.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__link:focus {
    background: rgba(255, 255, 255, 0.12);
    color: var(--anca-white);
    text-decoration: none;
    outline: none;
}

.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__link:focus-visible {
    outline: 2px solid var(--anca-light-blue);
    outline-offset: -2px;
}

/* Active/current page link */
.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__item--active > .anca-mobile-menu__link {
    color: var(--anca-light-blue);
    background: rgba(0, 0, 0, 0.15);
}

/* Child level indentation */
.anca-mobile-drawer .anca-mobile-menu .anca-mobile-menu__item--child > .anca-mobile-menu__link {
    padding-left: 2rem;
    font-weight: 400;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: 0;
}

/* ============================================================
   SUBMENU TOGGLE BUTTON (chevron)
   ============================================================ */
.anca-mobile-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-left: 1px solid rgba(60, 131, 181, 0.4);
    color: var(--anca-white);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background var(--anca-transition), transform var(--anca-transition);
}

.anca-mobile-menu__toggle:hover,
.anca-mobile-menu__toggle:focus {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.anca-mobile-menu__toggle:focus-visible {
    outline: 2px solid var(--anca-light-blue);
    outline-offset: -2px;
}

/* Rotate chevron when expanded */
.anca-mobile-menu__item.is-expanded > .anca-mobile-menu__toggle .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform var(--anca-transition);
}

.anca-mobile-menu__toggle .fa-chevron-down {
    transition: transform var(--anca-transition);
}

/* ============================================================
   SUBMENU (ul)
   ============================================================ */
.anca-mobile-menu__sub {
    display: none;
    width: 100%;
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.18);
}

.anca-mobile-menu__sub.is-open {
    display: block;
}

/* Third level */
.anca-mobile-menu__sub .anca-mobile-menu__sub {
    background: rgba(0, 0, 0, 0.12);
}

.anca-mobile-drawer .anca-mobile-menu__sub .anca-mobile-menu__link {
    padding-left: 2rem;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.anca-mobile-drawer .anca-mobile-menu__sub .anca-mobile-menu__sub .anca-mobile-menu__link {
    padding-left: 2.75rem;
}

/* ============================================================
   DRAWER ACTION BUTTONS (Donate / Take Action)
   ============================================================ */
.anca-mobile-drawer__actions {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--anca-border);
}

.anca-mobile-drawer__cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 3px;
    transition: background var(--anca-transition), color var(--anca-transition);
}

.anca-mobile-drawer__cta:focus-visible {
    outline: 2px solid var(--anca-light-blue);
    outline-offset: 2px;
}

.anca-mobile-drawer__cta--donate {
    background: #c0392b;
    color: var(--anca-white);
}
.anca-mobile-drawer__cta--donate:hover,
.anca-mobile-drawer__cta--donate:focus {
    background: #a93226;
    color: var(--anca-white);
    text-decoration: none;
}

.anca-mobile-drawer__cta--action {
    background: var(--anca-charcoal);
    color: var(--anca-white);
}
.anca-mobile-drawer__cta--action:hover,
.anca-mobile-drawer__cta--action:focus {
    background: #1a1a1a;
    color: var(--anca-white);
    text-decoration: none;
}

/* ============================================================
   HIDE DESKTOP NAV ELEMENTS ON MOBILE
   (already handled by Bootstrap .hidden-xs / .visible-xs
    but belt-and-suspenders for the nav bars)
   ============================================================ */
@media (max-width: 767px) {
    .anca-top-nav-desktop {
        display: none !important;
    }
    .anca-primary-nav-desktop {
        display: none !important;
    }
}

/* ============================================================
   LOGO sizing — responsive
   ============================================================ */
.site-logo-img {
    max-height: 80px;
    width: auto;
}

@media (max-width: 767px) {
    .site-logo-img {
        max-height: 55px;
    }
}

/* ============================================================
   header-one band — ensure logo + hamburger align on mobile
   ============================================================ */
@media (max-width: 767px) {
    .header-one .row.pa-py-15 {
        display: flex;
        align-items: center;
    }
    .header-one .col-xs-4.text-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}