/* Prevent Flash of Unstyled Content */
.cl_flexnav ul {
    /* Hides items visually but keeps them measurable by JS */
    visibility: hidden;
    opacity: 0;
}

/* JS adds this class when calculations are done */
.cl_flexnav.cl-nav-ready ul {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in; /* Smooth reveal */
}

/* Dynamic Flex Navigation Styles */
.cl_flexnav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
/* Hidden items */
.cl_flexnav li.cl_hidden_flexnav {
    display: none;
}

/* More menu container */
.cl_more_flexnav {
    position: relative;
    display: none; /* Hidden by default */
}

/* `all: unset` strips every default browser style on the <button>
   (border, background, font inheritance, padding, focus outline, etc.)
   so admin's CSS via header_flexnav_more_button_style is the only
   source of styling. Keeping <button> preserves accessibility:
   keyboard activation (Enter/Space), screen-reader semantics, native
   Tab focus. We restore only the structural properties we need below. */
.cl_more_flexnav button {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-sizing: border-box;
}
.cl_more_flexnav button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cl_more_flexnav .more-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl_more_flexnav .cl_count {
    font-size: 12px;
    opacity: 0.8;
}

/* Dropdown
 * Positioning ancestor is .cl_more_flexnav (the More button wrapper has
 * position: relative above; dropdown is rendered as its child in
 * publicUtils_cl::renderFlexNavButtonAndDropdownHtmlCode). So `right: 0`
 * aligns the dropdown's right edge to the More button's right edge.
 *
 * When flexnav.js detects the More button has more viewport room to its
 * right, it sets data-align="start" → CSS flips to `left: 0` → dropdown
 * anchors to the More button's LEFT edge and extends rightward. Keeps it
 * on-screen across every layout (drawer_logo_start, inline FlexNav with
 * More mid-nav, etc.). Arrow flips to match. */
.cl_dropdown_flexnav {
    position: absolute !important;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    margin-top: 10px;
    padding: 8px;
}

.cl_dropdown_flexnav[data-align="start"] {
    right: auto;
    left: 0;
}

.cl_dropdown_flexnav.cl_open_flexnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown arrow — mirrors the alignment side.
.cl_dropdown_flexnav::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    border-radius: 2px;
}

.cl_dropdown_flexnav[data-align="start"]::before {
    right: auto;
    left: 20px;
}
 */
 
/* Dropdown links */
.cl_dropdown_flexnav a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 12px 16px;
    transition: background-color 0.3s ease;
    border-radius: 6px;
    margin-bottom: 4px;
}

.cl_dropdown_flexnav a:last-child {
    margin-bottom: 0;
}

.cl_dropdown_flexnav a:hover {
    background-color: #f8f9fa;
}