/* ============================================================
   wcag-gs-elan.css
   WCAG 2.1 Level AA override for the GS-Elan Kentico template
   (TemplateId 1390 / C0070-GS-Elan).
   Injected via lsExternalResource. Loaded after the base theme
   and Bootstrap.

   Selectors verified against the live base CSS pulled from
   https://elan-map-test.dev-ws.realpage.com on 2026-05-07.
   Cross-checked against production CSS from
   https://vista121.com on 2026-05-07: all targeted selectors
   match (form border, sticky header, footer-7 opacity, footer
   link colors, content-link rule). Brand colors differ
   (dev rust/gold #883f2e/#b19148 vs prod navy #394f9c) but no
   contrast impact on overrides. Footer bg differs (dev #1d2f40
   vs prod #373737); rgba(255,255,255,0.92) still passes ~10:1
   and opacity:0.75 still passes ~6.5:1 on prod's gray.

   Specificity strategy:
   Every selector is prefixed with `body #form` (the ASP.NET
   WebForms page-level form ID, present on every Greystar page
   and wrapping all our target elements). That adds (1, 0, 2)
   to each rule's specificity, lifting our overrides above the
   widget-CSS bundles that load via rpWebpartCss_*. Rules that
   already contain a context ID (#main-contact, #footer-menu,
   etc.) become 2-ID chains.
   ============================================================ */


/* ------------------------------------------------------------
   TFS 2845711 — WCAG 2.4.7 Focus Visible
   Bootstrap suppresses focus rings on .navbar-toggle and
   .dropdown-toggle (outline:0). Restore visible focus.
   General fallback covers other interactive elements in case
   future markup adds outline-suppressing rules.
   ------------------------------------------------------------ */
body #form .navbar-toggle:focus-visible,
body #form .dropdown-toggle:focus-visible,
body #form .btn:focus-visible,
body #form .form-control:focus-visible,
body #form .header-CTA-button:focus-visible,
body #form .footer-CTA-Button:focus-visible,
body #form .social-CTA-button:focus-visible,
body #form a:focus-visible,
body #form button:focus-visible,
body #form input:focus-visible,
body #form select:focus-visible,
body #form textarea:focus-visible,
body #form [tabindex]:focus-visible,
body #form [role="button"]:focus-visible {
  /* Webkit-style two-ring halo: blue inner ring + white outer ring
     gives focus visibility on both light AND dark backgrounds.
     The `outline` declaration is intentionally omitted — outline
     paints on top of box-shadow and would cover the white ring. */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #005fcc, 0 0 0 3px #fff;
}


/* ------------------------------------------------------------
   TFS 2849999 — WCAG 2.4.11 Focus Not Obscured
   header.header-navigation is position:fixed (top:0).
   Approx height when scrolled: 120px (50px top strip + 50–65px
   logo + padding). Reserve scroll space so tab-focused elements
   land below the sticky header.

   `html { scroll-padding-top }` is unique to the html element —
   no widget rule competes with it, so no prefix needed.
   ------------------------------------------------------------ */
html {
  scroll-padding-top: 130px;
}

body #form :focus-visible {
  scroll-margin-top: 130px;
}


/* ------------------------------------------------------------
   TFS 2849882 — WCAG 1.4.11 Non-text Contrast (form controls)
   Two distinct contact form patterns:
     1. /Contact.aspx dedicated form:
        #main-contact .form-control { border-bottom: 2px solid rgba(0,0,0,.3) }
        ≈ 2.4:1 — fails 3:1.
     2. Home page / floating mini contact form:
        body .contact-mobile-form .contactus-float-input-div input,
        body .contactus-float-input-div textarea
          { border-bottom: 2px solid #eaeaea }
        ≈ 1.36:1 — fails 3:1.
   ------------------------------------------------------------ */
body #form #main-contact .form-control {
  border-bottom-color: #595959;
}

body #form .contact-mobile-form .contactus-float-input-div input,
body #form .contactus-float-input-div input,
body #form .contactus-float-input-div textarea {
  border-bottom-color: #595959;
}


/* ------------------------------------------------------------
   TFS 2852272 — WCAG 1.4.3 Contrast Minimum (text)
   Three confirmed offenders in the base:
     1. Footer links color: rgba(255,255,255,.5) on #1d2f40 ≈ 3.4:1
     2. Footer-7 links: opacity:.5 on color:#fff (effective ≈ 3.4:1).
     3. .video-mute-btn: color:#999 on white ≈ 2.9:1
   ------------------------------------------------------------ */
body #form #footer-menu ul li a,
body #form .footer-links a,
body #form #footerBottom,
body #form .footer-widget footer,
body #form .footer-widget footer a {
  color: rgba(255, 255, 255, 0.92);
}

body #form .footer-widget footer.footer-7 .footer-container a,
body #form .footer-widget footer.footer-7 .footer-container .footer-bottom .footer-bottom-row .footer-icons .additional-icons {
  opacity: 0.75;
  color: #fff;
}

