/* ==========================================================================
   eb4u auto-nav — auto-populated category dropdowns (Windows/Furniture/
   Lighting). Desktop mega-menu base styling lives in style.css
   (.auto-cats-dropdown). This sheet makes the dropdowns friendlier and more
   accessible: keyboard focus states, larger tap targets, clearer heading
   grouping, balanced columns (no orphaned headings), tall-menu scrolling and
   reduced-motion support. Additive only. Kill switch: ?eb4u_auto_nav=off
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop (mega-menu)
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {

    /* Width scales with item count via inline style from auto-nav.php;
       clamp it here so long names don't wrap or overflow the viewport. */
    body .main-navigation ul.menu > li.auto-cats-dropdown > .sub-menu-wrapper {
        width: auto !important;
        min-width: 340px !important;
        max-width: min(560px, calc(100vw - 2rem)) !important;
        /* NOTE: the theme keeps this wrapper height-collapsed and lets the
           inner ul overflow visibly — do NOT set overflow/max-height here or
           the whole panel clips to a ~16px sliver (zero visible items). */
        overflow: visible !important;
        max-height: none !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 34px rgba(20, 30, 28, 0.16) !important;
        padding: 8px 0 !important;
    }

    /* Balanced two columns; keep a heading glued to its children so a
       column never starts with orphaned sub-items. */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu {
        column-fill: balance;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-heading {
        break-after: avoid;
        -webkit-column-break-after: avoid;
    }

    /* Section headings: small, letter-spaced, with a hairline rule and a
       little breathing room above so each group reads as its own cluster. */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-heading > a {
        padding: 6px 18px 5px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #2f3b39 !important;
        border-bottom: 1px solid #ececec;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* add space above every heading except the very first in the menu */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-heading:not(:first-child) > a {
        margin-top: 10px;
    }

    /* Child links: roomy tap targets, comfortable line length, a subtle
       left accent that grows on hover/focus for a clear affordance. */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a {
        position: relative;
        padding: 7px 18px 7px 34px !important;
        font-size: 14px !important;
        color: #4a5553 !important;
        border-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color .15s ease, background-color .15s ease;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #cfd8d6;
        transform: translateY(-50%) scale(.6);
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a:hover,
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a:focus-visible {
        color: #4a908d !important;
        background: #f4f7f6 !important;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a:hover::before,
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a:focus-visible::before {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    /* Heading hover/focus */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-heading > a:hover,
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-heading > a:focus-visible {
        color: #4a908d !important;
    }

    /* Visible keyboard focus ring on every injected link (a11y). */
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li > a:focus-visible {
        outline: 2px solid #4a908d;
        outline-offset: -2px;
        border-radius: 6px;
    }
}

/* --------------------------------------------------------------------------
   Mobile / off-canvas
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    body .main-navigation ul.menu > li.auto-cats-dropdown > .sub-menu-wrapper,
    body .main-navigation ul.menu > li.auto-cats-dropdown > ul.sub-menu {
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Section headings stand out and get a divider + spacing between groups. */
    body .main-navigation ul.menu > li.auto-cats-dropdown li.auto-cats-heading > a {
        font-weight: 700 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: 13px !important;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    /* Children: comfortable full-width tap targets with an indent guide. */
    body .main-navigation ul.menu > li.auto-cats-dropdown li.auto-cats-indent > a {
        padding-left: 30px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-left: 2px solid rgba(74,144,141,0.18);
        margin-left: 14px;
    }
    body .main-navigation ul.menu > li.auto-cats-dropdown li.auto-cats-indent > a:active,
    body .main-navigation ul.menu > li.auto-cats-dropdown li.auto-cats-indent > a:focus-visible {
        background: rgba(74,144,141,0.10);
        border-left-color: #4a908d;
        outline: none;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li > a,
    body .main-navigation ul.menu > li.auto-cats-dropdown .sub-menu-wrapper ul.sub-menu > li.auto-cats-indent > a::before {
        transition: none !important;
    }
}