/* ════════════════════════════════════════════════════════════
   JOIN.CSS — extracted from join.php inline styles.
   v3: design tokens added. The site defines :root vars per-page
   (index.php, login.php, ...) and join.php never had them, so
   every var(--navy)/var(--gold) on this page silently failed —
   white hero, invisible h1, blank submit button on mobile.
   ════════════════════════════════════════════════════════════ */

:root{
    --navy:#0f1f3d;
    --navy-lt:#1a3260;
    --gold:#b8942a;
    --gold-lt:#d4ac42;
    --gold-bg:#fdf8ee;
    --text:#0f1f3d;
    --muted:#64748b;
    --light:#f8fafc;
    --white:#ffffff;
    --border:#e2e8f0;
    --border-dk:#cbd5e1;
    --danger:#dc2626;
    --shadow-sm:0 1px 3px rgba(15,31,61,0.06),0 1px 2px rgba(15,31,61,0.04);
    --shadow-md:0 4px 16px rgba(15,31,61,0.08),0 2px 6px rgba(15,31,61,0.04);
    --shadow-lg:0 20px 48px rgba(15,31,61,0.10),0 4px 12px rgba(15,31,61,0.06);
}

.join-hero{background:var(--navy);padding:6rem 0 5rem;position:relative;overflow:hidden}
.join-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 70% 40%,rgba(184,148,42,0.07) 0%,transparent 60%)}
.join-hero-inner{max-width:680px;position:relative}
.join-kicker{font-size:0.72rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}
.join-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,5vw,3.75rem);font-weight:600;color:#fff;line-height:1.1;margin-bottom:1.25rem;letter-spacing:-0.02em}
.join-hero p{font-size:1.05rem;font-weight:300;color:rgba(255,255,255,0.55);line-height:1.8;max-width:560px}

.join-body{padding:5rem 0}
.join-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}

.join-sidebar h2{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;color:var(--navy);margin-bottom:1rem}
.join-sidebar p{font-size:0.9rem;color:var(--muted);line-height:1.8;margin-bottom:1.5rem}
.criteria-list{list-style:none;padding:0;margin-bottom:2rem}
.criteria-list li{display:flex;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid var(--border);font-size:0.875rem;color:var(--text);line-height:1.6}
.criteria-list li::before{content:'—';color:var(--gold);font-weight:700;flex-shrink:0;margin-top:1px}
.join-note{background:var(--light);border-left:3px solid var(--gold);padding:1rem 1.25rem;border-radius:0 8px 8px 0;font-size:0.825rem;color:var(--muted);line-height:1.7}

.join-form{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2.5rem;box-shadow:0 4px 24px rgba(15,31,61,0.07)}
.join-form h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--navy);margin-bottom:0.25rem}
.join-form .sub{font-size:0.825rem;color:var(--muted);margin-bottom:1.5rem}

