/* Up Cafe review refinements; loaded after the compiled brand styles. */
:root { --header-height: 100px; }
.menu-rail { top: calc(var(--header-height) + 20px); }
.hero-description,
.page-hero-copy > p:not(.eyebrow),
.offer-content > p:not(.eyebrow),
.catering-copy > p:not(.eyebrow),
.story-copy > p:not(.eyebrow),
.section-heading > p { font-size: 16px; line-height: 1.75; }
.contact-links > a, .hours-row, .menu-note, .visit-copy > p:not(.eyebrow) { font-size: 14px; }
.contact-links > a { min-height: 44px; overflow-wrap: anywhere; }
/* Live "open now" chip, in the strip at the top of every page. Rendered by the
   server (so it is correct with JavaScript off) and refreshed from
   /opening-status.json while the page stays open. Colours come from the existing
   palette — only the state changes, never the styling. */
.open-status { display: inline-flex; align-items: center; gap: 4px 8px; padding: 4px 12px 4px 10px; border: 1px solid transparent; border-radius: 30px; background: #fff; font-size: 11px; letter-spacing: .01em; line-height: 1.4; color: var(--muted); }
.open-status > strong { color: var(--deep-green); font-weight: 700; }
.open-status-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); }
.open-status-open .open-status-dot, .open-status-closing-soon .open-status-dot { background: var(--deep-green); }
.open-status-open .open-status-dot::after, .open-status-closing-soon .open-status-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: open-status-pulse 2.6s ease-out infinite; }
.open-status-detail::before { content: '·'; margin-right: 8px; color: #b9c2b2; }
@keyframes open-status-pulse {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(2.5); opacity: 0; }
}
.desktop-nav a[aria-current="page"] { color: var(--deep-green); font-weight: 700; }
.desktop-nav a[aria-current="page"]::after { right: 0; }
.mobile-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; color: var(--deep-green); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--deep-green); outline-offset: 4px; }
.lightbox :where(button):focus-visible { outline-color: var(--sage); }
.menu-control-item { transition: transform .2s, border-color .2s; }
.menu-control-item.is-active, .menu-control-item.is-active .menu-control-label { background-color: var(--deep-green); color: var(--cream); }
.hero-food-deferred[data-src]:not([src]) { visibility: hidden; }

/* The three testimonials are different lengths, so switching between them used to
   resize the section and shove the rest of the page down (184px on desktop, 269px
   on mobile). Every slide now shares one grid cell, so the row is always as tall as
   the longest review and that space is reserved before anything is clicked.
   Hidden slides keep their layout box (visibility, not display) — that is what makes
   the reservation work — and visibility is still what hides them from assistive tech.
   Visibility flips after the fade when leaving, and immediately when arriving, so
   the crossfade survives. The first slide ships as `is-current` in the HTML, so the
   opening review still renders without JavaScript. */
.review-slides { display: grid; align-items: start; }
.review-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.review-slide.is-current { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }

/* Reserving the tallest quote is only half the fix — the longest review also has to
   stop setting a box far taller than the others, or the short quotes sit above a
   hole. Long quotes step down one size, which is a normal typographic move and is
   invisible here because only one review is ever on screen. That drops the reserved
   box from 361px to 232px on desktop (slack 184px -> 55px) and from 500px to 309px
   on mobile (slack 269px -> 78px). Sizes mirror the compiled breakpoints: the quote
   is 23px above 900px wide, 21px at/under 767px and 20px in between. */
@media (min-width: 901px) {
  .review-slide-long blockquote { font-size: 19px; line-height: 1.45; }
}
@media (max-width: 900px) {
  .review-slide-long blockquote { font-size: 17px; line-height: 1.45; }
}

/* Photos pull back into frame instead of sitting on a fixed, too-tight crop.
   The slideshow eases out across its whole 7s turn; feature cards do a stronger,
   shorter version every time they are scrolled back into view. Reduced-motion
   users are covered by the global `animation: none !important` rule in the
   compiled stylesheet. */
