/* ============================================================
   polish.css - 2026-05-22 polish pass (Ben)
   Loaded LAST from _head.php so every rule overrides style.css /
   responsive.css. Safe to revert: remove the link tag in _head.php.
   Scope: header / mobile menu / section polish.
   ============================================================ */


/* ----------------------------------------------------------------
   1. Header desktop nav - fit + breathing room
   DOMINANT MOMENT: subtle gold underline indicator on the active
   page link, animating in from center on hover - .main-menu li > a
   ---------------------------------------------------------------- */

/* Before this pass, the 8-item nav wrapped below the logo from
   ~1280px down to ~1400px and was cramped at 1366. This pass
   tightens font-size, letter-spacing, item margins, and logo
   padding so the nav fits inline at the existing >=1200px
   desktop band (the hamburger threshold). */

@media (min-width: 1200px) {

  .main-header.style-two .header-lower .outer-box,
  .main-header.style-one .outer-box {
    margin: 0 30px;
  }

  .main-header .logo-box {
    padding: 36px 24px 36px 0;
    max-width: 300px;
  }

  .main-header .logo-box img {
    width: 240px;
    height: auto;
  }

  .main-menu .navigation > li {
    padding: 56px 0;
    margin: 0 14px;
  }

  .main-menu .navigation > li > a {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }
}

/* Tighter band - 1200-1349px is genuinely cramped with 8 items.
   Drop type and gaps further; shrink logo so everything stays
   on one row. */
@media (min-width: 1200px) and (max-width: 1349px) {
  .main-header .logo-box {
    padding: 36px 16px 36px 0;
    max-width: 220px;
  }
  .main-header .logo-box img {
    width: 190px;
  }
  .main-menu .navigation > li {
    margin: 0 8px;
  }
  .main-menu .navigation > li > a {
    font-size: 14px;
    letter-spacing: 0.3px;
  }
  .main-header.style-two .header-lower .outer-box,
  .main-header.style-one .outer-box {
    margin: 0 16px;
    flex-wrap: nowrap;
  }
}

/* Mid band 1350-1499 - comfortable middle ground. */
@media (min-width: 1350px) and (max-width: 1499px) {
  .main-menu .navigation > li {
    margin: 0 11px;
  }
  .main-menu .navigation > li > a {
    font-size: 16px;
    letter-spacing: 0.4px;
  }
  .main-header .logo-box img {
    width: 220px;
  }
}


/* ----------------------------------------------------------------
   2. Modern current-page + hover underline
   Replaces the dated PNG triangle (style.css line 145-157) with a
   clean 2px gold underline. Current page = static underline;
   hover = grow from center.
   ---------------------------------------------------------------- */

.main-menu .navigation > li.current > a:after {
  background-image: none !important;
  width: 100% !important;
  height: 2px !important;
  top: 100% !important;
  bottom: auto !important;
  margin-top: 6px;
  left: 0 !important;
  transform: none !important;
  background-color: var(--theme-color);
}

.main-menu .navigation > li > a {
  position: relative;
}

.main-menu .navigation > li > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  width: 0;
  height: 2px;
  background-color: var(--theme-color);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .main-menu .navigation > li > a::before {
    transition: width 280ms ease;
  }
  .main-menu .navigation > li:not(.current):hover > a::before {
    width: calc(100% - 4px);
  }
  .main-menu .navigation > li:not(.current):hover > a {
    color: var(--theme-color);
  }
}

/* Sticky header echoes the same indicator at a tighter vertical
   offset, since the sticky nav has less padding. */
.main-header .sticky-header .main-menu .navigation > li > a::before,
.main-header .sticky-header .main-menu .navigation > li.current > a:after {
  top: 100%;
  bottom: auto;
  margin-top: 4px;
}


/* ----------------------------------------------------------------
   3. Catering home-page entry-point block
   DOMINANT MOMENT: 3-up stat row with gold values + thin dividers
   bridging the eyebrow and the CTAs - .catering__home__stats
   Match the mockup at pk-catering-home-v1.netlify.app.
   ---------------------------------------------------------------- */

.catering__home {
  background: #344a4c;
  color: #fff;
  overflow: hidden;
}

.catering__home .row { margin: 0; }

.catering__home__img {
  width: 100%;
  min-height: 340px;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.catering__home__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,25,.15) 0%, rgba(52,74,76,.45) 100%);
  pointer-events: none;
}
.catering__home__img__hidden {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.catering__home__img__hidden img {
  width: 100%;
  height: auto;
}

.catering__home__content {
  padding: 56px 48px 56px 40px;
  max-width: 640px;
}

.catering__home .sub____title {
  margin-bottom: 14px;
}

.catering__home__headline {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.5px;
  margin: 0 0 18px;
  text-wrap: balance;
}

.catering__home__lede {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin: 0 0 28px;
}

.catering__home__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-block: 18px;
}
.catering__home__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.catering__home__stats__label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.catering__home__stats__value {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--theme-color);
}

