/* ================================================================
   Ameerah Legacy Foundation — Main Stylesheet (Phase 4 Full)
   ================================================================ */

/* ---------------------------------------------------------------
   CSS VARIABLES
   --------------------------------------------------------------- */
:root {
    --alf-primary:   #1a5276;
    --alf-accent:    #e67e22;
    --alf-light:     #f8f9fa;
    --alf-dark:      #1a1a2e;
    --alf-success:   #27ae60;
    --alf-danger:    #e74c3c;
    --alf-shadow:    0 4px 20px rgba(0,0,0,.08);
    --alf-radius:    12px;
    --alf-transition: all .25s ease;
}

/* ---------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--alf-accent); }
a:hover { color: var(--alf-primary); }

/* ---------------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.section-title {
    font-size: 2rem;
    color: var(--alf-primary);
    margin-bottom: .5rem;
}
.section-subtitle { color: #6c757d; font-size: 1.05rem; }

/* ---------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------- */
.text-primary-alf  { color: var(--alf-primary)  !important; }
.text-accent-alf   { color: var(--alf-accent)   !important; }
.bg-primary-alf    { background: var(--alf-primary) !important; }
.bg-accent-alf     { background: var(--alf-accent)  !important; }
.shadow-alf        { box-shadow: var(--alf-shadow) !important; }
.radius-alf        { border-radius: var(--alf-radius) !important; }

/* ---------------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------------- */
::-webkit-scrollbar       { width: 7px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--alf-primary); border-radius: 4px; }

/* ---------------------------------------------------------------
   NAVBAR
   --------------------------------------------------------------- */
.navbar { padding-top: .85rem; padding-bottom: .85rem; }
.navbar .nav-link { font-size: .92rem; padding: .4rem .6rem; transition: opacity .2s; }
.navbar .nav-link:hover { opacity: .8; }
.navbar .nav-link.active {
    font-weight: 600;
    position: relative;
}
.navbar .nav-link.active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--alf-accent);
    border-radius: 2px;
    margin-top: 2px;
}
.navbar-brand span { line-height: 1.15; }

/* ---------------------------------------------------------------
   HERO SECTION
   --------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 92vh;
    background: url('../img/hero-bg.jpg') center center / cover no-repeat;
    background-color: var(--alf-dark); /* Fallback */
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,82,118,.92) 0%, rgba(26,26,46,.85) 100%);
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* ---------------------------------------------------------------
   TICKER STRIP
   --------------------------------------------------------------- */
.ticker-wrap {
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.ticker-label {
    font-size: .75rem;
    letter-spacing: 1px;
}
#ticker-message {
    font-size: .9rem;
    transition: opacity .4s ease, transform .4s ease;
}
.ticker-visible { opacity: 1; transform: translateY(0); }
.ticker-hidden  { opacity: 0; transform: translateY(8px); }

/* ---------------------------------------------------------------
   PAGE BANNERS (about, donate, contact, leaderboard)
   --------------------------------------------------------------- */
