/* =========================================================================
   Piazza's PB Chocolate Treats — stylesheet
   ---------------------------------------------------------------------
   This file is organized top to bottom as:
     1. Design tokens (colors, spacing) — change the site's palette here
     2. Reset / base element styles
     3. Reusable pieces (buttons, the bronze double-frame, flourishes, dot)
     4. Header / nav
     5. Each page section, in the order it appears in index.html
     6. Footer
     7. Responsive tweaks (mobile-first, so most rules above already work on
        phones — this section adjusts things for wider screens)

   To change the look for the whole site, edit the tokens in section 1.
   To restyle one section, search for its heading comment below.
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Core palette — sampled from the approved print packaging file */
  --cream: #F0E4D3; /* page background */
  --bronze: #8A6231; /* accent, rules, small caps */
  --ink: #141414; /* all body and display text */

  /* Bronze ramp — borders, hovers, disabled states */
  --bronze-900: #553C1E;
  --bronze-700: #6F4F27; /* use for bronze BODY-SIZE text — passes contrast, --bronze does not */
  --bronze-500: #8A6231; /* = --bronze. Fine for rules/borders/headings/eyebrows, NOT body text */
  --bronze-300: #B78241;
  --bronze-100: #D2AE81;

  /* Surfaces */
  --cream-raised: #F7EFE2; /* cards sitting on --cream */
  --ink-panel: #141414; /* inverted sections; pair with --cream text */

  /* Type */
  --font-display: 'Archivo Black', sans-serif;
  --font-script: 'Great Vibes', cursive;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --content-width: 880px;
  --content-width-narrow: 680px;
}

/* ---------- 2. Reset / base ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--bronze-700);
}

/* Visible focus states everywhere — never remove outline without replacing it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--bronze-900);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75em 1.25em;
  z-index: 100;
}

.skip-link:focus {
  left: 0.5em;
  top: 0.5em;
}

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

.wrap-narrow {
  max-width: var(--content-width-narrow);
}

.section {
  padding: 3.5rem 0;
  text-align: center;
}

.section-panel {
  background: var(--cream-raised);
}

.section-heading {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: 1.75rem;
}

/* Small-caps eyebrow label device — reused from the packaging's letter-spaced "T R E A T S" */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--bronze-500);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ---------- 3. Reusable pieces ---------- */

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.9em 1.75em;
  border-radius: 2px;
  border: 2px solid var(--bronze-900);
  cursor: pointer;
}

.btn-primary {
  background: var(--bronze-900);
  color: var(--cream);
}

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

.btn-primary:disabled {
  background: var(--bronze-300);
  border-color: var(--bronze-300);
  cursor: not-allowed;
}

/* Double keyline frame — the packaging's signature device.
   A 2px bronze border with a 1px inset bronze rule ~4px in. */
.framed {
  background: var(--cream-raised);
  border: 2px solid var(--bronze-500);
  box-shadow:
    inset 0 0 0 4px var(--cream),
    inset 0 0 0 5px var(--bronze-500);
  padding: 2rem;
  text-align: left;
  margin: 0 auto;
}

/* Arrow flourish — short bronze rules ending in a small arrowhead, flanking a centered word */
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--bronze-700);
  margin-bottom: 0.75rem;
}

.flourish span {
  position: relative;
  display: inline-block;
  width: clamp(2rem, 8vw, 4.5rem);
  height: 2px;
  background: var(--bronze-500);
}

.flourish span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}

.flourish span:first-child {
  left: 0;
}

.flourish span:first-child::after {
  left: -1px;
  border-right: 6px solid var(--bronze-500);
}

.flourish span:last-child::after {
  right: -1px;
  border-left: 6px solid var(--bronze-500);
}

/* Single bronze dot — section terminator */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bronze-500);
  margin: 0 auto;
}

/* ---------- 4. Header / nav ---------- */
.site-header {
  padding: 1.25rem 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.logo-img {
  width: 140px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--bronze-900);
}

.nav-cta {
  border: 2px solid var(--bronze-900);
  padding: 0.4em 1em;
  border-radius: 2px;
}

/* ---------- 5. Hero ---------- */
.hero {
  text-align: center;
  padding: 2rem 0 3.5rem;
}

.hero-truck {
  max-width: 780px;
  width: 100%;
  margin: 0 auto 2rem;
}

.hero-script {
  width: 260px;
  margin: 0 auto 0.5rem;
}

.hero-product {
  width: 320px;
  margin: 0 auto 1.5rem;
}

.hero-tagline {
  max-width: 46ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  color: var(--bronze-900);
}

/* ---------- The Bar ---------- */
.product-card {
  display: block;
  margin-bottom: 1.5rem;
}

.photo-placeholder {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    var(--bronze-100),
    var(--bronze-100) 10px,
    var(--cream-raised) 10px,
    var(--cream-raised) 20px
  );
  border: 1px dashed var(--bronze-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze-900);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.product-copy p:last-child {
  margin-bottom: 0;
}

.allergen-line {
  font-weight: 700;
  color: var(--bronze-900);
}

.nutrition-details {
  text-align: left;
  border-top: 1px solid var(--bronze-300);
  padding-top: 1rem;
}

.nutrition-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bronze-900);
}

.nutrition-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 2rem;
}

.nutrition-list li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

/* ---------- Catering ---------- */
.catering-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  font-weight: 600;
}

.catering-list li::before {
  content: '\2022';
  color: var(--bronze-500);
  margin-right: 0.5em;
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--bronze-300);
  padding-top: 1.25rem;
}

.details-list li {
  margin-bottom: 0.6rem;
}

.todo {
  background: var(--bronze-100);
  color: var(--ink);
  padding: 0.1em 0.4em;
  font-style: italic;
  font-size: 0.92em;
}

/* ---------- Where to find us ---------- */
.market-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.market-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bronze-300);
}

.market-list li:last-child {
  border-bottom: none;
}

/* ---------- Inquiry form ---------- */
.form-intro {
  margin-bottom: 1.75rem;
}

.contact-fallback {
  font-weight: 600;
  white-space: nowrap;
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-half > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

input,
select,
textarea {
  font: inherit;
  padding: 0.65em 0.75em;
  border: 1px solid var(--bronze-500);
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
}

.inquiry-form .btn {
  align-self: flex-start;
}

.form-status {
  margin: 0;
  font-weight: 600;
  min-height: 1.2em;
}

.form-status[data-state="success"] {
  color: #2f6b3a;
}

.form-status[data-state="error"] {
  color: #8a2e2e;
}

/* ---------- 6. Footer ---------- */
.site-footer {
  background: var(--ink-panel);
  color: var(--cream);
  padding: 3rem 0;
  text-align: center;
}

.site-footer p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--bronze-100);
}

.footer-business {
  color: var(--cream);
  font-weight: 700;
  font-size: 1rem;
}

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

/* ---------- 7. Responsive ---------- */
@media (min-width: 640px) {
  .hero-script {
    width: 320px;
  }

  .hero-product {
    width: 400px;
  }

  .logo-img {
    width: 170px;
  }
}

@media (max-width: 560px) {
  .form-row-half {
    grid-template-columns: 1fr;
  }

  .catering-list {
    grid-template-columns: 1fr;
  }

  .site-nav {
    gap: 1rem;
    justify-content: center;
    width: 100%;
  }
}