/* ========== Green Bud Adventures Global Stylesheet ========== */

:root {
  --bg: #101a13;
  --ink: #ccebd1;
  --brand: #1d5a23;
  --accent: #9fef77;
  --btn: #2a8b32;
  --btn-text: #fff;
  --focus: #ffd24a;
  --active-article: #ff9933;

  /* Shared narrow column width for Tools & Arcade */
  --stack-max: 340px; /* change here (e.g., 320px/300px) to make both button columns narrower/wider */
}

:root.dark {
  --bg: #0e1611;
  --ink: #f0fff6;
  --brand: #bff2a6;
  --accent: #b5f787;
  --btn: #90e59a;
  --btn-text: #0b110d;
  --focus: #ffe08a;
  --active-article: #ffaa4d;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  background: var(--btn); color: var(--btn-text);
  padding: 8px 14px; font-size: 14px;
  border-radius: 6px; z-index: 1000;
}
.skip-link:focus, .skip-link:hover {
  position: static; width: auto; height: auto;
  display: inline-block; margin: 10px auto;
  text-align: center; box-shadow: 0 0 10px var(--focus);
  background: var(--accent); color: var(--bg);
}

/* ---------------- Header ---------------- */
header { background: var(--brand); color: var(--btn-text); }
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; padding: 12px 16px; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo img, .logo-right { height: 44px; }
.logo h1 { font-size: 22px; margin: 0; color: var(--btn-text); }
nav { flex: 1; display: flex; justify-content: center; }
nav ul {
  list-style: none; display: flex; gap: 16px;
  margin: 0; padding: 0; align-items: center;
}
nav a { color: var(--btn-text); text-decoration: none; font-weight: bold; }
nav a:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
nav .active a {
  background: var(--btn-text); color: var(--brand);
  padding: 4px 8px; border-radius: 6px;
}
.header-controls { display: flex; align-items: center; gap: 10px; }
.dark-toggle {
  background: none; border: 2px solid var(--btn-text);
  color: var(--btn-text); padding: 6px 10px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}

/* ---------------- Main Layout ---------------- */
main {
  flex: 1; padding: 20px; max-width: 900px;
  margin: 0 auto; width: 100%; box-sizing: border-box;
}
.page-title, .chronicle-header h2 {
  text-align: center; font-size: 32px; color: var(--accent);
  margin: 0 0 20px 0;
}
.content-text { line-height: 1.8; font-size: 18px; margin-bottom: 20px; }
.content-text p { margin-bottom: 20px; }
.content-text h2 { font-size: 24px; color: var(--accent); margin: 30px 0 15px; }
.content-text h3 { font-size: 20px; color: var(--accent); margin: 25px 0 12px; }

/* ---------------- Links ---------------- */
.content-text a { color: var(--accent); text-decoration: none; }
.content-text a:visited { color: var(--active-article); }
.content-text a:hover, .content-text a:focus {
  text-decoration: underline; outline: 2px solid var(--focus);
}
.content-text a.clicked { color: var(--active-article) !important; }

/* ---------------- Video Embed ---------------- */
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  margin-bottom: 30px; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: none; border-radius: 12px;
}
.image-caption {
  text-align: center; font-style: italic;
  color: var(--accent); margin-bottom: 30px; font-size: 16px;
}

/* ---------------- Buttons & Back Links ---------------- */
.button-stack {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px; margin: 50px 0 20px;
}
.back-link { text-align: center; margin: 40px 0 30px; }
.back-link a, .button-link {
  color: var(--accent); text-decoration: none; font-size: 18px;
  padding: 10px 20px; border: 2px solid var(--accent); border-radius: 8px;
  display: inline-block; transition: all 0.2s ease;
}
.back-link a:hover, .back-link a:focus,
.button-link:hover, .button-link:focus {
  background: var(--accent); color: var(--bg);
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* Play/Launch Button */
.play-launch-button img {
  width: 100px; height: 100px; cursor: pointer; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--focus);
  transition: transform .25s ease, filter .25s ease, box-shadow .3s ease;
}
.play-launch-button img:hover, .play-launch-button img:focus {
  transform: scale(1.1); filter: brightness(1.1);
  box-shadow: 0 0 0 2px var(--active-article), 0 0 14px var(--focus);
}

