/* Games Galore and More — site styles
   Palette and rules follow Hero banner instructions.txt */

:root {
  --color-bg: #FFF3E3;        /* main page background: warm cream */
  --color-bg-alt: #FDE1CC;    /* alternate section background: light peach */
  --color-text: #3B1B0D;      /* headings and body text: dark chocolate brown */
  --color-accent: #E9753D;    /* warm peach-orange accent */
  --color-border: #8A4B2A;    /* borders / subdued accents */
  --color-btn-text: #FFF3E3;  /* text on dark/orange buttons */
  --color-white: #FFFFFF;
  --focus-ring: #3B1B0D;
  --max-width: 68rem;
  --radius: 0.6rem;
  --font-body: "Segoe UI", Verdana, Arial, sans-serif;
  --font-heading: "Baloo 2", "Segoe UI", Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  color: var(--color-text);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 700;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }

p, ul, ol { max-width: 65ch; }

main ul, main ol { padding-left: 1.4rem; }

a {
  color: var(--color-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover { color: var(--color-border); }

img { max-width: 100%; height: auto; display: block; }

/* Strong, visible focus indicator everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 1000;
  transition: top 0.15s ease-in-out;
  font-weight: 700;
}

.skip-link:focus {
  top: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-border);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo-link {
  display: inline-block;
  flex-shrink: 0;
}

.logo-img {
  height: 3.25rem;
  width: auto;
}

/* Mobile nav toggle button */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 1.35rem;
  height: 3px;
  background: var(--color-text);
  border-radius: 2px;
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

/* Primary nav */
.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  max-width: none;
}

.primary-nav a {
  display: inline-block;
  padding: 0.4rem 0.1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.primary-nav a:hover {
  border-bottom-color: var(--color-border);
}

.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
  font-weight: 700;
}

.primary-nav .btn-donate {
  background: var(--color-text);
  color: var(--color-btn-text);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.5rem 1.1rem;
}

.primary-nav .btn-donate:hover,
.primary-nav .btn-donate:focus-visible {
  background: var(--color-border);
  color: var(--color-white);
}

.primary-nav a[aria-current="page"].btn-donate {
  border-bottom: none;
  color: var(--color-btn-text);
}

.primary-nav a[aria-current="page"].btn-donate:hover,
.primary-nav a[aria-current="page"].btn-donate:focus-visible {
  color: var(--color-white);
}

/* Buttons used in page content */
.btn {
  display: inline-block;
  background: var(--color-text);
  color: var(--color-btn-text);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-border);
  color: var(--color-white);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

/* Hero */
.hero {
  background-color: var(--color-bg-alt);
  background-image: url("../images/ggm-hero-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: min(56vh, 24rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 9vw, 5rem) 1.25rem;
}

/* On wider screens, show the whole banner (like the reference art) so the
   title sits in the clear centre gap and never covers the cup, dice,
   headset or phone. The peach backdrop fills any side gutters. */
@media (min-width: 60rem) {
  .hero {
    background-size: contain;
    aspect-ratio: 2128 / 912;
    min-height: 0;
    max-height: 34rem;
    padding: 1rem;
  }
}

/* A soft cream wash sits behind only the words so the title stays
   readable no matter how the photo crops on small screens. It fades
   to nothing at the edges, so it does not read as a hard box. */
.hero-content {
  max-width: 30rem;
  padding: 1.25rem 1.75rem;
  border-radius: 1.5rem;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 243, 227, 0.94) 0%,
    rgba(255, 243, 227, 0.82) 55%,
    rgba(255, 243, 227, 0) 100%
  );
}

.hero h1 {
  margin: 0 0 0.35rem;
  color: var(--color-text);
}

.hero-tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 3.5vw, 1.4rem);
  font-weight: 600;
  color: var(--color-text);
}

/* Primary calls to action, in their own band below the hero art */
.hero-actions {
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-border);
  padding: 1.5rem 0;
}

.hero-actions .button-row {
  margin: 0;
  justify-content: center;
}

/* Sections */
.section {
  padding: 3rem 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

/* Cards / feature grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.section-alt .card {
  background: var(--color-white);
}

/* Accordion (native details/summary) for game categories */
.game-category {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}

.game-category summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.game-category summary::-webkit-details-marker { display: none; }

.game-category summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.game-category[open] summary::after {
  content: "\2212";
}

.game-category summary:hover {
  background: var(--color-bg-alt);
}

.category-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 2px solid var(--color-bg-alt);
}

.category-body p {
  margin-top: 1rem;
}

/* Memorials on the In Memory Of page (built on the accordion above) */
.memorial summary::after {
  content: "+";
  content: "+" / "";
}

.memorial[open] summary::after {
  content: "\2212";
  content: "\2212" / "";
}

.memorial .category-body h3 {
  margin: 1.5rem 0 0.5rem;
}

.memorial audio {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin: 0.75rem 0 0;
}

.game-list {
  columns: 2;
  column-gap: 2rem;
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
}

@media (max-width: 40rem) {
  .game-list { columns: 1; }
}

.game-list li {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}

/* Contact list */
.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.contact-list .card h3 { margin-top: 0; }

/* Footer */
.site-footer {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 2.5rem 0 1.5rem;
  margin-top: 2rem;
}

.site-footer a {
  color: var(--color-bg);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent);
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  padding: 0;
  margin: 0 0 1.5rem;
  max-width: none;
}

.footer-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.footer-note {
  font-size: 0.95rem;
  border-top: 1px solid rgba(255, 243, 227, 0.35);
  padding-top: 1.25rem;
  margin: 0;
}

.site-footer :focus-visible {
  outline-color: var(--color-bg);
}

