/* ══════════════════════════════════════════════════════════════
   css/explore-menu.css — header "✦ Explore" mega-menu
   Markup: header.php (#explore-toggle, #explore-menu)
   Behaviour: js/explore-menu.js   Links: explore_data.php
   Also styles the /categories page tiles (.explore-catlist).
   ══════════════════════════════════════════════════════════════ */

/* ── Header trigger ───────────────────────────────────────────── */
.site-header__explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    margin-right: 2px;
    border: 1px solid #ececf0;
    border-radius: 20px;
    background: #fff;
    color: var(--text, #1a1f2e);
    font: 600 14px/1 var(--ff-display, 'Poppins', system-ui, sans-serif);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.site-header__explore-btn:hover { background: var(--bg, #ffe6e8); border-color: #f3d4d5; }
.site-header__explore-btn[aria-expanded="true"] {
    background: var(--bg, #ffe6e8);
    border-color: #f3c3c6;
    color: var(--primary-dark, #b51418);
}
.site-header__explore-btn:focus-visible { outline: 2px solid var(--secondary, #1d8ef0); outline-offset: 2px; }
.site-header__explore-star { color: var(--primary, #e62327); font-size: 13px; }
.site-header__explore-caret { font-size: 10px; color: var(--text-muted, #6b7280); transition: transform .2s ease; }
.site-header__explore-btn[aria-expanded="true"] .site-header__explore-caret { transform: rotate(180deg); color: inherit; }

/* Mobile header: icon-only, same footprint as the other round buttons. */
@media (max-width: 860px) {
    .site-header__explore-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; margin-right: 0; }
    .site-header__explore-label, .site-header__explore-caret { display: none; }
    .site-header__explore-star { font-size: 16px; }
}
@media (max-width: 480px) {
    .site-header__explore-btn { width: 36px; height: 36px; }
}

/* ── Mega-menu shell ──────────────────────────────────────────── */
.explore-menu {
    position: fixed;
    z-index: 1001;                        /* above the sticky header (1000), below the AI panel */
    top: var(--explore-top, 92px);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;                 /* only the card itself catches clicks */
    box-sizing: border-box;
}
.explore-menu[hidden] { display: none; }
.explore-menu *, .explore-menu *::before, .explore-menu *::after { box-sizing: border-box; }

.explore-menu__panel {
    pointer-events: auto;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - var(--explore-top, 92px) - 16px);
    max-height: calc(100dvh - var(--explore-top, 92px) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 24px 30px 20px;
    background: var(--surface, #fff);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
    color: var(--text, #1a1f2e);
    font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.explore-menu.is-open .explore-menu__panel { opacity: 1; transform: none; }

/* ── Title ────────────────────────────────────────────────────── */
.explore-menu__header { margin-bottom: 6px; }
.explore-menu__title {
    display: flex; align-items: center; gap: 10px;
    font: 800 22px/1.1 var(--ff-display, 'Poppins', sans-serif);
    letter-spacing: .06em;
    color: var(--text, #1a1f2e);
}
.explore-menu__title span:first-child { color: var(--primary, #e62327); font-size: 18px; }
.explore-menu__subtitle { margin: 8px 0 0; font-size: 14px; color: var(--text-muted, #6b7280); }

/* ── Sections ─────────────────────────────────────────────────── */
.explore-menu__section { margin-top: 18px; }
.explore-menu__section-title {
    margin: 0 0 12px;
    font: 700 12px/1 var(--ff-body, 'Inter', sans-serif);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a8f99;
}

.explore-menu a { text-decoration: none; }
.explore-menu a:focus-visible { outline: 2px solid var(--secondary, #1d8ef0); outline-offset: 2px; }

/* Genre cards — 3 columns */
.explore-menu__genres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.explore-genre {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px;
    padding: 7px 14px 7px 8px;
    border: 1px solid #f0f1f4;
    border-radius: 14px;
    background: #f8f9fb;
    color: var(--text, #1a1f2e);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.explore-genre:hover {
    background: #fff5f6;
    border-color: #ffd2d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 35, 39, .07);
    color: var(--text, #1a1f2e);
}
.explore-genre__icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    font-size: 17px; line-height: 1;
}
.explore-genre__label { font: 600 14px/1.2 var(--ff-body, 'Inter', sans-serif); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mood pills — larger, rounded */
.explore-menu__moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.explore-mood {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid #f3d4d5;
    border-radius: 999px;
    background: #fff;
    color: var(--text, #1a1f2e);
    font: 600 14px/1.2 var(--ff-display, 'Poppins', sans-serif);
    text-align: center;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.explore-mood:hover { background: var(--bg, #ffe6e8); border-color: #f1b8bb; transform: translateY(-1px); color: var(--text, #1a1f2e); }
.explore-mood__icon { font-size: 18px; line-height: 1; }

/* Discover actions — tinted tiles so they read as actions, not genres */
.explore-menu__discover { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.explore-discover {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    font: 700 14px/1.2 var(--ff-display, 'Poppins', sans-serif);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.explore-discover:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
.explore-discover__icon { font-size: 18px; line-height: 1; }
.explore-discover--hot    { background: #fff3ec; color: #b4430e; }
.explore-discover--new    { background: #effaf2; color: #15703a; }
.explore-discover--top    { background: #fff8e6; color: #9a5b00; }
.explore-discover--random { background: #eef5ff; color: #1b4fc2; }
.explore-discover--hot:hover    { border-color: #ffd3bd; color: #b4430e; }
.explore-discover--new:hover    { border-color: #bfe9cb; color: #15703a; }
.explore-discover--top:hover    { border-color: #ffe29a; color: #9a5b00; }
.explore-discover--random:hover { border-color: #c5dbff; color: #1b4fc2; }

/* Footer CTA — sticks to the bottom of the card, so on short screens where
   the menu scrolls, "View All Categories" is still visible without scrolling.
   Negative margins let its white background span the card's padding. */
.explore-menu__footer {
    position: sticky;
    bottom: -20px;
    z-index: 1;
    display: flex; justify-content: center;
    margin: 18px -30px -20px;
    padding: 14px 30px 20px;
    background: var(--surface, #fff);
    border-top: 1px solid #f1f2f4;
}
.explore-all {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--primary, #e62327);
    color: #fff !important;
    font: 700 14px/1 var(--ff-display, 'Poppins', sans-serif);
    box-shadow: 0 6px 16px rgba(230, 35, 39, .25);
    transition: background .18s ease, box-shadow .18s ease;
}
.explore-all:hover { background: var(--primary-dark, #b51418); }
.explore-all i { font-size: 12px; transition: transform .18s ease; }
.explore-all:hover i { transform: translateX(3px); }

/* ── Tablet ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .explore-menu__panel { padding: 22px 22px 20px; }
    .explore-menu__footer { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
    .explore-mood { padding: 10px 12px; font-size: 13.5px; }
}
/* The mood labels need ~190px each; below that switch to 2 columns. */
@media (max-width: 700px) {
    .explore-menu__moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explore-menu__discover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Phones: scrollable panel under the header, 2-column grid ─── */
@media (max-width: 640px) {
    .explore-menu { padding: 0 8px; }
    .explore-menu__panel {
        max-height: calc(100vh - var(--explore-top, 64px) - 12px);
        max-height: calc(100dvh - var(--explore-top, 64px) - 12px);
        padding: 18px 16px 16px;
        border-radius: 18px;
    }
    .explore-menu__title { font-size: 19px; }
    .explore-menu__subtitle { font-size: 13px; margin-top: 6px; }
    .explore-menu__section { margin-top: 18px; }
    .explore-menu__genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .explore-genre { min-height: 48px; padding: 8px 10px 8px 8px; gap: 10px; }
    .explore-genre__icon { width: 30px; height: 30px; font-size: 16px; }
    .explore-menu__moods, .explore-menu__discover { gap: 8px; }
    .explore-mood { justify-content: flex-start; border-radius: 14px; padding: 10px 12px; font-size: 13.5px; text-align: left; }
    .explore-discover { justify-content: flex-start; padding: 10px 12px; font-size: 13.5px; }
    .explore-menu__footer { bottom: -16px; margin: 18px -16px -16px; padding: 12px 16px 16px; }
    .explore-all { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
    .explore-genre__label, .explore-mood__label, .explore-discover__label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .explore-menu__panel, .explore-genre, .explore-mood, .explore-discover, .explore-all i,
    .site-header__explore-caret { transition: none !important; }
    .explore-menu__panel { transform: none; }
}

/* ── /categories page tiles ───────────────────────────────────── */
.explore-catlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
.explore-catlist__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #f0e3e4;
    border-radius: 16px;
    background: var(--surface, #fff);
    color: var(--text, #1a1f2e);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(180, 30, 35, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.explore-catlist__item:hover { transform: translateY(-2px); border-color: #ffd2d4; box-shadow: 0 8px 20px rgba(180, 30, 35, .10); color: var(--text, #1a1f2e); }
.explore-catlist__icon {
    grid-row: span 2;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #fff5f6;
    font-size: 22px;
}
.explore-catlist__name { font: 700 15px/1.2 var(--ff-display, 'Poppins', sans-serif); }
.explore-catlist__count { font-size: 12.5px; color: var(--text-muted, #6b7280); }
@media (max-width: 480px) {
    .explore-catlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .explore-catlist__item { padding: 12px; column-gap: 10px; }
    .explore-catlist__icon { width: 38px; height: 38px; font-size: 19px; }
    .explore-catlist__name { font-size: 14px; }
}