.page-banner { padding: 4rem 0; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------
   CARDS — global overrides
   --------------------------------------------------------------- */
.card {
    border-radius: var(--alf-radius);
    border: 1px solid rgba(0,0,0,.05);
    transition: var(--alf-transition);
}
.card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.shadow-sm   { box-shadow: var(--alf-shadow) !important; }

/* ---------------------------------------------------------------
   STAT CARDS (Homepage)
   --------------------------------------------------------------- */
.stat-card { transition: transform .25s ease, box-shadow .25s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.stat-number { color: var(--alf-primary); font-size: 2.5rem; }

/* ---------------------------------------------------------------
   ABOUT VISUAL GRID (Homepage)
   --------------------------------------------------------------- */
.about-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-card {
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    color: #fff;
    transition: transform .2s ease;
}
.about-card:hover { transform: scale(1.03); }
.about-card i     { display: block; font-size: 2.5rem; margin-bottom: 10px; }
.about-card p     { margin: 0; font-size: .85rem; opacity: .9; }

.about-card-1 { background: linear-gradient(135deg,#e67e22,#d35400); }
.about-card-2 { background: linear-gradient(135deg,#27ae60,#1a7a44); }
.about-card-3 { background: linear-gradient(135deg,#1a5276,#154360); }
.about-card-4 { background: linear-gradient(135deg,#f39c12,#d68910); }

/* ---------------------------------------------------------------
   DONATE CARDS (Homepage how-to)
   --------------------------------------------------------------- */
.donate-card .donate-icon {
    transition: transform .25s ease;
}
.donate-card:hover .donate-icon { transform: scale(1.1); }

/* ---------------------------------------------------------------
   BUTTONS — global
   --------------------------------------------------------------- */
.btn {
    border-radius: 8px;
    transition: var(--alf-transition);
    font-size: .92rem;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.97); }

/* ---------------------------------------------------------------
   FORMS
   --------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 8px;
    border: 1.5px solid #dee2e6;
    font-size: .92rem;
    padding: .55rem .85rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--alf-primary);
    box-shadow: 0 0 0 .2rem rgba(26,82,118,.18);
}
.input-group-text {
    background: var(--alf-light);
    color: var(--alf-primary);
    border: 1.5px solid #dee2e6;
    border-radius: 8px 0 0 8px;
    font-size: .95rem;
}
.input-group .form-control { border-radius: 0 8px 8px 0; }
.input-group .form-control:not(:last-child) { border-radius: 0; }
.input-group .btn { border-radius: 0 8px 8px 0; }
label.form-label { font-size: .88rem; margin-bottom: .35rem; color: #444; }

/* ---------------------------------------------------------------
   ALERTS
   --------------------------------------------------------------- */
.alert {
    border-radius: 10px;
    border: none;
    font-size: .92rem;
}
.alert-success { background: rgba(39,174,96,.12); color: #1a6b3c; }
.alert-danger  { background: rgba(231,76,60,.1);  color: #922b21; }
.alert-warning { background: rgba(243,156,18,.12);color: #7d6608; }
.alert-info    { background: rgba(26,82,118,.1);  color: var(--alf-primary); }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
footer a:hover {
    color: var(--alf-accent) !important;
    transition: color .15s;
}

/* ---------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------- */
.contact-info-card { transition: var(--alf-transition); }
.contact-info-card:hover { transform: translateY(-4px); }

/* ---------------------------------------------------------------
   ABOUT PAGE — VALUE CARDS
   --------------------------------------------------------------- */
.value-card { transition: var(--alf-transition); }
.value-card:hover {
    transform: translateY(-4px);
    border-left: 4px solid var(--alf-accent) !important;
}

/* ---------------------------------------------------------------
   LEADERBOARD TABLE
   --------------------------------------------------------------- */
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table tbody tr { transition: background .15s; }

/* ---------------------------------------------------------------
   ACCORDION (Contact FAQ)
   --------------------------------------------------------------- */
.accordion-button:not(.collapsed) {
    background: rgba(26,82,118,.07);
    color: var(--alf-primary);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { filter: invert(20%) sepia(80%) saturate(500%) hue-rotate(190deg); }

/* ---------------------------------------------------------------
   AUTH PAGES
   --------------------------------------------------------------- */
.auth-card { border-radius: 16px; overflow: hidden; }

/* ---------------------------------------------------------------
   SPINNER OVERRIDE
   --------------------------------------------------------------- */
.spinner-border-sm { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-section    { min-height: 75vh; }
    .about-visual-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .about-card      { padding: 20px 12px; }
    .about-card i    { font-size: 1.8rem; }
    .stat-number     { font-size: 1.8rem; }
    .section-title   { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .hero-section { min-height: 65vh; }
    .about-visual-grid { grid-template-columns: 1fr 1fr; }
}