/* Moreish Kitchen — design polish layer (post-Webflow).
   Loaded after the Webflow CSS on every page. Sizing, spacing, motion, nav.
   Remove the <link> to revert. */

:root {
  --mk-navy: #080331;
  --mk-ink: #1a2241;
  --mk-cream: #fbf6ee;
  --mk-gold: #ccb27f;
  --mk-gold-ink: #8f7134; /* gold that passes contrast on cream */
  --mk-ease: cubic-bezier(.22, .61, .36, 1);
  --mk-ease-inout: cubic-bezier(.77, 0, .18, 1);
}

/* ---------- Type: fluid scale, fixed hierarchy (h2 was 6rem > h1 4rem) ---------- */
body { font-size: 1.125rem; line-height: 1.6; }
p { text-wrap: pretty; }
.heading-style-h1, .heading-style-h2, .heading-style-h3, h1, h2, h3 { text-wrap: balance; }

.heading-style-h1 { font-size: clamp(2.5rem, 1.55rem + 3.2vw, 4.75rem); line-height: 1.08; letter-spacing: -.01em; }
.heading-style-h2 { font-size: clamp(2.35rem, 1.45rem + 3vw, 4.5rem); line-height: 1.1; letter-spacing: -.01em; }
.heading-style-h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.6rem); line-height: 1.18; }
.sub-heading { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.4rem); }
.text-size-medium { font-size: clamp(1.1rem, 1.04rem + .2vw, 1.25rem); line-height: 1.6; }
.text-size-large { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); line-height: 1.5; }

/* ---------- Spacing: fluid sections, no double padding between same-colour sections ---------- */
.padding-section-xlarge { padding-top: clamp(4.5rem, 2.25rem + 6vw, 8.5rem); padding-bottom: clamp(4.5rem, 2.25rem + 6vw, 8.5rem); }
.padding-section-large  { padding-top: clamp(4rem, 2.25rem + 4.5vw, 6.5rem); padding-bottom: clamp(4rem, 2.25rem + 4.5vw, 6.5rem); }
.background-color-secondary + .background-color-secondary > .padding-section-xlarge,
.background-color-secondary + .background-color-secondary > .padding-section-large,
.background-color-alternate + .background-color-alternate > .padding-section-xlarge,
.background-color-alternate + .background-color-alternate > .padding-section-large { padding-top: clamp(1rem, 2vw, 2.5rem); }
.spacer-xlarge { padding-top: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
@media (min-width: 992px) { .padding-global { padding-left: clamp(2.5rem, 4vw, 4rem); padding-right: clamp(2.5rem, 4vw, 4rem); } }

/* ---------- Links + buttons ---------- */
.background-color-secondary .text-color-gold,
.section-one:not(.background-color-alternate) a.text-color-gold { color: var(--mk-gold-ink); }
a.text-color-gold, .light-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--mk-ease), color .3s;
}
a.text-color-gold:hover, .light-link:hover { background-size: 100% 1px; }

.button, .w-button {
  transition: transform .35s var(--mk-ease), box-shadow .35s var(--mk-ease), background-color .3s, color .3s, border-color .3s;
}
.button:hover, .w-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(8, 3, 49, .45); }
.button:active, .w-button:active { transform: translateY(0); box-shadow: none; }
a:focus-visible, button:focus-visible, .button:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }

/* Enquiry panel (was the StudioNinja iframe) */
.embed:has(.enquiry-cta) { background: transparent !important; padding: 0 !important; }
.enquiry-cta .button, #wp-form-checkout .enquiry-cta .button {
  background: var(--mk-navy); color: var(--mk-cream); border-color: var(--mk-navy);
  font-size: 1.2rem; padding: 1rem 2.5rem; border-radius: 999px;
}
.enquiry-cta .button:hover { background: #1b1560; color: #fff; }

/* ---------- Imagery: gentle hover on cards/ovals ---------- */
.product img, .image-2, .slider-pill_img, .images img {
  transition: transform .9s var(--mk-ease), filter .9s var(--mk-ease);
}
a:hover > .image-2, .slider-pill:hover .slider-pill_img { transform: scale(1.03); }

/* ---------- Desktop nav ---------- */
.flex-nav .navlink, .nav-flex .navlink {
  position: relative; padding: .35rem 0;
}
.flex-nav .navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--mk-gold); opacity: 0; transition: opacity .3s var(--mk-ease);
}
.flex-nav .navlink:hover::after, .flex-nav .navlink.w--current::after { opacity: 1; }
/* Webflow's hover grew the link 1.2rem -> 1.5rem and added its own underline (double + layout jump) */
.navlink:hover { font-size: 1.2rem; text-decoration: none; }
.navlink { transition: color .3s var(--mk-ease); }
.dan-section-menu-1 .navlink:hover { font-size: clamp(2rem, 9vw, 3.25rem); }
.flex-nav .navlink:hover { color: var(--mk-gold-ink); }

