/* === Global theme styles — light site + navy band + amber accents === */
:root{
  /* brand-ish palette from the screenshot */
  --bg: #141d3b;               /* PAGE BACKGROUND → deep navy */
  --surface: #f6f9ff;          /* cards/forms → soft light blue */
  --section-navy: #141d3b;     /* deep navy band */
  --text: #e8eefb;             /* near-white on navy */
  --muted: #bfc8e6;            /* muted text on navy */
  --border: #dbeafe;           /* blue-100 (used on light card) */
  --accent: #f59e0b;           /* amber-500 */
  --accent-2: #facc15;         /* amber-400 */
  --danger: #ef4444;
  --ring: 0 0 0 3px rgba(245,158,11,.35);
  --radius: 16px;
  --shadow: 0 10px 24px rgba(2,6,23,.20);
}

/* prefer light stays light; only dark-scheme users get subtle tweaks */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1024;
    --surface:#0f1530;
    --text:#e5e7eb;
    --muted:#9aa3b2;
    --border:#1f2a44;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
}

/* Base reset + body */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* page width helpers */
.container{
  max-width:980px;
  margin:40px auto;
  padding:24px;
  width:calc(100% - 32px);
}

/* optional navy band wrapper (use on big sections if you want that look) */
.section-navy{
  background:var(--section-navy);
  color:#fff;
}
.section-navy .muted{ color:#cfd6e6; }

/* header/footer shells (kept simple so your theme header keeps control) */
.site-header,.site-footer{
  max-width:980px;
  margin:0 auto;
  padding:16px 24px;
}
.site-footer p{ color:var(--muted); }

/* Hero block */
header.hero{ display:grid; gap:12px; margin-bottom:18px; text-align:center; }
header.hero h1{ margin:0; font-size:clamp(26px,4vw,36px); letter-spacing:.3px; }
header.hero p{ margin:0; color:var(--muted); }
.brand{ height:64px; width:auto; margin:0 auto 4px; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:6px 10px; border-radius:999px;
  background:#fff7e6; color:#8a4b00; border:1px solid #fde68a;
}

/* Alert */
.alert{
  display:none; margin:10px auto 0; padding:12px 14px; border-radius:12px;
  background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; font-weight:600; max-width:980px;
}
.alert.show{ display:block; }

/* Card / form */
form.app{
  background:var(--surface);            /* light card */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  border:1px solid var(--border);
}

/* grids */
.grid{ display:grid; gap:16px; }
.g-2{ grid-template-columns:1fr; }
.g-3{ grid-template-columns:1fr; }
@media (min-width:760px){
  .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(3,1fr); }
}

/* fieldsets */
fieldset{
  border:1px dashed var(--border);
  border-radius:calc(var(--radius) - 6px);
  padding:14px; margin:14px 0 18px;
}
legend{ padding:0 10px; color:var(--muted); font-weight:600; letter-spacing:.2px; }

