/* ============================================================
   COLORS — the only three colors on the site.
   Change them here and the whole site updates.
   ============================================================ */
:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #7CC8F0;   /* light blue accent (adjust when the logo is made) */

  /* Training side (default): black background, white text */
  --bg: var(--black);
  --fg: var(--white);
  --accent: var(--blue);
  --accent-text: var(--blue);   /* blue text is readable on black */

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 40rem;
}

/* Gear side: swap to white background, black text */
body[data-view="gear"] {
  --bg: var(--white);
  --fg: var(--black);
  --accent-text: var(--black);  /* blue text is too faint on white, so text stays black; blue is used for lines and buttons */
}

/* ============================================================
   BASE (mobile first)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Leave room for the sticky top bar when jumping to a section */
[id] { scroll-margin-top: 10rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  transition: background-color 0.25s, color 0.25s;
}

h1, h2 { line-height: 1.15; font-weight: 800; margin: 0 0 0.5rem; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; color: var(--accent-text); }
p  { margin: 0 0 1rem; }

a {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

main { padding: 0 1.25rem; }

.view { max-width: var(--max-width); margin: 0 auto; }
.view[hidden] { display: none; }

/* ============================================================
   TOP BAR + TOGGLE
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 0.75rem 1.25rem 1rem;
  border-bottom: 2px solid var(--accent);
  transition: background-color 0.25s;
}

.wordmark {
  display: block;
  text-align: center;
  color: var(--fg);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.toggle {
  display: flex;
  max-width: 28rem;
  margin: 0 auto;
  border: 2px solid var(--accent);
  border-radius: 999px;
  padding: 4px;
}

.toggle-btn {
  flex: 1;
  min-height: 48px;          /* large tap target */
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.toggle-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--black);
}

.toggle-btn:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   CONTENT BLOCKS
   ============================================================ */
.hero { padding: 2rem 0 1.25rem; }
.lead { font-size: 1.25rem; }

.block { padding: 1.5rem 0; }

.button {
  display: inline-block;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--black);
  text-decoration: none;
  font-weight: 800;
}

.email-line { text-align: center; margin: 1rem 0 1.5rem; }

/* ============================================================
   BOOK A SESSION
   ============================================================ */
.booking {
  padding: 1.25rem;
  margin: 0 -0.25rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 16px;
}
.booking h2 { margin-bottom: 1rem; }

.cal-embed.is-live {
  min-height: 32rem;          /* room for the calendar while it loads */
  overflow: auto;
}

.location-line {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
  opacity: 0.8;
}
.location-line[hidden] { display: none; }

.waiver-line { margin: 0.75rem 0 0; font-size: 1rem; }
.waiver-line a { display: inline-block; padding: 0.5rem 0; } /* bigger tap target */

/* ============================================================
   GEAR INQUIRY FORM
   ============================================================ */
.inquiry {
  padding: 1.25rem;
  margin: 0 -0.25rem;
  border: 2px solid var(--accent);
  border-radius: 16px;
}

.inquiry label {
  display: block;
  font-weight: 800;
  margin: 1rem 0 0.35rem;
}
.inquiry label:first-child { margin-top: 0; }

.inquiry input,
.inquiry textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem;
  font: inherit;
  font-size: 1rem;       /* 16px or more stops phones from zooming in */
  color: var(--fg);
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 10px;
}
.inquiry textarea { resize: vertical; }

.inquiry input:focus,
.inquiry textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Spam trap: moved off screen so people never see it */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit {
  width: 100%;
  margin-top: 1.5rem;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.submit:disabled { opacity: 0.6; cursor: wait; }

.form-status { margin: 0.75rem 0 0; font-weight: 700; }
.form-status:empty { display: none; }

.form-thanks {
  margin: 0;
  padding: 1rem 0;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}
.form-thanks[hidden] { display: none; }
.form-thanks:focus { outline: none; }

.email-line.closing { font-size: 1.25rem; margin: 2rem 0; }

/* ============================================================
   PLACEHOLDERS (replaced later by real calendar, form, photos)
   ============================================================ */
.placeholder,
.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.placeholder-calendar { min-height: 28rem; }
.placeholder-form     { min-height: 20rem; }
.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0.5rem 0;
  overflow: hidden;
}
/* The real photo covers the placeholder once the file exists */
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo.has-photo { border: 0; padding: 0; opacity: 1; }
.photo.has-photo .photo-label { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  padding: 2rem 1.25rem 3rem;
  border-top: 2px solid var(--accent);
  margin-top: 2rem;
}

/* ============================================================
   LARGER SCREENS
   ============================================================ */
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  .hero { padding-top: 3rem; }
  .topbar { display: flex; align-items: center; justify-content: space-between; }
  .wordmark { margin: 0; text-align: left; }
  .toggle { margin: 0; flex: 0 1 28rem; }
}

/* ============================================================
   WAIVER PAGE (phone first)
   ============================================================ */
.waiver { padding: 1.75rem 0 3rem; max-width: 36rem; }
.waiver h1 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.waiver h2 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.waiver section { margin-top: 1.5rem; }
.waiver p { line-height: 1.65; }

.parties {
  margin: 0;
  padding: 1rem;
  border: 2px solid var(--accent);
  border-radius: 12px;
}
.parties dt { font-weight: 800; }
.parties dd { margin: 0 0 0.75rem; }
.parties dd:last-child { margin-bottom: 0; }

.box { white-space: nowrap; font-weight: 700; }

.sign {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent);
}
.field { margin: 0 0 1.5rem; }
.blank {
  display: block;
  height: 2.25rem;                 /* room to write on paper */
  border-bottom: 2px solid var(--fg);
}
.guardian-text { margin-top: 0.5rem; }

.waiver-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.waiver-actions .button { flex: 1 1 12rem; text-align: center; }
.button-outline {
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 768px) {
  .waiver h1 { font-size: 2rem; }
  .field-row { display: flex; gap: 1.5rem; }
  .field-row .field { flex: 1; }
  .field-row .field-wide { flex: 2.5; }
}

/* ============================================================
   PRINT (waiver on paper: black on white, no buttons)
   ============================================================ */
@media print {
  @page { margin: 1.2cm 1.6cm; }

  body {
    --bg: #fff;
    --fg: #000;
    --accent: #000;
    --accent-text: #000;
    background: #fff;
    color: #000;
    font-size: 10pt;
    line-height: 1.38;
  }
  .topbar, .waiver-actions, .footer { display: none; }
  main { padding: 0; }

  .waiver { max-width: none; padding: 0; }
  .waiver h1 { font-size: 15pt; margin-bottom: 8pt; }
  .waiver h2 { font-size: 11pt; margin-bottom: 2pt; }
  .waiver section { margin-top: 6pt; break-inside: avoid; }
  .waiver p { margin-bottom: 2pt; line-height: 1.38; }

  .parties { border: 1px solid #000; border-radius: 0; padding: 6pt 8pt; }
  .parties dt { float: left; clear: left; width: 6.5em; }
  .parties dd { margin: 0 0 3pt 6.5em; }
  .parties dd:last-child { margin-bottom: 0; }

  /* Bigger box for the photo yes/no tick */
  .box { font-size: 12pt; }

  .sign { border-top: 1px solid #000; margin-top: 10pt; padding-top: 6pt; break-inside: avoid; }
  .field-row { display: flex; gap: 14pt; }
  .field-row .field { flex: 1; }
  .field-row .field-wide { flex: 2.5; }
  .field { margin-bottom: 8pt; }
  .blank { height: 20pt; border-bottom: 1px solid #000; }
}