/*
 * MakeMySession — Custom Styles
 * WordPress-ready: Enqueue this via functions.php
 * wp_enqueue_style('makemysession', get_template_directory_uri() . '/css/makemysession-style.css');
 */

/* =============================================
   BASE TYPOGRAPHY
   ============================================= */
.mms-page * {
    font-family: 'Inter', sans-serif;
}
.mms-page h1,
.mms-page h2,
.mms-page h3,
.mms-page .font-heading {
    font-family: 'Poppins', sans-serif;
}

/* =============================================
   CUSTOM SCROLLBAR
   ============================================= */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mms-animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}
.mms-delay-100 { animation-delay: 0.1s; }
.mms-delay-200 { animation-delay: 0.2s; }
.mms-delay-300 { animation-delay: 0.3s; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
.mms-animate-float { animation: float 3s ease-in-out infinite; }

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}
.mms-badge-pulse { animation: badgePulse 2s ease-in-out infinite; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40%  { transform: translateY(-10px); }
    60%  { transform: translateY(-5px); }
}
.mms-scroll-indicator { animation: bounce 2s infinite; }

/* =============================================
   UTILITY — GRADIENT TEXT
   ============================================= */
.mms-gradient-text {
    background: linear-gradient(135deg, #F47B20, #4DC8E9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================
   HERO GRADIENT BACKGROUND
   ============================================= */
.mms-hero-gradient {
    background: linear-gradient(135deg, #0B4091 0%, #082E68 40%, #041838 100%);
}

/* =============================================
   GLASSMORPHISM EFFECT
   ============================================= */
.mms-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* =============================================
   WEBINAR CARD
   ============================================= */
.mms-webinar-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mms-webinar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(11, 64, 145, 0.15);
}

/* =============================================
   INDUSTRY CHIP
   ============================================= */
.mms-industry-chip {
    transition: all 0.2s ease;
}
.mms-industry-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 64, 145, 0.1);
}

/* =============================================
   FAQ ACCORDION
   ============================================= */
.mms-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.mms-faq-answer.open {
    max-height: 500px;
}

/* =============================================
   HORIZONTAL SCROLL SNAP (webinar carousel)
   ============================================= */
.mms-snap-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.mms-snap-scroll > * {
    scroll-snap-align: start;
}

/* =============================================
   MOBILE MENU SLIDE-IN
   ============================================= */
.mms-mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mms-mobile-menu.open {
    transform: translateX(0);
}

/* =============================================
   STAT NUMBER
   ============================================= */
.mms-stat-number {
    display: inline-block;
}

/* =============================================
   WORDPRESS ISOLATION — prevent theme conflicts
   ============================================= */
.mms-page a {
    text-decoration: none;
}
.mms-page img {
    max-width: 100%;
    height: auto;
}
.mms-page *, .mms-page *::before, .mms-page *::after {
    box-sizing: border-box;
}

/* =============================================
   COLOR TOKENS (CSS Custom Properties)
   Use these as fallbacks if Tailwind isn't loaded
   ============================================= */
:root {
    --mms-primary-50:  #EBF0F9;
    --mms-primary-100: #D1DDEF;
    --mms-primary-200: #A3BBE0;
    --mms-primary-300: #7599D0;
    --mms-primary-400: #3D6DB8;
    --mms-primary-500: #0B4091;
    --mms-primary-600: #093574;
    --mms-primary-700: #082E68;
    --mms-primary-800: #062350;
    --mms-primary-900: #041838;

    --mms-secondary-50:  #FFF3E6;
    --mms-secondary-100: #FEE2C0;
    --mms-secondary-200: #FDC58A;
    --mms-secondary-300: #F9A54E;
    --mms-secondary-400: #F68D30;
    --mms-secondary-500: #F47B20;
    --mms-secondary-600: #D9660A;
    --mms-secondary-700: #B85408;
    --mms-secondary-800: #8A3F06;
    --mms-secondary-900: #5C2A04;

    --mms-accent-50:  #E8F7FC;
    --mms-accent-100: #CFEFF9;
    --mms-accent-200: #9FDEF3;
    --mms-accent-300: #6FCEED;
    --mms-accent-400: #4DC8E9;
    --mms-accent-500: #2BB5DB;
    --mms-accent-600: #2196BA;
    --mms-accent-700: #1A7898;
    --mms-accent-800: #135A72;
    --mms-accent-900: #0C3C4C;

    --mms-surface:         #FFFFFF;
    --mms-background:      #F8FAFB;
    --mms-text-primary:    #1A1A2E;
    --mms-text-secondary:  #5A6377;
    --mms-text-muted:      #9CA3AF;
}