/* ---------- Mobile menu: curtain + staggered links (driven by polish.js) ---------- */
.ner-icon-menu-1 { transition: transform .5s var(--mk-ease), opacity .3s; }
.nav-flex .ner-icon-menu-1:hover { transform: scale(1.08); }

html.mk-js .dan-section-menu-1 {
  display: flex !important; flex-direction: column;
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 1000;
  background: var(--mk-cream); opacity: 1 !important; font-size: 16px;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--mk-ease-inout), visibility 0s linear .75s;
  overflow-y: auto; overscroll-behavior: contain;
}
html.mk-nav-open .dan-section-menu-1 {
  visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path .75s var(--mk-ease-inout), visibility 0s;
}
html.mk-nav-open, html.mk-nav-open body { overflow: hidden; }

.dan-section-menu-1 > .ner-section-1 { padding: 1.25rem; border-bottom: 1px solid rgba(204, 178, 127, .45); }
.dan-section-menu-1 .ner-icon-menu-1 { width: 2rem; transform: rotate(-90deg); opacity: 0; }
html.mk-nav-open .dan-section-menu-1 .ner-icon-menu-1 { transform: rotate(0); opacity: 1; transition-delay: .35s; }

.dan-section-menu-1 .dan-wrap-menu-1 { height: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.75rem 2.5rem; }
.dan-section-menu-1 .dan-wrap-5 { margin: 0; padding: 0; }
.dan-section-menu-1 .dan-wrap-6 { display: flex; flex-direction: column; gap: .35rem; }
.dan-section-menu-1 .navlink {
  font-size: clamp(2rem, 9vw, 3.25rem); line-height: 1.15; letter-spacing: 0; color: var(--mk-navy);
  display: inline-flex; align-items: baseline; gap: .75rem; width: max-content; max-width: 100%;
  opacity: 0; transform: translateY(1.25rem);
  transition: opacity .5s var(--mk-ease), transform .6s var(--mk-ease), color .3s;
}
.dan-section-menu-1 .navlink::before {
  content: attr(data-mk-n); font-size: .8rem; letter-spacing: .12em; color: var(--mk-gold-ink); transform: translateY(-.9em);
}
.dan-section-menu-1 .navlink:hover, .dan-section-menu-1 .navlink.w--current { color: var(--mk-gold-ink); }
html.mk-nav-open .dan-section-menu-1 .navlink { opacity: 1; transform: none; transition-delay: calc(.3s + var(--mk-i, 0) * 60ms); }

.mk-menu-foot {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(204, 178, 127, .45);
  display: grid; gap: .35rem; font-size: 1.05rem; color: var(--mk-ink);
  opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--mk-ease), transform .6s var(--mk-ease);
}
.mk-menu-foot a { color: inherit; text-decoration: none; }
.mk-menu-foot .button { justify-self: start; margin-top: 1rem; background: var(--mk-navy); color: var(--mk-cream); border-radius: 999px; padding: .85rem 2rem; font-weight: 400; }
html.mk-nav-open .mk-menu-foot { opacity: 1; transform: none; transition-delay: .75s; }

/* ---------- Scroll reveal (classes added by polish.js; content is visible without JS) ---------- */
.mk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--mk-ease), transform 1s var(--mk-ease); transition-delay: var(--mk-d, 0ms); }
.mk-reveal.mk-in { opacity: 1; transform: none; }
img.mk-reveal { transform: translateY(24px) scale(.985); }
img.mk-reveal.mk-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  .mk-reveal { opacity: 1; transform: none; }
}

