/* themes/naqi/assets/nq-booking-calendar.css — the booking month calendar.
 *
 * Linked by `snippets/nq-booking-slots.liquid`, so it loads on booking PDPs
 * and nowhere else. Hand-written, NOT compiled by Tailwind.
 *
 * WHY THIS IS A STYLESHEET AND NOT UTILITIES. Cally renders into a SHADOW ROOT,
 * so every rule below is a `::part()` selector — no class in the light DOM can
 * reach a shadow cell, and Tailwind has no way to express one. This is the same
 * category `assets/base.css` exists for ("only what utilities cannot express");
 * it is a separate file because it belongs to one snippet and every non-booking
 * page would otherwise pay for it. The theme's dev-check bans a `<style>`
 * element in a section or snippet, which is the rule that made this a linked
 * asset rather than an inline block.
 *
 * Cally's part vocabulary, read off the vendored dist rather than the docs:
 *   container · header · heading · button previous · button next · months ·
 *   table · tr head · th day day-N · button day day-N [selected|outside]
 *   [disallowed] [today]
 * A `::part(day)` selector matches any element whose part LIST contains `day`,
 * which is what lets the state parts layer on top of the base cell.
 *
 * WHICH ELEMENT CARRIES WHICH PART — the thing that cost the most time here.
 * `::part()` only reaches the shadow tree of the element it is written against,
 * and Cally nests two components: the FRAME (container · header · heading ·
 * button previous/next) is `calendar-date`'s shadow, while the GRID (table ·
 * head · day, and every day state) lives in `calendar-month`'s. Writing all of
 * it against `calendar-date` matched nothing for the cells — the grid rendered
 * in Cally's own colours, the selected day came out BLACK instead of vermilion,
 * and nothing errored. Custom properties are the exception that made it
 * confusing: they inherit straight through shadow boundaries, so
 * `--color-accent` resolved correctly the whole time while not one part rule
 * applied.
 */

/* The handover. The island's own 14-day strip is what renders by default; the
 * calendar module adds `nq-cal-on` to the island root only once it has really
 * mounted, and that is when the strip steps aside. A blocked or broken bundle
 * therefore leaves the buyer with a working strip instead of an empty panel. */
.nq-cal-on [data-ez-booking-loading],
.nq-cal-on [data-ez-booking-error],
.nq-cal-on [data-ez-booking-empty],
.nq-cal-on [data-ez-booking-ready] {
  display: none;
}

.nq-cal {
  /* ONE source for the calendar's inset. The card's padding and the weekday
     row's inset are both derived from it below, so the two cannot drift apart
     and leave the header misaligned with the columns it labels. */
  --nq-cal-pad: 0.75rem;
  /* Makes the calendar a query container, so the weekday row can ask how wide
     THIS calendar is rather than how wide the viewport is — the buy column is
     ~500px on desktop and full-width on a phone, and only the former fits the
     full day names. */
  container-type: inline-size;
  container-name: nq-cal;
}

/* ---- our weekday header ------------------------------------------------
   Seven equal columns against the table's seven equal (`table-layout: fixed`)
   columns, inset by the card's padding PLUS its 1px border so column centres
   line up with the day cells below. */
.nq-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-inline: calc(var(--nq-cal-pad) + 1px);
  margin-block-end: -0.5rem;
}

.nq-cal-weekday {
  min-width: 0;
  text-align: center;
  font-family: var(--nq-font-heading);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nq-text-muted);
}

/* Full names only when this calendar is genuinely wide enough for them. */
.nq-cal-wd-long {
  display: none;
}
.nq-cal-wd-short {
  display: inline;
}

@container nq-cal (min-width: 420px) {
  .nq-cal-wd-long {
    display: inline;
  }
  .nq-cal-wd-short {
    display: none;
  }
}

/* Cally's own header row stays in the DOM — its `<th>` carries a visually
   hidden FULL day name that screen readers rely on — but its visible glyph is
   collapsed to nothing. `font-size: 0` hides the drawn letter without removing
   any text from the accessibility tree, which `display: none` would. */
