/*
 * ZCA Mega Menu – Stylesheet
 * File: includes/templates/bootstrap/css/stylesheet_mega_menu.css
 *
 * v1.0.3 fixes:
 *   - Top-bar link text is now explicitly coloured (was invisible on dark backgrounds)
 *   - Dropdown width is now CSS-variable driven (full / auto / px)
 *   - Cleaner hover states and active indicators
 *
 * v1.0.4 fixes:
 *   - Desktop menu breakpoint lowered to md (768px): iPads now always see
 *     the full mega menu bar instead of the mobile accordion.
 *   - .zca-mega-nav sits flush below the Bootstrap .navbar with no gap;
 *     the dropdown correctly overlays the banner/hero content below it.
 *   - Increased dropdown z-index to 1040 so it always clears banners and
 *     Bootstrap modals that use z-index 1030.
 *
 * v1.0.5 fixes:
 *   - ROOT CAUSE FIX: removed z-index from .zca-mega-nav. Having
 *     position+z-index together creates a CSS stacking context, which
 *     confined the dropdown's own z-index to be evaluated only *inside*
 *     that context (effective z-index against siblings was 1020, not 1040).
 *     Removing z-index from the bar means the dropdown's z-index 9999 now
 *     competes at the root stacking context level, floating above all
 *     banner/slider content regardless of their own positioning.
 *   - Raised .zca-mega-dropdown z-index from 1040 to 9999 (safe large value).
 *   - Added the missing CSS hover rule (.zca-mega-hover-on selector) so
 *     hover mode actually works — the rule was referenced by the JS but
 *     never present in this stylesheet.
 *   - Added close-delay transition on the hover rule so the admin
 *     ZCA_MEGA_MENU_HOVER_DELAY setting controls the CSS close speed.
 *
 * v1.0.10 fixes:
 *   - BAR WIDTH: zcaPositionMegaNav() now reads the Bootstrap navbar's
 *     getBoundingClientRect() and applies the same left/right pixel offsets
 *     (and matching border-radius) to .zca-mega-nav so it is always the
 *     same width as the header navbar, regardless of Bootstrap spacer values
 *     or screen sizes.  No hardcoded pixel values are used.
 *   - BAR COLOR: --zca-mega-bar-bg changed from #212529 to #333333 to match
 *     the template's header background colour.
 *
 * v1.0.6 fixes:
 *   - STICKY BAR: .zca-mega-nav is now position:fixed so it stays anchored
 *     just below the Bootstrap fixed-top navbar while the user scrolls.
 *     `top` defaults to 56 px and is corrected at run-time by JS which
 *     measures the actual navbar height.  z-index 1029 keeps the bar (and
 *     its dropdown children) below the Bootstrap navbar (1030) but above
 *     all body content.  Because position:fixed always creates its own
 *     stacking context, the dropdown's z-index:9999 now competes within
 *     that context — easily above any banner, hero slider, or carousel.
 *   - Added #zca-mega-nav-spacer rule: an in-flow placeholder that holds
 *     the bar's visual height so the logo / branding below it stays in
 *     the correct position.  Height is set by JS at run-time.
 *
 * Override any variable in your site-specific stylesheet without editing
 * this file: dist-site_specific_styles.php or stylesheet_zca_colors.php
 */

