/* ============================================================================
   responsive.css -- added 2026-09-15 (phase 5 of the refactor)

   Loaded AFTER cas.css and deliberately does not modify it. cas.css is 295
   lines of 2010 layout built on fixed pixel widths and floats; rewriting it
   would mean re-checking every page on a site whose desktop rendering is
   nobody's complaint. This file relaxes the fixed widths into maximums, then
   restacks the layout below 800px.

   The audience is school children, who are overwhelmingly on phones and
   school tablets, and until now the site had no viewport meta tag at all --
   so a phone rendered the 780px desktop layout scaled down to illegibility.
   ============================================================================ */

/* ---- Fixed widths become maximums. No visible change on a desktop. ---- */

#container,
#header,
#footer {
    width: auto;
    max-width: 780px;
    box-sizing: border-box;
}

#header {
    /* Was a 780x158 background image on a fixed-size box. Scale it instead so
       it shrinks with the container rather than being cropped. */
    background-size: contain;
    background-position: left top;
    width: 100%;
    height: auto;
    aspect-ratio: 780 / 158;
}

#content,
#contentleft,
#contentfull,
#contentnomenu {
    max-width: 100%;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Tables here are data, not layout, and some are wider than a phone. Let them
   scroll on their own rather than stretching the page. */
#contentleft table,
#contentfull table,
#contentnomenu table {
    max-width: 100%;
}

/* ---- Narrow screens: stop floating, start stacking. ---- */

@media screen and (max-width: 800px) {

    #container {
        max-width: 100%;
        padding: 0 12px;
    }

    /* The nav is a 150px left column floated beside a 630px content column.
       Below 800px there is no room for two columns, so the nav becomes a row
       of links above the content. */
    #navbar,
    #content,
    #contentleft,
    #contentfull,
    #contentnomenu {
        float: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    #navlist {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0;
        margin: 8px 0;
    }

    #navlist li {
        list-style: none;
        margin: 0;
    }

    #navlist a {
        display: block;
        padding: 8px 10px;
    }

    /* The grey sidebar box floats right at 110px wide; full width reads far
       better than a narrow column on a phone. */
    #box {
        float: none;
        width: auto;
        margin-left: 0;
    }

    /* cas.css gives every fieldset `width: 45em`, which is about 720px and is
       what actually pushed the page sideways on a phone -- not the tables. */
    fieldset {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Survey and registration forms are label/field pairs where the label is a
       10em left-floated column. Stack them instead. */
    fieldset label,
    fieldset .label,
    label {
        float: none;
        display: block;
        width: auto;
        text-align: left;
        margin-right: 0;
    }

    /* Form controls that were sized in ems on a desktop column. */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Touch targets. The survey is 56 questions on a phone; small radios are
       the difference between finishing it and giving up. */
    input[type="radio"],
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    input[type="submit"],
    button {
        padding: 10px 16px;
        font-size: 1em;
    }

    /* Data tables get their own scroller instead of forcing the page wide.
       NOT nowrap: that forces every table to its widest possible line, which
       pushed the whole page sideways rather than only the table. */
    #contentleft table,
    #contentfull table,
    #contentnomenu table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Tables used for FORM LAYOUT are the other case entirely: they hold
       label/field pairs and should reflow to the screen, not scroll. Almost
       every form in this app is laid out in a table, including the 56-question
       survey. */
    #contentleft form table,
    #contentfull form table,
    #contentnomenu form table {
        display: table;
        width: 100%;
        table-layout: fixed;
        overflow-x: visible;
    }

    #contentleft form table td,
    #contentfull form table td,
    #contentnomenu form table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    #footer {
        height: auto;
        padding: 10px 0;
    }
}

/* ---- Phones. ---- */

@media screen and (max-width: 480px) {

    body {
        font-size: 100%;
    }

    #container {
        padding: 0 8px;
    }
}