/* ==========================================================================
   Tutorial reader theme — view_subtopics
   --------------------------------------------------------------------------
   view_subtopics.php includes navs.php (which links w3-theme.css) and THEN
   opens its own <style> block, so that page's rules win on equal specificity.
   This file is linked after that block to finish the job.

   Presentation only. The active-item class, the sidebar toggle, the fullscreen
   button and the prev/next controls are all driven by JavaScript that adds and
   removes `.active`, `.visible`, `.fullscreen-mode` and friends — none of that
   is touched here, only how those states look.
   ========================================================================== */

/* This file loads last on the subtopics page — after the template's own inline
   <style>, which re-declares the old warm palette — so the brand tokens have to
   be restated here rather than inherited from w3-theme.css. Keep the two files
   in step. */
:root {
    --brand:        #F47B20;
    --brand-dark:   #D8660F;
    --brand-pale:   #FDEEE1;
    --brand-deep:   #9C4610;
    /* Fills that carry white text. Vivid orange only manages 2.7:1 against
       white, so anything with a white label uses this deeper shade instead;
       --brand stays for tints, borders and hairlines. */
    --brand-fill:      #B85410;
    --brand-fill-dark: #9C4610;

    --brand-accent:      #F47B20;
    --brand-accent-dark: #D8660F;
    --brand-blue:   #1A4FA3;

    --w3-sand:       #faf6f2;
    --w3-line:       #e2d9d1;
    --w3-ink:        var(--card-bg);

    /* This page gives the top bar a white background, so its foreground is the
       opposite of the home page's. */
    --navbar-fg:       var(--brand-deep);
    --navbar-fg-soft:  rgba(156, 70, 16, .45);
    --navbar-fg-wash:  rgba(156, 70, 16, .10);

    --bg:            #ffffff;
    --card-bg:       #ffffff;
    /* Text uses the deep shade; fills keep the vivid one. See w3-theme.css. */
    --primary:       var(--brand-deep);
    --primary-light: var(--brand-dark);
    --accent:        var(--brand-accent);
    --accent-light:  var(--brand-accent-dark);
    --text:          #16181d;
    --text-light:    #555f6d;
    --border:        #e2d9d1;
}

/* ── Page canvas ───────────────────────────────────────────────────────── */