/* ---------- Header: one logo size for page + menu so opening the menu doesn't jump ---------- */
@media (max-width: 991px) {
  .nav-flex .ner-logo-1, .dan-section-menu-1 .ner-logo-1 { width: clamp(140px, 38vw, 180px); }
  .nav-flex .ner-icon-menu-1, .dan-section-menu-1 .ner-icon-menu-1 { width: 2rem; }
}
.dan-section-menu-1 .ner-section-1, .dan-section-menu-1 .ner-container-1 { background: transparent; }
.dan-section-menu-1 .ner-container-1 { max-width: none; width: 100%; padding: 0; margin: 0; }
.dan-section-menu-1 .ner-wrap-1 { display: flex; justify-content: space-between; align-items: center; }
[tabindex]:focus-visible { outline-color: var(--mk-gold) !important; }

/* White "Enquire Now" links sitting on cream sections were invisible */
.background-color-secondary a.text-color-alternate { color: var(--mk-gold-ink); }
.background-color-secondary a.text-color-alternate, a.text-color-alternate {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--mk-ease), color .3s;
}
a.text-color-alternate:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#enquire { scroll-margin-top: 1.5rem; }

/* ---------- Header: one logo size for page + menu so opening the menu doesn't jump ---------- */
@media (max-width: 991px) {
  .nav-flex .ner-logo-1, .dan-section-menu-1 .ner-logo-1 { width: clamp(140px, 38vw, 180px); }
  .nav-flex .ner-icon-menu-1, .dan-section-menu-1 .ner-icon-menu-1 { width: 2rem; }
}
.dan-section-menu-1 .ner-section-1, .dan-section-menu-1 .ner-container-1 { background: transparent; }
.dan-section-menu-1 .ner-container-1 { max-width: none; width: 100%; padding: 0; margin: 0; }
.dan-section-menu-1 .ner-wrap-1 { display: flex; justify-content: space-between; align-items: center; }
[tabindex]:focus-visible { outline-color: var(--mk-gold) !important; }

/* White "Enquire Now" links sitting on cream sections were invisible */
.background-color-secondary a.text-color-alternate { color: var(--mk-gold-ink); }
.background-color-secondary a.text-color-alternate, a.text-color-alternate {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--mk-ease), color .3s;
}
a.text-color-alternate:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#enquire { scroll-margin-top: 1.5rem; }

/* Card rows (Dine your Way etc.): pin content to the top and give every oval the same frame,
   so a landscape photo (Buffet) doesn't sit lower than its portrait neighbours */
.product { justify-content: flex-start; }
.product .image { width: 100%; }
.product .image-2 { width: 100%; height: 100%; display: block; }
.product:hover .image-2 { transform: scale(1.04); }
.background-color-secondary .sub-heading.text-color-secondary { color: var(--mk-gold-ink); }

/* Venue pages: the chip row stopped the text column shrinking, clipping copy on phones */
.container-small > .stick { min-width: 0; max-width: 100%; }
.flex-chips { flex-wrap: wrap; row-gap: .6rem; }

/* ---------- Card rows (Specialty services / Dine your Way): even 4-up grid, even titles ----------
   Only rows made purely of plain .product cards. Services (.product.hori rows), the menu
   pickers (.product-option) and Food's accordion also use .flex-sections and must keep Webflow's layout. */
