/* Sweathouse public design language — orphan tokens + shared components.

   IMPORTANT: do NOT redefine tokens that chris.css already declares
   (--accent, --border, --primary, --background, --foreground, --muted,
   --muted-foreground, --secondary, --card, --destructive, etc.).
   chris.css declares those as raw HSL components and uses them as
   hsl(var(--name)). Resolving them here breaks chris.css because
   hsl(hsl(...)) is invalid — every button and link in the public
   layout went transparent the first time we tried.

   Only safe additions: tokens chris.css doesn't define (--bg, --bg-muted,
   --fg, --text-font, --display-font), plus components scoped to classes
   that don't exist in chris.css. */

:root {
  --bg:           hsl(45 30% 97%);
  --bg-muted:     hsl(45 15% 93%);
  --fg:           hsl(150 15% 15%);
  --text-font:    'Lora', Georgia, serif;
  --display-font: 'Playfair Display', Georgia, serif;
  --heading-font: 'Playfair Display', Georgia, serif;
}

/* Form inputs — used by /book-session, /book-cairde, /book-learning.
   Pages declare .form-input / .form-select inline. We resolve colors
   directly here (not via tokens) so we don't depend on or override
   chris.css's HSL-component variables. Plane #16: book-session field
   visibility. */
input.form-input,
input.form-input[type="number"],
input.form-input[type="text"],
input.form-input[type="email"],
input.form-input[type="date"],
input.form-input[type="time"],
input.form-input[type="datetime-local"],
select.form-select,
textarea.form-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 2px solid hsl(45 15% 80%);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--text-font);
  background: white;
  color: hsl(150 15% 15%);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input.form-input:focus,
select.form-select:focus,
textarea.form-input:focus {
  outline: none;
  border-color: hsl(35 75% 50%);
  box-shadow: 0 0 0 3px hsl(35 75% 50% / 0.18);
}
input.form-input::placeholder,
textarea.form-input::placeholder {
  color: hsl(150 10% 45%);
  opacity: 0.7;
}

body:not(.is-admin) .btn:disabled,
body:not(.is-admin) button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

body:not(.is-admin) .booking-step__num {
  background: hsl(18 38% 36%) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 hsl(18 38% 24% / 0.22);
}

/* 404 page hook — owned by pages/404/. */
.pub-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}

@media (max-width: 720px) {
  body:not(.is-admin) {
    overflow-x: hidden;
  }

  body:not(.is-admin) .header {
    padding: 5rem 1rem 1.5rem !important;
  }

  body:not(.is-admin) .header h1 {
    font-size: clamp(2rem, 12vw, 3rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }

  body:not(.is-admin) .section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem 1rem 2rem !important;
  }

  body:not(.is-admin) .booking-panel,
  body:not(.is-admin) .checkout-shell,
  body:not(.is-admin) .complete-shell,
  body:not(.is-admin) .membership-card,
  body:not(.is-admin) .course-card,
  body:not(.is-admin) .upsell-card,
  body:not(.is-admin) .request-block {
    border-radius: 8px !important;
  }

  body:not(.is-admin) .choice-btn {
    min-height: 68px;
  }

  body:not(.is-admin) .checkout-wrap {
    min-height: auto !important;
    display: block !important;
    padding: 5rem 1rem 2rem !important;
  }

  body:not(.is-admin) .checkout-summary,
  body:not(.is-admin) .checkout-panel {
    padding: 1.15rem !important;
  }

  body:not(.is-admin) .checkout-title {
    font-size: 1.75rem !important;
    line-height: 1.08 !important;
  }

  body:not(.is-admin) .checkout-price {
    margin: 1.25rem 0 !important;
    font-size: 2rem !important;
  }

  body:not(.is-admin) .checkout-row {
    display: block !important;
  }

  body:not(.is-admin) .checkout-row > * + * {
    display: block;
    margin-top: 0.2rem;
  }

  body:not(.is-admin) .checkout-row code,
  body:not(.is-admin) .complete-cell code {
    word-break: break-all;
  }

  body:not(.is-admin) .complete-shell {
    padding: 1.25rem !important;
  }

  body:not(.is-admin) .complete-actions {
    flex-direction: column;
  }

  body:not(.is-admin) .complete-actions .btn {
    width: 100%;
    justify-content: center;
  }

  body:not(.is-admin) .session-viz {
    padding: 0.85rem;
  }

  body:not(.is-admin) .session-viz__bar {
    height: auto;
    min-height: 30px;
  }

  body:not(.is-admin) .session-viz__seg {
    min-width: 20px;
    padding: 0 0.2rem;
    font-size: 0.65rem;
  }
}

@media (max-width: 430px) {
  body:not(.is-admin) .header h1 {
    font-size: 2.15rem !important;
  }

  body:not(.is-admin) .booking-step {
    align-items: flex-start;
  }

  body:not(.is-admin) .btn {
    width: 100%;
    justify-content: center;
  }
}