@charset "utf-8";

/* Booking has one contact card and one short enquiry checklist. */
.contact-page .page-hero {
  padding-bottom: 42px !important;
}

.contact-page #enquire {
  padding-top: 36px;
}

#enquire .booking-layout {
  /* The enquiry column carries a panel like the contact card beside it, so it
     needs the extra width that padding takes out of its content box. At 1fr /
     1.15fr the framed column's content dropped below the 494px that two 240px
     enquiry fields plus their gap need, and the form collapsed to one column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1040px;
  margin-inline: auto;
}

.booking-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(223, 178, 255, 0.25);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(183, 140, 255, 0.13),
    rgba(9, 7, 17, 0.5)
  );
  text-align: center;
}

/* This column was rendering as bare text and inputs while the contact card
   beside it was a bordered panel, and the two were flush at the top, so the
   card's top border sat exactly on the "Your enquiry" baseline and read as a
   stray line running into the heading. Its border, radius and padding were
   declared only in assets/css/layout/content-clarity.css, which was retired,
   deleted on 2026-10-05, and never reached the bundle, so they never applied.
   Declared here instead, where .booking-card already lives. Padding is left a
   little tighter than the card's because this column holds the form fields. */
#enquire .booking-details {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(223, 178, 255, 0.25);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(183, 140, 255, 0.13),
    rgba(9, 7, 17, 0.5)
  );
}

#enquire :is(.booking-card, .booking-details) h2 {
  margin: 0 0 12px;
  font-size: 1.85rem;
  line-height: 1.15;
}

#enquire .booking-person {
  margin: 0 0 24px;
  color: #dfb2ff;
  font-size: 0.9rem;
}

.booking-number {
  /* The phone number is the primary way to book, so it gets a real tap target
     rather than being sized purely as display type (it measured 30px tall). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
}

#enquire .booking-response {
  max-width: 28ch;
  margin: 12px auto 22px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.booking-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.booking-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px !important;
  justify-content: center;
  border-radius: 12px;
}

.booking-actions .booking-whatsapp {
  color: #f7f3ff !important;
  border: 1px solid rgba(223, 178, 255, 0.4);
  background: rgba(183, 140, 255, 0.08);
  box-shadow: none;
}

.booking-actions .booking-whatsapp:hover {
  background: rgba(183, 140, 255, 0.18);
}

.booking-email {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(223, 178, 255, 0.18);
  color: #f7f3ff;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.booking-email > span:first-child {
  color: #dfb2ff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.booking-email:hover > span:last-child,
.booking-number:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.booking-details {
  min-width: 0;
}
.booking-details > p {
  margin: 0 0 20px;
  line-height: 1.65;
}
.booking-checklist {
  margin: 0;
}
.booking-checklist > div {
  padding: 15px 0;
  border-bottom: 1px solid rgba(223, 178, 255, 0.16);
}
.booking-checklist dt {
  color: #fff;
  font-weight: 700;
}
.booking-checklist dd {
  margin: 5px 0 0;
  line-height: 1.6;
  color: var(--muted);
}
#enquire .booking-fee {
  margin: 22px 0;
  font-size: 0.9rem;
}
.booking-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.booking-links a {
  padding-block: 10px;
  color: #dfb2ff;
  text-underline-offset: 4px;
}
.contact-page #included .features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* These two sections sit either side of each other and used to match each other
   at 1040px while the enquiry section above them used the 1120px content rail,
   so the page stepped in and back out as you scrolled. Use the shared rail. */
.contact-page :is(#included, #faq) > .wrap {
  width: min(100% - 2 * var(--ns-gutter, 24px), var(--ns-rail, 1120px));
  max-width: var(--ns-rail, 1120px);
}

@media (max-width: 880px) {
  /* The two-column booking layout is declared with an ID (#enquire
     .booking-layout) so it outranks the shared `.two-col` single-column mobile
     rule in assets/scss/layout/_responsive.scss. Without this, the "Get in
     touch" card and the enquiry form stayed side by side on phones and the card
     was squeezed to roughly 125px, clipping the heading and the WhatsApp
     button. Collapse it here, where the specificity actually wins. */
  #enquire .booking-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .contact-page #included .features {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .contact-page .page-hero {
    padding-bottom: 28px !important;
  }
  .contact-page #enquire {
    padding-top: 24px;
  }
  #enquire .booking-details h2 {
    text-align: left;
  }
}

