/* ============================================================
   Homepage Theme: ANDALUS  (Eastern / Islamic art inspired)
   UX rationale:
   - Draws on Islamic geometric art and Andalusi architecture:
     ivory parchment canvas, emerald & gold, a subtle 8-point-star
     lattice on the hero, and imagery framed in horseshoe arches.
   - Reem Kufi (a modern Kufic that covers Arabic AND Latin) for
     headings; Cairo for body text; Amiri (classical Naskh serif)
     for the featured news headline.
   - Suits Quranic/Islamic-studies academies and Arabic-language
     institutes; both RTL and LTR fully supported, mobile-first.
   - Scoped to html.hp-theme-andalus.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;600;700&family=Cairo:wght@300;400;600;700&family=Amiri:wght@400;700&display=swap');

html.hp-theme-andalus {
    --and-ivory: #faf6ec;
    --and-sand: #f3ecdb;
    --and-emerald: #116a52;
    --and-emerald-deep: #0c4a3a;
    --and-gold: #b98a2f;
    --and-gold-soft: #d9b566;
    --and-ink: #26332e;
    --and-muted: #5f6d66;
    --and-line: #e4d9bf;
    /* subtle 8-point star lattice tile */
    --and-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23b98a2f' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Cpath d='M36 15l6 15 15 6-15 6-6 15-6-15-15-6 15-6z'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
html.hp-theme-andalus body { background: var(--and-ivory); }
html.hp-theme-andalus body,
html.hp-theme-andalus .use-text-paragraph,
html.hp-theme-andalus .use-text-subtitle,
html.hp-theme-andalus .use-text-subtitle2 {
    font-family: 'Cairo', system-ui, sans-serif !important;
    color: var(--and-ink);
}
html.hp-theme-andalus h1, html.hp-theme-andalus h2, html.hp-theme-andalus h3,
html.hp-theme-andalus h4, html.hp-theme-andalus h5, html.hp-theme-andalus h6,
html.hp-theme-andalus .use-text-title {
    font-family: 'Reem Kufi', 'Cairo', sans-serif;
    font-weight: 600;
}

/* ---- Block order ---- */
html.hp-theme-andalus main.container-wrap {
    display: flex;
    flex-direction: column;
    background: var(--and-ivory);
}
html.hp-theme-andalus main.container-wrap > section { order: 50; }
html.hp-theme-andalus main.container-wrap > #banner            { order: 1; }
html.hp-theme-andalus main.container-wrap > #slide-blocks      { order: 2; }
html.hp-theme-andalus main.container-wrap > #explore           { order: 3; }
html.hp-theme-andalus main.container-wrap > #testimonials      { order: 4; }
html.hp-theme-andalus main.container-wrap > #f2f-consultations { order: 5; }
html.hp-theme-andalus main.container-wrap > #blog-home         { order: 7; }
html.hp-theme-andalus main.container-wrap > #about             { order: 8; }
html.hp-theme-andalus main.container-wrap > #feature           { order: 9; }

/* ornamental section titles: ۞ flourishes beside the heading */
html.hp-theme-andalus .title-main h4 span { color: var(--and-emerald) !important; }
html.hp-theme-andalus .title-main.align-center h4 span::before { content: '۞  '; color: var(--and-gold); }
html.hp-theme-andalus .title-main.align-center h4 span::after  { content: '  ۞'; color: var(--and-gold); }

