/* Snack Quests restyle: Bebas Neue + Atkinson Hyperlegible, plum / purple / aqua / yellow.
   Loaded after styles.css. Only fonts, colors, and small spacing tweaks for Bebas Neue live here.

   Palette
     plum    #411D4B  page background, header, footer, text on aqua and yellow
     purple  #77398E  section bands, card borders, hover states
     aqua    #93CCD3  game and track card panels, accents on plum
     yellow  #E3DB49  Play buttons, highlights, key links, headings on dark
     mist    #DFF0F2  aqua tint for body text on plum and purple (contrast fix, see notes)

   Contrast (WCAG 2.x)
     plum on aqua 7.87, plum on yellow 9.65, mist on plum 11.91, mist on purple 6.48,
     yellow on plum 9.65, yellow on purple 5.25, aqua on plum 7.87.
     Avoided: aqua on purple (4.28) and purple on aqua (4.28) for body text,
     purple on plum (1.84) for anything but decoration. */

:root {
  --sq-plum: #411d4b;
  --sq-purple: #77398e;
  --sq-aqua: #93ccd3;
  --sq-yellow: #e3db49;
  --sq-mist: #dff0f2;

  /* Remap the original tokens so anything still using them lands on the new palette. */
  --cream: var(--sq-plum);
  --paper: var(--sq-plum);
  --peach: var(--sq-aqua);
  --cookie: var(--sq-yellow);
  --cookie-dark: var(--sq-plum);
  --jam: var(--sq-yellow);
  --gold: var(--sq-yellow);
  --bread: var(--sq-yellow);
  --mint: var(--sq-aqua);
  --sky: var(--sq-aqua);
  --ink: var(--sq-plum);
  --ink-soft: var(--sq-plum);
  --white: var(--sq-aqua);
  --shadow: 0 10px 28px rgba(20, 6, 26, 0.45);
  --radius: 6px;
  --sq-radius: 6px;
  --sq-radius-sm: 4px;

  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible", Verdana, "Segoe UI", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--sq-mist);
  background: var(--sq-plum);
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
}

a {
  color: var(--sq-yellow);
}

a:hover,
a:focus-visible {
  color: var(--sq-aqua);
}

:focus-visible {
  outline-color: var(--sq-yellow);
}

strong,
b {
  font-weight: 700;
}

.skip-link {
  background: var(--sq-yellow);
  color: var(--sq-plum);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

/* ---------- Display type: Bebas Neue has one weight and is all caps ---------- */
.logo,
.site-nav a,
.eyebrow,
.hero h1,
.tracks h2,
.snack-pack h2,
.tip-jar h2,
.why h2,
.workshop h2,
.hero-welcome,
.btn,
.chip,
.badge,
.track-kicker,
.game-track,
.track-card h3,
.game-meta h3,
.footer-brand,
.footer-links a,
.workshop-grid a {
  font-family: var(--font-display);
  font-weight: 400;
}

.hero h1,
.tracks h2,
.snack-pack h2,
.tip-jar h2,
.why h2,
.workshop h2 {
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sq-yellow);
  margin-bottom: 0.6rem;
}

.hero h1 {
  font-size: clamp(2.9rem, 10vw, 5rem);
  max-width: 14ch;
  color: var(--sq-aqua);
}

.tracks h2,
.snack-pack h2,
.tip-jar h2,
.why h2,
.workshop h2 {
  font-size: clamp(2.3rem, 6vw, 3.2rem);
}

.track-card h3,
.game-meta h3 {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.03em;
  margin-bottom: 0.55rem;
}

.game-card.hero-card .game-meta h3 {
  font-size: clamp(2.3rem, 4vw, 3rem);
}

/* ---------- Header and nav ---------- */
.site-header {
  background: rgba(65, 29, 75, 0.96);
  border-bottom: 4px solid var(--sq-purple);
}

.logo {
  color: var(--sq-yellow);
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.logo:hover,
.logo:focus-visible {
  color: var(--sq-aqua);
}

.logo-mark {
  background: var(--sq-aqua);
  box-shadow: inset 0 -3px 0 rgba(65, 29, 75, 0.25);
}

/* Recolor the inline cookie logo without touching the markup. */
.logo-mark ellipse:nth-of-type(1) { fill: var(--sq-purple); }
.logo-mark ellipse:nth-of-type(2) { fill: var(--sq-yellow); }
.logo-mark circle { fill: var(--sq-plum); }
.logo-mark path { stroke: var(--sq-plum); }

.nav-toggle {
  background: var(--sq-yellow);
  color: var(--sq-plum);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--sq-aqua);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  background: var(--sq-plum);
}

