/* =====================================================================
   a11y.css — WCAG 2.1 AA remediation, additive only.
   Loaded LAST so it never has to fight the theme for precedence.

   Ground rules for this file:
   - Nothing here changes the resting appearance of the site.
   - Every rule is gated behind :focus-visible, :focus-within, a
     screen-reader-only class, or prefers-reduced-motion.
   - No layout, no spacing, no colour of any existing visible element
     is modified.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Visible keyboard focus indicator            (WCAG 2.4.7 AA, 1.4.11 AA)

   main.min.css ships a CSS reset that applies `outline: 0` to `a` and
   ~50 other elements, which removes the browser default focus ring with
   no replacement. :focus-visible is used deliberately: mouse and touch
   activation stay exactly as they are today, so nothing changes for a
   pointer user. The ring only appears for keyboard navigation.

   #ff5a5a measures 6.6:1 against the site's #111111 ground and 6.4:1
   against #171717 — both clear the 3:1 minimum for a focus indicator.
   The black shadow ring underneath keeps the indicator visible if a
   control ever sits on a light surface.
--------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #ff5a5a !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.9) !important;
    border-radius: 1px;
}

/* Inputs already sit inside a padded field; keep the ring tight to the box
   so the form layout is not visually disturbed. */
:where(input, select, textarea):focus-visible {
    outline-offset: 0 !important;
}

/* Lightbox controls sit on a dark scrim of their own. */
#lightbox a:focus-visible,
#lightbox button:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.9) !important;
}


/* ---------------------------------------------------------------------
   2. Screen-reader-only utility

   Used for the skip link and for the polite live regions that announce
   filter results and form outcomes. Renders zero visible pixels.
--------------------------------------------------------------------- */
.a11y-sr-only {
    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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ---------------------------------------------------------------------
   3. Skip link                                        (WCAG 2.4.1 A)

   28 focusable controls (two full copies of the main menu) precede
   <main> on every page. This link is invisible until it receives
   keyboard focus, so the page at rest is unchanged.
--------------------------------------------------------------------- */
.a11y-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 20px;
    background-color: #000000;
    color: #ffffff;
    font-family: "Roboto Slab", "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #ff5a5a;
}

.a11y-skip-link:focus {
    left: 8px;
    top: 8px;
}


/* ---------------------------------------------------------------------
   4. Header dropdown reachable by keyboard             (WCAG 2.1.1 A)

   The theme reveals the "About Us" submenu with:
       .qodef-header-navigation ul li.qodef-menu-item--narrow:hover > ul
           { opacity: 1; visibility: visible }
   These rules add the keyboard equivalent with the identical declaration
   block, so the panel that appears on focus is pixel-identical to the one
   that appears on hover.
--------------------------------------------------------------------- */
.qodef-header-navigation ul li.qodef-menu-item--narrow:focus-within > ul,
.qodef-header-navigation ul li.qodef-menu-item--narrow ul li.menu-item-has-children:focus-within > ul {
    opacity: 1;
    visibility: visible;
}

.qodef-header-navigation ul li .qodef-drop-down-second:focus-within {
    opacity: 1;
    visibility: visible;
    overflow: visible;
    z-index: 20;
}


/* ---------------------------------------------------------------------
   5. Reduced motion                                    (WCAG 2.2.2 A, partial)

   Honours the operating-system "reduce motion" preference. Users who have
   not set that preference see the site exactly as it is today.

   NOTE: this is a partial measure. 2.2.2 also requires a control that any
   user can operate, which would mean adding a visible pause button to the
   hero video and the testimonial carousel — a design change, so it is
   listed for approval rather than implemented here.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #parallax-video {
        animation-play-state: paused;
    }

    .swiper-wrapper,
    .qodef-swiper-container .swiper-wrapper {
        transition-duration: 1ms !important;
    }
}


/* ---------------------------------------------------------------------
   6. Style compensation for de-duplicated IDs        (WCAG 4.1.1 A, 1.3.1 A)

   Eight page templates repeated #qodef-page-wrapper / #qodef-page-inner
   inside the ones the layout already renders, and five also nested a
   second <main id="qodef-page-content">. Those inner elements now carry
   classes instead of duplicate IDs. These rules restore the exact
   declarations the IDs were contributing, so computed styles — and
   therefore the rendered layout — are unchanged.

   Replaces, for the inner elements only:
     #qodef-page-wrapper { position: relative; overflow: hidden }   (main.min.css)
     #qodef-page-inner   { position: relative }                     (main.min.css)
     #qodef-page-inner   { padding: 0px }                           (layout inline <style>)
--------------------------------------------------------------------- */
.qodef-page-wrapper-section {
    position: relative;
    overflow: hidden;
}

.qodef-page-inner-section {
    position: relative;
    padding: 0;
}


