/* ==========================================================================
   MENU — Design Fix Patch
   Generated from a live audit of menuphilly.com (splash + reservations page)
   Loaded after styles.css via index.html and reservations.html.

   Revision 2: removed the always-visible affordance lines from Revision 1
   (input underline, button underlines, decorative rule) after a follow-up
   audit found they were rendering as permanent stray lines rather than the
   intended hover-only cues. See audit notes for details.

   Revision 3: olive stays as the site's primary color throughout — no
   broader Vol. 2 migration. Added Deep Verdant (#2A670D) as a sparing
   accent in the "No Guarantees." secondary heading, the "Reserve your
   seat" button text, and the Date/Time/Location detail values. A matching
   change for the handle on congratulations.html is made directly in that
   file, since it isn't one of the two pages that load this stylesheet.

   Revision 4: added the Date value to the accent group alongside Time and
   Location — all three detail values are now Deep Verdant.

   Revision 5: tightened the vertical gap between the email field, the
   "Reserve your seat" button, and the "party of two" link; tightened the
   spacing between the Date/Time/Location rows; enlarged the "Ten Seats."
   heading and the "MENU" splash wordmark.

   Revision 6: fixed a real regression from Revision 3 — the ID-scoped
   Deep Verdant color on #waitlist-form .submit-btn out-specified the
   original :hover rule, silently killing hover feedback on "Reserve your
   seat." Added a matching :hover override. Also restored comfortable tap
   target height on both buttons (they'd been squeezed below the 24px
   accessibility floor in Revision 5's tightening pass), and added a
   focus-visible outline on the email input, which previously had no
   focus indicator at all.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) TRACKING + TYPE SCALE — consolidate into named roles
   -------------------------------------------------------------------------- */
:root {
  --menu-bone: #F5F2EB;
  --menu-charcoal: #1E1E1C;
  --menu-olive: #5E6650;

  /* was #8E8A84 → ~3.06:1 on bone (fails AA for normal text).
     Darkened to clear 4.5:1 while keeping the same hue/mood. */
  --menu-muted: #6B6862;

  /* Sparing accent, added in Revision 3 — used in exactly three spots. */
  --menu-deep-verdant: #2A670D;

  --tracking-display: 0.02em;
  --tracking-label:   0.14em;
  --tracking-cta:     0.18em;

  --size-micro: 11px;
  --size-cta:   12px;
  --size-body:  16px;
}


/* --------------------------------------------------------------------------
   2) CONTRAST FIX — secondary/muted text
   -------------------------------------------------------------------------- */
.detail-label,
.handle {
  color: var(--menu-muted) !important;
}

.detail-value {
  color: var(--menu-charcoal) !important;
  font-weight: 400;
}


/* --------------------------------------------------------------------------
   2b) DEEP VERDANT ACCENT — Revision 3, used sparingly in three places
   -------------------------------------------------------------------------- */
.heading-secondary {
  color: var(--menu-deep-verdant) !important;
}

#waitlist-form .submit-btn {
  color: var(--menu-deep-verdant) !important;
}

/* Revision 6: without this, #waitlist-form .submit-btn (above) out-specifies
   the plain .submit-btn:hover rule in styles.css, so hovering did nothing. */
#waitlist-form .submit-btn:hover {
  color: var(--menu-olive) !important;
}

#detail-date,
#detail-time,
#detail-address {
  color: var(--menu-deep-verdant) !important;
}


/* --------------------------------------------------------------------------
   3) TRACKING + SIZE CONSOLIDATION
   -------------------------------------------------------------------------- */
.heading-primary.heading-primary--accent {
  letter-spacing: var(--tracking-display) !important;
}

.heading-secondary {
  letter-spacing: var(--tracking-label) !important;
}

.detail-label,
.handle,
.enter-cue span {
  font-size: var(--size-micro) !important;
  letter-spacing: var(--tracking-label) !important;
}

.submit-btn {
  font-size: var(--size-cta) !important;
  letter-spacing: var(--tracking-cta) !important;
}

.party-of-two-btn {
  font-size: var(--size-micro) !important;
  letter-spacing: var(--tracking-label) !important;
  color: var(--menu-muted) !important;
}


/* --------------------------------------------------------------------------
   4) AFFORDANCE — removed in Revision 2
   The input underline, submit-btn underline, and party-of-two-btn underline
   that lived here were rendering as permanent visible lines rather than the
   intended hover/focus-only cues, and have been removed. If affordance is
   revisited, any new rule should be verified at rest (not just on :hover)
   before shipping.
   -------------------------------------------------------------------------- */

input[type="email"]::placeholder {
  color: var(--menu-muted);
}

/* Revision 6: the input previously had no focus indicator at all. This
   only appears on keyboard focus (:focus-visible), not permanently —
   consistent with the lesson from Revision 2's always-visible lines. */
input[type="email"]:focus-visible {
  outline: 2px solid var(--menu-olive) !important;
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5) SPACING RHYTHM — snap the page's vertical rhythm to a strict 8px grid
   -------------------------------------------------------------------------- */
.section-heading {
  margin-bottom: 40px !important;
}

.section-copy {
  margin-bottom: 48px !important;
  line-height: 1.75;
}

.detail-block {
  margin-top: 32px !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.detail-row {
  margin-bottom: 8px !important;
}

/* Revision 5: tighten the cluster of email field / submit button / party-of-two link */
form {
  gap: 0.2rem !important;
}

.submit-btn {
  padding: 0.6rem 0 !important;
}

.party-of-two-btn {
  padding: 0.5rem 0 !important;
}

/* Revision 5: enlarge the "Ten Seats." heading and the "MENU" splash wordmark */
.heading-primary {
  font-size: clamp(3.2rem, 8vw, 4.6rem) !important;
}

.wordmark {
  font-size: clamp(4.5rem, 14vw, 11rem) !important;
}

.detail-label {
  margin-bottom: 4px !important;
}

.handle {
  margin-top: 40px !important;
}

.page.page--content {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}


/* --------------------------------------------------------------------------
   6) OPTIONAL decorative rule — removed in Revision 2
   The 40px olive rule above the heading has been removed; it was shipped
   despite being marked optional, and read as a stray line rather than an
   intentional accent.
   -------------------------------------------------------------------------- */