@keyframes upcafe-zoom-out {
  from { transform: scale(var(--zoom-reveal-from, 1.14)); }
  to { transform: scale(1); }
}
.hero-food-slide.is-active img { --zoom-reveal-from: 1.12; transform-origin: 50% 62%; animation: upcafe-zoom-out 7s cubic-bezier(.22, .61, .36, 1) both; }
.offer-image-link.is-revealed .offer-photo-frame > img { --zoom-reveal-from: 1.16; transform-origin: 50% 57%; animation: upcafe-zoom-out 1.8s cubic-bezier(.22, .61, .36, 1); }
.offer-card:first-child .offer-image-link.is-revealed .offer-photo-frame > img { transform-origin: 50% 66%; }

@media (max-width: 767px) {
  .enquiry-form { padding: 22px 20px 20px; }
}
.enquiry-form { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px 32px 26px; }
.enquiry-honeypot { position: absolute; left: -9999px; }
.menu-panel-enquire { margin-top: 18px; font-size: 14px; }
.menu-panel-enquire a { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.menu-panel-enquire .icon { width: 17px; height: 17px; }
.enquiry-section { scroll-margin-top: 120px; }
.enquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.enquiry-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.enquiry-field-wide { grid-column: 1 / -1; }
.enquiry-field label { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.enquiry-required, .enquiry-optional { font-weight: 400; font-size: 12px; color: var(--muted); }
.enquiry-field input, .enquiry-field select, .enquiry-field textarea { width: 100%; max-width: 100%; padding: 13px 14px; border: 1px solid #c6cdbe; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; }
.enquiry-field textarea { resize: vertical; }
.enquiry-field input[aria-invalid="true"], .enquiry-field select[aria-invalid="true"], .enquiry-field textarea[aria-invalid="true"] { border-color: #a4442f; }
.enquiry-error { font-size: 13px; font-weight: 700; color: #8c3a26; }
.enquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.enquiry-help { font-size: 13px; line-height: 1.7; max-width: 520px; }
.enquiry-help a { text-decoration: underline; text-underline-offset: 4px; }
.enquiry-notice, .enquiry-alert { border-radius: 10px; padding: 18px 20px; margin-bottom: 26px; font-size: 14px; line-height: 1.7; }
.enquiry-notice { background: #fff; border: 1px solid var(--line); }
.enquiry-notice p, .enquiry-alert p { margin-top: 6px; }
.enquiry-alert-error { background: #fdf2ee; border: 1px solid #e2b7a8; }
.enquiry-alert-error h3 { font-size: 17px; margin-bottom: 4px; }
.enquiry-alert-error ul { margin: 10px 0 0; padding-left: 20px; }
.enquiry-alert-error a { text-decoration: underline; text-underline-offset: 4px; }
.enquiry-alert-success { background: var(--sage-light); border: 1px solid #c3d7c0; }
.enquiry-alert-success h3 { font-size: 17px; margin-bottom: 4px; }
.enquiry-notice a, .enquiry-alert a { font-weight: 700; }
@media (max-width: 767px) {
  .enquiry-grid { grid-template-columns: 1fr; gap: 18px; }
  .enquiry-field input, .enquiry-field select, .enquiry-field textarea { font-size: 16px; min-height: 48px; }
  .enquiry-actions .button { width: 100%; }
}
@media (max-width: 767px) {
  :root { --header-height: 80px; }
  .page-hero { position: relative; padding: 28px 0 30px; }
  .page-hero-grid { display: block; }
  .page-hero-art { position: absolute; top: 22px; right: 24px; }
  .page-hero-badge { width: 70px; filter: drop-shadow(0 5px 8px #1b1a1918); }
  .page-hero-copy > .eyebrow { min-height: 60px; max-width: calc(100% - 82px); display: flex; align-items: center; }
  .page-hero h1 { font-size: 42px; line-height: 1.1; }
  .page-hero-copy > p:not(.eyebrow) { margin: 16px 0 20px; }
  .hero-buttons .button { font-size: 13px; padding: 13px 17px; gap: 10px; min-height: 48px; }
  .reserve-link { order: 3; min-height: 44px; }
  .hero { padding-top: 30px; padding-bottom: 32px; }
  .hero-grid { gap: 26px; }
  .hero-art { min-height: 330px; margin: 0; }
  .hero-main-photo { width: 100%; height: 330px; }
  .hero-coffee-photo, .hero-photo-note { display: none; }
  .aroha-seal { right: 10px; top: 18px; }
  .hero-location { margin-top: 22px; }
  .hero-location > span > span { font-size: 13px; }
  .topline-tagline { display: none; }
  .topline .open-status { font-size: 10px; padding: 3px 10px 3px 9px; gap: 4px 6px; }
  /* The longest status ("Public holiday · Opens 8 am tomorrow") plus the phone number
     only just fit on one line on a phone, so the strip is allowed to wrap instead of
     squeezing them together. One rule for all mobile widths beats tuning a breakpoint,
     and the content stays on a single line whenever there is room. The strip sits
     above the sticky header and scrolls away, so growing a few pixels here never
     reaches the anchor offsets `scroll-padding-top` reserves for the header. */
  .topline { height: auto; min-height: 30px; }
  .topline .container { flex-wrap: wrap; column-gap: 14px; row-gap: 4px; padding-block: 5px; }
  .section { padding-block: 48px; }
  .offer-image-link { height: 220px; }
  .offer-content h3 { font-size: 23px; }
  .offer-content > .text-link { font-size: 14px; min-height: 44px; }
  .catering-photos { display: none; }
  .catering-section { padding-block: 46px; }
  .catering-copy .button { font-size: 14px; }
  .catering-menu-link { font-size: 14px; min-height: 44px; }
  .family-photo > img { aspect-ratio: 1.5; }
  .gallery-item { aspect-ratio: 1.15; }
  .gallery-section { padding-block: 44px; }
  .visit-section { padding-block: 46px; }
  .service-items { padding: 22px 24px; grid-template-columns: 1fr 1fr; gap: 18px; }
  .service-item { gap: 8px; }
  .service-item > .icon { width: 20px; height: 20px; }
  .service-item strong { font-size: 10px; letter-spacing: .03em; }
  .service-item p { display: none; }
  .menu-section { padding-block: 38px; }
  .menu-control-item { font-size: 13px; min-height: 48px; }
  .menu-panel-footer > button { min-height: 44px; font-size: 12px; }
  .menu-note { margin-top: 20px; }
  .footer-top nav { font-size: 13px; gap: 4px 18px; }
  .footer-top nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .hours-card { padding: 24px 20px 20px; }
}
@media (max-width: 380px) {
  .hero-food-controls { right: 8px; bottom: 8px; padding: 4px 6px; gap: 2px; }
  .food-arrow { width: 26px; height: 28px; }
  .page-hero-art { right: 20px; }
  .page-hero h1 { font-size: 38px; }
  .hero h1 { font-size: 46px; }
  .hero-script { font-size: 42px; }
  .service-items { padding-inline: 20px; }
}

.footer-bottom .footer-admin { color: inherit; text-decoration: none; opacity: .8; }
.footer-bottom .footer-admin:hover { opacity: 1; text-decoration: underline; }

/* Owner-edited hero copy may be longer than the original two-word script line. */
.hero-script { white-space: normal; overflow-wrap: anywhere; }

/* Contact page */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:54px;align-items:start}
.contact-heading{margin-bottom:28px;align-items:flex-start}
.contact-heading>p{padding-bottom:0}
.contact-side{display:flex;flex-direction:column;gap:20px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px 26px}
.contact-card h3{font-size:25px;margin:8px 0 12px}
.contact-card>p:not(.eyebrow){font-size:13px;line-height:1.8}
.contact-card>.contact-links{display:flex;flex-direction:column;gap:10px;margin:16px 0 21px}
.contact-card>.button{width:100%;justify-content:center}
.contact-card-note .text-link{margin-top:14px;font-size:12px}
.contact-consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.7;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.contact-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--deep-green)}
.contact-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:36px}}