/*
 * bn-pages.css — Inner page styles
 * Ricky Burd Babysitting
 *
 * Loaded only on inner pages via $pageCSS = ['/css/bn-pages.css'].
 * Never loaded on the homepage via head.php directly.
 *
 * Contains: page-hero, breadcrumb, prose (legal text), scroll progress bar.
 */

/* ── Scroll progress bar ─────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--bn-acc);
  z-index: 999;
  transition: width 0.1s linear;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.breadcrumb {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 24px 0;
  font-size: 0.82rem;
  color: var(--bn-text-faint);
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb a {
  color: var(--bn-text-muted);
  font-weight: 700;
}

.breadcrumb a:hover {
  color: var(--bn-acc);
}

.breadcrumb__sep {
  margin: 0 6px;
}

/* ── Page hero ───────────────────────────────────────── */
.page-hero {
  text-align: center;
  padding: 52px 24px 44px;
  border-bottom: 1px solid var(--bn-bdr);
  margin-bottom: 48px;
}

.page-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin-bottom: 10px;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--bn-text);
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-hero__sub {
  font-size: 0.88rem;
  color: var(--bn-text-faint);
}

/* ── Prose layout (legal pages) ──────────────────────── */
.page-layout--prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

/* Prose typography */
.prose {
  color: var(--bn-text);
  line-height: 1.75;
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bn-text);
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--bn-bdr);
}

.prose h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bn-text);
  margin: 24px 0 8px;
}

.prose p {
  margin-bottom: 16px;
  color: var(--bn-text-muted);
}

.prose ul, .prose ol {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  color: var(--bn-text-muted);
  margin-bottom: 6px;
}

.prose a {
  color: var(--bn-acc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--bn-acc-hover);
}

.prose strong {
  font-weight: 800;
  color: var(--bn-text);
}

.prose .prose-note {
  background: var(--bn-acc-subtle);
  border-left: 3px solid var(--bn-acc);
  border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 0.88rem;
  color: var(--bn-text-muted);
}

/* ── Booking Agreement form fields ──────────────────────── */
.field-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  color: var(--bn-text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.field-label {
  white-space: nowrap;
  font-weight: 600;
  color: var(--bn-text);
  flex-shrink: 0;
}

.field-block {
  flex: 1;
  display: inline-block;
  border-bottom: 1px solid var(--bn-bdr-strong);
  min-height: 1.6rem;
  min-width: 40px;
}

.field-block--short { flex: 0 0 60px; }
.field-block--date  { flex: 0 0 110px; }

/* Print button */
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--bn-text);
  color: var(--bn-bg);
  border: none;
  border-radius: var(--bn-radius-sm);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 2rem;
}

.print-btn:hover { opacity: 0.85; }
.print-btn:focus-visible { outline: 2px solid var(--bn-acc); outline-offset: 2px; }

/* ── Booking form — inline styles ────────────────────────────── */

.section-note {
  font-size: 0.875rem;
  color: var(--bn-text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* Children rows: wide name field + narrow age field */
.booking-child-row {
  grid-template-columns: 1fr 100px;
}

/* Signature input — script / cursive font */
.sig-input {
  font-family: 'Dancing Script', 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 1.35rem !important;
  letter-spacing: 0.02em;
  color: var(--bn-acc-hover);
}

.sig-date-note {
  font-size: 0.875rem;
  color: var(--bn-text-muted);
  margin-top: -0.5rem;
}

/* Checkbox labels used for agreement items */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--bn-acc);
  cursor: pointer;
}

