@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* =========================================
   BASE STYLES
========================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #f7f0e6;
  --bg-alt: #fdfbf7;
  --primary: #d1b98a;
  --primary-dark: #b99d68;
  --accent: #a9b59f;
  /* Darkened from #6f7f65 so text/icon uses (price, links, testimonial
     names, button labels) meet WCAG 2.2 AA 4.5:1 contrast on --bg/--bg-alt. */
  --accent-dark: #566150;
  --accent-darker: #3f4d3a;
  --accent-border: #c9d2c1;
  --text-main: #4a4a4a;
  --text-strong: #7a5c46;
  --border-soft: #e0d3c2;
  --focus-ring: #3f4d3a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg);
  color: var(--text-main);
  line-height: 1.65;
}

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

/* Links inside body copy keep a permanent underline so they are
   distinguishable by more than color alone (WCAG 2.2 1.4.1). Navigation,
   buttons, and the logo are exempted below because they are already
   identifiable as interactive controls without an underline. */
a {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-dark);
}

.main-nav a,
.logo,
.btn-primary,
.btn-secondary {
  text-decoration: none;
}

.main-nav a:hover,
.btn-primary:hover,
.btn-secondary:hover {
  text-decoration: none;
}

/* Layout helpers */

.container {
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
}

.narrow {
  max-width: 720px;
  margin: 0 auto;
}

.text-centered {
  text-align: center;
}

/* Visually hidden text for a11y */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until keyboard-focused, then pinned above everything */

.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 100;
  background-color: var(--text-strong);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: 0.5rem;
}


/* =========================================
   HEADER & NAVIGATION
========================================= */

.site-header {
  background-color: var(--bg-alt);
  border-bottom: 1px solid var(--accent-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.logo img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  object-fit: contain;
}

.main-nav {
  position: relative;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  padding: 0;
  margin: 0;
  align-items: center;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  padding-bottom: 0.18rem;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
  text-decoration: none;
}

/* Current-page nav items also carry a persistent, non-color cue (a bullet
   before the label) so the state does not rely on color/underline alone. */
.main-nav a[aria-current="page"]::before {
  content: "\2022";
  display: inline-block;
  margin-right: 0.35rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background-color: var(--text-main);
  display: block;
  position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--text-main);
  position: absolute;
  left: 0;
}

.nav-toggle-bar::before {
  top: -7px;
}

.nav-toggle-bar::after {
  top: 7px;
}


/* =========================================
   GLOBAL TYPOGRAPHY
========================================= */

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  color: var(--text-strong);
}

.section h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section h2 {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.section h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* =========================================
   SECTIONS & GENERAL LAYOUT
========================================= */

.section {
  padding: 2.5rem 0;
  content-visibility: auto;
  contain-intrinsic-size: 600px 100vw;
}

.section.alt {
  background-color: var(--bg-alt);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.25rem;
  align-items: center;
}

.section-photo {
  max-width: 480px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  margin: 0 auto;
}


/* =========================================
   HERO (HOME)
========================================= */

.hero {
  padding: 2.5rem 0 1.5rem;
  background:
    linear-gradient(to bottom, rgba(253, 251, 247, 0.9), rgba(247, 240, 230, 0.96)),
    linear-gradient(135deg, rgba(169, 181, 159, 0.28), rgba(209, 185, 138, 0.12));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.hero h1 {
  font-size: clamp(2rem, 2.6vw + 1rem, 2.7rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

.hero-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-image img {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  border-radius: 20px;
  border: 5px solid rgba(253, 251, 247, 0.9);
  box-shadow: 0 18px 38px rgba(74, 74, 74, 0.16);
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 8px 18px rgba(111, 127, 101, 0.18);
}

.btn-primary:hover {
  background-color: var(--accent-darker);
  border-color: var(--accent-darker);
  color: #fff;
  text-decoration: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-strong);
  /* Darkened from --accent so the button boundary meets the 3:1 non-text
     contrast WCAG 2.2 requires for UI components. */
  border-color: var(--accent-dark);
}

.btn-secondary:hover {
  background-color: rgba(169, 181, 159, 0.14);
  color: var(--accent-dark);
  text-decoration: none;
}


/* =========================================
   HOME – BRAND BELIEF & LISTS
========================================= */

/* Brand-belief block on home */

.brand-belief {
  text-align: center;
}

.brand-belief p {
  margin-top: 1.25rem;
}

.brand-belief-photo {
  max-width: 420px;
}
 
/* Sourdough benefits list */

.sourdough-list {
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}

.sourdough-list li {
  margin-bottom: 0.8rem;
}

.sourdough-list li::marker {
  color: var(--accent-dark);
}


/* =========================================
   OUR BREADS PAGE
========================================= */

.bread-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.bread-card {
  background-color: var(--bg-alt);
  border-radius: 14px;
  padding: 1.3rem;
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.bread-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-soft);
  box-shadow: 0 16px 34px rgba(74, 74, 74, 0.10);
}

.bread-card img {
  width: 100%;
  height: 300px;          /* consistent height */
  object-fit: cover;      /* crops gracefully */
  border-radius: 12px;
  margin-bottom: 0.9rem;
  display: block;
}

.bread-card h2 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.bread-card p {
  margin-bottom: 0.5rem;
}

.price {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent-dark);
}

.price .note {
  font-weight: 500;
  font-size: 0.9rem;
}

.bread-month {
  border-color: var(--accent);
}

.allergen-disclaimer {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-main);
}