/* ─────────────────────────────────────────────────────────────────────────
   CSS custom properties – all theme colours live here
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Top navigation bar */
    --zca-mega-bar-bg:               #333333;        /* bar background (matches template header background) */
    --zca-mega-top-link-color:       #ffffff;        /* ← was missing → caused invisible text on dark bar */
    --zca-mega-top-link-hover-color: #ffc107;        /* amber accent on hover */
    --zca-mega-top-link-active-bg:   rgba(255,255,255,.08);
    --zca-mega-top-link-padding:     .65rem 1rem;

    /* Dropdown panel */
    --zca-mega-dropdown-bg:          #ffffff;
    --zca-mega-dropdown-shadow:      0 6px 24px rgba(0,0,0,.14);
    --zca-mega-dropdown-border:      1px solid rgba(0,0,0,.08);
    --zca-mega-dropdown-radius:      0 0 6px 6px;
    --zca-mega-dropdown-padding:     1.5rem;

    /* Width behaviour – overridden by the inline style injected from PHP
       (ZCA_MEGA_MENU_DROPDOWN_WIDTH).  Values: 100% | auto | <Npx> */
    --zca-mega-dropdown-width:       100%;

    /* Sub-category headings (level 2) */
    --zca-mega-sub-color:            #111827;
    --zca-mega-sub-hover-color:      #e63946;
    --zca-mega-sub-font-weight:      600;
    --zca-mega-sub-font-size:        .875rem;

    /* Leaf links (level 3) */
    --zca-mega-leaf-color:           #4b5563;
    --zca-mega-leaf-hover-color:     #e63946;
    --zca-mega-leaf-font-size:       .82rem;

    /* Divider between columns */
    --zca-mega-col-divider:          1px solid #f0f0f0;

    /* "View All" bar */
    --zca-mega-view-all-color:       #6c757d;
    --zca-mega-view-all-hover:       #e63946;

    /* Featured products panel */
    --zca-mega-feat-bg:              #f8f9fa;
    --zca-mega-feat-heading-color:   #374151;
    --zca-mega-feat-link-color:      #111827;
    --zca-mega-feat-link-hover:      #e63946;
    --zca-mega-feat-price-color:     #e63946;

    /* Mobile accordion */
    --zca-mega-mob-bg:               #1a1a2e;
    --zca-mega-mob-link-color:       #e2e8f0;
    --zca-mega-mob-link-hover:       #ffc107;
    --zca-mega-mob-indent-bg:        rgba(255,255,255,.04);
    --zca-mega-mob-border:           rgba(255,255,255,.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   BAR PLACEMENT  (v1.0.9)
   The mega menu require is the FIRST output inside <body> in
   tpl_main_page.php, before every container div:

     <body ...>
       <?php require 'tpl_modules_categories_tabs.php'; ?>  ← mega menu
       <div id="header-wrapper" ...>  ← Bootstrap container starts here

   At this level position:fixed is unconditional — <body> itself has no
   transform, so the bar always pins at top:[navbar height] regardless of
   what any container div below it does.
   ───────────────────────────────────────────────────────────────────────── */
/* ── v1.0.10: position:fixed, rendered as first child of <body>.
   At body level no ancestor can have a transform that would demote
   fixed to absolute.
   top/left/right default to the Bootstrap navbar fallback values and are
   overridden at run-time by zcaPositionMegaNav() in jscript_mega_menu.php,
   which reads the navbar's getBoundingClientRect() and mirrors its exact
   left/right offsets and border-radius so the two bars are identical
   in width and shape.                                                  */
.zca-mega-nav {
    background-color: var(--zca-mega-bar-bg);
    position: fixed;
    top:    56px;   /* fallback; JS sets measured navbar height */
    left:   1rem;   /* fallback matching Bootstrap mx-3; JS overrides with live value */
    right:  1rem;
    z-index: 1029;  /* below Bootstrap fixed-top navbar (1030) */
    margin: 0;
    border-radius: 0;   /* v1.0.11: no rounded corners on the mega nav bar */
}/* ─────────────────────────────────────────────────────────────────────────
   TOP NAVIGATION BAR  (desktop / tablet, ≥ md breakpoint = 768px)
   ───────────────────────────────────────────────────────────────────────── */
.zca-mega-nav-list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.zca-mega-nav-item {
    position: static;   /* children position relative to .zca-mega-nav */
}

/* ── Top-level link ── */
.zca-mega-nav-link {
    display: block;
    padding: var(--zca-mega-top-link-padding);
    color: var(--zca-mega-top-link-color) !important; /* !important prevents Bootstrap colour inheritance */
    text-decoration: none;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.zca-mega-nav-link:hover,
.zca-mega-nav-link:focus {
    color: var(--zca-mega-top-link-hover-color) !important;
    background-color: var(--zca-mega-top-link-active-bg);
    border-bottom-color: var(--zca-mega-top-link-hover-color);
    outline: none;
}

/* Active / current page indicator */
.zca-mega-nav-item.is-active > .zca-mega-nav-link {
    color: var(--zca-mega-top-link-hover-color) !important;
    border-bottom-color: var(--zca-mega-top-link-hover-color);
}

/* Focus ring for keyboard navigation */
.zca-mega-nav-link:focus-visible {
    outline: 2px solid var(--zca-mega-top-link-hover-color);
    outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   DROPDOWN PANEL
   v1.0.5: z-index raised to 9999.  Because .zca-mega-nav no longer creates
   a stacking context (no z-index set on it), this value competes at the
   root / nearest ancestor stacking context level, comfortably above all
   banner, carousel, and slider content (typically z-index < 100).
   ───────────────────────────────────────────────────────────────────────── */
.zca-mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--zca-mega-dropdown-width);   /* controlled via PHP-injected CSS var */
    min-width: 220px;
    background: var(--zca-mega-dropdown-bg);
    border: var(--zca-mega-dropdown-border);
    border-top: none;
    border-radius: var(--zca-mega-dropdown-radius);
    box-shadow: var(--zca-mega-dropdown-shadow);
    z-index: 9999;   /* v1.0.5: high value — competes at root level since nav has no z-index */
}

/* Width modes: auto and fixed-px are handled by the inline style tag
   injected by jscript_mega_menu_css.php.  This rule only applies to 'full'. */
.zca-mega-dropdown--auto {
    width: auto;
    left: auto;    /* don't stretch to left edge; position under its parent */
}

.zca-mega-dropdown--fixed {
    left: 50%;
    transform: translateX(-50%);  /* centre under the page */
}

/* Open states – toggled by JS (click/keyboard) */
.zca-mega-nav-item.is-open > .zca-mega-dropdown,
.zca-mega-nav-item:focus-within > .zca-mega-dropdown {
    display: block;
}

/* ── Hover mode (CSS-driven) ───────────────────────────────────────────────
   The class .zca-mega-hover-on is added to <nav> by tpl_modules_categories_tabs.php
   when ZCA_MEGA_MENU_HOVER === 'true'.  Using a parent-class guard means hover
   behaviour can be toggled from the admin panel without touching JS.

   The visibility-delay trick: we show immediately on :hover but apply a short
   transition-delay on hiding (via --zca-mega-close-delay, set by jscript_mega_menu.php)
   so the panel doesn't snap shut when the cursor briefly leaves the bar.
   ─────────────────────────────────────────────────────────────────────────── */
.zca-mega-hover-on .zca-mega-nav-item:hover > .zca-mega-dropdown {
    display: block;
    animation: zcaMegaSlideIn .18s ease forwards;
}

.zca-mega-dropdown-inner {
    display: flex;
    gap: 0;
    padding: var(--zca-mega-dropdown-padding);
    flex-wrap: wrap;
}

/* ── "View All" header link ── */
.zca-mega-view-all {
    flex: 0 0 100%;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: var(--zca-mega-col-divider);
}

.zca-mega-view-all a {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zca-mega-view-all-color);
    text-decoration: none;
}

