/* ============================================================
   STUDY CIRCLE THEME - CUSTOM CSS
   Version: 1.0.0
   Author: One Right Solution
   ============================================================ */

/* === BRAND COLORS (CSS Variables) === */
:root {
    --brand-blue: #1e3a8a;
    --brand-light: #3b82f6;
    --brand-red: #be123c;
    --brand-gold: #d97706;
    --brand-cream: #fcfcfc;
    --bg-base: #f8fafc;
}

/* === BODY BASE === */
body {
    background-color: #f8fafc;
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Force reveal elements visible inside Elementor editor/preview */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

/* ============================================================
   FLOATING ANIMATION
   ============================================================ */
.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ============================================================
   HERO BACKGROUND
   ============================================================ */
.hero-bg {
    background-image: linear-gradient(
        rgba(30, 58, 138, 0.85),
        rgba(30, 58, 138, 0.95)
    ), url('https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=2073&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ============================================================
   PAGE HEADER BACKGROUND
   ============================================================ */
.page-header-bg {
    background-image: linear-gradient(
        rgba(30, 58, 138, 0.9),
        rgba(30, 58, 138, 0.95)
    ), url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ============================================================
   NAVBAR SCROLL EFFECT
   ============================================================ */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   MANUAL HIDDEN (Client-toggled sections)
   ============================================================ */
.manual-hidden {
    display: none !important;
}

/* ============================================================
   TEAM CARD HOVER EFFECTS
   ============================================================ */
.team-card:hover .team-image {
    transform: scale(1.05);
}

/* ============================================================
   COURSE CARD HOVER EFFECTS
   ============================================================ */
.course-card:hover .course-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ============================================================
   HEADER STYLES
   ============================================================ */
#sc-topbar {
    background-color: #1e3a8a;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

#sc-navbar {
    background-color: #fff;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f1f5f9;
}

.sc-logo {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
    display: block;
}

@media (min-width: 640px) {
    .sc-logo {
        height: 4rem;
    }
}

.sc-nav-link {
    position: relative;
    font-weight: 500;
    color: #4b5563;
    transition: color 0.2s ease;
}

.sc-nav-link:hover {
    color: #1e3a8a;
}

.sc-nav-link .underline-bar {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e3a8a;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.sc-nav-link:hover .underline-bar {
    transform: scaleX(1);
}

.sc-nav-link.active {
    color: #1e3a8a;
    font-weight: 600;
}

.sc-nav-link.active .underline-bar {
    background-color: #be123c;
    transform: scaleX(1);
}

.sc-enroll-btn {
    background-color: #be123c;
    color: #fff !important;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.sc-enroll-btn:hover {
    background-color: #9f1239;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Mobile Menu */
#sc-mobile-menu {
    display: none;
    background-color: #fff;
    border-top: 1px solid #f1f5f9;
    position: absolute;
    width: 100%;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    z-index: 998;
}

#sc-mobile-menu.open {
    display: block;
}

.sc-mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    text-align: center;
    color: #4b5563;
    font-weight: 500;
    transition: background-color 0.2s ease;
    border-radius: 0.375rem;
}

.sc-mobile-link:hover {
    background-color: #f9fafb;
}

.sc-mobile-link.active {
    color: #1e3a8a;
    font-weight: 600;
    background-color: #f9fafb;
}

/* ============================================================
   FOOTER STYLES
   ============================================================ */
#sc-footer {
    background-color: #111827;
    color: #d1d5db;
    border-top: 4px solid #be123c;
}

.sc-footer-link {
    color: #d1d5db;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sc-footer-link:hover {
    color: #d97706;
}

.sc-social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    transition: all 0.2s ease;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.font-serif {
    font-family: 'Merriweather', Georgia, serif;
}

.text-brand-blue  { color: #1e3a8a; }
.text-brand-red   { color: #be123c; }
.text-brand-gold  { color: #d97706; }
.text-brand-light { color: #3b82f6; }
.bg-brand-blue    { background-color: #1e3a8a; }
.bg-brand-red     { background-color: #be123c; }
.bg-brand-gold    { background-color: #d97706; }

/* ============================================================
   ELEMENTOR WIDGET GENERAL OVERRIDES
   ============================================================ */
.elementor-widget-sc_hero_section,
.elementor-widget-sc_features_strip,
.elementor-widget-sc_course_cards,
.elementor-widget-sc_cta_banner,
.elementor-widget-sc_contact_info_map,
.elementor-widget-sc_page_header,
.elementor-widget-sc_our_story,
.elementor-widget-sc_mission_vision,
.elementor-widget-sc_core_values,
.elementor-widget-sc_course_detail_row,
.elementor-widget-sc_free_demo_banner,
.elementor-widget-sc_program_cards,
.elementor-widget-sc_methodology_section,
.elementor-widget-sc_cta_demo_form,
.elementor-widget-sc_director_section,
.elementor-widget-sc_faculty_grid,
.elementor-widget-sc_why_teachers,
.elementor-widget-sc_contact_form_section,
.elementor-widget-sc_breadcrumb,
.elementor-widget-sc_demo_booking_form,
.elementor-widget-sc_demo_how_it_works,
.elementor-widget-sc_demo_available_programs,
.elementor-widget-sc_legal_content,
.elementor-widget-sc_course_overview,
.elementor-widget-sc_civil_services_programs,
.elementor-widget-sc_defense_programs,
.elementor-widget-sc_course_civil_services,
.elementor-widget-sc_course_defense,
.elementor-widget-sc_course_school_academics,
.elementor-widget-sc_course_skill_pd,
.elementor-widget-sc_courses_cta {
    line-height: inherit;
}

/* Remove Elementor default widget bottom-margin and section padding
   for all Study Buddy custom widgets so spacing is purely from
   the widgets' own Tailwind classes. */
[class*="elementor-widget-sc_"] {
    margin-bottom: 0 !important;
}
.elementor-element > .elementor-widget-wrap > [class*="elementor-widget-sc_"]:last-child {
    margin-bottom: 0 !important;
}

/* Zero out Elementor container/section default padding when it
   only holds Study Buddy widgets — widgets handle their own spacing. */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section > .elementor-container {
    padding-top: 0;
    padding-bottom: 0;
}
/* Elementor Flexbox containers (newer versions) */
.e-con:has(> [class*="elementor-widget-sc_"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
}
/* Elementor column gaps — remove for SC widgets */
.elementor-widget-wrap > [class*="elementor-widget-sc_"] + [class*="elementor-widget-sc_"] {
    margin-top: 0 !important;
}

/* Tighten section padding on mobile for all SC widget sections */
@media (max-width: 767px) {
    [class*="elementor-widget-sc_"] .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    [class*="elementor-widget-sc_"] .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    [class*="elementor-widget-sc_"] .py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ============================================================
   FORM STYLES
   ============================================================ */
.sc-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background-color: #fff;
}

.sc-form-input:focus {
    border-color: #1e3a8a;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
}

.sc-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.max-w-7xl { max-width: 80rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }

.overflow-x-hidden { overflow-x: hidden; }
.antialiased       { -webkit-font-smoothing: antialiased; }

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 768px) {
    .hero-bg,
    .page-header-bg {
        background-attachment: scroll;
    }

    #sc-topbar {
        display: none;
    }
}