/* ==========================================================================
   catering.css — Catering page (/catering/)
   Loaded only on the catering page, after styles.css + nav.css, so it can lean
   on the brand tokens and on the cat-* menu styles that already live in
   styles.css. Its whole job is to bring this page into the same light, quiet
   language as /loyalty/ and /events/: a cream opener instead of a dark photo
   hero, a calmer heading scale, the table photo in a band of its own, and one
   dark green moment at the very end.
   Only the blocks that read as pre-redesign are nudged. The tray menu, the
   packages, the plates and their prices keep the styles they already had.
   ========================================================================== */

/* Calmer heading scale: one big H1, modest section heads. Without this the
   display scale runs to ~74px here against ~43px on loyalty and events, which
   is the single loudest reason the page read as a different site. */
#main .section-head .display { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }

/* --- Opener ------------------------------------------------------------- */
#top-intro { padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: clamp(24px, 3vw, 38px); }
.cat-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.cat-intro__cta {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(22px, 3vw, 32px);
}

.cat-photo__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.cat-photo__media {
  margin: 0; max-width: 440px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.cat-photo__media img { display: block; width: 100%; height: auto; }
.cat-photo__title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin: 0 0 16px; }
.cat-photo__copy .lede { max-width: 44ch; }
.cat-photo__body {
  font-family: var(--body); font-size: 1rem; line-height: 1.6;
  color: var(--ink); opacity: .85; max-width: 46ch; margin: 0;
}

/* --- Blocks nudged into the new language -------------------------------- */
/* Rounded, quiet cards, like the ones on loyalty and events. */
#main .cat-section,
#main .cat-package { border-radius: 14px; }
#main .cat-section { overflow: hidden; }
#main .cat-plate { border-radius: 12px; }
/* Card edges stay in the green line colour. Orange is for the small accents
   (the eyebrows, the chevron, the per-person label), not for whole borders. */
#main .cat-section:hover { border-color: rgba(34, 76, 36, .3); }
#main .cat-section[open] { border-color: rgba(34, 76, 36, .34); }
#main .cat-section > summary.cat-section__head:hover { background: rgba(34, 76, 36, .04); }
/* The rounded card clips its own overflow, and a closed accordion is exactly
   as tall as its summary, so the shared focus ring (drawn 2 to 5px outside the
   summary) was being clipped away and keyboard focus was invisible on all
   seven heads. Same two-tone ring, drawn inside the box instead. */
#main .cat-section > summary.cat-section__head:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px rgba(34, 76, 36, .8);
}
#main .cat-package__head { border-bottom: 1px solid var(--line); }
/* Fine print: the short orange dash both sibling pages use for a bullet. The
   rotated square was the retired diamond motif. */
#main .terms-list li { padding-left: 22px; }
#main .terms-list li::before {
  left: 0; top: 1.6em; width: 10px; height: 1px;
  background: var(--orange); transform: none;
}

/* --- Order band (the one dark-green moment) ----------------------------- */
.cat-order { background: var(--green); color: var(--cream); padding: clamp(56px, 9vh, 104px) 0; }
.cat-order__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cat-order .display { font-size: clamp(1.9rem, 4vw, 3rem); margin: 8px 0 16px; }
.cat-order .lede--cream { margin: 0 auto; max-width: 56ch; }
.cat-order__cta {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin: clamp(26px, 3.5vw, 38px) 0 0;
}
.cat-order__note {
  font-family: var(--body); font-size: .92rem; color: rgba(255, 246, 240, .82);
  margin: clamp(22px, 3vw, 30px) 0 0;
}
.cat-order__note a { color: var(--cream); font-weight: 600; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .cat-photo__inner { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .cat-photo__copy { order: 1; }
  .cat-photo__media { order: 2; }
  .cat-photo__media { max-width: 100%; }
  .cat-photo__copy .lede,
  .cat-photo__body { max-width: none; }
}
@media (max-width: 540px) {
  /* Packages stack, like every other card pair on loyalty and events. The old
     phone layout was a horizontal snap row whose negative margins (28px) were
     wider than the page gutter (20px), so it dragged the whole page sideways. */
  #main .cat-packages {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    margin: 32px 0 0; padding: 0; overflow: visible;
  }
  /* The accordion card carries its own inner padding; the extra 18px on the
     card doubled it and squeezed the item names and prices. */
  #main .cat-section { padding: 0; }
}

