/*
 * Performance (Core Web Vitals) and accessibility (WCAG 2.2 AA) overrides.
 *
 * Loaded after css/style.css so these rules win without recompiling
 * sass/style.scss (the deployed css/style.css has hand edits that are not in
 * the SASS source). Each block names the plan item it implements
 * (cwv-a11y/plan-cwv-wcag.md).
 */

/* ------------------------------------------------------------------ *
 * A11Y-08: "Skip to main content" link, visible on keyboard focus.
 * ------------------------------------------------------------------ */
/* a.skip-link.sr-only-focusable outranks Bootstrap's .sr-only-focusable:focus
   (position: static), so the link floats instead of pushing the page down. */
a.skip-link.sr-only-focusable:focus,
a.skip-link.sr-only-focusable:active {
    background: #fff;
    color: #000;
    font-weight: bold;
    left: 1rem;
    padding: .75rem 1rem;
    position: fixed;
    top: 1rem;
    z-index: 10000;
    outline: 3px solid #000;
    outline-offset: 2px;
}

main:focus {
    outline: none; /* Programmatic focus target of the skip link only. */
}

/* ------------------------------------------------------------------ *
 * PERF-07: Home background slideshow (LCP element).
 *
 * The first slide used to start at opacity 0 and only became visible once
 * Flickity had initialised, so LCP waited for JavaScript. It is now visible
 * from the first paint. Slides two and three only receive their images once
 * the slideshow is running (.is-ready, added by footer.php), so they no
 * longer compete with the LCP image for bandwidth. Images are WebP, with an
 * 800px version for phones instead of the 1600px JPEG.
 * ------------------------------------------------------------------ */
.home-slideshow__slide.\--one {
    background-image: url('../img/homepage-3-1600.webp');
    opacity: 1;
}

.home-slideshow.flickity-enabled .home-slideshow__slide.\--one:not(.is-selected) {
    opacity: 0;
}

.home-slideshow__slide.\--two,
.home-slideshow__slide.\--three {
    background-image: none;
}

.home-slideshow.is-ready .home-slideshow__slide.\--two {
    background-image: url('../img/purple-dress-2-1600.webp');
}

.home-slideshow.is-ready .home-slideshow__slide.\--three {
    background-image: url('../img/rusted-metal-2-1600.webp');
}

@media (max-width: 767px) {
    .home-slideshow__slide.\--one {
        background-image: url('../img/homepage-3-800.webp');
    }

    .home-slideshow.is-ready .home-slideshow__slide.\--two {
        background-image: url('../img/purple-dress-2-800.webp');
    }

    .home-slideshow.is-ready .home-slideshow__slide.\--three {
        background-image: url('../img/rusted-metal-2-800.webp');
    }
}

/*
 * A11Y-06: discreet icon-only pause/play control for the auto-advancing
 * background slideshow (WCAG 2.2.2). 36px round target (2.5.8 asks for 24px);
 * the accessible name and tooltip come from aria-label/title.
 */
.home-slideshow__toggle {
    align-items: center;
    background: rgba(0, 0, 0, .55);
    border: 0;
    border-radius: 50%;
    bottom: 1rem;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    left: 1rem;
    padding: 0;
    position: absolute;
    width: 36px;
    z-index: 20;
}

.home-slideshow__toggle[hidden],
.home-slideshow__icon[hidden] {
    display: none;
}

.home-slideshow__toggle:hover,
.home-slideshow__toggle:focus-visible {
    background: rgba(0, 0, 0, .85);
}

.home-slideshow__toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.home-slideshow__icon {
    fill: currentColor;
}

/* ------------------------------------------------------------------ *
 * A11Y-04 / A11Y-14: visible keyboard focus on carousels.
 * (css/flickity.css removes the outline with .flickity-enabled:focus.)
 * ------------------------------------------------------------------ */
.flickity-enabled:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

/* ------------------------------------------------------------------ *
 * A11Y-05: the two sticky bars covered ~125px of a phone screen (~50% at
 * 400% zoom) and hid focused elements. On small or short viewports they
 * now scroll with the page; on larger ones, anchor/focus scrolling leaves
 * room for them.
 * ------------------------------------------------------------------ */
@media (max-width: 767px), (max-height: 500px) {
    .top-nav__wrapper,
    .top-nav__wrapper2 {
        position: static;
    }
}

@media (min-width: 768px) and (min-height: 501px) {
    html {
        scroll-padding-top: 110px;
    }
}

/* ------------------------------------------------------------------ *
 * A11Y-10 / A11Y-09: text over photographs.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .top-nav__wrapper {
        background-color: rgba(0, 0, 0, .8); /* was .5 → 3.95:1 over light photos */
    }
}

.stylist-box__overlay {
    background-color: rgba(0, 0, 0, .7); /* was .3 → 2.12:1 over light photos */
}

/* ------------------------------------------------------------------ *
 * A11Y-11: links inside body copy are distinguishable without colour.
 * ------------------------------------------------------------------ */
.main__content p a,
.main__content li a,
.main__content td a,
.main__content p a:hover,
.main__content li a:hover,
.main__content td a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * A11Y-18: 9.6px stylist titles on phones.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .home-content__stylist-title {
        font-size: .875rem;
    }
}

/* ------------------------------------------------------------------ *
 * A11Y-06 / PERF-04: "We Proudly Serve" on phones is a Flickity carousel
 * (decision of 14-oct, option B): one logo at a time, NO autoplay, moved by
 * the arrows or by swiping. It replaces the auto-rotating Slick slider, so
 * Slick and jQuery are no longer needed. Flickity is already loaded on the
 * front page for the stylists carousel.
 *
 * Before Flickity starts (or if it fails), the same logos show as one
 * swipeable row of the same height, so nothing jumps when it initialises.
 * ------------------------------------------------------------------ */
.image-slider .testi-slider:not(.flickity-enabled) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.image-slider .testi-slider:not(.flickity-enabled) .testi-box {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.image-slider .testi-box {
    padding: 0 56px; /* keeps logos clear of the 44px arrow buttons */
    text-align: center;
    width: 100%;
}

.image-slider .testi-box img {
    height: auto;
    max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * PERF-08: Font Awesome now loads without blocking render; keep the
 * top-bar icons from shifting text when the font arrives.
 * ------------------------------------------------------------------ */
.top-nav .fa {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* ------------------------------------------------------------------ *
 * A11Y-15: the two front-page feature headings are now <h2> (they are
 * siblings of "The Therapy Hair Studio Team", not part of it). Keep the
 * look they had as <h3>.
 * ------------------------------------------------------------------ */
.home-feature__content h2 {
    font-size: 1.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
/* ------------------------------------------------------------------ *
 * Trust badge (front page). The hero gets its height from a :before
 * spacer, so .image-container sits at its bottom edge with no height and
 * the badge's top:10% resolved to 0: it hung below the hero, half hidden
 * by the "As Seen In" box and the dark section, and over the <h1> on
 * phones (already so before this work). Let the hero, which is
 * position:relative, be the containing block, so top:10%/right:5% from
 * the Customizer CSS place it inside the photo. The pause control's
 * offsets still work: it was measured from that same bottom edge.
 * ------------------------------------------------------------------ */
.image-layer--main-graphic .image-container {
    position: static;
}