.site-nav {
  background: var(--sq-plum);
  border-bottom-color: var(--sq-purple);
}

.site-nav a {
  color: var(--sq-aqua);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  padding: 0.6rem 0.95rem 0.5rem;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-yellow);
}

@media (min-width: 720px) {
  .site-nav {
    background: transparent;
  }
}

/* ---------- Hero ---------- */
.eyebrow {
  background: var(--sq-purple);
  color: var(--sq-yellow);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  padding: 0.35rem 0.9rem 0.25rem;
}

.hero-lead,
.hero-body {
  color: var(--sq-mist);
}

.hero-welcome {
  color: var(--sq-yellow);
  font-size: clamp(2rem, 5.5vw, 2.75rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
  margin-bottom: 0.4rem;
}

/* ---------- Buttons ---------- */
.btn {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.8rem 1.4rem 0.7rem;
}

.btn-primary,
.btn-small {
  background: var(--sq-yellow);
  color: var(--sq-plum);
  border-color: var(--sq-plum);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-small:hover,
.btn-small:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-yellow);
  border-color: var(--sq-yellow);
}

.btn-ghost {
  background: transparent;
  color: var(--sq-aqua);
  border-color: var(--sq-aqua);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-yellow);
  border-color: var(--sq-yellow);
}

.btn-small {
  font-size: 1.3rem;
}

/* ---------- Section bands ---------- */
.tracks,
.why {
  background: var(--sq-purple);
}

.section-lede {
  color: var(--sq-mist);
}

/* Short lines under the Two tracks heading. Body face, smaller than that display line. */
.tracks-fine {
  font-family: var(--font-body);
  font-size: calc(1rem + 2pt);
  line-height: 1.35;
  color: var(--sq-aqua);
  margin: 0 0 0.2rem;
}

.tracks-fine + .tracks-fine {
  margin-bottom: 0.9rem;
}

/* ---------- Track cards: aqua panels, plum text ---------- */
.track-card,
.track-card.cookie-jar,
.track-card.daily-bread {
  background: var(--sq-aqua);
  color: var(--sq-plum);
  border-color: var(--sq-plum);
}

.track-card.cookie-jar {
  border-color: var(--sq-yellow);
}

.track-card h3 {
  color: var(--sq-plum);
}

