/* ==========================================================
   LAEC THEME.CSS
   Single Source of Truth for Branding, Typography,
   Colors, Contrast, Forms, Buttons, Tables, and Footer
   Version 2.1
========================================================== */


/* ==========================================================
   1. BRAND VARIABLES
========================================================== */

:root{

    --laec-green-900:#0f4a1e;
    --laec-green-800:#145624;
    --laec-green-700:#17652a;
    --laec-green-600:#2e7d32;
    --laec-green-500:#3d9142;
    --laec-green-100:#eaf4eb;
    --laec-green-050:#f5faf5;

    --laec-gold-600:#c89a3d;
    --laec-gold-400:#e3b852;
    --laec-gold-200:#f5d77f;

    --laec-white:#ffffff;
    --laec-cream:#f7f5ee;

    --laec-ink:#1f2933;
    --laec-text:#334155;
    --laec-muted:#64748b;
    --laec-line:#dce5dd;

    --laec-success:#1f7a3d;
    --laec-warning:#a66b00;
    --laec-danger:#b3261e;
    --laec-info:#315f8c;

    --laec-shadow-sm:
        0 4px 16px rgba(15,74,30,.08);

    --laec-shadow-md:
        0 10px 30px rgba(15,74,30,.12);

    --laec-shadow-lg:
        0 18px 50px rgba(15,74,30,.16);

    --laec-radius-sm:10px;
    --laec-radius-md:16px;
    --laec-radius-lg:22px;
    --laec-radius-pill:999px;

    --laec-font-heading:"Merriweather",Georgia,serif;
    --laec-font-body:"Inter",Arial,sans-serif;

    --laec-transition-fast:.18s ease;
    --laec-transition:.28s ease;

}


/* ==========================================================
   2. BASE TYPOGRAPHY
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--laec-font-body);
    color:var(--laec-text);
    background:var(--laec-cream);
    line-height:1.75;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--laec-green-900);
    font-family:var(--laec-font-heading);
    line-height:1.25;
}

h1{
    font-weight:700;
}

h2{
    color:var(--laec-green-700);
}

h3{
    color:var(--laec-green-800);
}

p{
    color:var(--laec-text);
}

small,
.text-muted{
    color:var(--laec-muted)!important;
}

strong{
    color:inherit;
}


/* ==========================================================
   3. LINKS
========================================================== */

