/*
 * Accessibility helpers for the storefront theme.
 * Plain static file (served from public/, no Vite build needed), loaded last in
 * layouts/master.blade.php so it can patch the theme styles.
 */

/* ---------- 1. Visible keyboard focus ---------- */
/* One clear focus ring for every interactive element (accent-700 #1a4fbe, 7.0:1 on white). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #1a4fbe;
    outline-offset: 2px;
}
/* These two had "outline: none" with no replacement in style.css. */
.header-categories .btn.dropdown-toggle:focus-visible,
.cart-actions .quantity input:focus-visible {
    outline: 3px solid #1a4fbe !important;
    outline-offset: 2px;
}
/* <main> is only a skip-link target (tabindex=-1), not a control: no ring around the whole page. */
#main-content:focus {
    outline: none;
}
/* On the dark footer a white ring is easier to see. */
.site-footer :where(a, button):focus-visible {
    outline-color: #ffffff;
}

/* ---------- 2. Skip link ---------- */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    background: #ffffff;
    color: #0e7a4f;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(17, 28, 25, 0.25);
}

/* ---------- 3. Touch targets (at least 44 x 44 px) ---------- */
/* Header icon controls on phones and tablets; desktop keeps its compact look. */
@media (max-width: 991.98px) {
    header .search-style,
    header .homepage-icon,
    header .dropdown > .btn.dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* Modal close buttons */
.modal .btn-close {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

/* ---------- 4. Colour contrast (WCAG AA 4.5:1) ---------- */
/* Contact card sub-text used --ink-400 #84948c on white = 3.18:1. Now 4.99:1. */
.contact-grid-card .contact-sub,
.contact-grid-card .contact-desc {
    color: #64736c;
}

/* ---------- Footer legal links (Privacy / Terms / Cookies) ---------- */
/* #b0bdb5 on the footer strip #07110d = 9.86:1; links are 44px tall for touch. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}
.footer-legal a {
    color: #b0bdb5;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

/* ---------- Enquiry forms: WhatsApp field with flag picker ---------- */
/* intl-tel-input wraps the input in an inline-block .iti, so it was narrower
   than the other fields. Make it full width like every other input. */
.enquiry-phone-field .iti {
    display: block;
    width: 100%;
}
.enquiry-phone-field .iti .form-control {
    width: 100%;
}
.enquiry-phone-field .form-text {
    margin-top: 0.35rem;
}
/* The wrapper also hides Bootstrap's error text (it only shows next to an
   invalid input); show it when the wrapped input is marked invalid. */
.enquiry-phone-field .iti:has(.is-invalid) ~ .invalid-feedback {
    display: block;
}
/* Keep the country list above the modal content and scrollable */
.iti__dropdown-content {
    z-index: 1060;
}

/* ---------- 5. Heading-level changes that keep the old look ---------- */
/* Shop filter titles are now h2 (were h5 styled by ".sidebar h5"). */
.sidebar .filter-title {
    color: var(--ink-900, #111c19);
    font-weight: 600;
    font-size: 1rem;
}