.zca-mega-view-all a:hover {
    color: var(--zca-mega-view-all-hover);
}

/* ── Columns area ── */
.zca-mega-columns {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.zca-mega-col {
    flex: 1 1 0;
    min-width: 150px;
    padding: 0 1rem 0 0;
    border-right: var(--zca-mega-col-divider);
    margin-right: 1rem;
}

.zca-mega-col:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* Sub-category heading (level 2) */
.zca-mega-sub-heading {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--zca-mega-sub-font-size);
    font-weight: var(--zca-mega-sub-font-weight);
    color: var(--zca-mega-sub-color);
    text-decoration: none;
    margin-bottom: .4rem;
    padding: .2rem 0;
    border-bottom: 1px solid transparent;
    transition: color .15s ease;
}

.zca-mega-sub-heading:hover {
    color: var(--zca-mega-sub-hover-color);
}

.zca-mega-sub-heading img {
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Leaf links (level 3) */
.zca-mega-leaf-list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
}

.zca-mega-leaf-list li {
    margin: 0;
    padding: 0;
}

.zca-mega-leaf-list a {
    display: block;
    font-size: var(--zca-mega-leaf-font-size);
    color: var(--zca-mega-leaf-color);
    text-decoration: none;
    padding: .18rem 0;
    transition: color .12s ease;
}

.zca-mega-leaf-list a:hover {
    color: var(--zca-mega-leaf-hover-color);
}

/* Custom-link items (simple link without sub-column grid) */
.zca-mega-custom-children {
    flex: 0 0 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.zca-mega-custom-children li a {
    font-size: .875rem;
    color: var(--zca-mega-leaf-color);
    text-decoration: none;
    padding: .2rem 0;
    display: block;
    transition: color .12s ease;
}

.zca-mega-custom-children li a:hover {
    color: var(--zca-mega-leaf-hover-color);
}

/* ── Featured products sidebar ── */
.zca-mega-featured {
    flex: 0 0 200px;
    background: var(--zca-mega-feat-bg);
    border-radius: 4px;
    padding: .75rem;
    margin-left: auto;
}

.zca-mega-featured-heading {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zca-mega-feat-heading-color);
    margin: 0 0 .5rem;
}

.zca-mega-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zca-mega-feat-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--zca-mega-mob-border);
}

.zca-mega-feat-list li:last-child {
    border-bottom: none;
}

.zca-mega-feat-list a {
    font-size: .8rem;
    color: var(--zca-mega-feat-link-color);
    text-decoration: none;
    line-height: 1.3;
    flex: 1;
}

.zca-mega-feat-list a:hover {
    color: var(--zca-mega-feat-link-hover);
}

