/* ==========================================================================
   Young & Empowered Malawi — public site header
   Two tiers: a light utility strip (contact + quick menus + socials) and a
   navy primary bar (logo plate, main navigation, donate CTA, menu/search).
   Loaded after the inline base styles so it wins on equal specificity.
   ========================================================================== */

:root {
    --yem-navy: #1a3a5c;
    --yem-navy-deep: #12293f;
    --yem-navy-soft: #24507f;
    --yem-blue: #05101f;
    --yem-blue-glass: rgba(5, 16, 31, 0.5);
    --yem-blue-glass-solid: rgba(5, 16, 31, 0.85);
    /* Utility strip: deep navy, darker than the main bar. */
    --yem-utility-glass: rgba(8, 26, 51, 0.96);
    --yem-utility-glass-solid: #081a33;
    --yem-yellow: #f1c40f;
    --yem-yellow-deep: #d4a90a;
    /* Hover / active accent — light enough to read on the blue glass. */
    --yem-accent-blue: #7fbaff;
    --yem-utility-h: 36px;
    --yem-main-h: 64px;
    --yem-header-h: calc(var(--yem-utility-h) + var(--yem-main-h));
    --yem-line: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Retire the previous floating header pieces
   -------------------------------------------------------------------------- */
.top-utility-bar,
.mobile-contact-bar,
.utility-bar,
.desktop-utility-bar,
.desktop-search-centered,
.mobile-utility-separator,
.mobile-homepage-logo,
.desktop-homepage-logo {
    display: none !important;
}

body::before {
    content: none !important;
}

/* --------------------------------------------------------------------------
   Page offset for the fixed header
   -------------------------------------------------------------------------- */
body {
    padding-top: var(--yem-header-h) !important;
}

body.login-page,
body.setup-password-page,
body.change-password-page,
body.forgot-password-page,
body[data-route="auth.reset_password"],
body[data-route="auth.register"] {
    padding-top: 0 !important;
}

@media (max-width: 768px) {
    body:not([data-route="main.index"]) .main-content {
        padding-top: 0 !important;
    }

    body[data-route="main.news"] .filter-section {
        margin-top: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */
.yem-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10100;
}

/* --------------------------------------------------------------------------
   Header typeface — Apple Symbols
   Apple Symbols is a macOS/iOS-only system font with no web-font equivalent,
   so Roboto Mono (loaded from Google Fonts in base.html) is the deliberate
   fallback for Windows / Android / Linux visitors rather than letting them
   drop to an arbitrary system sans. It also ships in Regular only, so the
   bold nav links and Donate CTA are synthesised by the browser.
   The global typography.css forces Inter with `body * { ... !important }`;
   these class-level selectors outrank it, and the icon-font rules below
   outrank these in turn so Font Awesome glyphs keep their own family.
   -------------------------------------------------------------------------- */
.yem-header,
.yem-header *,
.yem-header input,
.yem-header button,
.yem-drawer,
.yem-drawer *,
.yem-drawer input,
.yem-drawer button {
    font-family: 'Apple Symbols', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Both faces run wider than Inter — pull the tracking in so the nav and
   utility strip still fit their fixed-height rows. */
.yem-header,
.yem-drawer {
    letter-spacing: -0.01em;
}

.yem-header .fa,
.yem-header .fas,
.yem-header .far,
.yem-header .fal,
.yem-header .fat,
.yem-header .fad,
.yem-header [class^="fa-"],
.yem-header [class*=" fa-"],
.yem-drawer .fa,
.yem-drawer .fas,
.yem-drawer .far,
.yem-drawer [class^="fa-"],
.yem-drawer [class*=" fa-"] {
    font-family: var(--fa-style-family, 'Font Awesome 6 Free') !important;
}

.yem-header .fab,
.yem-header .fa-brands,
.yem-drawer .fab,
.yem-drawer .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

.yem-header .bi,
.yem-header [class^="bi-"],
.yem-header [class*=" bi-"],
.yem-drawer .bi,
.yem-drawer [class^="bi-"],
.yem-drawer [class*=" bi-"] {
    font-family: bootstrap-icons !important;
}

.yem-header a {
    text-decoration: none;
}

.yem-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Tier 1 — utility strip
   -------------------------------------------------------------------------- */
.yem-utility {
    background: var(--yem-utility-glass);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    height: var(--yem-utility-h);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(6, 24, 44, 0.5);
    transition: height 0.28s ease, opacity 0.2s ease;
    /* backdrop-filter gives this its own stacking context even though it's
       unpositioned; without an explicit z-index above .yem-main's (which
       gets the same implicit context from its own backdrop-filter), .yem-main
       paints on top and clips the utility dropdown panels beneath it. */
    position: relative;
    z-index: 2;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .yem-utility {
        background: var(--yem-utility-glass-solid);
    }
}

.yem-utility .yem-inner {
    justify-content: space-between;
    gap: 14px;
}

.yem-utility-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.yem-utility-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.yem-utility-link i {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}

.yem-utility-link:hover,
.yem-utility-link:hover i {
    color: var(--yem-accent-blue);
}

.yem-utility-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.28);
    flex: 0 0 auto;
}

.yem-utility-link span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.yem-utility-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Hover menus in the utility strip */
.yem-util-group {
    position: relative;
}

.yem-util-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.yem-util-toggle i {
    font-size: 0.76rem;
    transition: transform 0.2s ease;
}

.yem-util-group:hover .yem-util-toggle,
.yem-util-toggle:focus-visible {
    color: var(--yem-accent-blue);
}

.yem-util-group:hover .yem-util-toggle i {
    transform: rotate(180deg);
}

.yem-util-panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 210px;
    background: #ffffff;
    text-shadow: none;
    border-top: 3px solid var(--yem-yellow);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 36px rgba(15, 40, 70, 0.18);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 20;
}

