/* archetype: market — hand made, busy, warm. Everything sits on a panel with a hard
   offset shadow, headings carry a highlight swipe, and the menu is a grid of cards
   with price badges, like a stall's price list. Chosen for Sunny Side Up: a small,
   cheerful, all-day-breakfast café-bakery, not a quiet gallery room — see
   company-profile.md Decisions. Tuned softer and rounder for the sunflower-badge logo. */

h1 { font-size: clamp(2.5rem, 8.5vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }

/* Header: a cream bar with a heavy line under it. */
.site-header { background: var(--color-surface); backdrop-filter: none; border-bottom: 4px solid var(--color-primary); }
.brand-name { font-weight: 700; }
.nav-toggle { border-width: 2px; border-color: var(--color-primary); }
.nav-list a { font-weight: 600; }

/* A swipe of accent behind every section heading, and a small round "sunflower
   centre" dot before each eyebrow label. */
.section-head h2, .section > .container > h2 { display: inline; background: linear-gradient(to top, color-mix(in srgb, var(--color-accent) 22%, transparent) 0 38%, transparent 38%); padding: 0 0.15em; box-decoration-break: clone; }
.eyebrow::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--color-accent); margin-right: 0.5em; vertical-align: middle; }

/* Hard offset shadows, softened a little for a friendlier read. */
.card, .menu-note, .book-panel, .map-embed { border: 2px solid var(--color-primary); box-shadow: 6px 6px 0 var(--color-primary); }
.card { background: var(--color-surface); }
.btn { border: 2px solid var(--color-primary); box-shadow: 4px 4px 0 var(--color-primary); font-weight: 700; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-primary); }
.btn-ghost { background: var(--color-surface); }
.hero .btn-ghost { background: transparent; border-color: #fff; }

/* Hero: warm wash, words in a panel on top. */
.hero { min-height: min(74vh, 44rem); }
.hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 30%, transparent), color-mix(in srgb, var(--color-primary) 75%, transparent)); }
.hero-content > .container > *, .hero-content { max-width: 100%; }
.hero h1, .hero .lead, .hero .eyebrow, .hero-meta { text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.hero .eyebrow::before { background: #fff; }

/* Menu: a grid of bordered cards with the price as a badge. */
@media (min-width: 700px) { .menu-sections { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.menu-section { border: 2px solid var(--color-primary); border-radius: var(--radius); padding: 1.25rem 1.35rem; background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-primary); }
.menu-section h3 { border-bottom: 2px dashed var(--color-border); }
.menu-item { padding: 0.7rem 0; }
.menu-item-price { background: var(--color-accent); color: var(--color-on-accent); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.95rem; }
/* A shop with no published prices must not show a row of empty pills. */
.menu-item-price:empty { display: none; }
.status-pill { border: 2px solid currentColor; }