/* =========================================
   HOW TO ORDER PAGE
========================================= */

.order-page h1 {
  margin-bottom: 1.75rem;
}

.order-page h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.order-page h2:first-of-type {
  margin-top: 1.25rem; /* keep first section a bit closer to the title */
}

.order-page h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* tighten the phone/email block slightly */
.order-page .contact-lines {
  margin: 1rem 0 1.5rem;
}

/* CTA button at bottom */
.order-page .section-bottom-cta {
  margin-top: 2.5rem;
  text-align: center;
}

.allergen-summary {
  padding-left: 1.1rem;
  margin: 0.75rem 0 1.25rem;
}

.allergen-summary li {
  margin-bottom: 0.4rem;
}

.allergen-note {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  margin-top: 0.1rem;
}


/* =========================================
   REVIEWS / TESTIMONIALS PAGE
========================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.testimonial-card {
  background-color: var(--bg-alt);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  font-size: 0.98rem;
}

.testimonial-name {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Reviews page hero spacing */

.testimonials-hero .section-photo {
  margin-bottom: 1.5rem;
}

.testimonials-hero h1 {
  margin-top: 0;
  font-size: 1.9rem;
  line-height: 1.3;
}

.reviews-permission-note {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-top: 0.5rem;
}

/* Testimonial card typography */

.testimonial-card p {
  margin: 0;
}

.testimonial-card p + .testimonial-name {
  margin-top: 0.75rem;
}


/* =========================================
   RECIPES PAGE
========================================= */

.recipe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
}

/* Recipe hero image */

.recipe-hero-photo {
  max-width: 480px;
  margin: 1.75rem auto 2.25rem;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  display: block;
}

/* Subheading under Ingredients */

.recipe-subhead {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--text-strong);
}

.ingredients-list,
.instructions-list {
  padding-left: 1.25rem;
}


/* =========================================
   ABOUT LISE PAGE
========================================= */

.about-page {
  padding-top: 3.5rem;   /* more room under the nav */
  padding-bottom: 3rem;
}

.about-columns {
  gap: 3rem;             /* more horizontal breathing room */
}

.about-page h1 {
  font-size: 2.2rem;     /* slightly smaller for better balance */
  margin-bottom: 1rem;
  line-height: 1.2;
  color: var(--text-strong);
}

.about-page .text-column p {
  margin-bottom: 1.45rem;
  font-size: 1.08rem;
  line-height: 1.75;
}

.about-page .image-column img {
  width: 100%;
  max-width: 480px;      /* a bit smaller than full column */
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  display: block;
  margin: 0 auto;
}

.about-page .text-column {
  margin-top: 1.25rem;
}


/* =========================================
   CONTACT PAGE
========================================= */

.contact-page {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.contact-page h1 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 2rem;
  line-height: 1.25;
}

.contact-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.75rem;
  font-size: 1.07rem;
  line-height: 1.6;
}

