/* ========================================
   TIA EDU - Shared CSS Components
   Reusable styles for the entire site
   ======================================== */

/* ========================================
   PREVENT HORIZONTAL OVERFLOW
   ======================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    position: relative;
}

/* ========================================
   BRAND COLORS & CUSTOM PROPERTIES
   ======================================== */
:root {
    --tia-primary: #144980;
    --tia-secondary: #4b1480;
    --tia-accent: #f39633;
    --tia-primary-light: #1e5a9e;
    --tia-secondary-light: #5c1a9e;
    --tia-accent-light: #f5a847;
    --tia-gray-50: #f9fafb;
    --tia-gray-100: #f3f4f6;
    --tia-gray-200: #e5e7eb;
    --tia-gray-300: #d1d5db;
    --tia-gray-400: #9ca3af;
    --tia-gray-500: #6b7280;
    --tia-gray-600: #4b5563;
    --tia-gray-700: #374151;
    --tia-gray-800: #1f2937;
    --tia-gray-900: #111827;
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.text-gradient-primary {
    background: linear-gradient(135deg, var(--tia-primary) 0%, var(--tia-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--tia-accent) 0%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   BUTTON COMPONENTS
   ======================================== */
.btn-primary {
    @apply bg-gradient-to-r from-[#144980] to-[#4b1480] hover:from-[#4b1480] hover:to-[#f39633] text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#144980] focus:ring-offset-2;
}

.btn-secondary {
    @apply bg-gradient-to-r from-[#f39633] to-[#ff6b35] hover:from-[#ff6b35] hover:to-[#f39633] text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#f39633] focus:ring-offset-2;
}

.btn-outline {
    @apply border-2 border-[#144980] text-[#144980] hover:bg-[#144980] hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-[#144980] focus:ring-offset-2;
}

.btn-ghost {
    @apply text-[#144980] hover:bg-[#144980] hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-[#144980] focus:ring-offset-2;
}

/* ========================================
   CARD COMPONENTS
   ======================================== */
.card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden border border-gray-100;
}

.card-header {
    @apply bg-gradient-to-r from-[#144980] to-[#4b1480] text-white py-4 px-6;
}

.card-body {
    @apply p-6;
}

.card-hover {
    @apply hover:shadow-xl transition-all duration-300 hover:scale-105;
}

/* ========================================
   HERO SECTION COMPONENTS
   ======================================== */
.hero-gradient {
    background: linear-gradient(135deg, var(--tia-primary) 0%, var(--tia-secondary) 50%, var(--tia-accent) 100%);
}

.hero-benefits {
    @apply grid grid-cols-1 md:grid-cols-3 gap-4 mb-8;
}

.hero-benefits > div {
    @apply flex items-center justify-center text-white;
}

.hero-cta {
    @apply flex flex-col md:flex-row gap-4 justify-center;
}

/* ========================================
   SECTION DIVIDERS
   ======================================== */
.section-divider {
    @apply my-12 flex items-center justify-center;
}

.section-divider::before {
    content: '';
    @apply flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent;
}

.section-divider::after {
    content: '';
    @apply flex-1 h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent;
}

.divider-icon {
    @apply mx-4 w-8 h-8 bg-gradient-to-r from-[#144980] to-[#4b1480] rounded-full flex items-center justify-center;
}

/* ========================================
   FEATURE GRID COMPONENTS
   ======================================== */
.feature-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.feature-card {
    @apply bg-white border border-gray-200 rounded-xl p-6 hover:shadow-lg transition-all duration-300 hover:scale-105 group text-center;
}

.feature-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300;
}

.feature-icon-primary {
    @apply bg-[#144980];
}

.feature-icon-secondary {
    @apply bg-green-500;
}

.feature-icon-accent {
    @apply bg-teal-500;
}

.feature-icon-orange {
    @apply bg-[#f39633];
}

/* ========================================
   TAB COMPONENTS
   ======================================== */
.tab-navigation {
    @apply border-b border-gray-200;
}

.tab-nav {
    @apply flex space-x-8 px-6;
}

.tab-button {
    @apply py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors duration-200;
}

.tab-button.active {
    @apply border-[#144980] text-[#144980];
}

.tab-content {
    @apply p-6;
}

.tab-pane {
    @apply hidden;
}

.tab-pane.active {
    @apply block;
}

/* ========================================
   ACCORDION COMPONENTS
   ======================================== */
.accordion-item {
    @apply border border-gray-200 rounded-lg overflow-hidden;
}

.accordion-header {
    @apply w-full px-6 py-4 text-left bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#144980] focus:ring-inset transition-colors duration-200 flex items-center justify-between;
}

.accordion-content {
    @apply hidden;
}

.accordion-content.active {
    @apply block;
}

.accordion-icon {
    @apply transform transition-transform duration-200;
}

.accordion-icon.rotated {
    @apply rotate-180;
}

/* ========================================
   BREADCRUMB COMPONENTS
   ======================================== */
.breadcrumb {
    @apply bg-gray-50 py-4 px-6;
}

.breadcrumb-nav {
    @apply flex items-center space-x-2 text-sm;
}

.breadcrumb-item {
    @apply text-gray-500 hover:text-[#144980] transition-colors duration-200;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

.breadcrumb-current {
    @apply text-[#144980] font-semibold;
}

/* ========================================
   PRICING COMPONENTS
   ======================================== */
.pricing-card {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 p-8 hover:shadow-xl transition-all duration-300 hover:scale-105;
}

.pricing-header {
    @apply text-center mb-6;
}

.pricing-price {
    @apply text-4xl font-bold text-[#144980] mb-2;
}

.pricing-period {
    @apply text-gray-500 text-sm;
}

.pricing-features {
    @apply space-y-3 mb-8;
}

.pricing-feature {
    @apply flex items-center text-gray-700;
}

.pricing-feature i {
    @apply text-green-500 mr-3 text-sm;
}

/* ========================================
   UPCOMING DATES COMPONENTS
   ======================================== */
.timezone-selector {
    @apply mb-8;
}

.timezone-buttons {
    @apply grid grid-cols-1 sm:grid-cols-3 gap-4;
}

.timezone-btn {
    @apply bg-gray-100 hover:bg-gradient-to-r hover:from-[#144980] hover:to-[#4b1480] hover:text-white text-gray-700 px-6 py-4 rounded-xl text-sm font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg flex items-center justify-center space-x-2;
}

.timezone-btn.active {
    @apply bg-gradient-to-r from-[#144980] to-[#4b1480] text-white;
}

.dates-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4;
}

.date-card {
    @apply bg-white border border-gray-200 rounded-xl p-4 hover:shadow-lg transition-all duration-300 hover:scale-105;
}

.date-header {
    @apply flex items-center justify-between mb-3;
}

.date-title {
    @apply text-lg font-semibold text-gray-900;
}

.date-badge {
    @apply bg-[#144980] text-white text-xs px-2 py-1 rounded-full;
}

.date-details {
    @apply space-y-2;
}

.date-detail {
    @apply flex items-center text-sm text-gray-600;
}

.date-detail i {
    @apply text-[#144980] mr-2 w-4;
}

/* ========================================
   ELSIGHT WIDGET STYLING
   ======================================== */
.elfsight-widget {
    @apply border-radius-lg overflow-hidden;
}

.elfsight-widget * {
    @apply font-inter;
}

.elfsight-reviews {
    @apply bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-200 rounded-xl p-4;
}

.elfsight-team {
    @apply bg-gradient-to-br from-purple-50 to-orange-50 border border-gray-200 rounded-xl p-4;
}

.elfsight-google {
    @apply bg-gradient-to-br from-green-50 to-emerald-50 border border-gray-200 rounded-xl p-4;
}

/* ========================================
   UPCOMING DATES GRID
   ======================================== */
#upcoming_dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
    #upcoming_dates {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1280px) {
    #upcoming_dates {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 640px) {
    .hero-cta {
        @apply flex-col;
    }
    
    .feature-grid {
        @apply grid-cols-1;
    }
    
    .timezone-buttons {
        @apply grid-cols-1;
    }
    
    .dates-grid {
        @apply grid-cols-1;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .feature-grid {
        @apply grid-cols-2;
    }
    
    .dates-grid {
        @apply grid-cols-2;
    }
}

@media (min-width: 1025px) {
    .feature-grid {
        @apply grid-cols-3;
    }
    
    .dates-grid {
        @apply grid-cols-3;
    }
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
    animation: slideUp 0.5s ease-out;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-[#144980] focus:ring-offset-2;
}

/* ========================================
   NAVIGATION ENHANCEMENTS FOR LARGE SCREENS
   ======================================== */
@media (min-width: 1280px) {
    /* Enhanced navigation for XL screens and above */
    .nav-main-item {
        @apply text-lg xl:text-xl;
    }
    
    .nav-dropdown {
        @apply text-base xl:text-lg;
    }
    
    .nav-dropdown-title {
        @apply text-lg xl:text-xl font-bold;
    }
    
    /* Better spacing for ultra-wide screens */
    .nav-container {
        @apply space-x-8 xl:space-x-12;
    }
}

@media (min-width: 1536px) {
    /* Enhanced navigation for 2XL screens and above */
    .nav-main-item {
        @apply text-xl 2xl:text-2xl;
    }
    
    .nav-dropdown {
        @apply text-lg 2xl:text-xl;
    }
    
    .nav-dropdown-title {
        @apply text-xl 2xl:text-2xl font-bold;
    }
    
    /* Even more spacing for ultra-wide screens */
    .nav-container {
        @apply space-x-12 2xl:space-x-16;
    }
}

@media (min-width: 1920px) {
    /* Ultra-wide screen optimizations */
    .nav-dropdown-ultra-wide {
        max-width: 90vw;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .nav-dropdown-ultra-wide .grid {
        @apply gap-24;
    }
    
    .nav-dropdown-ultra-wide h3 {
        @apply text-2xl;
    }
    
    .nav-dropdown-ultra-wide a {
        @apply text-xl leading-loose;
    }
}

/* ========================================
   PROVIDESUPPORT CHAT WIDGET POSITIONING
   ======================================== */
/* Position chat widget to the left of back-to-top button */
/* Note: Positioning is handled by JavaScript in shared.js for better compatibility */
/* These are fallback styles in case JS doesn't load */
iframe[src*="providesupport.com"],
div[id*="providesupport"] {
    max-width: 100vw !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .no-print {
        display: none !important;
    }
    
    .card {
        @apply shadow-none border border-gray-300;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-ghost {
        @apply bg-gray-100 text-gray-900 border border-gray-300;
    }
}