/* ============================================================
   NAV BASE — load UNCONDITIONALLY in _Campaign-1/2 (all themes).
   Only universally-safe, palette-agnostic rules that pair with the
   shared NavigationViewComponent markup. NOT gated to a theme.
   ============================================================ */

/* The "Close Menu" control is now a <button> (was an <a>) for every
   theme, because the component is shared. Strip the browser's native
   button chrome so it keeps the look the existing
   #overlay-social #close-overlay rule already defines. color:inherit
   matters because the theme's #overlay-social a { } rule no longer
   reaches it now that it isn't an anchor. No colors assumed, so this
   is safe on all 41 themes. */
#overlay-social #close-overlay {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

/* Overlay social links sit in a horizontal row, not stacked.
   Prevents theme-level block-link rules (.overlay a, etc.) from
   turning each icon into its own full-width row, and keeps icon
   sizing appropriate for the constrained mobile menu. */
#overlay-social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
}

#overlay-social > a {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border: none !important;
    text-decoration: none !important;
}

#overlay-social i {
    font-size: 24px !important;
    border: none !important;
    text-decoration: none !important;
}

/* Close button stays on its own row */
#overlay-social > div {
    flex-basis: 100% !important;
    text-align: center;
    border: none !important;
}
/* ------------------------------------------------------------
   Mobile overlay: tiered rendering for the depth-N classes
   NavigationViewComponent emits on overlay <li>s (depth comes
   from the mobile proc's bpath — 4 bytes per level).

   Palette/font-agnostic and inert on sites whose mobile rowset
   has no depth, so it's safe to load unconditionally like the
   rest of this file. Padding sits on the <li> so theme rules on
   .overlay a are untouched; the tick mark is drawn with CSS
   (empty content = silent to screen readers) in currentColor,
   so it picks up each theme's link color and stays visible
   even when a theme centers the overlay text.
   ------------------------------------------------------------ */
.overlay-menu > li.depth-1 { padding-inline-start: 20px; }
.overlay-menu > li.depth-2 { padding-inline-start: 40px; }
.overlay-menu > li.depth-3 { padding-inline-start: 60px; }
.overlay-menu > li.depth-4 { padding-inline-start: 80px; }

.overlay-menu > li[class*="depth-"] > a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 2px;
    background: currentColor;
    opacity: 0.55;
    margin-inline-end: 8px;
    vertical-align: middle;
}