/* =========================================
   styles.css – full file (July 2025)
   ========================================= */

/* ---------- 1. THEME VARIABLES ---------- */
:root{
  --bg:#11111B;           /* page background   */
  --panel:#0F1A28;        /* form/intro panel  */
  --fg:#FFFFFF;           /* default text      */
  --input-bg:#162033;     /* dark input (unused for text inputs) */
  --input-border:#2E3A55; /* input/checkbox border               */
  --accent:#2E69FF;       /* blue accent       */
}

/* ---------- 2. RESET / BASICS ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 1rem 2rem;      /* side‑gutters + bottom breathing room */
}

/* ------------- HERO (banner) ------------- */
.hero{
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:hidden;
  background:url("../images/header.png") center/cover no-repeat;
  border-radius:8px;

  /* Comfortable default height for desktops */
  height:240px;
}

/* phone & small tablets */
@media (max-width:640px){
  .hero{ height:180px; }               /* taller than before, looks balanced */
}

/* huge screens (≥1200 px) */
@media (min-width:1200px){
  .hero{ height:280px; }               /* prevent banner from looking tiny */
}
.hero::after{                        /* smooth fade into panel colour   */
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
            rgba(17,17,27,0) 55%,
            var(--panel)     100%);
}

/* ---------- 4. FORM CONTAINER ---------- */
form{
  width:100%;
  max-width:900px;
  background:var(--panel);
  padding:2rem 1.5rem 2.5rem;
  border-radius:0 0 12px 12px;
  box-shadow:0 0 14px rgba(0,0,0,.55);
}
h1{
  font-size:1.75rem;
  text-align:center;
  margin-bottom:1.75rem;
}

/* ---------- 5. SECTION HEADERS ---------- */
.section-title{
  font-size:1.1rem;
  margin:1.5rem 0 .75rem;
  padding-bottom:.25rem;
  border-bottom:1px solid #000;      /* thinner rule                   */
  margin-left:-1.5rem;margin-right:-1.5rem;
  padding-left:1.5rem;padding-right:1.5rem;
}

/* ---------- 6. FIELD GROUP GRID ---------- */
.field-group{
  display:grid;
  gap:1rem;
  margin-bottom:1rem;
}
.field-group.two   {grid-template-columns:1fr 1fr;}
.field-group.three {grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
  .field-group.two,
  .field-group.three{grid-template-columns:1fr;}
}
@media (min-width:768px){           /* desktop breathing room          */
  .field-group{gap:1.5rem;margin-bottom:1.5rem;}
}

/* ---------- 7. LABELS & CONTROLS ---------- */
label{
  font-size:.85rem;
  margin-bottom:.25rem;
  display:block;
}
input,select,textarea{
  width:100%;
  padding:.65rem .75rem;
  border:1px solid var(--input-border);
  border-radius:6px;
  background:var(--input-bg);
  color:var(--fg);
  font-size:1rem;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(46,105,255,.45);
}

/* ---------- 8. LIGHT INPUT FIELDS ---------- */
input:not([type="checkbox"]),
select,textarea{
  background:#fff;                  /* white fields                   */
  color:#111;
}
input::placeholder,textarea::placeholder{color:#8a8f9e;}

/* ---------- 9. CUSTOM CHECKBOX ---------- */
.checkbox-row{
  display:flex;align-items:center;font-size:.9rem;margin-top:1.25rem;
}
.checkbox-row input[type="checkbox"]{
  appearance:none;width:18px;height:18px;margin-right:.55rem;
  border:2px solid var(--input-border);border-radius:3px;
  background:var(--input-bg);cursor:pointer;position:relative;
}
.checkbox-row input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.checkbox-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;inset:3px;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.285 6.566l-11.285 11.285-5.285-5.285 1.285-1.286 4 4 10-10z"/></svg>') center/12px no-repeat;
}

/* ---------- 10. SUBMIT BUTTON ---------- */
button{
  margin-top:1.75rem;width:100%;
  padding:.9rem 1rem;
  font-size:1rem;font-weight:600;border:none;
  color:#fff;background:var(--accent);
  border-radius:8px;cursor:pointer;
  transition:background .2s ease;
}
button:hover{background:#1c3f99;}

/* ---------- 11. Birth‑date selects ---------- */
.dob-selects{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:.5rem;
}

/* required star */
.req{color:#ff4b4b;margin-left:2px;font-weight:600;}

/* ---------- 12. INTRO / EPILOGUE PANEL ---------- */
.intro{
  background:var(--panel);border-radius:12px;
  padding:2rem 1.5rem;
  margin:-2rem auto 2.5rem;          /* overlaps banner */
  max-width:900px;
  box-shadow:0 0 14px rgba(0,0,0,.45);
  line-height:1.55;
}
.intro h2{font-size:1.5rem;margin-bottom:1rem;margin-top:1rem}
.intro h3{font-size:1.15rem;margin:1.5rem 0 .5rem;}
.intro ul{list-style:none;padding-left:0;margin:.5rem 0 0;}
.intro ul li{margin-bottom:.4rem;position:relative;padding-left:1.5rem;}
.intro ul li::before{
  content:"•";position:absolute;left:0;top:0;
  color:var(--accent);font-weight:700;font-size:1.2em;
}
.intro .callout{
  margin-top:1.5rem;font-weight:600;
  background:rgba(46,105,255,.12);
  padding:.75rem 1rem;border-left:4px solid var(--accent);
  border-radius:6px;
}

/* ---------- 13. ERROR STATE OVERRIDES ---------- */
.error-message{color:#ff4b4b;font-size:.8rem;margin-top:.25rem}
.has-error{border-color:#ff4b4b!important}

/* ---------- 14. CONTAIN HERO + INTRO ---------- */
.hero,
.intro{
  max-width:900px;          /* same width as the form */
  margin-left:auto;
  margin-right:auto;        /* centre on large screens */
}

/* ---------- 15. MOBILE CORRECTIONS (<640 px) ---------- */
@media (max-width:640px){

  /* keep intro centred & inside viewport */
  .intro{
    margin:-1rem auto 2rem;   /* softer overlap, no sideways shift   */
    padding:1.8rem 1rem;      /* shrink side padding                 */
  }

  /* let section headers respect the new padding */
  .section-title{
    margin:1.25rem 0 .65rem;  /* reset negative side‑margins         */
    padding:0 0 .25rem;       /* only bottom padding for the rule    */
    border-bottom:1px solid #000;
  }
}