/*!
Theme Name: Dar-Elkhalil
Author: Arqam Web
Author URI: http://arqamweb.com
Description: Dar-Elkhalil is a lightweight, standalone WordPress theme for an online Arabic & Quran academy. It ships with a Tailwind-based front page, page templates (About, Courses, Contact, FAQs, Testimonials, Enroll) and a WhatsApp integration. Fast, responsive and translation ready.
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arqamweb
*/

/* -------------------------------------------------------------------------
 * Site header / navigation (standalone — no longer inherited from Astra)
 * Light header styled after quran-academy-25.lovable.app:
 * white background, dark/grey nav, brown (#62472c) accent + CTA button.
 * Theme palette: primary #d9ac5a, secondary #62472c
 * ---------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #ffffff;
    color: #020817;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.site-header .site-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    min-height: 96px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-branding a {
    color: #020817;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}

.site-branding .custom-logo {
    max-height: 64px;
    width: auto;
}

/* Primary menu */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-navigation a {
    position: relative;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

/* Animated underline (grows from left on hover) — matches the reference */
.main-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #d9ac5a;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: #62472c;
}

/* Header right-side actions (Enroll CTA + mobile toggle) */
.site-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.enroll-btn {
    display: inline-flex;
    align-items: center;
    background-color: #62472c;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.enroll-btn:hover,
.enroll-btn:focus {
    background-color: #4d3721;
    color: #ffffff;
}

/* Mobile toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: #62472c;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 0;
}

.menu-toggle svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: inline-flex;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .main-navigation.is-open {
        max-height: 80vh;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
    }

    .main-navigation li {
        border-bottom: 1px solid rgba(2, 8, 23, 0.08);
    }

    .main-navigation a {
        display: block;
        padding: 0.75rem 0;
    }
}

/* -------------------------------------------------------------------------
 * Tutor LMS integration
 * The course archive (/courses/) and single course pages are rendered by
 * the Tutor LMS plugin, which ships with a blue accent (#3E64DE). We recolour
 * its whole UI to the theme palette (brown #62472c / darker #4d3721) by
 * overriding Tutor's CSS custom properties. `!important` guarantees these win
 * over Tutor's non-important inline :root tokens regardless of load order.
 * No plugin files are touched, so this survives Tutor updates.
 * ---------------------------------------------------------------------- */
:root {
    /* Master accent tokens (buttons, links, ratings, progress, active states) */
    --tutor-color-primary: #62472c !important;
    --tutor-color-primary-rgb: 98, 71, 44 !important;
    --tutor-color-primary-hover: #4d3721 !important;
    --tutor-color-primary-hover-rgb: 77, 55, 33 !important;

    /* Brand scale used by newer button tokens — var(--tutor-brand-*, #3e64de) */
    --tutor-brand-400: #a58a6f !important;
    --tutor-brand-500: #7a5c3b !important;
    --tutor-brand-600: #62472c !important;
    --tutor-brand-700: #4d3721 !important;
}

/* Breathing room so course pages clear the sticky header,
 * matching the generous spacing used across the rest of the theme. */
body.tutor-frontend .site-content {
    padding-top: 2rem;
}

/* Clear gap below the courses so the grid doesn't touch the brown footer */
body.tutor-frontend .site-content {
    padding-bottom: 4.5rem;
}

/* Keep the archive grid aligned with the theme's max content width
 * and give the course list its own bottom spacing (before pagination/footer) */
.tutor-wrap.course-archive-page {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
}

.tutor-courses-wrap .tutor-course-list {
    margin-bottom: 2rem;
}