/* Week and month views of the public schedule (routes/calendar.js). */
.view-switch { display: flex; gap: 0.4rem; margin: 0 0 0.8rem; flex-wrap: wrap; }
.cal-nav { display: flex; gap: 0.4rem; justify-content: space-between; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.cal-muted { color: var(--pico-muted-color, #777); }
.cal-title::first-letter { text-transform: uppercase; }

/* Week: seven columns on wide screens, one day under the other on phones. */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.week-day { border: 1px solid var(--pico-muted-border-color, #ddd); border-radius: 6px; padding: 0.5rem; min-height: 8rem; margin: 0; }
.week-day h6 { margin: 0 0 0.4rem; font-size: 0.85rem; }
.week-day h6::first-letter { text-transform: uppercase; }
.week-day.is-today { border-color: var(--pico-primary, #4f7cac); box-shadow: inset 0 3px 0 var(--pico-primary, #4f7cac); }
.cal-class {
  display: flex; flex-direction: column; gap: 0.05rem;
  padding: 0.35rem 0.45rem; margin-bottom: 0.4rem; border-left: 4px solid;
  border-radius: 4px; background: var(--pico-card-background-color, #f7f7f7);
  font-size: 0.82rem; line-height: 1.25; text-decoration: none; color: inherit;
}
a.cal-class[href]:hover { background: var(--pico-secondary-background, #eef); }
.cal-class small { font-size: 0.75rem; color: var(--pico-muted-color, #666); }
.cal-class .cal-spots { font-weight: 600; }
.is-past { opacity: 0.45; cursor: default; }

/* Month: calendar grid; on phones, coloured dots instead of class names. */
.month-grid { border: 1px solid var(--pico-muted-border-color, #ddd); border-radius: 6px; overflow: hidden; }
.month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head div { padding: 0.3rem; font-size: 0.8rem; font-weight: 600; text-align: center; background: var(--pico-card-background-color, #f3f3f3); }
.month-cell { min-height: 6.5rem; padding: 0.25rem; border-top: 1px solid var(--pico-muted-border-color, #ddd); border-left: 1px solid var(--pico-muted-border-color, #ddd); overflow: hidden; }
.month-row .month-cell:first-child { border-left: 0; }
.month-cell.is-other { background: var(--pico-card-sectioning-background-color, #fafafa); }
.month-cell.is-other .month-day { opacity: 0.4; }
.month-cell.is-today .month-day { background: var(--pico-primary, #4f7cac); color: #fff; border-radius: 999px; padding: 0 0.4rem; }
.month-day { display: inline-block; font-size: 0.8rem; font-weight: 600; text-decoration: none; margin-bottom: 0.15rem; }
.month-class {
  display: block; font-size: 0.72rem; line-height: 1.2; padding: 0.1rem 0.25rem; margin-bottom: 0.15rem;
  border-left: 3px solid var(--c); border-radius: 3px; text-decoration: none; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-time { font-weight: 600; margin-right: 0.2rem; }

@media (max-width: 900px) {
  .week-grid { grid-template-columns: 1fr; }
  .week-day { min-height: 0; }
  .week-day.is-empty { opacity: 0.6; }
}
@media (max-width: 640px) {
  .month-cell { min-height: 3.6rem; padding: 0.2rem; }
  .month-class { display: inline-block; width: 0.55rem; height: 0.55rem; padding: 0; margin: 0 0.1rem 0 0; border: 0; border-radius: 50%; background: var(--c); }
  .month-class span { display: none; }
}

/* Top menu on phones: upstream's links already overflowed at 375px and the
   fork adds Accueil, so the brand takes its own line and the links wrap. */
@media (max-width: 640px) {
  body > nav.container:first-of-type { flex-wrap: wrap; }
  body > nav.container:first-of-type > ul:last-child { flex-wrap: wrap; margin-left: 0; }
  body > nav.container:first-of-type > ul:last-child li { padding: 0.35rem 0.5rem; }
}

/* Legal layer (Quebec): footer, terms statement on forms, legal pages. */
.legal-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-bottom: 0.3rem; }
.terms-statement { margin: 0.2rem 0 0.8rem; color: var(--pico-muted-color, #666); }
.legal-doc { max-width: 46rem; line-height: 1.6; }
.legal-doc h2 { margin-top: 1.6rem; font-size: 1.3rem; }

/* Club identity (Admin → Site): logo in the top menu, logo preview. */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; }
.site-logo-preview { width: 72px; height: 72px; object-fit: contain; display: block; margin-bottom: 0.4rem; }
.site-form fieldset { margin-bottom: 1.6rem; }
.site-form legend h4 { margin: 0; }
/* Admin → Site: many fields per section, so the rows wrap instead of
   Pico's one-row .grid squeezing 18 inputs into slivers. */
.site-form .grid.site-legal,
.site-form .grid.site-terms {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: 1.2rem;
  align-items: end;
}
.site-form .grid.site-terms { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.site-form .grid.site-legal label, .site-form .grid.site-terms label { margin-bottom: 0.2rem; }