/*
==========================================================
THKI DESIGN SYSTEM

VERSION 1.0

STATUS:
FROZEN

Changes from this point forward should be additions,
not redesigns.

==========================================================
*/





/*=========================================================
    1. DESIGN TOKENS
=========================================================*/

:root {

    /*-----------------------------------------------------
        Institutional Colors
    -----------------------------------------------------*/

    --forest:       #294936;
    --gold:         #B08D57;

    --parchment:    #F8F3E8;
    --ivory:        #FFFDF8;

    --walnut:       #5B4636;

    --text:         #2E2E2E;
    --muted:        #666666;

    --border:       #D8CCB5;

    --white:        #FFFFFF;



    /*-----------------------------------------------------
        Layout
    -----------------------------------------------------*/

    --content-width: 1100px;

    --reading-width: 900px;



    /*-----------------------------------------------------
        Spacing
    -----------------------------------------------------*/

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-xxl: 64px;
    --space-xxxl: 96px;



    /*-----------------------------------------------------
        Borders
    -----------------------------------------------------*/

    --radius-sm: 4px;
    --radius: 8px;



    /*-----------------------------------------------------
        Shadows
    -----------------------------------------------------*/

    --shadow-light:

        0 2px 10px rgba(0,0,0,.06);

    --shadow-medium:

        0 6px 20px rgba(0,0,0,.10);

    /*-----------------------------------------------------
        Typography
    -----------------------------------------------------*/

    --font-heading: "Cinzel", serif;

    --font-body: "Source Sans Pro", sans-serif;



    /*-----------------------------------------------------
        Transitions
    -----------------------------------------------------*/

    --transition:

        .25s ease;



    /*-----------------------------------------------------
        Z-Index
    -----------------------------------------------------*/

    --z-header: 1000;

}



/*=========================================================
    2. GLOBAL RESET
=========================================================*/

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}



/*=========================================================
    3. DOCUMENT
=========================================================*/

html {

    scroll-behavior: smooth;

}



body {

    background: var(--ivory);

    color: var(--text);

   font-family: var(--font-body);

    font-size: 20px;

    line-height: 1.8;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}



/*=========================================================
    4. TYPOGRAPHY
=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

   font-family: var(--font-heading);

    color: var(--forest);

    font-weight: 600;

    line-height: 1.25;

    margin-bottom: var(--space-md);

}



h1 {

    font-size: 3rem;

}



h2 {

    font-size: 2.25rem;

}



h3 {

    font-size: 1.75rem;

}



h4 {

    font-size: 1.35rem;

}



p {

    margin-bottom: var(--space-md);

}



a {

    color: var(--forest);

    text-decoration: none;

transition: color var(--transition);

}



a:hover {

    color: var(--gold);

}



/*=========================================================
    5. LAYOUT
=========================================================*/

.container {

    width: min(100%, var(--content-width));

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--space-lg);

    padding-right: var(--space-lg);

}



.reading-width {

    max-width: var(--reading-width);

}



.section {

    padding-top: var(--space-xxxl);

    padding-bottom: var(--space-xxxl);

}

/*=========================================================
    6. HEADER
=========================================================*/

.site-header {

    background: var(--forest);

    color: var(--ivory);

    border-bottom:

        4px solid var(--gold);

}



.header-inner {

    width: min(100%, var(--content-width));

    margin: auto;

    padding:

        var(--space-lg);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-lg);

}



.brand {

    display: flex;

    align-items: center;

    gap: var(--space-lg);

}



.brand img {

    width: 90px;

    height: auto;

}



.brand-text {

    display: flex;

    flex-direction: column;

}



.brand-title {

    font-family: var(--font-heading);

    font-size: 2rem;

    color: var(--ivory);

    letter-spacing: .05em;

    margin: 0;

}



.brand-tagline {

    color: var(--gold);

    font-size: 1rem;

    letter-spacing: .08em;

    margin-top: .25rem;

}



/*=========================================================
    7. PRIMARY NAVIGATION
=========================================================*/

