/*========== GENERAL ==========*/
:root {
    --forestgreen: #335043;
    --darkgreen: #1D342A;
    --darkergreen: #13231e;
    --coral: #C45424;
    --warm-cream: #F9F8F6;
    --cream-green: #E8ECE6;
    --gold: #e0a96d;

    --lightpurple: #f3ecfd;
    --purple: #8476a9;
    --darkpurple: #6d44f8;
    --darkerpurple: #4d32c2;
    --darkestpurple: #20144b;
    --white: #ffffff;
    --blue: #0063B2;
    --darkerblue: #014f8f;
    --lightblue:#9CC3D5;
    --lighterblue:#e7f5fb;
    --lightestblue:#f8fdfe;
    --red: #f0013d;
    --lightred: #fbecec;
    --teal: #80e1e0;
}

/*========== ELEMENT STYLING ==========*/
html, body {
    height: 100%;
    margin: 0;
    font-size: 18px;
    color: var(--warm-cream);
    background-color: var(--forestgreen);
    line-height: 1.2;
    cursor: default;
    font-family: "Montserrat","Playfair Display", serif;
}

h1 {
    font-family: "Playfair Display", serif;
}

/*========== TEXT COLORS ==========*/
.text-forest {
    color: var(--darkergreen);
}

.text-forest-cream {
    color: var(--cream-green);
}

.bg-cream {
    background-color: var(--warm-cream);
}

.bg-forest {
    background-color: var(--darkgreen);
}

.text-gold {
    color: var(--gold);
}

/*========== BORDER COLORS ==========*/
.border-gold {
    border-color: var(--gold) !important;
}

/*========== BUTTONS ==========*/
.bg-gold { background-color: var(--gold) !important; }

.btn-terracotta {
    background-color: var(--coral);
    color: var(--warm-cream);
    border: none;
    transition: all 0.25s ease;
}
.btn-terracotta:hover {
    color: var(--warm-cream);
    background-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(238, 131, 84, 0.3) !important;
}

.btn-terracotta:active {
    background-color: var(--coral) !important;
}

.btn-forest {
    background-color: var(--forestgreen);
    color: var(--warm-cream);
    border: none;
}
.btn-forest:hover {
    background-color: var(--darkgreen);
    color: var(--warm-cream);
}

.btn-outline-forest {
    border: 1px solid var(--forestgreen);
    color: var(--forestgreen);
}
.btn-outline-forest:hover {
    background-color: var(--forestgreen);
    color: var(--warm-cream);
}

/* Hover Subtle Lift Effect for Cards */
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.btn-solid {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2) !important;
}

/*========== HEADER ==========*/
.header-container {
    background-color: var(--darkergreen);
}

.navbar-nav .nav-link {
    color: var(--white);
    font-size: 1rem;
    height: 100%;
    vertical-align: center;
    display: grid;
    text-align: center;
}

.navbar-brand,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--coral);
}

.navbar-brand:hover {
    color: var(--white);
}

/*========== FOOTER ==========*/
.footer-container {
    padding: 15px;
    color: var(--white);
    background-color: var(--darkergreen);
    position: sticky;
    bottom: 0;
    width: 100%;
}

.footer-container .text_small {
    font-size: 0.7rem;
}

.footer-container .icons {
    font-size: 1.3rem;
}

.footer-container .container {
    max-width: unset;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
}

.laura-photo {
    max-height: 380px;
    object-fit: cover;
    object-position: top center;
}

.home-page-logo {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.home-page-header {
    font-size: 1.25rem;
}

@media (min-width: 992px) {
    .navbar-nav .nav-link {
        position: relative;
        transition: color 0.2s ease-in-out;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar-nav .nav-item {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .navbar-nav .nav-item:last-child {
        border-right: none;
    }

    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 2px;
        left: 50%;
        background-color: var(--coral);
        transition: all 0.25s ease-in-out;
        transform: translateX(-50%);
    }

    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after {
        width: 75%;
    }
}

.brand-badge svg {
    width: 50px;
    height: 43px;
    fill: var(--forestgreen);
}