/* /catering page layout. Tokens + components live in /design-system. */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pd-bone) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 76px; }
.site-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.site-header__brand img { width: 52px; height: 52px; }
.site-header__brand span { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; line-height: 1; }
.site-header__brand em { font-style: normal; color: var(--pd-glaze); }
.site-header__nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header__nav a:not(.btn) {
  font-weight: 600; font-size: 0.875rem; letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
.site-header__nav a:not(.btn):hover { background-size: 100% 2px; }
@media (max-width: 760px) {
  .site-header__nav { display: none; } /* sticky .mobile-cta takes over */
  .site-header__brand span { font-size: 1.05rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); } }
.hero__copy .lead { max-width: 34ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: 0; padding: var(--space-4) 0 0; list-style: none;
  font-size: var(--text-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero__proof li::before { content: "★ "; color: var(--pd-glaze); }
.hero__proof a { text-decoration: underline; text-decoration-color: var(--pd-glaze); text-underline-offset: 3px; }
.hero__media { position: relative; }
.hero__photo {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  border: var(--border); border-radius: var(--radius-lg) var(--radius-lg) 120px var(--radius-lg);
  box-shadow: 10px 10px 0 var(--pd-navy);
}
.hero__seal {
  position: absolute; left: -28px; bottom: -36px;
  width: clamp(96px, 18vw, 160px); height: auto;
  border-radius: 50%; background: var(--pd-bone);
  padding: 6px;
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__seal { animation: none; } }
@media (max-width: 899px) { .hero__seal { left: auto; right: -8px; bottom: -32px; } .hero__photo { box-shadow: 6px 6px 0 var(--pd-navy); } }

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: var(--space-3); max-width: 46rem; margin-bottom: var(--space-7); }
.section-head .lead { margin-top: var(--space-2); }

/* ---------- Occasions ---------- */
.occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.occasion { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-5); border-top: 3px solid var(--pd-navy); }
.occasion__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--pd-navy); color: var(--pd-bone); font-size: 1.25rem; line-height: 1;
}

/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--space-6); align-items: stretch; }
.package { display: flex; flex-direction: column; gap: var(--space-4); }
.package .btn { margin-top: auto; align-self: flex-start; }
.package__name { font-family: var(--font-display); font-weight: 400; font-size: 2rem; text-transform: uppercase; line-height: 1; }
.package__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.package__list li { padding-left: 1.6em; position: relative; }
.package__list li::before { content: "★"; position: absolute; left: 0; color: var(--pd-glaze); }
.package--featured { background: var(--pd-navy); color: var(--pd-bone); box-shadow: 6px 6px 0 var(--pd-glaze); }
@media (min-width: 960px) { .package--featured { transform: translateY(-16px); } }
.packages__note { margin-top: var(--space-7); text-align: center; }

/* ---------- Steps ---------- */
.section--navy .eyebrow::before { color: var(--pd-glaze); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.step { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid rgba(244, 240, 234, 0.28); }
.step__num { font-family: var(--font-display); font-size: 4.5rem; line-height: 0.9; color: var(--pd-glaze); }
.step p { color: rgba(244, 240, 234, 0.82); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); }
.gallery img { width: 100%; height: clamp(200px, 26vw, 380px); object-fit: cover; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Quote ---------- */
.quote { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .quote { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); } .quote__intro { position: sticky; top: 110px; } }
.quote__seal { width: 120px; opacity: 0.9; }
@media (max-width: 959px) { .quote__seal { display: none; } }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote__submit { width: 100%; margin-top: var(--space-6); }
.form-status { margin-top: var(--space-3); min-height: 1.5em; font-weight: 500; color: var(--color-error); }
.quote__done { display: grid; justify-items: center; gap: var(--space-5); text-align: center; padding: var(--space-8) var(--space-6); }
.quote__done[hidden] { display: none; }

/* ---------- FAQ ---------- */
.faq { border-top: var(--border); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-5); max-width: 60ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--pd-navy); color: var(--pd-bone); padding-bottom: calc(var(--space-8) + 64px); }
.site-footer .bunting { background-color: var(--pd-navy); }
.site-footer__inner { display: grid; justify-items: center; gap: var(--space-5); padding-top: var(--space-8); text-align: center; }
.site-footer__seal { width: 88px; border-radius: 50%; background: var(--pd-bone); padding: 4px; }
.site-footer__tag { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }
.site-footer__address a { text-decoration-color: var(--pd-glaze); text-underline-offset: 3px; }
.site-footer__address a:hover { color: var(--pd-glaze); }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); }
.site-footer__nav a { font-weight: 600; font-size: 0.875rem; letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none; }
.site-footer__nav a:hover { color: var(--pd-glaze); }
.site-footer__legal { font-size: var(--text-small); opacity: 0.7; }
@media (min-width: 761px) { .site-footer { padding-bottom: var(--space-8); } }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  box-shadow: 0 10px 30px -8px rgba(18, 21, 47, 0.55);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.mobile-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 761px) { .mobile-cta { display: none; } }

/* Content still to be confirmed with Parlor Dallas — add ?review to the URL to see it */
.review [data-confirm] { outline: 2px dashed var(--pd-berry); outline-offset: 2px; }