/* Kama'aina Catering & Tent Rentals theme.
   Loaded after site.css (the shared structure). Only palette, type and the surfaces where the shared sheet carries a
   brand colour.

   Their own look (kamaainaservices.com): a black palm-tree logo with a red dot on white, a black nav bar, red buttons,
   Montserrat headings in capitals, Roboto Condensed text, and big photographs of their own tents and events.
   It must not read as Keneke's (yellow and red, hard ink), Natsunoya (sumi and lavender) or Marujyu (sage and lauhala). */

:root {
  --ink: #141414;
  --ink-2: #3A3A3A;
  --muted: #5F5F5F;
  --line: #E4E4E4;
  --line-strong: #BDBDBD;
  --paper: #F5F5F3;
  --page: #FFFFFF;

  --black: #111111;
  --brand-red: #D32A2F;  /* their buttons and the dot in the logo */
  --brand-red-dark: #B01F24;

  /* The shared sheet's highlight (primary buttons, chips, headings on dark bands) is their red here, with white text. */
  --yellow: #D32A2F;
  --yellow-soft: #F8D7D8;
  --yellow-wash: #FDF1F1;

  --leaf: #2A6439;
  --leaf-soft: #DDEDDF;
  --navy: #B01F24;      /* links and focus rings */
  --navy-soft: #F8D7D8;
  --red: #B3261E;       /* errors stay an error red */
  --red-soft: #FBE4DE;

  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --script: "Montserrat", Arial, sans-serif;

  --r: 6px;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.18);
}

body { font-size: 1.0625rem; }
.mono, .p-price, .pkg-price, .price b { font-variant-numeric: tabular-nums; }

/* --- type: Montserrat capitals for the big headings, as on their site --- */
.hero h1,
.page-head h1,
.section-head h2,
.places-teaser h2,
.cat-head h2,
.h-section,
.menu-head h2,
.place-body h2,
.book-head h2 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.loc h3, .tile-name, .board-sec h3, .step legend, .loc-sign-name { font-weight: 700; }
.pkg-card h3 { font-family: var(--display); font-weight: 700; }
.eyebrow { color: var(--brand-red); font-weight: 700; letter-spacing: 0.14em; }