.content        { background: #ffffff !important; padding: 20px 24px 32px !important; }
.main-container { background: #ffffff !important; }

/* Previous/Next now live only in the bar under the lesson, so the breadcrumb
   no longer has to clear a fixed strip above it. */
.content-breadcrumb { margin-top: 0 !important; }

/* ── Left rail ─────────────────────────────────────────────────────────── */

.sidebar {
    background: var(--w3-sand) !important;
    border-right: 1px solid var(--w3-line) !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}

/* Rail heading: plain block label, not a serif banner */
.sidebar h,
.sidebar h3,
.sidebar .sidebar-header {
    font-family: "Segoe UI", Verdana, sans-serif !important;
    font-weight: 600 !important;
    font-size: .82rem !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    color: #ffffff !important;
    background: var(--w3-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}

/* The topic name over the lesson list: a small uppercase label, like
   W3Schools' "SQL TUTORIAL", rather than a serif banner. */
.sidebar h5 {
    font-family: "Segoe UI", Verdana, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--text-light) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 14px 14px 8px !important;
}

/* Rail items: full-width rows, tinted on hover, solid orange when active */
.subtopic-container { margin: 0 !important; }

.subtopic-wrapper {
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid var(--w3-line) !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background-color .12s ease !important;
}

.subtopic-item {
    padding: 10px 14px !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: none !important;
}

.subtopic-wrapper:hover {
    background: var(--brand-pale) !important;
    transform: none !important;
}

/* Active row — the signature orange block */
.subtopic-wrapper.active,
.subtopic-container.active,
.subtopic-wrapper.active:hover {
    background: var(--brand-fill) !important;
    border-left-color: var(--brand-dark) !important;
    transform: none !important;
}

.subtopic-wrapper.active .subtopic-item,
.subtopic-container.active .subtopic-item,
.active > .subtopic-item {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Nested sub-subtopics sit indented under their parent */
.subsubtopic-list { background: transparent !important; border-left: 0 !important; }

.subsubtopic-item {
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--w3-line) !important;
    padding: 8px 14px 8px 30px !important;
    font-size: .82rem !important;
    background: transparent !important;
    transition: background-color .12s ease !important;
}
.subsubtopic-item:hover { background: var(--brand-pale) !important; transform: none !important; }
.subsubtopic-item.active { background: var(--brand-fill) !important; color: #fff !important; }

/* ── Content card ──────────────────────────────────────────────────────── */

#displayArea {
    background: #ffffff !important;
    border: 1px solid var(--w3-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 24px 28px !important;
}

.subtopic-title,
#displayTitle {
    font-family: "Segoe UI", Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 2rem !important;
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    border-bottom: 0 !important;
    margin-bottom: 1rem !important;
    letter-spacing: 0 !important;
}

.rich-content-container {
    font-family: Verdana, "Segoe UI", sans-serif !important;
    font-size: .95rem;
    line-height: 1.7;
    color: #000000;
}

.rich-content-container h1,
.rich-content-container h2,
.rich-content-container h3 {
    font-family: "Segoe UI", Verdana, sans-serif !important;
    font-weight: 400 !important;
    color: inherit !important;
}

.rich-content-container a { color: var(--brand-deep) !important; text-decoration: none; }
.rich-content-container a:hover { text-decoration: underline; }

/* Code blocks: the pale panel a tutorial site uses */
.rich-content-container pre,
.rich-content-container code {
    background: var(--w3-sand) !important;
    border: 1px solid var(--w3-line) !important;
    border-radius: 4px !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: .9rem !important;
    color: #000 !important;
}

.rich-content-container pre { padding: 12px 14px !important; overflow-x: auto; }

.rich-content-container table {
    border-radius: 0 !important;
    border-collapse: collapse !important;
    width: 100%;
}
.rich-content-container th {
    background: var(--brand-fill) !important;
    color: #fff !important;
    font-weight: 600;
}
.rich-content-container th,
.rich-content-container td { border: 1px solid var(--w3-line) !important; padding: 8px 10px !important; }

/* ── Previous / Next ───────────────────────────────────────────────────── */

.nav-bottom-btn,
.nav-button .nav-bottom-btn,
.nav-button button {
    background: var(--brand-fill) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: .88rem !important;
    padding: 9px 18px !important;
    transition: background-color .12s ease !important;
}

.nav-bottom-btn:hover,
.nav-button button:hover {
    background: var(--brand-fill-dark) !important;
    color: #ffffff !important;
    transform: none !important;
}

.nav-bottom-btn:disabled,
.nav-button button:disabled { background: #cccccc !important; color: #ffffff !important; }

/* The dark-mode rule for bare <span> beats inheritance, so a label wrapped in
   a span inside these buttons went grey on the orange fill. */
.nav-bottom-btn *,
.nav-button button *,
.sidebar-toggle *,
.fullscreen-toggle * { color: inherit !important; }

.nav-bottom-bar { border-top: 1px solid var(--w3-line) !important; padding-top: 16px !important; }

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.content-breadcrumb { font-size: .8rem !important; color: #666 !important; }
.content-breadcrumb a,
.breadcrumb-home, .breadcrumb-topic { color: var(--brand-deep) !important; text-decoration: none; }
.content-breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-current { color: #666 !important; font-weight: 400 !important; }
/* The separator was taking the hairline colour, which is a border tone rather
   than a text tone — 1.4:1 against the page. */
.breadcrumb-sep { color: var(--text-light) !important; }

.breadcrumb-edit {
    border-radius: 4px !important;
    border-color: var(--w3-line) !important;
    color: var(--brand-deep) !important;
}
.breadcrumb-edit:hover { background: var(--brand-pale) !important; color: var(--brand-dark) !important; }

/* ── Floating controls ─────────────────────────────────────────────────── */

.sidebar-toggle {
    background: var(--brand-fill) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: none !important;
}
.sidebar-toggle:hover { background: var(--brand-fill-dark) !important; }

.fullscreen-toggle {
    background: var(--brand-fill) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2) !important;
}
.fullscreen-toggle:hover { background: var(--brand-fill-dark) !important; transform: none !important; }

/* ── Lessons button at the start of the topic strip ──────────────────────── */

.nav3-lessons-btn { display: none; }

/* ── Phones and tablets: the sidebar is a drawer over the lesson ─────────── */

@media (max-width: 992px) {
    /* W3Schools-style: ☰ at the start of the topic strip opens this topic's
       lesson list. It stays put while the topics scroll sideways past it,
       and replaces the slim tab that used to sit on the screen edge. */
    .nav3-lessons-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        left: 0;
        z-index: 2;
        flex: 0 0 auto;
        width: 48px;
        height: 100%;
        border: 0;
        background: var(--brand-fill);
        color: #ffffff;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .nav3-lessons-btn.is-open,
    .nav3-lessons-btn:active { background: var(--brand-fill-dark); }
    .nav3-lessons-btn i { color: inherit !important; }
    .sidebar-toggle { display: none !important; }

    .sidebar {
        width: min(var(--sidebar-width), 85vw) !important;
        max-width: 85vw !important;
    }
    /* Dim the lesson behind an open drawer; tapping it closes the drawer. */
    .sidebar:not(.sidebar-collapsed) {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35) !important;
    }
    .sidebar:not(.sidebar-collapsed) + .sidebar-toggle {
        left: min(var(--sidebar-width), 85vw) !important;
    }

    /* Closed: a slim tab on the edge that stays clear of the lesson text. */
    .sidebar-collapsed + .sidebar-toggle {
        width: 22px !important;
        height: 52px !important;
        opacity: .9;
    }
    .sidebar-collapsed + .sidebar-toggle i { font-size: .9rem !important; }
    .sidebar-collapsed + .sidebar-toggle::before { display: none; }
}

@media (max-width: 767px) {
    .content { padding: 12px 12px 88px !important; }

    #displayArea { padding: 18px 16px !important; }

    .subtopic-title,
    #displayTitle {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
        margin-bottom: .75rem !important;
    }

    .rich-content-container { font-size: .92rem; line-height: 1.65; }

    /* Thumb-sized targets: breadcrumb links and the sub-subtopic
       expand arrow were 20px and 13×16px. */
    .content-breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
    .subtopic-wrapper .btn-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    /* Lesson tables scroll sideways inside the card instead of being
       squeezed or pushing the page wider. */
    .rich-content-container table { display: block; overflow-x: auto; }

    .content-breadcrumb { padding-bottom: 8px !important; }

    /* Previous / Next share the row evenly and are easy to hit */
    .nav-bottom-bar { margin-top: 24px !important; }
    .nav-bottom-btn { max-width: none !important; min-height: 44px; }

    .fullscreen-toggle {
        width: 42px !important;
        height: 42px !important;
        right: 14px !important;
        bottom: 14px !important;
        font-size: 1rem !important;
    }
}

/* ── Calm the motion ───────────────────────────────────────────────────── */

.subtopic-wrapper, .subtopic-item, .subsubtopic-item,
.nav-bottom-btn, #displayArea { animation: none !important; }