/* ============================================
   BLACK & WHITE PROFESSIONAL THEME
   I-Texon Ghana - Monochrome Excellence
   ============================================ */

/* Override Professional Enhancements with B&W Theme */

/* ============================================
   COLOR SYSTEM - BLACK & WHITE
   ============================================ */

:root {
    --black: #000000;
    --near-black: #1a1a1a;
    --dark-gray: #2d2d2d;
    --medium-gray: #666666;
    --light-gray: #999999;
    --lighter-gray: #cccccc;
    --off-white: #f5f5f5;
    --white: #ffffff;
}

/* ============================================
   BASE OVERRIDES
   ============================================ */

body {
    color: var(--dark-gray);
    background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--black);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
    background: var(--black);
    border-bottom: 1px solid var(--dark-gray);
}

.logo h1 {
    color: var(--white);
    background: none;
    -webkit-text-fill-color: var(--white);
}

.logo p {
    color: var(--light-gray);
}

.nav-links a {
    color: var(--white);
}

.nav-links a::after {
    background: var(--white);
}

/* Dropdown Menu */
.dropdown-menu {
    background: var(--white);
    border: 1px solid var(--lighter-gray);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.dropdown-item:hover {
    background: var(--off-white);
    border-left-color: var(--black);
}

.dropdown-item-icon {
    background: var(--black);
    color: var(--white);
}

.dropdown-item-content h4 {
    color: var(--black);
}

.dropdown-item-content p {
    color: var(--medium-gray);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.logo-icon i {
    color: var(--white);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary {
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
}

.btn-primary::before {
    background: var(--dark-gray);
}

.btn-primary:hover {
    background: var(--dark-gray);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Dark background button variants */
.btn-primary.btn-light {
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--white);
}

.btn-primary.btn-light:hover {
    background: var(--off-white);
    color: var(--black);
}

.btn-secondary.btn-dark {
    border: 2px solid var(--black);
    color: var(--black);
}

.btn-secondary.btn-dark:hover {
    background: var(--black);
    color: var(--white);
}

/* ============================================
   CARDS
   ============================================ */

.program-card {
    background: var(--white);
    border: 1px solid var(--lighter-gray);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

.program-card::before {
    background: var(--black);
}

.program-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--medium-gray);
}

.program-card i {
    color: var(--black);
    background: none;
    -webkit-text-fill-color: var(--black);
}

.program-card h3 {
    color: var(--black);
}

.program-card p {
    color: var(--medium-gray);
}

/* ============================================
   STATS
   ============================================ */

.stat-item {
    background: var(--off-white);
    border: 1px solid var(--lighter-gray);
}

.stat-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-item h3 {
    color: var(--black);
    background: none;
    -webkit-text-fill-color: var(--black);
}

.stat-item p {
    color: var(--medium-gray);
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about-text h2 {
    color: var(--black);
}

.about-text h2::after {
    background: var(--black);
}

.about-text h3 {
    color: var(--dark-gray);
}

.about-text p {
    color: var(--medium-gray);
}

.about-image::before {
    background: rgba(0, 0, 0, 0.05);
}

/* Check icons */
.about-text i.fa-check-circle {
    color: var(--black) !important;
}

/* ============================================
   SECTIONS
   ============================================ */

section::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

section h2 {
    color: var(--black);
}

section h2::after {
    background: var(--black);
}

.section-subtitle {
    color: var(--medium-gray);
}

/* Alternating section backgrounds */
section:nth-child(even) {
    background: var(--off-white);
}

section:nth-child(odd) {
    background: var(--white);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header {
    background: var(--black);
    color: var(--white);
}

.page-header::before {
    opacity: 0.3;
}

.page-header h1 {
    color: var(--white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.page-header p {
    color: var(--light-gray);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--black);
    color: var(--white);
}

.footer::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.footer-logo h3 {
    color: var(--white);
}

.footer-logo p {
    color: var(--light-gray);
}

.footer-links h4,
.footer-social h4 {
    color: var(--white);
}

.footer-links a {
    color: var(--light-gray);
}

.footer-links a:hover {
    color: var(--white);
}

.social-icons a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.social-icons a:hover {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.footer-bottom {
    color: var(--light-gray);
    border-top: 1px solid var(--dark-gray);
}

/* ============================================
   TEAM CARDS (Board Members)
   ============================================ */

.team-card {
    background: var(--white);
    border: 1px solid var(--lighter-gray);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.team-image {
    background: var(--black) !important;
    color: var(--white);
}

.team-info h3 {
    color: var(--black);
}

.team-info .position {
    color: var(--dark-gray);
}

.team-info p {
    color: var(--medium-gray);
}

.team-contact a {
    color: var(--black);
}

.team-contact a:hover {
    color: var(--dark-gray);
}

/* ============================================
   ORGANIZATIONAL STRUCTURE
   ============================================ */

.org-structure {
    background: var(--off-white);
}

.structure-box {
    background: var(--white);
    border: 1px solid var(--lighter-gray);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.structure-box h3 {
    color: var(--black);
}

.structure-list li {
    border-bottom: 1px solid var(--lighter-gray);
}

.structure-list i {
    color: var(--black);
}

/* ============================================
   ANNOUNCEMENTS
   ============================================ */

.announcements {
    background: var(--white);
}

.announcement-slide {
    background: var(--white);
}

.announcement-badge {
    background: var(--black);
    color: var(--white);
}

.announcement-content h3 {
    color: var(--black);
}

.announcement-content p {
    color: var(--medium-gray);
}

/* ============================================
   GALLERY
   ============================================ */

.gallery {
    background: var(--off-white);
}

.filter-btn {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--lighter-gray);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.gallery-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact {
    background: var(--white);
}

.contact-item i {
    color: var(--black);
}

.contact-item h4 {
    color: var(--black);
}

.contact-item p {
    color: var(--medium-gray);
}

.contact-form input,
.contact-form textarea {
    border: 1px solid var(--lighter-gray);
    background: var(--white);
    color: var(--dark-gray);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   SPECIAL SECTIONS
   ============================================ */

/* Dark sections with white text */
.dark-section {
    background: var(--black) !important;
    color: var(--white);
}

.dark-section h2,
.dark-section h3,
.dark-section h4 {
    color: var(--white);
}

.dark-section p {
    color: var(--light-gray);
}

.dark-section .program-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.dark-section .program-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-section .program-card h3 {
    color: var(--white);
}

.dark-section .program-card p {
    color: var(--light-gray);
}

.dark-section .program-card i {
    color: var(--white);
    -webkit-text-fill-color: var(--white);
}

/* ============================================
   HIGHLIGHTS & ACCENTS
   ============================================ */

/* Highlight boxes */
.highlight-box {
    background: var(--off-white);
    border-left: 4px solid var(--black);
    padding: 1.5rem;
    border-radius: 4px;
}

.highlight-box h4 {
    color: var(--black);
}

.highlight-box i {
    color: var(--black);
}

/* Quote styling */
blockquote,
.quote {
    border-left: 4px solid var(--black);
    padding-left: 1.5rem;
    color: var(--dark-gray);
    font-style: italic;
}

/* ============================================
   TIMELINE (Milestones)
   ============================================ */

.timeline::before {
    background: var(--lighter-gray);
}

.timeline-item::before {
    background: var(--black);
    border: 3px solid var(--white);
}

.timeline-content {
    background: var(--white);
    border: 1px solid var(--lighter-gray);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    color: var(--black);
}

.timeline-content p {
    color: var(--medium-gray);
}

.timeline-date {
    background: var(--black);
    color: var(--white);
}

/* ============================================
   ADMIN LINK
   ============================================ */

.admin-access-link {
    color: var(--light-gray);
}

.admin-access-link:hover {
    color: var(--white);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .header {
        background: var(--black);
    }
    
    .nav-links {
        background: var(--near-black);
    }
    
    .hamburger span {
        background: var(--white);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body {
        background: white;
        color: black;
    }
    
    .header,
    .footer {
        background: white;
        color: black;
    }
    
    .btn-primary,
    .btn-secondary {
        border: 2px solid black;
        color: black;
        background: white;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-black { color: var(--black) !important; }
.text-white { color: var(--white) !important; }
.text-gray { color: var(--medium-gray) !important; }

.bg-black { background: var(--black) !important; }
.bg-white { background: var(--white) !important; }
.bg-gray { background: var(--off-white) !important; }

.border-black { border-color: var(--black) !important; }
.border-white { border-color: var(--white) !important; }
.border-gray { border-color: var(--lighter-gray) !important; }

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast focus states */
*:focus {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.dark-section *:focus {
    outline-color: var(--white);
}

/* Ensure sufficient contrast */
a {
    color: var(--black);
}

a:hover {
    color: var(--dark-gray);
}

.dark-section a {
    color: var(--white);
}

.dark-section a:hover {
    color: var(--light-gray);
}