/**
 * Mega Menu Enhanced - Full Width Dropdowns
 * Wszystkie dropdown menu na pełną szerokość strony
 */

/* ============================================
   CRITICAL: FORCE HORIZONTAL MENU LAYOUT
   ============================================ */

/* Force horizontal menu - ultra high priority */
nav.mega-menu ul.mega-menu-list,
.mega-menu-container > ul.mega-menu-list,
ul.mega-menu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Force menu items inline */
nav.mega-menu ul.mega-menu-list > li.mega-item,
.mega-menu-container > ul.mega-menu-list > li.mega-item,
ul.mega-menu-list > li.mega-item,
li.mega-item {
    display: inline-flex !important;
    position: static !important; /* Changed from relative - panels position relative to .mega-menu */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    width: auto !important;
    flex-direction: row !important;
}

/* ============================================
   MEGA PANEL - FULL WIDTH DROPDOWNS
   ============================================ */

/* Hide dropdowns by default */
nav.mega-menu .mega-panel,
.mega-menu .mega-panel,
.mega-menu-fullwidth .mega-panel,
.mega-panel,
.mega-panel-fullwidth,
div.mega-panel {
    /* Hide by default */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    /* Full width positioning - UNDER menu */
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    width: 100vw !important;
    z-index: 1000 !important;

    /* Styling */
    background: var(--color-white, #ffffff) !important;
    border-top: 1px solid var(--color-neutral-200, #e5e5e5) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Show ONLY when Alpine.js explicitly shows it */
nav.mega-menu .mega-panel[style*="display: block"],
.mega-menu .mega-panel[style*="display: block"],
.mega-menu-fullwidth .mega-panel[style*="display: block"],
.mega-panel[style*="display: block"],
.mega-panel-fullwidth[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CSS fallback for hover (if Alpine.js fails) */
.mega-menu .mega-item:hover > .mega-panel,
.mega-menu .mega-item:focus-within > .mega-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force hide when Alpine says so */
.mega-menu .mega-panel[style*="display: none"],
.mega-menu-fullwidth .mega-panel[style*="display: none"],
.mega-panel[x-cloak] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ============================================
   PANEL INNER CONTAINERS - FULL WIDTH
   ============================================ */

/* Wrapper - full width */
.mega-panel-wrapper {
    width: 100% !important;
}

/* Inner container - FULL WIDTH with padding only */
.mega-menu-fullwidth .mega-panel-inner,
.mega-menu .mega-panel-inner,
.mega-panel-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 2.5rem clamp(1.5rem, 4vw, 4rem) !important;
}

/* Content area - FULL WIDTH */
.mega-content,
.mega-content-pagebuilder,
.mega-menu-content-wrapper {
    width: 100% !important;
    max-width: none !important;
}

/* ============================================
   PAGE BUILDER CONTENT SUPPORT
   ============================================ */

/* Page Builder column groups - full width */
.mega-content-pagebuilder [data-content-type="column-group"],
.mega-menu-content-wrapper [data-content-type="column-group"],
.mega-content-pagebuilder .pagebuilder-column-group,
.mega-menu-content-wrapper .pagebuilder-column-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
}

/* Page Builder columns */
.mega-content-pagebuilder [data-content-type="column"],
.mega-menu-content-wrapper [data-content-type="column"],
.mega-content-pagebuilder .pagebuilder-column,
.mega-menu-content-wrapper .pagebuilder-column {
    flex: 1;
    min-width: 0;
}

/* Custom column widths (Magento 12-column grid) */
.mega-content-pagebuilder [data-content-type="column"][data-width="1/12"] { flex-basis: 8.333% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="2/12"] { flex-basis: 16.666% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="3/12"] { flex-basis: 25% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="4/12"] { flex-basis: 33.333% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="5/12"] { flex-basis: 41.666% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="6/12"] { flex-basis: 50% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="7/12"] { flex-basis: 58.333% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="8/12"] { flex-basis: 66.666% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="9/12"] { flex-basis: 75% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="10/12"] { flex-basis: 83.333% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="11/12"] { flex-basis: 91.666% !important; }
.mega-content-pagebuilder [data-content-type="column"][data-width="12/12"] { flex-basis: 100% !important; }

/* ============================================
   MENU BUILDER MODE
   ============================================ */

.mega-menu-builder,
.mega-builder {
    width: 100%;
}

.mega-builder-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-builder-item {
    position: static; /* Changed from relative - panels position relative to parent */
    list-style: none;
}

.mega-builder-item summary {
    cursor: pointer;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-neutral-900, #000);
    padding: 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    list-style: none;
}

.mega-builder-item summary::-webkit-details-marker {
    display: none;
}

.mega-builder-item summary:hover {
    color: var(--color-neutral-700, #333);
}

/* Builder panel - FULL WIDTH */
.mega-builder-panel {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 100vw;
    z-index: 1000;
    background: var(--color-white, #ffffff);
    border-top: 1px solid var(--color-neutral-200, #e5e5e5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.mega-builder-item:hover .mega-builder-panel,
.mega-builder-item[open] .mega-builder-panel {
    display: block;
}

/* Builder columns - FULL WIDTH */
.mega-builder-columns {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 2.5rem clamp(1.5rem, 4vw, 4rem) !important;
}

.mega-builder-links {
    display: grid;
    gap: 0.75rem;
}

.mega-builder-links a {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-neutral-700, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-builder-links a:hover {
    color: var(--color-neutral-900, #000);
}

/* ============================================
   STICKY HEADER SUPPORT
   ============================================ */

.site-header.sticky-header {
    position: relative;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    z-index: 100;
}

.site-header.sticky-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white, #ffffff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust dropdown position when header is sticky */
.site-header.sticky-header.is-sticky .mega-panel,
.site-header.sticky-header.is-sticky .mega-panel-fullwidth,
.site-header.sticky-header.is-sticky .mega-builder-panel {
    top: 100%;
}

/* Body padding when sticky header is active */
body:has(.site-header.sticky-header.is-sticky) {
    padding-top: 150px;
}

/* ============================================
   ALPINE.JS SUPPORT
   ============================================ */

[x-cloak] {
    display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 64rem) {
    /* Mobile: vertical menu */
    nav.mega-menu ul.mega-menu-list,
    .mega-menu-list,
    .mega-builder-list {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Mobile: static panels */
    .mega-panel,
    .mega-panel-fullwidth,
    .mega-builder-panel {
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border-top: 0 !important;
    }

    .mega-panel-inner,
    .mega-builder-columns {
        padding: 1.5rem 0 !important;
    }

    /* Mobile: full width columns */
    .mega-content-pagebuilder [data-content-type="column"] {
        flex-basis: 100% !important;
    }

    .mega-builder-item {
        width: 100%;
    }

    .mega-builder-item details[open] .mega-builder-panel {
        display: block;
    }

    body:has(.site-header.sticky-header.is-sticky) {
        padding-top: 100px;
    }
}

@media (max-width: 48rem) {
    .mega-content-pagebuilder [data-content-type="column-group"] {
        gap: 1rem;
    }

    body:has(.site-header.sticky-header.is-sticky) {
        padding-top: 80px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .site-header.sticky-header.is-sticky {
        position: relative !important;
        box-shadow: none !important;
    }

    .mega-panel,
    .mega-builder-panel {
        display: none !important;
    }

    body:has(.site-header.sticky-header.is-sticky) {
        padding-top: 0 !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states */
.mega-link:focus-visible,
.mega-builder-item summary:focus-visible {
    outline: 2px solid var(--color-primary, #000);
    outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .mega-panel,
    .mega-builder-panel,
    .mega-link {
        transition: none !important;
    }
}

/* ============================================
   PAGE BUILDER ADMIN VISIBILITY
   ============================================ */

/* Make panels visible in admin/preview mode */
.pagebuilder-stage .mega-panel,
.pagebuilder-preview .mega-panel,
body.adminhtml .mega-panel,
.pagebuilder-stage .mega-builder-panel,
.pagebuilder-preview .mega-builder-panel,
body.adminhtml .mega-builder-panel {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pagebuilder-stage [x-cloak],
.pagebuilder-preview [x-cloak],
body.adminhtml [x-cloak] {
    display: block !important;
}