/* --- The two group packages, as toggles ---------------------------------
   Collapsed they are just the headline price, which is what somebody is
   comparing. Open, the full choose-list. Both were expanded before and the
   section ran to 1,248px, a fifth of the page, for two numbers most people
   want to read side by side. */
#main .cat-package.cat-section { display: block; }
#main .cat-package > summary.cat-package__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 18px;
}
.cat-package > summary .cat-package__pp,
.cat-package > summary .cat-package__price { margin: 0; }
/* the chevron sits after the price rather than being pushed to the far edge */
.cat-package > summary .cat-section__chevron { margin-left: auto; }
.cat-packages { display: grid; gap: clamp(14px, 2vw, 18px); }

/* --- The fine print, as one toggle --------------------------------------
   Five rules nobody reads until they need one, so they wait behind a line. */
.cat-fine > summary h2 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: 1.15rem; color: var(--green); margin: 0;
}
.cat-fine .terms-list { margin: 0; }

/* The sticky order bar inherits everything from nav.css, which shows it at
   1080px and below, exactly when the nav becomes a hamburger. */

/* ---------- The three-way chooser ----------------------------------------
   Reuses the menu pages' .menu-jump tab bar. Catering's content is centred,
   so the bar is too, and the labels shrink on phones: "INDIVIDUAL PLATES"
   is long enough at the shared size to wrap onto a second line. */
#food .menu-jump__inner { justify-content: center; }

@media (max-width: 560px) {
  #food .menu-jump__inner { gap: 6px 16px; }
  #food a { font-size: .68rem; letter-spacing: .1em; }
}

/* The script gives each panel tabindex="0" so it can be reached from the tab
   bar. Keep the ring for keyboard users, drop it for the click that follows
   a tab press, which would otherwise outline the whole section. */
#main [role="tabpanel"]:focus:not(:focus-visible) { outline: none; }

/* The chooser sits directly above the first panel, so it does not need the
   full section gap under it. */
#main [role="tabpanel"].section { padding-top: clamp(28px, 4vh, 48px); }

/* The headline was removed from the page at Riad's request, but the page still
   has to tell a search engine and a screen reader what it is, so the h1 stays
   and is simply not painted. Not display:none, which hides it from both. */
.cat-intro__h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Below 1080px the nav becomes a hamburger and the sticky bar at the foot of
   the screen appears, already carrying "Make an order". The one at the top is
   then the same button twice, so it goes, and the opener collapses to nothing.
   The section itself stays in the page: the h1 inside it is what tells a search
   engine what this page is, and Google indexes the phone rendering. */
@media (max-width: 1080px) {
  #top-intro .cat-intro__cta { display: none; }
  #top-intro { padding-top: 0; padding-bottom: 0; }
}

/* Five plates now that the shrimp one is gone, laid out three then two with
   the pair centred under the row of three rather than hanging off to the left.
   Six half-columns is what lets the second row start half a column in. The
   :nth-last-child(2) guard means this only fires when there are exactly five,
   so adding or dropping a plate later falls back to the default grid instead
   of silently mis-aligning. */
@media (min-width: 760px) {
  #plates .cat-plates { grid-template-columns: repeat(6, 1fr); }
  #plates .cat-plate { grid-column: span 2; }
  #plates .cat-plate:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* ---------- Size labels over the prices they belong to --------------------
   The toggle row ends in the chevron, so the size labels were pushed 44px
   (a 28px chevron plus the row's 16px gap) left of the prices underneath,
   and it was not obvious which tray each price was for.

   Note the sub-headers, "By the skewer", carry no chevron, so THEIR labels
   already sat right over the prices. The fix is therefore to give the rows
   and the sub-headers the same 44px gutter the chevron already takes, so all
   three land on one line rather than the two different ones they land on now.
   Scoped above 540px: below that the rows stack and the prices re-flow, so
   the gutter would just be a pointless indent. */
@media (min-width: 541px) {
  #main .cat-section {
    --card-pad: clamp(20px, 2.5vw, 30px);  /* the card's own side padding */
    --chevron-gutter: 44px;                /* 28px chevron + the head's 16px gap */
  }
  #main .cat-section .cat-item { padding-right: var(--chevron-gutter); }
  /* The sub-head needs the card padding as well as the gutter. It asks for a
     side margin, but the shared .cat-section > .cat-section__head rule is more
     specific and zeroes it, so the sub-head is full-bleed and starts its inset
     from the card edge rather than from the padded column the rows sit in. */
  #main .cat-section__head--sub { padding-right: calc(var(--card-pad) + var(--chevron-gutter)); }
}