.catering__home__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Normalize btn-one vs btn-two heights. Stock btn-one is padding 17 47
   (no border) → 60px tall. Stock btn-two is padding 11 34 + 1px border
   → 50px tall, so its text sits 5px higher than btn-one. Match padding
   (minus 1px vertical to compensate for the border) and inline-flex so
   the text is centered in identical-height boxes. */
.catering__home__ctas .theme-btn-one,
.catering__home__ctas .theme-btn-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 26px;
}
.catering__home__ctas .theme-btn-two {
  padding: 16px 34px;
}

@media (min-width: 992px) {
  .catering__home .row {
    min-height: 460px;
  }
  .catering__home__img {
    min-height: 100%;
  }
}

@media (max-width: 991px) {
  .catering__home__img { min-height: 280px; }
  .catering__home__content { padding: 40px 28px; }
}
@media (max-width: 575px) {
  .catering__home__stats {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 16px;
  }
  .catering__home__stats li {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}


/* ----------------------------------------------------------------
   4. Mobile menu redesign (full-screen editorial takeover)
   DOMINANT MOMENT: sticky-bottom Reserve / Order CTAs persistently
   in thumb zone - .mm__cta-row
   Replaces the narrow right-drawer pattern with full-screen
   takeover. Keeps existing wrapper classes (.mobile-menu,
   .menu-box, .menu-backdrop, .close-btn) so the existing
   open/close JS in site/templates/js/script.js still wires up
   without changes. All overrides scoped to .mobile-menu.
   ---------------------------------------------------------------- */

/* Reset the existing 300px drawer to full-screen */
.mobile-menu {
  width: 100% !important;
  padding-right: 0 !important;
}

.mobile-menu .menu-backdrop {
  background: rgba(0,0,0,.75) !important;
}

.mobile-menu .menu-box {
  width: 100% !important;
  max-width: 480px;
  background: #0f1719 !important;
  background-image:
    radial-gradient(ellipse at 80% 0%, rgba(201,171,129,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(52,74,76,.55) 0%, transparent 60%),
    linear-gradient(to bottom, #0f1719 0%, #0a1012 100%) !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

/* === Top bar (logo + close) ===
   Sized to match the closed header exactly:
   - logo at top:30, left:40 (same coords as closed-header logo-box)
   - padding-bottom: 30 (same as closed-header logo-box bottom)
   - border-bottom: 1px solid #715B3E (same bronze rule the closed
     header uses to separate itself from the page content)
   The close button (.mm__close) is NOT laid out by this flex — it's
   pulled to position:fixed against the viewport so its right edge
   always equals the closed hamburger's right edge regardless of any
   scrollbar inside .menu-box. See .mm__close below for why fixed. */
.mm__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 30px 30px 40px;
  border-bottom: 1px solid #715B3E;
  position: sticky;
  top: 0;
  background: rgba(15,23,25,.9);
  backdrop-filter: blur(6px);
  z-index: 6;
}
.mm__brand {
  display: block;
  line-height: 0;
}
/* Match the closed-header responsive logo sizes exactly so there's
   no size jump on open/close. See style.css line 4163 (default
   300px) + responsive.css line 781 (225 at <=599) + line 926
   (170 at <=399). */
.mm__brand img {
  display: block;
  width: 225px;
  height: auto;
}
@media (min-width: 600px) {
  .mm__brand img { width: 300px; }
}
@media (max-width: 399px) {
  .mm__brand img { width: 170px; }
}
/* X-only close button. Bare gold X (no circle) so it visually
   mirrors the hamburger - which is also a bare gold icon.
   WHY position: fixed (not static / absolute):
   Prior three attempts placed the X inside the mm__bar flex layout,
   trying to align via padding-right. They consistently failed on a
   real iPhone because:
   1. mm__bar lives inside .menu-box which is overflow-y: auto. When
      content exceeds viewport height, the browser scrollbar takes
      ~15px off the bar's content width, shifting its right edge
      inward.
   2. .menu-box is position: absolute, so any absolute child also
      references it (and inherits the scrollbar deduction).
   position: fixed references the viewport directly — no scrollbar
   deduction. right: 30 then matches the closed header's right
   padding (header padding 30 at <=499; the hamburger sits at
   viewport_right - 30). z-index above the sticky mm__bar so it
   stays clickable. visibility / opacity cascade from .mobile-menu
   handle hide-when-closed correctly. */
.mobile-menu .close-btn.mm__close {
  position: fixed !important;
  top: 32px !important;
  right: 30px !important;
  left: auto !important;
  width: 50px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  color: var(--theme-color) !important;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 0;
  margin: 0 !important;
  transform: none !important;
  transition: color 200ms ease, opacity 200ms ease !important;
  flex-shrink: 0;
  z-index: 10;
}
/* Match the right offset to the closed-header padding at each
   breakpoint so the X always sits exactly where the hamburger was.
   Closed header at:
     <=499px:  header padding 30, outer-box 0 → hamburger right at vw-30
     500-599: header padding 0,  outer-box 0 → hamburger right at vw-0
     600+:    header padding 0,  outer-box 70 → hamburger right at vw-70 */
@media (min-width: 500px) and (max-width: 599px) {
  .mobile-menu .close-btn.mm__close { right: 0 !important; }
}
@media (min-width: 600px) {
  .mobile-menu .close-btn.mm__close { right: 70px !important; }
}
.mobile-menu .close-btn.mm__close i {
  display: block;
  line-height: 1;
}
/* Neutralise the inherited rotate(360deg) open animation + rotate(90deg)
   hover from style.css lines 740-750 — we want a clean static X. */
.mobile-menu-visible .mobile-menu .close-btn.mm__close {
  transform: none !important;
}
@media (hover: hover) {
  .mobile-menu .close-btn.mm__close:hover {
    color: var(--theme-color) !important;
    opacity: 0.7;
    transform: none !important;
  }
}

/* === Nav list ===
   Sized for breathing room first - the menu will scroll a touch
   on iPhone SE (375x667) and sit comfortably on iPhone 13/14/15
   (390x844). flex-grow on .mm__nav distributes any extra space
   evenly across rows on tall screens instead of pooling at the
   bottom. */
.mm__nav {
  padding: 14px 45px 8px 40px;
  position: relative;
  z-index: 2;
}
.mm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: padding 250ms ease;
}
.mm__row:last-child { border-bottom: none; }
.mm__row > a {
  flex: 1;
  color: #fff;
  text-decoration: none;
  display: block;
}
.mm__row--parent {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font: inherit;
  transition: padding 250ms ease;
}
@media (hover: hover) {
  .mm__row:hover, .mm__row--parent:hover { padding-left: 6px; }
  .mm__row:hover .mm__arrow {
    color: var(--theme-color);
    transform: translateX(4px);
  }
  .mm__row--parent:hover .mm__chev {
    color: var(--theme-color);
  }
}
.mm__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  display: block;
}
.mm__label.is-current {
  color: var(--theme-color);
  font-weight: 400;
}
.mm__sub {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 3px;
  font-weight: 400;
}
.mm__arrow, .mm__chev {
  color: rgba(255,255,255,.55);
  font-size: 16px;
  transition: transform 350ms cubic-bezier(.2,.7,.2,1), color 250ms ease;
}
.mm__row--parent[aria-expanded="true"] .mm__chev {
  color: var(--theme-color);
  transform: rotate(180deg);
}

/* === Submenu animated expand === */
.mm__submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms cubic-bezier(.2,.7,.2,1);
}
.mm__submenu > ul {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm__submenu.is-open {
  grid-template-rows: 1fr;
}
.mm__sublink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  border-left: 2px solid rgba(255,255,255,.07);
  margin-left: 8px;
  transition: border-color 200ms ease, color 200ms ease, padding-left 200ms ease;
}
.mm__sublink--overview {
  color: var(--theme-color);
  border-left-color: var(--theme-color);
}
@media (hover: hover) {
  .mm__sublink:hover {
    border-left-color: var(--theme-color);
    color: var(--theme-color);
    padding-left: 22px;
  }
}
.mm__sublink__mark {
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* === Foot info between nav and CTA row ===
   Larger tap targets per Ben - phone/email links and social icons
   need to be comfortable to tap on a phone. */
.mm__contact {
  padding: 14px 45px 10px 40px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
.mm__contact a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.55);
  /* extend the tap target a few px around the visible link */
  padding: 2px 0;
  display: inline-block;
}
.mm__social {
  display: flex;
  gap: 8px;
  padding: 4px 45px 14px 32px;
  position: relative;
  z-index: 2;
}
.mm__social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.7);
  font-size: 22px;
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) {
  .mm__social a:hover { color: var(--theme-color); }
}

/* === Sticky CTA pair at bottom - equal top/bottom padding === */
.mm__cta-row {
  padding: 18px 45px 18px 40px;
  display: flex;
  gap: 10px;
  background: rgba(15,23,25,.95);
  backdrop-filter: blur(8px);
  position: sticky;
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,.07);
  z-index: 5;
  /* On tall phones, push the CTA to the bottom of the menu so the
     bar/nav/contact/social pack at the top and a single breathing
     gap sits between social icons and the CTAs. Avoids dead space
     pooling inside the nav. */
  margin-top: auto;
}
.mm__cta {
  flex: 1;
  padding: 15px 8px;
  text-align: center;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 1px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mm__cta--primary {
  background: var(--theme-color);
  color: #0f1719;
}
.mm__cta--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--theme-color);
}
.mm__cta i { margin-right: 8px; }
@media (hover: hover) {
  .mm__cta--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
  }
}

/* Small phones - smaller label to keep things compact */
@media (max-width: 374px) {
  .mm__label { font-size: 28px; }
  .mm__sublink { font-size: 18px; }
}