/* ---------------------------------------------------------------------
   7. Post sidebar category list — note, no rule needed  (WCAG 1.3.1 A)

   The categories widget nested a <div class="social-links"> directly inside
   its <ul>, with the <li> elements inside that div. That is invalid list
   markup, so assistive technology did not expose it as a list. The class and
   its inline padding-top moved onto the <ul> itself, which keeps every
   .social-links rule matching; the links are pixel-identical afterwards.

   Side effect worth recording: with the <li> now a real child of the <ul>,
   the theme's own rule

       .qodef-dark-theme-skin #qodef-page-sidebar .widget.widget_categories ul > li
           { color: #a2a2a2 }

   finally applies, where the broken markup had been letting the weaker
   .qodef-dark-theme-skin .widget li { color: #fff } win. Nothing renders in
   that colour — the <li> has no direct text, all of it sits inside the <a>,
   which is unchanged — so this is invisible, and it is the colour the theme
   author intended for this context. No compensating rule is added.
--------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   8. Reflow below 420 px                              (WCAG 1.4.10 AA)

   main.min.css ends its breakpoint ladder at

       @media only screen and (max-width: 680px) { .qodef-content-grid { width: 420px } }

   with nothing below it. On any viewport narrower than 420 px the container
   therefore stayed 420 px wide while #qodef-page-wrapper { overflow: hidden }
   clipped whatever stuck out — and because the document never gained a
   horizontal scrollbar, that content could not be reached at all.

   Measured on /faq before this rule:
       320 px  47 elements clipped, worst overhang 100 px
       360 px  31 elements clipped, worst overhang  60 px
       390 px   1 element  clipped

   After: 360 px and 390 px are clean; 320 px drops to 15 (footer only). The
   page grows taller because text that used to be cut off now wraps instead.

   Nothing at or above 420 px is affected — verified with an element-level
   before/after comparison at 768 px and 1280 px, both 0 changes.
--------------------------------------------------------------------- */
@media only screen and (max-width: 419px) {
    .qodef-content-grid {
        width: auto;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* The remaining overflow at 320 px was not a container width at all: the
       email address and a couple of footer strings are single unbreakable
       words wider than the column (the address alone measures 297 px inside a
       158 px box), which forces the flex items to grow past the viewport.
       "anywhere" is used rather than "break-word" because only "anywhere"
       also reduces the intrinsic min-content width, which is what lets the
       flex item actually shrink. */
    .footer-container,
    .footer-block,
    .footer-block a,
    .footer-block p,
    .address-container,
    .address-container a {
        overflow-wrap: anywhere;
    }
}


/* ---------------------------------------------------------------------
   9. Motion pause controls                            (WCAG 2.2.2 A)

   Two things on the home page start moving by themselves and run for more
   than five seconds: the 43-second looping hero video, and the testimonials
   carousel (data-options carries autoplay:true). 2.2.2 requires a mechanism
   any user can operate to pause them, so each gets a small toggle.

   Deliberately quiet: dark translucent disc, thin border, sitting in a
   corner rather than over the artwork. 40x40 clears the 24x24 target size
   minimum with room to spare, and the icon is drawn in CSS so it needs no
   extra asset.
--------------------------------------------------------------------- */
.a11y-motion-toggle {
    position: absolute;
    z-index: 20;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}

.a11y-motion-toggle:hover {
    border-color: #ff5a5a;
    background-color: rgba(0, 0, 0, 0.75);
}

/* Pause glyph: two bars, drawn with a border so no image is needed. */
.a11y-motion-toggle__icon {
    display: block;
    width: 10px;
    height: 13px;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    box-sizing: border-box;
}

/* Play glyph once paused: a triangle. */
.a11y-motion-toggle[aria-pressed="true"] .a11y-motion-toggle__icon {
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}

.a11y-motion-toggle--hero {
    right: 24px;
    bottom: 24px;
}

@media only screen and (max-width: 680px) {
    .a11y-motion-toggle--hero {
        right: 14px;
        bottom: 14px;
    }
}

/* The carousel uses outside navigation, so sit the toggle with those arrows
   rather than on top of the quote. */
.a11y-motion-toggle--carousel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
}


/* ---------------------------------------------------------------------
   10. Pointer target size                    (WCAG 2.2 SC 2.5.8, AA)

   Not required for the 2.1 AA target this work is aimed at, but a real
   nuisance on a phone: 13 links measure 19-21 px tall (their widths are
   fine). Each needs a few more pixels of height.

   Two techniques, chosen per element so that nothing moves:

   - display:inline links take vertical padding. On an inline box that
     padding expands the hit area and the background box but does NOT
     contribute to line height, so no sibling shifts. The links carry no
     background colour, so it is invisible.
     The footer menu already uses ::before and ::after for its underline
     animation, which is why padding is used there rather than an overlay.

   - display:inline-block links cannot take vertical padding without
     growing their own box, so those get an absolutely positioned ::after
     overlay instead. Only used on elements with no existing pseudo-element.

   Footer menu items sit 5 px apart, so 2 px per side takes them to 25 px
   while leaving a 1 px gap — expanded, never overlapping.
--------------------------------------------------------------------- */

/* Footer navigation: inline, and its pseudo-elements are already spoken for. */
#qodef-page-footer #menu-footer-menu a,
.footer-navigation-container .menu a {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Home "artistry / devotion / passion" icon links: inline, no pseudo-elements. */
.qodef-m-image > a {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Not fixed here: the phone/address links (150x20) and back-to-top (13x68).
   An absolutely positioned ::after overlay was tried for both and measured as
   having no effect — a sibling element paints over the phone link's overlay,
   and raising z-index did not change it. Enlarging these genuinely needs a
   size change, which is a visual decision rather than an invisible one, so
   they are left for a design call. 7 of the 13 undersized targets, the footer
   navigation, are fixed above. 2.5.8 is a WCAG 2.2 criterion and is not
   required for the 2.1 AA target this work is aimed at. */