/* ---------------- Chronicle Layout ---------------- */
.chronicle-body { display: flex; gap: 20px; align-items: flex-start; }
.month-buttons {
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: 160px; min-width: 120px;
}
.month-buttons a { display: block; text-decoration: none; width: 100%; }
.month-buttons button {
  width: 100%; background: var(--btn); color: var(--btn-text);
  padding: 10px; border: none; border-radius: 6px; cursor: pointer;
  font-weight: bold; text-align: center;
  transition: box-shadow .3s ease, background .3s ease;
}
.month-buttons button:hover, .month-buttons button:focus {
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--focus);
}
.month-buttons button.active, .month-buttons button[aria-pressed="true"] {
  background: var(--accent); color: #102012;
  box-shadow: 0 0 0 2px var(--active-article), 0 0 10px var(--focus);
}

/* ---------------- Preview Panel ---------------- */
.preview-pane {
  flex: 1; background: var(--bg); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  padding: 20px; display: flex; flex-direction: column; gap: 15px;
}
.preview-pane iframe { width: 100%; height: auto; border-radius: 8px; border: none; }
.preview-pane img { max-width: 100%; border-radius: 8px; }
.preview-pane h3 { margin: 0 0 10px; color: var(--accent); }
.preview-pane p { line-height: 1.5em; color: var(--ink); }
.preview-pane .small-play-button {
  width: 60px; height: 60px; border-radius: 50%; display: inline-block;
  background-image: url("/images/play-button.svg");
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 2px var(--accent), 0 0 8px var(--focus);
  margin: 10px 0; transition: transform .2s ease;
}
.preview-pane .small-play-button:hover, .preview-pane .small-play-button:focus {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--active-article), 0 0 12px var(--focus);
}

/* ---------------- Footer ---------------- */
footer {
  text-align: center; font-size: 14px; padding: 10px;
  border-top: 1px solid var(--btn); color: var(--ink);
}

/* ---------------- Responsive Core ---------------- */
@media (max-width: 800px) {
  .header-inner { flex-direction: column; gap: 12px; }
  nav ul { flex-wrap: wrap; justify-content: center; }
  .page-title, .chronicle-header h2 { font-size: 26px; }
  .content-text { font-size: 16px; }
  .chronicle-body { flex-direction: column; }
  .month-buttons { flex-direction: row; overflow-x: auto; flex-wrap: wrap; width: auto; }
  .month-buttons button { flex: 1 0 45%; min-width: 120px; }
  .button-stack { gap: 24px; }
}
@media (max-width: 480px) {
  main { padding: 15px; }
  .play-launch-button img { width: 90px; height: 90px; }
}

