/* =========================================================================
   WW1AHT MASTER — PLUGIN FRONT-ENDS (ww1-bookings, ww1-poetry)
   CSS ONLY. No plugin PHP is touched. These rules bring the plugins' own
   markup onto the theme's tokens so the forms/calendar match the site.
   (Text inputs already inherit the global field styling in _components.css.)
   ========================================================================= */

/* ---- Shared form chrome ------------------------------------------------ */
.ww1-bookings-form, .ww1-poetry-form { display: flex; flex-direction: column; gap: var(--space-md); }
.ww1-bookings-title,
.ww1-poetry-form-wrapper h2, .ww1-poetry-form-wrapper h3 {
  font-family: var(--font-heading); font-weight: var(--fw-heading); color: var(--primary);
}
.ww1-bookings-form button[type="submit"], .ww1-poetry-form button[type="submit"],
.ww1-bookings-form input[type="submit"], .ww1-poetry-form input[type="submit"] {
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 1.05rem;
  padding: 13px 30px; border: none; border-radius: var(--radius);
  background: var(--primary); color: var(--bg); cursor: pointer; align-self: flex-start;
  transition: background var(--dur-menu) var(--ease);
}
.ww1-bookings-form button[type="submit"]:hover, .ww1-poetry-form button[type="submit"]:hover,
.ww1-bookings-form input[type="submit"]:hover, .ww1-poetry-form input[type="submit"]:hover { background: var(--primary-dark); }
.ww1-required { color: var(--donate); }
.ww1-poetry-form label input[type="checkbox"], .ww1-bookings-form label input[type="checkbox"] { width: auto; margin-right: 8px; }

/* ---- Messages ---------------------------------------------------------- */
.ww1-booking-error, .ww1-poetry-error { background: #fbeae7; border: 1px solid var(--donate); color: #7a2318; border-radius: var(--radius); padding: 12px 16px; }
.ww1-booking-success, .ww1-poetry-success { background: #eaf3ec; border: 1px solid #3f7a4e; color: #28502f; border-radius: var(--radius); padding: 12px 16px; }

/* ---- Bookings calendar ------------------------------------------------- */
.ww1-public-calendar-container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ww1-public-calendar-nav { display: flex; align-items: center; justify-content: space-between; background: var(--primary); color: var(--bg); padding: 14px 18px; }
.ww1-public-month-label { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 1.4rem; color: var(--bg); }
.ww1-prev-month, .ww1-next-month { background: none; border: 0; color: var(--bg); font-size: 1.2rem; cursor: pointer; }

/* ---- Team calendar (multi-month view) ----------------------------------
   The booking calendar and the team calendar share class names but not
   structure. In the booking calendar the month label sits INSIDE the dark
   .ww1-public-calendar-nav bar, so light-on-dark is right. The team calendar
   puts each month's label in its own .ww1-public-calendar-header on the white
   card instead — where that same light colour left "August 2026" all but
   invisible. Scope the colour to the surface the label is actually on.       */
.ww1-public-calendar-header {
  padding: 12px 16px 0;
  text-align: center;
}
.ww1-public-calendar-header .ww1-public-month-label {
  color: var(--primary);
}

/* The team calendar's Previous/Next are plain <button>s that were never
   styled, so they fell back to the browser default: black label on no
   background, sitting on the dark blue nav bar. Effectively unreadable.
   Compose the sanctioned on-dark secondary treatment rather than inventing a
   new button — brass outline, filling brass on hover.                        */
.ww1-public-calendar-nav .ww1-public-prev,
.ww1-public-calendar-nav .ww1-public-next {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--dur-menu) var(--ease), color var(--dur-menu) var(--ease);
}
.ww1-public-calendar-nav .ww1-public-prev:hover,
.ww1-public-calendar-nav .ww1-public-next:hover {
  background: var(--accent);
  color: var(--primary-dark);
}
.ww1-public-calendar-nav .ww1-public-prev:focus-visible,
.ww1-public-calendar-nav .ww1-public-next:focus-visible {
  outline: 2px solid var(--hover-accent);
  outline-offset: 2px;
}

/* Three months sit side by side inside a 760px reading column, so each month
   card is only ~229px wide. Seven columns of plain `1fr` still size themselves
   to their CONTENT, because a grid item's default min-width is auto — they came
   to 255px, and .ww1-public-calendar-container above sets overflow:hidden, so
   the Sunday column was simply chopped off. minmax(0, 1fr) plus min-width:0 on
   the cells lets the columns share the width they actually have, and the inline
   padding is dropped because it was eating what little there is.

   These rules are DELIBERATELY UNSCOPED. The public booking calendar and the
   team calendar share this markup and both render three months across, so both
   need the same treatment — the fix was originally scoped to the team calendar
   and the booking calendar was left clipping Sunday.

   Note the ordering: the plugin's own public.css declares
   grid-template-columns: repeat(7, 1fr) at the same specificity, and the theme
   only wins because _plugins.css is enqueued after it. Keep it that way.      */
.ww1-public-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 10px 8px 14px;
}
.ww1-public-day,
.ww1-public-day-name {
  min-width: 0;
  padding-inline: 0;
}
.ww1-public-day-name {
  text-align: center; font-size: 0.62rem; letter-spacing: 0;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.ww1-public-day {
  text-align: center; padding-block: 7px; border-radius: var(--radius);
  font-size: 0.82rem; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease);
}

/* Below the three-across breakpoint let the months stack rather than crush. */
@media (max-width: 700px) {
  .ww1-public-calendar-row { flex-wrap: wrap; }
  .ww1-public-calendar-container { flex: 1 1 100%; }
}
.ww1-public-day.open { background: var(--surface); color: var(--primary); border-color: var(--accent); font-weight: 600; cursor: pointer; }
.ww1-public-day.open:hover { background: var(--hover-accent); }
.ww1-public-day.selected { background: var(--primary); color: var(--bg); border-color: var(--primary); font-weight: 600; }
.ww1-public-day.closed, .ww1-public-day.disabled, .ww1-public-day.booked-day { background: #e6e2da; color: var(--muted); }
.ww1-public-day.empty { background: transparent; border-color: transparent; }
.ww1-public-calendar-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); padding: 0 18px 16px; }
.ww1-selected-date { font-weight: 600; color: var(--primary); }

/* ---- Poetry line-guidance helper (if the plugin renders one) ----------- */
.ww1-poetry-form .line-count, .ww1-poetry-form .ww1-line-guidance { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-top: 6px; }