:root {
  --night-background: #1a1a1e;
  --booking-red: #f14f38;
  --booking-red-hover: #f57360;
}

.nav-actions { display: flex; align-items: center; gap: 16px; }
.btn, .nav .btn-ghost {
  background: var(--booking-red);
  border-color: var(--booking-red);
  color: #ffffff;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover, .nav .btn-ghost:hover {
  background: var(--booking-red-hover);
  border-color: var(--booking-red-hover);
  color: #ffffff;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--band, #f4f4f5); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
.theme-toggle:focus-visible, .btn:focus-visible, .nav .btn-ghost:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night-background);
  --ink: #efeff1;
  --muted: #efeff1;
  --rule: #45454b;
  --band: var(--night-background);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .theme-toggle:hover { background: #2b2b31; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
@media (max-width: 760px) {
  .nav-actions { gap: 10px; }
  .nav .btn-ghost { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav .btn-ghost { transition: none; }
}

/* Preserve the wordmark proportions and keep both color themes legible. */
.nav { gap: 20px; }
.brand { display: inline-flex; align-items: center; flex: 0 1 220px; min-width: 0; min-height: 40px; }
.brand-logo { display: block; width: 100%; max-width: 220px; height: auto; }
.brand-logo-night { display: none; }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.nav-actions { flex: none; }
html[data-theme="dark"] .brand-logo-day { display: none; }
html[data-theme="dark"] .brand-logo-night { display: block; }
@media (max-width: 760px) {
  .nav { gap: 12px; }
  .brand { flex-basis: 190px; }
}
@media (max-width: 380px) {
  .nav { flex-wrap: wrap; }
  .brand { flex-basis: 180px; }
  .nav-actions { margin-left: auto; }
}