/* ===================== Lexicon Page ===================== */
.page-title { text-align: center; color: var(--ink) !important; font-size: 32px; margin: 0 0 10px 0; }
.page-title + p.content-text,
.lexicon-sub, p.lexicon-sub, .content-text.lexicon-sub {
  display: block; text-align: center !important; color: var(--accent) !important;
  margin: 10px auto 30px; font-size: 18px; font-weight: 500; line-height: 1.6;
}
#lexicon-search {
  width: 100%; padding: 10px; margin-bottom: 1rem; font-size: 1rem;
  border: 2px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--ink);
}
#spotlight-card {
  margin: 20px 0 30px; padding: 16px; border: 2px solid var(--accent);
  border-radius: 10px; background: var(--card-bg, #18301d);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
#spotlight-card h3 { margin-top: 0; text-align: center; color: var(--focus); }
#spotlight-container { margin-top: 12px; }
#lexicon-list { list-style: none; padding: 0; }
.term-card {
  background: var(--card-bg, #18301d); border-radius: 10px; padding: 16px; margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform .15s ease;
  display: flex; flex-direction: row; gap: 16px;
}
.term-card:hover { transform: translateY(-3px); }
.term-card img.card-image {
  max-width: 200px; height: auto; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); flex-shrink: 0;
}
.term-text { flex: 1; font-size: 16px; line-height: 1.6; }
.term-text strong { font-size: 1.2rem; display: block; margin-bottom: 6px; }
.term-text .definition { font-size: 16px; }
.term-text .origin { font-style: italic; font-size: 14px; color: var(--focus); }
.term-text .example { margin-top: 6px; font-size: 15px; color: var(--accent); }
@media (max-width: 600px) {
  .term-card { flex-direction: column; align-items: center; }
  .term-card img.card-image { max-width: 100%; }
}

/* ===================== Tools & Resources Page (single-column, consistent) ===================== */

.tools-page-title {
  text-align: center; font-size: 28px; color: var(--ink); margin: 0 0 8px 0;
}
.tools-page-sub {
  text-align: center; color: var(--accent); margin-bottom: 22px; font-size: 16px; line-height: 1.4;
}

/* Same narrow centered column as Arcade */
.tools-grid {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: min(90vw, var(--stack-max)); margin: 0 auto; padding: 0 0;
}
.tool-card {
  width: 100%; /* fill the shared narrow column */
  background: var(--btn); color: var(--btn-text);
  padding: 16px; border-radius: 10px; text-align: center; text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: transform .2s ease, background .2s ease;
}
.tool-card:hover, .tool-card:focus {
  transform: scale(1.03); background: var(--accent); color: var(--bg);
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.tool-card span { display: block; font-size: 28px; margin-bottom: 6px; }

/* Back-to-top link for Tools page (uses site button style) */
.tools-back-link { text-align: center; margin: 34px 0 26px; }
.tools-back-link a {
  color: var(--accent); text-decoration: none; font-size: 17px;
  padding: 8px 18px; border: 2px solid var(--accent); border-radius: 8px;
  display: inline-block; transition: all .2s ease;
}
.tools-back-link a:hover, .tools-back-link a:focus {
  background: var(--accent); color: var(--bg);
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* ===================== Arcade Page (single-column, consistent) ===================== */

.arcade-title {
  text-align: center; font-size: 28px; color: var(--ink); margin: 0 0 8px 0;
}
.arcade-sub {
  text-align: center; color: var(--accent); margin-bottom: 30px; font-size: 16px; line-height: 1.4;
}

/* Same narrow centered column as Tools */
.arcade-grid {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: min(90vw, var(--stack-max)); margin: 0 auto; padding: 0 10px;
}
.game-tile {
  width: 100%; background: var(--btn); color: var(--btn-text);
  padding: 16px; border-radius: 12px; text-align: center; text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform .2s ease, background .2s ease;
}
.game-tile span { display: block; font-size: 32px; margin-bottom: 8px; }
.game-tile:hover, .game-tile:focus {
  transform: scale(1.03); background: var(--accent); color: var(--ink);
  outline: 3px solid var(--focus); outline-offset: 2px;
}
/* Optional: move inline size for Space Painter icon into CSS */
.game-tile span img { height: 32px; vertical-align: middle; }

/* Shared responsive for both narrow stacks */
@media (max-width: 600px) {
  .tools-grid, .arcade-grid { gap: 16px; }
  .tool-card, .game-tile { padding: 14px; }
  .tools-page-title, .arcade-title { font-size: 24px; }
}
@media (max-width: 480px) {
  .tools-grid, .arcade-grid { width: 94vw; gap: 16px; }
}
/* ===================== Resources Page ===================== */

.resources-title {
  text-align: center;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.resources-sub {
  text-align: center;
  color: var(--accent);
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.4;
}

/* Shared column width with Arcade & Tools */
.resources-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(90vw, var(--stack-max));
  margin: 0 auto;
  padding: 0 10px;
}

/* Image tiles styled like buttons */
.resource-tile {
  width: 100%;
  background: var(--btn);
  color: var(--btn-text);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}

.resource-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid var(--bg);
}

.resource-tile span {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 12px;
  font-size: 16px;
}

.resource-tile:hover,
.resource-tile:focus {
  transform: scale(1.03);
  background: var(--accent);
  color: var(--bg);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
  .resources-title { font-size: 24px; }
  .resources-grid { gap: 16px; }
  .resource-tile span { padding: 10px; font-size: 15px; }
}
/* ===================== Extras Page ===================== */

.extras-page main {
  flex: 1;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.extras-page h2 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
}

.extras-page p.sub {
  color: var(--accent);
  text-align: center;
  margin-bottom: 20px;
}

/* Snack Seed of the Day */
.maxim-bar {
  width: 100%;
  text-align: center;
}

.maxim-title {
  font-size: 1.13em;
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--accent);
}

.maxim-btn-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.maxim-btn {
  background: var(--btn);
  color: var(--btn-text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.maxim-btn:hover,
.maxim-btn:focus {
  transform: scale(1.05);
  background: var(--accent);
  color: var(--bg);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Extras list */
.weblinks-list {
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}

.weblinks-list li {
  margin: 20px 0;
  list-style: none;
  padding: 12px;
  border: 1px solid var(--btn);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.weblinks-list a {
  font-weight: bold;
  color: var(--accent);
  text-decoration: underline;
  font-size: 18px;
}

.weblinks-list a:visited {
  color: orange;
}

.weblinks-list p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink);
}

/* Back-to-Top link */
.back-to-top-link {
  text-align: center;
  margin: 30px 0 10px;
}

.back-to-top-link a {
  color: var(--accent);
  text-decoration: underline;
  font-size: 16px;
}

.back-to-top-link a:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 800px) {
  .extras-page main { padding: 15px; max-width: 92vw; }
  .weblinks-list { max-width: 92vw; }
}
/* ===================== Web Links Page (restored original layout) ===================== */

.weblinks-page main {
  flex: 1;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.weblinks-page h2 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
}

.weblinks-page p.sub {
  color: var(--accent);
  text-align: center;
  margin-bottom: 20px;
}

/* Classic centered layout */
.weblinks-list {
  text-align: left;
  max-width: 700px;        /* ✅ restored width (as in your working version) */
  margin: 0 auto;
}

.weblinks-list li {
  margin: 20px 0;
  list-style: none;
  padding: 12px;
  border: 1px solid var(--btn);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.weblinks-list a {
  font-weight: bold;
  color: var(--accent);
  text-decoration: underline;
  font-size: 18px;
}

.weblinks-list a:visited {
  color: orange;
}

.weblinks-list p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink);
}

/* Global back-link button (standard site style) */
.back-link {
  text-align: center;
  margin-top: 40px;
}
.back-link a {
  color: var(--accent);
  text-decoration: none;
  font-size: 18px;
  padding: 10px 20px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  display: inline-block;
  transition: all 0.2s ease;
}
.back-link a:hover,
.back-link a:focus {
  background: var(--accent);
  color: var(--bg);
  outline: 3px solid var(--focus);
}

/* Responsive */
@media (max-width: 800px) {
  .weblinks-page main { padding: 15px; max-width: 92vw; }
  .weblinks-list { max-width: 92vw; }
}
/* ===================== Tools Utilities (Dice Roller, Jumble Jammer, etc.) ===================== */

.tools-utility-page main {
  flex: 1;
  padding: 20px;
  max-width: var(--stack-max);
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;

  /* NEW: make main a column so we can pin Back-to-Top to the bottom */
  display: flex;
  flex-direction: column;
}

/* Headings */
.tools-utility-page h2 {
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 10px;
  text-align: center;
}
.tools-utility-page p.sub {
  color: var(--accent);
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.4;
  text-align: center;
}

/* Utility card */
.tool-container {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--btn);
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto 40px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  max-width: 100%;
}

