/*
 * Accessibility fixes for Days Inn Birmingham West
 * Load this file AFTER all vendor, slider, calendar, and theme styles.
 * The rules are intentionally scoped so layout and branding remain intact.
 */

:root {
  --a11y-text: #222222;
  --a11y-muted-text: #3f3f3f;
  --a11y-link: #004b91;
  --a11y-link-hover: #003563;
  --a11y-blue: #004b91;
  --a11y-blue-dark: #00345f;
  --a11y-focus: #ffbf47;
  --a11y-footer-bg: #5f6169;
  --a11y-footer-text: #ffffff;
  --a11y-footer-accent: #ffdf70;
}

html {
  scroll-behavior: smooth;
}

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

/* Screen-reader-only content that remains available to assistive technology. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] {
  display: none !important;
}

/* Keyboard skip link; invisible until focused. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 14px;
  background: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease-in-out;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Restore a visible keyboard focus indicator even if a vendor stylesheet removes it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #000000 !important;
}

/* High-contrast primary body copy and links. */
main p,
main li,
main address,
main label,
main td,
main th {
  color: var(--a11y-text);
}

main a:not(.cta-btn):not(.about_btn_b_vm):not(.more):not(.back-to-top) {
  color: var(--a11y-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

main a:not(.cta-btn):not(.about_btn_b_vm):not(.more):not(.back-to-top):hover,
main a:not(.cta-btn):not(.about_btn_b_vm):not(.more):not(.back-to-top):focus {
  color: var(--a11y-link-hover);
  text-decoration: underline;
}

/* Top bar: maintain a dark brand strip with white text/icons. */
#topbar {
  background-color: var(--a11y-blue-dark);
}

#topbar,
#topbar span,
#topbar a,
#topbar em {
  color: #ffffff !important;
}

#topbar a:hover,
#topbar a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Icon-only social links retain their existing shape but gain a reliable target. */
#topbar .social-links a,
.social1 a,
.back-to-top,
#videoLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#topbar .social-links a,
.social1 a {
  min-width: 35px;
  min-height: 35px;
}

/* Keep the converted navigation button visually equivalent to the former icon element. */
.mobile-nav-toggle {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav-toggle .bi {
  display: block;
  font-size: inherit;
  line-height: 1;
}

/* Reservation controls: dark text on white with visible boundaries. */
.agileits_reservation input[type="text"],
.agileits_reservation select {
  color: #1f1f1f !important;
  background-color: #ffffff !important;
  border-color: #5b5b5b !important;
}

.agileits_reservation input[type="text"]::placeholder {
  color: #4a4a4a !important;
  opacity: 1;
}

.agileits_reservation input[type="submit"] {
  color: #ffffff !important;
  background-color: var(--a11y-blue) !important;
  border-color: var(--a11y-blue-dark) !important;
  font-weight: 700;
}

.agileits_reservation input[type="submit"]:hover,
.agileits_reservation input[type="submit"]:focus {
  color: #ffffff !important;
  background-color: var(--a11y-blue-dark) !important;
}

.book_date .bi {
  color: #1f1f1f;
}

/* Calendar headings were changed from spans to semantic headings. */
.calendar-title {
  display: inline;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.close-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

/* Keep the original amenity grid layout while correcting invalid HTML nesting. */
.about-us-spacer {
  width: 100%;
  min-height: 1px;
}

.amenities-grid {
  width: 100%;
}

.amenities-grid::after {
  display: table;
  clear: both;
  content: "";
}

/* WAVE reported four justified paragraphs in this section. */
.about-us .content p {
  color: var(--a11y-text) !important;
  text-align: left !important;
}

.about-us h1,
.about-us h2,
.about-us h3,
.section-title h2,
.section-title h3,
.section-title h4 {
  color: #173b5f;
}

#more:not([hidden]) {
  display: inline;
}

#myBtn {
  color: #ffffff;
  background: var(--a11y-blue);
  border: 1px solid var(--a11y-blue-dark);
  font-weight: 700;
}

#myBtn:hover,
#myBtn:focus {
  background: var(--a11y-blue-dark);
}

/* Dark overlay maintains image-card design while guaranteeing readable text. */
.serviceBox .service-content {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.82) !important;
}

.serviceBox .service-content h3,
.serviceBox .service-content li,
.serviceBox .service-content p,
.serviceBox .service-content .service-icon,
.serviceBox .service-content .service-icon em {
  color: #ffffff !important;
}

.serviceBox .about_btn_b_vm {
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.serviceBox .about_btn_b_vm:hover,
.serviceBox .about_btn_b_vm:focus {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.section-title p,
#clients p {
  color: var(--a11y-text) !important;
}

/* CTA section uses white text on a sufficiently dark blue. */
.cta {
  background-color: var(--a11y-blue-dark) !important;
}

.cta p,
.cta .ada,
.cta .ada a,
.cta .ada span {
  color: #ffffff !important;
}

.cta .cta-btn {
  color: var(--a11y-blue-dark) !important;
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  font-weight: 700;
}

.cta .cta-btn:hover,
.cta .cta-btn:focus {
  color: #ffffff !important;
  background-color: #001f39 !important;
}

/* Footer colors previously failed normal-text contrast. This preserves the gray/gold palette. */
.footer,
.footer-copy {
  background-color: var(--a11y-footer-bg) !important;
  color: var(--a11y-footer-text) !important;
}

.footer,
.footer p,
.footer li,
.footer address,
.footer span:not(.visually-hidden),
.footer-copy,
.footer-copy p {
  color: var(--a11y-footer-text) !important;
}

.footer a,
.footer-copy a,
.footer .cgsl {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer a:hover,
.footer a:focus,
.footer-copy a:hover,
.footer-copy a:focus {
  color: var(--a11y-footer-accent) !important;
}

.footer-grid h3 {
  color: #ffffff !important;
  border-bottom-color: #d5d5d5 !important;
}

.footer h4,
.footer h4 span,
.footer .cgs2,
.footer .cgs2 span {
  color: var(--a11y-footer-accent) !important;
}

.social1 em {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
}

.social1 a:hover em,
.social1 a:focus em {
  color: #000000 !important;
  background-color: var(--a11y-footer-accent) !important;
}

/* Slider numbers are implementation text; accessible names are on the links. */
.ws-slide-number {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Embedded media and maps remain responsive. */
iframe {
  max-width: 100%;
}

/* Respect reduced-motion preferences without changing the default presentation. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}