/* ==========================================================================
   ABEG Africa — Fluid Mobile & Desktop Responsive System
   ========================================================================== */

:root {
    --abeg-olive: #232C18;
    --abeg-olive-light: #2E3A1F;
    --abeg-orange: #E5641B;
    --abeg-orange-hover: #D4530F;
    --abeg-gold: #E6B422;
    --abeg-gold-light: #FDF6E2;
    --abeg-canvas: #F4F3EF;
    --abeg-canvas-alt: #EBEAE4;
    --abeg-charcoal: #181916;
    --abeg-charcoal-muted: #595B52;
    --abeg-border: #D8D6CC;
    
    --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--abeg-canvas);
    color: var(--abeg-charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--abeg-olive);
    margin-top: 0;
}

/* Fluid Typography */
.abeg-title {
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
    color: var(--abeg-olive);
}

.abeg-kicker {
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 2vw, 0.75rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--abeg-orange);
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Fluid Container */
.abeg-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

/* Cards & Hard Shadows */
.abeg-card-leaf {
    border-radius: 1.5rem 0.5rem 1.5rem 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shadow-hard-orange {
    box-shadow: clamp(4px, 1.2vw, 6px) clamp(4px, 1.2vw, 6px) 0px var(--abeg-orange);
}

.shadow-hard-neutral {
    box-shadow: clamp(3px, 1vw, 5px) clamp(3px, 1vw, 5px) 0px var(--abeg-olive);
}

/* Buttons */
.abeg-btn-gold, .abeg-btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    text-decoration: none;
    border-radius: 0.6rem;
    border: 2px solid var(--abeg-olive);
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.abeg-btn-gold {
    background-color: var(--abeg-gold);
    color: var(--abeg-olive);
    box-shadow: 3px 3px 0px var(--abeg-olive);
}

.abeg-btn-navy {
    background-color: var(--abeg-olive);
    color: #FFFFFF;
    box-shadow: 3px 3px 0px var(--abeg-orange);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-orange { background-color: var(--abeg-orange); color: #FFF; }
.badge-olive { background-color: var(--abeg-olive-light); color: #FFF; border: 1px solid rgba(255,255,255,0.15); }
.badge-gold { background-color: var(--abeg-gold); color: var(--abeg-olive); }
.badge-green { background-color: #10B981; color: #FFF; }
.badge-red { background-color: #EF4444; color: #FFF; }

/* Forms & Touch Targets */
.abeg-input, .abeg-select, .abeg-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 16px; /* Prevents iOS auto-zoom */
    border: 2px solid var(--abeg-border);
    border-radius: 0.5rem;
    background: #FFFFFF;
    color: var(--abeg-charcoal);
    outline: none;
    touch-action: manipulation;
}

/* Mobile Adjustments (< 768px) */
@media (max-width: 768px) {
    .abeg-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .carousel-container {
        height: 280px !important;
        border-radius: 1.25rem 0.35rem 1.25rem 0.35rem !important;
    }

    .carousel-caption {
        padding: 1.25rem !important;
    }

    .carousel-caption h3 {
        font-size: 1.05rem !important;
    }

    .abeg-card-leaf {
        border-radius: 1.25rem 0.35rem 1.25rem 0.35rem;
    }

    .abeg-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}