.booking-sms {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: #dfb2ff;
  font-size: 0.85rem;
  text-underline-offset: 4px;
}

.booking-sms + .booking-email {
  margin-top: 8px;
}

/* A local message builder supplements the direct contact methods. */
.enquiry-builder[hidden],
.enquiry-result[hidden],
#enquiry-fallback[hidden] {
  display: none;
}

.enquiry-builder > p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.6;
}
.enquiry-fields {
  display: grid;
  /* Sized by the space available rather than a fixed breakpoint. The form sits
     in the narrow column of .booking-layout (~317px on desktop), so a hard-coded
     two-up grid squeezed "Venue & location" and "Playing time" into 152px-wide
     boxes. auto-fit keeps one field per row until there is genuinely room for
     two, and widens to two columns by itself if that column ever grows. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px 16px;
}
.enquiry-fields label,
.enquiry-result > label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}
.enquiry-builder input,
.enquiry-builder textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px;
  border: 1px solid rgba(223, 178, 255, 0.32);
  border-radius: 10px;
  background: rgba(7, 6, 11, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color-scheme: dark;
}
.enquiry-builder :is(input, textarea)::placeholder {
  color: #aaa1b8;
  opacity: 1;
}
.enquiry-fields .enquiry-notes {
  grid-column: 1 / -1;
}
.enquiry-fields textarea {
  min-height: 104px;
  resize: vertical;
}
.enquiry-builder input:focus-visible,
.enquiry-builder textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.enquiry-builder input[type="date"] {
  display: block;
  inline-size: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.enquiry-builder form > .button {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
}
.enquiry-result {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.enquiry-result textarea {
  margin-top: 10px;
  min-height: 230px;
  resize: vertical;
  font-size: 1rem;
  font-weight: 400;
}
.enquiry-result > p {
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
}
.enquiry-send-actions {
  display: grid;
  /* Same reasoning as .enquiry-fields: in the narrow form column a fixed two-up
     split left each send button about 150px wide. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.enquiry-send-actions .button {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding-inline: 10px;
  white-space: normal;
  text-align: center;
}
.enquiry-copy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  margin-top: 6px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.enquiry-copy:disabled {
  opacity: 0.6;
  cursor: wait;
}
.enquiry-result .enquiry-status {
  margin: 0;
}

@media (max-width: 520px) {
  .contact-page .booking-details,
  .contact-page .enquiry-builder,
  .contact-page #enquiry-form,
  .contact-page .enquiry-fields {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .enquiry-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .enquiry-fields label,
  .enquiry-result > label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .enquiry-builder input,
  .enquiry-builder textarea,
  .enquiry-result textarea {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .enquiry-builder input[type="date"] {
    inline-size: 100%;
    width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 350px) {
  .enquiry-send-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.enquiry-edit-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Public diary on the booking page ------------------------------------------ */
.contact-page #availability {
  padding-top: 12px;
  padding-bottom: 50px;
}

/* Was min(calc(100% - 36px), 960px): a desktop rule borrowing the mobile
   36px gutter, which left the booking diary 80px narrower than the section
   above it. Use the same content rail as the rest of the page. */
.contact-page #availability > .wrap {
  width: min(100% - 2 * var(--ns-gutter, 24px), var(--ns-rail, 1120px));
  max-width: var(--ns-rail, 1120px);
}