/* Controls */
.controls { margin-top: 20px; }
.controls label { font-weight: bold; margin-right: 8px; }
.controls select {
  font-size: 16px;
  padding: 8px;
  border-radius: 6px;
  border: 2px solid var(--btn);
  background: var(--bg);
  color: var(--ink);
  margin-right: 10px; /* keep space between select & button */
}

/* Buttons */
.tool-button,
button.tool-button {
  margin-top: 10px;
  background: var(--btn);
  color: var(--btn-text);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tool-button:hover,
.tool-button:focus {
  background: var(--accent);
  color: var(--bg);
  transform: scale(1.05);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Display area */
.tool-display {
  background: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  font-size: 20px;
  margin: 20px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* Back-to-Top – push to bottom of main & match global spacing */
.tools-utility-page .back-link,
.tools-utility-page .back-to-top-link {
  margin-top: auto;              /* <-- pins it to the bottom of main */
  text-align: center;
  margin-bottom: 40px;           /* spacing above footer (same as other pages) */
}
.tools-utility-page .back-link a,
.tools-utility-page .back-to-top-link a {
  color: var(--accent);
  text-decoration: none;
  font-size: 18px;
  padding: 10px 20px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  display: inline-block;
  transition: all 0.2s ease;
}
.tools-utility-page .back-link a:hover,
.tools-utility-page .back-to-top-link a:focus,
.tools-utility-page .back-to-top-link a:hover,
.tools-utility-page .back-link a:focus {
  background: var(--accent);
  color: var(--bg);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 600px) {
  .tools-utility-page main { padding: 15px; width: 94vw; }
  .tool-container { padding: 16px; }
  .tool-display { font-size: 18px; padding: 12px; }
  .controls select, .tool-button { font-size: 15px; }
}
/* ===================== Contact Page ===================== */
.contact-page main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Reusable card for Mission, Location, and the form */
.contact-form {
  max-width: 600px;
  margin: 0 auto 40px;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--btn);
}
.contact-form h2 { margin: 0 0 12px; color: var(--accent); }

/* Add breathing room below the page heading */
.contact-page .contact-form:first-of-type { margin-top: 24px; }

/* Form controls */
.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--accent);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 18px;
  font-size: 16px;
  border-radius: 6px;
  border: 2px solid var(--accent);
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Links inside cards (e.g., email) -> green, then orange after visited */
.contact-form a { color: var(--accent); text-decoration: underline; }
.contact-form a:visited { color: var(--active-article); }
.contact-form a:hover,
.contact-form a:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Status message */
#formStatus {
  font-size: 16px;
  margin-top: 12px;
  text-align: center;
  color: var(--accent);
}