.nq-cal calendar-month::part(head) {
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.nq-cal calendar-date {
  /* Cally's own two hooks, pointed at the theme's roles. */
  --color-accent: var(--nq-accent);
  --color-text-on-accent: var(--nq-primary-text);
  display: block;
  width: 100%;
  font-family: var(--nq-font-heading);
  color: var(--nq-page-text);
}

/* ---- FULL BLEED ACROSS THE CARD --------------------------------------
   Cally sizes its grid INTRINSICALLY: the table is as wide as its widest day
   label, so the month hugged the inline-start and left most of the panel empty.
   Nothing inherits a width through a shadow boundary, so `width: 100%` has to
   be restated on each part in the chain — host → container → months → table —
   and missing any one of them leaves the grid at its intrinsic size again.

   `table-layout: fixed` is what actually distributes the cells: without it the
   columns size to content, so a row containing «11» and «1» gets uneven
   gutters. Fixed makes all seven columns exactly 1/7 regardless of the digits
   in them, which is also what keeps the weekday header aligned to its column. */
.nq-cal calendar-date::part(container) {
  width: 100%;
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-card);
  background: var(--nq-surface-bg);
  padding: var(--nq-cal-pad);
}

.nq-cal calendar-date::part(months) {
  width: 100%;
}

/* The header spans the full width with the chevrons pinned to the edges and the
   title centred between them — `flex: 1` on the heading rather than a fixed
   width, so «يوليو 2026» and «سبتمبر 2026» centre identically. */
.nq-cal calendar-date::part(header) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-block-end: 0.75rem;
}

/* «يوليو 2026» — tabular so the year does not shift the title as months change,
   and flex:1 so it takes the space between the two chevrons and centres in it. */
.nq-cal calendar-date::part(heading) {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--nq-heading);
}

.nq-cal calendar-date::part(button) {
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-btn);
  background: var(--nq-surface-bg);
  color: var(--nq-page-text);
}

.nq-cal calendar-date::part(button):hover {
  background: var(--nq-placeholder-bg);
}

/* The month arrows disable themselves at the real booking horizon, because
   `min`/`max` are set from today and `max_advance_days`. Fading rather than
   hiding keeps the control's position stable as the buyer pages. */
.nq-cal calendar-date::part(button):disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Cally prints the month name here and the YEAR on the date-level heading, so
   the title arrives as two stacked lines. The module fills the date heading
   slot with the whole «يوليو 2026» instead; this hides the duplicate. */
.nq-cal calendar-month::part(heading) {
  display: none;
}

/* The grid itself. `table` must be restated at 100% — see the FULL BLEED note —
   and `fixed` is what gives every column an identical 1/7 share. */
.nq-cal calendar-month::part(table) {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Day cells fill their column and stay a comfortable touch target. `width:100%`
   inside a fixed-layout column is what makes the accent fill of the selected day
   read as a full cell rather than a chip floating in one. */
.nq-cal calendar-month::part(day) {
  width: 100%;
  min-height: 2.5rem;
  border-radius: var(--nq-radius-btn);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

/* Header cells also carry `day`; collapse them directly after that part-list rule. */
.nq-cal calendar-month::part(th) {
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Ledger: the chosen day is the one place accent is spent in this control. */
.nq-cal calendar-month::part(selected) {
  background: var(--nq-accent);
  color: var(--nq-primary-text);
  font-weight: 700;
}

/* A closed day stays LEGIBLE and plainly inert. Hiding it would read as "that
   day does not exist"; struck through and muted says "the shop is shut", which
   is the true claim. Cally makes these non-interactive itself. */
.nq-cal calendar-month::part(disallowed) {
  color: var(--nq-text-muted);
  opacity: 0.4;
  text-decoration: line-through;
}

/* Today is marked with a hairline ring rather than a fill — a fill here would
   compete with the accent that means "chosen". */
.nq-cal calendar-month::part(today) {
  box-shadow: inset 0 0 0 1px var(--nq-border);
}

.nq-cal calendar-month::part(outside) {
  opacity: 0.25;
}