/*
 * Courses mega menu.
 *
 * Geometry and colour read off the production menu (the nested-tabs template,
 * post 198779) on link-resources.com.au at 1440:
 *
 *   panel   708 wide under the Courses item: 286 rail + 422 pane
 *   tabs    286x67, 15.4px/700 white, 32px icon, 16px gap,
 *           #9C9C9C at rest and #BF2428 active - both opaque
 *   pane    #BF2428, padding 25px 16px 16px
 *   links   14px/500/14px white, two columns, 18px apart
 */

.lrc-menu {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
}

/* ---- the rail ---- */

.lrc-menu__tabs {
    display: flex;
    flex-direction: column;
}

.lrc-menu__tab {
    align-items: center;
    background: #9c9c9c;
    border: 0;
    color: var(--lr-white, #fff);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 15.4px;
    font-weight: 700;
    gap: 16px;
    height: 67px;
    padding: 17.325px 15.4px;
    text-align: left;
    transition: background 0.15s ease;
    width: 286px;
}

.lrc-menu__tab + .lrc-menu__tab { margin-top: -1px; }

.lrc-menu__tab:hover { background: #8b8b8b; }

.lrc-menu__tab[aria-selected="true"] { background: var(--lr-red, #bf2428); }

.lrc-menu__icon {
    filter: brightness(0) invert(1);
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

.lrc-menu__label { flex: 1 1 auto; }

/* Production shows no per-category count. Genuinely useful, so it stays in
 * the markup: delete this rule to turn it back on. */
.lrc-menu__count { display: none; }

/* ---- the panes ---- */

.lrc-menu__panels {
    background: var(--lr-red, #bf2428);
    padding: 25px 16px 16px;
}

.lrc-menu__panel[hidden] { display: none; }

.lrc-menu__list {
    columns: 2;
    column-gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0 20px;
}

.lrc-menu__item {
    break-inside: avoid;
    margin: 0 0 18px;
}

.lrc-menu__item a {
    color: var(--lr-white, #fff);
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    text-decoration: none;
}

.lrc-menu__item a:hover { text-decoration: underline; }

.lrc-menu__item--empty {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.4;
}

/* The "All X Courses" footer link, as production carries per category. */
.lrc-menu__all {
    color: var(--lr-white, #fff);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 4px 20px;
    text-decoration: none;
}

.lrc-menu__all span { margin-right: 6px; }

.lrc-menu__all:hover { text-decoration: underline; }

/* The nav (and with it this panel) is gone below 1025; this collapse only
   serves the drawer fallback if the block is ever placed elsewhere. */
@media (max-width: 1024px) {
    .lrc-menu { grid-template-columns: 1fr; }

    .lrc-menu__tabs { flex-direction: row; flex-wrap: wrap; }
    .lrc-menu__tab { height: 52px; padding: 10px 14px; width: auto; }
    .lrc-menu__list { columns: 1; padding-left: 0; }
    .lrc-menu__panels { padding: 20px 16px; }
    .lrc-menu__item a { line-height: 20px; }
}