/* ============================================================
   Reflective — the nav's Learn megamenu and the Learn spot
   illustrations (design handoff §4, §6, §14). One sheet for every page
   with the marketing nav, beside nav-menu.css: the static pages load it
   from <!-- marketing:nav-assets -->, Learn through resources/css/learn.css
   and the Public Library through resources/css/library.css. This sheet:
   tokens, spots and the panel's contents; nav-mega-layout.css: where the
   panel sits (desktop dropdown, scrim, phone accordion).

   Colors are the site tokens (site.css; library/tokens.css mirrors them).
   The only literals are the token definitions in :root below.
   Behavior: marketing-site/js/nav-menu.js. Without JS the panel opens on
   hover and keyboard focus and shows its links without counts.
   ============================================================ */

:root {
    --spot-ink: var(--text);
    --spot-paper: var(--surface);
    --mega-scrim: rgba(28, 25, 23, 0.28);
    --mega-shadow: 0 24px 48px rgba(28, 25, 23, 0.12);
}

/* ---------- spots (x-learn-spot) ---------- */
.ln-spot-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ln-spot {
    display: block;
    flex-shrink: 0;
    --spot-wash: var(--hue-amber);
    --spot-alpha: 0.58;
}

/* Hue tokens are deeper than the design's washes, so they sit lighter;
   the two pastel tokens keep the design's opacity. */
.ln-spot[data-kind='blog'] {
    --spot-wash: var(--hue-rose);
}

.ln-spot[data-kind='help'] {
    --spot-wash: var(--hue-teal);
}

.ln-spot[data-kind='course'] {
    --spot-wash: var(--accent-300);
    --spot-alpha: 1;
}

.ln-spot[data-kind='glossary'] {
    --spot-wash: var(--primary-300);
    --spot-alpha: 1;
}

.ln-spot-wash path {
    fill: var(--spot-wash);
    opacity: calc(0.55 * var(--spot-alpha));
}

.ln-spot-wash path + path {
    opacity: calc(0.45 * var(--spot-alpha));
}

.ln-spot-ink {
    fill: none;
    stroke: var(--spot-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ln-spot-ink .ln-spot-paper {
    fill: var(--spot-paper);
}

.ln-spot-ink .ln-spot-dot {
    fill: var(--spot-ink);
}

.ln-spot-ink .ln-spot-thick {
    stroke-width: 3;
}

.ln-spot-ink .ln-spot-text {
    fill: var(--spot-ink);
    stroke: none;
    font-family: var(--font-serif);
    font-size: 27px;
    font-weight: 600;
}

.ln-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ln-tag {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-600);
}

/* ---------- the panel's contents (every width) ---------- */
.ln-mega-sections,
.ln-mega-links,
.ln-mega-pop ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links .ln-mega a {
    font-weight: 400;
}

.nav-links .ln-mega-h {
    display: block;
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.nav-links a.ln-mega-h:hover {
    color: var(--primary);
}

.ln-mega-sections {
    display: grid;
    gap: 2px;
}

.nav-links .ln-mega-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-inline: -12px;
    padding: 7px 12px;
    border-radius: var(--r-lg);
    color: var(--text-3);
}

.nav-links .ln-mega-item:hover {
    background: var(--bg-2);
    color: var(--text-3);
}

.ln-mega-item b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.ln-mega-item span span {
    display: block;
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.45;
}

.ln-mega-feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--frame-cream);
    border-radius: var(--r-xl);
    background: var(--surface-2);
}

/* The cognitive triangle, whole: never cropped or tinted (design §16). */
.ln-mega-feature-img {
    height: 150px;
    margin: 12px 12px 0;
    background: url('../assets/learn/cognitive-triangle.jpg') center / contain
        no-repeat;
}

.ln-mega-feature-body {
    padding: 12px 16px 16px;
}

.ln-mega-feature-body p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-2);
}

.ln-mega-feature-body .ln-mega-feature-title {
    margin: 2px 0;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

.nav-links .ln-mega-feature .btn-primary {
    color: var(--surface);
    font-weight: 600;
}