/* ============================================================
   Homepage Theme: AURORA  (glassmorphism / animated gradient)
   UX rationale:
   - The hero is the star: a slowly drifting aurora gradient with
     the slide text sitting on a frosted-glass panel. Motion draws
     the eye without stealing it (slow, 18s, respects
     prefers-reduced-motion).
   - Every block reuses the same glass language: translucent white
     cards, soft blur, one continuous tinted canvas — strong visual
     identity with zero layout risk.
   - Scoped to html.hp-theme-aurora; RTL + LTR, mobile-first.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');

html.hp-theme-aurora body,
html.hp-theme-aurora .use-text-paragraph,
html.hp-theme-aurora .use-text-subtitle,
html.hp-theme-aurora .use-text-subtitle2 {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
html.hp-theme-aurora[dir="rtl"] body,
html.hp-theme-aurora[dir="rtl"] .use-text-paragraph,
html.hp-theme-aurora[dir="rtl"] .use-text-subtitle,
html.hp-theme-aurora[dir="rtl"] .use-text-subtitle2 {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}
html.hp-theme-aurora h1, html.hp-theme-aurora h2, html.hp-theme-aurora h3,
html.hp-theme-aurora h4, html.hp-theme-aurora h5, html.hp-theme-aurora h6,
html.hp-theme-aurora .use-text-title {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-weight: 800;
}
html.hp-theme-aurora[dir="rtl"] h1, html.hp-theme-aurora[dir="rtl"] h2,
html.hp-theme-aurora[dir="rtl"] h3, html.hp-theme-aurora[dir="rtl"] h4,
html.hp-theme-aurora[dir="rtl"] h5, html.hp-theme-aurora[dir="rtl"] h6,
html.hp-theme-aurora[dir="rtl"] .use-text-title {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-weight: 700;
}

/* one continuous tinted canvas behind all blocks */
html.hp-theme-aurora main.container-wrap {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--v-primary-base, #83a323) 8%, transparent), transparent 70%),
        radial-gradient(800px 500px at 0% 60%, color-mix(in srgb, var(--v-secondary-base, #ffaa00) 7%, transparent), transparent 70%),
        #f6f8fc;
}
html.hp-theme-aurora main.container-wrap > section { order: 50; }
html.hp-theme-aurora main.container-wrap > #banner            { order: 1; }
html.hp-theme-aurora main.container-wrap > #slide-blocks      { order: 2; }
html.hp-theme-aurora main.container-wrap > #f2f-consultations { order: 3; }
html.hp-theme-aurora main.container-wrap > #explore           { order: 4; }
html.hp-theme-aurora main.container-wrap > #testimonials      { order: 5; }
html.hp-theme-aurora main.container-wrap > #blog-home         { order: 7; }
html.hp-theme-aurora main.container-wrap > #about             { order: 8; }
html.hp-theme-aurora main.container-wrap > #feature           { order: 9; }

/* ============ SLIDER: drifting aurora + frosted glass panel ============ */
html.hp-theme-aurora #banner .bg-deco { opacity: 0; }
html.hp-theme-aurora .banner-slider .slide {
    background:
        radial-gradient(60% 80% at 20% 20%, color-mix(in srgb, var(--v-primary-base, #83a323) 26%, transparent), transparent 60%),
        radial-gradient(50% 70% at 85% 15%, color-mix(in srgb, var(--v-secondary-base, #ffaa00) 24%, transparent), transparent 60%),
        radial-gradient(60% 80% at 70% 90%, color-mix(in srgb, var(--v-primarylight-base, #daddf9) 55%, transparent), transparent 65%),
        linear-gradient(180deg, #eef2fb 0%, #f6f8fc 100%);
    background-size: 200% 200%, 220% 220%, 200% 200%, 100% 100%;
    animation: aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    100% { background-position: 60% 40%, 40% 60%, 20% 40%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    html.hp-theme-aurora .banner-slider .slide { animation: none; }
}
html.hp-theme-aurora .banner-slider .text {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 16px 44px rgba(30, 41, 82, .10);
}
html.hp-theme-aurora .banner-slider .btn-area .btn {
    border-radius: 14px;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--v-primary-base, #83a323) 35%, transparent);
}
html.hp-theme-aurora .banner-arrow {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
}
/* dots become progress bars */
html.hp-theme-aurora #banner_nav a {
    font-size: 0;
    width: 26px;
    height: 5px;
    border-radius: 999px;
    background: rgba(30, 41, 82, .18);
    display: inline-block;
    margin: 0 3px;
    transition: background .25s ease, width .25s ease;
}
html.hp-theme-aurora #banner_nav a.active {
    background: var(--v-primary-base, #83a323);
    width: 40px;
}

/* ============ BROCHURES: glass tiles ============ */
html.hp-theme-aurora #slide-blocks { padding: 26px 0 8px; }
html.hp-theme-aurora .slide-block-card {
    border-radius: 18px;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 10px 30px rgba(30, 41, 82, .08);
    padding: 6px;
}
html.hp-theme-aurora .slide-block-img-wrap { height: 165px; border-radius: 13px; }

/* ============ COURSES: frosted glass grid ============ */
html.hp-theme-aurora #explore .rack { margin-top: 44px; margin-bottom: 48px; }
html.hp-theme-aurora #explore .rack:before { display: none; }
html.hp-theme-aurora #explore .content {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}
@media (min-width: 600px)  { html.hp-theme-aurora #explore .content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { html.hp-theme-aurora #explore .content { grid-template-columns: repeat(3, 1fr); } }

html.hp-theme-aurora #explore .book,
html.hp-theme-aurora #explore .book.collapsed,
html.hp-theme-aurora #explore .book.expanded {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    position: relative !important;
    left: 0 !important;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, .6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .85) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(30, 41, 82, .08) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
html.hp-theme-aurora #explore .book:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 46px rgba(30, 41, 82, .14) !important;
}
html.hp-theme-aurora #explore .book figcaption { display: none !important; }
html.hp-theme-aurora #explore .book figure {
    width: 100% !important;
    height: 160px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    overflow: hidden;
}
html.hp-theme-aurora #explore .book figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
html.hp-theme-aurora #explore .book .desc {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 12px 12px 14px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
}
html.hp-theme-aurora #explore .book .desc h6 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    color: #1e2952 !important;
}
html.hp-theme-aurora #explore .book .desc p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0;
    color: #4a5578 !important;
}
html.hp-theme-aurora #explore .book .desc-more {
    display: inline-block !important;
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
}
html.hp-theme-aurora #explore .book .book-link-overlay {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ============ F2F: glass cards on the shared canvas ============ */
html.hp-theme-aurora .f2f-section-bg { background: transparent; }
html.hp-theme-aurora .f2f-card {
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
}
html.hp-theme-aurora .f2f-card-btn { border-radius: 14px; }

/* ============ TESTIMONIALS / ACTIVITY ANSWERS ============ */
html.hp-theme-aurora .testimonial-card {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(30, 41, 82, .07);
}

/* ============ NEWS: glass feature + tiles ============ */
html.hp-theme-aurora .announcement-feature-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--v-primary-base, #83a323) 82%, #1e2952 18%) 0%,
        color-mix(in srgb, var(--v-primary-base, #83a323) 60%, var(--v-secondary-base, #ffaa00) 40%) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--v-primary-base, #83a323) 25%, transparent);
}
html.hp-theme-aurora .announcement-home-card {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(30, 41, 82, .06);
}

/* ============ STATS: glass strip ============ */
html.hp-theme-aurora #feature .counter-item {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 18px;
    padding: 14px;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    html.hp-theme-aurora .banner-slider .text { padding: 20px 16px; }
    html.hp-theme-aurora .slide-block-img-wrap { height: 145px; }
    html.hp-theme-aurora #explore .book figure { height: 145px !important; }
}

/* ============================================================
   SITE-WIDE: course cards (category/tutor/related) + course landing.
   ============================================================ */
html.hp-theme-aurora body {
    background:
        radial-gradient(900px 500px at 100% 10%, color-mix(in srgb, var(--v-primary-base, #83a323) 8%, transparent), transparent 70%),
        radial-gradient(800px 500px at 0% 60%, color-mix(in srgb, var(--v-secondary-base, #ffaa00) 7%, transparent), transparent 70%),
        #f6f8fc;
}
html.hp-theme-aurora .card.product-card {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(30, 41, 82, .08);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
html.hp-theme-aurora .card.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(30, 41, 82, .14);
}
html.hp-theme-aurora .product-card .desc .title { color: #1e2952; font-weight: 800; }
html.hp-theme-aurora .product-card .desc .button { border-radius: 14px; text-transform: none; }
/* course landing page */
html.hp-theme-aurora .image-detail,
html.hp-theme-aurora .detail-carousel .figure .img {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 16px 44px rgba(30, 41, 82, .12);
}
html.hp-theme-aurora .btn-area.main .btn {
    border-radius: 14px;
    text-transform: none;
    font-weight: 700;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--v-primary-base, #83a323) 35%, transparent);
}