.yem-util-group:hover .yem-util-panel,
.yem-util-group:focus-within .yem-util-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yem-util-panel a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--yem-navy);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}

.yem-util-panel a:hover {
    background: rgba(26, 58, 92, 0.08);
    color: var(--yem-navy-deep);
}

.yem-util-panel-divider {
    height: 1px;
    background: rgba(26, 58, 92, 0.12);
    margin: 6px 8px;
}

/* Second-level flyout inside a utility panel. The parent panel is pinned to
   the right edge of the strip, so the child opens to the left of it. */
.yem-util-sub {
    position: relative;
}

.yem-util-sub-toggle {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--yem-navy);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.yem-util-sub-toggle i {
    font-size: 0.76rem;
    opacity: 0.65;
}

.yem-util-sub:hover .yem-util-sub-toggle,
.yem-util-sub:focus-within .yem-util-sub-toggle {
    background: rgba(26, 58, 92, 0.08);
    color: var(--yem-navy-deep);
}

.yem-util-subpanel {
    position: absolute;
    top: -8px;
    right: 100%;
    margin-right: 6px;
    min-width: 225px;
    background: #ffffff;
    border-top: 3px solid var(--yem-yellow);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 40, 70, 0.18);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 21;
}

.yem-util-sub:hover .yem-util-subpanel,
.yem-util-sub:focus-within .yem-util-subpanel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.yem-util-subpanel a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--yem-navy);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease;
}

.yem-util-subpanel a:hover {
    background: rgba(26, 58, 92, 0.08);
    color: var(--yem-navy-deep);
}

/* Language picker — the globe icon is the whole control on desktop.
   Google's gadget ("Select Language" + flag + caret) renders ~180px wide,
   which crowds the social icons off the row, so it is layered invisibly over
   the globe: the icon is all you see, the gadget still takes the click. */
.yem-util-lang {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 2px;
    cursor: pointer;
}

.yem-util-lang > i {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    pointer-events: none;
    transition: color 0.2s ease;
}