@media print {
  .print-btn,
  .site-nav,
  .breadcrumb,
  #cookie-banner { display: none !important; }

  .page-hero { padding: 20px 0; border-bottom: 1px solid #ccc; margin-bottom: 24px; }
  .page-hero__eyebrow { display: none; }
  .page-hero h1 { font-size: 18pt; }

  .page-layout--prose { padding-bottom: 0; }
  .field-block { border-bottom: 1px solid #999; }
  .prose h2 { font-size: 11pt; page-break-after: avoid; }
  .prose p, .prose li { font-size: 10pt; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONVERSATIONAL QUESTIONNAIRE — book.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Noscript banner */
.conv-noscript-banner {
  max-width: 540px;
  margin: 4rem auto 2rem;
  padding: 1.5rem 2rem;
  background: var(--bn-acc-subtle);
  border-radius: var(--bn-radius-md);
  text-align: center;
}

/* Outer wrapper — vertically centres each question */
.conv-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 88px);
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* Stage: relative so the exiting absolute-positioned step doesn't push layout */
.conv-stage {
  position: relative;
  min-height: 280px;
}

/* All steps hidden by default; JS reveals one at a time */
.conv-step { display: none; }

/* ── Typography ────────────────────────────────────────────────────────── */

.conv-eyebrow {
  font-size: clamp(0.7rem, 2vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin: 0 0 0.8rem;
}

.conv-label {
  font-size: clamp(1.3rem, 3.8vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--bn-text);
  margin: 0 0 1.75rem;
}

.conv-label-sub {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--bn-text-muted);
}

.conv-name-slot { color: var(--bn-acc); }

.conv-optional {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--bn-text-faint);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.conv-field {
  margin-bottom: 1.1rem;
}

.conv-field label {
  display: block;
  font-size: clamp(0.7rem, 2vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bn-text-muted);
  margin-bottom: 0.35rem;
}

/* Bottom-border input — conversational style */
.conv-input {
  display: block;
  width: 100%;
  font-size: 1.1rem;
  font-family: inherit;
  padding: 0.85rem 0;           /* ≥ 44px tap target with line-height */
  min-height: 44px;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--bn-bdr-strong);
  border-radius: 0;
  color: var(--bn-text);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color 0.2s;
}
.conv-input:focus            { border-bottom-color: var(--bn-acc); }
.conv-input::placeholder     { color: var(--bn-text-faint); }
.conv-input[aria-invalid="true"] { border-bottom-color: #e11d48; }

/* ── Date input with left calendar icon ────────────────────────────── */

.conv-date-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.conv-date-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;   /* clicks fall through to the input */
  color: var(--bn-acc);
  line-height: 0;
}
.conv-date-icon svg {
  width: 22px;
  height: 22px;
}

.conv-input--date {
  padding-left: 2rem;     /* clear the icon */
  cursor: pointer;
}

/* Push the native webkit picker indicator away — ours is on the left */
.conv-input--date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  margin-left: auto;
}

/* Select styled to match (underline, used for non-time dropdowns) */
.conv-select {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.85rem 2rem 0.85rem 0;
  min-height: 44px;               /* ≥ 44px tap target */
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--bn-bdr-strong);
  border-radius: 0;
  color: var(--bn-text);
  outline: 2px solid transparent;
  outline-offset: 2px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.conv-select:focus               { border-bottom-color: var(--bn-acc); }
.conv-select[aria-invalid="true"] { border-bottom-color: #e11d48; }

/* ── Time selects — side-by-side, boxed for clear tap affordance ──── */

.conv-time-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.25rem;
}

.conv-time-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.conv-time-label__icon {
  display: flex;
  align-items: center;
  color: var(--bn-acc);
  flex-shrink: 0;
}
.conv-time-label__icon svg { width: 14px; height: 14px; }

/* Boxed select — card style with full border, obvious on mobile */
.conv-select--boxed {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.75rem 2.5rem 0.75rem 0.85rem;
  min-height: 48px;             /* thumb-friendly tap target */
  background: var(--bn-bg);
  border: 2px solid var(--bn-bdr-strong);
  border-radius: 10px;
  color: var(--bn-text);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.conv-select--boxed:focus {
  border-color: var(--bn-acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bn-acc) 18%, transparent);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.conv-select--boxed[aria-invalid="true"] { border-color: #e11d48; }

/* Textarea */
.conv-textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--bn-bdr-strong);
  border-radius: 0;
  color: var(--bn-text);
  outline: 2px solid transparent;
  outline-offset: 2px;
  resize: vertical;
  min-height: 5.5rem;
  transition: border-color 0.2s;
}
.conv-textarea:focus         { border-bottom-color: var(--bn-acc); }
.conv-textarea::placeholder  { color: var(--bn-text-faint); }

/* Inline field-level error */
.conv-field-error {
  display: none;
  font-size: 0.78rem;
  color: #e11d48;
  font-weight: 600;
  margin-top: 0.3rem;
}

.conv-hint {
  font-size: 0.78rem;
  color: var(--bn-text-muted);
  margin: 0.3rem 0 0;
}
.conv-hint--spaced  { margin-top: 0.6rem; }
.conv-field--spaced { margin-top: 1.25rem; }

/* Live previews */
.conv-day-preview,
.conv-cost-preview {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bn-acc);
  min-height: 1.4em;
  margin-top: 0.8rem;
}

/* Children rows */
.conv-child-row {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.85rem;
  position: relative;
}
.conv-child-row:only-child { grid-template-columns: 1fr 90px; }
.conv-child-row:last-child { margin-bottom: 0; }

.conv-remove-child {
  background: none;
  border: none;
  color: var(--bn-text-faint);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  border-radius: var(--bn-radius-sm);
  transition: color var(--bn-transition), background var(--bn-transition);
  align-self: end;
  margin-bottom: 0.45rem;
}
.conv-remove-child:hover {
  color: #e11d48;
  background: rgba(225, 29, 72, 0.08);
}
.conv-remove-child:focus-visible {
  outline: 2px solid var(--bn-acc);
  outline-offset: 2px;
}