/* inputs */
label{ font-weight:600; font-size:14px; }
.control{ display:grid; gap:8px; }
input,select,textarea,button{ font:inherit; color:inherit; }

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],
input[type="number"],select,textarea{
  width:100%; border-radius:12px; padding:12px 14px;
  background:#ffffff;
  border:1px solid var(--border);
  outline:none; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
textarea{ min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus{ box-shadow:var(--ring); border-color:var(--accent); }

/* date/time visibility */
input[type="time"],input[type="month"],input[type="date"]{
  color:#0f172a; background:#fff; border:1px solid var(--border); caret-color:#0f172a;
}
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit{ color:#0f172a; }
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.85; }

/* file input block */
.file{
  position:relative; border:1px dashed var(--border);
  border-radius:14px; padding:16px; background:#fafafa;
}
.file input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file .hint{ font-size:13px; color:#64748b; }
.file .name{ margin-top:8px; font-size:14px; }

/* inline helpers */
.inline{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.muted{ color:#64748b; }

/* buttons */
.actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:20px; }
.btn{
  border:1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#1b1002; font-weight:700; padding:12px 16px; border-radius:12px;
  cursor:pointer; box-shadow:var(--shadow); transition: transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:saturate(1.05) brightness(1.02); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background:#ffffff; color:#0f172a;
  border-color:var(--border); box-shadow:none;
}
.btn.secondary:hover{ border-color:#cbd5e1; }

/* helpers */
.required::after{ content:" *"; color:var(--danger); }
.help{ font-size:12px; color:#64748b; }
.sig{ display:grid; gap:8px; }
.footer-note{ text-align:center; color:#64748b; font-size:12px; margin-top:16px; }

/* === Thank You page card === */
.thankyou .app-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  border:1px solid var(--border);
  text-align:center;
}
.thankyou header.hero{ display:grid; gap:10px; margin:0 0 16px; text-align:center; }
.thankyou header.hero h1{ margin:0; font-size:clamp(26px,4vw,36px); letter-spacing:.3px; }
.thankyou header.hero p{ margin:0; color:#64748b; }
.thankyou .message{ color:#64748b; margin:6px 0 0; }
.thankyou .actions{ display:flex; gap:12px; justify-content:center; margin-top:18px; }

/* === Palette tweaks === */
:root{
  --bg: #141d3b;            /* page background (navy) */
  --text: #e8eefb;          /* body text on navy */
  --muted: #bfc8e6;
  --border: #d1d5db;        /* input borders on light card */
  --form-navy: #f6f9ff;     /* (kept the var name) form card is LIGHT */
  --accent: #f59e0b;        /* amber */
  --accent-2: #facc15;
  --ring: 0 0 0 3px rgba(245,158,11,.35);
  --radius: 16px;
  --shadow: 0 14px 28px rgba(2,6,23,.20);
}

/* Page background (navy) */
html, body { background:var(--bg); color:var(--text); }

/* ===== FORM CARD IS LIGHT, CONTENTS ARE DARK ===== */
form.app{
  background: var(--form-navy);         /* now a light card */
  color: #0f172a;                       /* dark text inside form */
  border: 1px solid #dbeafe;            /* subtle blue border */
  box-shadow: var(--shadow);
}

/* Fieldset/legend on light card */
form.app fieldset{
  border: 1px dashed #c7d2fe;
}
form.app legend{
  color: #64748b;                       /* soft muted */
}

/* Labels/aux text in the light card */
form.app label{ color:#0f172a; }
form.app .muted{ color:#64748b; }

/* Inputs are WHITE inside the light card */
form.app input[type="text"],
form.app input[type="email"],
form.app input[type="tel"],
form.app input[type="date"],
form.app input[type="number"],
form.app select,
form.app textarea{
  background:#ffffff;
  color:#0f172a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
form.app textarea{ background:#ffffff; }
form.app input::placeholder,
form.app textarea::placeholder{ color:#64748b; }

/* Focus ring stays amber */
form.app input:focus,
form.app select:focus,
form.app textarea:focus{
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* File picker block – light to stand out slightly */
form.app .file{
  background:#ffffff;
  border:1px dashed var(--border);
  color:#0f172a;
}
form.app .file .hint{ color:#6b7280; }

/* Radio/checkbox label text next to controls → dark on light card */
form.app .inline label{ color:#0f172a; }

/* Buttons (amber primary, white secondary that works on light) */
form.app .btn{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#1b1002;
  border:1px solid transparent;
  border-radius:12px;
  box-shadow: var(--shadow);
}
form.app .btn.secondary{
  background:#ffffff;
  color:#0f172a;
  border:1px solid var(--border);
  box-shadow:none;
}

/* Date/Time controls readable on light card */
form.app input[type="time"],
form.app input[type="month"],
form.app input[type="date"]{
  background:#ffffff;
  color:#0f172a;
  border:1px solid var(--border);
}
form.app input[type="time"]::-webkit-calendar-picker-indicator,
form.app input[type="month"]::-webkit-calendar-picker-indicator,
form.app input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.9;
}

/* Alert can remain light */
.alert{ background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; }