/* =====================================================================
   Responsive overlay
   ---------------------------------------------------------------------
   This application is built on 1990s-style layout tables: fixed pixel
   widths, `width=100%` attributes, nested <table> elements for structure,
   <font> tags, and inline `bgcolor` attributes. There is no grid and no
   framework.

   The brief was to preserve the existing design, so this file does NOT
   restyle anything. It is a compatibility layer that makes the existing
   markup survive a narrow viewport. It:

     - stops fixed-width tables forcing a horizontal page scroll
     - lets wide data tables scroll inside their own box instead
     - stacks form rows on phones
     - makes form controls large enough to tap (44px, per WCAG 2.5.5)
     - prevents iOS zooming on focus (needs >=16px font on inputs)
     - keeps images inside their container

   Colours, fonts and spacing are deliberately left as they are.

   Load it from classes/common/header.php and the unit/test headers -
   see docs/INSTALL.md step 6.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Stop iOS/Android inflating text in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* The original had `style="margin:10px"` inline; keep that feel but
       let it shrink on small screens. */
    margin: 0;
    padding: 10px;
    /* Belt and braces against a stray wide element. */
    overflow-x: hidden;
}

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

/* Course content uses fixed-width images and iframes heavily. */
iframe, video, embed, object {
    max-width: 100%;
}

/* ---------------------------------------------------------------
   2. Layout tables
   ---------------------------------------------------------------
   Tables used for PAGE STRUCTURE (the outer wrapper, the header bar,
   the nav strip) must collapse to full width. Tables used for DATA
   (the admin student list, progress reports) must stay tabular and
   scroll instead - collapsing those would destroy the column
   relationships the reader needs.
   --------------------------------------------------------------- */

table {
    max-width: 100%;
}

/* The outer page wrapper carries the border in common/header.php. */
table[width="100%"],
table[width='100%'] {
    width: 100% !important;
}

/* Any table given a fixed pixel width in the markup. */
table[width]:not([width="100%"]) {
    max-width: 100%;
}

/* ---------------------------------------------------------------
   3. Scrollable wrapper for wide data tables
   ---------------------------------------------------------------
   Wrap a wide table in <div class="table-scroll"> ... </div>.
   Applied to the admin reports in docs/INSTALL.md step 6.
   --------------------------------------------------------------- */

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* A hairline hints that there is more to the right. */
    border-right: 1px solid transparent;
}

.table-scroll > table {
    min-width: 640px;   /* below this the columns become unreadable */
}

/* ---------------------------------------------------------------
   4. Forms
   --------------------------------------------------------------- */

input, select, textarea, button {
    font-family: inherit;
    max-width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
    /* 16px is the threshold below which iOS Safari zooms on focus. */
    font-size: 16px;
    padding: 8px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #fff;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    /* WCAG 2.5.5 target size. */
    min-height: 44px;
    padding: 10px 18px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
}

/* Radios and checkboxes in the quizzes need a bigger hit area. */
input[type="radio"],
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

label {
    cursor: pointer;
}

/* The original set widths in markup, e.g. <input size="40">. */
input[size] {
    max-width: 100%;
}

/* ---------------------------------------------------------------
   5. Tablet
   --------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    body {
        padding: 8px;
    }

    table[cellpadding="10"] td {
        padding: 8px;
    }
}

/* ---------------------------------------------------------------
   6. Phone
   ---------------------------------------------------------------
   Below 768px the registration form's two-column label/field tables
   are stacked. This is scoped to .form-stack so it cannot accidentally
   flatten a data table.
   --------------------------------------------------------------- */

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

    body {
        padding: 6px;
    }

    /* Header bar: let the school name and the right-hand links wrap
       onto separate lines instead of overflowing. */
    .headlink {
        font-size: 18px !important;
        line-height: 1.3;
        display: inline-block;
        word-break: break-word;
    }

    td[nowrap] {
        white-space: normal !important;
    }

    /* Nav strip ("Home | Contact Us | Logout") becomes tappable. */
    td[align="right"] a,
    td[align=right] a {
        display: inline-block;
        padding: 8px 6px;
        line-height: 1.2;
    }

    /* --- stacked form rows --- */
    .form-stack,
    .form-stack tbody,
    .form-stack tr,
    .form-stack td,
    .form-stack th {
        display: block;
        width: 100% !important;
        max-width: 100%;
    }

    .form-stack td {
        padding: 4px 0 !important;
        text-align: left !important;
    }

    .form-stack tr {
        margin-bottom: 10px;
    }

    .form-stack input[type="text"],
    .form-stack input[type="email"],
    .form-stack input[type="tel"],
    .form-stack input[type="password"],
    .form-stack select,
    .form-stack textarea {
        width: 100%;
    }

    /* Date-of-birth style rows keep their selects inline. */
    .form-stack select + select {
        width: auto;
        min-width: 30%;
        display: inline-block;
    }

    /* Course content pages use fixed-width cells for lesson text. */
    td[width] {
        width: auto !important;
    }

    table[cellpadding="10"] td {
        padding: 6px;
    }

    /* Legacy <font size=...> in the course content. */
    font[size] {
        font-size: inherit !important;
    }
}

