/* ==========================================================================
   Fox Bakehouse - shared stylesheet

   Design decisions on this site were made by Ethan Barnacoat.
   Recorded in DESIGN.md. This file only implements them.

   Palette : deep green / cream / antique gold
   Type    : Fraunces (headings) + DM Sans (body)
   Density : balanced
   Photos  : full colour, except the hero which is darkened so text reads
   ========================================================================== */

:root {
  /* --- Colour palette --------------------------------------------------- */
  --cream:      #F7F2E7;   /* page background */
  --cream-deep: #EFE7D6;   /* alternating section background */
  --ink:        #1F2A20;   /* body text - deep green-black */
  --ink-soft:   #4C5B4E;   /* secondary text */
  --green:      #2F4A38;   /* brand colour */
  --green-dark: #223729;   /* hover / darker panels */
  --gold:       #C9A227;   /* accent */
  --gold-soft:  #E3C976;   /* accent on dark backgrounds */
  --line:       #DCD3BF;   /* hairline borders */

  /* --- Type ------------------------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 52px);
  --radius: 10px;
  --shadow: 0 16px 36px -22px rgba(31, 42, 32, .55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.05em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Small all-caps label above headings, used for section rhythm */
.eyebrow {
  font-size: .73rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 .85rem;
}
.eyebrow.on-dark { color: var(--gold-soft); }

.lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 62ch; }
.section-dark .lede { color: #C6D0C4; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: .93rem;
  padding: .9rem 1.6rem;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); color: var(--ink); }
.btn-ghost { border-color: var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--cream); }
.btn-ghost-light { border-color: rgba(247,242,231,.75); color: #fff; }
.btn-ghost-light:hover { background: var(--cream); color: var(--ink); }

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 242, 231, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 76px;
}

/* Wordmark only - no symbol. This was a deliberate choice, see DESIGN.md. */
.brand { display: flex; flex-direction: column; line-height: 1; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.brand-sub {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 5px;
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 500;
  padding: .3rem 0;
  position: relative;
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width .22s ease;
}
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav a.active { color: var(--ink); font-weight: 700; }
.nav .btn { padding: .65rem 1.25rem; }
.nav .btn::after { display: none; }
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { color: #fff; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--ink); margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero - the only photo on the site that gets darkened, so that white
   headline text sitting on top of it stays readable.
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(74vh, 620px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Green wash + bottom-weighted gradient. Two layers: the flat tint ties the
   photo to the palette, the gradient guarantees contrast under the text. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(31,42,32,.92) 0%, rgba(31,42,32,.62) 45%, rgba(31,42,32,.32) 100%),
    rgba(47,74,56,.30);
}
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5rem); width: 100%; }
.hero h1 { color: #fff; max-width: 16ch; margin-bottom: .3em; }
.hero p { color: rgba(255,255,255,.9); max-width: 52ch; font-size: 1.12rem; }
.hero .eyebrow { color: var(--gold-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Fact strip sitting directly under the hero */
.facts { background: var(--green); color: var(--cream); }
.facts .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 2rem;
}
.facts strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--gold-soft);
  margin-bottom: .1rem;
}
.facts span { font-size: .85rem; color: #C6D0C4; }

/* ==========================================================================
   Section rhythm
   ========================================================================== */
section { padding-block: clamp(3.2rem, 6.5vw, 5.2rem); }
.section-dark { background: var(--green); color: var(--cream); }
.section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark p { color: #C6D0C4; }
.section-tint { background: var(--cream-deep); }

.section-head { max-width: 64ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Photo cards - full colour, no tint
   ========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; align-items: center; }

.pcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pcard img { width: 100%; height: 210px; object-fit: cover; }
.pcard .body { padding: 1.4rem 1.5rem 1.6rem; }
.pcard h3 { margin-bottom: .35rem; }
.pcard p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Plain photo with rounded corners, used in split sections */
.photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.tall img { aspect-ratio: 4 / 5; }
.photo.wide img { aspect-ratio: 3 / 2; }

/* ==========================================================================
   Featured product (the apple strudel)
   ========================================================================== */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 3.6rem); align-items: center; }