/* ============ SLIDER: parchment stage with star lattice ============ */
html.hp-theme-andalus #banner .bg-deco { opacity: 0; }
html.hp-theme-andalus .banner-slider .slide {
    background:
        var(--and-star),
        radial-gradient(800px 420px at 85% -10%, rgba(17, 106, 82, .10), transparent 65%),
        linear-gradient(175deg, #f7f1e1 0%, var(--and-ivory) 100%);
}
html.hp-theme-andalus .banner-slider .use-text-title { color: var(--and-emerald-deep) !important; }
html.hp-theme-andalus .banner-slider .use-text-subtitle { color: var(--and-muted) !important; }
/* gold rule under the headline */
html.hp-theme-andalus .banner-slider .title-left:before {
    background: linear-gradient(90deg, var(--and-gold), var(--and-gold-soft)) !important;
    height: 3px !important;
    width: 72px;
    border-radius: 3px;
}
html.hp-theme-andalus .banner-slider .btn-area .btn {
    background: var(--and-emerald) !important;
    border-color: var(--and-emerald) !important;
    color: #f6f1e3 !important;
    border-radius: 10px;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 10px 24px rgba(17, 106, 82, .25);
}
html.hp-theme-andalus .banner-slider .btn-area .btn:hover {
    background: var(--and-emerald-deep) !important;
    border-color: var(--and-emerald-deep) !important;
}
html.hp-theme-andalus .banner-slider .btn-flat.primary-text { color: var(--and-emerald) !important; }
/* hero image in a horseshoe arch frame */
html.hp-theme-andalus .banner-slider .img img,
html.hp-theme-andalus .f2f-slide-img {
    border-radius: 46% 46% 14px 14px / 34% 34% 14px 14px;
    border: 3px solid var(--and-gold-soft);
    padding: 6px;
    background: #fff;
}
html.hp-theme-andalus .banner-arrow {
    background: #fff;
    border: 1px solid var(--and-gold-soft);
    color: var(--and-emerald);
    border-radius: 12px 12px 50% 50% / 12px 12px 40% 40%;
}
html.hp-theme-andalus .banner-arrow:hover {
    background: var(--and-emerald);
    border-color: var(--and-emerald);
    color: #fff;
}
html.hp-theme-andalus #banner_nav a { color: var(--and-line); }
html.hp-theme-andalus #banner_nav a.active { color: var(--and-gold); }

/* ============ BROCHURES: arched gateway tiles ============ */
html.hp-theme-andalus #slide-blocks { padding: 30px 0 10px; }
html.hp-theme-andalus .slide-blocks-row { gap: 16px; }
html.hp-theme-andalus .slide-block-card {
    border-radius: 40% 40% 14px 14px / 22% 22% 14px 14px;
    border: 2px solid var(--and-line);
    background: #fff;
    padding: 6px;
    box-shadow: 0 10px 26px rgba(76, 60, 22, .08);
}
html.hp-theme-andalus .slide-block-card:hover { border-color: var(--and-gold); }
html.hp-theme-andalus .slide-block-img-wrap {
    height: 170px;
    border-radius: 40% 40% 9px 9px / 22% 22% 9px 9px;
}

/* ============ COURSES: manuscript cards with arch covers ============ */
html.hp-theme-andalus #explore .rack { margin-top: 44px; margin-bottom: 48px; }
html.hp-theme-andalus #explore .rack:before { display: none; }
html.hp-theme-andalus #explore .category-title h4 { color: var(--and-emerald-deep); }
html.hp-theme-andalus #explore .category-title h4 i { color: var(--and-gold); }
html.hp-theme-andalus #explore .category-title .view-all { color: var(--and-emerald) !important; }
html.hp-theme-andalus #explore .content {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
}
@media (min-width: 600px)  { html.hp-theme-andalus #explore .content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { html.hp-theme-andalus #explore .content { grid-template-columns: repeat(3, 1fr); } }

html.hp-theme-andalus #explore .book,
html.hp-theme-andalus #explore .book.collapsed,
html.hp-theme-andalus #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: 8px 8px 0 !important;
    position: relative !important;
    left: 0 !important;
    overflow: hidden;
    cursor: pointer;
    background: #fffdf6 !important;
    border: 1px solid var(--and-line) !important;
    border-bottom: 3px solid var(--and-gold-soft) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(76, 60, 22, .08) !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
html.hp-theme-andalus #explore .book:hover {
    transform: translateY(-5px) !important;
    border-bottom-color: var(--and-gold) !important;
    box-shadow: 0 18px 42px rgba(76, 60, 22, .14) !important;
}
html.hp-theme-andalus #explore .book figcaption { display: none !important; }
html.hp-theme-andalus #explore .book figure {
    width: 100% !important;
    height: 165px !important;
    margin: 0 !important;
    border-radius: 42% 42% 10px 10px / 26% 26% 10px 10px !important;
    overflow: hidden;
    border: 1px solid var(--and-line);
}
html.hp-theme-andalus #explore .book figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
html.hp-theme-andalus #explore .book .desc {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 12px 10px 16px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
}
html.hp-theme-andalus #explore .book .desc h6 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-family: 'Reem Kufi', 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    color: var(--and-emerald-deep) !important;
    font-size: 1.02rem;
}
html.hp-theme-andalus #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: var(--and-muted) !important;
}
html.hp-theme-andalus #explore .book .desc-more {
    display: inline-block !important;
    margin-top: 10px;
    background: none;
    border: none;
    padding: 0;
    color: var(--and-gold) !important;
}
html.hp-theme-andalus #explore .book .book-link-overlay {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ============ TESTIMONIALS: illuminated-border quote cards ============ */
html.hp-theme-andalus .testimonial-card {
    background: #fffdf6;
    border: 1px solid var(--and-line);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(76, 60, 22, .07);
    position: relative;
}
html.hp-theme-andalus .testimonial-card::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid color-mix(in srgb, var(--and-gold) 40%, transparent);
    border-radius: 11px;
    pointer-events: none;
}
html.hp-theme-andalus .testimonial-card h6 { color: var(--and-emerald) !important; }