.yem-util-lang:hover > i {
    color: var(--yem-accent-blue);
}

#google_translate_desktop_container {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
}

#google_translate_desktop_container .goog-te-gadget-simple {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Social icons */
.yem-utility-social {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    flex: 0 0 auto;
}

.yem-utility-social a {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.85rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.yem-utility-social a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--yem-accent-blue);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Tier 2 — primary navy bar
   -------------------------------------------------------------------------- */
.yem-main {
    background: var(--yem-blue-glass);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    height: var(--yem-main-h);
    box-shadow: 0 4px 18px rgba(10, 30, 55, 0.12);
    /* The glass is thin enough to see photos through, so lift the white text. */
    text-shadow: 0 1px 3px rgba(6, 24, 44, 0.5);
    transition: height 0.28s ease, background 0.28s ease;
}

.yem-main .yem-cta,
.yem-main .yem-brand {
    text-shadow: none;
}

/* Browsers without backdrop blur keep the bar readable over imagery. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .yem-main {
        background: var(--yem-blue-glass-solid);
    }
}

.yem-main .yem-inner {
    gap: 22px;
    padding-left: 0;
}

/* Logo plate */
.yem-brand {
    display: flex;
    align-items: center;
    height: 100%;
    background: #ffffff;
    padding: 6px 20px;
    flex: 0 0 auto;
    box-shadow: 0 2px 10px rgba(10, 30, 55, 0.15);
}

.yem-brand img {
    height: calc(var(--yem-main-h) - 22px);
    width: auto;
    max-width: 210px;
    object-fit: contain;
    transition: height 0.28s ease;
}

/* Primary navigation */
.yem-nav {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.yem-nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 4px;
}

.yem-nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.yem-header .yem-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 14px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease;
}

.yem-header .yem-nav-link i {
    font-size: 0.76rem;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.yem-header .yem-nav-link:hover,
.yem-header .yem-nav-link.active {
    color: var(--yem-accent-blue);
}

.yem-header .yem-nav-link:hover i {
    transform: rotate(180deg);
}

.yem-header .yem-nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--yem-accent-blue);
}

/* Right-hand actions */
.yem-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: 0 0 auto;
}

.yem-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--yem-yellow);
    color: var(--yem-navy-deep) !important;
    font-weight: 700;
    font-size: 1.02rem;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 2px 2px 0 rgba(10, 30, 55, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.yem-cta i {
    font-size: 0.86rem;
}

.yem-cta:hover {
    background: #ffd233;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 rgba(10, 30, 55, 0.55);
}

.yem-icon-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.yem-icon-btn:hover,
.yem-icon-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14);
    color: var(--yem-accent-blue);
}

/* Stacked bars matching the reference menu glyph */
.yem-burger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: 22px;
}

.yem-burger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.yem-burger span:nth-child(1) { width: 22px; }
.yem-burger span:nth-child(2) { width: 15px; }
.yem-burger span:nth-child(3) { width: 19px; }

