/*
 * Accessibility fixes (WCAG 2.2 AA), from the Audsey audit of November 2026.
 * Loaded after the theme and plugin styles by functions/accessibility.php.
 */

/* Text for screen readers only, e.g. "(opens in a new tab)". */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* Hidden text still has colors that checkers measure (WAVE flagged the link gray on the peach
       header, about 4:1); give it its own pair so it passes wherever it sits. */
    color: #000 !important;
    background: #fff !important;
}

/* Skip link: hidden until focused, then shown at the top left (2.4.1). */
.skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 100000;
    padding: 12px 18px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
.skip-link:focus {
    top: 8px;
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}
#main:focus {
    outline: none;
}

/* Theme header and contact strip: orange and grey text on #3B3B3B at 4.5:1 or more (1.4.3). */
#footer,
.top-header {
    color: #fa9447;
}
.top-header a[href^="tel:"] {
    color: #fa9447 !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: #aaaaaa;
}

/* The header slogan is a paragraph now (it was an h4 ahead of the page's h1; 1.3.1). */
.mid-header-contents .header-slogan {
    margin-left: auto;
}

/* Social links: at least 24 by 24 pixels (2.5.8). */
.social-link > li > a {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    line-height: 24px;
    text-align: center;
}

/* Breadcrumb: below the menu bar, which used to cover it (2.4.11), with 24px targets (2.5.8). */
.breadcrumb-wrap {
    padding-top: 70px;
}
.breadcrumb > li > a {
    display: inline-block;
    min-height: 24px;
    padding: 3px 2px;
}

/* Visible keyboard focus on carousel and gallery controls (2.4.7). */
.ha-slick--carousel .slick-arrow:focus-visible,
.ha-slick--carousel .slick-dots button:focus-visible,
.elementor-swiper-button:focus-visible,
.swiper-pagination-bullet:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #ffffff;
}

/* Carousel captions sit on photos: a 70% black panel behind them keeps white text at 8:1 or better
   wherever the photo is lightest (1.4.3; measured with the Audsey contrast helper). */
.ha-slick--carousel .ha-slick-content {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
}

/* Testimonial carousel dots: 12px, 26px apart (2.5.8). */
.elementor-widget-testimonial-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 7px !important;
}

/* Sidebar contact form (Gravity Forms #2): the theme hid the email label; show every label,
   and make the required asterisk readable on #3B3B3B (3.3.2, 1.4.3). */
#field_2_3 label.gfield_label {
    display: inline-block;
}
#gform_2 .gfield_required {
    color: #fa9447;
}

/* Contact form: visible labels and required markers (3.3.2). */
.elementor-form .elementor-field-label {
    font-weight: 600;
}
.elementor-form .elementor-field-required .elementor-field-label::after {
    color: #b00000;
}

/* Theme footer: white text sat straight on a black-and-white photo (down to 1:1). A 70% black layer
   over the photo keeps it at 8:1 or better (1.4.3). */
#colophon {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/footer-bckgrnd.jpg);
    /* On phones the last line ran into the white page below the footer. */
    padding-bottom: 24px;
}

/* Sidebar form button: white on #1A96FF was 3.07:1; the text-safe brand orange is 5.68:1 (1.4.3). */
#gform_2 .gform_button {
    background: #b04500;
    border-color: #b04500;
}

/* Links inside a line of footer text: underlined, since their color matches the text around them (1.4.1). */
.elementor-location-footer p a,
.rights-reserved a {
    text-decoration: underline;
}

/* Site map page. */
.holt-sitemap {
    margin-bottom: 2em;
}
.holt-sitemap li {
    margin: 0.4em 0;
}


/* Plain pages shown inside the Elementor header and footer (Site Map, Accessibility Statement):
   the site's type and colors instead of the old theme's 14px gray. Brown #692A01 is 11.9:1 on
   white; links use the text-safe orange (#B04500, 5.68:1) and stay underlined (1.4.1). */
body.page:not(.elementor-page) main {
    color: #692a01;
    font-family: "Metrophobic", sans-serif;
    font-size: 18px;
    line-height: 1.55;
    padding-bottom: 48px;
}
body.page:not(.elementor-page) main h1,
body.page:not(.elementor-page) main h2 {
    font-family: "Michroma", sans-serif;
    color: #692a01;
    font-weight: 400;
    line-height: 1.25;
}
body.page:not(.elementor-page) main h1 {
    font-size: 42px;
    /* Clear of the logo, which hangs below the header bar. */
    margin: 72px 0 24px;
}
body.page:not(.elementor-page) main h2 {
    font-size: 28px;
    margin: 36px 0 12px;
}
body.page:not(.elementor-page) main p,
body.page:not(.elementor-page) main li {
    font-size: 18px;
    line-height: 1.55;
    color: #692a01;
}
body.page:not(.elementor-page) main li {
    margin-bottom: 6px;
}
@media (max-width: 480px) {
    body.page:not(.elementor-page) main h1 {
        font-size: 28px;
    }
    body.page:not(.elementor-page) main h2 {
        font-size: 22px;
    }
}
body.page:not(.elementor-page) main a {
    color: #b04500;
    text-decoration: underline;
}
