/* stylelint-disable media-feature-name-value-no-unknown, property-no-deprecated, value-keyword-case -- Phase 9: `prefers-contrast: high` is a valid media value the linter's data lags on; `clip` retained for the sr-only fallback; `currentColor` is the canonical SVG keyword (lowercasing it breaks strict-value's ignoreValues). Media queries converted to range notation (build → max-width via postcss-media-minmax, D-08). Notation/order cleaned; !important + off-scale values carry scoped per-line disables. */

/**
 * Icon System Styles - Rhuarc's Pet Supplies
 *
 * Styling for SVG icon sprite system.
 * Icons are 24x24 stroke-based by default.
 *
 * CASCADE-LAYER DISPOSITION (D9-06): icons.css declares `array('rhuarcs-style')`
 * as a wp_enqueue dependency, so it loads AFTER style.css. The base `.icon`
 * sizing rule carries load-bearing `width/height !important` that defeats
 * UNLAYERED descendant `.icon` overrides in style.css (`.hero-section .hero-buttons
 * .btn .icon`, `.footer-social-link .icon`, `.footer-tagline .icon`) and within
 * this file. Every `.icon*` rule is coupled to that unlayered `!important` base,
 * so the whole sheet is an ENTANGLED cohort: it is kept UNLAYERED here (moving the
 * base into a layer while the competitors stay unlayered regresses sizing).
 * Reconciles in the atomic Plan 09-09 (style.css co-layer). The icon-sizing
 * `!important` guards are documented survivors (D9-07d).
 *
 * @package RhuarcsPetSupplies
 * @since 2.1.0
 */

/* ==========================================================================
   BASE ICON STYLES
   ========================================================================== */

.icon,
svg.icon {
    display: inline-block;
    /* stylelint-disable declaration-no-important -- load-bearing icon sizing: defeats unlayered descendant .icon overrides in style.css; reconciles in Plan 09-09 */
    width: 24px !important;
    height: 24px !important;
    /* stylelint-enable declaration-no-important */
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

/* Ensure SVG inherits sizing */
.icon svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */

/* stylelint-disable declaration-no-important -- load-bearing icon-size variants: defeat unlayered descendant .icon overrides; reconcile in Plan 09-09 (D9-07d) */
.icon--xs,
svg.icon--xs {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.5;
}

.icon--sm,
svg.icon--sm {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.25;
}

.icon--md,
svg.icon--md {
    width: 24px !important;
    height: 24px !important;
}

.icon--lg,
svg.icon--lg {
    width: 32px !important;
    height: 32px !important;
    stroke-width: 1.75;
}

.icon--xl,
svg.icon--xl {
    width: 48px !important;
    height: 48px !important;
    stroke-width: 1.5;
}

.icon--2xl,
svg.icon--2xl {
    width: 64px !important;
    height: 64px !important;
    stroke-width: 1.25;
}
/* stylelint-enable declaration-no-important */

/* ==========================================================================
   COLOR VARIANTS
   ========================================================================== */

/* Primary purple */
.icon--primary {
    color: var(--purple-700);
}

/* Light version for dark backgrounds */
.icon--light {
    color: var(--text-on-purple);
}

/* Muted version */
.icon--muted {
    color: var(--text-muted);
}

/* Success/In-stock */
.icon--success {
    color: var(--success);
}

/* Warning/Low-stock */
.icon--warning {
    color: var(--warning);
}

/* Error/Out-of-stock */
.icon--error {
    color: var(--error);
}

/* ==========================================================================
   FILLED VARIANTS
   ========================================================================== */

.icon--filled {
    fill: currentColor;
    stroke: currentColor;
}

.icon--filled-primary {
    fill: var(--purple-700);
    stroke: var(--purple-700);
}

.icon--filled-light {
    fill: var(--text-on-purple);
    stroke: var(--text-on-purple);
}

/* Heart filled for favorites */
.icon--heart-filled {
    fill: var(--error);
    stroke: var(--error);
}

/* Star filled for ratings */
.icon--star-filled {
    fill: var(--accent-bird);
    stroke: var(--accent-bird);
}

/* ==========================================================================
   ANIMAL CATEGORY COLORS
   ========================================================================== */

.icon--dog {
    color: var(--accent-dog);
}

.icon--cat {
    color: var(--accent-cat);
}

.icon--bird {
    color: var(--accent-bird);
}

.icon--fish {
    color: var(--accent-fish);
}

.icon--reptile {
    color: var(--accent-reptile);
}

.icon--small-animal,
.icon--hamster {
    color: var(--accent-small-animal);
}

.icon--rabbit {
    color: var(--accent-rabbit);
}

/* ==========================================================================
   CIRCULAR ICON CONTAINERS
   ========================================================================== */

.icon-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--purple-700);
    background: var(--purple-100);
    border-radius: var(--radius-circle);
}