.track-kicker,
.game-track {
  color: var(--sq-plum);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.game-kind {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem 0.02rem;
  background: var(--sq-yellow);
  color: var(--sq-plum);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1;
  vertical-align: 0.06em;
}

/* The tip jar kicker sits on purple, so it needs a light color. */
.tip-card .track-kicker {
  color: var(--sq-aqua);
}

.cookie-mark,
.loaf-mark,
.tip-art {
  background: var(--sq-plum);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.loaf-badge {
  background: var(--sq-yellow);
  box-shadow: 0 3px 10px rgba(20, 6, 26, 0.35);
}

/* ---------- Filters (if present) ---------- */
.chip {
  background: var(--sq-plum);
  border-color: var(--sq-aqua);
  color: var(--sq-aqua);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  line-height: 1;
}

.chip.is-active,
.chip:hover,
.chip:focus-visible {
  background: var(--sq-yellow);
  border-color: var(--sq-yellow);
  color: var(--sq-plum);
}

/* ---------- Game cards: aqua panels, purple borders, plum text ---------- */
.game-card article {
  background: var(--sq-aqua);
  color: var(--sq-plum);
  border: 3px solid var(--sq-purple);
}

.game-card article:hover,
.game-card article:focus-within {
  border-color: var(--sq-yellow);
}

.game-card.hero-card article {
  border-color: var(--sq-yellow);
}

.game-art {
  border-bottom: 3px solid var(--sq-purple);
}

.game-art.is-link {
  cursor: pointer;
}

.game-meta h3 {
  color: var(--sq-plum);
}

.game-art--crumb-trail img {
  background: var(--sq-aqua);
}

.badge {
  background: var(--sq-yellow);
  color: var(--sq-plum);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

/* Focus rings on aqua panels: yellow would vanish, so use plum. */
.track-card :focus-visible,
.game-card :focus-visible,
.promise-list :focus-visible,
.workshop-grid a:focus-visible {
  outline-color: var(--sq-plum);
}

.track-card a:not(.btn),
.game-card a:not(.btn),
.promise-list a {
  color: var(--sq-plum);
}

/* ---------- Tip jar ---------- */
.tip-card {
  background: var(--sq-purple);
  border-color: var(--sq-yellow);
  color: var(--sq-mist);
}

.tip-card h2 {
  color: var(--sq-yellow);
}

/* Recolor the inline jar illustration. */
.tip-art ellipse:nth-of-type(1) { fill: var(--sq-purple); }
.tip-art path { fill: var(--sq-yellow); stroke: var(--sq-plum); }
.tip-art ellipse:nth-of-type(2) { fill: var(--sq-aqua); stroke: var(--sq-plum); }
.tip-art circle:nth-of-type(1) { fill: var(--sq-aqua); }
.tip-art circle:nth-of-type(2) { fill: var(--sq-yellow); }

/* ---------- Why no ads ---------- */
.why-inner {
  background: var(--sq-plum);
  border-color: var(--sq-aqua);
  color: var(--sq-mist);
}

.promise-list li {
  background: var(--sq-aqua);
  color: var(--sq-plum);
}

.promise-list strong {
  color: var(--sq-plum);
}

/* ---------- Workshop links (if present) ---------- */
.workshop-grid a {
  background: var(--sq-aqua);
  color: var(--sq-plum);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  border: 3px solid var(--sq-purple);
}

.workshop-grid a:hover,
.workshop-grid a:focus-visible {
  background: var(--sq-yellow);
  color: var(--sq-plum);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 0;
  background: var(--sq-plum);
  color: var(--sq-mist);
  border-top: 4px solid var(--sq-yellow);
}

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

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

.footer-brand {
  color: var(--sq-yellow);
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.footer-links a {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

/* ---------- Squared corners to match Bebas Neue (6px panels, 4px small bits) ---------- */
.track-card,
.game-card article,
.tip-card,
.why-inner,
.promise-list li,
.workshop-grid a,
.btn,
.chip,
.nav-toggle,
.logo-mark,
.tip-art,
.cookie-mark,
.loaf-mark {
  border-radius: var(--sq-radius);
}

.skip-link,
.eyebrow,
.badge,
.site-nav a,
.loaf-badge {
  border-radius: var(--sq-radius-sm);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  border-radius: 1px;
}

/* ---------- Larger body copy on desktop ---------- */
@media (min-width: 720px) and (max-width: 959px) {
  .hero-body,
  .section-lede {
    font-size: 1.2rem;
  }
}

@media (min-width: 960px) {
  body {
    font-size: 1.2rem;
  }

  .hero-lead {
    font-size: 1.55rem;
    line-height: 1.5;
    max-width: 46rem;
  }

  .hero-body {
    font-size: 1.3rem;
    max-width: 46rem;
  }

  .section-lede,
  .why-inner > p,
  .tip-copy p:not(.track-kicker) {
    font-size: 1.3rem;
    max-width: 46rem;
  }

  .track-card p {
    font-size: 1.2rem;
  }
}

/* ---------- Play now grid: 1 up on phones, 2 up on tablets, 3 up on wide screens ---------- */
.game-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cute Cookie's Sheet Smash sits directly under Music (the 3rd game): in the
   same column one row down, with the games after it filling in around it */
@media (min-width: 640px) {
  #snack-pack .game-grid { grid-auto-flow: row dense; }
  #snack-pack .game-card.under-music { grid-column: 1; }
}
@media (min-width: 1024px) {
  #snack-pack .game-card.under-music { grid-column: 3; }
}

.game-card {
  display: flex;
}

.game-card.is-hidden {
  display: none;
}

.game-card article {
  flex: 1;
  width: 100%;
}

.game-art img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Crumb Trail art is square, with the title at the top and Little Brad at the bottom.
   A 16:10 crop cuts one of them off. Give this card a square frame so the whole picture fills it. */
.game-art--crumb-trail img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.game-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-meta > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.35rem;
}

/* ---------- Jump to games buttons (hero and Two tracks) ---------- */
/* Smooth scrolling is already set on html in styles.css and turned off for prefers-reduced-motion.
   Repeated here so the behavior lives with the jump buttons. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Land the Play now section just below the sticky header (about 4.5rem tall with its border). */
#snack-pack,
#tools {
  scroll-margin-top: 4.75rem;
}

.jump-games {
  margin: 0.35rem 0 1.25rem;
}

.btn-jump {
  gap: 0.45rem;
  background: var(--sq-yellow);
  color: var(--sq-plum);
  border-color: var(--sq-plum);
  padding-right: 1.1rem;
}

.btn-jump-arrow {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  margin-top: -0.1rem;
}

.btn-jump:hover,
.btn-jump:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-yellow);
  border-color: var(--sq-yellow);
}

.btn-jump:focus-visible {
  outline: 3px solid var(--sq-yellow);
  outline-offset: 3px;
}

/* On the purple Two tracks band, fill the gap inside the yellow focus ring with plum so focus stays obvious. */
.tracks .btn-jump:focus-visible {
  box-shadow: 0 0 0 3px var(--sq-plum);
}

/* ---------- Hero tip jar button with its note ---------- */
.hero-actions {
  align-items: center;
  gap: 0.6rem 0.9rem;
}

.btn-tip {
  background: transparent;
  color: var(--sq-aqua);
  border-color: var(--sq-aqua);
}

.btn-tip:hover,
.btn-tip:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-yellow);
  border-color: var(--sq-yellow);
}

