/**
 * Common Styles
 * Shared styles used across the application
 * 
 * ⚠️ TAILWIND CSS PRIORITY:
 * This project prioritizes Tailwind CSS utility classes.
 * Only add custom CSS here for:
 * - Complex animations that can't be achieved with Tailwind
 * - Reusable utility classes (like hover effects) that are used across multiple components
 * - Dynamic values that require CSS variables
 * 
 * For simple styling, always use Tailwind classes in HTML instead of adding CSS here.
 * 
 * HOVER EFFECTS USAGE GUIDE:
 * 
 * Links:
 *   - hover-opacity: Fades on hover
 *   - hover-underline: Animated underline on hover
 *   - hover-color: Changes color on hover
 *   - hover-scale: Scales up on hover
 * 
 * Buttons:
 *   - hover-lift: Lifts up with shadow on hover
 *   - hover-scale: Scales up on hover
 *   - hover-bg: Changes background color on hover
 *   - hover-border: Animated border fill on hover
 * 
 * Images:
 *   - hover-scale: Scales image on hover
 *   - hover-zoom: Zooms image with container
 *   - hover-overlay: Adds dark overlay on hover
 * 
 * Cards:
 *   - hover-card: Lifts card with shadow
 *   - hover-card-scale: Scales card slightly
 *   - hover-card-border: Highlights border on hover
 * 
 * Icons:
 *   - hover-rotate: Rotates icon on hover
 *   - hover-icon-scale: Scales icon on hover
 *   - hover-bounce: Bounces icon on hover
 * 
 * Combined Effects:
 *   - hover-lift-shadow: Combines lift and shadow
 *   - hover-scale-opacity: Combines scale and opacity
 * 
 * Example: <a href="#" class="hover-underline hover-color">Link</a>
 * Example: <button class="hover-lift">Button</button>
 * Example: <div class="hover-card">Card Content</div>
 */

/* Container max-width override */
.container {
  max-width: 1552px;
}

