/* =============================================
   RotaryXC — Global Stylesheet
   Palette:
     Background:   #1a1a1a
     Surface:      #2c2c2c
     Nav/Footer:   #121212
     Accent green: #1db954  hover: #1ed760
     Gold:         #c9a66b
     Text:         #dcdcdc  muted: #cccccc
============================================= */

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #1a1a1a;
    color: #dcdcdc;
    margin: 0;
    padding: 0;
}

/* === TYPOGRAPHY === */
h1 { color: #1db954; margin-top: 0; }
h2 { color: #c9a66b; }
h3 { color: #c9a66b; }

a {
    color: #1db954;
    text-decoration: none;
}

a:hover {
    color: #1ed760;
}

p, ul li {
    color: #cccccc;
    line-height: 1.6;
}

/* === TOPBAR === */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #1a1a1a;
    border-bottom: 2px solid #c9a66b;
    /* Must be > .topnav-overlay (100) so the mobile drawer (.topnav, nested
       inside .topbar) can paint above the overlay and capture its own taps.
       Without this, the overlay's <label for="nav-toggle"> intercepts taps
       on drawer items and closes the menu. */
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
}
.topbar .logo {
    color: #1db954;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15em;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.topbar .logo:hover { color: #1ed760; }
.topbar-search {
    flex: 0 1 320px;
    margin-left: auto;
}
.topbar-search input {
    width: 100%;
    background-color: #2c2c2c;
    border: 1px solid #3a3b58;
    border-radius: 8px;
    color: #dcdcdc;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92em;
    padding: 8px 14px;
    box-sizing: border-box;
}
.topbar-search input:focus {
    outline: none;
    border-color: #1db954;
}
.topbar-search input::placeholder { color: #888; }

/* Support button in topbar */
.topbar-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #c9a66b 0%, #b89656 100%);
    color: #1a1a1a !important;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.topbar-support:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    color: #1a1a1a !important;
}

/* Glossary cues toggle — sits between topnav/search and the support button.
   Slider switch indicates state: track green + knob right when on, track grey + knob left when off.
   Body class `glossary-cues-off` flips both the switch and the link styling. */
.topbar-cues {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    background: transparent;
    border: 1px solid #333;
    color: #bbb;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    font-family: inherit;
    line-height: 1;
}
.topbar-cues:hover {
    border-color: #1db954;
    color: #e8e8e8;
}
.topbar-cues-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
    background: #1db954;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background-color 0.18s ease;
}
.topbar-cues-switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translateX(14px);  /* knob on the right when on (default) */
    transition: transform 0.18s ease, background-color 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.glossary-cues-off .topbar-cues-switch {
    background: #3a3a3a;
}
body.glossary-cues-off .topbar-cues-switch::after {
    transform: translateX(0);  /* knob slides to the left when off */
    background: #c0c0c0;
}
/* Strip the dotted underline + tooltip when cues are off, keep link clickable. */
body.glossary-cues-off .glossary-auto-link,
body.glossary-cues-off .glossary-auto-link:hover {
    color: inherit;
    border-bottom: none;
    cursor: inherit;
}
body.glossary-cues-off .glossary-tip {
    display: none !important;
}
@media (max-width: 900px) {
    .topbar-cues { padding: 4px 9px; font-size: 0.72em; gap: 6px; }
    .topbar-cues-switch { width: 24px; height: 12px; }
    .topbar-cues-switch::after { width: 10px; height: 10px; transform: translateX(12px); }
    body.glossary-cues-off .topbar-cues-switch::after { transform: translateX(0); }
}

/* === TOPNAV (horizontal) ===
   Lives inside .topbar, between the logo (left) and search/coffee (right).
   Center grouping: the four section dropdowns (Learn / Practice / Tools / About).
   Dropdowns open on hover, focus-within, or .is-open (toggled by site.js for click).
*/
.topnav {
    flex: 0 1 auto;
}
.topnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.topnav-item {
    position: relative;
    display: flex;
}
.topnav-trigger {
    background: transparent;
    border: 0;
    color: #dcdcdc;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92em;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.topnav-trigger::after {
    content: "▾";
    font-size: 0.72em;
    color: #888;
    transition: color 0.15s ease, transform 0.15s ease;
}
.topnav-trigger:hover,
.topnav-item:focus-within .topnav-trigger,
.topnav-item.is-open .topnav-trigger {
    color: #1db954;
    background-color: #1a2a1a;
}
.topnav-trigger:hover::after,
.topnav-item:focus-within .topnav-trigger::after,
.topnav-item.is-open .topnav-trigger::after {
    color: #1db954;
    transform: translateY(1px);
}
.topnav-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background-color: #121212;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: 95;
}
.topnav-item:hover > .topnav-menu,
.topnav-item:focus-within > .topnav-menu,
.topnav-item.is-open > .topnav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.topnav-menu a {
    display: block;
    color: #dcdcdc;
    text-decoration: none;
    padding: 7px 16px;
    font-size: 0.9em;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topnav-menu a:hover,
.topnav-menu a.active {
    background-color: #1a2a1a;
    color: #1db954;
    border-left-color: #1db954;
}

/* Highlight the Logbook entry as the most-used tool */
.topnav-menu .nav-emphasis {
    color: #c9a66b !important;
    font-weight: 700;
}
.topnav-menu .nav-emphasis::before {
    content: "✱ ";
    color: #c9a66b;
}
.topnav-menu .nav-emphasis:hover { color: #1db954 !important; }

/* === NESTED SUBMENU (inline) ===
   .topnav-submenu wraps a top-level menu entry that has children. The
   children render INLINE below the parent (indented, with an arrow prefix)
   so the whole structure reads as one vertical list — no sideways flyout.
   The parent link is still clickable; the children are always visible while
   the parent menu is open.

   The .topnav-submenu--collapsible variant adds a click-to-toggle chevron
   for entries with many children (e.g. Courses → PPL/IFR/CPL/CFI/sUAS),
   so the children stay hidden until the user explicitly opens them. That
   prevents items below from being pushed down when the dropdown opens. */
.topnav-submenu > a.topnav-submenu-trigger {
    display: block;
}

.topnav-flyout {
    /* Inline list — always visible while the parent .topnav-menu is open
       (overridden for .topnav-submenu--collapsible). */
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Collapsible variant (Courses): one full-width toggle button — clicks
   anywhere on the row open the inline flyout. The chevron is pinned to
   the right as a visual affordance and rotates 90° when open. */
.topnav-submenu--collapsible { display: block; }
.topnav-submenu-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    color: #dcdcdc;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    line-height: 1.3;
    padding: 7px 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topnav-submenu-toggle .topnav-submenu-label {
    flex: 1;
}
.topnav-submenu-toggle .chevron {
    color: #888;
    font-size: 0.85em;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.18s ease, color 0.15s ease;
}
.topnav-submenu-toggle:hover,
.topnav-submenu--collapsible.is-open > .topnav-submenu-toggle {
    background-color: #1a2a1a;
    color: #1db954;
    border-left-color: #1db954;
}
.topnav-submenu-toggle:hover .chevron,
.topnav-submenu--collapsible.is-open > .topnav-submenu-toggle .chevron {
    color: #1db954;
}
.topnav-submenu--collapsible.is-open > .topnav-submenu-toggle .chevron {
    transform: rotate(90deg);
}
.topnav-submenu--collapsible > .topnav-flyout { display: none; }
.topnav-submenu--collapsible.is-open > .topnav-flyout { display: block; }
.topnav-flyout a {
    display: block;
    color: #b8b8b8;
    text-decoration: none;
    padding: 6px 16px 6px 36px;
    font-size: 0.88em;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topnav-flyout a::before {
    content: "→ ";
    color: #888;
    margin-right: 4px;
    transition: color 0.15s ease;
}
.topnav-flyout a:hover,
.topnav-flyout a.active {
    background-color: #1a2a1a;
    color: #1db954;
    border-left-color: #1db954;
}
.topnav-flyout a:hover::before,
.topnav-flyout a.active::before { color: #1db954; }

/* Mobile drawer overlay (only used at narrow widths; hidden on desktop) */
.topnav-overlay { display: none; }

/* === CONTEXTUAL SUB-NAV (horizontal strip) ===
   Populated by site.js on course/topic/wiki sub-pages. Sits below the topbar
   as a thin scrollable row of peer pages so users can move within a course
   without leaving the page.
*/
.subnav {
    display: none;
}
.subnav.has-context {
    /* Outer chrome — fixed strip below the topbar. Overflow is HIDDEN here so
       the fade-gradient overlays (::before / ::after) stay pinned to the
       viewport edges instead of scrolling with the content. The actual
       horizontal scroll happens on the inner .subnav-scroll element. */
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    height: 40px;
    background-color: #121212;
    border-bottom: 1px solid #2c2c2c;
    z-index: 85;
    overflow: hidden;
}

/* Inner horizontal-scroll track */
.subnav-scroll {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Hide the visible scrollbar — the fade overlays + chevron handle
       discoverability instead. Wheel/drag/touch scrolling still works. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge / IE */
    scroll-behavior: smooth;
}
.subnav-scroll::-webkit-scrollbar { display: none; }  /* Chromium / Safari */

/* Fade-gradient affordances — appear only when there's actually overflow on
   that side. JS toggles .has-overflow / .is-scrolled / .is-end on .subnav. */
.subnav.has-context::before,
.subnav.has-context::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
}
.subnav.has-context::before {
    left: 0;
    background: linear-gradient(to right, #121212 0%, rgba(18,18,18,0) 100%);
}
.subnav.has-context::after {
    right: 0;
    background: linear-gradient(to left, #121212 0%, rgba(18,18,18,0) 100%);
}
/* Right fade visible when overflow exists and we haven't scrolled to the end */
.subnav.has-context.has-overflow:not(.is-end)::after { opacity: 1; }
/* Left fade visible only after the user has scrolled away from the start */
.subnav.has-context.is-scrolled::before { opacity: 1; }

/* Right-edge chevron — explicit "scroll for more" hint that rides on top of
   the fade. Only visible when there's overflow on the right. */
.subnav.has-context.has-overflow:not(.is-end) .subnav-scroll::after {
    content: '›';
    position: sticky;
    right: 10px;
    margin-left: auto;
    color: #c9a66b;
    font-size: 1.9em;
    line-height: 1;
    font-weight: 700;
    padding: 0 8px;
    z-index: 3;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
    animation: subnav-nudge 1.6s ease-in-out infinite;
}
@keyframes subnav-nudge {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50%      { transform: translateX(3px); opacity: 1; }
}
.subnav .nav-context-track {
    color: #1db954;
    font-size: 0.88em;
    font-weight: 700;
    margin: 0 0 0 auto;     /* auto-margin pair with topics centers the group */
    padding: 0;
    flex-shrink: 0;
}
.subnav .nav-context-track a {
    color: #1db954;
    text-decoration: none;
}
.subnav .nav-context-track a:hover { text-decoration: underline; }

.subnav .nav-context-topics {
    list-style: none;
    /* Pair with .nav-context-track's left auto-margin: when there's extra room
       in the row, the two auto-margins split it evenly and the group centers.
       When content overflows, both auto-margins collapse to 0 and the row
       scrolls normally with the chevron taking over on the right. */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
}
.subnav .nav-context-topics > li {
    margin: 0;
    position: relative;
}
/* Vertical divider between every topic — full-height, lighter gray so it's
   visible against the dark subnav. */
.subnav .nav-context-topics > li + li {
    margin-left: 12px;
    padding-left: 14px;
}
.subnav .nav-context-topics > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background-color: #4a4a4a;
}
.subnav .nav-context-topics > li > a {
    color: #dcdcdc;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    display: inline-block;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subnav .nav-context-topics > li > a:hover {
    background-color: #1a2a1a;
    color: #1db954;
}
.subnav .nav-context-topics > li > a.active {
    color: #1db954;
    background-color: #1a2a1a;
    font-weight: 700;
}

/* === ROW 3 — SUB-PAGES OF THE ACTIVE TOPIC ===
   A third fixed strip below the main subnav, only injected by site.js when
   the active topic has children. Slightly darker background and tighter
   chips so it reads as nested context, not a peer of the topics row. */
.subnav-l3 {
    display: none;
}
.subnav-l3.has-context {
    display: block;
    position: fixed;
    top: 96px;            /* topbar 56 + subnav 40 */
    left: 0;
    right: 0;
    height: 32px;
    background-color: #0e0e0e;
    border-bottom: 1px solid #2c2c2c;
    z-index: 84;
    overflow: hidden;
}
.subnav-l3 .nav-context-subpages {
    list-style: none;
    /* margin: 0 auto centers the row when content fits; collapses to 0 and
       lets the row scroll naturally when content overflows. */
    margin: 0 auto;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* Subtle hover-preview cue — the third bar gets a faint gold top accent when
   it's showing siblings of a non-active topic. Helps distinguish "I'm
   previewing" from "I'm looking at the active topic's children". */
.subnav-l3.has-context.is-preview {
    border-top: 1px solid rgba(201, 166, 107, 0.35);
}
.subnav-l3 .nav-context-subpages li { margin: 0; }
.subnav-l3 .nav-context-subpages li a {
    color: #b8b8b8;
    text-decoration: none;
    padding: 4px 10px;
    font-size: 0.82em;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subnav-l3 .nav-context-subpages li a:hover {
    background-color: #1a2a1a;
    color: #1db954;
}
.subnav-l3 .nav-context-subpages li a.active {
    color: #1db954;
    background-color: #1a2a1a;
    font-weight: 700;
}

/* Fade overlays + chevron on the third bar (mirror the main subnav rules) */
.subnav-l3.has-context::before,
.subnav-l3.has-context::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
}
.subnav-l3.has-context::before {
    left: 0;
    background: linear-gradient(to right, #0e0e0e 0%, rgba(14,14,14,0) 100%);
}
.subnav-l3.has-context::after {
    right: 0;
    background: linear-gradient(to left, #0e0e0e 0%, rgba(14,14,14,0) 100%);
}
.subnav-l3.has-context.has-overflow:not(.is-end)::after { opacity: 1; }
.subnav-l3.has-context.is-scrolled::before { opacity: 1; }
.subnav-l3.has-context.has-overflow:not(.is-end) .subnav-scroll::after {
    content: '›';
    position: sticky;
    right: 10px;
    margin-left: auto;
    color: #c9a66b;
    font-size: 1.6em;
    line-height: 1;
    font-weight: 700;
    padding: 0 8px;
    z-index: 3;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
    animation: subnav-nudge 1.6s ease-in-out infinite;
}

/* Push main content down based on how many subnav rows are present. */
.subnav.has-context ~ main { margin-top: 96px; }
.subnav.has-context.has-l3 ~ main { margin-top: 128px; }

/* === LAYOUT === */
main {
    margin-top: 56px;
    padding: 24px 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

footer {
    background-color: #121212;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #2c2c2c;
}

footer p {
    color: #dcdcdc;
    margin: 0 0 8px;
}

footer a {
    color: #1db954;
    text-decoration: none;
    margin: 0 15px;
}

footer a:hover {
    color: #1ed760;
}

/* === HERO === */
.hero {
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Dark gradient overlay — keeps text readable across any photo, AND fades
   the hero into the page background at the bottom so the content section
   below emerges naturally instead of hard-cutting into the photo. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0.45) 55%,
        rgba(26,26,26,0.85) 88%,
        rgba(26,26,26,1.00) 100%
    );
    pointer-events: none;
}

/* Lift the hero content above the overlay. */
.hero > * {
    position: relative;
    z-index: 1;
}

/* Use on index landing page for full-viewport hero */
.hero--full {
    height: 100vh;
}

.hero h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 20px;
    color: #c9a66b;
    text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
}

.hero p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6);
}

/* === BUTTONS === */
.cta-btn {
    display: inline-block;
    background-color: #1db954;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #1ed760;
    color: #fff;
}

.pilot-button {
    display: inline-block;
    background-color: #3a3b58;
    color: #dcdcdc;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.pilot-button:hover {
    background-color: #c9a66b;
    color: #1a1a1a;
}

/* === CARDS === */
.course-card {
    background-color: #2c2c2c;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.course-card p,
.course-card ul li {
    color: #b0b0d0;
}

/* === HOME — SERVICES === */
.services {
    padding: 50px 20px;
    text-align: center;
    background-color: #121212;
}

.services h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #1db954;
}

.service-item {
    display: inline-block;
    width: 30%;
    margin: 0 2%;
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
    vertical-align: top;
}

.service-item h3 {
    color: #c9a66b;
    margin-bottom: 15px;
}

.service-item p {
    color: #cccccc;
}

/* === HOME — TESTIMONIALS === */
.testimonials {
    padding: 50px 20px;
    background-color: #1e1e1e;
    text-align: center;
}

.testimonials h2 {
    color: #1db954;
    margin-bottom: 40px;
    font-size: 2.5em;
}

.testimonial {
    display: inline-block;
    width: 30%;
    margin: 0 2%;
    padding: 20px;
    background-color: #2c2c2c;
    border-radius: 8px;
    vertical-align: top;
}

.testimonial p {
    color: #cccccc;
    font-style: italic;
}

.testimonial h3 {
    margin-top: 10px;
    color: #c9a66b;
}

/* === BLOG === */
.featured {
    padding: 50px 20px;
    text-align: center;
    background-color: #121212;
}

.featured h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #1db954;
}

.featured-posts {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.post-card {
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: left;
}

.post-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.post-card h3 {
    color: #c9a66b;
    margin-bottom: 10px;
}

.post-card p {
    color: #cccccc;
}

.read-more {
    color: #1db954;
}

.read-more:hover {
    color: #1ed760;
}

.blog-grid {
    padding: 50px 20px;
    background-color: #1e1e1e;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.grid-item {
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
}

.grid-item img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.grid-item h3 {
    color: #c9a66b;
    margin-bottom: 10px;
}

.grid-item p {
    color: #cccccc;
}

.search-bar {
    text-align: center;
    margin-bottom: 30px;
}

.search-bar input {
    padding: 10px;
    width: 80%;
    max-width: 400px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #2c2c2c;
    color: #dcdcdc;
}

/* === GALLERY === */
.upload-section {
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.upload-section h2 {
    color: #1db954;
}

.upload-input {
    margin-top: 10px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: none;
    font-size: 16px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-item {
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
}

.gallery-item img,
.gallery-item iframe {
    width: 100%;
    border-radius: 8px;
}

.video-section {
    margin-bottom: 40px;
}

.video-section h2 {
    color: #1db954;
}

.video-container {
    margin-bottom: 20px;
}

.video-container iframe {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

.category {
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.category h2 {
    color: #c9a66b;
}

.category p {
    color: #cccccc;
}

/* === CONTACT === */
.contact-info,
.socials,
.bio-section {
    margin-bottom: 40px;
}

.contact-info p,
.socials p {
    color: #cccccc;
    font-size: 1.2em;
}

.bio-section img {
    display: block;
    margin: 0 auto 20px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.bio-section h2 {
    text-align: center;
    margin-bottom: 20px;
}

.bio-section p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1em;
}

/* === DASHBOARD === */
.progress-bar {
    width: 100%;
    background-color: #2c2d44;
    border-radius: 8px;
    height: 20px;
    margin-bottom: 10px;
}

.progress {
    background-color: #c9a66b;
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease-in-out;
}

.progress-item {
    margin-bottom: 30px;
}

.meter {
    background-color: #2c2d44;
    border-radius: 0.5rem;
    height: 1.25rem;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.meter span {
    display: block;
    height: 100%;
    background-color: #c9a66b;
    transition: width 0.5s ease-in-out;
}

.meter span.progress {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    font-size: 0.875rem;
}

/* === PILOT CARD === */
.pilot-card {
    background-color: #2c2d44;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
}

.pilot-card-header h2 {
    color: #c9a66b;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.pilot-card-body {
    display: flex;
    justify-content: center;
}

/* === SMART FEEDBACK (dashboard) === */
.smart-feedback {
    display: grid;
    gap: 14px;
    margin: 16px 0 30px;
}
.feedback-block {
    background-color: #2c2c2c;
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border-left: 3px solid #1db954;
}
.feedback-block.weak { border-left-color: #c9a66b; }
.feedback-block.strong { border-left-color: #1db954; }
.feedback-block .feedback-icon {
    font-size: 1.6em;
    flex-shrink: 0;
    line-height: 1;
}
.feedback-block .feedback-content { flex: 1; }
.feedback-block h4 {
    color: #c9a66b;
    margin: 0 0 6px;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feedback-block.strong h4 { color: #1db954; }
.feedback-block p {
    color: #dcdcdc;
    margin: 4px 0;
    font-size: 0.92em;
    line-height: 1.5;
}
.feedback-list { list-style: none; padding: 0; margin: 8px 0 0; }
.feedback-list li {
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
}
.feedback-list li:last-child { border-bottom: none; }
.feedback-stat {
    color: #888;
    font-size: 0.85em;
    margin-left: 8px;
}
.feedback-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.feedback-cta {
    display: inline-block;
    padding: 4px 12px;
    background-color: #1a1a1a;
    border: 1px solid #3a3b58;
    border-radius: 6px;
    color: #1db954;
    text-decoration: none;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feedback-cta:hover { border-color: #1db954; background-color: #1a2a1a; }

/* === FURTHER READING (reusable component on course pages) === */
.further-reading {
    background: linear-gradient(135deg, #1a2a1a 0%, #2c2c2c 100%);
    border: 1px solid #3a3b58;
    border-radius: 12px;
    padding: 22px 26px;
    margin: 32px 0;
}
.further-reading h2,
.further-reading h3 {
    color: #c9a66b;
    margin: 0 0 8px;
    font-size: 0.92em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: none;
    padding-bottom: 0;
}
.further-reading .fr-intro {
    color: #b8b8b8;
    font-size: 0.92em;
    margin: 4px 0 14px;
    line-height: 1.5;
}
.further-reading ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.further-reading li {
    padding: 8px 0;
    color: #dcdcdc;
    font-size: 0.92em;
    border-bottom: 1px solid #1a1a1a;
}
.further-reading li:last-child { border-bottom: none; }
.further-reading li a {
    color: #1db954;
    text-decoration: none;
    font-weight: 700;
}
.further-reading li a:hover { text-decoration: underline; }
.further-reading li .fr-tag {
    display: inline-block;
    background-color: #1a1a1a;
    border: 1px solid #3a3b58;
    border-radius: 4px;
    color: #888;
    font-size: 0.7em;
    padding: 1px 6px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.further-reading li .fr-tag.faa { color: #ff9f6b; border-color: #4a3a20; }
.further-reading li .fr-tag.ac { color: #d4b577; border-color: #3a3a20; }
.further-reading li .fr-tag.reg { color: #6dd4d4; border-color: #1a3a3a; }
.further-reading li .fr-tag.local { color: #1db954; border-color: #1a3a1a; }
.further-reading li .fr-desc {
    color: #888;
    font-size: 0.85em;
    margin-top: 2px;
    margin-left: 0;
}

/* === STUDY TOOL CALLOUT (on course pages) === */
.study-tools-callout {
    background-color: #2c2c2c;
    border: 1px solid #3a3b58;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 24px 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.study-tools-callout .stc-label {
    color: #888;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.study-tools-callout .stc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.study-tools-callout a {
    display: inline-block;
    padding: 6px 14px;
    background-color: #1a1a1a;
    border: 1px solid #3a3b58;
    border-radius: 6px;
    color: #1db954;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 700;
}
.study-tools-callout a:hover { border-color: #1db954; background-color: #1a2a1a; }

/* === MOBILE NAV — HAMBURGER + TOPNAV DRAWER === */
.nav-toggle-checkbox { display: none; }
.hamburger {
    display: none;
    background-color: #2c2c2c;
    color: #1db954;
    border: 1px solid #3a3b58;
    border-radius: 8px;
    font-size: 1.2em;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.hamburger:active { background-color: #3a3b58; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .topbar { padding: 0 12px; gap: 10px; }
    .topbar-search { display: none; }
    .topbar-support { padding: 6px 10px; font-size: 0.78em; }

    /* Hamburger replaces the inline topnav at narrow widths */
    .hamburger { display: flex; }

    /* Topnav becomes a slide-down drawer beneath the topbar.
       The closed-state translate must subtract the element's own height
       PLUS the top offset — `translateY(-110%)` is relative to the
       drawer's height, so a short drawer (~200px) only moves ~220px up
       from top:56px, leaving its bottom edge ~36px below the viewport
       top (the last item "About" peeks through). calc(-100% - 60px)
       guarantees the bottom edge clears y=0 regardless of content size. */
    .topnav {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        background-color: #121212;
        border-bottom: 1px solid #2c2c2c;
        z-index: 150;
        overflow-y: auto;
        transform: translateY(calc(-100% - 60px));
        transition: transform 0.25s ease;
        padding: 8px 0;
        visibility: hidden;
        pointer-events: none;
    }
    .topnav-list {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .topnav-item { display: block; }
    .topnav-trigger {
        width: 100%;
        justify-content: space-between;
        height: 44px;
        border-radius: 0;
        padding: 0 20px;
    }
    .topnav-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        background-color: #0e0e0e;
        padding: 4px 0 8px;
        display: none;
        min-width: 0;
    }
    .topnav-item.is-open > .topnav-menu,
    .topnav-item:focus-within > .topnav-menu { display: block; }
    .topnav-menu a { padding: 8px 28px; font-size: 0.92em; }

    /* Nested submenu is already inline-indented globally; just give the
       children a touch more breathing room on the mobile drawer. */
    .topnav-flyout a { padding: 10px 24px 10px 44px; font-size: 0.9em; }

    /* Mobile-only overlay behind the drawer */
    .topnav-overlay {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 56px);
        background: rgba(0,0,0,0.6);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }

    /* Open state — checkbox driven */
    .nav-toggle-checkbox:checked ~ .topbar .topnav,
    .nav-toggle-checkbox:checked ~ .topnav {
        transform: translateY(0);
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        visibility: visible;
        pointer-events: auto;
    }
    .nav-toggle-checkbox:checked ~ .topnav-overlay {
        opacity: 1;
        visibility: visible;
    }

    main, footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Sub-nav scrolls horizontally on mobile too — already does, just tighten */
    .subnav.has-context { padding: 0 12px; gap: 12px; }

    .service-item,
    .testimonial {
        display: block;
        width: 90%;
        margin: 10px auto;
    }

    .hero { height: 40vh; }
    .hero--full { height: 60vh; }
    .hero h1 { font-size: 2.2em; }
    .meter { height: 1rem; }

    /* Tighten cards/grids on mobile */
    .course-card, .feature-card, .topic-card, .track-card, .syllabus-card,
    .area-section, .question-card, .cert-block {
        padding: 18px;
    }
    .course-card h2, .area-section h2 { font-size: 1.2em; }

    /* Topic page mnemonic cards — wider on mobile */
    .mnemonic-grid, .pill-grid, .topic-grid, .feature-grid,
    .course-track, .track-row, .syllabus-grid, .post-list {
        grid-template-columns: 1fr !important;
    }

    /* Quiz / search adjustments */
    .quiz-controls, .search-box {
        flex-direction: column;
        align-items: stretch;
    }
    .quiz-controls .score { margin-left: 0; }
    .alpha-nav .search-box { margin-left: 0; width: 100%; }
    .alpha-nav input { width: 100%; }

    /* Logbook two-column → one */
    .logbook-grid { grid-template-columns: 1fr !important; }

    /* ACS reference: stop sticky TOC from eating content */
    .area-toc { position: relative; }

    /* Smaller heading */
    h1 { font-size: 1.7em; }
    h2 { font-size: 1.3em; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.8em; }
    .hero p { font-size: 1em; }
    .meter { height: 0.875rem; }
    .stat-grid, .summary-grid { grid-template-columns: 1fr 1fr !important; }

    /* Tighten table on small screens */
    table { font-size: 0.85em; }
    table th, table td { padding: 4px !important; }
}

/* ===== Auto-glossary linker ===== */
.glossary-auto-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #c9a66b;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.glossary-auto-link:hover {
    color: #c9a66b;
    border-bottom-color: #1db954;
}
.glossary-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: max-content;
    max-width: 340px;
    background-color: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 11px 16px 13px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.7);
    pointer-events: none;
    cursor: default;
    opacity: 0;
    transform: translateY(4px);
    /* Delay applies on the way OUT (default state) so quick mouse moves toward
       the tooltip don't dismiss it before you reach the footer link. Show is
       instant because :hover overrides transition-delay to 0s below. */
    transition: opacity 0.18s ease 0.18s, transform 0.18s ease 0.18s;
    z-index: 1000;
    text-align: left;
    color: #d8d8d8;
    font-weight: 400;
    font-style: normal;
}
/* Invisible bridge over the 10px gap between the word and the tooltip — keeps
   :hover continuous so the mouse can travel up to click "Open in glossary →"
   without the tooltip vanishing mid-flight. Only "active" while the tip is
   shown, otherwise it would catch hovers above any underlined word. */
.glossary-tip::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
    pointer-events: none;
}
.glossary-auto-link:hover .glossary-tip,
.glossary-auto-link.glossary-tip-open .glossary-tip {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}
.glossary-auto-link:hover .glossary-tip::before,
.glossary-auto-link.glossary-tip-open .glossary-tip::before {
    pointer-events: auto;
}
.glossary-tip-image {
    display: block;
    margin: -11px -16px 11px;          /* span to tooltip edges, gap below */
    border-radius: 5px 5px 0 0;        /* match tooltip top corners */
    border-bottom: 1px solid #2a2a2a;
    background: #0d0d0d;
    overflow: hidden;
    line-height: 0;                    /* kill inline-img descender gap */
}
.glossary-tip-image img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}
.glossary-tip-title {
    display: block;
    color: #1db954;
    font-weight: 700;
    font-size: 0.74em;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.4;
    padding-bottom: 8px;
    margin-bottom: 9px;
    border-bottom: 1px solid rgba(29,185,84,0.35);
}
.glossary-tip-body {
    display: block;
    font-size: 0.87em;
    line-height: 1.6;
    color: #d8d8d8;
}
/* Footer reads as a button: gold divider line above (matches the dotted-cue
   accent), button block below spans tooltip edges with a subtle gold tint
   that deepens on hover. Green text keeps the call-to-action prominent. */
.glossary-tip-link {
    display: block;
    margin: 12px -16px -13px;
    padding: 10px 16px 11px;
    border-top: 1px solid #c9a66b;
    background-color: rgba(201,166,107,0.07);
    color: #1db954;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.glossary-tip-link:hover {
    background-color: rgba(201,166,107,0.18);
    color: #1ed760;
}
/* On touch devices the dotted-underline word taps open the tooltip instead
   of navigating. JS adds .glossary-tip-open to the link; this class makes
   the tip visible and tappable (the footer link then completes the nav). */
@media (hover: none) and (pointer: coarse) {
    .glossary-auto-link.glossary-tip-open .glossary-tip {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}
/* On narrow screens, keep the tooltip inside the viewport */
@media (max-width: 600px) {
    .glossary-tip { max-width: min(340px, calc(100vw - 40px)); }
}

/* ===== Wiki sub-page layout ===== */
.breadcrumb {
    color: #888;
    font-size: 0.85em;
    margin: 0 0 6px;
}
.breadcrumb a {
    color: #c9a66b;
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #555; margin: 0 6px; }

.concept-hero {
    background-color: #2c2c2c;
    border-left: 4px solid #1db954;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 14px 0 28px;
}
.concept-hero h1 {
    color: #1db954;
    margin: 0 0 10px;
    font-size: 1.7em;
}
.concept-hero .summary {
    color: #dcdcdc;
    font-size: 1.02em;
    line-height: 1.6;
    margin: 0;
}
.concept-hero .also-known {
    color: #888;
    font-size: 0.85em;
    margin-top: 10px;
    font-style: italic;
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0 30px;
}
.concept-tile {
    background-color: #2c2c2c;
    border-radius: 8px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid #c9a66b;
    transition: transform 0.15s ease, border-left-color 0.15s ease;
    display: block;
}
.concept-tile:hover {
    transform: translateY(-2px);
    border-left-color: #1db954;
}
.concept-tile h4 {
    color: #1db954;
    margin: 0 0 6px;
    font-size: 1em;
}
.concept-tile p {
    color: #b8b8b8;
    font-size: 0.88em;
    margin: 0;
    line-height: 1.5;
}
.concept-section-label {
    color: #c9a66b;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2c2c2c;
}

.concept-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 32px 0 20px;
    padding-top: 22px;
    border-top: 1px solid #2c2c2c;
}
.concept-nav a {
    background-color: #2c2c2c;
    border-radius: 8px;
    padding: 12px 16px;
    text-decoration: none;
    color: #dcdcdc;
    font-size: 0.92em;
    display: block;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
}
.concept-nav a:hover {
    border-color: #1db954;
    transform: translateY(-1px);
}
.concept-nav .label {
    display: block;
    color: #888;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.concept-nav .center { background-color: #1a2a1a; border-color: #1db954; }
.concept-nav .center .label { color: #1db954; }
.concept-nav .disabled {
    opacity: 0.4;
    pointer-events: none;
}
@media (max-width: 600px) {
    .concept-nav { grid-template-columns: 1fr; }
}

.related-concepts {
    background-color: #2c2c2c;
    border-left: 4px solid #c9a66b;
    border-radius: 8px;
    padding: 16px 22px;
    margin: 24px 0;
}
.related-concepts h3 {
    color: #c9a66b;
    margin: 0 0 10px;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.related-concepts ul { margin: 0; padding-left: 18px; }
.related-concepts li { color: #dcdcdc; font-size: 0.92em; margin-bottom: 6px; line-height: 1.5; }
.related-concepts a { color: #1db954; text-decoration: none; }
.related-concepts a:hover { text-decoration: underline; }
.related-concepts .blurb { color: #888; }

/* ==========================================================================
   Figures — diagrams and photos integrated into content pages.
   Use <figure class="diagram"> for FAA-style line drawings, scans, and
   technical illustrations (white-bg padding helps transparent PNGs read on
   the dark theme). Use <figure class="photo"> for full-bleed photography.
   Captions get italic muted text; .src spans render attribution muted further.
   ========================================================================== */
figure.diagram,
figure.photo {
    margin: 22px auto;
    max-width: 900px;
    text-align: center;
}
figure.diagram img,
figure.photo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}
figure.diagram img {
    background: #fafafa;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
figure.diagram figcaption,
figure.photo figcaption {
    margin-top: 10px;
    color: #b8b8b8;
    font-size: 0.88em;
    font-style: italic;
    line-height: 1.5;
}
figure.diagram .src,
figure.photo .src {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 0.85em;
    font-style: normal;
}
@media (max-width: 600px) {
    figure.diagram img { padding: 8px; }
    figure.diagram, figure.photo { margin: 16px auto; }
}

/* ==========================================================================
   Color-coded marking text.
   When prose names a real-world color-coded thing (instrument arc, fuel
   placard, beacon, airspace shading, position light) we render the color
   word in that color so the eye can match prose to the diagram or photo.
   The rule: color the word only when you can point at the thing and it IS
   that color. Idioms like "red flag" or "green light" stay plain.
   Distinct from .links/headings (which use brand green #1db954) — these
   tokens are brighter and bold so they read as color labels.
   ========================================================================== */
.mark-green   { color: #1ed760; font-weight: 600; }
.mark-yellow  { color: #ffd84d; font-weight: 600; }
.mark-red     { color: #ff5252; font-weight: 600; }
.mark-blue    { color: #4a9eff; font-weight: 600; }
.mark-magenta { color: #d878ff; font-weight: 600; }
.mark-amber   { color: #ffb04d; font-weight: 600; }
/* Print: keep colors readable on white paper. */
@media print {
    .mark-green   { color: #138a3f !important; }
    .mark-yellow  { color: #8a6a00 !important; }
    .mark-red     { color: #b00020 !important; }
    .mark-blue    { color: #1059b3 !important; }
    .mark-magenta { color: #8a2bb8 !important; }
    .mark-amber   { color: #a35a00 !important; }
}

/* ==========================================================================
   Print stylesheet — turn any content page into a clean study packet.
   Hides site chrome (topbar, sidebar, notes widget, footer, study-tools
   callouts, prev/next nav). Resets dark theme to ink-on-paper. Adds page-
   break hints so course-cards and concept-heros don't split mid-block.
   ========================================================================== */

@media print {
    @page { margin: 0.6in 0.7in; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11pt;
        line-height: 1.45;
    }

    /* Hide every element that's only useful on screen. */
    .topbar, .topnav, .subnav, .nav-toggle-checkbox, .hamburger,
    .topnav-overlay, footer, .breadcrumb,
    .study-tools-callout, .concept-nav, .nav-context,
    .topbar-search, .topbar-support,
    #notes-widget, #notes-fab, #notes-panel,
    #feedback-fab, #feedback-overlay { display: none !important; }

    /* Full-width main; no chrome offsets. */
    main {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Headings: serif body, sans headings, avoid orphan headings. */
    h1, h2, h3, h4, h5 {
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #000 !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    h1 { font-size: 22pt; margin: 0 0 12pt; }
    h2 { font-size: 15pt; margin: 16pt 0 6pt; }
    h3 { font-size: 12pt; margin: 12pt 0 4pt; }

    p, li { orphans: 3; widows: 3; }

    /* Links: black underlined. External URLs printed in parens; internal
       links keep just the underline so the page doesn't fill with /courses/... */
    a, a:visited { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8.5pt;
        color: #555;
        word-break: break-all;
    }

    /* Content blocks: light borders, no fills. */
    .course-card {
        background: transparent !important;
        border: 0.5pt solid #888 !important;
        border-radius: 0 !important;
        padding: 8pt 12pt !important;
        margin: 0 0 10pt !important;
        page-break-inside: avoid;
    }
    .concept-hero {
        background: transparent !important;
        border: none !important;
        border-left: 3pt solid #000 !important;
        padding: 0 0 0 12pt !important;
        margin: 0 0 14pt !important;
        page-break-inside: avoid;
    }
    .concept-hero h1 { color: #000 !important; }
    .concept-hero .summary { color: #000 !important; font-size: 11pt; }
    .related-concepts {
        background: transparent !important;
        border: none !important;
        border-top: 1pt solid #000 !important;
        padding: 8pt 0 0 !important;
        margin-top: 14pt;
        page-break-inside: avoid;
    }
    .related-concepts h3 { color: #000 !important; }
    .related-concepts a { color: #000 !important; }
    .related-concepts .blurb { color: #444 !important; }

    /* Warning boxes: keep distinct as a "callout" but greyscale. */
    .warning-box {
        background: #f3f3f3 !important;
        border-left: 3pt solid #000 !important;
        color: #000 !important;
        padding: 6pt 10pt !important;
        page-break-inside: avoid;
    }
    .warning-box p { color: #000 !important; }

    /* Concept tile grids print as a vertical list. */
    .concept-grid { display: block !important; gap: 0 !important; }
    .concept-tile {
        background: transparent !important;
        border: 0.5pt solid #aaa !important;
        padding: 5pt 10pt !important;
        margin: 3pt 0 !important;
        display: block !important;
        page-break-inside: avoid;
    }
    .concept-tile h4 { color: #000 !important; margin: 0 0 2pt !important; font-size: 11pt; }
    .concept-tile p { color: #000 !important; margin: 0 !important; font-size: 10pt; }
    .concept-section-label { color: #000 !important; font-size: 12pt; margin-top: 14pt; }

    /* Code + pre: greyscale-friendly. */
    code, pre {
        background: #f3f3f3 !important;
        color: #000 !important;
        font-family: "Courier New", monospace;
        font-size: 9pt;
    }
    pre {
        border: 0.5pt solid #aaa !important;
        padding: 6pt 8pt !important;
        page-break-inside: avoid;
        white-space: pre-wrap;
    }

    /* Tables — keep gridlines, force visible borders. */
    table { border-collapse: collapse; page-break-inside: avoid; }
    th, td { border: 0.5pt solid #888 !important; padding: 4pt 6pt; color: #000 !important; }

    /* Images — never overflow the page; never split. */
    img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }

    /* Glossary auto-links: drop the dotted underline + tooltip pseudo-content. */
    .glossary-auto-link {
        color: #000 !important;
        text-decoration: none !important;
        border-bottom: none !important;
    }
    .glossary-tip { display: none !important; }

    /* Further-reading aside: keep, simplified. */
    .further-reading {
        background: transparent !important;
        border: none !important;
        border-top: 1pt solid #000 !important;
        padding: 8pt 0 0 !important;
        page-break-inside: avoid;
    }
    .further-reading h3 { color: #000 !important; }
    .fr-tag { background: #eee !important; color: #000 !important; border: 0.5pt solid #888 !important; }

    /* Figures — keep visible; drop dark-theme padding/shadow. */
    figure.diagram, figure.photo {
        margin: 12pt auto !important;
        page-break-inside: avoid;
    }
    figure.diagram img {
        background: transparent !important;
        padding: 0 !important;
        border: 0.5pt solid #888 !important;
        box-shadow: none !important;
    }
    figure.diagram figcaption,
    figure.photo figcaption {
        color: #000 !important;
        font-size: 9.5pt !important;
        font-style: italic;
    }
    figure.diagram .src,
    figure.photo .src { color: #444 !important; }
}

/* === VIDEO ASIDE (per-page video sidebar) === */
/* Fixed-right panel pinned to the viewport on wide screens. Below 1700px
   it falls back to an inline block appended to <main>. The JS module
   handles mounting in the right place based on a matchMedia query. */
.video-aside {
    background-color: #1f1f1f;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
}
.video-aside.is-fixed {
    position: fixed;
    top: 80px;
    /* Anchor just outside main's right edge. Main is centered (max-width 1100),
       so the aside hugs the reading column on wide screens instead of floating
       in dead space at the viewport edge. */
    left: calc(50% + 550px + 24px);
    width: 320px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    z-index: 50;
}
.video-aside.is-inline {
    margin: 36px 0 8px;
}
.video-aside h3 {
    margin: 0 0 4px;
    color: #1db954;
    font-size: 0.95em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.video-aside .va-subtitle {
    margin: 0 0 14px;
    color: #888;
    font-size: 0.78em;
}
.video-aside .va-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.video-aside .va-card {
    background-color: #2c2c2c;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease;
    text-align: left;
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
}
.video-aside .va-card:hover {
    border-color: #1db954;
    transform: translateY(-1px);
}
.video-aside .va-card[data-locked="true"]:hover { border-color: #c9a66b; }
.video-aside .va-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #111;
    background-size: cover;
    background-position: center;
}
.video-aside .va-thumb.is-placeholder {
    background-image:
        linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    background-size: auto;
}
.video-aside .va-thumb.is-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.02) 0,
        rgba(255,255,255,0.02) 8px,
        transparent 8px,
        transparent 16px
    );
}
.video-aside .va-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.video-aside .va-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.video-aside .va-play::before {
    content: '';
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}
.video-aside .va-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: rgba(0,0,0,0.7);
    color: #c9a66b;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 12px;
    z-index: 1;
    letter-spacing: 0.04em;
}
.video-aside .va-badge.free { color: #1db954; }
.video-aside .va-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0,0,0,0.75);
    color: #ddd;
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 4px;
    z-index: 1;
}
.video-aside .va-meta {
    padding: 10px 12px 12px;
}
.video-aside .va-title {
    margin: 0;
    color: #e8e8e8;
    font-size: 0.92em;
    line-height: 1.35;
}
.video-aside .va-type {
    margin: 4px 0 0;
    color: #888;
    font-size: 0.75em;
}

/* Hide on narrow viewports — videos still accessible inline below content. */
@media (max-width: 700px) {
    .video-aside.is-inline { padding: 14px; }
}

/* Modal player (used for both video and GIF lightbox). */
.va-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}
.va-modal-inner {
    position: relative;
    width: min(960px, 100%);
    max-height: 90vh;
}
.va-modal-inner iframe,
.va-modal-inner video,
.va-modal-inner img {
    width: 100%;
    max-height: 90vh;
    background-color: #000;
    border-radius: 8px;
    border: 0;
    display: block;
}
.va-modal-inner iframe,
.va-modal-inner video {
    aspect-ratio: 16 / 9;
    height: auto;
}
.va-modal-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6em;
    cursor: pointer;
    padding: 4px 12px;
}
.va-modal-locked {
    background-color: #1f1f1f;
    border-radius: 12px;
    padding: 32px;
    color: #ddd;
    text-align: center;
    max-width: 480px;
}
.va-modal-locked h3 {
    color: #c9a66b;
    margin: 0 0 12px;
}
.va-modal-locked p { margin: 0 0 18px; line-height: 1.5; }