/* --- chrome: white logo bar, black nav bar underneath (their layout) --- */
.topbar { background: var(--black); color: #F2F2F2; border-bottom: 0; font-weight: 500; }
.topbar a { color: #FFFFFF; }
.masthead { background: #FFFFFF; border-bottom: 4px solid var(--black); }
.brand { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
.brand img { width: auto; height: 70px; }
.nav a { color: var(--black); font-family: var(--display); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.nav a:hover { border-bottom-color: var(--brand-red); }
.nav a[aria-current="page"] { border-bottom-color: var(--brand-red); }
.masthead a:focus-visible { outline-color: var(--brand-red); }

/* Buttons: their red with white text, squared-off pills. */
.btn { border: 1.5px solid var(--black); border-radius: 999px; font-family: var(--display); font-weight: 700; }
.btn--primary { background: var(--brand-red); border-color: var(--brand-red); color: #FFFFFF; box-shadow: none; }
.btn--primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); transform: none; }
.btn--primary:active { transform: none; box-shadow: none; }
.jump a.is-book { background: var(--brand-red); border-color: var(--brand-red); color: #FFFFFF; }
.chip[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #FFFFFF; }

/* --- borders: fine grey, not heavy ink --- */
.loc, .tile, .pkg-card { border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.ref, .ref:last-child, .posts li, .posts li:last-child { border-width: 1px; border-color: var(--line-strong); }
.table-scroll, .stepper, .estimate, .notice { border: 1px solid var(--line-strong); }
.menu { border-top: 1px solid var(--line-strong); }
.board-sec h3::after { height: 1px; background: var(--line-strong); }
.place-group { border-top: 3px solid var(--black); }
.story-head { border-bottom: 3px solid var(--black); }
.tile:hover { transform: none; box-shadow: var(--shadow-lg); }

/* --- home: their own tent photo, full-bleed, filling the first screen under the header ---
   The photo-hero structure is Natsunoya's (site.css doesn't carry it yet: site/public is still copied per client). */
.hero--photo {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100vh - 150px);
  min-height: calc(100svh - 150px);
  border-bottom: 0;
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 820px) {
  .hero--photo { min-height: calc(100vh - 190px); min-height: calc(100svh - 190px); }
}
.hero--photo .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: -2;
}
/* A scrim so the white words hold up over the bright tent roof. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.6) 48%, rgba(10, 10, 10, 0.2) 82%, rgba(10, 10, 10, 0.05) 100%),
    linear-gradient(rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3));
}
.hero-photo-in { padding-block: 56px; max-width: 46rem; color: #fff; }
.hero-photo-in .eyebrow { color: #fff; }
.hero-photo-in h1 { font: 800 clamp(2.25rem, 5.4vw, 4rem)/1.05 var(--display); margin: 10px 0 14px; text-wrap: balance; color: #fff; }
.hero-photo-in .lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, 0.94); margin-bottom: 26px; }
.hero-photo-in .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo-in .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.hero-photo-in .btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hero-photo-in .btn--primary { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.hero-photo-in .btn--primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }

/* "What we cater": a black band with white tiles. */
.section--paper { background: var(--black); border-block: 0; }
.section--paper .section-head h2 { color: #FFFFFF; }
.section--paper .section-head p, .section--paper .section-foot { color: #E6E6E6; }

/* Booking: black band, red headings keep the brand; the shared white-on-dark text rules hold. */
.book { background: var(--black); border-block: 0; }
.book-head h2, .book .step legend, .book .menu-lines-h, .book .sent h3 { color: #FFFFFF; }
.book .hint--warn { color: #FF9A9D; }
.book .stepper { border-color: transparent; }
/* The picked chip on the black band: red, so it doesn't disappear into the band. */
.book .chip[aria-pressed="true"] { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.pkg-tier { display: block; color: var(--brand-red); font-weight: 700; }

/* Price tiers on the menu cards. */
.price-tiers { margin-top: -4px; font-size: 0.9375rem; color: var(--ink-2); }
.price-tiers b { color: var(--brand-red); }

.footer { background: var(--black); }
.footer h2 { color: var(--brand-red); }
.footer-base { border-top-color: rgba(255, 255, 255, 0.14); }
.footer-top { color: #FFFFFF; }
.signoff { font-family: var(--display); font-weight: 800; text-transform: uppercase; }

.loc-sign { background: var(--black); color: #FFFFFF; border: 0; border-radius: var(--r); }
.place { border-top: 1px solid var(--line-strong); }
.place-media img { border: 0; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.cat-photos img { border-radius: var(--r); }
.cta-box { background: var(--paper); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.included::before { background: var(--brand-red); border-radius: 50%; }
.special-tag { background: var(--brand-red); }
.keith { border: 0; border-radius: 50%; }

/* Menu choice chips (shared with the Menus page script). */
.menu-chips { position: sticky; top: 0; z-index: 10; background: #FFFFFF; border-block: 1px solid var(--line); }
.menu-chips .chips { flex-wrap: nowrap; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.menu-chips .chips::-webkit-scrollbar { display: none; }
.menu-chips .chip { flex: none; border-width: 1.5px; font-size: 0.9375rem; }
html { scroll-padding-top: 72px; }
.board--one { columns: 1; max-width: 680px; min-height: calc(100vh - 120px); }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.board-sec.is-shown { animation: chip-in 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { .board-sec.is-shown { animation: none; } }
.page-head .chips-nav .btn:not(.btn--ghost) { display: none; }

/* The hero words line up with the logo, not centred in a narrow column. */
.hero-photo-in { max-width: 1140px; }
.hero-photo-in > * { max-width: 46rem; }
/* Montserrat capitals run wide: on a phone the five nav links need to fit one row. */
@media (max-width: 480px) {
  .nav ul { gap: 4px 14px; }
  .nav a { font-size: 0.75rem; letter-spacing: 0.02em; }
}

/* Photos on the venues & rentals page: a two-up grid of their own event photos (the structure is Natsunoya's). */
.place-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 6px 0 20px; max-width: 900px; }
.place-photos figure { margin: 0; }
.place-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
.place-photos figcaption { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }