/**
 * Accessibility Fixes — RiverSpring Living
 * WCAG 2.2 AA compliance patches
 * Generated: 2026-02-13
 */

/* ==========================================================================
   1. Skip-to-content link
   WCAG 2.4.1 Bypass Blocks
   ========================================================================== */

.skip-to-content {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  padding: 12px 24px;
  background: #203E5B;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: top 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: 0px;
  box-shadow: 0 0 0 5px #203E5B;
}

/* Hover: invert to gold bg + navy text (4.73:1 contrast) */
.skip-to-content:hover {
  background: #E8A93B;
  color: #203E5B;
  text-decoration: none;
}

/* When focused AND hovered, switch outline to navy so it's visible against gold bg */
.skip-to-content:focus:hover {
  outline-color: #203E5B;
}

/* ==========================================================================
   2. Focus indicators
   WCAG 2.4.7 Focus Visible
   ========================================================================== */

/* Universal double-ring focus indicator — works on ANY background.
   Inner ring: white (#fff). Outer ring: navy (#203E5B).
   On light backgrounds the navy outer ring provides contrast (11.04:1 on white).
   On dark backgrounds the white inner ring provides contrast (11.04:1 on navy).
   WCAG 2.4.7 Focus Visible — always passes 3:1 non-text contrast.
   Pattern used by gov.uk, BBC, and other high-compliance sites. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0px;
  box-shadow: 0 0 0 5px #203E5B;
}

/* Remove focus ring on mouse clicks — only show on keyboard navigation */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   2b. Desktop dropdown keyboard access
   WCAG 2.1.1 Keyboard, 2.4.7 Focus Visible
   Duplicate :hover rules with :focus-within so keyboard users can reach submenus.
   ========================================================================== */

/* Show submenu when a child element has focus */
header .bottom_header nav > ul li.menu-item-has-children:focus-within ul.sub-menu {
  visibility: visible;
  opacity: 1;
}

/* Rotate chevron arrow when focused */
header .bottom_header nav > ul li.menu-item-has-children:focus-within:before {
  transform: translate(0, -50%) rotate(180deg);
}

/* Show link underline decorations when focused */
header .bottom_header nav > ul li.menu-item-has-children:focus-within > a:before,
header .bottom_header nav > ul li.menu-item-has-children:focus-within > a:after {
  opacity: 1;
}

/* Override :focus-within when Escape key was pressed (WCAG 2.1.1) */
header .bottom_header nav > ul li.menu-item-has-children.submenu-force-closed ul.sub-menu {
  visibility: hidden;
  opacity: 0;
}
header .bottom_header nav > ul li.menu-item-has-children.submenu-force-closed:before {
  transform: translate(0, -50%) rotate(0deg);
}
header .bottom_header nav > ul li.menu-item-has-children.submenu-force-closed > a:before,
header .bottom_header nav > ul li.menu-item-has-children.submenu-force-closed > a:after {
  opacity: 0;
}

/* ==========================================================================
   3. Screen-reader-only utility
   Used for visually hidden text (new window warnings, etc.)
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. Footer links — nav wrapper should not affect layout
   WCAG 1.3.1 — wrap in <nav> for landmark, display:contents to preserve layout
   ========================================================================== */

footer nav[aria-label="Footer links"] {
  display: contents;
}

/* ==========================================================================
   5. Priority access cards — single link wrapper (WAVE: redundant link fix)
   Merged two <a> tags into one <a class="priority-access-card"> with <span> children.
   ========================================================================== */

.priority-access-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.priority-access-card:hover {
  text-decoration: none;
  color: inherit;
}

.priority-access-item .priority-access-image {
  display: block;
}

/* ==========================================================================
   6. Social icons — ensure link text is visually hidden but accessible
   ========================================================================== */

.social-icons .link-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   7. Top footer — semantic nav/ul/li structure preserving original layout
   WCAG 1.3.1 Info and Relationships, 4.1.2 Name/Role/Value
   ========================================================================== */

/* Nav landmarks should not change layout */
.top-footer nav,
.top-footer section {
  display: contents;
}

/* Reset list styles to match original <p>/<br> layout */
.top-footer nav ul,
.top-footer section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-footer nav ul li,
.top-footer section ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Address element should match paragraph styling */
.top-footer address {
  font-style: normal;
}

/* ==========================================================================
   8. Mobile nav: remove current-menu-item bold + underlines
   Pre-existing theme bug — desktop active-page indicator leaks into mobile_nav_small
   ========================================================================== */

.mobile_menu_container .mobile_nav_small > ul > li.current-menu-item > a:before,
.mobile_menu_container .mobile_nav_small > ul > li.current-menu-item > a:after {
  opacity: 0;
}

/* ==========================================================================
   9. Burger button reset — <a> → <button> conversion
   WCAG 4.1.2 Name/Role/Value
   ========================================================================== */

button.burger {
  background: none;
  border: none;
  padding: 10px 8px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   10. Blue hero banner (top-info) contrast fix
   WCAG 1.4.3 — rgba(70,127,164) missed by hex find-replace
   Desktop only: at <=1024px the theme sets background:none on .top-info
   and moves the bg to .top-info-box instead
   ========================================================================== */
@media (min-width: 1025px) {
  .top-block .top-info {
    background: linear-gradient(96.47deg, rgba(35, 50, 90, 0.084) 17.86%, rgba(35, 50, 90, 0.012) 70.31%), rgba(64, 120, 156, 0.96);
  }
}
@media (max-width: 1024px) {
  .top-block .top-info .top-info-box {
    background: linear-gradient(96.47deg, rgba(35, 50, 90, 0.084) 17.86%, rgba(35, 50, 90, 0.012) 70.31%), rgba(64, 120, 156, 0.96);
  }
}

/* ==========================================================================
   11. Content link style — teal (#427E8F) → navy (#203E5B)
   WCAG 1.4.3 Contrast (Minimum) — old teal 3.78:1 on white, navy 11.04:1
   Client-approved: match /senior-living/ inline link style
   ========================================================================== */

/* Color-only fix for all links (safe — no layout/decoration changes) */
a {
  color: #203E5B;
}
a:hover {
  color: #40789C;
}

/* Underline + medium weight for inline body-text links inside #main-content */
#main-content p a,
#main-content li a,
#main-content .text-block a,
#main-content .info-block a,
#main-content .content-block a,
#main-content .entry-content a {
  font-weight: 500;
  text-decoration: underline;
}
#main-content p a:hover,
#main-content li a:hover,
#main-content .text-block a:hover,
#main-content .info-block a:hover,
#main-content .content-block a:hover,
#main-content .entry-content a:hover {
  text-decoration: none;
}

/* ==========================================================================
   12. Careers page — rebrand Apploi widget + heading to navy (#203E5B)
   Heading has inline style so needs !important
   ========================================================================== */

/* "Open Positions" heading — inline style override */
#equal-employment {
  color: #203E5B !important;
}

/* Apploi job title links — widget injects styles, needs !important */
.job-link {
  color: #203E5B !important;
}
.job-link:hover {
  color: #40789C !important;
}

/* Apploi filter dropdowns */
.apploi-drop-down select,
.apploi-drop-down .dropdown-select {
  background-color: #203E5B !important;
  border-color: #203E5B !important;
}

/* Apploi filter container borders/accents */
.job-link-containter {
  border-color: #203E5B !important;
}

/* Apploi pagination and any other teal accents */
.pagination-bar a,
.pagination-bar span {
  color: #203E5B !important;
}
.pagination-bar .active,
.pagination-bar a:hover {
  background-color: #203E5B !important;
}

/* ==========================================================================
   13. Reduced motion — respect user OS preference
   WCAG 2.3.3 Animation from Interactions
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   14. Press post H1 — match existing blog H1 styling
   WCAG 1.3.1 Info and Relationships (page must have an H1)
   ========================================================================== */

.blog-single-page .press-post-title {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2;
  color: #203E5B;
  margin: 0 0 24px;
}

@media (max-width: 768px) {
  .blog-single-page .press-post-title {
    font-size: 32px;
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   15. Social icons — proper list structure
   WCAG 4.1.2 aria-allowed-role (listitem invalid on <a>)
   Changed <div role="list"> / <a role="listitem"> to <ul> / <li> / <a>
   ========================================================================== */
.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-icons li {
  display: inline-block;
}
.social-icons li:last-child a {
  margin-right: 0;
}
footer .footer-items .footer-item .social-icons a {
  font-size: 28px;
  margin: 5px 24px 5px 0;
}
footer .footer-items .footer-item .social-icons li:last-child a {
  margin-right: 0;
}

/* ==========================================================================
   16. Footer headings — h5 to h2 for proper heading order
   WCAG 1.3.1 Info and Relationships (heading hierarchy)
   ========================================================================== */
footer .footer-items .footer-item h2 {
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
  font-family: "deuterium-variable";
  font-weight: 400;
  font-variation-settings: "wght" 400;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: none;
  font-size: 20px;
}
footer .footer-items .footer-item h2:before {
  content: "";
  width: 20px;
  display: inline-block;
  bottom: 0;
  position: absolute;
  height: 1px;
  background: #fff;
  left: 0;
}
@media (max-width: 768px) {
  footer .footer-items .footer-item h2 {
    font-size: 16px;
    margin-bottom: 24px;
    padding-bottom: 9px;
  }
}

/* ==========================================================================
   17. Blog touch targets — category tag links too small
   WCAG 2.5.8 Target Size (Minimum) — 24px minimum
   ========================================================================== */
.blog-posts-wrapper .blog-posts .post .post-category a {
  padding: 4px 8px;
}

/* ==========================================================================
   18. Blog post titles — h4 to h3 for proper heading hierarchy
   WCAG 1.3.1 Info and Relationships (heading order: H1 > H2 > H3)
   Global h3 uses "the-seasons" serif at 40px/300; blog titles need
   "deuterium-variable" sans at 32px/500 to match original h4 styling.
   ========================================================================== */
.blog-posts-wrapper .blog-posts .post h3.title,
.index-style .index-main h3.title {
  font-family: "deuterium-variable";
  font-weight: 500;
  font-size: 32px;
  line-height: 120%;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  padding-bottom: 12px;
}
@media (max-width: 767px) {
  .blog-posts-wrapper .blog-posts .post h3.title,
  .index-style .index-main h3.title {
    font-size: 24px;
  }
}

/* ==========================================================================
   19. Difference block — background-color fallback for white text
   WCAG 1.4.3 Contrast (Minimum)
   The gradient background is on :before pseudo-element. Without a fallback
   background-color on the container, axe-core sees white text on transparent
   (1:1 contrast). Adding the darkest gradient color as fallback ensures
   contrast passes AND text remains readable if :before fails to render.
   No visual change — the :before overlay covers this completely.
   ========================================================================== */
.difference-block {
  background-color: #0e344e;
}