/**
 * ADA Compliance - Contrast Ratio Fixes
 *
 * This file contains color adjustments to meet WCAG 2.0 AA standards
 * for text contrast (minimum 4.5:1 ratio for normal text).
 *
 * To disable these fixes, simply remove the link to this file from outer.tpl.php
 */

/* Fix 2: Shopping cart item number badge (was #f76f28, now darker orange) */
#dfv4-header .dfv4-main-top .extra .cart .item-number {
  background-color: #d84d00 !important; /* Contrast ratio: 4.22:1 ✓ (was 2.89:1) */
}

/* Fix 3: Orange price/savings text (was #f76f28 = 2.89:1, fails even large text 3:1) */
.text-secondary-alt {
  color: #d84d00 !important; /* Contrast ratio: 4.22:1 ✓ — matches badge orange */
}

/* Fix 3a: Orange price text — hardcoded #f76f28 in SCSS, not via utility class */
.price-wrapper .price,
.price-wrapper .price .per-filter,
.product-price .price,
.custom-sidebar .price,
.free-shipping,
.list-block-oem > span:first-child,
.hover-discount-display {
  color: #d84d00 !important;
}

/* Fix 3a-i: Orange star ratings (UI component) */
.df.rating-stars.orange span::before {
  color: #d84d00 !important;
}

/* Fix 3b: Orange product badge backgrounds — strip badge (New Lead / Recommend) */
/* .product-label used by finder results + fridge pages; .df.product-badge used by filtration page */
.product-label .item.new-lead,
.product-label .item.recommend,
.df.product-badge .item {
  background: #d84d00 !important;
}
.product-label .item.new-lead::before,
.product-label .item.recommend::before,
.df.product-badge .item::before {
  border-left-color: #d84d00 !important;
}

/* Fix 3c: Orange ribbon badge (On Sale diagonal ribbon) */
.df.ribbon.onsale .label {
  background: #d84d00 !important;
}
.df.ribbon.onsale .label:before {
  border-left-color: #d84d00 !important;
  border-top-color: #d84d00 !important;
}
.df.ribbon.onsale .label:after {
  border-right-color: #d84d00 !important;
  border-top-color: #d84d00 !important;
}

/* Fix 4: Additional link color adjustments for common link classes */
.df.a-invert {
  /* Ensuring links in dropdown menus have sufficient contrast */
  color: #005387 !important; /* Brand primary, 8.1:1 contrast on white */
}

.df.a-invert:hover,
.df.a-invert:focus-visible {
  color: #1295d3 !important; /* Blue for hover/keyboard-focus state */
}

/* ========================================
 * Fix 6: Minimum Font Size (12px)
 * ========================================
 * Font sizes should be at least 12px to ensure readability.
 */

/* Mobile menu "Menu" label (was 11px) */
#dfv4-header .dfv4-main-top .toggle-nav-mobile span {
  font-size: 12px !important;
}

/* Subscription dashboard product info (was 9px) */
.SubProductInfo {
  font-size: 12px !important;
}

/* Email popup disclaimer text (was 0.6em) */
.emailPopup .disclaimer {
  font-size: 12px !important;
}

/* ========================================
 * Fix 7: Keyboard Focus Indicators
 * ========================================
 * All interactive elements must have a visible outline when focused
 * via keyboard navigation (Tab key) for accessibility.
 */

/* Suppress focus outline on mouse click — only show for keyboard navigation */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Global focus style for all focusable elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Prevent jagged focus outline on elements with mixed-height icon + text */
/* Applied always (not just on focus) so the element box is stable before outline renders */
#dfv4-header .dfv4-topbar li a,
#dfv4-header .main-link,
#dfv4-header .nav-menu-link,
.filterSubTxt {
  display: inline-block;
}

/* Remove visual padding below nav links; override mega/mini menu top to match natural wrapper height. */

#dfv4-header .large-nav__wrapper.main-nav {
  margin-bottom: -19px !important;
}

/* Reposition hover indicator line — was hidden inside padding-bottom: 19px, now needs adjustment. */
#dfv4-header .fridge-item__wrapper .main-link,
#dfv4-header .air-item__wrapper .main-link,
#dfv4-header .mini-item__wrapper .main-link {
  position: relative;
}
#dfv4-header .fridge-item__wrapper:hover .main-link::after,
#dfv4-header .fridge-item__wrapper:focus-within .main-link::after,
#dfv4-header .air-item__wrapper:hover .main-link::after,
#dfv4-header .air-item__wrapper:focus-within .main-link::after,
#dfv4-header .mini-item__wrapper:hover .main-link::after,
#dfv4-header .mini-item__wrapper:focus-within .main-link::after {
  bottom: 3px !important;
}

/* SCSS sets arrow_box at top:35px but li is only 30px tall — 5px hover gap.
 * Override top to 30px so the tooltip starts exactly at the li's bottom edge. */
#dfv4-header .dfv4-topbar .freeShipReturns .arrow_box,
#dfv4-header .dfv4-topbar .oneYearPurchase .arrow_box,
#dfv4-header .dfv4-topbar .madeWithCare .arrow_box,
#dfv4-header .dfv4-topbar .cell-phone .arrow_box {
  top: 30px !important;
}


/* Continue Shopping link replaces a button — needs block display and matching height */
.new-cart-content a.button-outline {
  display: block;
  min-height: 45px;
  line-height: 45px;
  padding: 0 12px;
  text-align: center;
}

