/**
 * Remix Icons Utilities for TechInformed Theme
 * ============================================
 * 
 * Remix Icons v4.5.0 is loaded via CDN in functions.php
 * This file provides utility classes for easy icon usage throughout the theme.
 * 
 * Usage Examples:
 * - Basic icon: <i class="ri-home-line"></i>
 * - With size: <i class="ri-search-line ri-lg"></i>
 * - With color: <i class="ri-heart-fill ri-text-red"></i>
 * - Interactive: <i class="ri-share-line ri-clickable"></i>
 * 
 * Icon Browser: https://remixicon.com/
 */

/* =================================================================
   REMIX ICONS BASE STYLING
   ================================================================= */

[class^="ri-"], [class*=" ri-"] {
    font-family: 'RemixIcon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    /* Better font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =================================================================
   ICON SIZES
   ================================================================= */

.ri-xs { font-size: 0.75rem; }     /* 12px */
.ri-sm { font-size: 0.875rem; }    /* 14px */
.ri-md { font-size: 1rem; }        /* 16px - default */
.ri-lg { font-size: 1.25rem; }     /* 20px */
.ri-xl { font-size: 1.5rem; }      /* 24px */
.ri-xxl { font-size: 2rem; }       /* 32px */
.ri-xxxl { font-size: 3rem; }      /* 48px */

/* =================================================================
   ICON COLORS (Using theme variables)
   ================================================================= */

.ri-text-primary { color: var(--ti-primary-color, #eb4d36) !important; }
.ri-text-secondary { color: var(--ti-secondary-color, #333333) !important; }
.ri-text-accent { color: var(--ti-accent-color, #007bff) !important; }
.ri-text-heading { color: var(--ti-heading-color, #222222) !important; }
.ri-text-body { color: var(--ti-paragraph-color, #555555) !important; }
.ri-text-link { color: var(--ti-link-color, #eb4d36) !important; }
.ri-text-muted { color: #6c757d !important; }
.ri-text-white { color: #ffffff !important; }
.ri-text-black { color: #000000 !important; }
.ri-text-success { color: #28a745 !important; }
.ri-text-warning { color: #ffc107 !important; }
.ri-text-danger { color: #dc3545 !important; }
.ri-text-info { color: #17a2b8 !important; }

/* Color hover states */
.ri-text-link:hover { color: var(--ti-link-hover-color, #d34430) !important; }
.ri-text-primary:hover { opacity: 0.8; }
.ri-text-secondary:hover { opacity: 0.8; }

/* =================================================================
   ICON INTERACTIONS
   ================================================================= */

.ri-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 4px;
}

.ri-clickable:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

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

@keyframes ri-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ri-pulse {
    animation: ri-pulse 2s infinite;
}

@keyframes ri-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* =================================================================
   ICON SPACING & ALIGNMENT
   ================================================================= */

.ri-mr-1 { margin-right: 0.25rem; }
.ri-mr-2 { margin-right: 0.5rem; }
.ri-mr-3 { margin-right: 0.75rem; }
.ri-ml-1 { margin-left: 0.25rem; }
.ri-ml-2 { margin-left: 0.5rem; }
.ri-ml-3 { margin-left: 0.75rem; }

.ri-align-top { vertical-align: top; }
.ri-align-middle { vertical-align: middle; }
.ri-align-bottom { vertical-align: bottom; }
.ri-align-baseline { vertical-align: baseline; }

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

.ri-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--ti-bg-color, #ffffff);
    border: 1px solid var(--ti-border-color, #dee2e6);
}

.ri-container-square {
    border-radius: 4px;
}

.ri-container-primary {
    background-color: var(--ti-primary-color, #eb4d36);
    color: white;
    border-color: var(--ti-primary-color, #eb4d36);
}

.ri-container-secondary {
    background-color: var(--ti-secondary-color, #333333);
    color: white;
    border-color: var(--ti-secondary-color, #333333);
}

/* =================================================================
   SOCIAL MEDIA ICON COLORS
   ================================================================= */

.ri-facebook-color { color: #1877f2 !important; }
.ri-twitter-color { color: #1da1f2 !important; }
.ri-linkedin-color { color: #0a66c2 !important; }
.ri-instagram-color { color: #e4405f !important; }
.ri-youtube-color { color: #ff0000 !important; }
.ri-github-color { color: #333333 !important; }
.ri-discord-color { color: #7289da !important; }
.ri-reddit-color { color: #ff4500 !important; }

/* =================================================================
   COMMONLY USED ICON COMBINATIONS
   ================================================================= */

/* Search icon with input */
.ri-search-input {
    position: relative;
}

.ri-search-input .ri-search-line {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* Loading states */
.ri-loading .ri-loader-2-line {
    animation: ri-spin 1s linear infinite;
}

/* Navigation arrows */
.ri-nav-arrow {
    transition: transform 0.2s ease;
}

.ri-nav-arrow:hover {
    transform: translateX(4px);
}

.ri-nav-arrow.ri-arrow-left-line:hover {
    transform: translateX(-4px);
}

/* =================================================================
   RESPONSIVE UTILITIES
   ================================================================= */

@media (max-width: 768px) {
    .ri-hide-mobile { display: none !important; }
    .ri-sm-xs { font-size: 0.75rem; }
    .ri-sm-sm { font-size: 0.875rem; }
    .ri-sm-md { font-size: 1rem; }
}

@media (min-width: 769px) {
    .ri-hide-desktop { display: none !important; }
}

/* =================================================================
   THEME-SPECIFIC INTEGRATIONS
   ================================================================= */

/* Header search icon */
.search-icon.ri-search-line {
    font-size: 1.2rem;
    color: var(--ti-text-color, #333);
}

/* Social icons in footer/header */
.social-icons .ri {
    font-size: 1.25rem;
    margin: 0 8px;
    transition: color 0.2s ease;
}

/* Button icons */
.btn .ri {
    margin-right: 0.5rem;
    font-size: 0.9em;
}

.btn .ri:last-child {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Card icons */
.card-header .ri,
.card-title .ri {
    margin-right: 0.5rem;
    color: var(--ti-primary-color, #eb4d36);
}

/* Share icons */
.share-icons .ri {
    font-size: 1.1rem;
    margin-right: 12px;
    transition: all 0.2s ease;
}

.share-icons .ri:hover {
    transform: translateY(-2px);
}

/* Play icons */
.play-icon .ri-play-circle-line,
.play-icon .ri-pause-circle-line {
    font-size: 2rem;
    color: var(--ti-primary-color, #eb4d36);
    transition: all 0.2s ease;
}

.play-icon:hover .ri-play-circle-line,
.play-icon:hover .ri-pause-circle-line {
    transform: scale(1.1);
}

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

/* Screen reader only text for icons */
.ri-sr-only {
    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;
}

/* Focus states for keyboard navigation */
.ri-clickable:focus {
    outline: 2px solid var(--ti-primary-color, #eb4d36);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [class^="ri-"], [class*=" ri-"] {
        font-weight: bold;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ri-spin,
    .ri-pulse,
    .ri-clickable,
    .ri-nav-arrow,
    .share-icons .ri,
    .play-icon .ri-play-circle-line,
    .play-icon .ri-pause-circle-line {
        animation: none !important;
        transition: none !important;
    }
}