/*
Theme Name: Bonami Bakery
Theme URI: https://bonami-bakery.com
Author: Bonami Bakery
Author URI: https://bonami-bakery.com
Description: Editorial single-page theme for Bonami Bakery — Pittsburg, CA. Features a hero, 14-category menu, Schools Menu section with 5 catalog pages, and a dark footer. Sharp-edged design on warm cream with italic terracotta accents. Uses Cormorant Garamond + Outfit via Google Fonts.
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: bonami-bakery
Tags: bakery, editorial, single-page, restaurant, menu, food
*/

:root{
  --bg:#FAF9F6; --ink:#2C2A29; --muted:#7A7571; --accent:#C25E24;
  --border:#E6E2D8; --surface:#FFFFFF;
  --serif:"Cormorant Garamond",serif; --sans:"Outfit",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1360px;margin:0 auto;padding:0 28px}

/* HEADER */
.site-header{position:sticky;top:0;z-index:30;background:rgba(250,249,246,.78);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border)}
.site-header .row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.logo{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)}
.logo b{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:-.01em;line-height:1}
.logo span{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
nav{display:flex;align-items:center;gap:28px;font-size:14px}
nav a{text-decoration:none;opacity:.85}
.order-cta{padding:10px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:all .18s}
.order-cta:hover{background:var(--ink);color:var(--bg)}

/* HERO */
.hero{padding:72px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
h1{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;line-height:1.02;letter-spacing:-.02em;font-size:clamp(48px,7vw,92px)}
h1 .it,.it{font-style:italic;color:var(--accent)}
.lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:520px;margin-top:32px}
.ctas{display:flex;gap:24px;align-items:center;margin-top:40px;flex-wrap:wrap}
.btn-dark{padding:16px 28px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:all .18s}
.btn-dark:hover{background:var(--bg);color:var(--ink)}
.text-link{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:3px;text-decoration:none;color:var(--ink)}
.hero-img{position:relative}
.hero-img .frame{overflow:hidden;aspect-ratio:4/5;background:#eee}
.hero-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hero-img img:hover{transform:scale(1.04)}
.badge{position:absolute;left:-20px;bottom:32px;background:var(--surface);border:1px solid var(--border);padding:18px 22px;max-width:220px;font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.25;box-shadow:0 12px 40px rgba(44,42,41,.08)}
.badge .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.badge .em{font-style:italic;color:var(--accent);font-size:17px}

/* MENU */
.menu{padding:80px 0 40px;background:var(--bg)}
.menu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:16px}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,72px);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1}
.menu-blurb{font-size:14px;color:var(--muted);max-width:360px;margin:0;line-height:1.7}
.cat{padding:64px 0;border-top:1px solid var(--border)}
.cat-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:56px}
.cat-img{overflow:hidden;aspect-ratio:4/3;background:#eee;margin-bottom:20px}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-img img:hover{transform:scale(1.04)}
.cat-num{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cat h3{font-family:var(--serif);font-weight:500;font-size:52px;color:var(--ink);margin:0;line-height:1}
.cat p.b{font-size:15px;color:var(--muted);max-width:340px;margin-top:16px;line-height:1.6}
.prods{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.prod{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;padding:18px 0;border-bottom:1px solid var(--border)}
.prod .nm{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.2}
.prod .pr{font-size:14px;color:var(--muted);white-space:nowrap}

/* SCHOOLS */
.schools-banner{background:var(--ink);color:var(--bg);padding:64px 0}
.schools-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.schools-cta{background:var(--bg);color:var(--ink);border:1px solid var(--border);padding:28px 26px}
.schools-cta .btn{display:block;text-align:center;padding:16px 20px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.school-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:48px}
.school-card{background:var(--surface);border:1px solid var(--border);padding:24px}
.school-card h3{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--ink);margin:0 0 6px}
.school-card .num{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.school-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.school-card a.thumb{display:block;border:1px solid var(--border);background:#F2F0EA}

/* FOOTER */
.site-footer{background:var(--ink);color:var(--bg);padding:88px 28px 32px;margin-top:40px}
.site-footer .wrap{max-width:1360px;margin:0 auto;padding:0}
.site-footer h2{color:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px;margin-top:72px;border-top:1px solid rgba(250,249,246,.14);padding-top:48px}
.foot-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:18px}
.foot-h{font-family:var(--serif);font-size:22px;line-height:1.4}
.foot-p{font-size:14px;margin-top:18px;opacity:.8;line-height:1.8}
.foot-bar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(250,249,246,.14);padding-top:28px;margin-top:72px;font-size:12px;opacity:.6;flex-wrap:wrap;gap:12px}

@media (max-width:980px){
  .hero-grid,.cat-grid,.schools-grid,.school-cards,.foot-grid,.prods{grid-template-columns:1fr !important;gap:32px !important}
}
@media print{
  .site-header,nav,.order-cta,.btn-dark,.text-link,.schools-cta .btn{display:none !important}
  body{background:#fff}.cat{break-inside:avoid}
}