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

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

.form-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 18px 40px -18px rgba(26, 27, 30, 0.18);
    padding: 3rem 3rem 3.5rem;
    position: relative;
}

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

.form-card h2 {
    font-family: 'Schibsted Grotesk', 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--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(--ink-dim);
    margin-bottom: 1.5rem;
}

.form-card h3 a,
.form-card p a,
.form-card label a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(36, 71, 224, 0.35);
}

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

/* Field labels */
.form-card h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--ink);
    margin: 1.4rem 0 0.5rem;
}

.form-card h4 a {
    color: var(--accent);
    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(--line-strong);
    background: var(--paper);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--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(--accent);
    box-shadow: 0 0 0 2px rgba(36, 71, 224, 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(--ink-dim);
    margin: 0.5rem 0 0.5rem;
}

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

/* Section dividers */
.horizontal-bar-inline {
    height: 1px;
    background: var(--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(--accent);
}

/* 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(--accent);
    transform: translateY(1px);
}

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

/* Submit button — matches .btn-ink from the homepage design */
.form-card input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    width: auto;
}

.form-card input[type="submit"]:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

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

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

.fail-msg b,
.fail_msg b {
    color: #c43d2e;
}

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

/* Partner / ambassador / school prefill banner */
.prt-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--paper);
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    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: var(--data-green);
    font-size: 0.9rem;
    font-family: 'IBM Plex Mono', monospace;
}

.gp_info_error {
    color: #c43d2e;
    font-size: 0.9rem;
    font-family: 'IBM Plex Mono', monospace;
}

#teacher_email_info {
    margin-top: 0.4rem;
}

/* =================================================================
   Shared page chrome added in step 03 (language selector, translation
   notice, footer partners row). Lives here because forms.css loads on
   every page via header.php.
   ================================================================= */

/* Language dropdown: 13 entries, two columns */
.nav-drop-lang {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 0.55rem 1.4rem;
}

.nav-drop:hover .nav-drop-lang,
.nav-drop.open .nav-drop-lang {
    display: grid;
}

/* Language links in the mobile slide-in menu */
.mm-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
}

/* Translation notice bar (rendered at top of <body> by menu.php).
   Fixed to the very top; the fixed .site-nav below it is pushed down so
   it no longer overlaps the notice. */
.translation-notice {
    background: var(--ink);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    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: #9db1f7;
}

.site-nav {
    top: 0;
}

.translation-notice ~ .site-nav,
.translation-notice + .site-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;
}

/* Footer partners row */
.footer-partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.9rem;
}

.footer-partner-logos img {
    max-height: 44px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.footer-partner-logos a:hover img {
    opacity: 1;
}

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

    .form-card {
        padding: 1.75rem 1.25rem 2.25rem;
    }

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

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

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