/* stylelint-disable scale-unlimited/declaration-strict-value -- off-scale icon-circle paddings; no byte-exact token, kept literal for zero visual delta (D9-05) */
.icon-circle--sm {
    width: 32px;
    height: 32px;
    padding: 6px;
}

.icon-circle--md {
    width: 48px;
    height: 48px;
    padding: 10px;
}

.icon-circle--lg {
    width: 64px;
    height: 64px;
    padding: 14px;
}

.icon-circle--xl {
    width: 80px;
    height: 80px;
    padding: 18px;
}
/* stylelint-enable scale-unlimited/declaration-strict-value */

/* Circle color variants */
.icon-circle--primary {
    color: var(--text-on-purple);
    background: var(--purple-700);
}

.icon-circle--light {
    color: var(--text-on-purple);
    background: rgb(255 255 255 / 15%);
}

.icon-circle--cream {
    color: var(--purple-700);
    background: var(--cream-200);
}

.icon-circle--gradient {
    color: var(--text-on-purple);
    background: var(--gradient-purple);
}

/* Animal category circles */
.icon-circle--dog {
    color: var(--accent-dog);
    background: rgb(196 133 106 / 15%);
}

.icon-circle--cat {
    color: var(--accent-cat);
    background: rgb(143 174 139 / 15%);
}

.icon-circle--bird {
    color: var(--accent-bird);
    background: rgb(232 177 76 / 15%);
}

.icon-circle--fish {
    color: var(--accent-fish);
    background: rgb(107 163 196 / 15%);
}

.icon-circle--reptile {
    color: var(--accent-reptile);
    background: rgb(139 154 107 / 15%);
}

.icon-circle--small-animal {
    color: var(--accent-small-animal);
    background: rgb(196 154 107 / 15%);
}

/* ==========================================================================
   ICON WITH TEXT PATTERNS
   ========================================================================== */

/* Icon + text inline */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.icon-text--gap-sm {
    gap: var(--space-1);
}

.icon-text--gap-lg {
    gap: var(--space-3);
}

/* Icon on left (default) */
.icon-text .icon {
    order: 0;
}

/* Icon on right */
.icon-text--reverse .icon {
    order: 1;
}

/* ==========================================================================
   ICON BUTTONS
   ========================================================================== */

.icon-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
}

.icon-btn:hover {
    color: var(--purple-700);
    background: var(--cream-200);
}

.icon-btn:focus {
    outline: 2px solid var(--purple-300);
    outline-offset: 2px;
}

.icon-btn--primary {
    color: var(--purple-700);
}

.icon-btn--primary:hover {
    color: var(--purple-800);
    background: var(--purple-100);
}

.icon-btn--ghost {
    color: var(--text-on-purple);
}

.icon-btn--ghost:hover {
    color: var(--text-on-purple);
    background: rgb(255 255 255 / 15%);
}

/* ==========================================================================
   ICON BADGES (icon + number)
   ========================================================================== */

.icon-badge {
    position: relative;
    display: inline-flex;
}

.icon-badge__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale badge padding; no byte-exact token, kept literal for zero visual delta (D9-05) */
    padding: 0 5px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 18px;
    color: var(--text-on-purple);
    background: var(--purple-700);
    border-radius: var(--radius-full);
    text-align: center;
}

.icon-badge__count--warning {
    background: var(--warning);
}

.icon-badge__count--error {
    background: var(--error);
}

/* ==========================================================================
   SPINNER ICON (for loading states)
   ========================================================================== */