.conv-add-child {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* Stacked field group (emergency contact) */
.conv-field-group {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* ── Actions row ────────────────────────────────────────────────────────── */

.conv-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.conv-back {
  order: -1;
  background: none;
  border: none;
  color: var(--bn-text-muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.conv-back:hover { color: var(--bn-text); }
.conv-back:focus-visible { outline: 2px solid var(--bn-acc); outline-offset: 2px; }

.conv-skip {
  background: none;
  border: none;
  color: var(--bn-text-muted);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.conv-skip:hover { color: var(--bn-text); }
.conv-skip:focus-visible { outline: 2px solid var(--bn-acc); outline-offset: 2px; }

.conv-enter-hint {
  font-size: 0.7rem;
  color: var(--bn-text-faint);
  margin: 0;
}
.conv-enter-hint kbd {
  display: inline-block;
  background: var(--bn-bdr);
  border: 1px solid var(--bn-bdr-strong);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.68rem;
}

/* ── Agreement card (step 10) ───────────────────────────────────────────── */

.conv-agreement-card {
  background: var(--bn-acc-subtle);
  border-left: 3px solid var(--bn-acc);
  border-radius: var(--bn-radius-sm);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
}
.conv-agreement-card__sub {
  margin-top: 0.9rem;
}

.conv-agreement-card h3 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bn-acc);
  margin: 0 0 0.35rem;
}
.conv-agreement-card ul {
  margin: 0;
  padding-left: 1.2rem;
}
.conv-agreement-card li {
  font-size: 0.85rem;
  color: var(--bn-text-muted);
  margin-bottom: 0.25rem;
  line-height: 1.45;
}

/* ── Signature step ──────────────────────────────────────────────────────── */

.conv-sig-date {
  font-size: 0.78rem;
  color: var(--bn-text-muted);
  margin-top: 0.6rem;
}

/* ── Milestone progress indicator ────────────────────────────────────────── */

.conv-milestones {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 2.25rem;
}

.conv-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.conv-milestone-line {
  flex: 1;
  height: 2px;
  background: var(--bn-bdr);
  margin-top: 16px; /* half dot height — keeps line centred with circles */
  min-width: 8px;
  transition: background 0.35s ease;
}

.conv-milestone__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bn-bdr);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.conv-milestone__check {
  width: 13px;
  height: 13px;
  stroke: #fff;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
  flex-shrink: 0;
}

.conv-milestone__label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--bn-text-faint);
  text-align: center;
  line-height: 1.2;
  max-width: 60px;
  transition: color 0.3s ease;
}

/* Active milestone */
.conv-milestone.is-active .conv-milestone__dot {
  background: var(--bn-acc);
  border-color: var(--bn-acc);
  transform: scale(1.15);
}
.conv-milestone.is-active .conv-milestone__label {
  color: var(--bn-text);
  font-weight: 700;
}

/* Done milestone */
.conv-milestone.is-done .conv-milestone__dot {
  background: var(--bn-acc);
  border-color: var(--bn-acc);
}
.conv-milestone.is-done .conv-milestone__check {
  opacity: 1;
}
.conv-milestone.is-done .conv-milestone__label {
  color: var(--bn-acc);
  font-weight: 700;
}

/* Line that follows a done milestone also fills */
.conv-milestone.is-done + .conv-milestone-line {
  background: var(--bn-acc);
}

/* ── Success overlay ─────────────────────────────────────────────────────── */

.conv-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bn-bg);
  animation: convFadeIn 0.45s ease forwards;
}
.conv-success-overlay[hidden] { display: none; }

@keyframes convFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.conv-success-card  { text-align: center; max-width: 500px; }

.conv-success-icon {
  display: block;
  font-size: 4.5rem;
  margin-bottom: 1rem;
  animation: convBounceIn 0.55s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes convBounceIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.conv-success-title {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  color: var(--bn-text);
  margin: 0 0 0.75rem;
}
.conv-success-msg {
  font-size: 1.05rem;
  color: var(--bn-text-muted);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.conv-success-note {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bn-text);
  margin: 0.15rem 0 0.75rem;
}
.conv-success-home {
  display: inline-block;
  margin-top: 1rem;
  text-decoration: none;
}

/* ── Reduced motion overrides ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .conv-milestone__dot    { transition: none; }
  .conv-milestone__check  { transition: none; }
  .conv-milestone-line    { transition: none; }
  .conv-milestone__label  { transition: none; }
  .conv-milestone.is-active .conv-milestone__dot { transform: none; }
  .conv-success-overlay   { animation: none; opacity: 1; }
  .conv-success-icon      { animation: none; opacity: 1; transform: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  .conv-outer  { padding: 1.75rem 1.1rem 2.5rem; }
  .conv-label  { margin-bottom: 1.25rem; }
  .conv-actions { gap: 0.85rem; }
  .conv-child-row { grid-template-columns: 1fr 70px auto; }
  .conv-child-row:only-child { grid-template-columns: 1fr 70px; }
  /* Tighten milestone indicator on small screens */
  .conv-milestone__dot  { width: 26px; height: 26px; }
  .conv-milestone-line  { margin-top: 13px; }
  .conv-milestone__check { width: 11px; height: 11px; }
  .conv-milestone__label { font-size: 0.55rem; max-width: 46px; }
  /* Reduce boxed select padding on small screens */
  .conv-select--boxed { padding: 0.65rem 2rem 0.65rem 0.65rem; font-size: 0.95rem; }
}

/* Very narrow phones — stack time selects */
@media (max-width: 360px) {
  .conv-time-group { grid-template-columns: 1fr; }
}

/* ── 404 / Error page ──────────────────────────────────── */
.error-page__body { text-align: center; padding-bottom: 4rem; }
.error-page__msg  { margin-bottom: 2rem; color: var(--bn-text-muted); }