.feature-stack { display: grid; gap: 1.1rem; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.feature-stack .photo:first-child { grid-row: span 2; }

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: .35rem .95rem;
  border-radius: 3px;
  font-size: .93rem;
  margin-bottom: 1.1rem;
}

.ticks { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; color: var(--ink-soft); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}
.section-dark .ticks li { color: #C6D0C4; }

/* ==========================================================================
   Comparison table - Fox Bakehouse against a supermarket strudel.
   Laid out like a pricing-plan comparison: the two products across the top,
   the questions down the left, a tick or a cross in each cell.
   Built as a real <table> so it still makes sense to a screen reader.
   ========================================================================== */
.compare-wrap { overflow-x: auto; }

.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 560px;          /* below this it scrolls rather than squashing */
}

.compare th, .compare td { padding: 1rem 1.1rem; text-align: left; }

/* Column headers: the two products being compared */
.compare thead th { vertical-align: bottom; border-bottom: 2px solid var(--line); }
.compare thead th:first-child { width: 46%; }
.compare thead th.us, .compare thead th.them { text-align: center; width: 27%; }

.compare .col-name {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}
.compare .col-note {
  display: block;
  font-size: .76rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: .25rem;
}
/* The bakehouse column is the one we are arguing for, so it is emphasised */
.compare thead th.us { background: var(--green); color: #fff; }
.compare thead th.us .col-name { color: #fff; }
.compare thead th.us .col-note { color: #C6D0C4; }
.compare tbody td.us { background: rgba(47,74,56,.055); }

.compare tbody tr { border-bottom: 1px dashed var(--line); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare tbody th {
  font-weight: 500;
  font-size: .97rem;
  color: var(--ink);
  font-family: var(--body);
}
.compare tbody td { text-align: center; }

/* Tick and cross drawn in CSS so there is no icon font to load */
.mark {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
}
.mark.yes { background: var(--green); color: #fff; }
.mark.no  { background: #E6DED0; color: #8A8878; }

/* Honest note under the table - one row where the supermarket genuinely wins */
.compare-note {
  font-size: .86rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 68ch;
}

@media (max-width: 620px) {
  .compare th, .compare td { padding: .8rem .7rem; }
  .compare tbody th { font-size: .9rem; }
}

/* ==========================================================================
   Menu list
   ========================================================================== */
.menu-group { margin-bottom: 3rem; }
.menu-group h3 {
  font-family: var(--body);
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 1.2rem;
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .9rem 0;
  border-bottom: 1px dashed var(--line);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item .name { font-weight: 700; font-size: 1.02rem; }
.menu-item .desc { color: var(--ink-soft); font-size: .91rem; margin: .12rem 0 0; }
.menu-item .price { font-family: var(--display); font-size: 1.12rem; color: var(--green); font-weight: 600; white-space: nowrap; }
/* The apple strudel is highlighted so it reads as the featured product */
.menu-item.star {
  background: linear-gradient(90deg, rgba(201,162,39,.16), transparent 72%);
  border-radius: 6px;
  padding-inline: .9rem;
  border-bottom-color: transparent;
}
.pill {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 3px;
  margin-left: .5rem;
  vertical-align: middle;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s ease; }
.tile:hover { box-shadow: var(--shadow); }
.tile:hover img { transform: scale(1.05); }
.tile.wide { grid-column: span 2; }
.tile.wide img { aspect-ratio: 8 / 3; }
.tile.tall img { aspect-ratio: 3 / 4; }
/* Caption panel only appears at the bottom of the tile, so the food itself
   is never covered up */
.tile-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(31,42,32,.88));
  color: #fff;
  font-weight: 600;
  font-size: .93rem;
}
.tile-cap small { display: block; font-weight: 400; opacity: .82; font-size: .78rem; margin-top: .1rem; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.quote {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(247,242,231,.16);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
}
.stars { color: var(--gold-soft); letter-spacing: .16em; margin-bottom: .8rem; font-size: .92rem; }
.quote p { font-size: .99rem; }
.quote cite { font-style: normal; font-weight: 700; font-size: .86rem; color: var(--gold-soft); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.info-block h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.info-block p { color: var(--ink-soft); font-size: .95rem; }

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours .day { color: var(--ink-soft); }
.hours .time { font-weight: 700; }
.hours li.closed .time { color: var(--ink-soft); font-weight: 500; }

/* The enquiry form is visual only - see the note beneath it and main.js */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: 1rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.field textarea { min-height: 125px; resize: vertical; }
.form-note { font-size: .83rem; color: var(--ink-soft); margin: 0; }

.map-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--cream-deep); }
.map-card svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Page banner (every page except home)
   ========================================================================== */
.page-head {
  position: relative;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
}
.page-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,42,32,.93), rgba(31,42,32,.55));
}
.page-head .wrap { position: relative; z-index: 2; padding-block: 2.6rem; width: 100%; }
.page-head h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: .25em; }
.page-head p { color: rgba(255,255,255,.88); max-width: 56ch; margin: 0; }
.page-head .eyebrow { color: var(--gold-soft); }

/* ==========================================================================
   Call to action strip
   ========================================================================== */
.cta-strip { background: var(--green-dark); color: #fff; text-align: center; }
.cta-strip h2 { color: #fff; }
.cta-strip p { color: rgba(255,255,255,.88); max-width: 54ch; margin-inline: auto; }
.cta-strip .hero-actions { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #17211A; color: #A8B4A7; padding-block: 3.2rem 1.8rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.2rem; }
.site-footer h4 {
  color: var(--cream);
  font-family: var(--body);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.site-footer a { color: #A8B4A7; }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer .brand-name { color: var(--cream); }
.site-footer .brand-sub { color: #7C8A7D; }
.footer-bottom {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247,242,231,.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .79rem;
  color: #7C8A7D;
}
/* States plainly that this is a student concept campaign */
.disclaimer { max-width: 60ch; font-size: .77rem; line-height: 1.55; color: #7C8A7D; }

/* ==========================================================================
   Scroll reveal (content still shows if JavaScript is off)
   ========================================================================== */
/* The scroll fade-in was removed deliberately.

   A CSS opacity transition that starts while the tab is throttled or hidden
   can stall part-way and leave a whole section permanently invisible - which
   is exactly what happened here during testing. On a site that is going to be
   marked, content that is reliably visible is worth more than a fade, so the
   "reveal" class is now inert and every section renders immediately.

   The class is left on the markup so the effect can be reinstated later by
   changing this one block, without touching any of the pages. */
.reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .grid-3, .quotes, .info-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .facts .wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: .8rem var(--gutter) 1.4rem;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: .9rem; justify-content: center; border-bottom: 0; }
  .feature, .grid-2 { grid-template-columns: 1fr; }
  .hero { min-height: 60vh; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-3, .quotes, .info-grid, .gallery, .footer-grid, .facts .wrap { grid-template-columns: 1fr; }
  .tile.wide { grid-column: span 1; }
  .tile.wide img { aspect-ratio: 4 / 3; }
  .feature-stack { grid-template-columns: 1fr; }
  .feature-stack .photo:first-child { grid-row: auto; }
  .menu-item { grid-template-columns: 1fr; }
  .menu-item .price { margin-top: .25rem; }
}

/* ==========================================================================
   Print
   Markers may print or save this site as a PDF. The scroll-reveal sections
   are hidden until JavaScript shows them, which would print as blank pages,
   so printing forces everything visible and drops decorative backgrounds.
   ========================================================================== */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
  .nav-toggle { display: none; }
  .hero, .page-head { min-height: auto; }
  .tile:hover img, .pcard:hover { transform: none; }
  a { text-decoration: underline; }
}

/* Visually hidden, still read out by screen readers (used for table captions) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}