/* ============================================================
   schedule-theme.css — SCHEDULE PAGE ONLY
   Applies the home page's "Smokehouse Steel & Ember" look to
   schedule.php. Loaded LAST on schedule.php only, so every rule
   is page-scoped. RECOLOR ONLY — no structural changes, no
   display/position edits to FullCalendar internals or to any
   element the calendar JS reads (.fc-*, .past-date, .modal,
   .waitlist-button, .time-slot, #calendar, #bookingForm ...).
   The calendar is rethemed through FullCalendar's own --fc-*
   custom properties, which is the intended theming hook.
   ============================================================ */

body {
  --h-char:   #14110f;
  --h-char-2: #211c19;
  --h-ember:  #f74040;
  --h-flame:  #ff7a1a;
  --h-line:   rgba(255, 255, 255, .1);
  --h-font-display: "Oswald", "Raleway", system-ui, sans-serif;

  background-color: var(--h-char);
}

main {
  background-color: var(--h-char);
}

/* ---- Scheduling section ------------------------------------ */
#scheduling {
  padding: 3rem 1.5rem 4rem;
}
@media (max-width: 768px) {
  #scheduling { padding: 1.75rem 1rem 3rem; }
}

/* Info / instructions panel → dark steel-glass card */
.scheduling-text .process-content {
  background: linear-gradient(180deg, rgba(38, 33, 29, .92), rgba(24, 20, 18, .92));
  border: 1px solid var(--h-line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .8);
  color: #cbc3bb;
}
.scheduling-text .process-content h3 {
  font-family: var(--h-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--h-flame);
}
.scheduling-text p,
.scheduling-text ul,
.scheduling-text ol,
.scheduling-text li { color: #cbc3bb; }
.scheduling-text strong { color: #efe7df; }

/* ---- Calendar shell ---------------------------------------- */
#calendar-container {
  background: linear-gradient(180deg, rgba(38, 33, 29, .92), rgba(24, 20, 18, .92));
  border: 1px solid var(--h-line);
  border-radius: 16px;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .8);
}

#calendar-loading { color: #cbc3bb; padding: 1rem; }

/* ---- FullCalendar retheme (via its own CSS variables) ------ */
#calendar {
  --fc-page-bg-color: transparent;
  --fc-border-color: rgba(255, 255, 255, .12);
  --fc-neutral-bg-color: rgba(255, 255, 255, .04);
  --fc-neutral-text-color: #a79f97;
  --fc-today-bg-color: rgba(247, 64, 64, .14);
  --fc-highlight-color: rgba(255, 122, 26, .18);
  --fc-non-business-color: rgba(255, 255, 255, .03);

  --fc-button-text-color: #fff;
  --fc-button-bg-color: rgba(255, 255, 255, .07);
  --fc-button-border-color: rgba(255, 255, 255, .16);
  --fc-button-hover-bg-color: var(--h-ember);
  --fc-button-hover-border-color: var(--h-ember);
  --fc-button-active-bg-color: var(--h-ember);
  --fc-button-active-border-color: var(--h-ember);

  --fc-event-bg-color: rgba(38, 33, 29, .95);
  --fc-event-border-color: rgba(255, 122, 26, .5);
  --fc-event-text-color: #f2ece5;

  color: #e6ded6;
}

/* Month title */
#calendar .fc-toolbar-title {
  font-family: var(--h-font-display);
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
/* Toolbar buttons: keep the caps look, add ember hover via vars above */
#calendar .fc-button {
  font-family: var(--h-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: none;
}

/* Weekday header + day numbers */
#calendar .fc-col-header-cell-cushion { color: #cbc3bb; text-decoration: none; }
#calendar .fc-daygrid-day-number { color: #e6ded6; text-decoration: none; }
#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color: #fff; font-weight: 700; }

/* Available-slot events → ember-edged dark chips, readable on dark */
#calendar .fc-daygrid-event { box-shadow: none; }
#calendar .fc-event:hover { border-color: var(--h-flame); }

/* Past / disabled days — dim them, keep them non-inviting */
#calendar .fc-day-past,
#calendar .past-date { background: rgba(0, 0, 0, .28); }
#calendar .fc-day-past .fc-daygrid-day-number,
#calendar .past-date .fc-daygrid-day-number { color: #6c655e; }

/* Gentle hover affordance on bookable day cells */
#calendar .fc-daygrid-day:not(.fc-day-past):hover {
  background: rgba(255, 122, 26, .07);
}

/* ---- Modals (waitlist + time-slot pickers) ----------------- */
.modal-content {
  background: linear-gradient(180deg, #241f1b, #17130f);
  border: 1px solid rgba(255, 122, 26, .28);
  color: #e6ded6;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
}
.modal-content h2 {
  font-family: var(--h-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
}
.modal-content p { color: #cbc3bb; }
.modal-content .close { color: #cbc3bb; }
.modal-content .close:hover { color: var(--h-ember); }

/* Time-slot list chips */
#timeSlotList li {
  background: rgba(255, 255, 255, .06);
  color: #efe7df;
  border: 1px solid rgba(255, 255, 255, .1);
}
#timeSlotList li:hover {
  background: var(--h-ember);
  border-color: var(--h-ember);
  color: #fff;
}

/* Waitlist form fields on dark */
.waitlist-form label { color: #efe7df; }
.waitlist-form input,
.waitlist-form select {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.waitlist-form input::placeholder { color: #8a827a; }
.waitlist-form input:focus,
.waitlist-form select:focus {
  outline: 2px solid var(--h-flame);
  outline-offset: 1px;
  border-color: transparent;
}
.waitlist-form select option { background: #241f1b; color: #fff; }

/* ---- CTA buttons on this page → ember gradient ------------- */
.cta-button {
  background: linear-gradient(100deg, var(--h-flame), var(--h-ember));
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(247, 64, 64, .7);
  font-family: var(--h-font-display);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cta-button:hover { color: #14110f; }

/* Accessibility: visible focus */
.scheduling-text a:focus-visible,
#calendar a:focus-visible,
.modal button:focus-visible { outline: 2px solid var(--h-flame); outline-offset: 3px; }