/* ============================================================
   Restaurant / hospitality vertical — Hidook Site Builder.
   Photography-editorial: dark-luxury stage + warm paper body.
   Persistent Reserve CTA. Opacity/transform motion only.
   Local photos only — no external image hosts.
   ============================================================ */

:root {
    --color-primary:       #c4a574;
    --color-primary-light: #dcc49a;
    --color-primary-dark:  #0a0a0a;
    --color-cream:         #f3eee8;

    --ink:        #1a1410;
    --ink-soft:   rgba(26, 20, 16, 0.78);
    --ink-mute:   rgba(26, 20, 16, 0.62);
    --paper:      var(--color-cream, #f3eee8);
    --void:       #0a0a0a;
    --snow:       #faf8f5;
    --cta:        var(--color-primary, #c4a574);
    --accent:     var(--color-primary, #c4a574);
    --link:       #6b4f2a;
    --glass:      rgba(10, 10, 10, 0.82);

    --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --font-text:    'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-ui:      'Helvetica Neue', Helvetica, Arial, sans-serif;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --r: 4px;
    --r-media: 8px;
    --r-pill: 980px;
    --max: 1040px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.pm-body {
    font-family: var(--font-text);
    background: var(--void);
    color: var(--snow);
    line-height: 1.55;
    letter-spacing: 0.01em;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sticky thin mast — wordmark · nav · Reserve */
.pm-mast { background: var(--void); color: var(--snow); }
.pm-mast__bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 52px;
    padding: 0 22px;
    background: var(--glass);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pm-mast__brand { min-width: 0; overflow: hidden; }
.pm-mast__word {
    font-family: var(--font-display);
    font-weight: 500; font-size: 1.05rem; letter-spacing: 0.04em;
    line-height: 1.2; text-transform: none;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-mast__logo { height: 28px; width: auto; }
/* Standalone nav targets, 44px. These rendered 17px tall — text with no
   padding — which is under even the 24x24 of WCAG 2.5.8 (Level AA), and a
   masthead link is not "inline in a sentence", so no exception applies. This
   is the primary navigation of a paying customer's site. Same floor the CTAs
   use; see bot/test/waveB-touch-targets.test.js. */
.pm-mast__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pm-mast__nav {
    display: none; gap: 1.35rem;
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.62);
}
.pm-mast__nav a:hover { color: var(--snow); }
@media (min-width: 834px) {
    .pm-mast__nav { display: flex; }
}

/* Mobile nav — hamburger reveals the same anchors as a dropdown panel */
.pm-mast__burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px; margin: -6px -6px -6px 0;
    background: transparent; border: 0; padding: 0;
    color: var(--snow); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pm-mast__burger:focus-visible {
    outline: 2px solid var(--cta); outline-offset: 2px; border-radius: var(--r);
}
.pm-mast__burger-box { position: relative; display: block; width: 20px; height: 14px; }
.pm-mast__burger-box span {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform 200ms var(--ease-out), opacity 150ms var(--ease-out), top 200ms var(--ease-out);
}
.pm-mast__burger-box span:nth-child(1) { top: 0; }
.pm-mast__burger-box span:nth-child(2) { top: 6px; }
.pm-mast__burger-box span:nth-child(3) { top: 12px; }
.pm-mast__burger[aria-expanded="true"] .pm-mast__burger-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.pm-mast__burger[aria-expanded="true"] .pm-mast__burger-box span:nth-child(2) { opacity: 0; }
.pm-mast__burger[aria-expanded="true"] .pm-mast__burger-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (min-width: 834px) {
    .pm-mast__burger { display: none; }
}
@media (max-width: 833.98px) {
    .pm-mast__nav {
        display: flex; /* collapsed dropdown — kept in flex layout, hidden via max-height/visibility */
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--void);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 18px 32px rgba(0,0,0,0.35);
        padding: 0 22px;
        max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
        transition: max-height 240ms var(--ease-out), opacity 180ms var(--ease-out), visibility 0ms 240ms;
    }
    .pm-mast__nav.is-open {
        max-height: 60vh; opacity: 1; visibility: visible; padding: 6px 22px 14px;
        transition: max-height 240ms var(--ease-out), opacity 180ms var(--ease-out), visibility 0ms;
    }
    .pm-mast__nav a {
        display: flex; align-items: center;
        min-height: 44px; padding: 0.35rem 0;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .pm-mast__nav a:first-child { border-top: 0; }
}
.pm-mast__pill {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
/* Touch-target floor: 44px.
   Measured across all five templates at 1440 and 390, every primary call to
   action on a generated site — the buttons that make a small business's phone
   ring — rendered between 34px and 42px tall. That clears WCAG 2.5.8 (Level
   AA, 24x24) and falls short of 2.5.5 (Level AAA, 44x44) and of the figure
   both the iOS and Android guidelines give for a thumb. Several of these rules
   already carried a min-height, set just under the mark.
   Locked by bot/test/waveB-touch-targets.test.js, which measures the rendered
   box rather than the declaration. */
    min-height: 44px; padding: 8px 16px;
    background: var(--cta); color: var(--void);
    border-radius: var(--r); font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.pm-mast__pill:active { transform: scale(0.97); }

/* Very narrow viewports (small phones, or ~200% zoom on mobile widths) —
   tighten the mast bar so brand + burger + persistent CTA never force
   horizontal scroll (WCAG 1.4.10 reflow). The wordmark truncates with an
   ellipsis; burger and CTA keep their tap-target size, only their own
   padding shrinks. */
@media (max-width: 360px) {
    .pm-mast__bar { padding: 0 12px; gap: 0.5rem; }
    .pm-mast__word { max-width: 28vw; }
    .pm-mast__pill { padding: 8px 10px; font-size: 11px; }
}

.pm-mast__stage { padding: clamp(2.5rem, 8vw, 5.5rem) 22px 2.5rem; }
.pm-hero {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 834px) {
    .pm-hero { grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 3.25rem; }
}
.pm-kicker {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(255,255,255,0.48); margin-bottom: 0.85rem;
}
.pm-hero__tag, .hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.35rem);
    font-weight: 500; line-height: 1.12; letter-spacing: -0.01em;
    color: var(--snow);
}
.pm-hero__acts { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; }
.pm-hero__cta, .hero-cta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--r); font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    transition: transform 140ms var(--ease-out);
}
.pm-hero__cta--fill { background: var(--cta); color: var(--void); border: 1px solid var(--cta); }
.pm-hero__cta--ghost, .hero-cta {
    border: 1px solid rgba(255,255,255,0.55); color: var(--snow); background: transparent;
}
.pm-hero__cta:active, .hero-cta:active { transform: scale(0.97); }
.pm-hero__frame {
    min-height: min(56vw, 460px);
    border-radius: var(--r-media);
    /* !important is load-bearing: the markup sets the photo with the
       shorthand — style="background: url(…)" — which resets every longhand it
       does not mention, and an inline style outranks this rule. Without it the
       computed values came back `background-size: auto` and
       `background-position: 0% 0%`, so the restaurant's photograph rendered at
       its natural resolution from its top-left corner: an arbitrary crop in a
       534x460 frame rather than the framed shot the layout is built around.
       Locked by bot/test/waveB-hero-photo-fills-frame.test.js, which checks
       computed style across every template — the source always read fine. */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.pm-scroll, .scroll-indicator {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    /* The shared consent clearance in bot/site-legal.js forces
       align-items:flex-start on this cue while the card is open, so that it
       never sits under the FAB corner. With no horizontal padding of its own
       that pinned the label to x=0 — hard against the viewport edge, while
       every other thing in the hero starts at the 22px gutter. Match the
       gutter .pm-mast__stage uses so left-aligning it lands somewhere
       deliberate. */
    width: 100%; padding: 0 22px 2rem;
    background: var(--void); color: rgba(255,255,255,0.52);
    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; border: 0; cursor: pointer;
}
.pm-scroll__tick {
    width: 1px; height: 28px; background: rgba(255,255,255,0.28);
}

/* Warm paper body */
.pm-shell { background: var(--paper); color: var(--ink); }
.pm-split {
    max-width: 1120px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
    padding: clamp(3rem, 8vw, 5.5rem) 22px;
}
@media (min-width: 834px) {
    .pm-split { grid-template-columns: 0.36fr 0.64fr; }
}
.pm-rail__label, .pm-meta {
    font-family: var(--font-ui);
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem;
}
.pm-tickets { display: flex; flex-direction: column; gap: 8px; }
.pm-ticket, .service-card {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--snow); border-radius: var(--r);
    padding: 14px 16px; color: var(--ink);
    border: 1px solid rgba(26, 20, 16, 0.06);
}
.pm-ticket__stub, .pm-ticket__perf { display: none; }
.pm-ticket__label {
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.05rem; letter-spacing: 0.01em;
}

.pm-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 500; line-height: 1.15; letter-spacing: -0.01em;
    color: var(--ink); margin: 0 0 0.75rem;
}
.pm-title--sm { font-size: 1.65rem; }
.pm-title--center { text-align: center; }
.pm-prose { color: var(--ink-soft); max-width: 38rem; }

.pm-menublock { margin-top: 2rem; }
.pm-menublock__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.pm-menublock__h { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.pm-langs { display: flex; gap: 6px; }
.menu-lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
    border: 0; background: transparent; color: var(--ink-mute);
    font: inherit; font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer;
}
.menu-lang-btn.is-active { background: var(--ink); color: var(--snow); }
.pm-group { border-bottom: 1px solid rgba(26, 20, 16, 0.1); }
.pm-cat {
    font-family: var(--font-display); font-weight: 500;
    padding: 14px 0; cursor: pointer; list-style: none;
}
.pm-items { padding: 0 0 14px 0; color: var(--ink-soft); }
.pm-items li { padding: 4px 0; font-size: 0.95rem; }

/* WAVE-SECTIONS: .pm-contact is now the sole child of its own top-level
   section (id="contact") instead of being stacked inside .pm-story — see
   template.html. Give the section itself the page's usual content width and
   a bottom rhythm to match the sections around it; .pm-contact keeps its own
   top rule/spacing so it doesn't look naked. */
.pm-contact-sec { max-width: var(--max); margin: 0 auto; padding: 0 22px clamp(2.5rem, 7vw, 4.5rem); }
.pm-contact { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(26, 20, 16, 0.1); }
.pm-contact__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.pm-link, .contact-item {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 9px 15px; border-radius: var(--r-pill);
    border: 1px solid var(--link); color: var(--link);
    font-family: var(--font-ui); font-size: 13px; font-weight: 500;
    /* WAVE8-03 [MEDIUM, horizontal overflow at 200% zoom]: an Instagram/
       Facebook handle or address can be one long unbreakable token (no
       spaces). .pm-contact__list already wraps chips onto new lines
       (flex-wrap:wrap), but a flex item's default min-width still refuses
       to shrink a SINGLE chip below its own unbreakable content width, so
       one long token could still push this chip — and the page — wider
       than the viewport instead of wrapping internally. Same fix shape as
       .pf-row/.contact-item in templates/portfolio/styles.css and
       .pr-contact__row in templates/professionals/styles.css. */
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.pm-link--static { border-color: rgba(26, 20, 16, 0.14); color: var(--ink-soft); }

/* Dark gallery band — food proof */
.pm-gallery { background: var(--void); color: var(--snow); padding: clamp(3rem, 8vw, 5.5rem) 22px; }
.pm-gallery .pm-title { color: var(--snow); }
.pm-catblock { max-width: var(--max); margin: 0 auto 3rem; }
.pm-catblock__t {
    font-family: var(--font-display); font-size: 1.65rem;
    font-weight: 500; line-height: 1.2; margin: 0 0 0.4rem;
}
.pm-catblock__b { color: rgba(255,255,255,0.58); margin-bottom: 1.25rem; }
.pm-shot { border-radius: var(--r-media); overflow: hidden; }
.collage-deck { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .collage-deck { grid-template-columns: repeat(3, 1fr); } }
.collage-photo { margin: 0; }
.pm-shot img, .collage-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* Lightbox — full-screen viewer opened by collage.js on photo click */
.lightbox {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 4vmin;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pmLightboxFade 200ms var(--ease-out);
}
.lightbox[hidden] { display: none; }
@keyframes pmLightboxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lightbox-img {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain;
    border-radius: var(--r-media);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.lightbox-close, .lightbox-nav {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--snow); border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1;
    transition: background 160ms var(--ease-out);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible {
    outline: 2px solid var(--cta); outline-offset: 2px;
}
.lightbox-close { top: 3vmin; right: 3vmin; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 1.9rem; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: 3vmin; }
.lightbox-next { right: 3vmin; }
@media (max-width: 480px) {
    .lightbox-close, .lightbox-nav { width: 44px; height: 44px; }
}

.pm-social { background: var(--paper); color: var(--ink); padding: clamp(3rem, 8vw, 5rem) 22px; }
.pm-social__head {
    max-width: var(--max); margin: 0 auto 1.5rem;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.pm-social__head h2 {
    font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 500; line-height: 1.15;
}
.pm-social__handle { color: var(--ink-mute); font-size: 0.95rem; margin-top: 0.25rem; }
.pm-social__follow {
    font-family: var(--font-ui); color: var(--link); font-size: 12px;
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.pm-embed, .pm-ig-grid, .pm-embeds { max-width: var(--max); margin: 0 auto; }
.pm-embed { margin-bottom: 1.25rem; }
.instagram-embed-iframe {
    width: 100%; min-height: 480px; border: 0;
    border-radius: var(--r-media); background: var(--snow);
}
.pm-ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 640px) { .pm-ig-grid { grid-template-columns: repeat(3, 1fr); } }
.pm-ig-cell img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r);
    transition: opacity 160ms var(--ease-out);
}
.pm-ig-cell:hover img { opacity: 0.88; }

.pm-foot {
    background: var(--paper); color: var(--ink-mute); font-size: 12px;
    border-top: 1px solid rgba(26, 20, 16, 0.08);
}
.pm-foot__inner {
    max-width: var(--max); margin: 0 auto; padding: 2rem 22px 3rem;
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.pm-foot__logo { height: 28px; }
.pm-foot__soc { display: flex; gap: 0.35rem; color: var(--link); font-weight: 600; margin: -10px; }
.pm-foot__soc a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border-radius: 50%;
}
.pm-foot__soc a:hover { background: rgba(26, 20, 16, 0.06); }

.whatsapp-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 30;
    width: 48px; height: 48px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.whatsapp-float .wa-icon { display: block; }
.hb-built-by {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mute, #6b6b6b);
    pointer-events: auto;
}
.hb-built-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wa-qr {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
}
.wa-qr[hidden] { display: none !important; }
.wa-qr__backdrop { position: absolute; inset: 0; background: rgba(12, 18, 16, 0.62); backdrop-filter: blur(4px); }
.wa-qr__card {
    position: relative;
    background: var(--snow); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--r-media);
    padding: 2rem; width: min(92vw, 380px); text-align: center; box-shadow: 0 28px 72px rgba(12, 18, 16, 0.28);
}
.wa-qr__close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(15, 29, 25, 0.07); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.wa-qr__title { margin: 0 2rem 1rem; font-size: 1.45rem; line-height: 1.2; }
.wa-qr__code { display: grid; place-items: center; min-height: 260px; padding: 10px; background: #fff; border: 1px solid rgba(15, 29, 25, 0.1); border-radius: 18px; }
.wa-qr__code img { display: block; max-width: 100%; height: auto; }
.wa-qr__code svg { display: block; max-width: 100%; height: auto; }
.wa-qr__open { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 1rem; padding: 0.7rem 1.15rem; background: #25D366; color: #fff; border-radius: 999px; font-weight: 700; text-align: center; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.24); }

.fade-in-section { animation: pmIn 420ms var(--ease-out) both; }
@keyframes pmIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-in-section, .hero-content, .scroll-indicator, .service-card, .collage-photo {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .pm-mast__pill, .hero-cta, .pm-hero__cta { transition: none; }
    .pm-mast__nav, .pm-mast__burger-box span { transition: none !important; }
    .lightbox { animation: none; }
}