.icon--spinner {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   HOVER ANIMATIONS
   ========================================================================== */

/* Subtle scale on hover */
.icon--hover-scale {
    transition: transform var(--transition-fast);
}

.icon--hover-scale:hover {
    transform: scale(1.15);
}

/* Bounce effect */
.icon--hover-bounce {
    transition: transform var(--transition-bounce);
}

.icon--hover-bounce:hover {
    transform: translateY(-3px);
}

/* Rotate effect (good for arrows) */
.icon--hover-rotate {
    transition: transform var(--transition-base);
}

.icon--hover-rotate:hover {
    transform: rotate(90deg);
}

/* Arrow slide right */
.icon--hover-slide-right {
    transition: transform var(--transition-fast);
}

.icon--hover-slide-right:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   CONTACT INFO ICON STYLING
   ========================================================================== */

.contact-icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-primary);
}

.contact-icon__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    color: var(--purple-700);
    background: var(--purple-100);
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.contact-icon__wrapper .icon {
    width: 24px;
    height: 24px;
}

.contact-icon__content {
    display: flex;
    flex-direction: column;
}

.contact-icon__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.contact-icon__value {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.contact-icon__value a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-icon__value a:hover {
    color: var(--purple-700);
}

/* ==========================================================================
   FEATURE/WHY CHOOSE US ICON CARDS
   ========================================================================== */

.feature-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
}

.feature-icon__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    color: var(--text-on-purple);
    background: var(--gradient-purple);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-purple-md);
    transition: var(--transition-bounce);
    margin-bottom: var(--space-4);
}

.feature-icon:hover .feature-icon__wrapper {
    box-shadow: var(--shadow-purple-lg);
    transform: scale(1.1);
}

.feature-icon__wrapper .icon {
    width: 36px;
    height: 36px;
}

.feature-icon__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.feature-icon__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ==========================================================================
   SOCIAL ICONS
   ========================================================================== */

.social-icons {
    display: flex;
    gap: var(--space-3);
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: var(--text-on-purple);
    background: rgb(255 255 255 / 10%);
    border-radius: var(--radius-circle);
    transition: var(--transition-fast);
}

.social-icon:hover {
    background: rgb(255 255 255 / 20%);
    transform: translateY(-2px);
}

.social-icon .icon {
    width: 20px;
    height: 20px;
}

/* Light background variant */
.social-icons--light .social-icon {
    color: var(--purple-700);
    background: var(--purple-100);
}

.social-icons--light .social-icon:hover {
    color: var(--text-on-purple);
    background: var(--purple-700);
}

/* ==========================================================================
   STAR RATINGS
   ========================================================================== */

.star-rating {
    display: inline-flex;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale 2px star gap; no byte-exact token, kept literal for zero visual delta (D9-05) */
    gap: 2px;
}

.star-rating .icon {
    width: 18px;
    height: 18px;
    color: var(--sand-200);
}

.star-rating .icon--filled {
    color: var(--accent-bird);
    fill: var(--accent-bird);
}

.star-rating--lg .icon {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   NAVIGATION ICONS
   ========================================================================== */

.nav-icon {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-medium);
    color: var(--text-on-purple);
}

.nav-icon .icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Screen reader only text for icon-only buttons */
.icon-sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- sr-only -1px clip-margin idiom; no token applies, kept literal for zero visual delta (D9-05) */
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible styling */
.icon:focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--purple-500);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .icon {
        stroke-width: 2.5;
    }

    .icon-circle {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .icon--spinner {
        animation: none;
    }

    .icon--hover-scale:hover,
    .icon--hover-bounce:hover,
    .icon--hover-rotate:hover,
    .icon--hover-slide-right:hover {
        transform: none;
    }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (width <= 768px) {
    /* stylelint-disable scale-unlimited/declaration-strict-value -- off-scale responsive icon-circle paddings; no byte-exact token, kept literal for zero visual delta (D9-05) */
    .icon-circle--lg {
        width: 56px;
        height: 56px;
        padding: 12px;
    }

    .icon-circle--xl {
        width: 64px;
        height: 64px;
        padding: 14px;
    }
    /* stylelint-enable scale-unlimited/declaration-strict-value */

    .feature-icon__wrapper {
        width: 64px;
        height: 64px;
    }

    .feature-icon__wrapper .icon {
        width: 28px;
        height: 28px;
    }

    .contact-icon__wrapper {
        width: 40px;
        height: 40px;
    }

    .contact-icon__wrapper .icon {
        width: 20px;
        height: 20px;
    }
}

@media (width <= 480px) {
    .social-icon {
        width: 36px;
        height: 36px;
    }

    .social-icon .icon {
        width: 18px;
        height: 18px;
    }
}