/* ============================================================
   ANNABI COOKIES — index.css
   Homepage-specific styles only.
   Shared tokens, reset, typography, nav, footer, buttons
   and animations are all in css/main.css.
   ============================================================ */


/* ============================================================
   LOCAL TYPE — mirrors original inline styles exactly.
   These rules reproduce the heading and label styles that were
   previously defined in the page's inline <style> block.
   ============================================================ */

/* Small uppercase label — matches original .label */
.label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.42;
  display: block;
  margin-bottom: 10px;
}

/* Hero h1 — matches original .hero-text h1 exactly */
#hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(52px, 6.5vw, 76px);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}

/* Section h2s — match original clamp values and weight exactly */
#flavours h2,
#box h2,
#services h2,
#ingredients h2,
#email h2 {
  font-family: var(--font-heading);
  font-size: clamp(38px, 4.5vw, 60px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Our Story h2 — matches original .story-copy h2 */
#story h2 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 26px;
}


/* ============================================================
   HERO
   ============================================================ */

#hero {
  min-height: 100vh;
  background: var(--peach);
  padding-top: var(--nav-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 60px var(--container-pad) 60px;
}

.hero-text h1 {
  margin-bottom: var(--space-6);
}

.hero-text p {
  color: rgba(0,0,0,0.60);
  max-width: 500px;
}

/* Breathing room between hero body paragraphs */
.hero-text p + p {
  margin-top: var(--space-4);
}

/* Space before the CTA button — only after the last paragraph */
.hero-text p:last-of-type {
  margin-bottom: var(--space-10);
}

/* Softer, smaller aside within the hero H1 */
.hero-sub {
  font-size: 0.5em;
  font-weight: 700;
}

/* Hero image — transparent PNG or lifestyle shot */
.hero-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img-wrap img {
  width: 100%;
  max-width: 580px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.22));
  display: block;
  object-fit: cover;
}



/* Small circular badge — bottom-left of hero image */
.baked-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}


/* ============================================================
   COOKIE LINE-UP
   ============================================================ */

#flavours {
  background: var(--white);
  padding-block: var(--space-28);
}

.flavours-hd {
  text-align: center;
  margin-bottom: var(--space-16);
}

.flavours-hd .label {
  display: block;
  margin-bottom: var(--space-3);
}

/*
  Single horizontally scrollable row on desktop.
  Cards have a fixed width so they scroll naturally when they overflow.
  On tablet (≤860px): 2-column grid.
  On mobile (≤520px): 1-column grid.
*/
.flavour-scroll-row {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4); /* space for scrollbar on some OSes */
  /* Hide scrollbar visually but keep it functional */
  scrollbar-width: thin;
  scrollbar-color: var(--peach-mid) transparent;
}

.flavour-scroll-row::-webkit-scrollbar {
  height: 4px;
}

.flavour-scroll-row::-webkit-scrollbar-track {
  background: transparent;
}

.flavour-scroll-row::-webkit-scrollbar-thumb {
  background: var(--peach-mid);
  border-radius: 4px;
}

.flavour-card {
  flex: 0 0 360px; /* fixed width — forces horizontal scroll */
  scroll-snap-align: start;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
  background: var(--white);
}

.flavour-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.fc-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.fc-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  padding: var(--space-4) var(--space-5) var(--space-5);
  letter-spacing: -0.01em;
}

/* Rotating monthly features get a subtle peach accent on the name */
.fc-name--feature {
  color: var(--peach-deep);
}

/* "See full menu" link */
.see-more {
  text-align: center;
  margin-top: var(--space-12);
}

.see-more a {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--black);
  padding-bottom: 3px;
  transition: opacity var(--ease);
}

.see-more a:hover {
  opacity: 0.45;
}


/* ============================================================
   INGREDIENTS
   ============================================================ */

#ingredients {
  background: var(--black);
  padding-block: var(--space-28);
}

#ingredients h2 {
  color: var(--white);
}

.ingredients-hd {
  text-align: center;
  margin-bottom: var(--space-16);
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.ing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ing-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.ing-card-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.ing-card-copy {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin: 0;
}


/* ============================================================
   HOW IT WORKS (BUILD YOUR BOX)
   ============================================================ */

#box {
  background: var(--peach);
  padding-block: var(--space-28);
}

.box-hd {
  text-align: center;
  margin-bottom: 56px;
}

.box-hd .label {
  display: block;
  margin-bottom: var(--space-3);
}

/* Three-step row */
.hiw-steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-10);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.hiw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6) var(--space-8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  transition: transform var(--ease), box-shadow var(--ease);
}

.hiw-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.07);
}