.contact-page .booking-diary-card {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--content-border, #71568b);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(183, 140, 255, 0.11),
      transparent 34%
    ),
    var(--content-feature, linear-gradient(135deg, #30203f, #21182f 75%));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.contact-page .booking-diary-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  align-items: end;
  gap: 28px;
  margin-bottom: 24px;
}

.contact-page .booking-diary-heading .label {
  display: block;
  margin: 0 0 8px;
  color: var(--content-label, #dfbaff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-page .booking-diary-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 3vw, 2.55rem);
  line-height: 1.02;
}

.contact-page .booking-diary-heading > p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.contact-page .diary-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.contact-page .diary-month {
  margin: 0;
  color: var(--text);
  font:
    700 1.08rem/1.2 "Manrope",
    sans-serif;
  text-align: center;
}

.contact-page .diary-nav {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--content-border, #71568b);
  border-radius: 10px;
  background: var(--content-surface, #21182f);
  color: var(--content-label, #dfbaff);
  font:
    700 1.4rem/1 "Manrope",
    sans-serif;
  cursor: pointer;
}

.contact-page .diary-nav:is(:hover, :focus-visible) {
  border-color: var(--control-border, #977aae);
  background: var(--control-surface, #291e3b);
  color: #fff;
}

.contact-page .diary-nav:disabled {
  opacity: 0.32;
  cursor: default;
}

.contact-page .diary-nav:focus-visible,
.contact-page .diary-gig-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.contact-page .diary-weekdays,
.contact-page .diary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.contact-page .diary-weekdays {
  margin-bottom: 7px;
  color: var(--muted);
  font:
    700 0.68rem/1.2 "Manrope",
    sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.contact-page .diary-day,
.contact-page .diary-blank {
  min-width: 0;
  min-height: 82px;
  border-radius: 11px;
}

.contact-page .diary-blank {
  visibility: hidden;
}

.contact-page .diary-day {
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid rgba(207, 166, 255, 0.12);
  background: rgba(46, 35, 74, 0.45);
}

.contact-page .diary-day.has-gig {
  border-color: rgba(207, 166, 255, 0.34);
  background: linear-gradient(
    180deg,
    rgba(183, 140, 255, 0.11),
    rgba(20, 14, 30, 0.78)
  );
}

.contact-page .diary-day-number {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font:
    700 0.72rem/1 "Manrope",
    sans-serif;
}

.contact-page .diary-events {
  display: grid;
  gap: 6px;
}

/* The whole-cell Lemonrock target is a mobile-only overlay. Desktop keeps the
   individual gig links visible, avoiding nested interactive elements. */
.contact-page .diary-mobile-gig-link { display: none; }

.contact-page .diary-gig-link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
  background: rgba(207, 166, 255, 0.08);
  color: var(--text);
  text-decoration: none;
}

.contact-page .diary-gig-link:is(:hover, :focus-visible) {
  background: rgba(207, 166, 255, 0.16);
  color: #fff;
}

.contact-page .diary-gig-link.is-cancelled {
  border: 1px solid rgba(255, 126, 139, 0.48);
  background: rgba(122, 30, 45, 0.12);
}

.contact-page .diary-gig-venue {
  min-width: 0;
  overflow-wrap: anywhere;
  font:
    700 0.72rem/1.25 "Manrope",
    sans-serif;
}

.contact-page .diary-gig-meta {
  color: var(--muted);
  font:
    500 0.64rem/1.35 "Manrope",
    sans-serif;
}

.contact-page .diary-cancelled {
  color: #ff9da8;
  font:
    800 0.58rem/1.2 "Manrope",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-page :is(.diary-month-empty, .diary-empty, .diary-loading) {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

.contact-page .booking-diary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  margin-top: 20px;
}

.contact-page .booking-diary-actions .action-link {
  min-height: 44px;
  color: var(--content-label, #dfbaff);
  text-underline-offset: 4px;
}

.contact-page .booking-diary-actions .button {
  min-height: 44px;
  margin: 0;
}

.contact-page .booking-diary-note {
  max-width: 62ch;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 760px) {
  .contact-page #availability {
    padding-top: 8px;
    padding-bottom: 36px;
  }

  .contact-page .booking-diary-card {
    padding: 18px;
  }

  .contact-page .booking-diary-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    text-align: center;
  }

  .contact-page .booking-diary-heading .label,
  .contact-page .booking-diary-heading h2 {
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }
  .contact-page .booking-diary-heading .label {
    font-size: 0.65rem;
    line-height: 1.35;
    letter-spacing: 0.15em;
  }
  .contact-page .booking-diary-heading h2 {
    max-width: 16ch;
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }
  .contact-page .booking-diary-heading > p {
    max-width: 34ch;
    margin: 2px auto 0;
    font-size: 0.92rem;
    line-height: 1.62;
    text-align: center;
    text-wrap: pretty;
  }
  .contact-page .diary-weekdays {
    display: none;
  }
  .contact-page .diary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .contact-page .diary-blank,
  .contact-page .diary-day:not(.has-gig) {
    display: none;
  }

  .contact-page .diary-day.has-gig {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 11px;
    align-items: start;
    gap: 8px;
  }

  .contact-page .diary-day-number {
    margin: 3px 0 0;
    color: var(--content-label, #dfbaff);
    font-size: 0.9rem;
    text-align: center;
  }

  .contact-page .diary-gig-link {
    padding: 8px 10px;
  }
  .contact-page .diary-gig-venue {
    font-size: 0.86rem;
  }
  .contact-page .diary-gig-meta {
    font-size: 0.72rem;
  }

  .contact-page .booking-diary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .contact-page .booking-diary-actions :is(.action-link, .button) {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Lemonrock diary status colours --------------------------------------------
   The hues follow Lemonrock's own diary key (yellow not available, green
   available, pink gig, blue repeat) so the colours mean the same thing in both
   places. They used to be solid pastel fills with dark text: a bright block of
   yellow in the middle of a dark violet page, and the loudest thing on it.
   Each status is now a dark tile tinted with its hue, with a solid hue bar
   along the top and the status code written in the same colour, so the key
   still reads at a glance without leaving the site's palette. */
.contact-page .public-diary {
  --diary-unavailable: #efe27e;
  --diary-available: #8fe875;
  --diary-gig: #f59ab0;
  --diary-repeat: #8fd8ea;
}

.contact-page .public-diary .diary-day.has-diary-status {
  --diary-hue: var(--diary-unavailable);
  position: relative;
  border-color: color-mix(in srgb, var(--diary-hue) 34%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--diary-hue) 24%, transparent),
      color-mix(in srgb, var(--diary-hue) 10%, transparent)
    ),
    rgba(46, 35, 74, 0.92);
  box-shadow: inset 0 3px 0 var(--diary-hue);
  color: var(--text);
}

.contact-page .public-diary .diary-day.diary-status-unavailable {
  --diary-hue: var(--diary-unavailable);
  /* Most days are "not available", so these tiles recede: same yellow key,
     a fainter bar and tint, letting available and booked dates stand out. */
  border-color: color-mix(in srgb, var(--diary-hue) 28%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--diary-hue) 11%, transparent),
      color-mix(in srgb, var(--diary-hue) 4%, transparent)
    ),
    rgba(46, 35, 74, 0.92);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--diary-hue) 70%, transparent);
}

.contact-page .public-diary .diary-day.diary-status-available {
  --diary-hue: var(--diary-available);
}

.contact-page .public-diary .diary-day.diary-status-gig,
.contact-page .public-diary .diary-day.diary-status-gig-available {
  --diary-hue: var(--diary-gig);
}

.contact-page .public-diary .diary-day.diary-status-repeat {
  --diary-hue: var(--diary-repeat);
}

/* First date of a repeating entry that is also booked: blue tile, pink foot. */
.contact-page .public-diary .diary-day.diary-status-repeat-first {
  --diary-hue: var(--diary-repeat);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--diary-repeat) 24%, transparent) 0 68%,
      color-mix(in srgb, var(--diary-gig) 34%, transparent) 68% 100%
    ),
    rgba(46, 35, 74, 0.92);
}