.contact-card {
  background-color: var(--bg-alt);
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  padding: 1.7rem 1.9rem;
  margin: 0 auto 2.25rem;
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.contact-card p {
  margin-bottom: 0.9rem;
}

.contact-card strong {
  font-weight: 600;
  color: var(--text-strong);
}

.contact-card .contact-lines {
  margin-bottom: 1.2rem;
}

.contact-links {
  text-align: center;
  margin-top: 2rem;
}

.contact-links p {
  margin-bottom: 0.5rem;
  font-size: 1.02rem;
}


/* =========================================
   BUSINESS INFO PAGE
========================================= */

.business-page {
  padding-top: 3.25rem;
}

.business-block h1,
.business-block h2 {
  margin-bottom: 1.1rem;
}

.business-block + .business-block {
  margin-top: 2.75rem;
}

/* keep both images at a comfortable, matching width on larger screens */

.business-page .section-photo {
  max-width: 520px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  margin-bottom: 0; /* spacing comes from .business-block */
}


/* =========================================
   CTA STRIP (HOME)
========================================= */

.cta-strip {
  background-color: var(--bg-alt);
  color: var(--text-main);
  border-top: 1px solid var(--accent-border);
  border-bottom: 1px solid var(--accent-border);
}

.cta-strip h2 {
  color: var(--text-strong);
}

.cta-strip-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.cta-strip .btn-primary {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(111, 127, 101, 0.18);
}

.cta-strip .btn-primary:hover {
  background-color: var(--accent-darker);
  border-color: var(--accent-darker);
  color: #fff;
}

.cta-strip .btn-secondary {
  color: var(--text-strong);
  border-color: var(--accent-dark);
}

.cta-strip .btn-secondary:hover {
  background-color: rgba(169, 181, 159, 0.14);
  color: var(--accent-dark);
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
  background-color: var(--accent);
  border-top: 1px solid rgba(57, 65, 52, 0.28);
  padding: 1.75rem 0 2.25rem;
  margin-top: 2rem;
  color: #394134;
}

.footer-inner {
  text-align: center;
}

.footer-brand {
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: #394134;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin: 0.75rem 0;
}

.footer-copy {
  font-size: 0.85rem;
  color: #394134;
}

.site-footer a {
  color: #394134;
}

.site-footer a:hover {
  color: #2f352c;
}

.site-footer a:focus-visible {
  outline-color: #394134;
}


/* =========================================
   ACCESSIBILITY
========================================= */

/* Darkened from --accent to --focus-ring so the focus indicator meets the
   3:1 non-text contrast WCAG 2.2 requires against the surrounding page. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.nav-toggle:focus-visible .nav-toggle-bar,
.nav-toggle:focus-visible .nav-toggle-bar::before,
.nav-toggle:focus-visible .nav-toggle-bar::after {
  background-color: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================
   GLOBAL RESPONSIVE (<= 768px)
========================================= */

@media (max-width: 768px) {

  /* ---- Global spacing & layout ---- */

  .section {
    padding: 2.25rem 0;
  }

  .two-column {
    display: block;
  }

  .section-photo {
    max-width: 360px;
  }

  .logo img {
    height: 70px;
    width: 70px;
  }

  /* ---- Mobile nav ---- */

  .main-nav ul {
    /* Anchored to the nav element (not the header) and offset below its own
       bottom edge, so the open menu never overlaps the logo/toggle row
       regardless of header height. */
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    background-color: var(--bg-alt);
    flex-direction: column;
    padding: 0.75rem 1rem 1rem;
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    display: none;
    min-width: 200px;
    max-width: calc(100vw - 2rem);
  }

  .main-nav ul.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* larger tap target */
    height: 44px;
    touch-action: manipulation;
  }

  /* ---- Hero (home) ---- */

  .hero {
    padding: 2rem 0 1.25rem;
  }

  .hero-grid {
    display: flex;
    flex-direction: column; /* text then image */
    gap: 1.75rem;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero-actions {
    justify-content: center;
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .hero-image img {
    max-width: 260px;
    width: 100%;
    margin: 0 auto 1.25rem;
    border-radius: 22px;
  }

  .brand-belief .section-photo,
  .brand-belief-photo {
    max-width: 260px;
    width: 100%;
    margin: 1.5rem auto 0;
    border-radius: 20px;
  }

  .cta-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---- Reviews page ---- */

  .testimonials-hero h1 {
    font-size: 1.7rem;
  }

  .testimonial-card {
    padding: 1.1rem 1.3rem;
    font-size: 0.96rem;
  }

  /* ---- Recipes page ---- */

  .recipe-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }

  .recipe-hero-photo {
    max-width: 340px;
    margin: 1.5rem auto 2rem;
    border-radius: 18px;
  }

  .recipe-page h2:first-of-type,
  .recipe-page h1 + .recipe-hero-photo + h2 {
    margin-top: 1.75rem !important;
  }

  /* ---- About Lise page ---- */

  .about-page {
    padding-top: 2.5rem;
  }

  .about-columns {
    display: block;
  }

  .about-page .image-column img {
    max-width: 340px;        /* smaller on phones */
    margin: 0 auto 1.75rem;  /* space beneath the image */
  }

  .about-page .text-column {
    padding: 0 1rem;
  }

  /* ---- Contact page ---- */

  .contact-page {
    padding-top: 2.25rem;
  }

  .contact-card {
    padding: 1.4rem 1.3rem;
    margin-bottom: 2rem;
    font-size: 1rem;
  }

  .contact-links p {
    font-size: 0.97rem;
  }

  /* ---- Business info page ---- */

  .business-page {
    padding-top: 2.5rem;
  }

  .business-block + .business-block {
    margin-top: 2.25rem;
  }

  .business-page .section-photo {
    max-width: 260px;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
  }

  /* ---- How to Order page (mobile tuning) ---- */

  .order-page h1 {
    font-size: 1.7rem;
    line-height: 1.25;
  }

  .order-page h2 {
    font-size: 1.35rem;
    margin-top: 1.75rem;
    margin-bottom: 0.4rem;
  }

  .order-page h3 {
    font-size: 1.15rem;
    margin-top: 1.4rem;
  }

  .order-page p {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1rem;
  }

  .order-page ul {
    padding-left: 1.1rem;
    margin-bottom: 1rem;
  }

  .order-page ul li {
    margin-bottom: 0.55rem;
  }

  .order-page .narrow {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .order-page h2 + p,
  .order-page h3 + p {
    margin-top: 0.3rem;
  }

  .order-page .section-bottom-cta {
    margin-top: 2rem;
  }
}