/**
 * Floating Icons Base Classes - Phase 2 Icon Standardization
 * Created: 2026-02-01
 * Purpose: Eliminate 90% code duplication across 7 icon CSS files
 *
 * APPROACH: CSS-only refactoring using comma-separated selectors.
 * All existing HTML class names are preserved - ZERO HTML/JS changes required.
 *
 * STRUCTURE:
 * 1. Base Container Properties (shared by all icon containers)
 * 2. Base Circle Icon Properties (shared by all circular icons)
 * 3. Base Font Awesome Properties (shared by all FA icons inside circles)
 * 4. Base Mobile Container Properties (768px breakpoint)
 * 5. Base Mobile Circle Properties (45px mobile standard)
 * 6. Base Mobile FA Properties (20px mobile standard)
 *
 * TIER SYSTEM:
 * - Tier 1 Desktop: 50px container, 24px Font Awesome
 * - Tier 1 Mobile:  45px container, 20px Font Awesome
 *
 * @author Yuuji Itadori (Implementation Specialist)
 * @version 2.0.0
 */

/* ============================================
   1. BASE CONTAINER PROPERTIES
   Shared by: profile-hub, support, back-to-top,
   help-button, support-us, jamwebstudio,
   review-season, view-reports
   ============================================ */
.profile-hub-container,
.support-container,
.back-to-top-container,
.help-button-container,
.support-us-container,
.jamwebstudio-container,
.review-season-container,
.view-reports-container {
  position: fixed;
  right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: visible;
}

/* ============================================
   2. BASE CIRCLE ICON PROPERTIES
   Shared by: profile-icon, floating-gear-icon,
   back-to-top-icon, help-button-icon,
   support-us-icon, jamwebstudio-icon,
   view-reports-icon, review-season-icon
   ============================================ */
.profile-icon,
.floating-gear-icon,
.help-button-icon,
.support-us-icon,
.jamwebstudio-icon,
.view-reports-icon,
.review-season-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  box-sizing: border-box;
  border: 2px solid #28a745;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  /* ALIGNMENT FIX: btn-standard class injects margin: 12.288px 3.072px on
     <button> elements. The margin-right shifts the circle away from the
     container's right wall, breaking the vertical icon column. Reset to 0
     to ensure all circles align flush-right regardless of element type. */
  margin: 0 !important;
  padding: 0 !important;
}

/* HIGH-SPECIFICITY OVERRIDE: agencies-inline.css has a button[type="button"] rule
   with margin: 0.8em 0.2em !important that beats the single-class selector above.
   Two !important rules are resolved by specificity, then source order.
   agencies-inline.css loads AFTER this file, so we need specificity > 0,1,1
   (attribute selector + element). Container + icon = 0,2,0 wins. */
.help-button-container .help-button-icon,
.review-season-container .review-season-icon {
  margin: 0 !important;
  padding: 0 !important;
}

/* back-to-top-icon needs its own base due to !important overrides from btn-standard */
.back-to-top-icon,
.back-to-top-icon.btn-standard,
button.back-to-top-icon,
button.back-to-top-icon.btn-standard,
.back-to-top-container .back-to-top-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border: 2px solid #28a745;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   3. BASE FONT AWESOME ICON PROPERTIES
   Shared by all FA icons inside floating circles
   ============================================ */
