/**
 * 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;
}

/* 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 10: Top Bar Tooltip Hover Gap
 * ========================================
 * Bridges the gap between top bar links and their
 * tooltip popups so users can reach links inside them.
 */
#dfv4-header .dfv4-topbar .head-content .arrow_box {
  padding-top: 20px;
  margin-top: -10px;
}