/* =====================================================================
   JJ Textile — Mega Menus (SHOP / DISCOVER / TRADE)
   Text column(s) on the left + image tiles on the right, matching the
   client's mockup for all three top nav items. SHOP gets 4 columns and
   a 2x2 tile grid; DISCOVER and TRADE get a single column and their
   tiles laid out in one row instead.
   Uses Flatsome's own .nav-dropdown-full flyout mechanics — no custom
   JS needed, it opens on hover the same way native Flatsome dropdowns do.
   ===================================================================== */

/* Hide WordPress's own native dropdown on any mega-menu item — some of
   these already have real sub-items configured, so without this both
   the native list and our custom mega menu would show stacked together. */
.jjt-mega-shop > ul.sub-menu,
.jjt-mega-discover > ul.sub-menu,
.jjt-mega-trade > ul.sub-menu {
    display: none !important;
}

/* Flatsome's own core CSS (flatsome.css) already has a rule for this
   exact case — "li.has-dropdown:hover > .nav-dropdown-full" — that caps
   it at "max-width: 1150px !important" (its own idea of "full width",
   boxed to the theme's normal container width, not true edge-to-edge)
   and centres it with "left: 50% !important". Matching that selector
   exactly (as a previous version of this rule did) turned out not to be
   enough on its own: with identical specificity AND both sides using
   !important, the tie-break is simply "whichever stylesheet is linked
   later in the page wins" — and on this site flatsome.css happens to be
   enqueued/output AFTER this child-theme file, so Flatsome's rule was
   still winning. Prefixing with "#header" pushes our selector's
   specificity clearly above Flatsome's, so it wins regardless of
   stylesheet load order. */
/* --jjt-mega-menu-top is kept in sync with the header's real current
   bottom edge by jjt-mega-menu.js. Flatsome's own hover JS also writes an
   inline "inset" style (including top) onto this same element every time
   it opens, based on the nav item's own position rather than the header —
   without a top declared here, that inline value was winning by default
   (nothing to out-rank it) and landing the dropdown partway up inside the
   header, covering the nav. A plain !important top always beats a
   non-important inline style regardless of source order, so simply
   declaring it here is enough — no need to fight Flatsome's JS write for
   write. The 140px fallback covers the brief instant before the JS above
   has run (or if JS is disabled) and matches this header's normal
   (non-scrolled) height. */
/* Flatsome's own hover JS writes an inline "inset" style onto this element
   every time it opens (top/left/right AND bottom — see the comment above
   about "top" already fighting that same inline write). The bottom value
   it writes is effectively 0, i.e. "stretch all the way to the bottom of
   the viewport" — which was making the dropdown's white background cover
   almost the entire page instead of just wrapping its own content, hiding
   everything behind it. "bottom: auto" cancels that stretch and lets the
   box size itself from its content (height: auto does the same for the
   "height" Flatsome's JS can also set directly instead of inset), so only
   ~60-70% of the viewport is covered and the page behind is visible below
   it, per client request. */