.profile-icon i.fa-user,
.floating-gear-icon i,
.help-button-icon i,
.support-us-icon i,
.jamwebstudio-icon i,
.view-reports-icon i,
.review-season-icon i,
.back-to-top-icon i {
  font-size: 24px;
  line-height: 1;
  transition: all 0.3s ease;

  /* DEFENSIVE RESET: Prevent page-level .fa rules (faq-page.css, guide-page.css)
     from adding padding/margin/width to floating icons. TS-20260202_173850 */
  padding: 0 !important;
  margin: 0 !important;

  /* OPTICAL CENTERING: Constrain <i> to 24x24px box matching font-size,
     then center the ::before pseudo-element within it. Parent circle's
     display:flex centers this 24x24 box within the 50x50 circle.
     Uses explicit px (not %) to avoid FA pseudo-element distortion.
     TS-20260202_173850 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px;
  text-align: center;
}

/* ============================================
   4. BASE HOVER SCALE EFFECT
   Shared hover transform pattern
   ============================================ */
.help-button-icon--purple:hover,
.help-button-icon--orange:hover,
.review-season-icon:hover {
  transform: scale(1.1);
}

/* ============================================
   5. BASE FOCUS INDICATOR
   WCAG 2.2 keyboard focus for all circle icons
   ============================================ */
.profile-icon:focus,
.back-to-top-icon:focus,
.help-button-icon--purple:focus,
.help-button-icon--orange:focus,
.review-season-icon:focus {
  outline: 3px solid #ffee00;
  outline-offset: 3px;
}

/* ============================================
   6. BASE MOBILE CONTAINER (768px)
   Shared mobile adjustments for all containers
   ============================================ */
@media (max-width: 768px) {
  .profile-hub-container,
  .support-container,
  .help-button-container,
  .support-us-container,
  .jamwebstudio-container,
  .review-season-container,
  .view-reports-container {
    gap: 0;
  }

  .back-to-top-container {
    gap: 12px;
  }
}

/* ============================================
   7. BASE MOBILE CIRCLE ICON (45px standard)
   Shared by all circular icons at 768px
   ============================================ */
@media (max-width: 768px) {
  .profile-icon,
  .floating-gear-icon,
  .help-button-icon,
  .support-us-icon,
  .jamwebstudio-icon,
  .view-reports-icon,
  .review-season-icon {
    width: 45px;
    height: 45px;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(255, 238, 0, 0.3);
    touch-action: manipulation;
  }

  /* back-to-top needs higher specificity to override btn-standard */
  .back-to-top-icon,
  button.back-to-top-icon,
  .back-to-top-container .back-to-top-icon,
  .back-to-top-container button.back-to-top-icon {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(155, 89, 182, 0.3);
    touch-action: manipulation;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    display: flex !important;
    margin: 0 !important;
  }
}

/* ============================================
   8. BASE MOBILE FONT AWESOME (20px standard)
   Shared by all FA icons at 768px
   ============================================ */
@media (max-width: 768px) {
  .profile-icon i.fa-user,
  .profile-icon i,
  .floating-gear-icon i,
  .help-button-icon i,
  .back-to-top-icon i,
  .support-us-icon i,
  .jamwebstudio-icon i,
  .view-reports-icon i,
  .review-season-icon i {
    font-size: 20px;
    /* Scale optical centering box to match mobile font-size. TS-20260202_173850 */
    width: 20px !important;
    height: 20px;
  }

  /* Ensure clicks pass through to parent anchor on mobile */
  .floating-gear-icon i,
  .support-us-icon i,
  .jamwebstudio-icon i,
  .view-reports-icon i {
    pointer-events: none;
  }
}

/* ============================================
   9. BASE REDUCED MOTION SUPPORT
   Accessibility: Respect prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .profile-icon,
  .floating-gear-icon,
  .back-to-top-icon,
  .help-button-icon,
  .support-us-icon,
  .jamwebstudio-icon,
  .view-reports-icon,
  .review-season-icon {
    animation: none !important;
    transition: none !important;
  }

  .back-to-top-icon:hover,
  .back-to-top-icon:hover i {
    transform: none;
  }
}

/* ============================================
   10. BASE PRINT STYLES
   Hide all floating icons in print
   ============================================ */
@media print {
  .profile-hub-container,
  .support-container,
  .back-to-top-container,
  .help-button-container,
  .support-us-container,
  .jamwebstudio-container,
  .review-season-container,
  .view-reports-container {
    display: none !important;
  }
}

/* ============================================
   11. BASE FOCUS-VISIBLE (Keyboard Navigation)
   WCAG 2.2 compliant keyboard focus indicators
   ============================================ */
.profile-icon:focus-visible,
.floating-gear-icon:focus-visible,
.back-to-top-icon:focus-visible,
.help-button-icon:focus-visible,
.support-us-icon:focus-visible,
.jamwebstudio-icon:focus-visible,
.view-reports-icon:focus-visible,
.review-season-icon:focus-visible {
  outline: 3px solid #ffee00;
  outline-offset: 3px;
}