a{
    color:var(--laec-green-700);
    text-decoration:none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

a:hover{
    color:var(--laec-green-900);
    text-decoration:underline;
}

a:focus-visible{
    outline:3px solid var(--laec-gold-200);
    outline-offset:3px;
    border-radius:4px;
}


/* ==========================================================
   4. STANDARD NAVBAR
========================================================== */

.navbar{
    background:var(--laec-green-900);
    box-shadow:
        0 4px 18px rgba(0,0,0,.10);
}

.navbar.navbar-scrolled{
    background:#0b3c18;
    box-shadow:
        0 8px 24px rgba(0,0,0,.18);
}

.navbar-toggler{
    border-color:rgba(255,255,255,.45);
}

.navbar-toggler:focus{
    box-shadow:
        0 0 0 .2rem rgba(245,215,127,.28);
}

.navbar-brand{
    color:var(--laec-white)!important;
    font-weight:700;
}

.navbar-brand:hover{
    color:var(--laec-white)!important;
    text-decoration:none;
}

.navbar-brand .logo,
.navbar-brand img{
    max-height:48px;
    width:auto;
}

.navbar .nav-link{
    color:rgba(255,255,255,.94)!important;
    font-weight:600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{
    color:var(--laec-gold-200)!important;
}

.navbar .dropdown-menu{
    border:0;
    border-radius:var(--laec-radius-sm);
    box-shadow:var(--laec-shadow-md);
    transform:translateY(-3px);
}

.navbar .dropdown-item{
    color:var(--laec-text);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
    color:var(--laec-green-900);
    background:var(--laec-green-100);
}


/* ==========================================================
   5. STANDARD HERO SECTIONS
========================================================== */

.page-hero,
.legal-hero,
.hero{
    background:
        linear-gradient(
            135deg,
            #0b3c18 0%,
            var(--laec-green-900) 45%,
            var(--laec-green-700) 100%
        );

    color:var(--laec-white);
    padding:120px 0 70px;
}

.page-hero h1,
.legal-hero h1,
.hero h1{
    color:var(--laec-white)!important;
    font-size:clamp(2.25rem,5vw,4rem);
    font-weight:700;
    text-shadow:
        0 2px 8px rgba(0,0,0,.28);
}

.page-hero p,
.legal-hero p,
.hero p,
.page-hero .lead,
.legal-hero .lead,
.hero .lead{
    color:rgba(255,255,255,.94)!important;
    font-size:1.1rem;
}

.page-hero .gold-label,
.page-hero .eyebrow,
.page-hero .text-uppercase,
.legal-hero .gold-label,
.legal-hero .eyebrow,
.legal-hero .text-uppercase,
.hero .gold-label,
.hero .eyebrow,
.hero .text-uppercase{
    color:var(--laec-gold-200)!important;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}


/* ==========================================================
   6. SECTION HEADINGS
========================================================== */

.section-label,
.gold-label,
.admin-eyebrow,
.learner-eyebrow{
    color:var(--laec-gold-600);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.section-title{
    color:var(--laec-green-700);
    font-family:var(--laec-font-heading);
}

.section-subtitle{
    color:var(--laec-muted);
}


/* ==========================================================
   7. STANDARD CARDS
========================================================== */

.theme-card,
.framework-card,
.knowledge-card,
.k-card,
.course-card,
.legal-shell,
.form-card{
    background:var(--laec-white);
    border:1px solid var(--laec-line);
    border-radius:var(--laec-radius-md);
    box-shadow:var(--laec-shadow-sm);
}

.theme-card:hover,
.framework-card:hover,
.knowledge-card:hover,
.k-card:hover,
.course-card:hover{
    box-shadow:var(--laec-shadow-md);
}

.card-title,
.theme-card h3,
.theme-card h4{
    color:var(--laec-green-800);
}


/* ==========================================================
   8. BUTTONS
========================================================== */

.btn-success,
.btn-primary,
.portal-btn.primary,
.btn-register,
.learner-primary-btn,
.btn-primary-form{
    background:var(--laec-green-600)!important;
    border-color:var(--laec-green-600)!important;
    color:var(--laec-white)!important;
}

.btn-success:hover,
.btn-primary:hover,
.portal-btn.primary:hover,
.btn-register:hover,
.learner-primary-btn:hover,
.btn-primary-form:hover{
    background:var(--laec-green-800)!important;
    border-color:var(--laec-green-800)!important;
    color:var(--laec-white)!important;
}

.btn-outline-success{
    color:var(--laec-green-700)!important;
    border-color:var(--laec-green-700)!important;
}

.btn-outline-success:hover{
    background:var(--laec-green-700)!important;
    color:var(--laec-white)!important;
}

.btn-secondary-form,
.portal-btn.secondary,
.btn-login{
    background:var(--laec-white);
    color:var(--laec-green-800);
    border:1px solid var(--laec-line);
}

.btn-secondary-form:hover,
.portal-btn.secondary:hover,
.btn-login:hover{
    background:var(--laec-green-100);
    color:var(--laec-green-900);
    border-color:var(--laec-green-600);
}

.btn,
.portal-btn,
.btn-register,
.btn-login,
.btn-primary-form,
.btn-secondary-form{
    border-radius:var(--laec-radius-pill);
    font-weight:700;
    transition:
        background-color var(--laec-transition),
        border-color var(--laec-transition),
        color var(--laec-transition),
        transform var(--laec-transition),
        box-shadow var(--laec-transition);
}

button:focus-visible,
.btn:focus-visible{
    outline:3px solid var(--laec-gold-200);
    outline-offset:3px;
}


/* ==========================================================
   9. FORMS
========================================================== */

.form-label{
    color:var(--laec-text);
    font-weight:700;
}

.form-control,
.form-select{
    border:1px solid var(--laec-line);
    border-radius:12px;
    color:var(--laec-text);
    background:var(--laec-white);
}

.form-control:focus,
.form-select:focus{
    border-color:var(--laec-green-600);
    box-shadow:
        0 0 0 .22rem rgba(46,125,50,.14);
}

.form-check-input:checked{
    background-color:var(--laec-green-600);
    border-color:var(--laec-green-600);
}

.form-control::placeholder{
    color:#8a948c;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled{
    background:#f2f5f2;
    color:#5f6961;
    opacity:1;
}

.required{
    color:var(--laec-danger);
}


/* ==========================================================
   10. INFO AND STATUS BOXES
========================================================== */

.status,
.form-status,
.status-message{
    border:1px solid transparent;
    border-radius:12px;
    padding:12px 14px;
}

.info-box,
.legal-meta{
    background:var(--laec-green-100);
    border-left:4px solid var(--laec-green-600);
    color:var(--laec-text);
}

.notice,
.legal-note{
    background:#fff8e5;
    border:1px solid #ead38a;
    color:#57420a;
}

.status.success,
.form-status.success,
.status-message.success{
    background:#e8f5ec;
    color:var(--laec-success);
    border-color:#bfe3c9;
}

.status.error,
.form-status.error,
.status-message.error{
    background:#fbecea;
    color:var(--laec-danger);
    border-color:#efc4bf;
}

.status.warning,
.form-status.warning,
.status-message.warning{
    background:#fff8e5;
    color:var(--laec-warning);
    border-color:#ead38a;
}

.status.info,
.form-status.info,
.status-message.info{
    background:#eef4fb;
    color:var(--laec-info);
    border-color:#cadcf0;
}


/* ==========================================================
   11. TABLES
========================================================== */

table{
    color:var(--laec-text);
}

thead{
    background:var(--laec-green-100);
}

thead th{
    color:var(--laec-green-900);
    font-weight:700;
    border-bottom:2px solid var(--laec-line);
}

tbody tr:hover{
    background:var(--laec-green-050);
}


/* ==========================================================
   12. FOOTER
========================================================== */

.site-foot,
.footer-section,
.legal-footer{
    background:var(--laec-green-900);
    color:var(--laec-white);
}

.site-foot,
.footer-section,
.legal-footer{
    border-top:4px solid var(--laec-gold-600);
}

.site-foot{
    padding:60px 0 30px;
    margin-top:80px;
}

.site-foot h4,
.site-foot h5,
.site-foot h6,
.footer-section h4,
.footer-section h5,
.footer-section h6,
.legal-footer h4,
.legal-footer h5,
.legal-footer h6{
    color:var(--laec-white)!important;
}

.site-foot p,
.footer-section p,
.legal-footer p{
    color:rgba(255,255,255,.92)!important;
}

.site-foot a,
.footer-section a,
.legal-footer a{
    color:#e6f6e8;
}

.site-foot a:hover,
.footer-section a:hover,
.legal-footer a:hover{
    color:var(--laec-white);
}

.site-foot hr,
.footer-section hr,
.legal-footer hr{
    border-color:rgba(255,255,255,.18);
}


/* ==========================================================
   13. ADMIN AND LEARNER BRAND COMPATIBILITY
========================================================== */

.admin-page,
.learner-page,
.learner-auth-page{
    font-family:var(--laec-font-body);
    color:var(--laec-text);
}

.admin-topbar h1,
.admin-page-head h2,
.learner-topbar h1,
.learner-page-head h2{
    font-family:var(--laec-font-heading);
}

.admin-sidebar,
.learner-sidebar{
    background:var(--laec-green-900);
    color:var(--laec-white);
}

.admin-side-link,
.learner-side-link{
    color:rgba(255,255,255,.90);
}

.admin-side-link:hover,
.admin-side-link.active,
.learner-side-link:hover,
.learner-side-link.active{
    color:var(--laec-white);
    background:rgba(255,255,255,.12);
}


/* ==========================================================
   14. ACCESSIBILITY AND CONTRAST
========================================================== */

::selection{
    background:var(--laec-gold-200);
    color:var(--laec-green-900);
}

:focus-visible{
    outline:3px solid var(--laec-gold-200);
    outline-offset:3px;
}

.text-success{
    color:var(--laec-green-700)!important;
}

.bg-success{
    background-color:var(--laec-green-600)!important;
}

.text-warning{
    color:#8a5b00!important;
}

.bg-warning{
    background-color:var(--laec-gold-400)!important;
}

.text-danger{
    color:var(--laec-danger)!important;
}


/* ==========================================================
   15. CONTRAST FIXES FOR DARK BACKGROUNDS
========================================================== */

.bg-success h1,
.bg-success h2,
.bg-success h3,
.bg-success h4,
.bg-success h5,
.bg-success h6,

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,

.course-panel h1,
.course-panel h2,
.course-panel h3,

.cc-band h1,
.cc-band h2,
.cc-band h3,
.cc-band h4,

.admin-modal-header h1,
.admin-modal-header h2,

.learner-auth-navbar h1,
.learner-auth-navbar h2{
    color:var(--laec-white)!important;
}

.bg-success p,
.bg-dark p,
.course-panel p,
.cc-band p{
    color:rgba(255,255,255,.92)!important;
}


/* ==========================================================
   16. LEGAL PAGES
========================================================== */

.legal-shell{
    max-width:940px;
    margin:-2rem auto 3rem;
    padding:2rem;
}

.legal-shell h2{
    color:var(--laec-green-700);
    margin-top:2rem;
}

.legal-shell h3{
    color:var(--laec-green-800);
    margin-top:1.25rem;
}

.legal-shell p,
.legal-shell li{
    color:var(--laec-text);
    line-height:1.75;
}


/* ==========================================================
   17. REDUCED MOTION SUPPORT
========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

}


/* ==========================================================
   18. RESPONSIVE ADJUSTMENTS
========================================================== */

@media(max-width:991px){

    .page-hero,
    .legal-hero,
    .hero{
        padding:100px 0 55px;
    }

    .navbar-brand span{
        font-size:.95rem;
    }

}

@media(max-width:767px){

    .page-hero h1,
    .legal-hero h1,
    .hero h1{
        font-size:2.25rem;
    }

    .legal-shell{
        margin:-1rem 1rem 2rem;
        padding:1.35rem;
    }

    .site-foot{
        text-align:center;
    }

}

/* ==========================================================
   19. HOME PAGE HERO AND NAVBAR FIXES
   Explicit selectors for index.html
========================================================== */

.hero-section{
    color:var(--laec-white);
}

.hero-section .hero-overlay{
    background:
        linear-gradient(
            rgba(8,45,20,.72),
            rgba(5,24,10,.74)
        );
}

.hero-section .hero-content{
    color:var(--laec-white);
}

.hero-section .hero-content h1{
    color:var(--laec-white)!important;
    text-shadow:
        0 3px 12px rgba(0,0,0,.68);
}

.hero-section .hero-subtitle{
    color:var(--laec-gold-200)!important;
    text-shadow:
        0 2px 8px rgba(0,0,0,.50);
}

.hero-section .hero-tagline,
.hero-section .hero-description{
    color:rgba(255,255,255,.97)!important;
    text-shadow:
        0 2px 8px rgba(0,0,0,.58);
}

.hero-section .scroll-indicator a{
    color:var(--laec-white)!important;
}

.hero-section .scroll-indicator a:hover{
    color:var(--laec-gold-200)!important;
}


/* Public navigation over the home hero */

header .navbar,
.navbar.fixed-top{
    background:rgba(15,74,30,.97)!important;
}

header .navbar.navbar-scrolled,
.navbar.fixed-top.navbar-scrolled{
    background:#0b3c18!important;
}

.navbar-brand,
.navbar-brand span{
    color:var(--laec-white)!important;
}

.navbar .nav-link{
    color:rgba(255,255,255,.96)!important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .show > .nav-link{
    color:var(--laec-gold-200)!important;
}

.navbar .dropdown-toggle::after{
    color:currentColor;
}

.navbar-toggler-icon{
    filter:invert(1) grayscale(1) brightness(2);
}


/* Home hero buttons */

.hero-section .btn-success{
    background:var(--laec-green-600)!important;
    border-color:var(--laec-green-600)!important;
    color:var(--laec-white)!important;
}

.hero-section .btn-success:hover{
    background:var(--laec-green-800)!important;
    border-color:var(--laec-green-800)!important;
}

.hero-section .btn-outline-light{
    color:var(--laec-white)!important;
    border-color:rgba(255,255,255,.92)!important;
    background:rgba(0,0,0,.10);
}

.hero-section .btn-outline-light:hover{
    color:var(--laec-green-900)!important;
    background:var(--laec-white)!important;
    border-color:var(--laec-white)!important;
}


/* ==========================================================
   20. EXTRA DARK-BACKGROUND CONTRAST
========================================================== */

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.page-hero h1,
.page-hero h2,
.legal-hero h1,
.legal-hero h2{
    color:var(--laec-white)!important;
}

.hero-section p,
.page-hero p,
.legal-hero p{
    color:rgba(255,255,255,.95)!important;
}


/* ==========================================================
   21. MOBILE HOME HERO
========================================================== */

@media(max-width:767px){

    .hero-section .hero-content h1{
        font-size:clamp(2.15rem,10vw,3rem);
    }

    .hero-section .hero-tagline{
        font-size:1.1rem;
    }

    .hero-section .hero-description{
        font-size:1rem;
    }

}