/* 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 */
}

/* FlexNav loaded only for the PHONE layout's drawer (main_menu.php prints data-flexnav-wide="no"):
   on wider screens it never moves a link, so the row needs no measuring and shows at once, as it did
   before the design had a phone layout. Same breakpoint as main_header/v1/generated_css.php. */
@media (min-width: 768px) {
    .cl_flexnav[data-flexnav-wide="no"] ul {
        visibility: visible;
        opacity: 1;
    }
}

/* 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;
}

/* Touch accessibility floor (WCAG 2.2 SC 2.5.8). `all: unset` above strips the UA
   button padding, and this button's brush (header_flexnav_more_button_style) exposes
   only font/background/border/border-radius — no padding, height or min-height — so a
   merchant CANNOT enlarge it from wp-admin (StyleCleaner strips anything outside the
   brush). Left alone the hit box collapses to its line box: 16px tall, and ~13px wide
   when the label is blank and the count switched off, which is the natural state of the
   drawer_logo_start / drawer_logo_end layouts where this button IS the hamburger. It is
   also the sole route to every nav item on a phone — headerControllerFR::isFlexNavActive()
   ORs $isMobile, so header_flexnav_is_active='no' cannot switch it off there.
   min-width is therefore load-bearing, not belt-and-braces; justify-content re-centres
   the icon that would otherwise strand at the flex start edge. Scoped to coarse pointers
   so desktop navs that overflow keep their inline text-link sizing. */
@media (pointer: coarse) {
    .cl_more_flexnav button {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
}

.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;
}

/* The More button's phone icon (header_flexnav_more_button_phone_icon_id, printed before the text
   by publicUtils_cl::renderFlexNavButtonAndDropdownHtmlCode): phones only, and there it replaces
   the icon after the text. Without one, every screen keeps the same button. */
.cl_more_flexnav .cl-more-phone-icon {
    display: none;
}

/* "While open" icons (header_flexnav_more_button_open_icon_id / _phone_open_icon_id): each one
   replaces its icon while the list is open — the button's aria-expanded, which flexnav.js keeps
   current (Shopify Dawn's menu button holds both icons and hides one by state the same way). The
   renderer prints an open icon only beside the icon it replaces; `:has()` keeps the closed icon when
   there is no open one. The desktop pair swaps at every width, the phone pair below. */
.cl_more_flexnav .cl-more-open-icon,
.cl_more_flexnav .cl-more-phone-open-icon {
    display: none;
}
.cl_more_flexnav button[aria-expanded="true"] .cl-more-open-icon {
    display: inline-flex;
}
.cl_more_flexnav button[aria-expanded="true"]:has(.cl-more-open-icon) .cl-more-icon {
    display: none;
}

@media (max-width: 767.98px) {
    .cl_more_flexnav .cl-more-phone-icon {
        display: inline-flex;
    }
    /* The phone open icon is excluded by name: it is a .cl-icon too, and this hides the desktop pair. */
    .cl_more_flexnav button:has(.cl-more-phone-icon) .cl-icon:not(.cl-more-phone-icon):not(.cl-more-phone-open-icon) {
        display: none;
    }
    .cl_more_flexnav button[aria-expanded="true"] .cl-more-phone-open-icon {
        display: inline-flex;
    }
    .cl_more_flexnav button[aria-expanded="true"]:has(.cl-more-phone-open-icon) .cl-more-phone-icon {
        display: none;
    }
}

/* 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;
    /* This panel had NO height cap and NO overflow at all, while every peer has one (the search
       dropdown caps + scrolls, the city combobox caps at 240px + scrolls). That matters more here
       than anywhere else in the plugin: on a phone this dropdown is the SOLE route to every nav
       item — headerControllerFR::isFlexNavActive() ORs $isMobile, so a merchant cannot switch it
       off — and with `main_header_is_sticky='yes'` the ancestor becomes position:fixed, so page
       scroll CANNOT reveal anything that runs past the fold. A long menu simply lost its tail.
       `overflow-y: auto` is the actual fix — it makes the overflow reachable no matter what.
       The 60vh cap is deliberately a viewport unit even though this task is removing them
       elsewhere, and the distinction is real: the rules being converted are boxes that must
       EXACTLY fill the screen, where `vh` overshooting the visible area clips content with no
       recourse. Here `vh` is only a conservative ceiling on a dropdown, and the failure mode of
       overshooting is "scroll inside the panel", not "content unreachable". There is also no
       fixed-position parent to take a percentage of — the anchor is the More button. 60vh clears
       the header plus ~160px of browser chrome on any viewport at/above ~575px tall, and below
       that the scroll handles the remainder. */
    max-height: 60vh;
    overflow-y: auto;
    /* One link per row whatever the link's own display (G70, 02-10-2026). flexnav.js puts the
       links straight into this panel, with no <li>, and a button design gives each of them
       display:inline-flex and margin:0 at 0,2,0, which beats `.cl_dropdown_flexnav a` below
       (0,1,1): short links then shared a row ("FAQ Contact"). The panel stacks them itself
       instead, each keeping its own width as before (flex-start), and the gap replaces the
       links' margin-bottom, which that same margin:0 removed. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

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

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

/* "Open the list at the header's bottom edge" (header_flexnav_dropdown_at_bar_bottom — the view puts
   cl-header-list-at-bar-bottom on the bar's width wrapper): FlexNav_cl.alignDropdown() sets the list's
   top to the header's bottom when it opens, so the 10px gap under the button goes. Only the open
   animation's own properties move: under the rule above's `transition: all` the new top slid down
   with it on the first open (about 25px more than the 10px of every later open). */