/* Contextual call-to-action link at the end of a homepage section */
.section-cta {
  margin-top: 1.75rem;
  font-family: var(--font-heading);
}

.section-cta a {
  font-weight: 700;
  font-size: 1.1rem;
}

/* "Today on GGM" schedule */
.schedule {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.section-alt .schedule {
  background: var(--color-white);
}

.schedule-day {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.schedule-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-border);
}

.schedule-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.schedule-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 8rem;
}

.schedule-empty,
.schedule-fallback {
  margin: 0;
}

/* Each event on the Daily Announcement page/email is its own heading (time + title, linked when it
   matches a Games & Events title) followed by its Schedule Manager description. */
.schedule-event-heading {
  margin-bottom: 0.35rem;
}

.schedule-description {
  margin: 0 0 1.25rem;
}

/* Daily Announcement preview on the Approve Draft Announcement admin page */
.announcement-preview {
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.25rem 1.5rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

/* Resource blocks on the More page */
.resource {
  border-top: 2px solid var(--color-bg-alt);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* Notice / callout box */
.notice {
  background: var(--color-bg-alt);
  border-left: 5px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

/* Contact form */
.contact-form {
  max-width: 40rem;
  margin: 1.5rem 0;
}

.contact-form .form-note {
  margin: 0 0 1.25rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.field-hint {
  margin: 0 0 0.35rem;
}

.required-mark {
  font-weight: 400;
}

.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}

.form-field textarea {
  resize: vertical;
  min-height: 10rem;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border: 4px solid #8B1A1A;
}

.field-error {
  margin: 0 0 0.35rem;
  color: #8B1A1A;
  font-weight: 600;
}

.notice-error {
  border-left-color: #8B1A1A;
}

.notice-error h3 {
  margin-top: 0;
}

.notice-error ul {
  margin-bottom: 0;
}

.notice-success {
  border-left-color: var(--color-border);
  font-weight: 600;
}

.notice-success p {
  margin: 0;
}

.notice:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Administration area */
button.btn {
  font-family: inherit;
  cursor: pointer;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}

fieldset.radio-group {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  min-width: 0;
}

.radio-group legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.35rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0;
}

.form-field .radio-option input[type="radio"] {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-text);
}

.form-field .radio-option label {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.radio-option input[type="radio"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-links {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

main .admin-links {
  padding-left: 0;
}

.admin-links li {
  margin: 0 0 0.75rem;
}

.admin-links a {
  font-weight: 700;
  font-size: 1.2rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 2rem;
}

.table-wrap:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.admin-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  background: var(--color-white);
}

.admin-table th,
.admin-table td {
  border: 2px solid var(--color-border);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.admin-table thead th {
  background: var(--color-bg-alt);
}

.inline-form {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
}

.btn-small {
  padding: 0.35rem 0.8rem;
  font-size: 1rem;
}

.filter-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0;
  margin: 1rem 0;
  max-width: none;
}

main .filter-list {
  padding-left: 0;
}

.filter-list a[aria-current="true"] {
  font-weight: 700;
  text-decoration-thickness: 4px;
}

.schedule-table {
  min-width: 90rem;
  font-size: 0.95rem;
}

.status-note {
  display: block;
  margin-top: 0.35rem;
  max-width: 14rem;
}

.schedule-table input[type="checkbox"],
.checkbox-option input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--color-text);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.form-field .checkbox-option input[type="checkbox"] {
  display: inline-block;
  width: 1.4rem;
  padding: 0;
  flex-shrink: 0;
}

.form-field .checkbox-option label {
  display: inline;
  margin: 0;
}

.schedule-summary {
  background: var(--color-bg-alt);
  border-left: 5px solid var(--color-accent);
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

.conflict-list li {
  margin-bottom: 0.75rem;
}

.logout-form {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-bg-alt);
}

.activity-list {
  max-width: none;
}

.month-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0;
  font-weight: 700;
}

.form-field select {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}

.form-field select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.form-field select[aria-invalid="true"] {
  border: 4px solid #8B1A1A;
}

.show-dates-action[hidden] {
  display: none;
}

.date-group .checkbox-option {
  margin: 0.45rem 0;
}

.date-group .checkbox-option input[type="checkbox"]:disabled + label {
  font-style: italic;
}

.dates-status {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.exception-facts dt {
  font-weight: 700;
}

.exception-facts dd {
  margin: 0 0 0.75rem;
}

.exceptions-table {
  min-width: 60rem;
}

.ponderings-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.ponderings-list li {
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--color-bg-alt);
}

.ponderings-list a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.ponderings-list .pondering-date {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ponderings-list .pondering-preview {
  font-weight: 400;
}

/* Visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile navigation */
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    display: none;
    width: 100%;
    order: 3;
  }

  .primary-nav.is-open {
    display: block;
  }

  .header-inner {
    flex-wrap: wrap;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }

  .primary-nav li {
    width: 100%;
  }

  .primary-nav a {
    width: 100%;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--color-bg-alt);
  }

  .primary-nav .btn-donate {
    margin-top: 0.5rem;
    text-align: center;
  }
}

/* File upload page (more/upload.php) */
.upload-form input[type="file"] {
  padding: 0.5rem;
  cursor: pointer;
}

.upload-form input[type="file"]:disabled {
  cursor: not-allowed;
}

.upload-form button[hidden] {
  display: none;
}

.upload-progress {
  margin-top: 1.5rem;
}

.upload-progress label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.upload-progress progress {
  display: block;
  width: 100%;
  height: 1.75rem;
  accent-color: var(--color-accent);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}

.upload-detail {
  margin: 0.5rem 0 0;
  font-weight: 600;
}