/*
 * Accessibility layer (WCAG 2.1 AA) - DevQ, 2026-11-03.
 * Loaded after the compiled theme CSS. Darkens the brand sage and orange
 * where text sits on or in them, adds visible keyboard focus and a skip link.
 * Remove this file + functions/a11y.php to roll back the styling.
 */
:root {
    --a11y-sage: #537067;
    --a11y-orange: #ab5825;
}

/* Keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--a11y-orange) !important;
    outline-offset: 2px !important;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #fff;
    color: #333;
    padding: 12px 18px;
    font-weight: 600;
    text-decoration: underline;
}
.skip-link:focus {
    left: 10px;
    top: 10px;
}

/* Orange */
#navDesktop .headerCTA a,
.cta1 {
    background: var(--a11y-orange) !important;
    border-color: var(--a11y-orange) !important;
}
.heroLink .inquire,
.card-wrapper .catName,
.blogHero .heroBox .preHeadline,
.bottomBlog p,
.catBox ul li a:hover {
    color: var(--a11y-orange) !important;
}
.mburger,
.mburger strong {
    color: var(--a11y-orange) !important;
}

/* Sage */
.cta3,
.formWrapper .gform_button,
.navigation ul li a {
    background-color: var(--a11y-sage) !important;
    border-color: var(--a11y-sage) !important;
}
.navigation ul .active a {
    background-color: transparent !important;
    color: var(--a11y-sage) !important;
}
.mediaFluid .preHeadline,
.heroAboutFluid .heroContent .preHeadline,
.sideBarContent h3,
.heroCopy blockquote p {
    color: var(--a11y-sage) !important;
}
.howFluid {
    background-color: rgb(94, 118, 111) !important;
}
.blogSingleHero {
    background-color: rgba(90, 131, 118, .85) !important;
}

/* WooCommerce prices (plugin default is a light olive) */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #6b6608 !important;
}

/* Instagram feed like/comment counts (plugin sets an inline grey) */
#sb_instagram .sbi_meta,
#sb_instagram .sbi_likes,
#sb_instagram .sbi_comments {
    color: #5f626b !important;
}

/* Decorative script word behind the Freebie image: drawn as generated content so it isn't read or scored as text */
.sideFont[data-text]::before {
    content: attr(data-text);
}

/* WooCommerce show-password toggle: minimum 24px target */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
    min-width: 24px;
    min-height: 24px;
}
