/**
 * TeachDemy — Round 15 ("Edits (2)" review, agent 15-e)
 * Page-scoped styles for the DISCIPLINES + UPCOMING pages.
 *
 * Enqueued by functions.php as handle 'td-disciplines-upcoming'
 * (dependency: teachdemy-static-pages) whenever page-disciplines.php /
 * page-upcoming.php is used OR the page slug is disciplines / categories /
 * upcoming / upcoming-courses. Because it loads AFTER
 * teachdemy-static-pages.css, equally- or higher-specificity selectors
 * here safely override that file — teachdemy-static-pages.css itself is
 * owned by another agent and is never edited.
 *
 * Contents:
 *   1. Banner legibility — the "Not sure where to start?" copy (and the
 *      upcoming "Want to Become an Instructor" band) is forced WHITE on
 *      the navy/teal gradient (client: the text was unreadable).
 *   2. Disciplines hero stat numbers stay white + auto-counted
 *      (verification/reinforcement of the previously-fixed item).
 *   3. Upcoming: the shared notify/waitlist panel styled like the
 *      footer newsletter subscribe (clean white card, green focus
 *      rings), linked instructor names, and the pre-order button copy.
 *
 * Brand tokens only: navy #062b2b / #07504b, green #16a673 / #27c58b,
 * gold #f7bd31 accents, light #f4fbf8, card white, dark card #0d2222.
 * No blue / indigo. Breakpoints 1100 / 640 (+ existing 1050/650 from
 * teachdemy-home.css keep working for the shared grid).
 */

/* ==========================================================
 * 1. Banner legibility (client "Edits (2)": "'not sure where to
 *    start' text must be WHITE so it's visible")
 * ========================================================== */
