/*
 * accessibility.css
 * Loaded last on the public site so it can override the Webflow export
 * (MosaicPublicStyles.css / theme.min.css), which sets `outline: 0` on most
 * interactive elements.
 */

/* ===============================================
   Visually hidden (screen-reader-only) utility
   =============================================== */
.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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visible once focused - used for the skip link */
.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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===============================================
   Skip to main content link (WCAG 2.4.1)
   =============================================== */
.skip-to-content {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    display: inline-block;
    padding: 12px 20px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    background-color: #24414f;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline !important;
}

/* ===============================================
   Visible focus indicator (WCAG 2.4.7 / 2.4.11)
   The Webflow export zeroes these out, so restore them with enough
   specificity to win and without reintroducing mouse-click outlines.
   =============================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.w-input:focus-visible,
.w-select:focus-visible,
.w-button:focus-visible,
.w-nav-button:focus-visible,
.w-nav-link:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-slider-dot:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible,
.w-tab-link:focus-visible,
.w-checkbox-input:focus-visible,
.w-file-upload-label:focus-visible {
    outline: 3px solid #0b5fa5 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* On dark/branded backgrounds a white ring reads better. */
.bg-primary-1 a:focus-visible,
.bg-primary-1 button:focus-visible,
.bg-primary-2 a:focus-visible,
.bg-primary-2 button:focus-visible,
.bg-primary-3 a:focus-visible,
.bg-primary-3 button:focus-visible,
.apply-cta a:focus-visible,
.apply-cta button:focus-visible,
.footer-2 a:focus-visible,
.footer-2 button:focus-visible,
.nav-link-block:focus-visible,
.nav-link-block-copy:focus-visible,
.connect-container a:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* Native checkbox/radio need the ring on the control itself, not just the label. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid #0b5fa5 !important;
    outline-offset: 2px !important;
}

/* Browsers that do not support :focus-visible still get an indicator. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    [role="button"]:focus {
        outline: 3px solid #0b5fa5 !important;
        outline-offset: 2px !important;
    }
}

/* ===============================================
   Form validation messaging
   #dd171a on white is 4.1:1 - below the 4.5:1 required for body text.
   =============================================== */
.error,
.field-validation-error {
    color: #b3121a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.error:empty {
    display: none;
}

.error ul {
    margin: 0;
    padding-left: 1.25em;
    text-align: left;
}

/* Required-field marker: the asterisk is announced via aria-hidden + the
   input's own aria-required, so hide it from assistive tech. */
.required {
    color: #b3121a;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border: 2px solid #b3121a !important;
}

/* ===============================================
   Reduced motion (WCAG 2.3.3 / 2.2.2)
   The public site uses scroll-triggered opacity animations and an infinitely
   animating scroll-down arrow. Make sure content is still visible and still.
   =============================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .home-hero-scroll-down-arrow {
        animation: none !important;
        top: 0 !important;
    }
}

/* ===============================================
   Fallback for JS-driven fade-in animations.
   Every page hides content with `opacity: 0` and relies on jQuery to reveal
   it. If scripts fail or are blocked the page is blank, so reveal everything
   once the enhancement script has marked the document as ready.
   =============================================== */
html:not(.js-animations-ready) .fadeUpOnScroll,
html:not(.js-animations-ready) .fadeInContainer,
html:not(.js-animations-ready) .fadeInImage,
html:not(.js-animations-ready) .fadeInFooterContainer,
html:not(.js-animations-ready) .navFadeIn,
html:not(.js-animations-ready) .location-card-container,
html:not(.js-animations-ready) .column-images,
html:not(.js-animations-ready) .why-salon-home,
html:not(.js-animations-ready) #HeaderTitle,
html:not(.js-animations-ready) #HeaderSubtitle,
html:not(.js-animations-ready) #HeaderSubtitle2,
html:not(.js-animations-ready) #HeaderButtons,
html:not(.js-animations-ready) #HeaderContainer,
html:not(.js-animations-ready) #HeaderParagraph,
html:not(.js-animations-ready) #SubHeaderContainer,
html:not(.js-animations-ready) #ContactLocations,
html:not(.js-animations-ready) #FaqsContainer,
html:not(.js-animations-ready) #PostContainer,
html:not(.js-animations-ready) .contact-content-top,
html:not(.js-animations-ready) #EventContainer,
html:not(.js-animations-ready) #VirtualSupportContainer,
html:not(.js-animations-ready) #PostTitle,
html:not(.js-animations-ready) #PostSubtitle,
html:not(.js-animations-ready) #PostContentContainer,
html:not(.js-animations-ready) #ParagraphContainer,
html:not(.js-animations-ready) #TreatmentsContainer,
html:not(.js-animations-ready) .headerParagraph {
    opacity: 1 !important;
    top: 0 !important;
}

/* ===============================================
   Team / therapist search filters
   Rendered as toggle buttons so they are reachable by keyboard and expose
   their pressed state.
   =============================================== */
.checkbox_field.teamFilter {
    cursor: pointer;
}

.open-close-button[aria-expanded] {
    cursor: pointer;
}

/* ===============================================
   Accordions (FAQ cards, career postings)
   =============================================== */
.accordion-trigger {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ===============================================
   Native <button> elements replacing Webflow's div/anchor "buttons".
   Strip the UA chrome so they keep the original visual design while gaining
   built-in keyboard activation, focus handling and the button role.
   =============================================== */
button.w-dropdown-toggle,
button#GetStartedDesktopBtn,
button.close-application,
button.accordion-question,
button.card-faq-content-top {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}

button.w-dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
}

button#GetStartedDesktopBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Keep Webflow's display:none on large screens. Only strip UA chrome
   so the existing .menu-button-5 / .w-nav-button rules can style it. */
button.w-nav-button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

button.w-nav-button .svg-inline--fa {
    width: 1em;
    height: 1em;
    display: block;
}

/* Team search/expand controls already have .open-close-button styles.
   Do not zero their border, background, or color. */
button.open-close-button {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

/* Filter chips were labels; native <button> chrome is light-on-light
   against .checkbox_label's oatmeal text. Buttons also shrink to their
   text instead of filling the parent the way a block-level label did. */
button.checkbox_field {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

@media screen and (max-width: 991px) {
    .section_search-tools .filter-collection-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .section_search-tools .filter-collection-list .collection-item-5 {
        width: calc((100% - 16px) / 3);
    }

    .section_search-tools button.checkbox_field {
        width: 100%;
        margin-right: 0;
    }
}

button.slider-left,
button.slider-right {
    appearance: none;
    -webkit-appearance: none;
}

button.accordion-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--neutral-300);
    border-bottom: 1px solid var(--neutral-300);
    border-left: 0;
    border-right: 0;
}

button.card-faq-content-top {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

fieldset.border-0,
fieldset.mosaic-a11y-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

fieldset.border-0 > legend.field-label,
fieldset.mosaic-a11y-fieldset > legend.field-label {
    float: none;
    width: auto;
    margin-bottom: 8px;
    padding: 0;
}

/* ===============================================
   Touch target size (WCAG 2.5.8)
   =============================================== */
.footer---social-wrapper a,
.footer-nav-link.round {
    min-width: 44px;
    min-height: 44px;
}

/* ===============================================
   Honour user text resizing in the floating call button
   =============================================== */
#FloatingCallButton {
    min-height: 44px;
}

/* Heading-level changes for outline/order should not change the visual type. */
p.therapist-title,
h1.therapist-name + p.therapist-acronym {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.455em;
}

h2.bio-subhead {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.455em;
    margin-top: 0;
    margin-bottom: 8px;
}

h3.partner-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 110%;
}