/* ============================================================
   NEEDLEWORK IS BY APPOINTMENT (owner ruling, 18 September 2026)
   Tokens come from phase1.css; nothing here defines a color.

   WHY 57 AND NOT 41. Filename order IS cascade order in this theme
   (functions.php globs assets/css/overhaul/*.css and enqueues them in
   filename order after phase1.css). 40-classes.css styles the Book button
   and the class panel, and 50-disciplines.css styles the /needlework/ page,
   so anything that has to sit beside either of those loads after both.
   Nothing here overrides an existing rule at equal specificity: every
   selector below names a class that only the appointment markup carries.
   ============================================================ */

/* ---------- the calendar row and the class-page dates list ----------
   Where a bookable class shows a Book button, a needlework date shows the
   arrangement and the number that reaches Deborah. It is deliberately NOT
   a button: there is nothing to press and nothing to buy. */

.rhcl-appointment {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--tx-2);
}

.rhcl-appointment-tel {
  color: var(--tx-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.rhcl-appointment-tel:hover,
.rhcl-appointment-tel:focus-visible {
  color: var(--accent, var(--tx-1));
}

/* ---------- the sentence itself ----------
   Used in the class panel, at the foot of the class page, on /needlework/
   and in the calendar's empty state. */

.rhc-appointment-note {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  color: var(--tx-2);
  line-height: 1.6;
}

.rhc-appointment-note .rhc-tlink {
  white-space: nowrap;
  font-weight: 600;
}

/* The panel variant already owns the rule above it from 40-classes.css's
   .rhc-panel-note; it carries both class names, so only the margin needs
   settling here. */
.rhc-panel--appointment .rhc-appointment-note {
  margin-bottom: 0;
}

.rhc-panel--appointment .rhc-panel-act .rhc-btn {
  white-space: nowrap;
}

/* ---------- the closing block on the class page ---------- */

.rhc-classpage-appointment {
  background: var(--ground);
  padding: 0 0 56px;
}

.rhc-classpage-appointment h2 {
  margin: 0 0 10px;
}

.rhc-classpage-appointment .rhc-appointment-note {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: var(--fs-base, 1rem);
}

/* ---------- /needlework/ ---------- */

.rh-disc-appointment {
  /* Sits between the lede and the calendar button on the dark hero: pull it up
     to the lede, keep the button's 30px breathing room, and use the hero's own
     text colour (the default --tx-2 is a light-page tone and nearly vanishes). */
  margin: -12px 0 30px;
  max-width: 42ch;
  color: var(--on-ink-2);
}