/* WCAG AA color and interactive-control refinements.
   These rules intentionally preserve the existing layout, sizing and spacing. */
:root {
  --accessible-teal: #286b5c;
  --accessible-teal-dark: #174d42;
  --accessible-gold: #8a4d00;
  --accessible-gold-hover: #633700;
  --accessible-gold-light: #ffd08a;
  --accessible-body-text: #444;
}

body {
  color: var(--accessible-body-text);
}

#topbar,
#topbar.topbar-transparent {
  background: rgba(26, 24, 22, 0.94) !important;
  color: #fff !important;
}

#topbar i {
  color: var(--accessible-gold-light) !important;
}

/* Warm brand color on white and other light surfaces. */
a {
  color: var(--accessible-gold) !important;
}

a:hover,
a:focus {
  color: var(--accessible-gold-hover) !important;
  text-decoration: underline;
}

.section-title h2 span,
.about .content ul i,
.contact .info i {
  color: var(--accessible-gold);
}

.about .content p,
.moretext.about-text {
  color: #555 !important;
}

/* White navigation text now has at least AA contrast. */
#header.header-transparent,
.nav-menu .dropdown {
  background-color: var(--accessible-teal) !important;
}

#topbar a,
#header a,
.nav-menu a,
.nav-menu .dropdown a,
.ada a {
  color: #fff !important;
}

#header a:hover,
#header a:focus,
.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu .dropdown a:hover,
.nav-menu .dropdown a:focus {
  color: #fff !important;
  background-color: var(--accessible-teal-dark);
  text-decoration: none;
}

/* Mobile navigation uses a light panel, so its links remain dark. */
.mobile-nav a {
  color: #333 !important;
}

.mobile-nav a:hover,
.mobile-nav a:focus {
  color: #fff !important;
  background-color: var(--accessible-teal-dark) !important;
}

.mobile-nav .book-a-table a,
.nav-menu .book-a-table a {
  background: #07581a !important;
  color: #fff !important;
}

.mobile-nav .book-a-table a:hover,
.mobile-nav .book-a-table a:focus,
.nav-menu .book-a-table a:hover,
.nav-menu .book-a-table a:focus {
  background: #003f11 !important;
}

/* Buttons retain the warm brand appearance with readable white text. */
.back-to-top i,
.book-a-table .php-email-form button[type="submit"],
.contact .php-email-form button[type="submit"] {
  background: var(--accessible-gold) !important;
  color: #fff !important;
}

.back-to-top i:hover,
.back-to-top:focus i,
.book-a-table .php-email-form button[type="submit"]:hover,
.book-a-table .php-email-form button[type="submit"]:focus,
.contact .php-email-form button[type="submit"]:hover,
.contact .php-email-form button[type="submit"]:focus {
  background: var(--accessible-gold-hover) !important;
  color: #fff !important;
}

.search_bar_button {
  border-color: var(--accessible-gold) !important;
  color: var(--accessible-gold) !important;
}

.search_bar_button:hover,
.search_bar_button:focus {
  background: var(--accessible-gold) !important;
  color: #fff !important;
}

.btn-style {
  border-color: var(--accessible-gold) !important;
}

.serviceBox:hover,
.serviceBox:focus-within {
  background-color: var(--accessible-gold) !important;
  color: #fff !important;
}

.serviceBox:hover .title,
.serviceBox:hover .description,
.serviceBox:focus-within .title,
.serviceBox:focus-within .description {
  color: #fff !important;
}

.contact .info:hover i {
  background: var(--accessible-gold) !important;
  color: #fff !important;
}

/* Light gold is reserved for dark/image-backed sections. */
.events .section-title h2 span,
.events .event-item h3,
.events .event-item ul i,
.testimonials .stars,
#footer h3,
#footer a {
  color: var(--accessible-gold-light) !important;
}

#footer a:hover,
#footer a:focus {
  color: #fff !important;
}

.events .owl-dot.active,
.testimonials .owl-dot.active {
  background-color: var(--accessible-gold-light) !important;
}

/* Visible keyboard focus without changing normal-state design. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #005fcc !important;
  outline-offset: 3px;
}

.owl-dot {
  border: 1px solid transparent;
}

#cookieBanner button {
  background: #fff;
  color: #222;
  border: 2px solid #fff;
  border-radius: 3px;
  padding: 4px 10px;
}

#cookieBanner button:hover,
#cookieBanner button:focus {
  background: #e6e6e6;
  color: #111;
}

/* Page-specific components that reuse the original light orange. */
.attraction-distance,
.directions-form button:hover,
.directions-form button:focus,
.highlighted-reservation-btn:hover,
.highlighted-reservation-btn:focus,
.hospital-reservation-btn:hover,
.hospital-reservation-btn:focus,
.dining-reservation-btn:hover,
.dining-reservation-btn:focus {
  background: var(--accessible-gold) !important;
  color: #fff !important;
}

.coordinate i,
#hotel-navigation-section .nav-icon {
  color: var(--accessible-gold) !important;
}

#hotel-navigation-section .nav-link:hover,
#hotel-navigation-section .nav-link:focus {
  background: var(--accessible-teal) !important;
  color: #fff !important;
}

#hotel-navigation-section .nav-link:hover .nav-icon,
#hotel-navigation-section .nav-link:focus .nav-icon {
  color: #fff !important;
}

.hospital-subtitle,
.details-subtitle,
.dining-subtitle {
  color: #236683 !important;
}

.number {
  background: #b83228 !important;
  color: #fff !important;
}

#nola-attractions-section {
  --nola-park: linear-gradient(135deg, #16743a, #105f2e) !important;
  --nola-historic: linear-gradient(135deg, #a84400, #7f3400) !important;
  --nola-entertainment: linear-gradient(135deg, #17689b, #124f78) !important;
  --nola-business: linear-gradient(135deg, #74408b, #552968) !important;
}

#nola-attractions-section .nola-subtitle {
  color: #596566 !important;
}