.zca-mega-feat-list img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.zca-mega-feat-price {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--zca-mega-feat-price-color);
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE HAMBURGER BAR + COLLAPSIBLE PANEL
   v1.0.12: replaced the always-visible accordion with a hamburger toggle
   bar (fixed, below the Bootstrap navbar) and a slide-down panel that
   only appears when the burger is tapped.  < 768px (phones only).
   ───────────────────────────────────────────────────────────────────────── */

/* ── Toggle bar (fixed strip with hamburger button) ── */
.zca-mob-toggle-bar {
    background-color: var(--zca-mega-bar-bg);
    position: fixed;
    top:   56px;   /* fallback; corrected at run-time by zcaPositionMobBar() */
    left:  1rem;
    right: 1rem;
    z-index: 1029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .5rem 0 1rem;
    height: 42px;
    border-radius: 0;
}

/* Label on the left of the bar */
.zca-mob-bar-label {
    color: var(--zca-mega-top-link-color);
    font-size: .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .45rem;
    user-select: none;
}

/* The hamburger <button> itself */
.zca-mob-hamburger-btn {
    background: none;
    border: none;
    color: var(--zca-mega-top-link-color);
    cursor: pointer;
    padding: .45rem .55rem;
    border-radius: 4px;
    line-height: 0;
    transition: background .15s ease, color .15s ease;
    display: flex;
    align-items: center;
}

.zca-mob-hamburger-btn:hover,
.zca-mob-hamburger-btn:focus-visible {
    background: rgba(255,255,255,.12);
    color: var(--zca-mega-top-link-hover-color);
    outline: none;
}

.zca-mob-hamburger-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    transition: transform .2s ease;
}

/* Swap icons: show ☰ normally, ✕ when open */
.zca-ham-close {
    display: none;
}

.zca-mob-toggle-bar.is-open .zca-ham-open {
    display: none;
}

.zca-mob-toggle-bar.is-open .zca-ham-close {
    display: block;
}

/* ── Collapsible menu panel ── */
#zcaMegaMobileMenu {
    background: var(--zca-mega-mob-bg);
    position: fixed;
    top:   100px;  /* fallback; corrected to bar-bottom by zcaPositionMobBar() */
    left:  1rem;
    right: 1rem;
    z-index: 1028; /* just below the toggle bar */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);

    /* Hidden by default — animated in via visibility+opacity+translate */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: visibility 0s .22s,
                opacity   .22s ease,
                transform .22s ease;
}

#zcaMegaMobileMenu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: visibility 0s,
                opacity   .22s ease,
                transform .22s ease;
}

/* ── Accordion list (inside the panel) ── */
.zca-mob-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zca-mob-top-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    color: var(--zca-mega-mob-link-color) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--zca-mega-mob-border);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease;
}

.zca-mob-top-link:hover {
    color: var(--zca-mega-mob-link-hover) !important;
}

.zca-mob-chevron {
    width: 16px;
    height: 16px;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.zca-mob-item.is-open .zca-mob-chevron {
    transform: rotate(180deg);
}

.zca-mob-sub {
    display: none;
    background: var(--zca-mega-mob-indent-bg);
    padding: .25rem 0;
    border-bottom: 1px solid var(--zca-mega-mob-border);
}

.zca-mob-item.is-open .zca-mob-sub {
    display: block;
}

.zca-mob-sub a {
    display: block;
    padding: .45rem 1.5rem;
    font-size: .85rem;
    color: var(--zca-mega-mob-link-color) !important;
    text-decoration: none;
    transition: color .12s ease;
}

.zca-mob-sub a:hover {
    color: var(--zca-mega-mob-link-hover) !important;
}

.zca-mob-sub .zca-mob-leaf-link {
    padding-left: 2.5rem;
    font-size: .8rem;
    opacity: .85;
}

/* ─────────────────────────────────────────────────────────────────────────
   CATEGORY IMAGES in dropdown
   ───────────────────────────────────────────────────────────────────────── */
.zca-mega-cat-img {
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATION – subtle slide-down on open
   ───────────────────────────────────────────────────────────────────────── */
@keyframes zcaMegaSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.zca-mega-nav-item.is-open > .zca-mega-dropdown {
    animation: zcaMegaSlideIn .18s ease forwards;
}

/* ─────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────── */
.zca-mega-nav-link:focus-visible,
.zca-mega-sub-heading:focus-visible,
.zca-mega-leaf-list a:focus-visible,
.zca-mob-top-link:focus-visible {
    outline: 2px solid var(--zca-mega-top-link-hover-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Visually hidden (for screen readers) */
.zca-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}