/* Learn page (learn-nvc.php): Nashville Number System guide on the dark app theme.
   Builds on css/story.css (.nvc-story-section, .nvc-story-support, .nvc-story-btn);
   only what the story page does not have lives here. Degree colors are the same
   values css/main.css uses for html.nvc-chord-colors .nvc-deg-N. */

#content.container .nvc-learn,
#learn-page.nvc-learn {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: 'Outfit', system-ui, sans-serif;
}

.nvc-learn-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.nvc-learn-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0.5rem 0 0.75rem;
}

.nvc-learn-hero p,
.nvc-learn .nvc-story-section p.nvc-learn-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cfcfcf;
    max-width: 44rem;
    margin: 0 auto 1rem;
    text-align: center;
}

.nvc-learn .nvc-story-section h3,
.nvc-learn h4 {
    text-align: center;
}

.nvc-learn .nvc-story-section h3 {
    font-size: 1.4rem;
}

.nvc-learn h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.75rem;
}

.nvc-learn-accent {
    color: #f88;
    font-weight: 600;
}

/* Boxes: same surface as .nvc-story-support */
.nvc-learn-box {
    box-sizing: border-box;
    margin: 1.5rem 0;
    padding: 1.25rem 1.35rem;
    border: 1px solid #444;
    border-radius: 6px;
    background: linear-gradient(165deg, #1a1a1a 0%, #141414 100%);
}

.nvc-learn-box p {
    font-size: 1rem;
    line-height: 1.65;
    color: #e8e8e8;
    margin: 0 0 0.75rem;
    max-width: none;
    text-align: left;
}

.nvc-learn-box p:last-child {
    margin-bottom: 0;
}

.nvc-learn-box .nvc-learn-box {
    background: #0c0c0c;
    border-color: #333;
}

.nvc-learn-note {
    border-left: 3px solid #f88;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.nvc-learn-hint {
    color: #a8a8a8 !important;
    font-size: 0.9rem !important;
}

.nvc-learn-center {
    text-align: center !important;
}

/* Degree colors (css/main.css, html.nvc-chord-colors .nvc-deg-N) */
.nvc-learn-deg-1 { color: #FF5252; border-color: #FF5252; }
.nvc-learn-deg-2 { color: #FFAB40; border-color: #FFAB40; }
.nvc-learn-deg-3 { color: #FFD740; border-color: #FFD740; }
.nvc-learn-deg-4 { color: #69F0AE; border-color: #69F0AE; }
.nvc-learn-deg-5 { color: #18FFFF; border-color: #18FFFF; }
.nvc-learn-deg-6 { color: #E040FB; border-color: #E040FB; }
.nvc-learn-deg-7 { color: #7C4DFF; border-color: #7C4DFF; }

/* Step 2: the seven chords */
.nvc-learn-degrees {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem 0.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.nvc-learn-degrees p {
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.nvc-learn-degrees p.nvc-learn-hint {
    font-weight: 400;
}

.nvc-learn-circle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    border: 2px solid;
    background: #0c0c0c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.35rem;
}

/* "1 = C" key maps */
.nvc-learn-keymap {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    text-align: center;
}

.nvc-learn-keymap p {
    margin: 0;
    text-align: center;
    font-size: 1.05rem;
    color: #e8e8e8;
    white-space: nowrap;
}

.nvc-learn-keymap span {
    font-weight: 700;
}

/* Song parts */
.nvc-learn-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.nvc-learn-part {
    box-sizing: border-box;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #333;
    border-left: 3px solid #f88;
    border-radius: 6px;
    background: #0c0c0c;
}

.nvc-learn-part-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.nvc-learn-part-head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.nvc-learn-badge {
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: 0.07em;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.nvc-learn-part p,
.nvc-learn-compare p {
    margin: 0 0 0.15rem;
    overflow-wrap: anywhere;
}

/* Three ways to write a line: numbers, Roman numerals, chord names */
.nvc-learn-num {
    font-size: 1.1rem;
    color: #fff !important;
}

.nvc-learn-roman {
    font-size: 0.95rem !important;
    color: #a8a8a8 !important;
}

.nvc-learn-names {
    font-size: 0.95rem !important;
    color: #f88 !important;
}

.nvc-learn-action {
    text-align: center;
    margin: 1rem 0 0.25rem;
}

/* Key of C / Key of G side by side */
.nvc-learn-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.nvc-learn-compare .nvc-learn-box {
    margin: 0;
}

.nvc-learn-label {
    font-size: 0.85rem !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #a8a8a8 !important;
    margin-top: 0.75rem !important;
}

.nvc-learn code {
    font-family: monospace;
    font-size: 1em;
    color: #f88;
    background: #262626;
    padding: 1px 5px;
    border-radius: 4px;
}

.nvc-learn-outro {
    text-align: center;
    color: #a8a8a8;
    margin: 2rem auto 0;
    max-width: 44rem;
}

@media (max-width: 767px) {
    .nvc-learn-degrees {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .nvc-learn-keymap {
        grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    }

    .nvc-learn-parts,
    .nvc-learn-compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 400px) {
    .nvc-learn-degrees {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nvc-learn-box {
        padding: 1rem 0.9rem;
    }
}