@media (min-width: 768px) {
  .flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.2vw, 2.25rem); align-items: stretch; justify-content: stretch;
  }
  .flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product { width: auto; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product { justify-content: flex-start; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) .image { width: 100%; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) .image-2 { width: 100%; height: 100%; display: block; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product:hover .image-2 { transform: scale(1.04); }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) .heading-style-h3 {
  font-size: clamp(1.5rem, 1.05rem + 1vw, 2.1rem); line-height: 1.15;
  min-height: 2.3em; display: flex; align-items: center; justify-content: center;
  text-wrap: balance;
}
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) .heading-style-h3 br { display: none; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product > .spacer-small.spacer-large { padding-top: clamp(1.25rem, 2vw, 1.75rem); }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product > .spacer-small { padding-top: .6rem; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) > .product > a:last-child { margin-top: auto; padding-top: .35rem; letter-spacing: .02em; }
.flex-sections:has(> .product):not(:has(> :not(.product))):not(:has(> .product.hori)) .sub-heading { font-size: 1.1rem; letter-spacing: .04em; }

/* Desktop nav: 7 links now (Te Puna Mahara added) */
@media (min-width: 992px) {
  .flex-nav { column-gap: clamp(1.25rem, 2.6vw, 3rem); flex-wrap: wrap; row-gap: .5rem; }
  .flex-nav .navlink { letter-spacing: 1.5px; }
}

/* ---------- Te Puna Mahara page (tools/build_tpm.py) ---------- */
.tpm-hero .header-background { object-fit: cover; object-position: 50% 60%; }
.section-hero.mh.dim.tpm-hero { background-color: transparent; }
.tpm-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 38% 32% at 50% 52%, rgba(8,3,49,.42) 0%, rgba(8,3,49,.2) 55%, rgba(8,3,49,0) 100%); }
.tpm-hero h1, .tpm-hero__sub { text-shadow: 0 2px 18px rgba(8,3,49,.45); }
.tpm-hero__content { z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; padding: 0 1.25rem; }
.tpm-hero__logo { width: clamp(220px, 30vw, 380px); height: auto; }
.tpm-hero h1 { max-width: 16ch; margin: 0; }
.tpm-hero__sub { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-style: italic; margin: 0; }

.tpm-intro { max-width: 52rem; margin-inline: auto; }
.tpm-onsite { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); color: var(--mk-gold-ink); max-width: 36ch; margin-inline: auto; line-height: 1.45; }
.tpm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(204,178,127,.55); border-bottom: 1px solid rgba(204,178,127,.55); }
.tpm-stats > div { display: flex; flex-direction: column; align-items: center; padding: 1.5rem .5rem; text-align: center; }
.tpm-stats > div + div { border-left: 1px solid rgba(204,178,127,.55); }
.tpm-stats__n { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1; color: var(--mk-navy); }
.tpm-stats__l { margin-top: .5rem; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink); }

.tpm-split { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.tpm-photo { width: 100%; height: auto; display: block; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; }
.tpm-photo--arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 6px 6px; max-width: 30rem; margin-inline: auto; }
.tpm-split .text p { max-width: 38rem; }
@media (min-width: 992px) { .tpm-split--flip .images { order: 2; } }

.tpm-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.tpm-cta__card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3vw, 3rem); border: 1px solid rgba(204,178,127,.6); border-radius: 8px; background: #fff; }
.tpm-cta__card .heading-style-h3 { font-size: clamp(1.45rem, 1.15rem + .9vw, 2rem); }
.tpm-cta__card p { margin: 0; }
.tpm-cta__card--dark { background: var(--mk-navy); color: var(--mk-cream); border-color: var(--mk-navy); }
.tpm-btn { text-decoration: none; margin-top: auto; align-self: flex-start; border-radius: 999px; padding: .95rem 2.25rem; font-weight: 400; background: var(--mk-navy); color: var(--mk-cream); }
.tpm-btn--gold { background: var(--mk-gold); color: var(--mk-navy); }
.tpm-btn--gold:hover { background: #d9c396; color: var(--mk-navy); }
@media (max-width: 767px) {
  .tpm-cta { grid-template-columns: 1fr; }
  .tpm-stats > div { padding: 1.1rem .25rem; }
  .tpm-stats__l { font-size: .75rem; letter-spacing: .05em; }
}

.tpm-occasions .image-2 { min-height: 0; }
@media (max-width: 767px) {
  .tpm-occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .tpm-occasions .heading-style-h3 { font-size: 1.2rem; min-height: 2.4em; }
  .tpm-occasions .spacer-small.spacer-large { padding-top: .75rem; }
}

/* Enquiry button sits straight on the navy enquiry section (Duncan 28 Sep: no box around it) */
#enquire .embed:has(.enquiry-cta) { display: flex; align-items: center; justify-content: flex-start; min-height: 0; height: auto; align-self: center; }
#enquire .enquiry-cta .button { background: var(--mk-gold); color: var(--mk-navy); border-color: var(--mk-gold); }
#enquire .enquiry-cta .button:hover { background: #d9c396; color: var(--mk-navy); }
.mk-enquiry-more { display: flex; flex-direction: column; align-items: flex-start; }
#enquire .enquiry { align-items: start; }