.td-page .section .container .banner,
.td-page .td-disciplines-banner,
.td-page .banner{
        background:linear-gradient(135deg,#062b2b,#087d72);
        color:#fff;
}
.td-page .section .container .banner h2,
.td-page .td-disciplines-banner h2,
.td-page .banner h2{
        color:#fff !important;
}
.td-page .section .container .banner p,
.td-page .td-disciplines-banner p,
.td-page .banner p{
        color:#d8eee7 !important;
}
.td-page .section .container .banner .btn,
.td-page .td-disciplines-banner .btn,
.td-page .banner .btn{
        position:relative;
        z-index:2;
}
html[data-theme="dark"] .td-page .section .container .banner,
html[data-theme="dark"] .td-page .td-disciplines-banner,
html[data-theme="dark"] .td-page .banner{
        background:linear-gradient(135deg,#0a1f1f,#0d3a30) !important;
}

/* ==========================================================
 * 2. Disciplines hero — stat numbers stay WHITE and auto-count
 *    (data-count animation lives in teachdemy-enhancements.js).
 *    Reinforced here so nothing can flip them dark on this page.
 * ========================================================== */
.td-page .td-cat-hero__stat b{
        color:#fff;
}
.td-page .td-cat-quick__count{
        color:#9ed8c4;
}

/* ==========================================================
 * 3. Upcoming page — notify / waitlist subscribe panel
 * ========================================================== */

/* Instructor name on each course card: a real link now (Round 15). */
.td-page .td-upcoming-instructor-name{
        font-weight:800;
        color:var(--ink);
        text-decoration:none;
        border-bottom:1px dotted #9fd8bd;
        transition:color .15s,border-color .15s;
}
.td-page a.td-upcoming-instructor-name:hover{
        color:#0d7a57;
        border-bottom-color:#16a673;
}
html[data-theme="dark"] .td-page .td-upcoming-instructor-name{
        color:#e8f0ee;
}
html[data-theme="dark"] .td-page a.td-upcoming-instructor-name:hover{
        color:#9adbc2;
}

/* The pre-order button carries the discount in its label now — keep the
   two action buttons evenly sized and stacked on narrow cards. */
.td-page .td-upcoming-actions .btn{
        flex:1 1 auto;
}

/* Shared panel (footer-style subscribe): crisp white card, green focus
   rings — overrides the dashed-mint look from static-pages.css. */
.td-page .td-upcoming-card .td-notify-form{
        background:#fff;
        border:1px solid #cfe7de;
        border-radius:14px;
        box-shadow:0 10px 26px rgba(7,31,61,.07);
}
.td-page .td-upcoming-card .td-notify-form input{
        background:#fff;
        border:1px solid #d6e5e0;
        color:var(--ink);
        color-scheme:light;
        min-height:40px;
}
.td-page .td-upcoming-card .td-notify-form input:focus{
        border-color:#16a673;
        box-shadow:0 0 0 3px rgba(22,166,115,.18);
        outline:none;
}
.td-page .td-upcoming-card .td-notify-form input::placeholder{
        color:#8ba39b;
}
.td-page .td-upcoming-card .td-notify-form-row{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
}
.td-page .td-upcoming-card .td-notify-form-row .btn{
        flex:1 1 auto;
}

/* Mode note inside the panel ("You will be notified…" / "Pre-order —
   N% off…"). */
.td-page .td-notify-form-note{
        margin:0;
        padding:8px 11px;
        border-radius:9px;
        background:#e5f9f1;
        color:#0d7a57;
        font-size:11px;
        font-weight:800;
        line-height:1.5;
}
html[data-theme="dark"] .td-page .td-notify-form-note{
        background:rgba(39,197,139,.1);
        color:#9adbc2;
}

/* Success / error confirmation line stays visible in dark mode too. */
html[data-theme="dark"] .td-page .td-notify-msg{
        color:#9adbc2;
}

/* Panel + grid responsive: 2 cards per row ≤1100, one per row ≤640;
   the action buttons then go full-width. */
@media (max-width:1100px){
        .td-page .td-upcoming-grid{
                grid-template-columns:repeat(2,1fr);
        }
}
@media (max-width:640px){
        .td-page .td-upcoming-grid{
                grid-template-columns:1fr;
        }
        .td-page .td-upcoming-actions{
                flex-direction:column;
                align-items:stretch;
        }
        .td-page .td-upcoming-actions .btn{
                width:100%;
        }
}

/* ==========================================================
 * 4. ROUND 18 ("Edits (3)", agent 18-e) — Disciplines page:
 *    linked spec chips + linked card titles (the cards are DIVs now,
 *    each title links to the category archive, each green chip links
 *    to the Courses catalog filtered by that skill).
 * ========================================================== */

/* Card title link inherits the card look; a subtle mint underline on
   hover makes it discoverable. */
.td-page .td-cat-card h3 a{
        color:inherit;
        text-decoration:none;
        transition:color .15s ease;
}
.td-page .td-cat-card h3 a:hover,
.td-page .td-cat-card h3 a:focus-visible{
        color:#0d7a57;
}
html[data-theme="dark"] .td-page .td-cat-card h3 a:hover{
        color:#9adbc2;
}

/* Green spec chips are links now — same pill look, clear affordance. */
.td-page a.td-spec-chip{
        text-decoration:none;
        transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.td-page a.td-spec-chip:hover,
.td-page a.td-spec-chip:focus-visible{
        background:#d8f5e8;
        border-color:#16a673;
        color:#07504b;
        transform:translateY(-1px);
}
.td-page a.td-spec-chip:focus-visible{
        outline:2px solid #27c58b;
        outline-offset:2px;
}
html[data-theme="dark"] .td-page a.td-spec-chip:hover,
html[data-theme="dark"] .td-page a.td-spec-chip:focus-visible{
        background:rgba(39,197,139,.2);
        border-color:#27c58b;
        color:#c8f4e3;
}

/* Focus ring for the whole card is gone with the <a> wrapper — the
   title link + chips now carry focus visibility, and the card keeps
   its hover lift from static-pages.css. */
.td-page .td-cat-card:focus-within{
        border-color:#16a673;
        box-shadow:0 14px 34px rgba(7,80,68,.10);
}

/* Chips scroll instead of wrapping on very narrow cards (≤480). */
@media (max-width:480px){
        .td-page .td-cat-specs{
                flex-wrap:nowrap;
                overflow-x:auto;
                -webkit-overflow-scrolling:touch;
                padding-bottom:4px;
        }
        .td-page .td-cat-specs .td-spec-chip{
                flex:none;
        }
}