/* Add To Cart link in addons matches original button styling */
.main-content .new-cart-content .cart-addons-wrapper .recommend-addon .info a.df.button {
  display: block;
  border-radius: 500px;
  background: linear-gradient(90deg, #116EC4 0%, #187FDF 100%);
  width: 100%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

/* Cart addons image links need display:inline-block for focus outline to render correctly */
.cart-addons-wrapper .image-wrapper a {
  display: inline-block;
}

/* name-wrapper clips the focus outline — constrain link to parent width so outline is fully visible */
.cart-addons-wrapper .name-wrapper {
  padding: 4px;
}
.cart-addons-wrapper .name-wrapper a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Add To Cart link focus indicator */
.cart-addons-wrapper .recommend-addon .info a.df.button:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
}

/* Specific focus styles for header links — higher specificity than global a:focus-visible */
#dfv4-header a:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Extra padding around top bar link focus boxes */
#dfv4-header .dfv4-topbar li a:focus-visible {
  outline-offset: 6px !important;
}

/* Focus styles for custom radio buttons and checkboxes */
/* The <input> is visually hidden (1px clipped); outline the container via :focus-within instead */
.df.radio:focus-within,
.df.radio-line:focus-within,
.df.checkbox:focus-within {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
}
/* Suppress on mouse click — only show for keyboard navigation */
.df.radio:has(input:focus:not(:focus-visible)),
.df.radio-line:has(input:focus:not(:focus-visible)),
.df.checkbox:has(input:focus:not(:focus-visible)) {
  outline: none !important;
}
/* Suppress outer outline when focus moves to a non-input descendant (e.g. "Learn more" link) */
.df.radio:has(:focus-visible:not(input)),
.df.radio-line:has(:focus-visible:not(input)),
.df.checkbox:has(:focus-visible:not(input)) {
  outline: none !important;
}

/* Focus styles for buttons */
.btn:focus-visible,
.df.button:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Focus styles for form inputs */
.form-control:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 0 !important;
  border-color: #1295d3 !important;
  box-shadow: none !important;
}

/* Focus styles for mega menu and dropdown items */
.mega-menu__wrapper a:focus-visible,
.mini-menu__wrapper a:focus-visible,
.arrow_box a:focus-visible {
  outline: 2px solid #1295d3 !important;
  outline-offset: 2px !important;
}

/* Brand icon links (fridge/air brand logos): match the hover box-shadow style */
/* Suppress outline on <a>, apply box-shadow directly to <img> like :hover does */
/* Uses #dfv4-header ID to beat the 1,1,1 specificity of #dfv4-header a:focus-visible */
#dfv4-header .fridge-icon-a__wrapper:focus-visible,
#dfv4-header .air-icon-a__wrapper:focus-visible {
  outline: none !important;
  background-color: transparent !important;
}
#dfv4-header .fridge-icon-a__wrapper:focus-visible img,
#dfv4-header .air-icon-a__wrapper:focus-visible img {
  box-shadow: 0px 0px 0px 2px #1295d3 !important;
}


/* ========================================
 * Fix 8: Skip Navigation Links
 * ========================================
 * Hidden links that appear on keyboard focus (Tab key)
 * to let users jump to main content, nav, or footer.
 */

/* Hidden by default - positioned off-screen */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #005387;
  color: #ffffff;
  padding: 12px 24px;
  z-index: 100000;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom-right-radius: 4px;
  transition: top 0.2s ease;
}

/* Visible on focus - slides into view */
.skip-link:focus {
  top: 0;
  outline: 2px solid #ffffff !important;
  outline-offset: -2px !important;
  color: #ffffff;
}

/* ========================================
 * Fix 9: Inline <a> wrapping block children or multi-line text
 * ========================================
 * display:block gives a clean rectangle outline instead of following
 * the inline text flow (jagged) or wrapping block children (collapsed).
 */
.nav-category-homepage a,
.product-cart-hover .col-8 > a,
span.name > a {
  display: block;
}

/* ========================================
 * Fix 11: Product Image Slider Focus
 * ========================================
 * The <a> is display:inline by default, giving it no block dimensions.
 * Making it display:block lets it fill the image area so the inset
 * outline (negative offset) renders visibly inside the element bounds,
 * avoiding clipping by the slick-list overflow:hidden parent.
 */
.main-image-slider a {
  display: block;
}
.main-image-slider a:focus-visible {
  outline: 3px solid #1295d3 !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

/* ========================================
 * Fix 10a: Top Bar Height
 * ========================================
 * Reduces topbar height from 50px to 40px.
 * margin-top: 10px + li height: 30px + 0 margin-bottom = 40px.
 */
#dfv4-header .dfv4-topbar .head-content .info-left,
#dfv4-header .dfv4-topbar .head-content .info-right {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* .searchForm button has transform:translateY(-50%) which conflicts with
   .df.inline-input-button button top:0, causing the button to float above the input. */
.df.inline-input-button.searchForm button {
  transform: none;
  right: 0;
}

/* Custom filter style radios (dust/allergy/etc) use display:none which removes them from
   the tab order entirely. Replace with visually-hidden so keyboard users can reach them. */
#customFilterSelect .custom-form-drop .fieldset .field-choice input[type="radio"] {
  display: block !important;
  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;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}

.field-choice:has(input[type="radio"]:focus-visible) {
  outline: 2px solid #1295d3 !important;
  outline-offset: 4px !important;
}