:root {
    --dirt-brown: #4e342e;
    --kenya-black: #060606;
    --kenya-red: #922529;
    --kenya-green: #006633;
    --white: #ffffff;
    --cream: #fdfaf5;
    --shadow: 0 10px 30px rgba(0,0,0,0.15);
}

body { font-family: 'Inter', sans-serif; background-color: var(--cream); color: var(--kenya-black); margin: 0; scroll-behavior: smooth; }

/* Language Logic */
[lang="ki"] .en, [lang="en"] .ki { display: none; }

/* Admin Base Hide */
.admin-only, .super-only, .admin-actions, .edit-indicator { display: none; }

/* Active Admin Logic */
body.admin-mode .admin-only { display: block; }
body.admin-mode .admin-actions { display: flex; }
body.super-mode .super-only { display: block; }
body.admin-mode .edit-indicator.active { display: block; }

header {
    background: var(--kenya-black); padding: 15px 5%;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 2000; border-bottom: 4px solid var(--kenya-red);
}
.logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--white) !important; font-weight: 900; text-decoration: none; }
.nav-links a { text-decoration: none; color: #aaa; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; transition: 0.3s; margin: 0 10px; }
.nav-links a.active { color: var(--kenya-red) !important; }
.btn-lang { background: var(--kenya-green); color: var(--white); border-radius: 50px; padding: 10px 22px; border: 2px solid var(--white); cursor: pointer; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }

/* Hero */
.hero { 
    background: linear-gradient(rgba(78, 52, 46, 0.9), rgba(78, 52, 46, 0.9)), url('https://www.transparenttextures.com/patterns/pinstriped-suit.png');
    background-color: var(--dirt-brown); color: var(--white); padding: 80px 10%; text-align: center; border-bottom: 10px solid var(--kenya-green); 
}

.container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.section-header { text-align: center; margin: 50px 0 20px; font-family: 'Playfair Display', serif; font-size: 2.2rem; }
.red-line { width: 80px; height: 5px; background: var(--kenya-red); margin: 0 auto 40px; }

/* Team Section Styles */
.team-subsection { margin-bottom: 60px; }
.team-subtitle { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--kenya-red); text-align: center; text-transform: uppercase; margin-bottom: 30px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; }
.member-card { background: #fff; padding: 20px; text-align: center; border-radius: 8px; border: 1px solid #eee; position: relative; transition: 0.3s; }
.member-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.member-pic { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--kenya-green); margin-bottom: 15px; background: #eee; }
.member-name { font-weight: 700; font-size: 1rem; color: #000; margin: 5px 0; }
.member-role { font-size: 0.75rem; color: var(--kenya-red); font-weight: 600; text-transform: uppercase; }

/* Content Cards */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.card { background: white; padding: 30px; border-radius: 4px; box-shadow: var(--shadow); border-left: 8px solid var(--dirt-brown); position: relative; margin-bottom: 30px; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
.media-item { background: white; border: 2px solid var(--kenya-green); overflow: hidden; border-radius: 8px; }
.media-content { aspect-ratio: 16/9; background: #000; }
.media-content img, .media-content iframe { width: 100%; height: 100%; object-fit: cover; border: none; display: block; }

/* Inquiry */
.inquiry-section { background: var(--dirt-brown); padding: 80px 10%; color: white; border-top: 10px solid var(--kenya-red); }
.inquiry-box { max-width: 600px; margin: 0 auto; background: white; padding: 40px; border-radius: 8px; color: var(--kenya-black); }
.locked { background: #eee; cursor: not-allowed; font-weight: bold; border: 1px solid #ccc; }
input, textarea, select { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; box-sizing: border-box; }

/* Admin Panel */
#adminDashboard { background: #fff; margin: 40px 5%; padding: 30px; border: 3px solid #000; box-shadow: var(--shadow); }
.admin-submit { background: var(--kenya-black); color: white; border: none; padding: 15px; width: 100%; font-weight: bold; cursor: pointer; margin-top:10px; }
.act-btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.75rem; font-weight: bold; color: white; margin: 0 5px; }

footer { background: var(--kenya-black); color: white; text-align: center; padding: 60px 5%; border-top: 15px solid var(--dirt-brown); }
.admin-trigger { color: #444; text-decoration: none; font-size: 0.7rem; display: inline-block; margin-top: 20px; }