/*
 * ============================================================================
 * Project : Munga African Food
 * File    : css/style.css
 * Purpose : Custom theme styles (loaded after bootstrap.min.css).
 * Date    : 2026-06-13
 * User    : [TO BE FILLED BY USER]
 * LLM     : Claude (Anthropic)
 * ============================================================================
 */

:root {
    --earth-brown: #5c3a21;
    --earth-tan: #c8895c;
    --vibrant-green: #3a7d44;
    --leaf-green: #6ca644;
    --warm-orange: #e08a1e;
    --deep-red: #b5341f;
    --cream: #fdf6ec;
    --dark: #2b1d12;
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 70px; }

body {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--dark);
    background-color: var(--cream);
}

h1, h2, h3, .display-title { font-family: 'Playfair Display', Georgia, serif; }

/* ---------- Navbar ---------- */
.navbar-munga {
    background: linear-gradient(90deg, var(--earth-brown), var(--vibrant-green));
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.navbar-munga .navbar-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: .5px;
}
.navbar-munga .nav-link { color: rgba(255,255,255,0.9) !important; font-weight: 500; }
.navbar-munga .nav-link:hover { color: var(--warm-orange) !important; }

/* ---------- Hero / Header ---------- */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(43,29,18,0.55), rgba(58,125,68,0.65));
}
/* Crossfade background layers for smooth auto-rotation */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 0;
}
.hero-bg.active { opacity: 1; }
.hero-content { position: relative; z-index: 2; padding: 2rem 1rem; max-width: 850px; }
.hero-badge {
    display: inline-block;
    background: var(--warm-orange);
    color: #fff;
    padding: .35rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: .8rem;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.hero h1 {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 800;
    text-shadow: 0 4px 24px rgba(0,0,0,0.5);
    margin-bottom: 1rem;
}
.hero p.lead {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 2rem;
}
.hero .accent-bar {
    height: 6px; width: 120px; margin: 0 auto 1.5rem;
    background: linear-gradient(90deg, var(--deep-red), var(--warm-orange), var(--leaf-green));
    border-radius: 6px;
}

.btn-munga {
    background: var(--warm-orange);
    color: #fff;
    font-weight: 600;
    padding: .7rem 2rem;
    border-radius: 50px;
    border: none;
}
.btn-munga:hover { background: var(--deep-red); color: #fff; }
.btn-outline-munga {
    border: 2px solid #fff; color: #fff; font-weight: 600;
    padding: .7rem 2rem; border-radius: 50px; background: transparent;
}
.btn-outline-munga:hover { background: #fff; color: var(--earth-brown); }

/* ---------- Sections ---------- */
section { padding: 5rem 0; }
.section-title { font-weight: 800; color: var(--earth-brown); margin-bottom: .5rem; }
.section-sub { color: var(--vibrant-green); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; }
.divider { height: 4px; width: 80px; background: var(--warm-orange); border-radius: 4px; margin: 1rem 0 2rem; }
.text-center .divider { margin-left: auto; margin-right: auto; }

.about-img { border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.2); }
.feature-card {
    background: #fff; border-radius: 16px; padding: 1.8rem; height: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06); transition: transform .25s, box-shadow .25s;
    border-bottom: 4px solid var(--leaf-green);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }
.feature-icon {
    width: 60px; height: 60px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
    font-size: 1.6rem; color:#fff; margin-bottom: 1rem;
}

#downloads { background: var(--cream); }
.doc-card {
    background:#fff; border-radius: 14px; padding: 1.5rem; height:100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.07); display:flex; flex-direction:column;
    border-left: 5px solid var(--deep-red);
}
.doc-icon { font-size: 2.6rem; color: var(--deep-red); }

#contact { background: linear-gradient(135deg, var(--earth-brown), var(--vibrant-green)); color:#fff; }
.contact-card { background:#fff; color: var(--dark); border-radius: 18px; padding: 2.5rem; box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.form-label { font-weight: 600; color: var(--earth-brown); }
.contact-info-item { display:flex; gap: 14px; align-items:flex-start; margin-bottom: 1.5rem; }
.contact-info-item i { font-size: 1.5rem; color: var(--warm-orange); }

/* Honeypot anti-bot field - hidden from real users */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
}

footer { background: var(--dark); color: rgba(255,255,255,0.8); padding: 2rem 0; text-align:center; }
footer a { color: var(--warm-orange); text-decoration: none; }

/* ---------- Admin (crm.php) ---------- */
.brand-bar { background: linear-gradient(90deg, var(--earth-brown), var(--vibrant-green)); color:#fff; }
.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--earth-brown), var(--vibrant-green)); }
.login-card { background:#fff; border-radius:18px; padding:2.5rem; max-width:400px; width:100%; box-shadow:0 18px 50px rgba(0,0,0,0.3); }
.stat-card { border-radius:14px; color:#fff; padding:1.5rem; }