/* Hover/focus restore: our specificity-bumped default (1,3,4) beats
   the base hover rule (0,4,3) in the `a` column, which kills the
   hover delta. Match our own selector specificity at the :hover/:focus
   level so it lifts back to opacity:1 on interaction. */
body #form .footer-widget footer.footer-7 .footer-container a:hover,
body #form .footer-widget footer.footer-7 .footer-container a:focus {
  opacity: 1;
}

body #form .video-mute-btn {
  color: #595959;
}


/* ------------------------------------------------------------
   TFS 2852341 — WCAG 1.4.1 Use of Color (inline links)
   Inline content links must be distinguishable without color.
   On internal pages, rich-text content lives in
   .inner-page-main-content .main-content-text. The home page
   has no such container, so this only fires on subpages with
   actual content links.

   TFS 2985969 — added `.inner-page-main .section-text a`.
   The About-page copy block is NOT in .main-content-text: the
   live ancestor chain is
     a < p < .section-text < .about-content-left < .section-left
       < #about-section-1.container-fluid < .inner-page-main
   (confirmed live on thearialiving.com; the wrapper div is
   authored in C0070-GS-Elan-About.ascx:19 as `.inner-page-main`
   — note the base CSS only styles the OUTER
   `.inner-page-main-content`, so the un-suffixed inner class had
   no underline rule reaching it). 23 of 45 flagged links on this
   template live in this container.

   Collision check: the homepage rule below is scoped to
   `.home-section .section-text a`; the About `.section-text` has
   no `.home-section` ancestor, so the two never overlap. No
   `text-decoration:none !important` in the Elan base stack
   targets content links — all 13 base `!important` strips are on
   header/nav/footer/social/CTA-button containers — so no
   `!important` counter is needed here (unlike Jackson-Square and
   Zen-Garden, whose bases strip on :hover/:focus/:active).

   TFS 2985969 (2nd defect) — added
   `#specials-flyout .specials-content a`.
   Same failure mode as the Teracy `.topCallout` miss: a prose link
   in a container that looks like chrome but is not. Confirmed live
   on thearialiving.com — `#specials-flyout` is a DIRECT CHILD of
   `form#form`:
     form#form > div#specials-flyout.collapse
       > div.specials-content > p.MsoNormal > a
   It has no <header>/<nav>/<footer> ancestor and is NOT inside
   `.inner-page-main`, so none of this file's other 1.4.1
   selectors reach it. Container text is "Resident Portal
   Click Here", i.e. a genuine link-in-text-block, and the anchor
   is classless so no shape-based opt-out applies. It is a
   Bootstrap `.collapse` flyout — hidden until the user opens it,
   and colour-only once open.
   ------------------------------------------------------------ */
body #form #main-general .main-content-text a,
body #form .inner-page-main-content .main-content-text a,
body #form .main-content-text a,
body #form .inner-page-main .section-text a,
body #form #specials-flyout .specials-content a,
body #form #contactusPrivacy a,
body #form a[href$="Privacy-policy.aspx"] {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body #form .main-content-text a.btn,
body #form .main-content-text a.button,
body #form .main-content-text a.more-link,
body #form .main-content-text a.less-link,
body #form .main-content-text .footer-CTA-Button,
body #form .main-content-text .header-CTA-button {
  text-decoration: none;
}

/* TFS 2985969 — button/CTA opt-out for the newly-covered About
   container. `.inner-page-main .section-text a` is (1,2,2), which
   out-specifies the shape-based opt-outs further down this file
   (`a.home-CTA` / `.section-CTA a` / `.CTA-button` at (1,1,2)),
   so those opt-outs are re-asserted at container scope (1,3,2)
   to keep button-shaped links un-underlined. Mirrors the
   `.main-content-text a.btn` opt-out above. */
body #form .inner-page-main .section-text a.btn,
body #form .inner-page-main .section-text a.button,
body #form .inner-page-main .section-text a.more-link,
body #form .inner-page-main .section-text a.less-link,
body #form .inner-page-main .section-text a.home-CTA,
body #form .inner-page-main .section-text a.CTA-button,
body #form .inner-page-main .section-text .footer-CTA-Button,
body #form .inner-page-main .section-text .header-CTA-button,
body #form .inner-page-main .section-text .section-CTA a,
body #form .inner-page-main .section-text .section-2-CTA a,
body #form .inner-page-main .section-text .section-3-CTA a {
  text-decoration: none;
}


/* ------------------------------------------------------------
   TFS 2870264 — WCAG 1.4.1 (homepage inline links)
   Elan's homepage uses `.home-section` rows. Inline text lives
   in `.section-left .section-text` (rich-text paragraphs) and
   `.home-content-overlay`. The three top CTA tiles are
   `<a class="home-CTA">` — the entire tile is the link, opted
   out. `.section-3-CTA` / `.section-CTA` wrappers hold
   `.CTA-button` and `.footer-CTA-Button` — also opted out.
   ------------------------------------------------------------ */
