/* TruthTrail Main Stylesheet */

:root {

    --forest: #4b6548;
    --sage: #8a9a78;
    --tan: #d8c39a;
    --parchment: #f7f1e5;
    --cream: #fbf8f1;
    --brown: #594735;
    --charcoal: #292929;
    --white: #ffffff;

    --shadow: 0 12px 30px rgba(0,0,0,.12);

}


/* RESET */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--charcoal);
    background: var(--cream);

}


img {

    max-width: 100%;
    height: auto;

}


.container {

    width: 90%;
    max-width: 1180px;
    margin: 0 auto;

}



/* TYPOGRAPHY */

h1,
h2,
h3,
h4 {

    font-family: 'Playfair Display', serif;
    color: var(--brown);
    line-height: 1.25;

}


h1 {

    font-size: 3.4rem;
    font-weight: 700;
    letter-spacing: -.5px;

}


h2 {

    font-size: 2.1rem;
    margin-bottom: 1.5rem;

}


h3 {

    font-size: 1.45rem;
    margin-bottom: 1rem;

}


p {

    max-width: 760px;

}



/* HEADER */

.header {

    background: var(--forest);
    padding: 14px 0;
    position: relative;
    z-index: 1000;

}


.nav-container {

    display: flex;
    justify-content: space-between;
    align-items: center;

}


/* LOGO */

.logo img {

    height: 75px;
    width: auto;
    display: block;

}


.logo a {

    display: flex;
    align-items: center;
    text-decoration: none;

}


/* NAVIGATION */

.navigation ul {

    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;

}


.navigation a {

    color: var(--white);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .2px;
    transition: color .3s ease;

}


.navigation a:hover {

    color: var(--tan);

}



/* DROPDOWN */

.dropdown {

    position: relative;

}


.dropdown ul {

    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    width: 230px;
    background: var(--white);
    padding: 12px 0;
    border-radius: 8px;
    box-shadow: var(--shadow);

}


.dropdown:hover ul {

    display: block;

}


.dropdown li {

    padding: 8px 20px;

}


.dropdown li a {

    color: var(--brown);
    font-size: .9rem;

}


.dropdown li a:hover {

    color: var(--forest);

}

.dropdown:last-child ul,
.dropdown:nth-last-child(2) ul {

    left:auto;
    right:0;

}



/* HERO */

.hero {

    min-height: 650px;

    background:

    linear-gradient(
        rgba(55,75,50,.55),
        rgba(55,75,50,.75)
    ),

    url('truthtrail-hero.jpg');

    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;

}


.hero-content {

    color: var(--white);
    max-width: 780px;
    animation: fadeIn 1s ease;

}


.hero h1 {

    color: var(--white);
    font-size: 3.5rem;
    margin-bottom: 15px;

}


.hero h2 {

    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: 20px;

}


.hero p {

    color: var(--white);
    font-size: 1.05rem;

}



/* BUTTONS */

.buttons {

    margin-top: 28px;

}


.btn {

    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .2px;
    margin-right: 12px;
    transition: all .3s ease;

}


.primary {

    background: var(--tan);
    color: var(--brown);

}


.primary:hover {

    background: var(--white);
    transform: translateY(-2px);

}


.outline {

    border: 2px solid var(--white);
    color: var(--white);

}


.outline:hover {

    background: var(--white);
    color: var(--forest);

}



/* INTRO */

.intro {

    padding: 75px 0;
    text-align: center;

}


.intro p {

    margin: 20px auto;

}



/* PATHWAYS */

.pathways {

    background: var(--parchment);
    padding: 75px 0;

}


.pathways h2 {

    text-align: center;

}


.cards {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 40px;

}


.card {

    background: var(--white);
    padding: 35px;
    border-radius: 14px;
    border-top: 4px solid var(--sage);
    box-shadow: 0 5px 15px rgba(0,0,0,.05);
    transition: transform .3s ease, box-shadow .3s ease;

}


.card:hover {

    transform: translateY(-7px);
    box-shadow: var(--shadow);

}


.card a {

    color: var(--forest);
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;

}


.card a:hover {

    color: var(--brown);

}



/* MISSION */

.mission {

    background: var(--forest);
    color: var(--white);
    padding: 75px 0;
    text-align: center;

}


.mission h2 {

    color: var(--white);

}


.mission p {

    margin: 20px auto;

}



/* FOOTER */

footer {

    background: #334333;
    color: var(--white);
    padding: 25px 0;
    text-align: center;
    font-size: .72rem;
    line-height: 1.6;

}


footer .container {

    max-width: 900px;

}


footer p {

    max-width: 850px;
    margin: 0 auto;
    color: var(--white);

}


footer a,
footer p a {

    color: var(--tan);
    text-decoration: none;
    font-weight: 500;
    transition: color .3s ease, opacity .3s ease;

}


footer a:hover,
footer p a:hover {

    color: var(--white);
    text-decoration: underline;

}


footer .copyright {

    margin-top: 12px;
    font-size: .65rem;
    color: rgba(255,255,255,.75);

}



/* PAGE HERO (internal pages) */

.page-hero {

    width: 100%;

}


.page-hero-image {

    width: 100%;
    height: 315px;
    max-height: 37vw;
    background-size: cover;
    background-position: center;
    background-color: var(--sage);

}



/* PAGE CONTENT (internal pages) */

.page-content {

    padding: 65px 0;

}


.page-content h1 {

    font-size: 2.4rem;
    margin-bottom: 25px;

}


.page-content p {

    margin-bottom: 20px;
    font-size: 1.05rem;

}


@media(max-width:600px) {

    .page-hero-image {

        height: 180px;

    }


    .page-content {

        padding: 40px 0;

    }


    .page-content h1 {

        font-size: 1.8rem;

    }

}



/* ANIMATION */

@keyframes fadeIn {

    from {

        opacity: 0;
        transform: translateY(20px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}



/* RESPONSIVE */

@media(max-width:900px) {


    .nav-container {

        flex-direction: column;

    }


    .navigation ul {

        flex-direction: column;
        gap: 15px;
        margin-top: 20px;

    }


    .dropdown ul {

        position: static;
        width: 100%;
        box-shadow: none;

    }


    .dropdown:hover ul {

        display: block;

    }


    .hero {

        min-height: 550px;

    }


    .hero h1 {

        font-size: 2.6rem;

    }


    .cards {

        grid-template-columns: 1fr;

    }


}



@media(max-width:600px) {


    body {

        font-size: 15px;

    }


    h2 {

        font-size: 1.8rem;

    }


    .hero h1 {

        font-size: 2.2rem;

    }


    .btn {

        display: block;
        width: max-content;
        margin-bottom: 12px;

    }


}