/* ─────────────────────────────────────────────────────────
   StockShroom — Responsive overrides
   Tablet: ≤ 768px   |   Phone: ≤ 480px
───────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* ── Header ── */
    header {
        flex-wrap: wrap;
        padding: 16px 20px;
        gap: 8px;
    }
    .header-text h1 { font-size: 2rem; }
    .header-text p  { font-size: 0.9rem; margin-top: 4px; }
    .header-logo img { height: 64px; }
    .header-review {
        width: 100%;
        text-align: center;
        padding: 6px 0 2px;
        border-top: 1px solid #0f3460;
        margin-top: 4px;
    }

    /* ── Main padding ── */
    main { margin: 20px auto; padding: 0 14px; }

    /* ── Index: mission statement ── */
    .mission-statement { padding: 16px 18px; font-size: 0.95rem; }

    /* ── Index: nav grid ── */
    .nav-grid { grid-template-columns: 1fr; gap: 16px; }
    .nav-box  { padding: 28px 20px; }

    /* ── Index: graduating class box ── */
    .grad-row { margin-top: 16px; }
    .grad-box { width: 100%; padding: 18px 24px; }

    /* ── Filing rows (filings / verge / volume / graduate) ── */
    .filing-main {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .actions-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    /* ── News: company header & indented list ── */
    .company-header { grid-template-columns: 1fr !important; }
    .news-list { padding: 12px 16px; }

    /* ── Chart page ── */
    #chart-container { height: 300px; }
    .chart-header { flex-wrap: wrap; gap: 8px; }

    /* ── Verge / graduate: page-header ── */
    .page-header h2 { font-size: 1.2rem; }

    /* ── Review page ── */
    .review-header h2 { font-size: 1.5rem; }
    .review-body { font-size: 0.97rem; line-height: 1.75; }
}

@media (max-width: 480px) {

    /* ── Header ── */
    .header-text h1 { font-size: 1.6rem; letter-spacing: 1px; }
    .header-logo img { height: 50px; }
    .header-review a { font-size: 0.92rem; }

    /* ── Tickers & badges ── */
    .ticker-col .ticker { font-size: 1.1rem; }
    .ticker { font-size: 1.1rem; }

    /* ── Buttons ── */
    .toggle-btn { font-size: 0.75rem; padding: 4px 8px; }

    /* ── Nav boxes ── */
    .nav-box-title { font-size: 1.1rem; }
    .nav-box-desc  { font-size: 0.85rem; }

    /* ── Grad box ── */
    .grad-box { padding: 16px 18px; gap: 12px; }
    .grad-box .gold-shroom { font-size: 1.8rem; }

    /* ── Back link ── */
    .back-link { font-size: 0.82rem; }

    /* ── h2 headings ── */
    h2 { font-size: 1.2rem !important; }
}