/* Footer "Contact" link — simple text; green → orange after visit */
.footer-contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
.footer-contact-link:visited { color: var(--active-article); }
.footer-contact-link:hover,
.footer-contact-link:focus {
  text-decoration: underline;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Clock + Weather wrapper — center the whole block */
.page-widgets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 30px auto;
  text-align: center;
}
.page-widgets #clockbox { font-size: 16px; color: var(--accent); }
.page-widgets img {
  display: block;          /* true centering */
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 600px) {
  .contact-page main { padding: 15px; width: 92vw; }
  .contact-form { padding: 16px; }
}
/* Center the send button inside the contact card */
.contact-form .tool-button {
  display: block;
  margin: 12px auto 0;
}
/* ==== GBA Chronicle: Month Navigation & Year Selector Column ==== */

.chronicle-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}

/* Left column: Month nav + Jump to year */
.month-nav {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.month-nav a {
  display: block;
  text-align: center;
  background: var(--btn);
  color: var(--btn-text);
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 0;
  transition: all 0.3s ease;
}
.month-nav a:hover,
.month-nav a:focus {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 8px var(--focus);
  outline: none;
}

/* ===================== Shop Page Styles ===================== */

:root {
  --in-stock-color: #2196f3;
  --new-color: #4caf50;
  --sold-out-color: #e53935;
  --coming-soon-color: #ffcc00;
}

/* === Filter Buttons === */
.filter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.filter-btn {
  background: var(--btn);
  color: var(--btn-text);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.filter-btn:hover,
.filter-btn:focus {
  background: var(--accent);
  color: var(--bg);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  transform: scale(1.02);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 0 2px var(--active-article), 0 0 10px var(--focus);
}

/* === Shop Listing Layout === */
.shop-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(90vw, var(--stack-max));
  margin: 0 auto;
  padding: 40px 0;
}

/* === Shop Item Cards === */
.shop-item {
  width: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--btn);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.shop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.shop-item:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.shop-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background-color: #000;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  object-fit: contain;
}