#header li.has-dropdown:hover > .nav-dropdown-full,
#header li.current-dropdown > .nav-dropdown-full {
    position: fixed !important;
    top: var(--jjt-mega-menu-top, 140px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

.jjt-mega-menu {
    display: flex;
    /* nowrap is deliberate: at normal desktop widths (even a fairly
       standard ~1300px laptop screen) the 4 text columns plus the tile
       grid/row were together WIDER than the space flex-wrap had to work
       with, so the browser was wrapping the tiles onto their own line
       below the columns instead of keeping everything in one row. Sizes
       below have been tightened specifically so this row fits without
       wrapping down to a ~1180px-wide dropdown; the @media block further
       down switches to a stacked column layout on tablet/mobile anyway. */
    flex-wrap: nowrap;
    align-items: stretch;
    /* space-between so the text columns sit flush against the left edge
       and the image tiles sit flush against the right edge. This only
       actually reaches the true edges once the box itself is allowed to
       fill the full-width dropdown — the previous "max-width: 1500px;
       margin: 0 auto" capped and centred the whole flex box within the
       wider dropdown, so even though space-between was correctly pushing
       content to ITS edges, those edges themselves were sitting in the
       middle of the screen with equal empty margins either side, which
       still visually read as "everything is centred". Removing the cap
       (max-width: none) lets the box reach the real left/right edges. */
    justify-content: space-between;
    gap: 1.75rem;
    /* Left padding trimmed well below the right side (was 3vw both sides)
       so the text column(s) sit noticeably closer to the true left edge —
       most visible on DISCOVER/TRADE, which only have one column and
       otherwise read as having a lot of empty space to their left. Right
       padding is left larger so the image tiles still get a bit of
       breathing room from the very edge. */
    padding: 2.5rem 3vw 2.5rem 1.25vw;
    background: #fff;
    text-align: left;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

/* Flatsome injects its own hidden "nav-top-link" <a> (a touch-device
   fallback link to the parent page, width:0/invisible) as the very FIRST
   child inside this dropdown, ahead of our own column(s)/tiles markup.
   With "justify-content: space-between" that invisible link still counts
   as a flex item and still gets a full share of the distributed space —
   on DISCOVER/TRADE (only 1 real text column + 1 tiles block = 3 items
   total with it) that pushed the text column several hundred px away
   from the true left edge, which is what "the text isn't far enough
   left" turned out to be. Taking it out of flex flow entirely (it's
   already invisible, so this doesn't change how it looks or behaves)
   means only our real column(s) and tiles are left to space-between. */
.jjt-mega-menu > .nav-top-link {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.jjt-mega-menu__col {
    flex: 0 0 auto;
    min-width: 110px;
}

.jjt-mega-menu__col h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
}

.jjt-mega-menu__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jjt-mega-menu__col li {
    /* Bumped from 0.7rem for more breathing room between each link,
       per client request. */
    margin: 0 0 1.15rem;
}

.jjt-mega-menu__col a {
    color: #333;
    font-size: 0.98rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.jjt-mega-menu__col a:hover {
    color: #111;
}

/* ---- Image tiles ----
   flex: 0 0 auto (not 1 1 auto) — this container is capped by max-width
   below anyway, and letting it flex-grow was pulling it to fill ALL the
   leftover space in the now-100vw-wide dropdown, leaving a huge empty
   gap between the text columns and the images. Fixed width means it
   just sits right after the columns with the normal row gap, keeping
   the columns visually to the left of the images as intended. */
.jjt-mega-menu__tiles {
    flex: 0 0 auto;
    min-width: 320px;
}

/* DISCOVER / TRADE — tiles side by side in a single tall row. Explicit
   width (not just max-width) since this is a non-growing (flex: 0 0
   auto) flex item — without a real width, a flex container's "auto"
   flex-basis can end up sized by its own min-content instead of filling
   out to the intended size. Sized larger than the original 620px/280px
   per the client's request for bigger image areas on Discover and Trade
   specifically, but pulled back from an earlier 960px/360px — that,
   combined with the single text column next to it, was part of what was
   overflowing the row and forcing a wrap onto a second line. */
.jjt-mega-menu__tiles--row {
    display: flex;
    gap: 0.85rem;
    height: 100%;
    width: 860px;
}

.jjt-mega-menu__tiles--row .jjt-mega-menu__tile {
    flex: 1 1 0;
    min-height: 320px;
}

/* SHOP — back to the 2x2 grid, matching the client's original mockup as
   closely as possible (SHOP briefly used the single-row layout too, but
   that didn't match the supplied design). Width widened (380px -> 540px)
   and each tile's min-height cut further (112px -> 82px) per client
   request for wider, shallower images — a noticeably more landscape/banner
   shape than the previous near-square tiles.

   align-self: flex-start is the fix that actually makes "shallower" take
   effect. .jjt-mega-menu uses "align-items: stretch" (needed so the tiles
   fill the column height on DISCOVER/TRADE), which by default stretches
   every flex child — including this grid — to match the tallest text
   column. SHOP's "Explore" column has 8 links, so without this the grid
   was being stretched to ~415px-tall rows regardless of min-height,
   which is why the earlier 112px->82px change had no visible effect.
   Opting this one item out of stretch lets it size itself from its own
   content (2 rows x 82px + gap) instead of matching the column height. */
.jjt-mega-menu__tiles--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    width: 540px;
    max-width: 540px;
    align-self: flex-start;
}

.jjt-mega-menu__tiles--grid .jjt-mega-menu__tile {
    /* Doubled from 82px — with align-self: flex-start above now actually
       controlling the rendered depth (rather than being overridden by
       stretch), 82px turned out too shallow once seen live. */
    min-height: 164px;
}

.jjt-mega-menu__tile {
    position: relative;
    display: block;
    overflow: hidden;
}

.jjt-mega-menu__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
}

.jjt-mega-menu__tile:hover img {
    transform: scale(1.05);
}

/* Plain top-left label (no bottom gradient bar) — matches the mockup,
   which just sets white text with a soft shadow straight over the photo. */
.jjt-mega-menu__tile span {
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    right: 0.9rem;
    z-index: 1;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .jjt-mega-menu {
        flex-direction: column;
        gap: 2rem;
        padding: 1.5rem;
        max-height: 80vh;
        overflow-y: auto;
    }
    .jjt-mega-menu__tiles--grid,
    .jjt-mega-menu__tiles--row {
        max-width: 100%;
    }
    .jjt-mega-menu__tiles--row {
        flex-wrap: wrap;
    }
    .jjt-mega-menu__tiles--row .jjt-mega-menu__tile {
        flex: 1 1 45%;
        min-height: 180px;
    }
}