/* 2026-10-02 | The Retreat, Carlingford | availability calendar
   ------------------------------------------------------------------
   Its own stylesheet, like gallery.css and guide.css: site.css and responsive.css
   load first and supply the masthead, footer, buttons and type; this adds the
   six month grids and the key.

   Everything here is borrowed from site.css rather than invented, so the page
   reads as part of the house and not as a booking widget dropped onto it:
     - colours are site.css tokens only; no new hex values
     - square corners throughout (the site has no border-radius anywhere)
     - weights stop at 500, as everywhere else
     - small labels use the site's caps style: ~.66rem, wide tracking, ink-faint
     - booked nights are the solid --accent-dark of .btn--solid and .review__score,
       not a warning red: a booked night is not an error
     - free nights are the white panel with a --line border, as .reviews
     - the key sits in a ruled band, like .badges under the title on index.html
     - inline links take the accent underline used in .eatlist
     - the narrow-screen breakpoint is responsive.css's 720px
   ------------------------------------------------------------------ */

.wordmark__link { text-decoration: none; color: inherit; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* inline links in prose, as .eatlist */
.availhead__sub a,
.avail-notice a,
.avail-updated a {
  text-decoration: none; border-bottom: 1px solid var(--accent);
}
.availhead__sub a:hover,
.avail-notice a:hover,
.avail-updated a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

/* ---------- page head (as .galleryhead / .guidehead) ----------
   Briefly an inverted green band (2026-10-02); moved back to paper the same day
   when the masthead itself went green on every page - two green bands stacked
   read as one heavy block. */

.availhead { padding: var(--gap) 0 1.6rem; text-align: center; }
.availhead h1 { margin-bottom: .5rem; }
.availhead .eyebrow { margin-bottom: 1rem; }
.availhead .eyebrow a { text-decoration: none; color: var(--ink-faint); }
.availhead .eyebrow a:hover { color: var(--ink); }
.availhead__sub { max-width: 52ch; margin-inline: auto; }

/* ---------- key (a ruled band, as .badges) ---------- */

.avail-legend {
  list-style: none; margin: 0 0 2.8rem; padding: 1.2rem 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-soft);
}
.avail-legend li { display: flex; align-items: center; gap: .6rem; }
.avail-swatch {
  flex: 0 0 auto; width: 1rem; height: 1rem;
  border: 1px solid var(--line); background: #fff;
}
.avail-swatch--booked { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ---------- months ---------- */

.avail-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
/* Six months in fixed columns of 3, 2 or 1, so they always fill whole rows: the
   auto-fit grid used for three months gave four across on a wide screen and left
   six as a row of four and a row of two. */
@media (max-width: 1000px) { .avail-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .avail-months { grid-template-columns: minmax(0, 1fr); } }

/* h3 scale, not h2: three of them side by side at section-heading size shout */
.avail-month__name {
  font-size: 1.45rem; line-height: 1.3; text-align: center;
  padding-bottom: .7rem; margin-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.avail-month__name span { color: var(--ink-faint); }

.avail-grid {
  width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed;
}
/* weekday initials in the site's caps label style (.kit h3, .jumps a) */
.avail-grid th {
  font-size: .62rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 0 .4rem;
}

.avail-day {
  aspect-ratio: 1 / 1; padding: 0;
  text-align: center; vertical-align: middle;
  font-size: .86rem; font-variant-numeric: tabular-nums; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
}
.avail-day--blank { background: transparent; border: 0; }

.avail-day--booked { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* No half-shaded changeover days (removed 2026-10-02): a day is solid or clear by
   its own night, so the day a stay ends is clear - see availability.php. */

.avail-day--past { background: var(--paper-alt); border-color: var(--paper-alt); color: var(--ink-faint); }

.avail-day--today { border-color: var(--ink); font-weight: 500; }

/* ---------- notes ---------- */

.avail-notice {
  max-width: 52ch; margin: 0 auto 2.8rem; padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center; background: var(--paper-alt);
}
.avail-notice p { margin: 0; max-width: none; }

.avail-updated {
  text-align: center; font-size: .8rem; color: var(--ink-faint);
  max-width: 60ch; margin: 2.8rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.avail-foot {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  padding: 2rem 0 var(--gap);
}

@media (max-width: 720px) {
  .avail-legend { gap: .6rem 1.6rem; }
  .avail-grid { border-spacing: 2px; }
  .avail-day { font-size: .8rem; }
}