/**
 * Related Categories Widget Styles
 * @version 1.0.0
 * @author David O'Brien
 * @description Styles for breadcrumb-based category navigation widget on product pages
 */

/* ==========================================================================
   Widget Container
   ========================================================================== */

#ppw-related-categories {
  background: #ffffff;
  border: 1px solid var(--pdp-line, #e0e0e0);
  border-radius: var(--pdp-radius-lg, 8px);
  box-shadow: var(--pdp-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
  padding: 10px 15px;
  margin-bottom: 30px;
  /* Prevent layout shift during load */
  min-height: 60px;
}

/* Heading */
#ppw-related-categories h3 {
  margin: 0 0 5px 0;
  padding: 0;
}

/* ==========================================================================
   Category List
   ========================================================================== */

#ppw-related-categories .ppw-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  align-items: center;
}

/* Fallback for browsers without gap support */
@supports not (gap: 12px) {
  #ppw-related-categories .ppw-cat-list {
    margin: 10px -6px 0 -6px;
  }
  
  .ppw-cat-pill {
    margin: 6px;
  }
}

/* ==========================================================================
   Category Pills
   ========================================================================== */

.ppw-cat-pill {
  /* Layout */
  display: inline-block;
  padding: 8px 16px;
  
  /* Appearance */
  background: #f3f0ff;
  color: #493493;
  border: 1px solid #d8d2f3;
  border-radius: 999px;
  
  /* Typography */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  
  /* Interaction */
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* Accessibility */
  outline-offset: 2px;
}

/* Hover state */
.ppw-cat-pill:hover {
  background: #e6e0ff;
  border-color: #c5bce8;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(73, 52, 147, 0.15);
}

/* Focus state for keyboard navigation */
.ppw-cat-pill:focus {
  outline: 2px solid #493493;
  outline-offset: 2px;
  background: #e6e0ff;
}

/* Active/pressed state */
.ppw-cat-pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(73, 52, 147, 0.15);
}

/* Visited link state (optional - comment out if not desired) */
.ppw-cat-pill:visited {
  color: #493493;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Small screens (mobile) */
@media (max-width: 480px) {
  #ppw-related-categories {
    padding: 12px;
    margin-bottom: 20px;
  }
  
  #ppw-related-categories h3 {
    font-size: 1.5em;
  }
  
  #ppw-related-categories .ppw-cat-list {
    gap: 8px;
    padding: 8px 0;
  }
  
  .ppw-cat-pill {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  /* Fallback for browsers without gap support */
  @supports not (gap: 8px) {
    #ppw-related-categories .ppw-cat-list {
      margin: 8px -4px 0 -4px;
    }
    
    .ppw-cat-pill {
      margin: 4px;
    }
  }
}

/* Medium screens (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
  #ppw-related-categories {
    padding: 12px 14px;
  }
  
  #ppw-related-categories .ppw-cat-list {
    gap: 10px;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  #ppw-related-categories {
    border: 1px solid #cccccc;
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .ppw-cat-pill {
    background: transparent;
    border: 1px solid #cccccc;
    color: #000000;
  }
  
  .ppw-cat-pill:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .ppw-cat-pill {
    border-width: 2px;
  }
  
  .ppw-cat-pill:focus {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .ppw-cat-pill {
    transition: none;
  }
  
  .ppw-cat-pill:hover {
    transform: none;
  }
}

/* Dark mode support (if your site supports it) */
/*@media (prefers-color-scheme: dark) {
  #ppw-related-categories {
    background: #1a1a1a;
    border-color: #333333;
  }
  
  #ppw-related-categories h3 {
    color: #ffffff;
  }
  
  .ppw-cat-pill {
    background: #2d2449;
    color: #c5bce8;
    border-color: #493493;
  }
  
  .ppw-cat-pill:hover {
    background: #3d3459;
    border-color: #5d4aa3;
  }
}*/

/* ==========================================================================
   Browser-Specific Fixes
   ========================================================================== */

/* Fix for Safari flex gap issues on older versions */
@supports (-webkit-touch-callout: none) and (not (gap: 12px)) {
  #ppw-related-categories .ppw-cat-list > * {
    margin: 6px;
  }
}

/* IE11 fallback (if still supporting) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ppw-cat-pill {
    margin: 6px;
  }
}