/* Default Paragraph Styles */
p {
  color: var(--subtext, #2C2C2C);
  font-family: var(--font-family-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* Block Head H2 Styles */
.block-head h2 {
  color: var(--text_dark, #17181A);
  line-height: normal;
}

/* Resource Title H3 Styles */
.sub-title {
  color: var(--text_dark, #17181A);
  font-family: Inter, system-ui, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 24px;
}

/* ============================================
   TRANSITION & ANIMATION VARIABLES
   ============================================ */

:root {
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-slower: 400ms ease-in-out;
  --scale-hover: 1.05;
  --scale-active: 0.98;
  --translate-hover: -2px;
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   GLOBAL HOVER EFFECTS
   ============================================ */

/* Base hover transition for interactive elements */
a,
button,
[role="button"],
[tabindex="0"] {
  transition: all var(--transition-base);
}

/* ============================================
   LINK HOVER EFFECTS
   ============================================ */

/* Standard link hover - opacity */
a.hover-opacity:hover {
  opacity: 0.8;
}

a.hover-opacity:focus-visible {
  outline: 2px solid var(--color-brand-teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Link hover - underline animation */
a.hover-underline {
  position: relative;
  text-decoration: none;
}

a.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width var(--transition-base);
}

a.hover-underline:hover::after,
a.hover-underline:focus-visible::after {
  width: 100%;
}

/* Link hover - color transition */
a.hover-color {
  transition: color var(--transition-base);
}

a.hover-color:hover {
  color: var(--color-brand-teal);
}

/* Link hover - scale */
a.hover-scale {
  display: inline-block;
  transition: transform var(--transition-base);
}

a.hover-scale:hover {
  transform: scale(var(--scale-hover));
}

a.hover-scale:active {
  transform: scale(var(--scale-active));
}

/* ============================================
   BUTTON HOVER EFFECTS
   ============================================ */

/* Button hover - lift effect */
button.hover-lift,
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

button.hover-lift:hover,
.hover-lift:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-md);
}

button.hover-lift:active,
.hover-lift:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Button hover - scale effect */
button.hover-scale,
.hover-scale {
  transition: transform var(--transition-base);
}

button.hover-scale:hover,
.hover-scale:hover {
  transform: scale(var(--scale-hover));
}

button.hover-scale:active,
.hover-scale:active {
  transform: scale(var(--scale-active));
}

/* Button hover - background color transition */
button.hover-bg,
.hover-bg {
  transition: background-color var(--transition-base), color var(--transition-base);
}

button.hover-bg:hover,
.hover-bg:hover {
  background-color: var(--color-brand-teal);
  color: var(--color-white);
}

/* Button hover - border animation */
button.hover-border,
.hover-border {
  position: relative;
  overflow: hidden;
  transition: color var(--transition-base);
}

button.hover-border::before,
.hover-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--color-brand-teal);
  transition: left var(--transition-slow);
  z-index: -1;
}

button.hover-border:hover::before,
.hover-border:hover::before {
  left: 0;
}

button.hover-border:hover,
.hover-border:hover {
  color: var(--color-white);
}

/* ============================================
   IMAGE HOVER EFFECTS
   ============================================ */

/* Image hover - scale */
img.hover-scale,
.hover-scale img {
  transition: transform var(--transition-slow);
}

img.hover-scale:hover,
.hover-scale:hover img {
  transform: scale(var(--scale-hover));
}

/* Image hover - zoom with overlay */
.hover-zoom {
  position: relative;
  overflow: hidden;
}

.hover-zoom img {
  transition: transform var(--transition-slow);
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

/* Image hover - fade overlay */
.hover-overlay {
  position: relative;
  overflow: hidden;
}

.hover-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.hover-overlay:hover::after {
  opacity: 1;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */

/* Card hover - lift with shadow */
.hover-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-card:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-lg);
}

/* Card hover - scale */
.hover-card-scale {
  transition: transform var(--transition-base);
}

.hover-card-scale:hover {
  transform: scale(1.02);
}

/* Card hover - border highlight */
.hover-card-border {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  border: 2px solid transparent;
}

.hover-card-border:hover {
  border-color: var(--color-brand-teal);
  box-shadow: var(--shadow-md);
}

/* ============================================
   ICON HOVER EFFECTS
   ============================================ */

/* Icon hover - rotate */
.hover-rotate {
  transition: transform var(--transition-base);
}

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

/* Icon hover - scale */
.hover-icon-scale {
  transition: transform var(--transition-base);
}

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

/* Icon hover - bounce */
.hover-bounce {
  transition: transform var(--transition-base);
}

.hover-bounce:hover {
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* ============================================
   BACKGROUND HOVER EFFECTS
   ============================================ */

/* Background hover - color transition */
.hover-bg-transition {
  transition: background-color var(--transition-base);
}

.hover-bg-transition:hover {
  background-color: var(--color-brand-teal-light);
}

/* Background hover - gradient shift */
.hover-gradient {
  background-size: 200% 200%;
  transition: background-position var(--transition-slow);
}

.hover-gradient:hover {
  background-position: right center;
}

/* ============================================
   TEXT HOVER EFFECTS
   ============================================ */

/* Text hover - color change */
.hover-text-color {
  transition: color var(--transition-base);
}

.hover-text-color:hover {
  color: var(--color-brand-teal);
}

/* Text hover - glow effect */
.hover-text-glow {
  transition: text-shadow var(--transition-base);
}

.hover-text-glow:hover {
  text-shadow: 0 0 10px rgba(15, 118, 110, 0.5);
}

/* ============================================
   COMBINED HOVER EFFECTS
   ============================================ */

/* Combined: scale + shadow */
.hover-lift-shadow {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift-shadow:hover {
  transform: translateY(var(--translate-hover)) scale(var(--scale-hover));
  box-shadow: var(--shadow-lg);
}

/* Combined: scale + opacity */
.hover-scale-opacity {
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.hover-scale-opacity:hover {
  transform: scale(var(--scale-hover));
  opacity: 0.9;
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */

/* Focus visible styles for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-brand-teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   REDUCE MOTION (Accessibility)
   ============================================ */

/* Tab Button Active Line */
.tab-button {
  position: relative;
  border-bottom: none !important;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #006767;
  z-index: 20;
}

/* Tab Panel Transitions */
.tab-panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  pointer-events: none;
}

.tab-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tab-panel.hidden {
  display: none;
}

/* Submenu Panel Transitions */
.submenu-panel {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  pointer-events: none;
}

.submenu-panel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.submenu-panel.hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .tab-panel {
    transition: none !important;
  }
}

/* ============================================
   CAROUSEL DRAG STYLES
   ============================================ */

.data-insights-carousel-container {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.data-insights-carousel-container.dragging {
  cursor: grabbing !important;
}

.data-insights-carousel-container:not(.dragging) {
  cursor: grab;
}