/* One Fine Cookie — brand palette from product labels */
:root {
  --bg: #FFF3D8;
  --card: #FFEABA;
  --card-edge: #DEBA8A;
  --brand: #4E2A08;
  --ink: #1C1408;
  --mid-brown: #785016;
  --light-brown: #A87037;
  --heading-font: Georgia, 'Times New Roman', serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.5;
  padding: 2.5rem 1.25rem 0;
  max-width: 60rem;
  margin: 0 auto;
}

/* Hero */
.hero { text-align: center; }

.logo { display: block; margin: 0 auto 1rem; }

h1 {
  font-family: var(--heading-font);
  color: var(--brand);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  letter-spacing: 0.02em;
}

.tagline {
  color: var(--mid-brown);
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 1.1rem;
  margin-top: 0.35rem;
}

.ig-button {
  display: inline-block;
  margin-top: 1.5rem;
  background: var(--brand);
  color: var(--card);
  font-family: var(--heading-font);
  font-weight: bold;
  font-size: 1.15rem;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.ig-button:hover, .ig-button:focus { background: var(--mid-brown); }

.microcopy {
  margin-top: 0.6rem;
  color: var(--light-brown);
  font-size: 0.9rem;
}

/* Flavors */
.flavors { margin-top: 3.5rem; }

.flavors h2 {
  font-family: var(--heading-font);
  color: var(--brand);
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

/* Several promotions can stack in one section — a short special above the
   monthly menu. Every heading after the first follows the previous
   promotion's flavor grid or details card with no gap of its own, so they
   ran together. Keyed off the preceding element rather than :not(:first-of-type)
   so it holds however many promotions are live and whether or not each
   carries a details card. */
.flavors :is(.flavor-grid, .promo-details) + h2 { margin-top: 3.5rem; }

.flavor-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.flavor {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}

.flavor h3 {
  font-family: var(--heading-font);
  color: var(--brand);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.flavor p { color: var(--ink); font-size: 0.95rem; }

/* Footer */
.site-footer {
  margin-top: 3.5rem;
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--card-edge);
  text-align: center;
  font-size: 0.85rem;
  color: var(--mid-brown);
}

.disclosure {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

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

/* Monthly menu */
.menu-note {
  text-align: center;
  font-family: var(--heading-font);
  font-style: italic;
  color: var(--mid-brown);
  margin: -0.75rem 0 1.25rem;
}

.badge {
  display: inline-block;
  background: var(--card-edge);
  color: var(--brand);
  font-family: var(--body-font);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* Free-form copy under the menu, wearing the same card as a flavor tile so it
   reads as part of the menu rather than a footnote — but spanning the whole
   content area instead of taking a column, because it is about the promotion
   above it and not about one cookie. It is a sibling of .flavor-grid, so full
   width is simply its natural block width; the previous max-width and auto
   margins were what held it in. */
.promo-details {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  margin: 1rem 0 0;
  color: var(--mid-brown);
  font-size: 0.95rem;
  line-height: 1.55;
}
.promo-details p { margin: 0 0 0.6rem; }
.promo-details p:last-child { margin-bottom: 0; }
/* Same custom-bullet mechanic as .order-notes below, so a bullet list here
   doesn't fall back to the browser default and look like it came from a
   different page — list-style suppressed, li gets the room, ::before draws
   the dot. */
.promo-details ul { list-style: none; margin: 0.4rem 0 0; }
.promo-details li { padding-left: 1.2rem; position: relative; }
.promo-details li + li { margin-top: 0.3rem; }
.promo-details li::before {
  content: "\2022";
  color: var(--light-brown);
  position: absolute;
  left: 0.2rem;
}
.promo-details a { color: var(--brand); }

.order-notes {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 1rem;
  padding: 1.1rem 1.5rem;
}

.order-notes ul { list-style: none; }

.order-notes li {
  padding-left: 1.2rem;
  position: relative;
  font-size: 0.95rem;
}

.order-notes li + li { margin-top: 0.4rem; }

.order-notes li::before {
  content: "\2022";
  color: var(--light-brown);
  position: absolute;
  left: 0.2rem;
}

.all-flavors-link, .back-link {
  text-align: center;
  margin-top: 1.75rem;
  font-family: var(--heading-font);
}

.back-link { margin: -0.5rem 0 1.5rem; }

.all-flavors-link a, .back-link a { color: var(--brand); }

/* Compact header for inner pages */
.page-header h1 { font-size: 1.6rem; }
.page-header h1 a { color: var(--brand); text-decoration: none; }
.page-header .logo { margin-bottom: 0.4rem; }