.main-nav {

    background: var(--walnut);

}



.main-nav ul {

    width: min(100%, var(--content-width));

    margin: auto;

    padding: 0;

    list-style: none;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

}



.main-nav li {

    margin: 0;

}



.main-nav a {

    display: block;

    color: var(--ivory);

    padding:

        18px

        22px;

    font-size: 1rem;

    letter-spacing: .04em;

   transition:

    background var(--transition),

    color var(--transition);

}



.main-nav a:hover {

    background: var(--forest);

    color: var(--gold);

}



/*=========================================================
    8. HERO
=========================================================*/

.hero {

    background:

        linear-gradient(
            rgba(41,73,54,.78),
            rgba(41,73,54,.78)
        );



    color: var(--ivory);

    text-align: center;

    padding:

        140px

        20px;

}



.hero h2 {

    color: var(--ivory);

    font-size: 3.5rem;

    margin-bottom: var(--space-lg);

}



.hero p {

    font-size: 1.35rem;

    max-width: 760px;

    margin:

        auto

        var(--space-xl);

}



.hero-buttons {

    display: flex;

    justify-content: center;

    gap: var(--space-md);

    flex-wrap: wrap;

}

/*=========================================================
    9. BUTTONS
=========================================================*/

.btn {

    display: inline-block;

    padding:

        16px
        32px;

    font-size: 1rem;

    font-weight: 600;

    border-radius: var(--radius);

transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);

    cursor: pointer;

}



.btn-primary {

    background: var(--forest);

    color: var(--ivory);

    border: 2px solid var(--forest);

}



.btn-primary:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--ivory);

    transform: translateY(-2px);

}



.btn-secondary {

    background: transparent;

    color: var(--forest);

    border: 2px solid var(--gold);

}



.btn-secondary:hover {

    background: var(--gold);

    color: var(--ivory);

}

/*=========================================================
    19. HERO STATISTICS
=========================================================*/

.hero-stats {

    display: flex;

    justify-content: center;

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

    flex-wrap: wrap;

}

.hero-stat {

    min-width: 180px;

    padding: var(--space-lg);

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.25);

    border-radius: var(--radius);

    text-align: center;

    box-shadow: var(--shadow-light);

}

.hero-stat h3 {

    color: var(--gold);

    margin-bottom: var(--space-sm);

    font-size: 2rem;

}

.hero-stat p {

    color: var(--ivory);

    margin: 0;

}

/*=========================================================
    10. SECTION TITLES
=========================================================*/

.section-title {

    text-align: center;

    margin-bottom: var(--space-xl);

}



.section-title p {

    color: var(--muted);

    max-width: 700px;

    margin:

        auto

        var(--space-lg);

}



/*=========================================================
    11. CARD SYSTEM
=========================================================*/

.card {

    background: var(--white);

    border:

        1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-light);

    padding: var(--space-xl);

transition:

    transform var(--transition),

    box-shadow var(--transition);

}



.card:hover {

    transform:

        translateY(-4px);

    box-shadow:

        var(--shadow-medium);

}



.card h3 {

    margin-bottom: var(--space-md);

}



.card p {

    color: var(--muted);

}



/*=========================================================
    12. GRID
=========================================================*/

.grid {

    display: grid;

    gap: var(--space-xl);

}



.grid-2 {

    grid-template-columns:

        repeat(2,1fr);

}



.grid-3 {

    grid-template-columns:

        repeat(3,1fr);

}



.grid-4 {

    grid-template-columns:

        repeat(4,1fr);

}

/*=========================================================
    13. LISTS
=========================================================*/

ul,
ol {

    margin-left: 1.5rem;

    margin-bottom: var(--space-lg);

}



li {

    margin-bottom: .5rem;

}



/*=========================================================
    14. TABLES
=========================================================*/

table {

    width: 100%;

    border-collapse: collapse;

    margin:

        var(--space-xl)

        0;

}



th {

    background: var(--forest);

    color: var(--ivory);

    text-align: left;

    padding: 16px;

}



