/* ============================================================
   UI polish layer (loaded after style.v2.css) — additive only.
   Madinatul Quran Online Madrasa
   ============================================================ */

:root {
    --p-shadow-sm: 0 2px 10px rgba(13, 40, 24, .06);
    --p-shadow: 0 12px 32px rgba(13, 40, 24, .12);
    --p-shadow-lg: 0 22px 55px rgba(13, 40, 24, .18);
    --p-gold: #D4AF37;
    --p-green: #1F4E3C;
    --p-green-2: #2D7A5E;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }
a { transition: color .2s ease, opacity .2s ease; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .2s ease, box-shadow .2s ease, background .25s ease, color .2s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--p-green), var(--p-green-2));
    border: none;
    box-shadow: var(--p-shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 78, 60, .30); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-sm); }
.btn-light { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.btn-light:hover { transform: translateY(-2px); }
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .55);
    outline-offset: 2px;
}

/* ---------- Navbar ---------- */
.navbar-header { z-index: 1000; }
.navbar { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.nav-link { position: relative; font-weight: 600; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--p-gold);
    border-radius: 2px;
    transition: width .28s ease;
}
.nav-link:hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero-section { position: relative; }
.hero-title { text-shadow: 0 2px 20px rgba(0, 0, 0, .35); letter-spacing: -.3px; }
.hero-subtitle { opacity: .95; }

/* ---------- Section headers ---------- */
.section-title, .section-header h2 { letter-spacing: -.3px; }
.section-header p { color: #6b7280; }

/* ---------- Cards ---------- */
.course-card, .blog-card, .blog-card-large, .mv-card, .value-card, .team-card,
.stat-card, .sidebar-widget, .contact-form-card, .contact-item {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.course-card, .blog-card, .blog-card-large, .sidebar-widget, .contact-form-card {
    border-radius: 16px;
    overflow: hidden;
}
.course-card:hover, .blog-card:hover, .blog-card-large:hover {
    transform: translateY(-6px);
    box-shadow: var(--p-shadow);
}
.value-card:hover, .mv-card:hover, .team-card:hover, .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--p-shadow);
}
.course-image, .blog-image { overflow: hidden; }
.course-image img, .blog-image img { transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.course-card:hover .course-image img,
.blog-card:hover .blog-image img,
.blog-card-large:hover .blog-image img { transform: scale(1.06); }
.team-avatar { overflow: hidden; }

/* ---------- Badges ---------- */
.badge, .course-level {
    border-radius: 999px;
    padding: .28rem .75rem;
    font-weight: 600;
    letter-spacing: .2px;
}

/* ---------- Forms ---------- */
.form-control {
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus {
    border-color: var(--p-green);
    box-shadow: 0 0 0 4px rgba(31, 78, 60, .12);
    outline: none;
}
.blog-search input { border-radius: 999px 0 0 999px; }
.blog-search button { border-radius: 0 999px 999px 0; }

/* ---------- Alerts ---------- */
.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.alert-error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

/* ---------- Blog article readability ---------- */
.blog-post-content { line-height: 1.95; font-size: 1.06rem; }
.blog-post-content h2, .blog-post-content h3 { margin-top: 1.6em; letter-spacing: -.2px; }
.blog-post-content p { margin-bottom: 1.1em; }
.blog-post-content img { border-radius: 14px; }
.blog-post-title { letter-spacing: -.4px; }

/* ---------- Footer ---------- */
.social-link { transition: transform .2s ease, background .2s ease, color .2s ease; }
.social-link:hover { transform: translateY(-3px); }
.footer-links a:hover, .footer-contact a:hover { opacity: .85; }

/* ---------- Pagination ---------- */
.pagination a, .pagination .current {
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
}
.pagination .current { background: var(--p-green); color: #fff; }

/* ---------- Tables ---------- */
table.table tbody tr { transition: background .18s ease; }
table.table tbody tr:hover { background: rgba(31, 78, 60, .045); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
    .hero-title { font-size: 1.9rem; }
    .hero-subtitle { font-size: 1rem; }
    .section-title, .section-header h2 { font-size: 1.5rem; }
    .btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }
}

/* ---------- Image placeholders (cards without a featured image) ---------- */
.course-image-placeholder,
.blog-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 78, 60, 0.06), rgba(212, 175, 55, 0.10));
    color: var(--p-gold);
    font-size: 3rem;
}

/* ---------- Value cards ---------- */
.value-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 78, 60, 0.08);
    color: var(--p-gold);
    font-size: 1.7rem;
    margin: 0 auto 1rem;
}

/* ---------- Contact info items ---------- */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.contact-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.14);
    color: var(--p-gold);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ---------- Breadcrumb (page banner) ---------- */
.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin: 0.6rem 0 0;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin-right: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .course-image-placeholder,
    .blog-image-placeholder {
        min-height: 180px;
    }
}

/* ---------- Responsive layout ---------- */
.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .about-layout, .contact-layout, .mv-grid { grid-template-columns: 1fr; gap: 2rem; }
    .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .section { padding: 2.5rem 0; }
    .page-header { padding: 2.5rem 0; margin-bottom: 1.5rem; }
    .stats-section { margin: 1.5rem 0; padding: 2rem 0; }
    .values-grid, .team-grid, .mv-grid, .stats-grid { grid-template-columns: 1fr; }
    .about-layout, .contact-layout { gap: 1.5rem; }
    .footer-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-bottom-container { flex-direction: column; gap: 0.6rem; text-align: center; }
    .cta-section { padding: 2.5rem 1.25rem; }
    .courses-grid, .blog-grid { grid-template-columns: 1fr; }
    .navbar-container { flex-wrap: nowrap; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.55rem; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn { width: 100%; }
    .stat-card { padding: 1.25rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}


/* ---------- Tablet navigation (no overflow) ---------- */
@media (max-width: 1024px) {
    .navbar-brand span { display: none; }
    .navbar-brand { font-size: 1.25rem; }
    .navbar-menu { gap: 1rem; }
}