/*
Theme Name:  Monouara Foundation
Theme URI:   https://monouara.org
Description: A custom Islamic charity theme for Monouara Foundation. Features campaign management, SSL Commerz donation, gallery with Facebook video, volunteer applications, built-in contact form, and Google Translate support.
Author:      Monouara Foundation
Version:     1.0.0
Text Domain: monouara-foundation
Tags:        charity, islamic, donation, campaigns, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ── Global reset (ensures consistent rendering across browsers) ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/*
 * overflow-x on body breaks position:sticky for #masthead (also a body child): the header can
 * clip or sit wrong after scroll. Clip horizontal bleed on the main wrapper instead.
 */
body { overflow-x: visible; }
#page.site { overflow-x: hidden; max-width: 100%; }

/* =====================================================================
   CSS Custom Properties — Islamic Palette
   ===================================================================== */
:root {
    --mf-primary:       #2E7D32;
    --mf-primary-dark:  #1B5E20;
    --mf-primary-light: #4CAF50;
    --mf-accent:        #C9A84C;
    --mf-accent-light:  #F0D080;
    --mf-bg:            #F9F6EF;
    --mf-bg-alt:        #F4F8F4;
    --mf-text:          #1a2a1a;
    --mf-text-muted:    #5a6a5a;
    --mf-white:         #ffffff;
    --mf-border:        #d8e8d8;
    --mf-shadow:        0 4px 20px rgba(46,125,50,0.10);
    --mf-radius:        8px;
    --mf-transition:    0.3s ease;
    --theme-footer-bg:  #1a2a1a;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--mf-text);
    background: #ffffff;
    line-height: 1.7;
}

a { color: var(--mf-primary); transition: color var(--mf-transition); }
a:hover { color: var(--mf-primary-dark); text-decoration: none; }

h1,h2,h3,h4,h5,h6 {
    font-family: 'Playfair Display','Georgia',serif;
    font-weight: 700;
    color: var(--mf-text);
    line-height: 1.3;
}

.mf-btn {
    display: inline-block;
    background-color: var(--mf-primary);
    color: var(--mf-white) !important;
    border-radius: var(--mf-radius);
    font-weight: 600;
    padding: 12px 30px;
    text-decoration: none;
    transition: background-color var(--mf-transition), transform var(--mf-transition);
    font-family: 'Inter', sans-serif;
}
.mf-btn:hover {
    background-color: var(--mf-primary-dark);
    transform: translateY(-2px);
    color: var(--mf-white) !important;
}

.mf-label-tag {
    display: inline-block;
    background: rgba(46,125,50,0.1);
    color: var(--mf-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.mf-section { padding: 96px 0; }
.mf-section-alt { background-color: var(--mf-bg-alt); }

.mf-section-heading { text-align: center; margin-bottom: 56px; }
.mf-section-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    font-weight: 800;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 0;
}
.mf-section-heading h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #2E7D32, #C9A84C, #2E7D32);
    border-radius: 3px;
}
.mf-section-heading .mf-section-sub {
    color: var(--mf-text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-top: 16px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

.mf-bismillah {
    display: block;
    font-size: 1.8rem;
    color: #F0D080;
    font-family: 'Scheherazade New','Traditional Arabic',serif;
    direction: rtl;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.mf-geometric-divider {
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M0 24L15 0L30 24L45 0L60 24L75 0L90 24L105 0L120 24L120 48L0 48Z' fill='%232E7D32' opacity='0.06'/%3E%3Cpath d='M0 48L15 24L30 48L45 24L60 48L75 24L90 48L105 24L120 48Z' fill='%23C9A84C' opacity='0.06'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 120px 48px;
}

/* Accessibility */
.skip-link:focus {
    background: #2E7D32; color: #fff; padding: 10px 20px;
    z-index: 9999; position: fixed; top: 10px; left: 10px;
    border-radius: 6px; text-decoration: none; font-weight: 700;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline: 3px solid #C9A84C;
    outline-offset: 2px;
}
.screen-reader-text {
    border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
    height:1px;margin:-1px;overflow:hidden;padding:0;
    position:absolute;width:1px;word-wrap:normal!important;
}