.shop-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--ink);
}

.shop-item h3 a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.shop-item h3 a:hover,
.shop-item h3 a:focus {
  color: var(--focus);
  text-decoration: underline;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.shop-item h3 a:visited {
  color: var(--active-article);
}

.shop-item p {
  margin: 0;
  font-size: 14px;
  color: var(--accent);
  font-style: italic;
}

/* === Availability Badges === */
.shop-item::after {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  z-index: 1;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.shop-item.in-stock::after {
  content: "In Stock";
  background: var(--in-stock-color);
}

.shop-item.new::after {
  content: "New!";
  background: var(--new-color);
}

.shop-item.sold-out::after {
  content: "Sold Out";
  background: var(--sold-out-color);
}

.shop-item.coming-soon::after {
  content: "Coming Soon";
  background: var(--coming-soon-color);
  color: #000;
}

/* === Product Page Layout === */
.product-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Match global button-stack spacing */
.product-detail .button-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 50px 0 20px;
}

/* Tighter spacing for back-link on product pages */
.product-detail + .back-link {
  text-align: center;
  margin: 20px 0 30px; /* Reduced top margin from 40px to 20px */
}

/* === Breadcrumb Navigation === */
.breadcrumb-nav {
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  color: var(--ink);
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 6px;
  margin-right: 6px;
  color: var(--accent);
  font-weight: normal;
}

/* Breadcrumb links - stay GREEN (no visited color change) */
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}

.breadcrumb a:visited {
  color: var(--accent); /* Stay green even after visited */
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  text-decoration: underline;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Current page - ORANGE */
.breadcrumb li[aria-current="page"] {
  color: var(--active-article);
  font-weight: bold;
}

/* === Product Page Content === */
.product-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  border-radius: 12px;
  border: 2px solid var(--btn);
  background: #000;
}

.product-price {
  font-size: 20px;
  color: var(--accent);
  font-weight: bold;
  margin-bottom: 20px;
}

.status {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 14px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
}
.status.in-stock {
  background: var(--in-stock-color);
  color: #fff;
}
.status.new {
  background: var(--new-color);
  color: #fff;
}
.status.sold-out {
  background: var(--sold-out-color);
  color: #fff;
}
.status.coming-soon {
  background: var(--coming-soon-color);
  color: #000;
}

.product-features {
  margin-bottom: 20px;
}
.product-features li {
  padding-left: 1em;
  position: relative;
}
.product-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

/* === Responsive === */
@media (max-width: 600px) {
  .filter-controls {
    gap: 8px;
  }

  .filter-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
    padding: 8px 16px;
    font-size: 14px;
  }

  .shop-item {
    padding: 16px;
  }

  .page-title {
    font-size: 26px;
  }

  .product-price {
    font-size: 18px;
  }
}