.yem-icon-btn:hover .yem-burger span {
    width: 22px;
}

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */
.yem-search-panel {
    background: #ffffff;
    border-bottom: 0 solid var(--yem-yellow);
    box-shadow: 0 14px 30px rgba(10, 30, 55, 0.16);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.yem-search-panel.is-open {
    max-height: 120px;
    border-bottom-width: 3px;
}

.yem-search-form {
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.yem-search-form input {
    flex: 1 1 auto;
    border: 1px solid var(--yem-line);
    border-radius: 6px;
    padding: 11px 16px;
    font-size: 0.95rem;
    color: var(--yem-navy-deep);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yem-search-form input:focus {
    border-color: var(--yem-navy-soft);
    box-shadow: 0 0 0 3px rgba(36, 80, 127, 0.15);
}

.yem-search-form button {
    border: none;
    background: var(--yem-navy);
    color: #ffffff;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.yem-search-form button:hover {
    background: var(--yem-navy-soft);
}

.yem-search-form .yem-search-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--yem-navy);
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.yem-search-form .yem-search-close:hover,
.yem-search-form .yem-search-close:focus-visible {
    background: rgba(36, 80, 127, 0.12);
    color: var(--yem-navy-deep);
}

/* --------------------------------------------------------------------------
   Slide-out menu (all breakpoints)
   -------------------------------------------------------------------------- */
.yem-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(9, 24, 42, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 10105;
}

.yem-drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

.yem-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(260px, 68vw);
    background: var(--yem-navy-deep);
    color: #ffffff;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.3, 1),
                box-shadow 0.32s ease;
    z-index: 10110;
    display: flex;
    flex-direction: column;
    /* No shadow while parked: it is cast leftwards, so off-screen the drawer
       still darkened a band down the right edge of every page. */
    box-shadow: none;
}

.yem-drawer.is-open {
    transform: translateX(0);
    box-shadow: -20px 0 44px rgba(6, 18, 32, 0.4);
}

.yem-drawer a {
    text-decoration: none !important;
}

.yem-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
}

.yem-drawer-head img {
    height: 34px;
    width: auto;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
}

.yem-drawer-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.yem-drawer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--yem-accent-blue);
}

.yem-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 8px 16px;
}

.yem-drawer-link,
.yem-drawer-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    padding: 9px 14px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.yem-drawer-link:hover,
.yem-drawer-acc-btn:hover,
.yem-drawer-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--yem-accent-blue);
}

.yem-drawer-acc-btn i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.yem-drawer-acc-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.yem-drawer-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.yem-drawer-acc-panel a {
    display: block;
    padding: 7px 14px 7px 28px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}

.yem-drawer-acc-panel a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--yem-accent-blue);
}

.yem-drawer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 8px 14px;
}

.yem-drawer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 0;
}

.yem-drawer-social a {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.yem-drawer-social a:hover {
    background: var(--yem-accent-blue);
    color: var(--yem-navy-deep);
}

#google_translate_mobile_container {
    padding: 10px 14px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    display: block !important;
}

#google_translate_mobile_container .goog-te-gadget-simple {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#google_translate_mobile_container .goog-te-gadget-simple span,
#google_translate_mobile_container .goog-te-gadget span,
#google_translate_mobile_container select {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.88rem !important;
}

