/* =========================================================================
   savethecape.space, narrow screens

   The one decision that matters here: the calendar is a side panel on a wide
   screen, and on a phone it becomes a block placed HIGH, directly after the
   opening argument rather than at the bottom. The next meeting date is the
   most useful thing on this site and most residents arrive from a shared link
   on a phone.
   ========================================================================= */

@media (max-width: 60rem) {
    :root { --shell: min(1180px, calc(100% - 36px)); }

    .main-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .calendar { position: static; }
    /* Source order puts the calendar last, which keeps the reading order sane
       for a screen reader. Grid order moves the box to where a thumb finds it. */
    .main-columns .calendar { order: -1; }
    .main-body { order: 1; }

    .sql-console, .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
    :root { --shell: min(1180px, calc(100% - 28px)); }

    .nav-toggle { display: block; order: 3; }

    .site-nav {
        display: none;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-top: 12px;
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 13px 18px; }
    .pending-group { padding-top: 8px; }

    .hero { padding: 28px 0 4px; }
    .hero-inner { padding: 32px 26px; border-radius: var(--r); }

    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    .comment-form { padding: 22px; }
    .admin-panel { padding: 20px; }

    /* A button a thumb can hit. */
    .button { padding: 15px 26px; }
    .button-row .button { flex: 1 1 auto; text-align: center; }

    .figures { grid-template-columns: minmax(0, 1fr); }

    /* Table rows become cards, because a four column table on a phone is a
       horizontal scroll nobody performs. */
    .admin-table thead { display: none; }
    .admin-table tr { display: block; margin-bottom: 12px; }
    .admin-table td { display: block; border-radius: 0; }
    .admin-table td:first-child { border-radius: var(--r) var(--r) 0 0; }
    .admin-table td:last-child { border-radius: 0 0 var(--r) var(--r); }
}

@media (max-width: 30rem) {
    .brand-words span { display: none; }

    /* A float this narrow leaves a column of two or three words beside it,
       which is worse than no float at all. Below this width the picture stops
       floating and sits on its own above the text. */
    .shot-thumb { float: none; clear: none; width: 100%; max-width: 320px; margin: 0 auto 20px; }
}

/* Somebody who asked for less movement gets less movement. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The page should survive being printed, for a resident handing the argument
   to a neighbour who does not use the web. */
@media print {
    .site-header, .site-footer, .editor-bar, .comment-form, .breadcrumb-bar,
    .button-row, .nav-toggle { display: none !important; }
    body { background: #fff; font-size: var(--fs-ui); }
    .main-columns { display: block; }
    .hero-inner, .calendar, .comment, .update { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; }
}