/* beasel's bakery site. Color, type and spacing come from design-system/tokens.css;
   tests/check-tokens.mjs fails the build on any other value. */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
}

h1, h2, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--text-accent); }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.container {
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.measure { max-width: 704px; text-align: center; }

/* Sections alternate surface-page and surface-band, starting with the band hero. */
.section { padding-block: var(--space-12); }
.section--page { background: var(--surface-page); }
.section--band { background: var(--surface-band); }
.section__title { margin-bottom: var(--space-8); }

/* Hero */
.hero { padding-bottom: var(--space-12); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
/* The logo and title are centered in the text column. The logo file has about 20% clear space on each side, so centering the box centers the art. */
.hero__logo { width: 300px; align-self: center; }
.hero h1 { align-self: center; text-align: center; }
/* The buttons stack at one shared width. They are centered on phones and tablets, and line up with the intro on desktop. */
.hero__actions { display: flex; flex-direction: column; gap: var(--space-4); align-self: center; }
.hero__media { display: grid; gap: var(--space-6); }
.hero__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }

/* Bakes gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.gallery figcaption { margin-top: var(--space-3); font-weight: 700; }

/* Stay tuned */
.soon__sprinkles { margin-top: var(--space-8); }

/* Instagram and TikTok feeds. The embeds are frames with their own white card styling. */
.feeds-section { text-align: center; }
.feeds { display: grid; gap: var(--space-8); justify-items: center; align-items: start; }
/* position: relative keeps Instagram's frame inside its column while the embed starts up. */
.feed { position: relative; width: 100%; max-width: 540px; }
.feed blockquote { margin: 0; }

/* The footer card sits on a surface-page strip so it does not merge into the feeds band above it. */
.footer-strip { background: var(--surface-page); padding-block: var(--space-12); }

/* Wholesale page. The banner art has its own blush-300 ground, so it blends into the band. */
.banner { padding-bottom: var(--space-6); }
.banner__link { display: block; }
.wholesale__title { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Google Forms cannot tell the page its height, so the frame gets a fixed height per screen width.
   Each height is the form's measured height at the narrowest width in its range, plus room to spare.
   The form's ground is transparent, so the spare room shows as page pink. */
.inquiry-form { display: block; width: 100%; max-width: 640px; height: 5580px; margin-inline: auto; border: 0; }
/* The form needs about 335px of width, so on phones under 375px the frame takes 8px of each page gutter. */
@media (max-width: 374px) { .inquiry-form { width: calc(100% + 2 * var(--space-2)); margin-inline: calc(-1 * var(--space-2)); } }
@media (min-width: 375px) { .inquiry-form { height: 5620px; } }
@media (min-width: 414px) { .inquiry-form { height: 5220px; } }
@media (min-width: 600px) { .inquiry-form { height: 4580px; } }

/* The nav bar sits at the very top of every page, inside the page's top band. On the gallery and link pages that band
   runs to the bottom of the screen. */
.site-header { padding-block: var(--space-4); }
.band-page { background: var(--surface-band); }

/* Nav bar: a surface-page pill on the band. The links sit in a menu card that the menu button opens, at every screen
   width. The logo copies in img/ have a transparent ground, so the brand chip drops the bundle's blush-300 fill. */
.site-nav { position: relative; justify-content: space-between; background: var(--surface-page); }
.site-nav .bb-nav__brand { background: transparent; }
.site-nav .bb-nav__cat { height: 48px; }
/* margin-left: auto keeps the button at the right end on pages whose bar has no logo (home and wholesale). */
.site-nav__toggle {
  display: grid; place-items: center; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-primary); cursor: pointer;
}
.site-nav__toggle:hover, .site-nav__toggle[aria-expanded="true"] { background: var(--surface-band); }
/* Home and wholesale have no logo in the bar, so the bar itself is hidden and only the button shows, as a
   surface-page circle in the same spot. The bar keeps its padding so the button does not move. */
.site-nav:not(:has(.bb-nav__brand)) { background: transparent; }
.site-nav:not(:has(.bb-nav__brand)) .site-nav__toggle { background: var(--surface-page); }
.site-nav:not(:has(.bb-nav__brand)) .site-nav__toggle:hover,
.site-nav:not(:has(.bb-nav__brand)) .site-nav__toggle[aria-expanded="true"] { background: var(--surface-card); }
.site-nav__toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__icon-open,
.site-nav__toggle[aria-expanded="false"] .site-nav__icon-close { display: none; }
.site-nav__menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 200px; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
}
.site-nav__menu[hidden] { display: none; }
.site-nav__menu .bb-nav__link { display: block; padding: var(--space-3) var(--space-4); }
.site-nav__menu .bb-nav__link:hover, .site-nav__menu .bb-nav__link[aria-current="page"] { background: var(--surface-page); }

/* Gallery grid: 3 columns on phones, 5 on tablets, 7 on desktop. The counts are odd on purpose. Every mostly brown
   photo is at an even position in the list, and with an odd column count two even positions never sit side by side
   or one above the other. tests/gallery.spec.mjs checks the order at each count. */
.photo-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }

/* Link page: the logo in a white circle, then one stack of matching buttons. */
.link-hub { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 480px; text-align: center; }
.link-hub__avatar { display: grid; place-items: center; width: 128px; height: 128px; overflow: hidden; border-radius: var(--radius-pill); background: var(--white); }
.link-hub__avatar img { width: 88%; }
.link-hub__links { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
/* The same padding on both sides keeps every label centered, with room for an icon on the left. */
.link-btn { position: relative; width: 100%; padding-inline: var(--space-12); }
.link-btn__icon { position: absolute; left: var(--space-4); top: 50%; translate: 0 -50%; }

/* 404 page: the logo, which links home, and a short note, centered on the band. */
.not-found { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.not-found__logo { width: 300px; }
.not-found h1 { text-wrap: balance; }

@media (max-width: 639px) {
  .display-xl { font-size: 44px; line-height: 50px; }
  .gallery figcaption { font-size: 18px; line-height: 28px; }
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
  .section { padding-block: var(--space-16); }
  .hero { padding-bottom: var(--space-24); }
  .footer-strip { padding-block: var(--space-16); }
  .banner { padding-bottom: var(--space-8); }
  .inquiry-form { height: 4440px; }
  .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .photo-grid img { border-radius: var(--radius-lg); }
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .hero__logo { width: 400px; }
  .hero__actions { align-self: flex-start; }
  .feeds { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .photo-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}