/* =========================================================
   TRUE COOKIES — "Bakery" look
   Loaded after style.css. Same colors and content; this file
   only changes the feel: awning, gingham, labels, polaroids.
   Delete the <link> to this file in the pages to go back to
   the original look.
   ========================================================= */

/* ---------- Softer, cozier headline letters ---------- */
h1, h2, h3, h4, .logo, .menu-item-price, .mi-price {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
h1 { font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Paper-ish page background ---------- */
body {
  background-color: var(--cream);
  background-image: radial-gradient(rgba(123,45,62,0.05) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---------- Bakery awning across the top ---------- */
.site-header { border-bottom: none; background: rgba(251,243,230,0.97); box-shadow: 0 6px 14px -10px rgba(59,42,40,0.35); }
.site-header::before {
  content: "";
  display: block;
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--burgundy) 0 32px, #FFFDF9 32px 64px);
  -webkit-mask:
    linear-gradient(#000, #000) top left / 100% 10px no-repeat,
    radial-gradient(circle at 16px 0, #000 15.5px, transparent 16px) bottom left / 32px 16px repeat-x;
  mask:
    linear-gradient(#000, #000) top left / 100% 10px no-repeat,
    radial-gradient(circle at 16px 0, #000 15.5px, transparent 16px) bottom left / 32px 16px repeat-x;
  filter: drop-shadow(0 2px 0 rgba(123,45,62,0.22));
}
.nav-inner { padding-top: 6px; padding-bottom: 10px; }
.logo-img { height: 66px; }
.nav-links a { font-family: var(--font-body); letter-spacing: 0.01em; }
.nav-links a:hover, .nav-links a.active { border-color: var(--burgundy); }
@media (max-width: 820px) { .site-header::before { height: 20px; -webkit-mask-size: 100% 7px, 32px 13px; mask-size: 100% 7px, 32px 13px; } }

/* ---------- Gingham hero ---------- */
.hero {
  background-color: #FBF3E6;
  background-image:
    linear-gradient(rgba(243,213,136,0.30) 50%, transparent 50%),
    linear-gradient(90deg, rgba(243,213,136,0.30) 50%, transparent 50%);
  background-size: 44px 44px;
}
.hero h1 { text-shadow: 0 2px 0 rgba(255,253,249,0.9); }
.hero .slogan { background: #FFFDF9; display: inline-block; padding: 4px 18px; border-radius: 26px; box-shadow: 0 2px 0 rgba(123,45,62,0.15); }
.hero-inner > div:first-child p { background: rgba(255,253,249,0.82); padding: 14px 18px; border-radius: 14px; }

/* hero photos: a scattered table of polaroids */
@media (min-width: 901px) { .hero-inner { grid-template-columns: 0.95fr 1.05fr; } }
.hero-collage { height: 540px; }
.hero-collage .hero-img { background: #FFFDF9; padding: 9px; border-radius: 4px; box-shadow: 0 14px 26px -12px rgba(59,42,40,0.5); border: none; }
.hero-collage .hero-img img { border-radius: 2px; }
.hero-collage .hi-a { width: 38%; height: 60%; left: 31%; top: 0;   right: auto; bottom: auto; z-index: 2; transform: rotate(2deg); }
.hero-collage .hi-b { width: 30%; height: 40%; left: 0;   top: 7%;  right: auto; bottom: auto; z-index: 3; transform: rotate(-5deg); }
.hero-collage .hi-c { width: 30%; height: 40%; right: 0;  top: 5%;  left: auto;  bottom: auto; z-index: 3; transform: rotate(4deg); }
.hero-collage .hi-d { width: 31%; height: 41%; left: 3%;  bottom: 0; right: auto; top: auto;  z-index: 4; transform: rotate(3deg); }
.hero-collage .hi-e { width: 33%; height: 37%; left: 33%; bottom: 1%; right: auto; top: auto; z-index: 4; transform: rotate(-2.5deg); }
.hero-collage .hi-f { width: 31%; height: 41%; right: 1%; bottom: 0; left: auto; top: auto;  z-index: 4; transform: rotate(-3.5deg); }
.hero-collage .hi-a::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 80px; height: 22px; margin-left: -40px;
  background: rgba(243,213,136,0.88); transform: rotate(-3deg); z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.hero-collage .hi-d::before, .hero-collage .hi-c::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 56px; height: 18px; margin-left: -28px;
  background: rgba(169,203,218,0.9); transform: rotate(4deg); z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.hero-collage .ph-badge { top: 49%; bottom: auto; right: auto; left: 50%; margin-left: -55px; z-index: 6; transform: rotate(-8deg); }
@media (max-width: 900px) {
  .hero-collage { height: 440px; margin-top: 24px; }
  .hero-collage .hero-img { padding: 6px; }
}
@media (max-width: 480px) { .hero-collage { height: 360px; } .hero-collage .ph-badge { transform: rotate(-8deg) scale(0.8); } }

/* ---------- Sections ---------- */
.section-alt { background-color: var(--powder-blue-soft); }
.section-head h2::after {
  content: ""; display: block; width: 132px; height: 16px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 16'%3E%3Crect x='6' y='5' width='16' height='6' rx='3' fill='%237B2D3E' transform='rotate(-30 14 8)'/%3E%3Crect x='30' y='5' width='16' height='6' rx='3' fill='%23F3D588' transform='rotate(25 38 8)'/%3E%3Crect x='54' y='5' width='16' height='6' rx='3' fill='%23A9CBDA' transform='rotate(-15 62 8)'/%3E%3Crect x='78' y='5' width='16' height='6' rx='3' fill='%237B2D3E' transform='rotate(35 86 8)'/%3E%3Crect x='102' y='5' width='16' height='6' rx='3' fill='%23F3D588' transform='rotate(-25 110 8)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-burgundy { position: relative; }
.section-burgundy::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 16px;
  background: radial-gradient(circle at 16px 0, var(--cream) 15.5px, transparent 16px) repeat-x; background-size: 32px 16px;
}
.section-burgundy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,0.05) 50%, transparent 50%);
  background-size: 40px 40px;
}
.section-burgundy .container { position: relative; z-index: 1; }

/* ---------- Cards: stitched bakery labels ---------- */
.card { position: relative; border: 2px solid rgba(123,45,62,0.14); border-radius: 18px; background: #FFFDF9; }
.card::after {
  content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(123,45,62,0.28); border-radius: 13px; pointer-events: none;
}
a.card-link:hover { transform: translateY(-5px) rotate(-0.6deg); }
.card .badge { background: var(--soft-yellow); color: var(--burgundy-dark); }
.info-card > svg { width: 64px; height: 64px; padding: 15px; background: var(--soft-yellow); border-radius: 50%; color: var(--burgundy); box-shadow: 0 3px 0 rgba(123,45,62,0.18); }
.contact-grid .info-card:nth-child(2) > svg { background: var(--powder-blue); }
.contact-grid .info-card:nth-child(3) > svg { background: #F4D6DA; }

/* ---------- Buttons: chunky "press me" ---------- */
.btn { font-weight: 800; letter-spacing: 0.01em; }
.btn-primary { box-shadow: 0 4px 0 var(--burgundy-dark); }
.btn-primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--burgundy-dark); }
.btn-secondary { box-shadow: 0 4px 0 rgba(123,45,62,0.35); }
.btn-secondary:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(123,45,62,0.35); }
.nav-cta { box-shadow: 0 3px 0 var(--burgundy-dark); }

/* ---------- Photos: white-border snapshots ---------- */
.gallery-photo { border: 8px solid #FFFDF9; border-radius: 4px; box-shadow: 0 10px 22px -12px rgba(59,42,40,0.5); }
.gallery-grid.uniform { gap: 26px; }
.gallery-grid.uniform .gallery-photo:nth-child(3n+1) { transform: rotate(-1.4deg); }
.gallery-grid.uniform .gallery-photo:nth-child(3n+2) { transform: rotate(1deg); }
.gallery-grid.uniform .gallery-photo:nth-child(3n) { transform: rotate(-0.5deg); }
.gallery-grid.uniform .gallery-photo:hover { transform: rotate(0) scale(1.03); z-index: 2; }
a.card-link .gallery-photo { border-width: 6px; }
.mini-photo { border: 6px solid #FFFDF9; border-radius: 4px; }
@media (max-width: 560px) { .gallery-grid.uniform { gap: 14px; } .gallery-photo { border-width: 5px; } }

/* ---------- Menu: printed bakery menu card ---------- */
#menu-mount {
  position: relative; background: #FFFDF9; padding: 48px 44px 20px; border-radius: 10px;
  border: 2px solid rgba(123,45,62,0.18); box-shadow: 0 18px 36px -20px rgba(59,42,40,0.4);
  max-width: 860px; margin: 0 auto;
}
#menu-mount::before {
  content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(123,45,62,0.3); border-radius: 6px; pointer-events: none;
}
.menu-category h3 {
  display: flex; align-items: center; gap: 16px; justify-content: center; text-align: center;
  font-size: 1.7rem; border-bottom: none; margin-bottom: 8px;
}
.menu-category h3::before, .menu-category h3::after { content: ""; flex: 1; border-top: 2px dotted rgba(123,45,62,0.4); }
.menu-item { display: block; padding: 12px 0; border-bottom: none; }
.mi-top { display: flex; align-items: baseline; gap: 8px; }
.mi-name { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.mi-dots { flex: 1; border-bottom: 2px dotted rgba(123,45,62,0.35); transform: translateY(-4px); min-width: 20px; }
.mi-price { font-weight: 800; color: var(--burgundy); white-space: nowrap; font-family: var(--font-display); }
.mi-desc { color: var(--ink-soft); font-size: 0.92rem; margin-top: 2px; font-style: italic; }
@media (max-width: 560px) { #menu-mount { padding: 36px 22px 10px; } .menu-category h3 { font-size: 1.4rem; } }

/* ---------- Flavor tags ---------- */
.flavor-chip { border: 2px dashed var(--burgundy); background: #FFFDF9; font-family: var(--font-display); font-weight: 600; box-shadow: 0 3px 0 rgba(123,45,62,0.18); }
.flavor-chip:nth-child(3n+1) { transform: rotate(-2deg); background: #FFF6D8; }
.flavor-chip:nth-child(3n+2) { transform: rotate(1.5deg); background: #EAF3F8; }
.flavor-chip:nth-child(3n) { transform: rotate(-0.8deg); background: #FBE9EC; }

/* ---------- Steps ---------- */
.step-num { box-shadow: 0 3px 0 rgba(123,45,62,0.25); border: 2px dashed var(--burgundy); }

/* ---------- Footer ---------- */
.site-footer { position: relative; }
.footer-grid h4 { font-family: var(--font-script); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 560px) { .hero .slogan { font-size: 1.6rem; line-height: 1.25; } }

.menu-note { text-align: center; font-weight: 700; color: var(--burgundy); margin: 4px 0 12px; font-size: 1rem; }

/* Gallery: portrait tiles so people and tall cakes are not cut off */
.gallery-grid.uniform .gallery-photo { aspect-ratio: 3 / 4; }