.tip-note {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--sq-mist);
}

@media (min-width: 960px) {
  .tip-note {
    font-size: 1.2rem;
  }
}

/* ---------- Game search (hero) ---------- */
.game-search {
  max-width: 34rem;
  margin: 0.4rem 0 1.25rem;
}

.game-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.game-search-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--sq-purple);
  pointer-events: none;
}

.game-search-input {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.7rem 3rem 0.6rem 2.9rem;
  font: inherit;
  font-size: 1.15rem;
  color: var(--sq-plum);
  background: var(--sq-mist);
  border: 3px solid var(--sq-aqua);
  border-radius: var(--sq-radius);
  -webkit-appearance: none;
  appearance: none;
}

.game-search-input::placeholder {
  color: var(--sq-purple);
  opacity: 0.8;
}

.game-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.game-search-input:focus {
  outline: 3px solid var(--sq-yellow);
  outline-offset: 2px;
}

.game-search-clear {
  position: absolute;
  right: 0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--sq-radius-sm);
  background: transparent;
  color: var(--sq-plum);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.game-search-clear:focus-visible {
  outline: 3px solid var(--sq-purple);
}

.game-search-status {
  margin: 0.5rem 0 0;
  color: var(--sq-mist);
  font-size: 0.95rem;
}

.game-search-status:empty {
  display: none;
}

.game-search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.35rem;
  background: var(--sq-aqua);
  border: 3px solid var(--sq-plum);
  border-radius: var(--sq-radius);
  box-shadow: var(--shadow);
}

.game-search-results[hidden] {
  display: none;
}

.game-search-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--sq-radius-sm);
  color: var(--sq-plum);
  text-decoration: none;
}

.game-search-result:hover,
.game-search-result:focus-visible {
  background: var(--sq-mist);
  outline: none;
}

.game-search-result img {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 2.8rem;
  object-fit: cover;
  border-radius: var(--sq-radius-sm);
  border: 2px solid var(--sq-plum);
}

.game-search-result span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.game-search-result strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.game-search-result small {
  font-size: 0.85rem;
  color: var(--sq-purple);
}

.game-filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--sq-yellow);
  margin: 0 0 1rem;
}

.game-filter-note[hidden] {
  display: none;
}

.game-filter-clear {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0.8rem;
  color: var(--sq-plum);
  background: var(--sq-aqua);
  border: 2px solid var(--sq-plum);
  border-radius: var(--sq-radius-sm);
  cursor: pointer;
}

/* ---------- Leaves on/off button (home page) ---------- */
.leaves-toggle {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  line-height: 1;
  background: var(--sq-plum);
  color: var(--sq-aqua);
  border-color: var(--sq-purple);
}

/* Kept quiet on purpose so the site name stays the thing that stands out. */
.leaves-toggle:hover,
.leaves-toggle:focus-visible {
  background: var(--sq-purple);
  color: var(--sq-mist);
}

@media (max-width: 419px) {
  .leaves-toggle-header {
    font-size: 0.8rem;
  }
}