/* AlgoLodge: focused accessibility refinements, 2026-10-21.
   This stylesheet intentionally loads AFTER hashed performance CSS bundles.
   Keeps default layout and visual identity while improving readability and hit areas. */

/* Stronger contrast for small labels on light surfaces. */
html:not([data-theme="dark"]) body:not(.dark) :is(
  .hero-active .eyebrow,
  .carousel-kicker,
  .home60-eyebrow,
  .homecmp-eyebrow,
  .homecmp-advanced-label,
  .home60-model-index,
  .home60-arr,
  .home60-quote > span:last-child
) { color: #775b37 !important; }

html:not([data-theme="dark"]) body:not(.dark) :is(
  .carousel-heading p,
  .carousel-counter,
  .carousel-disclaimer,
  .comparison-note,
  .home60-models small
) { color: #465e73 !important; }
html:not([data-theme="dark"]) body:not(.dark) #strategy-carousel .carousel-stat span {
  color: #465e73 !important;
}

/* Carousel dots: 28px controls with the same small visible indicators.
   No change to JS logic, active state or button labels. */
#strategy-carousel .carousel-dots { gap: 4px; align-items: center; }
#strategy-carousel .carousel-dots button,
#strategy-carousel .carousel-dots button[aria-current="true"] {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background: transparent !important;
  transition: none !important;
}
#strategy-carousel .carousel-dots button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 10px;
  background: #657e96;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#strategy-carousel .carousel-dots button[aria-current="true"]::after {
  width: 20px;
  background: #95652f;
}
body.dark #strategy-carousel .carousel-dots button::after,
html[data-theme="dark"] #strategy-carousel .carousel-dots button::after {
  background: #bacbdc;
}
body.dark #strategy-carousel .carousel-dots button[aria-current="true"]::after,
html[data-theme="dark"] #strategy-carousel .carousel-dots button[aria-current="true"]::after {
  background: #e2b678;
}

/* Functional touch areas: leave labels, typography, menus and spacing intact. */
.al-header .al-nav-dropdown .al-dropdown-toggle {
  box-sizing: border-box;
  min-width: 28px !important;
  min-height: 44px !important;
  padding: 0 5px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.al-header .flag-current,
.al-header .al-mobile { min-height: 44px !important; }
.al-header .flag-menu button { min-height: 40px; }
.al-site-footer .al-footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Clear focus indication for navigation and small controls. */
:where(.al-header, .al-site-footer, #strategy-carousel) :is(a, button):focus-visible {
  outline: 3px solid #d28d27 !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #strategy-carousel .carousel-dots button,
  .home60-models a { transition: none !important; }
}

/* Mobile footer fix: legacy mobile header rules target bare nav elements.
   Restore the legal footer nav to document flow (not a menu overlay). */
@media (max-width: 760px) {
  .al-site-footer .al-footer-bottom nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
}

/* Lighthouse contrast refinements, 2026-10-21.
   Scope: homepage comparison preview, why/guide/founder body copy,
   and 01-03 step labels. Preserve the visual hierarchy and mobile footer fix. */
/* Only apply to the light theme, never override dark mode palette. */
  html:not([data-theme="dark"]) body:not(.dark) .homecmp-preview-eyebrow {
    color: #826134 !important;
  }
  html:not([data-theme="dark"]) body:not(.dark) .homecmp-preview-return span {
    color: #536a7d !important;
  }
  html:not([data-theme="dark"]) body:not(.dark) .homecmp-preview-foot {
    color: #4d667b !important;
  }
  html:not([data-theme="dark"]) body:not(.dark) .home60-why .home60-split > div:first-child > p:not(.home60-eyebrow),
  html:not([data-theme="dark"]) body:not(.dark) .home60-guide .home60-split > div:first-child > p:not(.home60-eyebrow),
  html:not([data-theme="dark"]) body:not(.dark) .home60-founder .home60-founder-grid > div > p:not(.home60-eyebrow) {
    color: #4b6479 !important;
  }
  html:not([data-theme="dark"]) body:not(.dark) .home60-guide .home60-steps > div > span {
    color: #805c34 !important;
  }