/* archetype: tiles — colour-block hero, pill nav, alternating full-bleed blocks.
   Tuned to "Bumble — sunlit honey editorial": near-black (--color-primary) carries
   all text, borders and button fills; honey (#ffdb5b) is the one chromatic surface —
   full-bleed section blocks and card frames only, never a button fill; radii 16px on
   nav/buttons, 24px on cards, 1000px reserved for badges/pills; one shadow, never
   stacked. No other chromatic colour appears anywhere on the page. Behaviour is
   translated from bumble.com's own stylesheet (see company-profile.md, Brand):
   its staggered card-swap keyframes already exist here as the skeleton's own
   data-reveal system, so nothing is duplicated; the hover verb (scale), the sliding
   button fill, the clip-path edge, the frosted sticky nav and one overshoot easing
   are added below, all gated on prefers-reduced-motion. */
:root { --honey: #ffdb5b; }

h1 { font-size: clamp(2.5rem, 8vw, 4.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 5vw, 2.75rem); }

.site-header { background: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.site-header .brand, .site-header .brand-name { color: var(--color-on-primary); }
.nav-toggle { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: var(--color-on-primary); border-radius: var(--radius-sm); }
.nav { background: var(--color-primary); }
.nav-list a { color: var(--color-on-primary); border-radius: var(--radius-sm); }
.nav-list a:hover, .nav-list a[aria-current="page"] { background: rgba(255,255,255,0.16); color: #fff; }
.nav-list a.nav-cta { background: var(--honey); color: var(--color-primary); }

/* Buttons: near-black fills carry every CTA; honey never fills a button. */
.btn, .nav-toggle { border-radius: var(--radius-sm); font-weight: 600; padding: 0.9rem 1.6rem; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover { filter: brightness(1.3); }
.btn-ghost { border-width: 2px; }

/* Announcement bar: the morning-yellow band carrying "where the cart is today". */
.announcement { background: var(--honey); color: var(--color-primary); font-weight: 600; border-bottom: 2px solid var(--color-primary); }

/* Cards: 24px frames, the one approved shadow, a near-black border on honey blocks. */
.card { border: 1px solid var(--color-border); box-shadow: var(--shadow); overflow: hidden; }
main .section:nth-of-type(4n) { background: var(--honey); }
main .section:nth-of-type(4n) .card { background: #fff; border-color: var(--color-primary); box-shadow: none; }
main .section:nth-of-type(4n+3) { background: var(--color-primary); color: var(--color-on-primary); }
main .section:nth-of-type(4n+3) h2, main .section:nth-of-type(4n+3) h3, main .section:nth-of-type(4n+3) .eyebrow, main .section:nth-of-type(4n+3) .lead, main .section:nth-of-type(4n+3) p, main .section:nth-of-type(4n+3) .card-body p { color: inherit; }
main .section:nth-of-type(4n+3) .card { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); box-shadow: none; }
main .section:nth-of-type(4n+3) .btn-ghost { color: var(--color-on-primary); }
.section + .section { border-top: 0; }

/* Hero: a honey colour block. Bumble's own hero is a full-bleed colour section with a
   wordmark, not a photograph, so a hero built from honey, near-black and type is a
   faithful reading of the reference, not a stand-in for a missing photo (this build
   ships with none — see company-profile.md, Gaps). Centred text, the one place
   centring is allowed. A shallow clip-path gives the block a cut edge instead of a
   straight line (bumble.com shapes section edges with clip-path throughout; this is
   one shallow cut, kept subtle). If a hero photo is ever added, the frame styles below
   still apply — .hero-media just stops being collapsed. */
.hero { position: relative; background: var(--honey); color: var(--color-primary); min-height: auto; display: flex; flex-direction: column-reverse; align-items: center; gap: clamp(1.5rem, 4vw, 2.5rem); padding-block: clamp(2.5rem, 7vw, 4.5rem); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 22px)); }
.hero::after { content: none; }
.hero-content { text-align: center; padding-block: 0; }
.hero h1, .hero .lead { color: var(--color-primary); }
.hero .eyebrow { display: inline-block; background: var(--color-primary); color: var(--color-on-primary); border-radius: 1000px; padding: 0.3rem 1rem; }
.hero .btn-row { justify-content: center; }
.hero .btn-ghost { color: var(--color-primary); border-color: var(--color-primary); }
.hero-media { position: relative; inset: auto; width: min(100%, 26rem); aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--color-primary); box-shadow: var(--shadow); z-index: 1; }
.hero-meta { color: var(--color-muted); justify-content: center; }
/* No-image fallbacks, condition on the image itself (`:has(img:not([src]))` — correct
   for any content build that ends up without a photo in one of these slots, not a
   hardcoded fix for this client). Hidden `data-if` images still leave their grid track
   behind unless told otherwise: the hero's frame collapses outright, and the two-column
   .feature (home intro, about) drops to one column so the text is not squeezed into a
   half-width track that used to hold a photo. The single column is then given a wider,
   more deliberate measure (48rem, well past a "half the width" reading) and a larger
   heading, so the block reads as built for text, not as a photo layout missing its
   photo. */
.hero-media:has(img:not([src])) { display: none; }
.feature:has(img:not([src])) { grid-template-columns: 1fr; }
.feature:has(img:not([src])) > :not(img) { max-width: 48rem; }
.feature:has(img:not([src])) h2 { font-size: clamp(2.2rem, 6vw, 3.25rem); }

/* Menu: each section gets a honey header band, framed like the reference's cards. */
@media (min-width: 760px) { .menu-sections { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.menu-section { background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: var(--radius); padding: 0 1.35rem 1.1rem; overflow: hidden; box-shadow: var(--shadow); }
.menu-section h3 { background: var(--honey); color: var(--color-primary); margin: 0 -1.35rem 0.75rem; padding: 0.8rem 1.35rem; border: 0; font-size: 1.2rem; }
.menu-item-price { color: var(--color-accent); font-weight: 700; }
.menu-item-price:empty { display: none; }
.status-pill { border: 2px solid var(--color-primary); }

/* Motion, translated from bumble.com's own CSS and gated on reduced-motion (the
   skeleton's data-reveal stagger already covers card/section entry — see the note
   above — so nothing here duplicates it). */
@media (prefers-reduced-motion: no-preference) {
  /* Frosted nav: sticky already, tuned so the honey band shows through the blur
     as the page scrolls past it, the way bumble.com's backdrop-filter surfaces do. */
  .site-header { background: color-mix(in srgb, var(--color-primary) 90%, transparent); backdrop-filter: saturate(1.1) blur(10px); }
  /* Scale is the hover verb, kept small — a cart is not a toy. Applied to the image
     inside an overflow:hidden frame, so the enlarged image never pushes the layout. */
  .card img, .hero-media img { transition: transform 0.2s ease-in-out; }
  .card:hover img, .hero-media:hover img { transform: scale(1.04); }
  /* The dark fill slides across the button on hover rather than switching flat —
     honey still never becomes the fill, this is dark-over-black. */
  .btn-primary { background: linear-gradient(90deg, var(--color-primary) 50%, #000 50%) 0 0 / 200% 100%; background-position: 0 0; transition: background-position 0.1s ease; }
  .btn-primary:hover { background-position: 100% 0; filter: none; }
  /* One overshoot easing, reserved for the announcement bar arriving each load —
     the cart "pulling up" for the morning. Everywhere else uses the ease-in-out above. */
  @keyframes cart-arrive { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  .announcement { animation: cart-arrive 0.45s 1 cubic-bezier(.7,-.4,.4,1.4) forwards; }
}