td {

    padding: 16px;

    border-bottom:

        1px solid var(--border);

}



tr:nth-child(even) {

    background:

        rgba(0,0,0,.02);

}



/*=========================================================
    15. IMAGES
=========================================================*/

img {

    max-width: 100%;

    height: auto;

}



.figure {

    margin:

        var(--space-xl)

        auto;

    text-align: center;

}



.figure img {

    border-radius: var(--radius);

    box-shadow:

        var(--shadow-light);

}



.figure figcaption {

    color: var(--muted);

    font-size: .9rem;

    margin-top: var(--space-sm);

}


/*=========================================================
    16. FOOTER
=========================================================*/

.site-footer {

    background: var(--forest);

    color: var(--ivory);

    border-top: 4px solid var(--gold);

    margin-top: var(--space-xxxl);

}



.footer-inner {

    width: min(100%, var(--content-width));

    margin: auto;

    padding:

        var(--space-xxl)

        var(--space-lg);

    text-align: center;

}



.footer-title {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    color: var(--ivory);

    margin-bottom: var(--space-sm);

}



.footer-motto {

    color: var(--gold);

    margin-bottom: var(--space-lg);

    letter-spacing: .05em;

}



.footer-copy {

    font-size: .95rem;

    color: rgba(255,255,255,.75);

}



/*=========================================================
    17. UTILITIES
=========================================================*/

.text-center {

    text-align: center;

}



.text-left {

    text-align: left;

}



.text-right {

    text-align: right;

}



.mt-lg {

    margin-top: var(--space-xl);

}



.mb-lg {

    margin-bottom: var(--space-xl);

}



.hidden {

    display: none;

}



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

@media (max-width: 960px) {

    .header-inner {

        flex-direction: column;

        text-align: center;

    }

    .grid-4 {

        grid-template-columns:
            repeat(2,1fr);

    }

    .grid-3 {

        grid-template-columns:
            repeat(2,1fr);

    }

}



@media (max-width: 700px) {

    body {

        font-size: 18px;

    }

    h1 {

        font-size: 2.5rem;

    }

    h2 {

        font-size: 2rem;

    }

    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }

    .hero {

        padding:

            80px

            20px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .main-nav ul {

        flex-direction: column;

    }

    .main-nav a {

        width: 100%;

        text-align: center;

    }

}


/*=========================================================
    TEXT SELECTION
=========================================================*/

::selection {

    background: var(--gold);

    color: var(--ivory);

}

/*=========================================================
    HORIZONTAL RULE
=========================================================*/

hr {

    border: none;

    border-top: 1px solid var(--border);

    margin:

        var(--space-xxl)

        0;

}


/*=========================================================
    BLOCKQUOTE
=========================================================*/

blockquote {

    border-left:

        5px solid var(--gold);

    padding-left:

        var(--space-lg);

    margin:

        var(--space-xl)

        0;

    font-style: italic;

    color: var(--walnut);

}


/*=========================================================
    20. MISSION
=========================================================*/

.mission {

    background: var(--parchment);

}

.mission .container {

    max-width: var(--reading-width);

}

.mission h2 {

    text-align: center;

    margin-bottom: var(--space-lg);

}

.mission .section-intro {

    font-size: 1.25rem;

    line-height: 1.9;

    color: var(--walnut);

    text-align: center;

    margin: 0 auto;

}

/*=========================================================
    21. EDUCATIONAL PATHWAYS
=========================================================*/

.pathways {

    background: var(--ivory);

}

.pathway-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

}

.pathway-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-top: 5px solid var(--gold);

    border-radius: var(--radius);

    padding: var(--space-xl);

    box-shadow: var(--shadow-light);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.pathway-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-medium);

}

.pathway-card h3 {

    color: var(--forest);

    margin-bottom: var(--space-md);

}

.pathway-card p {

    color: var(--muted);

    margin-bottom: var(--space-lg);

}

