/* =================================================================
   GLRC form pages (submission / application / registration)
   Blueprint design. Reuses the :root variables from index_style.css.
   Targets the shared ichc-derived class names used by the form markup
   and basics.js (.submission-form, .horizontal-bar-inline, etc.).
   ================================================================= */

.form-page {
    padding: 9rem 0 5rem;   /* top clears the fixed nav */
    position: relative;
    z-index: 1;
}

.form-card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--dark-ink);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
    padding: 3rem 3rem 3.5rem;
    position: relative;
}

.form-card .center-wrapper {
    text-align: center;
}

.form-card h2 {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dark-ink);
    margin-bottom: 1.25rem;
}

/* Intro paragraph (the <h3> the pages use for descriptive text) */
.form-card h3 {
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--light-ink);
    margin-bottom: 1.5rem;
}

.form-card h3 a,
.form-card p a,
.form-card label a {
    color: var(--blue-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 68, 204, 0.35);
}

.form-card h3 a:hover,
.form-card p a:hover {
    border-bottom-color: var(--blue-ink);
}

/* Field labels */
.form-card h4 {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: var(--dark-ink);
    margin: 1.4rem 0 0.5rem;
}

.form-card h4 a {
    color: var(--blue-ink);
    text-decoration: none;
}

/* Inputs / selects / textareas */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="file"],
.form-card select,
.form-card textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--grid-line);
    background: var(--paper-bg);
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--dark-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    outline: none;
    border-color: var(--blue-ink);
    box-shadow: 0 0 0 2px rgba(0, 68, 204, 0.12);
}

/* The three date-of-birth selects sit side by side */
.form-card select.select-birth {
    width: auto;
    min-width: 30%;
    display: inline-block;
    margin-right: 0.5rem;
}

/* Help text under fields */
.form-card p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--light-ink);
    margin: 0.5rem 0 0.5rem;
}

.form-card p b {
    color: var(--dark-ink);
}

/* Section dividers */
.horizontal-bar-inline {
    height: 1px;
    background: var(--grid-line);
    border: 0;
    margin: 2.5rem 0 1.5rem;
    position: relative;
}

.horizontal-bar-inline::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 48px;
    height: 3px;
    background: var(--blue-ink);
}

/* Checkboxes / radios inline with their labels */
.form-card input[type="checkbox"],
.form-card input[type="radio"] {
    width: auto;
    margin-right: 0.4rem;
    accent-color: var(--blue-ink);
    transform: translateY(1px);
}

.rules-check-span {
    font-size: 0.92rem;
}

/* Submit button , blueprint primary */
.form-card input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--blue-ink);
    color: #fff;
    border: 1px solid var(--blue-ink);
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    width: auto;
}

.form-card input[type="submit"]:hover {
    background: #003399;
}

/* Recaptcha centering */
.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* Failure message (from ?status=failed) */
.fail-msg,
.fail_msg {
    background: #fff5f3;
    border: 1px solid var(--alert);
    border-left: 4px solid var(--alert);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--dark-ink);
}

.fail-msg b,
.fail_msg b {
    color: var(--alert);
}

.fail-msg a,
.fail_msg a {
    color: var(--blue-ink);
}

/* Partner / ambassador / school prefill banner */
.prt-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--paper-bg);
    border: 1px solid var(--blue-ink);
    border-left: 4px solid var(--blue-ink);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.prt-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

.prt-logo {
    max-height: 60px;
    width: auto;
}

/* Live teacher-email verification feedback (school registration) */
.gp_info_ok {
    color: #0a7a3d;
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

.gp_info_error {
    color: var(--alert);
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

#teacher_email_info {
    margin-top: 0.4rem;
}

/* Translation notice bar (rendered at top of <body> by menu.php).
   Fixed to the very top; the .blueprint-nav below it is pushed down so the
   fixed navbar no longer overlaps the notice. */
.translation-notice {
    background: var(--dark-ink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1200;
}

.translation-notice p {
    margin: 0;
}

.translation-notice a {
    color: #5b8dff;
}

/* When the notice is present, push the fixed navbar (and any fixed nav variant)
   down by the notice height, and give the page top spacing so nothing hides
   under the bar. The notice sits immediately before .blueprint-nav in the DOM. */
.translation-notice ~ .blueprint-nav,
.translation-notice + .blueprint-nav {
    top: 2.25rem;
}

/* Page content already reserves space for the fixed navbar; when the notice
   bar is present the navbar moved down 2.25rem, so shift the whole page down
   by the same amount so nothing ends up hidden under the bar or the navbar. */
body:has(.translation-notice) {
    padding-top: 2.25rem;
}

@media (max-width: 768px) {
    .form-page {
        padding: 7rem 1rem 3rem;
    }

    .form-card {
        padding: 1.75rem 1.25rem 2.25rem;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
    }

    .form-card h2 {
        font-size: 1.8rem;
    }

    .form-card select.select-birth {
        min-width: 100%;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .prt-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}