/* Coftea DEMO — frontside. Reuses the Coftea palette + Sniglet, kept standalone. */
:root {
  --primary: #f7fff8;
  --secondary: #b2d8b2;
  --accent: #65c995;
  --dark: #00631E;
  --text: #339966;
  /* extra tokens the reused /styles/navbar.css + /styles/pages/home.css + /styles/footer.css expect (from base.css) */
  --light: #e9ffeb;
  --light-rgb: 233, 255, 235;
  --text-rgb: 51, 153, 102;
  --dark-rgb: 0, 99, 30;
  --primary-rgb: 247, 255, 248;
  --secondary-rgb: 178, 216, 178;
  --accent-rgb: 101, 201, 149;
  --box-shadow: 0 1px 3px rgb(0 99 30);
  --border: #339966;
  --gap-small: 10px;
  --gap-medium: 20px;
  --gap-large: 30px;
  --font: 'Sniglet', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--primary);
  line-height: 1.6;
  padding-top: 72px; /* clear the fixed .navbar (height 60px) */
}

.demo-flag {
  background: var(--dark);
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
  padding: 8px 14px;
}
.demo-flag code { background: rgba(255,255,255,.15); padding: 1px 5px; border-radius: 4px; }
.demo-flag a { color: #d6f5e3; margin-left: 10px; }

/* ===== One-page scrolling layout ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* keep section tops clear of the fixed 60px .navbar (styles/navbar.css) */
#home,
#menu,
#story,
#contact {
  scroll-margin-top: 72px;
}

/* placeholder containers for the #menu / #story / #contact sections */
.fs-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 20px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.fs-section h2 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--text);
  margin: 0 0 12px;
}
.fs-section p {
  font-size: clamp(1rem, 3vw, 1.15rem);
  color: var(--text);
  margin: 0 auto;
  max-width: 48ch;
}
@media (max-width: 600px) {
  .fs-section { padding: 48px 16px; min-height: 50vh; }
}

/* ===== #story — matches the production Story page =====
   Layout/colours come from the reused /styles/pages/story.css
   (.story-container, .story-container h2, .highlight). These few rules are the
   base.css typography the frontside does not otherwise load, scoped to #story. */
#story .story-container h2 {
  font-family: var(--font);
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}
#story .p1 {
  font-family: var(--font);
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
#story .p2 {
  font-family: var(--font);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
/* keep the production .highlight colour (story.css sets var(--dark)) — the
   #story-scoped .p2 rule above would otherwise out-specify it */
#story .story-container .highlight { color: var(--dark); }

@media (max-width: 600px) {
  #story .story-container h2 { font-size: 1.8rem; }
  #story .p1 { font-size: 1rem; }
  #story .p2 { font-size: 0.9rem; }
}

/* ===== #contact — matches the production Contact page =====
   Layout comes from the reused /styles/pages/contact.css. This is the base.css
   h2 typography the frontside doesn't otherwise load, scoped to #contact. */
#contact .contact-intro__title {
  font-family: var(--font);
  font-size: 2.2rem;
  color: var(--text);
}
@media (max-width: 600px) {
  #contact .contact-intro__title { font-size: 1.8rem; }
}

.hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 20px 72px;
  text-align: center;
}

.hero__image {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 28px;
  border-radius: 16px;
  background: var(--secondary);
}
.hero__image:not([src]),
.hero__image[src=""] { display: none; }

.hero__title {
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--text);
  margin: 0 0 12px;
}

.hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: var(--text);
  margin: 0 auto 28px;
  max-width: 46ch;
}

.hero__cta {
  display: inline-block;
  padding: 0.8em 1.8em;
  background: var(--accent);
  color: var(--primary);
  text-decoration: none;
  border-radius: 999px;
  font-size: 1.05rem;
  transition: background 0.2s, transform 0.2s;
}
.hero__cta:hover { background: var(--dark); transform: translateY(-2px); }

@media (max-width: 600px) {
  .hero { padding: 28px 16px 48px; }
}

/* ===== #menu — production menu (styles/pages/menu.css, reused as-is) =====
   Only the sticky category-button offset needs a frontside-specific tweak:
   the production value assumes no fixed site header, but the frontside
   .navbar is position:fixed (height 60px), so the buttons would stick partly
   underneath it without this. */
@media (min-width: 600px) {
  #menu .menu-category-buttons { top: 72px; }
}

/* Hidden on request — markup/menu.js left in place so this is a one-line
   revert if the tabs need to come back. */
#menu .menu-category-buttons { display: none; }

/* Pre-existing footer bug, not caused by the #menu work — found while
   re-testing overflow after it. styles/footer.css hardcodes
   .cat-location-icon to a fixed 500px with no responsive cap, so it overflows
   any viewport narrower than 500px on every frontside page. footer.css
   itself is untouched; max-width wins over the fixed width when they clash. */
.cat-location-icon { max-width: 100%; height: auto; }