/* =====================================================================
   The public forms — Contact us, Schedule a tour, Registration.
   Shared by contact.html, tour.html and register.html.

   Written for a phone first, because that is how nearly everyone reaches
   the website. Every rule here is the small-screen rule; the only media
   query widens things once there is room. Specifically:

     - inputs are 16px, which is what stops iOS zooming in when one is
       focused and leaving the rest of the form off the side of the screen
     - every tap target is at least 44px tall
     - one column, always; nothing sits side by side on a phone
     - the submit button is full width and sits where a thumb reaches
   ===================================================================== */

:root {
  --orange: #ff851b;
  --orange-dark: #e06c00;
  --orange-soft: #fff1e2;
  --text: #151719;
  --muted: #5d646e;
  --faint: #8c939d;
  --border: #e3e5ea;
  --bg: #f6f7f9;
  --surface: #fff;
  --danger: #c0392b;
  --danger-soft: #fbe7e5;
  --ok: #1f8a4c;
  --ok-soft: #e4f4ea;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 64px; }

header { text-align: center; margin-bottom: 22px; }
header img { width: 190px; max-width: 62%; height: auto; }
h1 { font-size: 25px; line-height: 1.25; margin: 14px 0 6px; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin: 0 auto; max-width: 42ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 16px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

h2 { font-size: 17px; margin: 0 0 4px; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 5px; }
label .opt { font-weight: 400; color: var(--faint); }

/* Text-like inputs only. `appearance: none` on a checkbox or a radio strips
   the tick and the dot and leaves a blank square that never looks chosen —
   which is exactly what it did until somebody tried to agree to a policy on a
   real phone and nothing happened. Selecting them out by type is the fix. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  /* 16px exactly. Anything smaller and iOS zooms the page on focus. */
  font: 16px/1.4 inherit;
  color: var(--text);
  background: var(--surface);
  padding: 12px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 10px;
  appearance: none;
}

/* Boxes and dots keep the platform's own drawing, in Agape orange, and are
   big enough to hit with a thumb. */
input[type="checkbox"], input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--orange);
  cursor: pointer;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235d646e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Two fields on one line only once there is genuinely room for them. */
.pair { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 540px) { .pair { grid-template-columns: 1fr 1fr; } }

button, .btn {
  display: block;
  width: 100%;
  min-height: 52px;
  font: 600 17px/1.2 inherit;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: 12px;
  padding: 15px 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
button:active { background: var(--orange-dark); }
button:disabled { background: #f2c79b; cursor: default; }
button.ghost {
  background: transparent; color: var(--orange-dark);
  border: 1px solid var(--border); min-height: 46px; font-size: 15px;
}

.note { border-radius: 10px; padding: 12px 14px; margin: 14px 0; font-size: 15px;
        /* the missing-fields list arrives as lines, and should stay lines */
        white-space: pre-line; }
.note.bad  { background: var(--danger-soft); color: var(--danger); }
.note.good { background: var(--ok-soft); color: var(--ok); }

.kid {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 16px;
  margin-bottom: 12px;
  background: #fcfcfd;
}
.kid h3 { font-size: 15px; margin: 0; display: flex; align-items: center; }
.kid h3 .grow { flex: 1; }
.kid .drop {
  background: none; border: none; color: var(--danger);
  font-size: 14px; width: auto; min-height: 32px; padding: 4px 6px;
}

/* ------------------------------------------------------------ the tour */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
        -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
/* `button` on these pages is a full-width orange call to action. Without
   width:auto every day filled the strip, so a family swiped once per day to
   see one date at a time — which is most of why the strip felt wrong. */
button.day, .day {
  flex: 0 0 auto; scroll-snap-align: start;
  width: auto; min-width: 78px; min-height: 66px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: 600 14px/1.3 inherit; padding: 9px 6px; text-align: center;
}
.day .dow { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.day .num { display: block; font-size: 20px; font-weight: 800; }
.day.on { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-dark); }
.day .n { display: block; font-size: 11px; color: var(--faint); font-weight: 500; }


/* ------------------------------------------------- the tour, on a desktop
   The swipe strip is right on a phone, where a thumb is already moving
   sideways and a month of empty Saturdays is wasted screen. On a desktop it
   is a row of boxes somebody has to drag, so from 720px up the same days are
   laid out as the month they belong to. Only one of the two is ever in the
   document flow. */
.cal { display: none; }
@media (min-width: 720px) {
  .days { display: none; }
  .cal  { display: block; }
}

.cal-head {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px;
}
.cal-head .month {
  font-weight: 800; font-size: 16px; flex: 1 1 auto; white-space: nowrap;
}
/* `button` on these pages is a full-width orange call to action, which is
   right for Send and wrong for a chevron. Overridden rather than renamed,
   because everything else about a button — the focus ring, the tap target —
   should still apply. */
button.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; flex: 0 0 auto;
  min-width: 38px; min-height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 700 18px/1 inherit;
}
button.cal-nav:hover:not(:disabled) { background: var(--orange-soft); }
button.cal-nav:active { background: var(--orange-soft); }
button.cal-nav:disabled {
  background: var(--surface); color: var(--faint);
  border-color: var(--border); opacity: 0.5; cursor: default;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 2px;
}
button.cal-day, .cal-day {
  width: auto; min-width: 0;
  min-height: 58px; padding: 6px 4px 4px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: 700 16px/1.1 inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
/* Nothing free that day: still shown, so the month reads as a month, but
   plainly not a thing to press. */
.cal-day.empty {
  background: transparent; border-color: transparent; color: var(--faint);
  font-weight: 500; cursor: default;
}
.cal-day.blank { border: 0; background: none; min-height: 0; }
/* Today, in black, whether or not it is free. */
.cal-day.today { border-color: var(--text); border-width: 2px; }
.cal-day.today .d { color: var(--text); }
/* Picked, in orange. */
.cal-day.on {
  background: var(--orange); border-color: var(--orange); color: #fff;
}
.cal-day.on .dot { background: #fff; }
.cal-day .d { display: block; }
/* A day with times going, so the month can be read at a glance. */
.cal-day .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
  display: block;
}
.cal-day.empty .dot { visibility: hidden; }

.times { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 420px) { .times { grid-template-columns: repeat(3, 1fr); } }
button.time, .time {
  width: auto; min-height: 48px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 600 15px/1 inherit;
  padding: 12px 4px;
}
.time.on { background: var(--orange); border-color: var(--orange); color: #fff; }

/* --------------------------------------------------------- signature */
.sigbox {
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--surface); position: relative; overflow: hidden;
}
.sigbox canvas { display: block; width: 100%; height: 170px; touch-action: none; }
.sigbox .ph {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--faint); font-size: 15px;
  pointer-events: none;
}

footer {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 14px; text-align: center;
}
footer a { color: var(--orange-dark); }

/* A telephone number is one thing, so it breaks as one thing or not at all.
   "1 850" was ending one line and "331 3196" starting the next, which reads
   as two numbers for a moment — on the page a worried parent is on when they
   have decided to ring instead of type. */
a[href^="tel:"] { white-space: nowrap; }

/* ---------------------------------------------------------------- consent

   The texting opt-in. It sits inside the parent's own card rather than in a
   card of its own, because a box with a border around it reads as a term of
   the application — and this one is optional. The wording is long on purpose:
   the carriers read it, and so does the parent.                            */
.consent {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.consent .tick {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  cursor: pointer;
}

.consent .tick input { margin-top: 2px; }
.consent .tick strong { display: block; font-weight: 700; margin-bottom: 2px; }