/* ==========================================================================
   Chaplain Applicant Portal — shared design system
   Matches the palette used across the main site and the chaplain admin so
   the whole application experience feels like one product.
   ========================================================================== */

:root {
    --apply-navy: #0c1826;
    --apply-navy-light: #1b2c42;
    --apply-gold: #b8923f;
    --apply-gold-tint: rgba(184, 146, 63, 0.14);
    --apply-bg: #f3f5f8;
    --apply-surface: #ffffff;
    --apply-text: #1c2430;
    --apply-muted: #5b6472;
    --apply-border: #d7dde6;
    --apply-danger: #a4322a;
    --apply-danger-bg: #fbe9e7;
    --apply-radius: 10px;
    --apply-shadow: 0 2px 10px rgba(12, 24, 38, 0.08);
    --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: var(--apply-bg);
    font-family: var(--font-body);
    color: var(--apply-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--apply-navy); }

/* ---- Header ---------------------------------------------------------- */

.apply-header {
    background: var(--apply-navy);
    color: #fff;
    padding: 1.1rem 0;
    text-align: center;
    border-bottom: 4px solid var(--apply-gold);
}
.apply-header img { height: 140px; margin-bottom: 0.5rem; }
@media (max-width: 600px) { .apply-header img { height: 90px; } }
.apply-header-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }

/* ---- Containers -------------------------------------------------------- */

.apply-container, .app-container, .blocked-box, .logout-box {
    max-width: 720px;
    margin: 2.5rem auto;
    background: var(--apply-surface);
    border: 1px solid var(--apply-border);
    border-radius: var(--apply-radius);
    padding: 2rem;
    box-shadow: var(--apply-shadow);
}
.blocked-box, .logout-box { max-width: 520px; text-align: center; }
.blocked-box h2 { margin-bottom: 1.25rem; color: var(--apply-danger); }
.blocked-box p, .logout-box p { margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.55; }
.app-container h1, .app-container h2 { text-align: center; margin-bottom: 1.25rem; }

/* ---- Fields & forms ---------------------------------------------------- */

.apply-field, .form-row, .app-form .form-row {
    margin-bottom: 1.1rem;
}

.apply-field > label, .apply-label, .apply-field label,
.apply-form label, .app-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--apply-navy-light);
}

.apply-field input, .apply-field select, .apply-field textarea,
.apply-form input, .app-form input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--apply-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--apply-surface);
    color: var(--apply-text);
}
.apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus,
.apply-form input:focus, .app-form input:focus {
    outline: none;
    border-color: var(--apply-gold);
    box-shadow: 0 0 0 3px var(--apply-gold-tint);
}

.apply-field input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0 0.5rem 0 0;
    border: none;
    display: inline-block;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-weight: normal;
}

/* ---- Buttons ------------------------------------------------------------ */

.apply-btn, .btn-primary, .blocked-btn {
    display: inline-block;
    background: var(--apply-navy);
    color: #fff;
    padding: 0.7rem 1.25rem;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease;
}
.apply-btn:hover, .btn-primary:hover, .blocked-btn:hover { background: var(--apply-navy-light); }
.btn-primary { width: 100%; }
.apply-actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.apply-actions .apply-btn { flex: 1; }

/* ---- Progress bar -------------------------------------------------------- */

.apply-progress {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 6px;
    margin: 1.25rem 0 0.4rem;
    overflow: hidden;
}
.apply-progress-inner {
    height: 100%;
    background: var(--apply-gold);
    border-radius: 6px;
    transition: width 0.3s ease;
}
.apply-progress-text { font-size: 0.88rem; color: var(--apply-muted); margin-bottom: 1.25rem; }

/* ---- Errors -------------------------------------------------------------- */

.apply-error, .form-errors {
    background: var(--apply-danger-bg);
    color: var(--apply-danger);
    padding: 0.8rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(164, 50, 42, 0.25);
    font-size: 0.92rem;
}

/* ---- Review step ----------------------------------------------------------- */

.review-wrapper .review-section {
    background: var(--apply-bg);
    border: 1px solid var(--apply-border);
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.75rem;
}
.review-wrapper .review-section h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    border-bottom: 2px solid var(--apply-gold);
    padding-bottom: 0.4rem;
}
.review-wrapper .review-section p { margin: 0.35rem 0; }
.review-wrapper .apply-field input[type="text"],
.review-wrapper .apply-field input[type="date"] { width: 100%; }