.contact-page .public-diary .diary-day.diary-status-gig-available::after,
.contact-page .diary-key-swatch.diary-status-gig-available::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--diary-available, #8fe875);
  border: 2px solid rgba(46, 35, 74, 0.9);
  box-shadow: 0 0 8px rgba(143, 232, 117, 0.45);
}

.contact-page .public-diary .diary-day.diary-status-gig-available::after {
  width: 13px;
  height: 13px;
  top: 9px;
  right: 8px;
}

.contact-page .public-diary .diary-day.has-diary-status .diary-day-number {
  color: var(--text);
}

.contact-page .public-diary .diary-status-label {
  display: block;
  margin: 5px 0 7px;
  color: var(--diary-hue, var(--muted));
  /* Lifted toward white so the pink and green codes clear 4.5:1 on their
     own tinted tiles; the hue still matches the key. */
  color: color-mix(in srgb, var(--diary-hue, var(--muted)) 72%, #fff);
  font:
    800 0.56rem/1.2 "Manrope",
    sans-serif;
  letter-spacing: 0.06em;
}

.contact-page .public-diary .diary-day.has-diary-status .diary-gig-link {
  background: rgba(21, 15, 36, 0.55);
  color: #fff;
}

.contact-page .public-diary .diary-day.has-diary-status .diary-gig-meta {
  color: rgba(255, 255, 255, 0.78);
}

.contact-page .diary-key {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(207, 166, 255, 0.16);
}

.contact-page .diary-key-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
}

