/* Shared rules for every page, extracted from docs/DESIGN.md (decided in #4). Load after tokens.css. */

/* base.css: base rules */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, main, footer: the footer stays at the bottom of short pages */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
svg { display: block; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.page-title { font-family: var(--font-rounded); font-size: var(--text-h1); line-height: var(--leading-tight); margin-bottom: var(--space-4); }

/* base.css: page shell */
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 10;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-link); font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-2); }
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner, .page__main, .site-footer__inner {
  max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--layout-gutter);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.5rem; }
.site-header__name {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  font-family: var(--font-rounded); font-size: var(--text-lg); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); color: var(--color-brand); text-decoration: none;
}
.site-header__mark { width: 1.75rem; height: 1.75rem; }
.site-header__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min);
  color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none;
}
.site-header__link:hover { text-decoration: underline; }
.page__main { width: 100%; padding-block: var(--space-4) var(--space-12); }
.site-footer { background: var(--color-surface-sunken); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer__inner { display: grid; gap: var(--space-3); padding-block: var(--space-6) var(--space-8); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); min-width: var(--tap-min); }

/* base.css: buttons and links */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--space-2) var(--space-5);
  border: 2px solid transparent; border-radius: var(--radius-md);
  font: inherit; font-weight: var(--weight-semibold); line-height: var(--leading-snug);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.button--primary { background: var(--color-primary); color: var(--color-on-primary); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.button--secondary:hover { background: var(--color-surface-sunken); }
.button--danger { background: var(--color-danger); color: var(--color-on-danger); }
.button--danger:hover { background: var(--color-danger-hover); }
.button--compact { padding-inline: var(--space-3); font-size: var(--text-sm); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); color: var(--color-link); text-decoration: underline; }

/* base.css: form controls */
.input, .select, .textarea {
  width: 100%; min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal);
}
.textarea { min-height: 8rem; resize: vertical; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--color-danger-text); }
.field { display: grid; gap: var(--space-2); }
.field__label, .choices__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.field__hint { color: var(--color-text-muted); font-size: var(--text-meta); }
.field__error { color: var(--color-danger-text); font-size: var(--text-meta); font-weight: var(--weight-semibold); }
.choices { display: grid; gap: var(--space-1); }
.choices__legend { margin-bottom: var(--space-1); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--color-primary); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* base.css: category scope */
.cat--outdoors { --cat-fg: var(--cat-outdoors-fg); --cat-bg: var(--cat-outdoors-bg); }
.cat--arts { --cat-fg: var(--cat-arts-fg); --cat-bg: var(--cat-arts-bg); }
.cat--storytime { --cat-fg: var(--cat-storytime-fg); --cat-bg: var(--cat-storytime-bg); }
.cat--stem { --cat-fg: var(--cat-stem-fg); --cat-bg: var(--cat-stem-bg); }
.cat--sports { --cat-fg: var(--cat-sports-fg); --cat-bg: var(--cat-sports-bg); }
.cat--festival { --cat-fg: var(--cat-festival-fg); --cat-bg: var(--cat-festival-bg); }
.cat--performance { --cat-fg: var(--cat-performance-fg); --cat-bg: var(--cat-performance-bg); }
.cat--other { --cat-fg: var(--cat-other-fg); --cat-bg: var(--cat-other-bg); }

/* base.css: chips */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.75rem;
  padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); white-space: nowrap;
}
.chip--age { background: var(--color-chip-bg); color: var(--color-chip-text); }
.chip--free { background: var(--color-free-bg); color: var(--color-free-text); }
.chip--category { background: var(--cat-bg); color: var(--cat-fg); padding-inline-start: var(--space-2); }

/* base.css: notice */
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: var(--weight-semibold); }
.notice--success { background: var(--color-success-bg); color: var(--color-success-text); }
.notice--error { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* base.css: message page */
.message { display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-12); text-align: center; }
.message__icon { display: grid; place-items: center; width: var(--icon-circle); height: var(--icon-circle); border-radius: var(--radius-pill); background: var(--cat-bg); color: var(--cat-fg); }
.message__icon .icon { width: var(--icon-xl); height: var(--icon-xl); }
.message__title { font-family: var(--font-rounded); font-size: var(--text-h1); line-height: var(--leading-tight); max-width: var(--layout-prose); }
.message__text { color: var(--color-text-muted); max-width: var(--layout-prose); }