/* Shared styles for all full pages (Tailwind CDN handles utilities). */
:root {
  --font-display: 'DynaPuff', ui-rounded, 'Trebuchet MS', system-ui, sans-serif;
}

/* DynaPuff for short display text: nav, pill buttons, labels, headings. */
.font-display,
.eyebrow,
.btn-yellow,
.btn-cta,
a.rounded-full,
button.rounded-full,
#site-header nav a,
#mobile-drawer nav a {
  font-family: var(--font-display);
}
#site-header nav a, #mobile-drawer nav a { letter-spacing: 0; }

/* ---------- CTA pill used for email inquiry actions ---------- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  max-width: 100%; text-align: center; text-transform: uppercase;
  font-weight: 700; font-size: .9375rem; line-height: 1.25; letter-spacing: .02em;
  padding: .875rem 1.5rem; border-radius: 9999px;
  background: #FFC20E; color: #1F1916; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2), 0 4px 6px -4px rgba(0,0,0,.2);
  transition: background-color .15s;
}
.btn-cta:hover { background: #FFCE3E; }
.btn-cta svg { width: 1.25rem; height: 1.25rem; flex: none; }
@media (min-width: 640px) { .btn-cta { font-size: 1rem; } }

/* ---------- Catering inquiry forms (/catering, /corporate-catering, /weddings) ---------- */
.form-label { display: block; margin-bottom: .375rem; font-weight: 700; font-size: .875rem; color: #1F1916; }
.form-label .form-optional { font-weight: 400; color: #6B5F56; }
.form-input {
  display: block; width: 100%; padding: .75rem 1rem; border-radius: .75rem;
  border: 1px solid #D8D0C8; background: #fff; color: #1F1916; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-input::placeholder { color: #6B5F56; opacity: .7; }
.form-input:focus { outline: none; border-color: #D62027; box-shadow: 0 0 0 3px rgba(214,32,39,.18); }
select.form-input { appearance: none; padding-right: 2.5rem; background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5F56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
textarea.form-input { resize: vertical; min-height: 7rem; }
.btn-cta:disabled { opacity: .6; cursor: not-allowed; }
.inquiry-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Internal-page hero (Catering, Corporate, Weddings, Fundraisers) ---------- */
.page-hero { position: relative; padding-top: 5rem; }
.page-hero__frame {
  position: relative; overflow: hidden; display: flex;
  min-height: max(320px, 46vh);
}
@media (min-width: 640px) { .page-hero__frame { min-height: max(380px, 46vh); } }
.page-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-pos, 50% 50%);
}
/* Corporate Catering: keep the truck and the smoke source (grill) in frame */
.page-hero__img--corporate { object-position: 30% 85%; }
@media (min-width: 640px) { .page-hero__img--corporate { object-position: 50% 85%; } }
@media (min-width: 1024px) { .page-hero__img--corporate { object-position: 50% 85%; } }
.page-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,15,13,.85), rgba(20,15,13,.5), rgba(20,15,13,.2));
}
.page-hero__content {
  position: relative; width: 100%; max-width: 80rem; margin: 0 auto;
  padding: 2rem 1rem 2.5rem; display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 640px) { .page-hero__content { padding: 2rem 1.5rem 3.5rem; } }
@media (min-width: 1024px) { .page-hero__content { padding-left: 2rem; padding-right: 2rem; } }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
  color: #FFC20E; font-weight: 700; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
}
.page-hero__eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: #FFC20E; }
@media (min-width: 640px) { .page-hero__eyebrow { font-size: .875rem; } }
.page-hero__title {
  font-family: var(--font-display); font-weight: 700; color: #fff; max-width: 48rem;
  font-size: 1.875rem; line-height: 1.2;
}
@media (min-width: 640px) { .page-hero__title { font-size: 2.25rem; } }
@media (min-width: 768px) { .page-hero__title { font-size: 3rem; } }
.page-hero__lead { color: rgba(255,248,236,.9); margin-top: 1rem; max-width: 42rem; font-size: 1rem; }
@media (min-width: 640px) { .page-hero__lead { font-size: 1.125rem; } }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Homepage hero ---------- */
.home-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}
.home-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 42% 50%;
}
@media (min-width: 640px) { .home-hero__img { object-position: 50% 55%; } }
@media (min-width: 1024px) { .home-hero__img { object-position: 50% 50%; } }
.home-hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(20,15,13,.55) 0%, rgba(20,15,13,.3) 55%, rgba(20,15,13,.08) 100%);
}
.home-hero__content {
  position: relative; width: 100%; max-width: 80rem; margin: 0 auto;
  padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.home-hero__logo {
  width: clamp(210px, min(62vw, 44svh), 300px); height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
@media (min-width: 768px) { .home-hero__logo { width: clamp(300px, min(34vw, 46svh), 440px); } }
.home-hero__tagline {
  font-family: var(--font-display); font-weight: 600; color: #fff; text-wrap: balance;
  margin-top: 1.25rem; max-width: 46rem; font-size: 1.25rem; line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
@media (min-width: 640px) { .home-hero__tagline { font-size: 1.625rem; } }
@media (min-width: 1024px) { .home-hero__tagline { font-size: 1.875rem; } }
.home-hero__cta { margin-top: 1.75rem; }