/* =========================================================================
   family.hughes.team — Shared responsive overrides
   Designed to keep the site usable on small laptops (Chromebook 1366×768)
   where browser chrome leaves ~660px of real vertical space.
   Loaded after each page's inline <style> so cascade wins without !important
   most of the time; !important used only where inline rules use very high
   specificity (e.g. .topic .topic-header) and would otherwise dominate.
   ========================================================================= */

/* ---------- Compact horizontals: tighten container padding -------------- */
@media (max-width: 1400px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .desktop  { padding-left: 8px;  padding-right: 8px;  }
}

/* ---------- Short-viewport mode: trim vertical chrome ------------------- */
/* Triggered for any laptop ≤ 800px tall (Chromebook ~660–768) */
@media (max-height: 800px) {
    .hero            { padding: 12px 18px !important; margin-bottom: 12px !important; }
    .hero-title      { font-size: 22px !important; line-height: 1.1 !important; }
    .hero-subtitle   { font-size: 14px !important; margin-top: 2px !important; }

    /* CCEA spec overview panel (gcse-maths, ccea-notes-*) */
    .ccea-overview        { padding: 10px 14px !important; margin-bottom: 12px !important; }
    .ccea-overview h3,
    .ccea-overview .panel-title { font-size: 13px !important; margin: 0 0 6px 0 !important; }
    .ccea-overview p      { font-size: 14px !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; }
    .pathway-pills        { margin-bottom: 8px !important; gap: 6px !important; }
    .pathway-pill         { padding: 4px 10px !important; font-size: 9px !important; }
    .unit-cards           { gap: 8px !important; }
    .unit-card            { padding: 7px 10px !important; }
    .unit-card .unit-code { font-size: 10px !important; }
    .unit-card .unit-title{ font-size: 14px !important; margin: 2px 0 !important; line-height: 1.15 !important; }
    .unit-card .unit-meta { font-size: 12px !important; line-height: 1.25 !important; }

    /* Generic page chrome */
    .controls-bar         { padding: 8px 10px !important; gap: 8px !important; }
    .progress-bar-container { padding: 6px 10px !important; }
    .tab-nav              { margin-bottom: 8px !important; }
    .tab-btn              { padding: 6px 14px !important; font-size: 11px !important; }
    .tab-intro            { padding: 8px 12px !important; font-size: 14px !important; margin-bottom: 10px !important; }
    .controls             { gap: 8px !important; padding: 8px !important; }

    /* Reduce search box height so it doesn't dominate */
    .search-box           { padding: 8px 12px !important; font-size: 14px !important; }
}

/* ---------- Unit cards reflow at narrower widths ------------------------ */
@media (max-width: 1100px) {
    .unit-cards { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Mid-tier (tablet / very narrow laptop) ---------------------- */
@media (max-width: 900px) {
    .hero-title    { font-size: 20px !important; }
    .hero-subtitle { font-size: 13px !important; }
    .controls-bar  { flex-wrap: wrap !important; }
    .ctrl-btn      { font-size: 11px !important; padding: 6px 10px !important; }
    .tab-nav       { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
    .tab-btn       { flex-shrink: 0 !important; white-space: nowrap; }
}

/* ---------- Mobile: stack everything ------------------------------------ */
@media (max-width: 700px) {
    .container       { padding: 10px !important; }
    .unit-cards      { grid-template-columns: 1fr !important; }
    .pathway-pills   { flex-direction: column !important; align-items: stretch !important; }
    .pathway-pill    { width: 100% !important; text-align: center !important; }
    .controls-bar    { flex-direction: column !important; align-items: stretch !important; }
    .controls-bar > *{ width: 100% !important; box-sizing: border-box !important; }
    .hero            { padding: 14px 12px !important; }
    .hero-title      { font-size: 18px !important; }
    .hero-subtitle   { font-size: 12px !important; }

    /* Tables shrink */
    table            { font-size: 12px !important; }
    table th, table td { padding: 4px 6px !important; }

    /* Win95 taskbar wraps */
    .taskbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 4px 6px !important;
    }
    .taskbar a, .taskbar-btn, .taskbar .start-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Win95 desktop icons reflow */
    .desktop-icons-right,
    .desktop-icons {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
        gap: 6px !important;
        margin: 8px 0 !important;
    }

    /* Floating Win95 windows on small screens become flow */
    .draggable-window,
    .win95-window {
        position: static !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
    }
}

/* ---------- Consent banner: keep compact at any size -------------------- */
#consentBanner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}
#consentBanner > div { gap: 8px !important; }
#consentBanner span  { font-size: 13px !important; }
@media (max-width: 700px) {
    #consentBanner { font-size: 12px !important; padding: 6px 10px !important; bottom: 36px !important; }
    #consentBanner button, #consentBanner a { font-size: 13px !important; padding: 4px 10px !important; }
}

/* ---------- Topic body: tighter at small heights ------------------------ */
@media (max-height: 800px) {
    .topic-body { padding: 12px 14px !important; }
    .topic-header { padding: 8px 12px !important; }
    .topic-title  { font-size: 14px !important; }
}

/* ---------- Reduced motion safety --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}