/* ================================================================
   Vilana — keep "Vilana Event & Catering" on one line in the header.
   Fix for: on narrow mobile viewports the brand text could wrap
   ("Catering" dropping to a second line) because the two spans
   didn't force single-line text and could be compressed by the
   hamburger/RU controls next to them.

   Mechanism: white-space:nowrap guarantees a single line; font-size
   uses a classic linear "CSS lock" (clamp + calc(rem + vw), no
   multiplication/division operators) to shrink smoothly between
   320px and 400px viewport width, then stays flat at the original
   (desktop) size for every wider viewport — so desktop/tablet
   typography is unchanged.
   ================================================================ */

header .logo-title,
header .logo-subtitle {
  white-space: nowrap;
}

/* 320px -> 1.35rem, 400px -> 1.8rem (today's default size, unchanged) */
header .logo-title {
  font-size: clamp(1.35rem, calc(-0.45rem + 9vw), 1.8rem);
}

/* 320px -> 0.75rem, 400px -> 1rem (today's default size, unchanged) */
header .logo-subtitle {
  font-size: clamp(0.75rem, calc(-0.25rem + 5vw), 1rem);
}

/* Event pages render a slightly larger title today (1.85rem via
   css/custom.css instead of 1.8rem). Same lock, shifted to keep
   that exact desktop size: 320px -> 1.4rem, 400px -> 1.85rem. */
header.header-event .logo-title {
  font-size: clamp(1.4rem, calc(-0.4rem + 9vw), 1.85rem);
}

/* Keep the hamburger button's own width fixed so the shrinking
   brand text is what adapts, never the menu button. */
header #menuToggle {
  flex-shrink: 0;
}

/* ================================================================
   Events nav dropdown — desktop flyout (hover + :focus-within, no
   JS) and mobile <details> accordion inside the burger menu. Shared
   site-wide since the "Events" trigger replaces a single nav link
   on every page's header.
   ================================================================ */

.events-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  width: 15rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 16px;
  border: 1px solid rgba(217, 180, 106, 0.35);
  background: #fffdf9;
  box-shadow: 0 12px 32px rgba(20, 16, 8, 0.12), 0 2px 8px rgba(20, 16, 8, 0.06);
  transition: opacity 150ms ease, visibility 150ms ease;
}

.events-dropdown-item {
  display: block;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
}

.events-dropdown-item:hover,
.events-dropdown-item:focus-visible {
  background: rgba(217, 180, 106, 0.14);
  outline: none;
}

.events-dropdown-title {
  display: block;
  color: #1f2937;
  font-weight: 600;
  font-size: 0.95rem;
}

.events-dropdown-meta {
  display: block;
  margin-top: 0.15rem;
  color: rgba(31, 41, 55, 0.55);
  font-size: 0.78rem;
}

.events-dropdown-item[aria-current="page"] {
  background: rgba(217, 180, 106, 0.16);
}

.events-dropdown-item[aria-current="page"] .events-dropdown-title {
  color: #92610d;
}

/* Mobile accordion — chevron rotates when the <details> is open */
.mobile-events-group[open] .chev-icon {
  transform: rotate(180deg);
}