/**
 * JobDozo Centralized Responsive Icon System — CSS Tokens & Utilities
 * Primary Icon Color: Facebook Blue (#1877F2)
 */

:root {
  /* Facebook Blue Icon Color Tokens */
  --icon-primary: #1877F2;
  --icon-active: #1877F2;
  --icon-inactive: #1877F2;
  --icon-hover: #0d52c7;
  --icon-pressed: #093f9c;
  --icon-disabled: #93c5fd;
  --icon-success: #16a34a;
  --icon-warning: #d97706;
  --icon-danger: #dc2626;

  --icon-bg-active: rgba(24, 119, 242, 0.14);
  --icon-bg-hover: rgba(24, 119, 242, 0.10);
  --icon-bg-pressed: rgba(24, 119, 242, 0.22);

  /* Responsive Icon Sizing Tokens (Desktop Default) */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
}

@media (max-width: 768px) {
  :root {
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 28px;
  }
}

/* Base Icon Component — Default Facebook Blue (#1877F2) */
.jz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  color: var(--icon-primary, #1877F2);
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
  user-select: none;
}

.jz-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: none;
}

/* Stroke-based SVGs */
.jz-icon.jz-icon-stroke svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Force Facebook Blue on legacy icon tags */
i.fa-solid, i.fa-regular, i.fa-brands, i[class*="fa-"] {
  color: #1877F2;
}

/* Sizing Variants */
.jz-icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.jz-icon--md {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.jz-icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.jz-icon--xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

/* Interactive States & Active Indicators */
.jz-icon-btn,
button .jz-icon,
a .jz-icon,
.m-nav-item .jz-icon,
.nav-links li .jz-icon,
.hdr-btn .jz-icon,
.v2-cat-card .jz-icon,
.jc-action-btn .jz-icon {
  pointer-events: auto;
}

/* Mobile Interactive Target (Minimum 44px x 44px) */
@media (max-width: 768px) {
  .jz-icon-btn,
  .hdr-btn,
  .m-nav-item,
  .jc-action-btn,
  .bkm-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Active & Selection Colors — Facebook Blue */
.active .jz-icon,
.jz-icon.active,
[aria-selected="true"] .jz-icon,
.m-nav-item.active .jz-icon,
.nav-links li.active .jz-icon {
  color: var(--icon-active, #1877F2) !important;
}

/* Mobile Pressed Animation (150-250ms feedback) */
@media (hover: none) and (pointer: coarse) {
  button:active .jz-icon,
  a:active .jz-icon,
  .jz-icon-btn:active .jz-icon,
  .m-nav-item:active .jz-icon,
  .v2-cat-card:active .jz-icon {
    transform: scale(0.88);
    color: var(--icon-pressed, #093f9c);
    transition: transform 120ms ease, color 120ms ease;
  }
}

/* Desktop Hover & Focus Effects */
@media (hover: hover) and (pointer: fine) {
  button:hover .jz-icon,
  a:hover .jz-icon,
  .jz-icon-btn:hover .jz-icon,
  .m-nav-item:hover .jz-icon,
  .v2-cat-card:hover .jz-icon {
    color: var(--icon-hover, #0d52c7);
    transform: scale(1.08);
  }
}

/* Keyboard Focus Ring */
button:focus-visible,
a:focus-visible,
.jz-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--icon-active, #1877F2);
  border-radius: 8px;
}

/* Accessible Tooltips for Desktop */
[data-tooltip] {
  position: relative;
}

@media (hover: hover) {
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #0f172a;
    color: #ffffff;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  [data-tooltip]:hover::before,
  [data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
  }
}