.contact-page .diary-key-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

/* Six code/meaning pairs read as one undifferentiated run of small text. Each
   pair gets a contained chip so a colour can be matched to its meaning without
   re-reading the whole legend. Chips rather than cards: this is a key, and it
   should stay lighter than the booking panels above it. */
.contact-page .diary-key-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(207, 166, 255, 0.22);
  border-radius: 999px;
  background: rgba(46, 35, 74, 0.55);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.contact-page .diary-key-item strong {
  color: var(--text);
  font-size: 0.7rem;
}

.contact-page .diary-key-swatch {
  --diary-hue: var(--diary-unavailable, #efe27e);
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--diary-hue) 40%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--diary-hue) 24%, rgba(46, 35, 74, 0.95));
  box-shadow: inset 0 3px 0 var(--diary-hue);
}

.contact-page .diary-key-swatch.diary-status-unavailable {
  --diary-hue: var(--diary-unavailable, #efe27e);
}
.contact-page .diary-key-swatch.diary-status-available {
  --diary-hue: var(--diary-available, #8fe875);
}
.contact-page .diary-key-swatch.diary-status-gig,
.contact-page .diary-key-swatch.diary-status-gig-available {
  --diary-hue: var(--diary-gig, #f59ab0);
}
.contact-page .diary-key-swatch.diary-status-repeat {
  --diary-hue: var(--diary-repeat, #8fd8ea);
}
.contact-page .diary-key-swatch.diary-status-repeat-first {
  --diary-hue: var(--diary-repeat, #8fd8ea);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--diary-repeat, #8fd8ea) 18%, rgba(46, 35, 74, 0.95)) 0 62%,
    color-mix(in srgb, var(--diary-gig, #f59ab0) 30%, rgba(46, 35, 74, 0.95)) 62% 100%
  );
}

.contact-page .diary-key-swatch.diary-status-gig-available::after {
  width: 10px;
  height: 10px;
  top: 4px;
  left: 8px;
}

@media (max-width: 760px) {
  .contact-page .public-diary .diary-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    font-size: 0.56rem;
  }

  .contact-page .public-diary .diary-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .contact-page .public-diary .diary-blank {
    display: block !important;
    visibility: hidden !important;
    min-height: 48px !important;
  }

  .contact-page .public-diary .diary-day,
  .contact-page .public-diary .diary-day.has-gig,
  .contact-page .public-diary .diary-day:not(.has-gig) {
    display: block !important;
    min-height: 54px !important;
    padding: 6px 3px !important;
  }

  .contact-page .public-diary .diary-day-number {
    margin: 0 !important;
    text-align: center !important;
    font-size: 0.78rem !important;
  }

  .contact-page .public-diary .diary-status-label {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-size: 0.5rem;
    letter-spacing: 0;
    text-align: center;
  }

  .contact-page .public-diary .diary-events {
    display: none !important;
  }

  .contact-page .public-diary .diary-day.has-gig {
    position: relative;
    cursor: pointer;
  }

  .contact-page .public-diary .diary-mobile-gig-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    min-width: 0;
    min-height: 54px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
  }

  .contact-page .public-diary .diary-mobile-gig-link:active {
    background: rgba(255, 255, 255, 0.08);
  }

  .contact-page .public-diary .diary-day.diary-status-gig-available::after {
    width: 10px;
    height: 10px;
    top: 4px;
    right: 4px;
  }

  .contact-page .diary-key-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
  }

  .contact-page .diary-key-item {
    align-items: flex-start;
    font-size: 0.66rem;
    /* A fully round pill turns into a lopsided oval once a key item wraps. */
    border-radius: 14px;
  }
}

/* Narrow phones: one column, so each key item stays on a single line. */
@media (max-width: 480px) {
  .contact-page .diary-key-items {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-page .diary-key-item {
    align-items: center;
  }
}

@media (max-width: 880px) {
  .contact-page .booking-card .booking-person {
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }
}

/* Tablet / narrow-laptop bridge ------------------------------------------------
   The booking form and calendar are practical UI, so switch to a stable single
   rail earlier than phone width instead of letting columns become cramped. */
@media (min-width: 761px) and (max-width: 1080px) {
  .contact-page :is(#enquire, #availability, #included, #faq) > .wrap {
    width: min(calc(100% - clamp(48px, 7vw, 72px)), 46rem) !important;
    max-width: 46rem;
  }

  #enquire .booking-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 44rem;
    gap: 24px;
  }

  #enquire :is(.booking-card, .booking-details),
  .contact-page .booking-diary-card {
    padding: clamp(22px, 3vw, 28px);
    border-radius: 18px;
  }

  .booking-actions {
    max-width: 28rem;
    margin-inline: auto;
  }

  .contact-page #included .features {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }

  .contact-page .booking-diary-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    text-align: center;
  }

  .contact-page .booking-diary-heading > p {
    margin-inline: auto;
    text-align: center;
  }
}

@media (min-width: 761px) and (max-width: 860px) {
  .contact-page #included .features {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Lemonrock-style diary ------------------------------------------------------
   Match Lemonrock's own gig diary: solid pastel day squares with dark text,
   using the same hues as its key (yellow not available, green available,
   pink gig, blue repeat), so the calendar looks the same in both places.
   Supersedes the tinted dark tiles above; shape, spacing and the key's
   layout are unchanged. */
.contact-page .public-diary {
  --diary-unavailable-fill: #f6f3a9;
  --diary-unavailable-edge: #d8d37e;
  --diary-available-fill: #acec93;
  --diary-available-edge: #7bcf64;
  --diary-gig-fill: #f3a5b6;
  --diary-gig-edge: #d97b91;
  --diary-repeat-fill: #bfe8f1;
  --diary-repeat-edge: #8bcbd8;
  --diary-ink: #241a2e;
}

.contact-page .public-diary .diary-day.has-diary-status {
  --diary-fill: var(--diary-unavailable-fill);
  --diary-edge: var(--diary-unavailable-edge);
  border: 1px solid var(--diary-edge);
  background: var(--diary-fill);
  box-shadow: none;
  color: var(--diary-ink);
}
.contact-page .public-diary .diary-day.diary-status-unavailable {
  --diary-fill: var(--diary-unavailable-fill);
  --diary-edge: var(--diary-unavailable-edge);
  border: 1px solid var(--diary-edge);
  background: var(--diary-fill);
  box-shadow: none;
}
.contact-page .public-diary .diary-day.diary-status-available {
  --diary-fill: var(--diary-available-fill);
  --diary-edge: var(--diary-available-edge);
}
.contact-page .public-diary .diary-day.diary-status-gig,
.contact-page .public-diary .diary-day.diary-status-gig-available {
  --diary-fill: var(--diary-gig-fill);
  --diary-edge: var(--diary-gig-edge);
}
.contact-page .public-diary .diary-day.diary-status-repeat {
  --diary-fill: var(--diary-repeat-fill);
  --diary-edge: var(--diary-repeat-edge);
}
.contact-page .public-diary .diary-day.diary-status-repeat-first {
  --diary-edge: var(--diary-repeat-edge);
  background: linear-gradient(180deg, var(--diary-repeat-fill) 0 68%, var(--diary-gig-fill) 68% 100%);
}

.contact-page .public-diary .diary-day.has-diary-status .diary-day-number {
  color: var(--diary-ink);
}
.contact-page .public-diary .diary-day.has-diary-status .diary-status-label {
  color: rgba(36, 26, 46, 0.78);
}
.contact-page .public-diary .diary-day.has-diary-status .diary-gig-link {
  background: rgba(255, 255, 255, 0.55);
  color: var(--diary-ink);
}
.contact-page .public-diary .diary-day.has-diary-status .diary-gig-meta {
  color: rgba(36, 26, 46, 0.78);
}
.contact-page .public-diary .diary-day.diary-status-gig-available::after,
.contact-page .diary-key-swatch.diary-status-gig-available::after {
  background: #8fe875;
  border: 2px solid rgba(31, 83, 24, 0.35);
  box-shadow: none;
}

/* Key swatches: the same solid fills as the day squares. */
.contact-page .diary-key-swatch {
  border: 1px solid var(--diary-unavailable-edge, #d8d37e);
  background: var(--diary-unavailable-fill, #f6f3a9);
  box-shadow: none;
}
.contact-page .diary-key-swatch.diary-status-available {
  border-color: #7bcf64;
  background: #acec93;
}
.contact-page .diary-key-swatch.diary-status-gig,
.contact-page .diary-key-swatch.diary-status-gig-available {
  border-color: #d97b91;
  background: #f3a5b6;
}
.contact-page .diary-key-swatch.diary-status-repeat {
  border-color: #8bcbd8;
  background: #bfe8f1;
}
.contact-page .diary-key-swatch.diary-status-repeat-first {
  border-color: #8bcbd8;
  background: linear-gradient(180deg, #bfe8f1 0 62%, #f3a5b6 62% 100%);
}

/* Phones: a mobile rule left-aligned three lines that sit under centred
   headings/buttons (tablet and desktop already centre them), so their
   ragged left edges read as misaligned. Centre them like the rest. */
@media (max-width: 760px) {
  html body #main .booking-card .booking-response,
  html body #main .booking-diary-heading > p,
  html body #main .booking-diary-card > .booking-diary-note {
    margin-inline: auto !important;
    text-align: center !important;
    text-wrap: balance;
  }
  /* The Lemonrock link sat flush left above the centred button and note. */
  html body #main .booking-diary-actions > .action-link {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Enquiry card foot: the fee note stopped short of the form, and the two
     links drifted (one row ending short of the fields at 390-430px, two
     ragged rows at 320px). Run the note the full form width and stack the
     links as full-width rows, arrow on the right edge, like a settings list. */
  html body #main #enquire .booking-fee {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  html body #main #enquire .booking-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin-top: 18px !important;
    border-top: 1px solid rgba(207, 166, 255, 0.16);
  }
  html body #main #enquire .booking-links > a {
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.3em !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(207, 166, 255, 0.16);
    text-align: left !important;
  }
  html body #main #enquire .booking-links > a::after {
    margin-left: auto !important;
  }
}

/* 761-1080px: the booking cards sat 16px inside the 46rem rail while the
   diary card used its full width, so their edges didn't line up. */
@media (min-width: 761px) and (max-width: 1080px) {
  html body #main #enquire .booking-layout {
    max-width: none !important;
    margin-inline: 0 !important;
  }
}