/* Live-site additions on top of the design system (m3.css). Keep this file small. */

/* Anchor targets are not hidden under the sticky header. */
html { scroll-padding-top: 6.5rem; }

/* The hidden attribute always wins, even over components that set their own display. */
[hidden] { display: none !important; }

/* JS-only controls stay hidden without scripts (site.js reveals them). */
html:not(.js) [data-js-only] { display: none !important; }

/* Disclosure chevrons follow their button's state. */
[aria-expanded="true"] .m3-chev { transform: rotate(180deg); }
.m3-chev { transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .m3-chev { transition: none; } }
:root[data-m3-motion="reduce"] .m3-chev { transition: none; }

/* Busy submit button while a form is sending. */
form[data-busy="1"] [type="submit"] { opacity: .7; cursor: progress; }

/* Turnstile widget spacing (flexible width up to the form column). */
.cf-turnstile { min-height: 65px; max-width: 100%; }

/* Calendar days with no visible events after filtering. */
[data-filter-group][data-empty] .cal__events { visibility: hidden; }

/* Copy buttons confirm briefly. */
[data-copy][data-state="copied"] { box-shadow: inset 0 0 0 2px var(--teal); }

/* Staging banner. */
.env-banner { margin: 0; padding: 8px 16px; background: var(--gold); color: var(--night); font: 600 .875rem/1.4 var(--f-mono); text-align: center; }

/* System pages (confirm, unsubscribe, cancel) and admin messages. */
.sys { min-height: 100vh; display: grid; align-content: center; }
.sys__logo { display: inline-flex; color: var(--ink); }

/* Rich text written in the admin (event and story bodies). */
.rich { display: grid; gap: 16px; }
.rich .list { display: grid; gap: 8px; padding-inline-start: 1.25em; }
.rich .list li { list-style: disc; }

/* Menu button icon follows the sheet state. */
[aria-expanded="true"] > [data-when="shut"], [aria-expanded="false"] > [data-when="open"] { display: none; }

/* Programme marks keep full-strength secondary words on teal and Nile green (WCAG AA). */
:is(.prog--wa3i, .prog--mizan, .sec--teal, .sec--nile, .on-teal, .on-nile, .card--teal, .card--nile) :is(.pm__alt, .pm__alt-lat, .pm__by, .pm__by-ar) { opacity: 1 !important; }

/* Filter chips show their check mark only while pressed. */
[data-filter-key][aria-pressed="false"] > [data-chk] { display: none; }

/* Very narrow screens (WCAG 1.4.10 reflow at 320 px): the language button shows only its globe,
   and the header gaps tighten, so nothing scrolls sideways. The button keeps its aria-label. */
@container page (max-width: 380px) {
  .hdr__in { gap: 6px; }
  .hdr__tools { gap: 2px; }
  .hdr__tools [id^="m3-lang-btn"] { padding-inline: 10px; }
  .hdr__tools [id^="m3-lang-btn"] :is(.lang-name, .lang-code) { display: none; }
}