/**
 * Mega Menu — front-end styles
 *
 * The mega menu is injected as a <div class="tc-mega-menu"> inside the target
 * top-level <li class="tc-mega-menu-parent">, as a sibling of the theme's own
 * .sub-menu (which we hide). It opens on hover, keyboard focus, or when the
 * front-end script adds .tc-mega-open (tap / click on touch devices).
 *
 * Layout mirrors a classic vendor mega menu: a flat list of groups (header +
 * links) flowing into N newspaper-style columns, so a tall group and a short
 * group can share a column.
 *
 * The accent colour (--tc-mm-accent) is injected inline from the admin setting.
 *
 * @package TrainingCatalog
 * @since 3.2
 */

/* Anchor the panel to the parent item. */
.tc-mega-menu-parent {
    position: relative;
}

/* Hide the theme's default dropdown for this item — the mega menu replaces it. */
.tc-mega-menu-parent > .sub-menu {
    display: none !important;
}

.tc-mega-menu {
    --tc-mm-accent: #e8600c;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    width: calc(var(--tc-mm-cols, 1) * 300px + 24px);
    max-width: min(96vw, 1320px);
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.28), 0 6px 16px rgba(15, 23, 42, 0.08);

    /* Hidden by default; revealed on hover/focus/open. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

/* Reveal states. */
.tc-mega-menu-parent:hover > .tc-mega-menu,
.tc-mega-menu-parent:focus-within > .tc-mega-menu,
.tc-mega-menu-parent.tc-mega-open > .tc-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Keep the panel from spilling off the right edge for items near the end. */
.tc-mega-menu-parent:last-child > .tc-mega-menu {
    left: auto;
    right: 0;
}

/* One group per column: groups sit side by side in a grid, wrapping to a new
   row once the column count is reached. */
.tc-mega-menu__inner {
    display: grid;
    grid-template-columns: repeat(var(--tc-mm-cols, 1), minmax(0, 1fr));
    gap: 8px;
}

.tc-mega-menu__group {
    min-width: 0;
    padding: 4px;
}

/* Header pill — light rounded box with bold, spaced caps. */
.tc-mega-menu__header {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f2b46;
    background: #f3f4f6;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 4px;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

a.tc-mega-menu__header:hover,
a.tc-mega-menu__header:focus {
    color: var(--tc-mm-accent);
    background: #eef0f3;
}

.tc-mega-menu__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-mega-menu__item {
    margin: 0;
    padding: 0;
}

/* Indented link rows. */
.tc-mega-menu__link {
    display: block;
    padding: 8px 12px 8px 20px;
    border-radius: 8px;
    text-decoration: none;
    color: #374151;
    line-height: 1.35;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tc-mega-menu__link:hover,
.tc-mega-menu__link:focus {
    color: var(--tc-mm-accent);
    background: #f9fafb;
}

/* Current page — highlighted like the reference design's active item. */
.tc-mega-menu__link.is-active .tc-mega-menu__link-label {
    color: var(--tc-mm-accent);
}

.tc-mega-menu__link-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;

    /* Keep long labels on one line — truncate with an ellipsis (…) instead of
       spilling out of the column. Full text is still available via the link's
       title tooltip and by wrapping on small screens (see media query below). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-mega-menu__link-desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Small screens: render inline instead of an absolute dropdown so it works
   inside a collapsed / hamburger menu. ── */
@media (max-width: 782px) {
    .tc-mega-menu {
        position: static;
        width: auto;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 12px;
        transition: none;
        display: none;
    }

    .tc-mega-menu-parent.tc-mega-open > .tc-mega-menu {
        display: block;
    }

    .tc-mega-menu__inner {
        grid-template-columns: 1fr;
    }

    /* Plenty of vertical room on mobile — show the full label instead of dots. */
    .tc-mega-menu__link-label {
        white-space: normal;
    }
}