/* ============================================================
   Responsive refinements — 2026
   ------------------------------------------------------------
   Additive only. Loaded LAST so it overrides landing.css/gridiculous
   without editing them. No color changes — layout and overflow only.

   The original pages predate the viewport meta tag being set correctly,
   so on phones they rendered zoomed-out rather than reflowed. The meta
   tag is now fixed in the pages; these rules handle what reflowing
   exposes (the floated utility nav and unconstrained images).
   ============================================================ */

/* Nothing should be able to push the page wider than the viewport. */
img {
    max-width: 100%;
    height: auto;
}

/* Header utility nav (Education | About | Login | language flag).
   Right-aligned with text-align, NOT a float. It is the only child of its
   column, and a float would collapse that column to zero height — which is
   exactly the bug that made this nav disappear behind the hero background. */
.util-nav {
    text-align: right;
    font-size: x-large;
}

.util-nav .btn-link {
    display: inline-block;
}

/* Nothing should be able to push the page wider than the viewport. */
body {
    overflow-x: hidden;
}

/* ---------- Tablet and below ---------- */
@media only screen and (max-width: 1025px) {
    .util-nav {
        font-size: large;
    }
}

/* ---------- Phones ---------- */
@media only screen and (max-width: 767px) {
    .util-nav {
        font-size: 1rem;
        text-align: center;
        padding: 12px 0;
        line-height: 2;
    }

    /* Full-width shot on a phone; 75% would leave it stranded. */
    .browser-chrome {
        width: 100%;
    }

    .logo,
    .logoright {
        max-width: 45%;
        height: auto;
    }

    .bannerH1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    /* The signup form column is full-width on a phone; keep its controls
       comfortably tappable rather than shrunk into the old 2-col layout. */
    .signUpForm .form-control {
        font-size: 16px; /* 16px avoids iOS Safari's auto-zoom on focus */
    }

    /* The card's 28px padding is too generous once it spans the full width of
       a phone, and its desktop cap / right-alignment must not strand it to
       one side of the column. */
    .signup-card {
        padding: 20px;
        border-radius: 8px;
        max-width: none;
        margin-left: 0;
    }

    .signup-card .formHeading {
        font-size: 22px;
    }

    /* The Qualtrics survey pop image is absolutely placed on desktop;
       don't let it overlap content on a phone. */
    .pop-mobile img {
        max-width: 100%;
    }
}