body.yem-menu-open {
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Condensed state once the page scrolls
   -------------------------------------------------------------------------- */
.yem-header.is-scrolled .yem-utility {
    height: 0;
    opacity: 0;
    overflow: hidden;
    border-bottom-color: transparent;
}

.yem-header.is-scrolled .yem-main {
    height: 54px;
    background: var(--yem-blue-glass-solid);
}

.yem-header.is-scrolled .yem-brand img {
    height: 36px;
}

.yem-header.is-scrolled .yem-nav-link.active::after {
    bottom: 14px;
}

/* --------------------------------------------------------------------------
   Desktop dropdowns inherited from the nav (About / Programs)
   -------------------------------------------------------------------------- */
.external-dropdown {
    background: #ffffff !important;
    border-top: 3px solid var(--yem-yellow) !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 18px 40px rgba(10, 30, 55, 0.2) !important;
    padding: 8px !important;
    min-width: 240px !important;
    max-width: 300px !important;
}

.external-dropdown::before {
    display: none !important;
}

.external-dropdown-item,
.external-dropdown-subitem {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--yem-navy) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.external-dropdown-subitem {
    padding-left: 28px !important;
    font-size: 0.85rem !important;
}

.external-dropdown-item:hover,
.external-dropdown-subitem:hover {
    background: rgba(26, 58, 92, 0.08) !important;
    color: var(--yem-navy-deep) !important;
    transform: none !important;
}

/* Girls Empowerment sub-menu: expands inside the panel, never as a flyout. */
.external-dropdown-item.has-subitems {
    justify-content: space-between !important;
    gap: 10px;
    cursor: pointer;
    overflow: visible !important;
}

.external-dropdown-item.has-subitems .submenu-arrow {
    position: static !important;
    transform: none !important;
    font-size: 0.7rem;
    opacity: 0.65;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.external-dropdown-item.has-subitems:hover .submenu-arrow,
.external-dropdown-item.has-subitems.expanded .submenu-arrow {
    opacity: 1;
}

.external-dropdown-item.has-subitems.expanded {
    background: rgba(26, 58, 92, 0.06) !important;
}

.external-dropdown-item.has-subitems.expanded .submenu-arrow {
    transform: rotate(180deg) !important;
}

.submenu-items {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: 2px solid rgba(26, 58, 92, 0.12);
    margin-left: 14px !important;
}

.submenu-items.show {
    padding: 2px 0 !important;
}

.external-dropdown-subitem {
    padding-left: 14px !important;
}

#aboutToggle.active,
#programsToggle.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--yem-accent-blue) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Desktop runs a slimmer primary bar. The logo is pinned to the size it had
   at the taller bar height so it does not shrink along with the row. */
@media (min-width: 992px) {
    :root {
        --yem-main-h: 52px;
    }

    .yem-brand {
        padding: 4px 20px;
    }

    .yem-brand img {
        height: 42px;
    }

    .yem-header .yem-nav-link.active::after {
        bottom: 14px;
    }

    .yem-header.is-scrolled .yem-main {
        height: 46px;
    }

    .yem-header.is-scrolled .yem-brand img {
        height: 36px;
    }

    .yem-header.is-scrolled .yem-nav-link.active::after {
        bottom: 11px;
    }
}

@media (max-width: 1300px) {
    .yem-header .yem-nav-link {
        padding: 0 10px;
        font-size: 1.1rem;
    }

    .yem-header .yem-nav-link.active::after {
        left: 10px;
        right: 10px;
    }

    .yem-cta {
        padding: 6px 12px;
    }
}

@media (max-width: 1100px) {
    .yem-nav {
        display: none;
    }

    /* Last stretch where the quick menus and the social icons share the row
       (they drop away at 991px) — tighten both so nothing gets pushed off. */
    .yem-utility-link {
        font-size: 0.92rem;
    }

    .yem-util-toggle {
        font-size: 0.9rem;
        padding: 6px 6px;
    }

    .yem-utility-contact {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    :root {
        --yem-utility-h: 34px;
        --yem-main-h: 56px;
    }

    .yem-inner {
        padding: 0 16px;
    }

    .yem-brand {
        padding: 6px 14px;
    }

    .yem-brand img {
        max-width: 165px;
    }

    /* Not enough room for the quick menus beside the contact details */
    .yem-util-group {
        display: none;
    }

    .yem-util-lang {
        border-left: none;
    }

    .external-dropdown {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --yem-utility-h: 32px;
        --yem-main-h: 50px;
    }

    .yem-utility-menu {
        display: none;
    }

    .yem-utility .yem-inner {
        justify-content: center;
    }

    .yem-utility-contact {
        gap: 12px;
    }

    .yem-utility-link {
        font-size: 0.96rem;
    }

    .yem-brand {
        padding: 5px 12px;
    }

    .yem-brand img {
        max-width: 140px;
    }

    .yem-cta {
        padding: 6px 12px;
        font-size: 0.78rem;
        box-shadow: 2px 2px 0 rgba(10, 30, 55, 0.55);
    }

    .yem-cta i {
        display: none;
    }

    .yem-icon-btn {
        width: 38px;
        height: 38px;
    }

    .yem-actions {
        gap: 6px;
    }

    .yem-header.is-scrolled .yem-main {
        height: 46px;
    }
}

@media (max-width: 480px) {
    .yem-utility-link.yem-utility-phone {
        display: none;
    }

    .yem-utility-sep {
        display: none;
    }

    .yem-brand img {
        max-width: 118px;
    }
}