body #form .home-section .section-left a,
body #form .home-section .section-text a,
body #form .home-section .home-content-overlay a,
body #form .home-section .home-content-overlay p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body #form a.home-CTA,
body #form .home-CTA,
body #form .home-CTA-overlay,
body #form .home-CTA-icon,
body #form .home-CTA-text,
body #form .section-CTA a,
body #form .section-2-CTA a,
body #form .section-3-CTA a,
body #form .home-section .CTA-button,
body #form .home-section a.CTA-button,
body #form .home-section a.footer-CTA-Button,
body #form .home-section a.header-CTA-button {
  text-decoration: none;
}


/* ------------------------------------------------------------
   WCAG 2.2 AA 2.5.8 Target Size (Pointer)
   ------------------------------------------------------------ */
/* WCAG 2.2 AA 2.5.8 Target Size (Pointer) — real fix (native checkbox can't be padded;
   appearance:none + explicit 24px sizing; :checked::after re-draws the check so consent UX is preserved) */
body .contact-mobile-form input[type="checkbox"],
#contactusPrivacy input[type="checkbox"],
#privacyDiv input[type="checkbox"],
#contactUsV1Privacy input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; height: 24px;
    min-width: 24px; min-height: 24px;
    margin: 4px; padding: 0;
    border: 2px solid currentColor; border-radius: 3px;
    background: #fff; cursor: pointer; position: relative;
    vertical-align: middle; flex: 0 0 auto;
}
body .contact-mobile-form input[type="checkbox"]:checked::after,
#contactusPrivacy input[type="checkbox"]:checked::after,
#privacyDiv input[type="checkbox"]:checked::after,
#contactUsV1Privacy input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 7px; top: 3px;
    width: 6px; height: 11px;
    border: solid #1a1a1a; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body .contact-mobile-form input[type="checkbox"]:focus-visible,
#contactusPrivacy input[type="checkbox"]:focus-visible,
#privacyDiv input[type="checkbox"]:focus-visible,
#contactUsV1Privacy input[type="checkbox"]:focus-visible {
    outline: 2px solid; outline-offset: 2px;
}
#contactusPrivacy label {
    line-height: 30px;;
}
#contactusPrivacy a {
    margin-left: 10px;
}
/* ------------------------------------------------------------
   TFS 2985969 — Google Maps bleed opt-out (measured live)
   The Maps JS API injects its own colour-only anchors ("Terms",
   "Report a map error", "Open this area in Google Maps") into
   `.gm-style` INSIDE our content containers, so a container-scoped
   underline rule reaches them. Confirmed live on Elan /About.aspx,
   themckenzieapts.com home, and both Balcony homepages. These are
   third-party map chrome, not site prose — never underline them.

   `!important` and the `body #form` prefix are both required so
   this beats the content-container counters in this file family,
   including the `underline !important` interaction-state counters
   on Jackson-Square and Zen-Garden. States are listed explicitly
   because those counters are state-scoped.
   ------------------------------------------------------------ */
body #form .gm-style a,
body #form .gm-style a:hover,
body #form .gm-style a:focus,
body #form .gm-style a:active,
body #form .google-map-container a,
body #form .google-map-container a:hover,
body #form .google-map-container a:focus,
body #form .google-map-container a:active,
body #form .gm-style-cc a,
body #form a[href*="maps.google.com/maps?ll="],
body #form a[href^="https://www.google.com/maps/@"] {
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   TFS 2905632 - WCAG 1.4.1 Use of Color (selected state)
   The Floor Plans bed/bath filter and view-switch tabs mark the
   selected item with a brand-color background + #fff text only
   (base rule sets border-color:transparent, no weight/underline).
   Add an underline so the selection is perceivable in greyscale
   and for color-blind users. `body #form` prefix keeps specificity
   above the rpWebpartCss_Floorplan* base bundles. No color changed.
   ------------------------------------------------------------ */
body #form .fp2-bed-bath ul li.active > a,
body #form .FloorPlansV2 .fp-switch-tabs .btn-default.active,
body #form .FloorPlansV3 .fp-switch-tabs .btn-default.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   TFS 2905631 - WCAG 1.4.11 Non-text Contrast (form controls)
   The full-width Neighborhood search input has no perceivable
   resting border: base CSS (rpWebpartCss_NeighborhoodFullWidth.css)
   sets `border:none; background:none; color:#fff` on a dark
   rgba(0,0,0,.83) search overlay. Add a light 1px boundary at
   #cfcfcf (~9.6:1 on that dark surface; matches the widget's
   existing placeholder color). All 21 priority templates use this
   dark default - none override it to a light surface.
   ------------------------------------------------------------ */
body #form .neighborhood-widget .neighborhood-widget__search .form-group .form-control {
  border: 1px solid #cfcfcf;
}