/* Hirschen-scoped CSS (port of HIRSCHEN_SCOPED_CSS in themes/hirschen/tokens.ts).
   Two concerns:

   1. Print-brand fidelity for the fall-through menu section: dish names +
      descriptions in lowercase, section labels in tracked ALL CAPS — the
      deliberate hospitality voice of the printed Hirschen menu.

   2. Scroll offset for in-page anchor navigation. The sticky nav is roughly
      190px tall (150px wordmark + 40px padding); without scroll-margin-top
      the section heading lands behind the nav when users click a nav link.
      220px leaves a small breathing gap below the nav. */
.hirschen-theme [data-section="menu"] h2,
.hirschen-theme [data-section="menu"] h3 {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.hirschen-theme [data-section="menu"] p {
  text-transform: lowercase;
}
.hirschen-theme #about,
.hirschen-theme #menu,
.hirschen-theme #reservation,
.hirschen-theme #contact {
  scroll-margin-top: 220px;
}

/* ---------------------------------------------------------------------- */
/* Reservation section — print-heritage overlay for the universal form.   */
/* Restyles the generic form in Hirschen's voice without forking it:      */
/* sharp 2px corners, Cormorant small-caps labels, paper-tone surfaces,   */
/* gold (#C0A36E) hairline accents, espresso bar CTA.                     */
/* ---------------------------------------------------------------------- */
.hirschen-theme [data-section="reservation"] h2 {
  font-family: "Cormorant Garamond", serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  font-weight: 500;
  text-transform: none;
}
.hirschen-theme [data-section="reservation"] .bg-primary\/30 {
  background-color: #C0A36E !important;
  height: 1px;
  width: 56px;
}
.hirschen-theme [data-section="reservation"] form {
  background: #FBF7EE;
  border: 1px solid rgba(42, 37, 32, 0.12);
  padding: 1.75rem 1.5rem;
  position: relative;
}
.hirschen-theme [data-section="reservation"] form::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 1px;
  background: #C0A36E;
}
.hirschen-theme [data-section="reservation"] label {
  font-family: "Cormorant Garamond", serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgba(42, 37, 32, 0.7);
  margin-bottom: 0.5rem;
  display: block;
}
/* Underline via inset box-shadow rather than border-bottom — a border
   baseline elsewhere can silently kill a border-bottom override; box-shadow
   is independent of the border cascade, so the underline survives any future
   refactor or merge resolution mishap. */
.hirschen-theme [data-section="reservation"] input,
.hirschen-theme [data-section="reservation"] select,
.hirschen-theme [data-section="reservation"] textarea {
  border-radius: 2px !important;
  background: transparent !important;
  border: 0 !important;
  font-family: "Lato", system-ui, sans-serif;
  color: #2A2520 !important;
  font-size: 1rem;
  box-shadow: inset 0 -1px 0 rgba(42, 37, 32, 0.25) !important;
  transition: box-shadow 180ms ease;
}
/* Pin input + select to identical box metrics so iOS Safari's native
   <input type="date"> chrome doesn't shift its baseline relative to the
   sibling <select>. -webkit-appearance:none neutralizes UA padding without
   suppressing the date picker (still opens on iOS by type, not by chrome). */
.hirschen-theme [data-section="reservation"] input,
.hirschen-theme [data-section="reservation"] select {
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  padding: 0 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
/* Restore the native select chevron stripped by appearance:none. */
.hirschen-theme [data-section="reservation"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%232A2520' stroke-width='1.4' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.25rem center !important;
  padding-right: 1.25rem !important;
}
.hirschen-theme [data-section="reservation"] input:focus,
.hirschen-theme [data-section="reservation"] select:focus,
.hirschen-theme [data-section="reservation"] textarea:focus,
.hirschen-theme [data-section="reservation"] input:focus-visible,
.hirschen-theme [data-section="reservation"] select:focus-visible,
.hirschen-theme [data-section="reservation"] textarea:focus-visible {
  box-shadow: inset 0 -1px 0 #C0A36E !important;
  outline: none !important;
}
/* Textarea is multiline so a bottom-only underline doesn't read; give it a
   full hairline frame instead. */
.hirschen-theme [data-section="reservation"] textarea {
  border: 1px solid rgba(42, 37, 32, 0.25) !important;
  padding: 0.625rem 0.75rem !important;
  resize: vertical;
  box-shadow: none !important;
}
.hirschen-theme [data-section="reservation"] textarea:focus,
.hirschen-theme [data-section="reservation"] textarea:focus-visible {
  border-color: #C0A36E !important;
  box-shadow: none !important;
}
.hirschen-theme [data-section="reservation"] button[type="submit"] {
  border-radius: 0 !important;
  background: #2A2520 !important;
  color: #F4EDE0 !important;
  font-family: "Cormorant Garamond", serif;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.28em;
  font-weight: 500;
  font-size: 1rem;
  padding: 1rem 1.5rem !important;
  transition: background-color 180ms ease;
}
.hirschen-theme [data-section="reservation"] button[type="submit"]:hover:not(:disabled) {
  background: #C0A36E !important;
  color: #2A2520 !important;
}

/* Illuminated drop cap on the about section's opening sentence — an
   editorial heritage signal from printed memoirs and old menus
   (hirschen/about.tsx DROP_CAP_CSS). */
.hirschen-dropcap::first-letter {
  float: left;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 0.85;
  padding-right: 0.5rem;
  padding-top: 0.2rem;
  color: #C0A36E;
}