.learn-more {

    display: inline-block;

    font-weight: 600;

    color: var(--forest);

    transition: color var(--transition);

}

.learn-more:hover {

    color: var(--gold);

}

/*=========================================================
    22. THKI DIFFERENCE
=========================================================*/

.why-thki {

    background: var(--parchment);

}

.feature-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

}

.feature-card {

    background: var(--white);

    border-left: 5px solid var(--forest);

    border-radius: var(--radius);

    padding: var(--space-xl);

    box-shadow: var(--shadow-light);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.feature-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-medium);

}

.feature-card h3 {

    color: var(--forest);

    margin-bottom: var(--space-md);

}

.feature-card p {

    color: var(--muted);

    margin: 0;

}

/*=========================================================
    23. FEATURED COURSES
=========================================================*/

.featured-courses {

    background: var(--ivory);

}

.course-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

}

.course-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-light);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.course-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-medium);

}

.course-card img {

    width: 100%;

    display: block;

}

.course-card-content {

    padding: var(--space-xl);

}

.course-card h3 {

    margin-bottom: var(--space-md);

}

.course-card p {

    color: var(--muted);

}

.status-badge {

    display: inline-block;

    margin-top: 1rem;

    padding: 0.35rem 0.75rem;

    border: 1px solid var(--gold);

    border-radius: 999px;

    background-color: transparent;

    color: var(--gold);

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}
    
/*=========================================================
    24. AI TUTOR
=========================================================*/

.ai-tutor {

    background: var(--forest);

    color: var(--ivory);

}

.ai-tutor h2 {

    color: var(--ivory);

}

.ai-tutor .section-intro {

    color: var(--ivory);

}

.ai-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

}

.ai-grid > div {

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.15);

    border-radius: var(--radius);

    padding: var(--space-xl);

}

.ai-grid h3 {

    color: var(--gold);

}

.ai-grid p {

    color: var(--ivory);

}


/*=========================================================
    25. MEMBERSHIP
=========================================================*/

.membership {

    background: var(--parchment);

}

.membership-highlights {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--space-xl);

    margin-top: var(--space-xxl);

}

.membership-item {

    background: var(--white);

    border-top: 5px solid var(--gold);

    border-radius: var(--radius);

    padding: var(--space-xl);

    text-align: center;

    box-shadow: var(--shadow-light);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.membership-item:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);

}

.membership-item h3 {

    color: var(--forest);

    margin-bottom: var(--space-md);

}

.membership-item p {

    color: var(--muted);

    margin: 0;

}

/*=========================================================
    26. LATEST NEWS
=========================================================*/

.news {

    background: var(--ivory);

}

.news-item {

    max-width: 900px;

    margin:

        var(--space-xxl)

        auto

        0;

    background: var(--white);

    border-left: 5px solid var(--forest);

    border-radius: var(--radius);

    padding: var(--space-xl);

    box-shadow: var(--shadow-light);

}

.news-item h3 {

    color: var(--forest);

    margin-bottom: var(--space-md);

}

.news-item p {

    color: var(--muted);

    margin: 0;

}

/*=========================================================
    27. FOOTER NAVIGATION
=========================================================*/

.footer-nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--space-lg);

    margin:

        var(--space-xl)

        0;

}

.footer-nav a {

    color: var(--ivory);

    font-weight: 600;

    transition: color var(--transition);

}

.footer-nav a:hover {

    color: var(--gold);

}

.footer-seal {

    width: 100px;

    margin:

        0 auto

        var(--space-lg);

}

/*=========================================================
    28. POLISH
=========================================================*/

section {

    scroll-margin-top: 90px;

}

h2 {

    position: relative;

    padding-bottom: var(--space-sm);

}

h2::after {

    content: "";

    display: block;

    width: 80px;

    height: 3px;

    background: var(--gold);

    margin:

        var(--space-sm)

        auto

        0;

    border-radius: 2px;

}

.pathway-card,
.feature-card,
.course-card,
.membership-item,
.news-item {

    overflow: hidden;

}