/* SET-12957: single source of truth for focus indicators.
   WCAG 2.4.7 Focus Visible, 2.4.11 Focus Appearance.

   Consolidates the rings previously duplicated in:
     - App_Master/Base.Master (inline <style>)
     - Content/accessibility-color-contrast.css
     - Content/accessibility-product-header.css (declared twice in that file)
     - Content/accessibility-product.css
     - Content/accessibility-update-contact-info.css
     - Content/accessibility-carousel.css
     - Mvc/Views/TermsAndConditions/Default.cshtml (inline <style>)

   Ring design — two tone, navy outer + white inner:
     #004B91 vs #f2f2f2 page surround ....... 7.6:1
     #004B91 vs #EDB211 yellow utility bar .. 4.0:1
     #004B91 vs #f5f5f5 table cell fill ..... 6.9:1
     #FFFFFF vs #004B91 active nav item ..... 8.7:1
   The navy tone is load-bearing and must never be removed. The white tone
   only contributes contrast against the navy/blue active fills; on light
   surfaces it measures ~1.05:1 and is omitted where it would only widen
   the ring into neighbouring content.

   :focus is paired with :focus-visible so the ring still renders in engines
   that do not resolve :focus-visible for programmatically moved focus. */


/* ---------------------------------------------------------------------------
   1. Default ring — links, buttons, form controls, custom focusable elements
   --------------------------------------------------------------------------- */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
summary:focus,
summary:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible,
.button:focus,
.button:focus-visible,
.header-ts:focus,
.header-ts:focus-visible,
.sfSubmitBtn:focus,
.sfSubmitBtn:focus-visible,
.sfLostPassword:focus,
.sfLostPassword:focus-visible,
.form-control:focus,
.form-control:focus-visible,
.carousel-owl-wrapper .owl-nav .owl-prev:focus,
.carousel-owl-wrapper .owl-nav .owl-prev:focus-visible,
.carousel-owl-wrapper .owl-nav .owl-next:focus,
.carousel-owl-wrapper .owl-nav .owl-next:focus-visible {
    border-radius: 6px !important;
    outline: 2px solid #004B91 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   2. Navigation — SET-12835 (.sfNavVertical), SET-12834 (.account-nav)
   Covered by rule 1, but restated so the nav-specific hover weight and the
   ring stay together and cannot drift apart.
   --------------------------------------------------------------------------- */
.sfNavVertical a:focus,
.sfNavVertical a:focus-visible,
.account-nav a:focus,
.account-nav a:focus-visible,
.utility-nav a:focus,
.utility-nav a:focus-visible,
.tabs a:focus,
.tabs a:focus-visible,
.tabs-bar a:focus,
.tabs-bar a:focus-visible,
#langselect select:focus,
#langselect select:focus-visible {
    border-radius: 6px !important;
    outline: 2px solid #004B91 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Hover weight kept separate from the focus ring: applying font-weight on
   focus reflows the label and shifts adjacent content. */
.sfNavVertical a:hover {
    font-weight: 700;
}


/* ---------------------------------------------------------------------------
   3. Ensighten privacy toggle — ring follows the sibling .switch
   --------------------------------------------------------------------------- */
.ensCheckbox:focus + .switch,
.ensCheckbox:focus-visible + .switch {
    border-radius: 6px !important;
    outline: 2px solid #004B91 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   4. Logo link — inset ring on the anchor only
   The <a> is the focusable element; the nested <img> must not also be targeted
   or two rings render. The anchor is stretched by
   #main-header .navsection-left { flex: 1 1 0 }, so it is shrunk to the image
   with inline-block + width: fit-content, otherwise the ring spans the empty
   half of the header.
   Scoped to #main-header: .navsection-left is also used inside #main-footer,
   where making the anchors inline-block activates the otherwise-inert
   min-width/min-height: 44px in accessibility-product-footer.css and inflates
   the footer link rings.
   Inset offset and no white tone: #main-header carries overflow-x: hidden on
   the Products and CreateAccount pages (accessibility-product-header.css),
   which crops anything painted outward. Navy on the white header fill is
   8.7:1, so the single tone is sufficient.
   --------------------------------------------------------------------------- */
#main-header .navsection-left a {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}

#main-header .navsection-left a:focus,
#main-header .navsection-left a:focus-visible {
    border-radius: 6px !important;
    outline: 2px solid #004B91 !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   5. Icon-only links inside tables — SET-12843
   Scoped to anchors whose sole child is an image, so text links in the same
   cells keep their line box and do not jump on focus. Tight offset keeps the
   ring inside the 0.5em cell padding; the white tone is dropped because the
   cells are #f5f5f5 (~1.05:1).
   --------------------------------------------------------------------------- */
.tabs .tab-content table a.icon-link:focus,
.tabs .tab-content table a.icon-link:focus-visible,
.prodListRow td a.icon-link:focus,
.prodListRow td a.icon-link:focus-visible {
    display: inline-block;
    line-height: 0;
    border-radius: 6px !important;
    outline: 2px solid #004B91 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   6. Sortable header cells — SET-12832
   Made focusable by Scripts/accessibility-table-sort.js. The ring must be
   INSET: these tables use border-collapse: collapse, so the cell has no margin
   box and a positive outline-offset spills into the adjacent cell and is
   clipped by overflow-x: hidden on .tabs/.container.
   --------------------------------------------------------------------------- */
table.sort thead td.header:focus,
table.sort thead td.header:focus-visible,
table.sort thead th.header:focus,
table.sort thead th.header:focus-visible,
td[tabindex]:focus,
td[tabindex]:focus-visible,
th[tabindex]:focus,
th[tabindex]:focus-visible,
th[data-a11y-sort-ready]:focus,
th[data-a11y-sort-ready]:focus-visible {
    outline: 2px solid #004B91 !important;
    outline-offset: -2px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------
   7. Ring clearance
   Ancestors that would otherwise crop an offset ring.
   --------------------------------------------------------------------------- */
.sfNavVerticalWrp,
.sfNavVertical,
.sfNavVertical li,
.sfNavHorizontalWrp,
.account-nav,
.account-nav ul,
.account-nav li,
.tab-content,
table.full-width.sort tbody,
.prodListRow,
.prodListRow td {
    overflow: visible;
}

.sfNavVerticalWrp {
    padding-left: 4px;
    padding-right: 4px;
}


/* ---------------------------------------------------------------------------
   8. Skip navigation link — SET-12961
   WCAG 2.4.1 Bypass Blocks.

   Consolidates the rule previously inline in:
     - Mvc/Views/OrderHistory/Details.cshtml (inline <style>)   
   --------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;    
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    padding: .6rem .85rem;
    background: #f7be23;
    color: #1f253d;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

    .skip-link:focus,
    .skip-link:focus-visible {
        top: 5px;
        color: #1f253d;      
        outline: 2px solid #FFFFFF !important;
        outline-offset: -5px !important;
        box-shadow: none !important;
    }

#main-content[tabindex="-1"]:focus,
#main-content[tabindex="-1"]:focus-visible,
#order-content[tabindex="-1"]:focus,
#order-content[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}