.cl-header-list-at-bar-bottom .cl_dropdown_flexnav {
    margin-top: 0;
    transition-property: opacity, visibility, transform;
}

/* "Phones: every link in More" (header_flexnav_phone_all_in_more — main_menu.php prints
   data-flexnav-phone="all"): on a phone the menu opens as a list across the whole bar, right under
   it, instead of a 200px box beside the button. The nav and the More wrapper drop their own
   positioning, so the panel's containing block becomes .cl-header-main (position: relative,
   main_header/v1/generated_css.php): left/right 0 span the bar and top: 100% sits under its last
   row. Each link takes the full width — a phone-sized tap target. The panel keeps its card design,
   the 60vh cap and the scroll above. It overlays the page rather than pushing it down: nothing
   jumps, and it works inside a sticky (fixed) header. Same breakpoint as flexnav.js. */
@media (max-width: 767.98px) {
    .cl_flexnav[data-flexnav-phone="all"],
    .cl_flexnav[data-flexnav-phone="all"] .cl_more_flexnav {
        position: static;
    }
    .cl_flexnav[data-flexnav-phone="all"] .cl_dropdown_flexnav {
        left: 0;
        right: 0;
        min-width: 0;
        margin-top: 0;
        align-items: stretch;
    }
    /* "Open the list across the whole screen" (header_flexnav_phone_list_full_width — the view puts
       cl-header-phone-list-full on the bar's width wrapper, only with the switch above on): the bar
       drops its positioning too, so the list's containing block becomes that wrapper, whose padding
       box is the screen's width on a phone (the width modes pad only left and right). left/right 0
       then reach the screen's edges, and top: 100% is still the bar's bottom: the bar is the
       wrapper's only child, and its margins collapse through it. Exact, and no 100vw, which counts
       the scrollbar on a narrow desktop window. */
    .cl-header-phone-list-full {
        position: relative;
    }
    .cl-header-phone-list-full > .cl-header-main {
        position: static;
    }
}

/* 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;
}

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

/* The wordmark below asks to inherit "the header's own colour" — but logo.php nests it in an
   <a href>, and nothing in the plugin declares a colour on that anchor, so `inherit` resolved to the
   UA stylesheet's link colour instead. The chain broke one element below where the comment assumed
   it started, and the fallback shipped browser-blue on any theme that does not style header anchors
   (measured live: rgb(0,0,238) on chhiwat.ma, against a rgb(0,0,0) .logo-container).
   Colouring the ANCHOR repairs the chain rather than overriding it, so the wordmark keeps taking
   whatever colour the header actually has. An <img> logo ignores `color`, so this is inert there.
   It lives in this static file and NOT in generated_css.php — which already has a rule on this same
   anchor — because generated_css is compiled at save time and stored per design, so a change there
   would reach an existing store only when someone re-saved that header design. */
.logo-container a {
    color: inherit;
}

/* Site-name fallback when an active logo block has no image (see main_header/v1/logo.php).
   Its typography comes from the design's `logo_text_preset` — a typography preset on the span at
   (0,3,0), which beats this (0,2,0) rule. What is here is the NO-PRESET fallback (a deactivated or
   deleted preset emits no CSS) plus the structural nowrap; a store that uploads a logo never renders
   it. Keep it. */
.logo-container .cl-logo-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
}

/* The site-name fallback cannot wrap (nowrap above) and its container clips it
   (.cl-header-main .logo-container ships overflow:hidden + flex-shrink:1 + min-width:0 so
   the header never overflows horizontally), so on a narrow viewport a long store name is
   cut MID-GLYPH with no signal that anything is missing. The only admin-editable property
   on that container is max-width — a ceiling, which cannot stop a flex item shrinking
   below its content width — so no setting reaches this.
   min-width:0 is load-bearing: the <a> is itself a flex item whose default min-width:auto
   pins it at the nowrap min-content width, which is why the CONTAINER does the clipping
   today and text-overflow would otherwise never fire. Flex items are blockified, so the
   inline-block on this <a> computes to block and text-overflow applies.
   :has() scopes this to the no-image fallback; an <img> logo already degrades via
   object-fit:contain. NOTE this signals the truncation, it does not un-truncate — making
   the full name fit means taking width from the nav, which is a merchant decision with
   existing controls (More-button label, nav count, search, width mode, header layout). */
.logo-container a:has(.cl-logo-text) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}