/* St. Edward Event/Calendar Form
 * Palette: navy #24303F + gold #D9BC7E (stedward.org component palette).
 * Mobile-first; breakpoints at 375, 414, and 768 (320 is the base).
 * Headings: Crimson Text. Body: Noto Sans. System fallbacks throughout.
 */

:root {
  --navy: #24303F;
  --navy-soft: #33445A;
  --gold: #D9BC7E;
  --gold-deep: #B99A55;
  --ink: #24303F;
  --ink-soft: #4A5568;
  --paper: #FFFFFF;
  --paper-warm: #FAF7F0;
  --line: #D8DCE2;
  --error: #9B2C2C;
  --error-bg: #FBEAEA;
  --success: #276749;
  --success-bg: #EBF5EF;
  --serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* When embedded in an iframe, drop the navy backdrop so the form sits flush
   on the host page. The embed adds ?embed=1, which sets this class. */
body.embed { background: transparent; }
body.embed .site-header,
body.embed .site-footer { display: none; }
body.embed .page { padding: 0; }
body.embed .card { box-shadow: none; border-radius: 0; }

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

.site-header {
  padding: 20px 16px 16px;
  border-bottom: 3px solid var(--gold);
}

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wordmark-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--paper);
}

.wordmark-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

/* ----- Page and card ----- */

.page {
  padding: 16px 8px 32px;
}

.card {
  background: var(--paper);
  border-radius: 10px;
  border-top: 5px solid var(--gold);
  padding: 20px 16px 28px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.card-narrow { max-width: 560px; }

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--navy);
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 36px 0 16px;
  padding-bottom: 8px;
  position: relative;
  border-bottom: 1px solid var(--line);
}

/* A short gold tick riding the hairline, instead of a heavy gold rule under
   every section: reads like a ruled entry on an office record. */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--gold-deep);
}

.intro {
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.text-link {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 2px;
  font-weight: 600;
}

.text-link:hover { color: var(--gold-deep); }

/* ----- Fields ----- */

.field { margin: 18px 0; }

.field.indent {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
}

label,
.group-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--navy);
}

.req { color: var(--gold-deep); font-weight: 700; font-size: 0.9em; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* 16px+ prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 48px; /* generous touch target */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea { min-height: 72px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold-deep);
}

input[type="file"] {
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
}

.field-hint {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* ----- Checkbox / radio rows ----- */

.choice-stack { display: flex; flex-direction: column; gap: 4px; }

.choice-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 44px; /* touch target */
  cursor: pointer;
  margin-bottom: 0;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.choice:hover { background: var(--paper-warm); border-color: var(--line); }
.choice:focus-within { background: var(--paper-warm); border-color: var(--gold-deep); }

.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--navy);
}

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

.error-summary {
  background: var(--error-bg);
  border-left: 4px solid var(--error);
  color: var(--error);
  font-weight: 600;
  padding: 12px;
  border-radius: 6px;
  margin: 16px 0;
}

.has-error input,
.has-error select,
.has-error textarea {
  border-color: var(--error);
}

.field-error {
  color: var(--error);
  font-size: 14px;
  font-weight: 600;
  margin: 6px 0 0;
}

/* ----- Turnstile ----- */

.turnstile-row { margin-top: 24px; min-height: 65px; }

/* ----- Submit ----- */

.submit-row { margin-top: 20px; }

.submit-button {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  background: var(--gold);
  border: none;
  border-radius: 8px;
  padding: 16px;
  min-height: 52px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(36, 48, 63, 0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.submit-button:hover { background: var(--gold-deep); box-shadow: 0 4px 14px rgba(36, 48, 63, 0.22); }
.submit-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(36, 48, 63, 0.15); }

.submit-button:disabled { opacity: 0.6; cursor: default; }

.submit-button:focus {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* ----- Success panel ----- */

.success-panel {
  background: var(--success-bg);
  border: 1px solid rgba(39, 103, 73, 0.25);
  border-left: 4px solid var(--success);
  border-radius: 10px;
  padding: 28px 24px;
  margin: 8px 0;
  animation: panel-in 0.35s ease both;
}

.success-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.success-badge svg { width: 26px; height: 26px; }

.success-panel h2 {
  border: none;
  padding: 0;
  margin: 6px 0 4px;
  color: var(--success);
  font-size: 24px;
}

.success-panel h2::after { display: none; }

.success-lede { font-size: 18px; color: var(--ink); }

/* The confirmation is also the requester's receipt: the reference number set
   apart so it is easy to read back to the office. Fixes the old complaint that
   submitters walked away with no record. */
.receipt {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  border-radius: 8px;
}

.receipt-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.receipt-number {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin: 0;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ----- Utility ----- */

.hidden { display: none !important; }

/* Honeypot: moved far off-screen, still present for bots that fill by name. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* ----- Footer ----- */

.site-footer {
  text-align: center;
  color: var(--gold);
  font-size: 13px;
  padding: 8px 16px 28px;
}

/* ----- Breakpoints: 320 base, then 375 / 414 / 768 ----- */

@media (min-width: 375px) {
  .page { padding: 20px 12px 36px; }
  .card { padding: 24px 20px 32px; }
}

@media (min-width: 414px) {
  .page { padding: 24px 16px 40px; }
  .card { padding: 28px 24px 36px; }
  h1 { font-size: 28px; }
}

@media (min-width: 768px) {
  .page { padding: 40px 24px 56px; }
  .card { padding: 40px 48px 48px; }
  h1 { font-size: 32px; }
  .wordmark-name { font-size: 34px; }
  .time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 4px;
    align-items: stretch;
  }
  /* Labels vary in length (one line vs two), so within each row let the label
     take the slack and pin the input to the bottom. That lines up the two
     inputs in a row regardless of how their labels wrap. */
  .time-grid .field {
    display: flex;
    flex-direction: column;
    margin: 12px 0;
  }
  .time-grid .field label { margin-bottom: 8px; }
  .time-grid .field input { margin-top: auto; }
  .submit-button { width: auto; min-width: 260px; padding: 16px 40px; }
}

/* ----- Respect a reduced-motion preference ----- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}