/**
 * Custom_MegaMenu – supplemental CSS
 *
 * This file is injected into every page via default_head_blocks.xml.
 * There is no need to @import it manually in your theme.
 *
 * All declarations are scoped with .mega-menu-* prefixes so they
 * never conflict with the surrounding Hyva theme CSS.
 */

/* ============================================================
   Mega dropdown panel — full-width banner container
   ============================================================ */

/**
 * Banner column: constrain raw HTML/image content to prevent layout break.
 */
.mega-menu-banner img {
    max-width: 100%;
    height: auto;
    display: block;
}

.mega-menu-banner a {
    display: inline-block;
}

/* ============================================================
   Mega panel wrapper
   ============================================================ */

/**
 * The panel is absolutely positioned from the <li> but visually
 * spans the full nav bar width. positionPanel() in Alpine handles
 * the left offset + width.
 * Ensure overflow is visible so the drop shadow is not clipped.
 */
/**
 * Panel pointer events are handled by Alpine's x-show
 * (x-show adds display:none when hidden, which naturally blocks events).
 */
.mega-menu-panel {
    pointer-events: auto;
    min-width: 760px;
}

/**
 * Panel inner card – shadow and border-radius.
 */
.mega-menu-panel__inner {
    box-shadow:
        0 10px 20px -5px rgb(0 0 0 / 0.10),
        0 4px  8px -4px rgb(0 0 0 / 0.06);
}

/* ============================================================
   Menu icon SVG sizing normaliser
   ============================================================ */

/**
 * Ensure inline SVGs placed inside .mega-menu-icon inherit the
 * wrapper dimensions set in the template (applies to ALL levels).
 */
.mega-menu-icon svg,
.mega-menu-icon img {
    width:        100%;
    height:       100%;
    flex-shrink:  0;
    display:      inline-block;
}

/* ============================================================
   Category image cards (desktop dropdown)
   ============================================================ */

/**
 * Image card: smooth hover scale on the thumbnail.
 * The group-hover:scale-105 Tailwind class handles the transform;
 * we just guarantee the overflow clip doesn't clip the shadow.
 */
.mega-menu-panel .mega-img-card {
    overflow: hidden;
}

/**
 * Ensure images within the banner column are fully contained.
 */
.mega-menu-banner .mega-img-card img,
.mega-menu-panel ul img {
    max-width:  100%;
    height:     auto;
}

/* ============================================================
   Mobile menu image thumbnails
   ============================================================ */

/**
 * Round the thumbnail corners and preserve aspect ratio.
 */
.lg\:hidden img[class*="rounded"] {
    object-fit: cover;
}