/* ============ F2F: courtyard cards ============ */
html.hp-theme-andalus .f2f-section-bg {
    background: var(--and-star), linear-gradient(180deg, var(--and-sand) 0%, var(--and-ivory) 85%);
}
html.hp-theme-andalus .f2f-section-bg::before,
html.hp-theme-andalus .f2f-section-bg::after { display: none; }
html.hp-theme-andalus .f2f-section-eyebrow {
    background: color-mix(in srgb, var(--and-gold) 14%, transparent);
    color: var(--and-gold);
    border-radius: 8px;
}
html.hp-theme-andalus .f2f-card {
    border-radius: 16px;
    border: 1px solid var(--and-line);
    box-shadow: 0 10px 28px rgba(76, 60, 22, .08);
}
html.hp-theme-andalus .f2f-card:hover { border-color: var(--and-gold-soft); }
html.hp-theme-andalus .f2f-card-btn { border-radius: 10px; }
html.hp-theme-andalus .f2f-connect-pill { background: var(--and-sand); border-color: var(--and-line); }

/* ============ NEWS: illuminated manuscript feature ============ */
html.hp-theme-andalus #blog-home .deco { display: none; }
html.hp-theme-andalus .announcement-feature-card {
    background: linear-gradient(150deg, var(--and-emerald-deep) 0%, var(--and-emerald) 100%);
    border: 2px solid var(--and-gold-soft);
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(12, 74, 58, .30);
}
html.hp-theme-andalus .announcement-feature-card h3 {
    font-family: 'Amiri', 'Reem Kufi', serif;
    color: #f6f1e3;
    font-size: 1.75rem;
}
html.hp-theme-andalus .announcement-feature-date,
html.hp-theme-andalus .announcement-feature-chip {
    background: color-mix(in srgb, var(--and-gold) 30%, transparent);
    color: #f6ecd7;
}
html.hp-theme-andalus .announcement-home-card {
    border-radius: 14px;
    border: 1px solid var(--and-line);
    background: #fffdf6;
    box-shadow: none;
}
html.hp-theme-andalus .announcement-home-card .date h2,
html.hp-theme-andalus .announcement-home-card .date h3,
html.hp-theme-andalus .announcement-home-card .date h4 { color: var(--and-emerald) !important; }
html.hp-theme-andalus .announcement-home-tags span {
    background: color-mix(in srgb, var(--and-emerald) 10%, transparent);
    color: var(--and-emerald);
}

/* ============ ABOUT + STATS ============ */
html.hp-theme-andalus #about .button {
    border-color: var(--and-emerald) !important;
    color: var(--and-emerald) !important;
    border-radius: 10px;
}
html.hp-theme-andalus #feature {
    background: var(--and-star), var(--and-sand);
    padding: 44px 0;
    border-top: 1px solid var(--and-line);
}
html.hp-theme-andalus #feature .counter-item .use-text-title { color: var(--and-emerald-deep) !important; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
    html.hp-theme-andalus #explore .book figure { height: 150px !important; }
    html.hp-theme-andalus .slide-block-img-wrap { height: 150px; }
}

/* ============================================================
   SITE-WIDE: course cards (category/tutor/related) + course landing.
   ============================================================ */
html.hp-theme-andalus .card.product-card {
    background: #fffdf6;
    border: 1px solid var(--and-line);
    border-bottom: 3px solid var(--and-gold-soft);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(76, 60, 22, .08);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    padding: 8px 8px 0;
}
html.hp-theme-andalus .card.product-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--and-gold);
    box-shadow: 0 18px 42px rgba(76, 60, 22, .14);
}
/* arch-topped course image */
html.hp-theme-andalus .product-card .figure {
    border-radius: 42% 42% 10px 10px / 26% 26% 10px 10px;
    overflow: hidden;
    border: 1px solid var(--and-line);
}
html.hp-theme-andalus .product-card .desc .title {
    font-family: 'Reem Kufi', 'Cairo', sans-serif !important;
    color: var(--and-emerald-deep);
    font-weight: 600;
}
html.hp-theme-andalus .product-card .desc .button {
    border-radius: 10px;
    border-color: var(--and-emerald) !important;
    color: var(--and-emerald) !important;
    text-transform: none;
    font-weight: 700;
}
html.hp-theme-andalus .product-card .desc .button:hover {
    background: var(--and-emerald) !important;
    color: #f6f1e3 !important;
}
/* course landing page */
html.hp-theme-andalus .image-detail,
html.hp-theme-andalus .detail-carousel .figure .img {
    border-radius: 42% 42% 14px 14px / 26% 26% 14px 14px;
    border: 3px solid var(--and-gold-soft);
}
html.hp-theme-andalus .btn-area.main .btn {
    background: var(--and-emerald) !important;
    border-color: var(--and-emerald) !important;
    color: #f6f1e3 !important;
    border-radius: 10px;
    font-weight: 700;
    text-transform: none;
}
html.hp-theme-andalus .btn-area.main .btn:hover {
    background: var(--and-emerald-deep) !important;
    border-color: var(--and-emerald-deep) !important;
}