/* Icon circle — off-white with border and shadow for depth */
.hiw-icon-wrap {
  width: 88px;
  height: 88px;
  background: var(--off-white);
  border-radius: 50%;
  border: 1.5px solid rgba(10,10,10,0.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 2px 4px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  position: relative;
  color: var(--black);
}

/* Step number badge — top-right of icon circle */
.hiw-number {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--black);
  border-radius: 50%;
  color: var(--off-white);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label pill — peach-mid fill, sits inside white card */
.hiw-label {
  background: var(--peach-mid);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  white-space: nowrap;
}

/* CTA button row */
.hiw-cta {
  text-align: center;
}



/* ============================================================
   SERVICES
   ============================================================ */

#services {
  background: var(--black);
  padding-block: var(--space-28);
}

.services-hd {
  text-align: center;
  margin-bottom: var(--space-16);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.service-item {
  padding: 52px 40px;
  border-right: 1px solid rgba(255,255,255,0.10);
  transition: background var(--ease);
}

.service-item:last-child {
  border-right: none;
}

.service-item:hover {
  background: rgba(255,255,255,0.04);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  font-size: 22px;
}

.service-item h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.service-item p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-8);
}

.service-link {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--peach);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,216,194,0.4);
  padding-bottom: 2px;
  transition: border-color var(--ease);
}

.service-link:hover {
  border-color: var(--peach);
}


/* ============================================================
   OUR STORY (HOMEPAGE TEASER)
   ============================================================ */

#story {
  background: var(--white);
  padding-block: var(--space-28);
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.story-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: block;
}

.story-copy .label {
  display: block;
  margin-bottom: var(--space-4);
}

.story-copy h2 {
  margin-bottom: var(--space-6);
}

.story-copy p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(0,0,0,0.62);
  margin-bottom: var(--space-6);
}

.signoff {
  font-family: var(--font-script);
  font-size: 34px;
  color: var(--black);
  display: block;
  margin-bottom: var(--space-8);
}

.story-signoff {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  margin-bottom: var(--space-8);
}

.txt-link {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  border-bottom: 2px solid var(--black);
  padding-bottom: 2px;
  transition: opacity var(--ease);
}

.txt-link:hover {
  opacity: 0.45;
}


/* ============================================================
   REVIEWS (styles kept for when section is activated)
   ============================================================ */

#reviews {
  background: var(--peach);
  padding-block: var(--space-24);
}

.reviews-hd {
  text-align: center;
  margin-bottom: var(--space-12);
}

.reviews-hd h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.review-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--ease);
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-card .stars {
  font-size: 15px;
  margin-bottom: var(--space-4);
}

.review-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,0.68);
  margin-bottom: var(--space-5);
}

.review-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  opacity: 0.55;
}


/* ============================================================
   EMAIL SIGNUP
   ============================================================ */

#email {
  background: var(--black);
  padding-block: var(--space-24);
  text-align: center;
}

#email h2 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

#email > .container > p {
  font-size: 17px;
  color: var(--peach);
  opacity: 0.75;
  margin-bottom: var(--space-10);
}

.email-wrap {
  display: flex;
  justify-content: center;
  max-width: 460px;
  margin-inline: auto;
}

.email-wrap input {
  flex: 1;
  padding: 15px 22px;
  font-size: 15px;
  font-family: var(--font-body);
  border: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  outline: none;
  background: var(--white);
  color: var(--black);
}

.email-wrap button {
  padding: 15px 28px;
  background: var(--peach);
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease);
}

.email-wrap button:hover {
  background: var(--peach-mid);
}


/* ============================================================
   RESPONSIVE — HOMEPAGE OVERRIDES
   ============================================================ */

/* Tablet — 860px and below */
@media (max-width: 860px) {

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-10) var(--container-pad) 0;
    text-align: center;
  }

  .hero-img-wrap {
    order: -1;
  }

  .hero-img-wrap img {
    width: 100%;
  }

  .hero-text p {
    margin-inline: auto;
  }

  .baked-badge {
    width: 76px;
    height: 76px;
    font-size: 9.5px;
    bottom: 16px;
    left: 10px;
  }

  /* Cookie Line-Up: 2-column grid, disable horizontal scroll */
  .flavour-scroll-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .flavour-card {
    flex: none; /* remove fixed width for grid layout */
  }

  /* Ingredients */
  .ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* How It Works — stack vertically on tablet */
  .hiw-steps {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .hiw-step {
    width: 100%;
    max-width: 400px;
  }

  .hiw-label {
    white-space: normal;
    text-align: center;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .service-item:last-child {
    border-bottom: none;
  }

  /* Our story */
  .story-inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Reviews */
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile — 520px and below */
@media (max-width: 520px) {

  /* Cookie Line-Up: single column */
  .flavour-scroll-row {
    grid-template-columns: 1fr;
  }

  /* Ingredients */
  .ingredients-grid {
    grid-template-columns: 1fr;
  }

  /* Email signup: stacked */
  .email-wrap {
    flex-direction: column;
    max-width: 340px;
  }

  .email-wrap input {
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-3);
  }

  .email-wrap button {
    border-radius: var(--radius-pill);
  }
}