.field{margin-bottom:1.25rem}
.field label{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);margin-bottom:0.45rem}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:'Barlow',sans-serif;font-size:0.875rem;color:var(--text);outline:none;transition:border-color 0.15s,box-shadow 0.15s;background:var(--white);box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,31,61,0.06)}
.field textarea{resize:vertical;min-height:100px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ── SUBMIT BUTTON — mobile fix applied ─────────────────────
   1. -webkit-appearance:none stops iOS Safari from overriding
      the custom background (the "blank/washed out" rendering).
   2. -webkit-tap-highlight-color removes the grey tap overlay.
   3. :hover gated behind @media(hover:hover) so touch devices
      never get a stuck hover state.                            */
.submit-btn{
    width:100%;
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:13px;
    font-family:'Barlow',sans-serif;
    font-size:0.9rem;
    font-weight:600;
    cursor:pointer;
    transition:background 0.18s;
    margin-top:0.5rem;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
}
.submit-btn.gold{background:var(--gold);color:#fff}
@media(hover:hover){
    .submit-btn:hover{background:#1a3a7a}
    .submit-btn.gold:hover{background:#a07820}
}
.submit-btn:active{opacity:0.88}

.error-box{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:0.875rem 1rem;font-size:0.875rem;color:#991b1b;margin-bottom:1.5rem}
.success-wrap{text-align:center;padding:3rem 2rem}
.success-wrap h2{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--navy);margin-bottom:1rem}
.success-wrap p{font-size:0.9rem;color:var(--muted);line-height:1.8;max-width:440px;margin:0 auto 1.5rem}

/* Lane toggle */
.lane-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:1.75rem}
.lane-btn{padding:0.875rem 1rem;font-size:0.825rem;font-weight:600;color:var(--muted);background:var(--light);border:none;cursor:pointer;transition:all 0.15s;text-align:center;font-family:'Barlow',sans-serif;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.lane-btn.active{background:var(--navy);color:#fff}
.lane-btn:first-child{border-right:1.5px solid var(--border)}
.lane-divider{display:flex;align-items:center;gap:0.75rem;margin:1.25rem 0;font-size:0.75rem;color:var(--muted)}
.lane-divider::before,.lane-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── REACH OUT / HR CONTACT ─────────────────────────────────
   A calm, human sign-off under the form: framed photo (Catalina),
   short encouraging note, and a direct email. Full width so it shows
   on mobile too (the sidebar is hidden there). */
.join-reach{display:flex;gap:2rem;align-items:center;margin-top:3rem;padding:2rem 2.25rem;
    background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);max-width:920px}
.reach-photo{flex-shrink:0}
.reach-photo img{width:132px;height:160px;object-fit:cover;border-radius:12px;border:1px solid var(--border);
    box-shadow:0 6px 20px rgba(15,31,61,0.14);display:block}
.reach-photo-ph{width:132px;height:160px;border-radius:12px;background:linear-gradient(160deg,#132a52,#0f1f3d);
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
    font-family:'Cormorant Garamond',serif;font-size:3.25rem;font-weight:700;color:var(--gold-lt);
    box-shadow:0 6px 20px rgba(15,31,61,0.14)}
.reach-body{flex:1;min-width:0}
.reach-kicker{font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:0.6rem}
.reach-body h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--navy);margin-bottom:0.6rem;line-height:1.15}
.reach-body p{font-size:0.9rem;color:var(--muted);line-height:1.75;margin-bottom:1.1rem;max-width:560px}
.reach-signoff{margin-bottom:1rem}
.reach-name{font-weight:600;color:var(--navy);font-size:0.95rem}
.reach-role{font-size:0.78rem;color:var(--muted);letter-spacing:0.02em}
.reach-email{display:inline-flex;align-items:center;gap:0.5rem;background:var(--gold-bg);border:1px solid rgba(184,148,42,0.35);
    color:var(--gold);font-weight:600;font-size:0.85rem;padding:0.6rem 1rem;border-radius:9px;text-decoration:none;transition:all 0.15s}
.reach-email svg{flex-shrink:0}
@media(hover:hover){.reach-email:hover{background:var(--gold);color:#fff;border-color:var(--gold)}}
@media(max-width:640px){
    .join-reach{flex-direction:column;text-align:center;gap:1.25rem;padding:1.75rem 1.25rem;margin-top:2rem}
    .reach-photo img,.reach-photo-ph{width:120px;height:120px;border-radius:50%}
    .reach-body p{margin-left:auto;margin-right:auto}
    .reach-email{width:100%;justify-content:center}
}

@media(max-width:900px){.join-grid{grid-template-columns:1fr}.join-sidebar{display:none}}
@media(max-width:540px){
    .join-form{padding:1.75rem}
    .field-row{grid-template-columns:1fr}
    /* iOS zooms the viewport when focused inputs are <16px,
       which can shove the submit button out of view. */
    .field input,.field select,.field textarea{font-size:16px}
}