/* ---------------------------------------------------------------
   7. Small phone
   --------------------------------------------------------------- */

@media screen and (max-width: 420px) {
    body {
        padding: 4px;
    }

    .headlink {
        font-size: 16px !important;
    }

    input[type="submit"],
    input[type="button"],
    button {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ---------------------------------------------------------------
   8. Print - certificates and receipts
   --------------------------------------------------------------- */

@media print {
    .table-scroll {
        overflow: visible;
    }

    .table-scroll > table {
        min-width: 0;
    }

    /* Navigation is meaningless on paper. */
    .no-print,
    td[align="right"] a {
        display: none !important;
    }
}

/* ---------------------------------------------------------------
   9. Accessibility
   --------------------------------------------------------------- */

a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 3px solid #0a58ca;
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   10. Auth cards (login, password reset)
   ---------------------------------------------------------------------
   The login pages used <fieldset style="width:40%">. A percentage that
   works on a 1400px desktop is a 150px box on a 380px phone, and the
   admin page nested a width:40% table INSIDE it, giving roughly 16% of
   the screen. The submit button sat in a table cell whose label column
   was padded with &nbsp;, which is why it looked misaligned.

   These rules size by content instead of by percentage, and they pick up
   each school's own colours through the CSS variables that
   common/header.php writes out, so a white-label site still looks like
   itself.
   ===================================================================== */

:root {
    /* Fallbacks. common/header.php overrides these per school. */
    --brand:        #6699cc;
    --brand-text:   #ffffff;
    --brand-accent: #999933;

    --card-bg:      #ffffff;
    --card-border:  #d9dee3;
    --text:         #23282d;
    --text-muted:   #5b6770;
    --field-border: #b6bfc7;
    --danger:       #c0392b;
    --radius:       6px;
}

.auth-wrap {
    display: block;
    padding: 32px 16px 48px;
}

.auth-card {
    /* Sized by content, capped - never a percentage. */
    width: 100%;
    max-width: 420px;
    margin: 0 auto;

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06),
                0 8px 24px rgba(16, 24, 40, .07);
    padding: 28px 28px 24px;
    text-align: left;
    box-sizing: border-box;
}

.auth-card__title {
    margin: 0 0 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}

.auth-card__subtitle {
    margin: 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* A thin brand-coloured rule under the title ties the card to the site. */
.auth-card__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 10px;
    background: var(--brand);
    border-radius: 2px;
}

.auth-field {
    margin-bottom: 16px;
}

.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

/* Inputs are block-level and full width, so nothing can sit half off
   the edge of a narrow screen. */
.auth-field input[type="text"],
.auth-field input[type="password"],
.auth-field input[type="email"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 10px 12px;
    font-size: 16px;              /* below 16px iOS zooms on focus */
    line-height: 1.2;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(102, 153, 204, .25);
}

/* The button is its own block, not a table cell. */
.auth-actions {
    margin-top: 22px;
}

.btn-primary {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-text);
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter .12s ease;
}

.btn-primary:hover  { filter: brightness(.93); }
.btn-primary:active { filter: brightness(.86); }

.auth-links {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f4;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.auth-links a {
    color: var(--brand);
    text-decoration: none;
}

.auth-links a:hover { text-decoration: underline; }

/* Messages */
.auth-message {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: var(--radius);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.auth-message--error {
    color: #7f231c;
    background: #fdecea;
    border: 1px solid #f5c6c2;
}

.auth-message--ok {
    color: #1e4620;
    background: #edf7ee;
    border: 1px solid #c3e6c8;
}

.auth-message:empty { display: none; }

/* --- phone --- */
@media screen and (max-width: 600px) {
    .auth-wrap  { padding: 18px 12px 32px; }
    .auth-card  { padding: 22px 18px 20px; max-width: none; }
    .auth-card__title { font-size: 18px; }
}

/* Neutralise the legacy inline widths if an old page still has them. */
.auth-card fieldset,
fieldset.auth-card {
    width: auto !important;
    max-width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
}