@font-face
{
  font-family: 'DepartureMono';
  src: url('../Fonts/DepartureMono-1.500/DepartureMono-Regular.otf'); /* Correct path from CSS folder */
  font-weight: normal;
  font-style: normal;
}

/* ========================== */
/* Variables & Base Styles    */
/* ========================== */

:root
{
    /* Background colors */
    --backgroundColor: #E6C69E;

    /* Text and UI Colors */
    --titleColor: #000000;
    --textColor: #000000;
    --lightText: #030202; /* Used for footer divider */
    --linkColor: #695100;
    --link-hover: #ff5e00;

    /* Font Size Variables */
    --base-font-size: 24px;
    --h1-font-size: 4rem;
    --h2-font-size: 2.5rem;

    /* Position variables for About section */
    --about-image-margin-top: 0;
    --about-image-margin-left: 5rem;

    /* Border Radius */
    --border-radius: 12px;
}

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    background: var(--backgroundColor);
    font-family: DepartureMono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace/*'Courier New', monospace*/;
    color: var(--textColor);
    line-height: 1.6;
    font-size: var(--base-font-size);
    max-width: 90%;
    margin: 0 auto;
    padding: 2rem 1rem;

    /* Flexbox layout for sticky footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========================== */
/* Typography                 */
/* ========================== */

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 1rem;
    font-weight: normal;
    color: #000000;
}

h1
{
    font-size: var(--h1-font-size);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

h2
{
    font-size: var(--h2-font-size);
}

p
{
    margin-bottom: 1rem;
}

/* ========================== */
/* Links                      */
/* ========================== */

a
{
    color: var(--linkColor);
    text-decoration: none;
    border-bottom: 1px solid var(--linkColor);
    transition: all 0.2s ease;
}

a:hover
{
    border-bottom: none;
    color: var(--link-hover);
}

/* ========================== */
/* Header and Navigation      */
/* ========================== */

header
{
    margin-bottom: 1.5rem;
    display: flex; /* Use Flexbox */
    /* Changed from flex-start to space-between */
    justify-content: space-between; /* Pushes title left, nav right */
    align-items: baseline; /* Align items based on their text baseline */
    gap: 2rem; /* Add space between title and nav (effective if wrapping) */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.site-title
{
    font-size: 1.2rem;
    /* flex-shrink: 1; /* Less critical with space-between, but harmless */
}

.site-title a
{
    border-bottom: none;
    color: var(--titleColor);
}

.site-title a:hover
{
    color: var(--link-hover);
}

nav ul
{
    list-style: none;
    display: flex;
    gap: 2rem;
    padding-left: 0;
    flex-wrap: wrap;
}

nav ul li a
{
    border-bottom: none;
}

nav ul li a:hover
{
    border-bottom: 1px solid var(--linkColor);
}


/* Main Content Sections      */


main
{
    margin-bottom: 2rem;
    flex: 1;
}

section
{
    margin: 4rem 0;
    padding: 1rem 0;
}

.hero
{
    text-align: center;
    margin: 3rem 0;
}

.tagline
{
    margin-top: 0.5rem;
    color: #000000;
}

/* Links Section Alignment */
.links
{
    text-align: center;
    margin: 2rem 0;
}

.links a
{
    margin: 0 0.5rem;
    border-bottom: none;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
}

.links a:hover
{
    border-bottom: none;
}


/* About Section Styling      */


.about-section
{
    margin-top: 50vh;
    padding-top: 2rem;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.about-text-content
{
    flex: 1;
    max-width: 65%;
}

.profile-image-container
{
    width: 360px;
    flex-shrink: 0;
    margin-top: var(--about-image-margin-top);
    margin-left: var(--about-image-margin-left);
}

.profile-image
{
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
}

/* ========================== */
/* Footer                     */
/* ========================== */

footer
{
    text-align: center;
    margin-top: auto;
    padding: 1rem 0;
}

.footer-divider
{
    width: 100%;
    margin: 1rem auto 2rem auto;
    border: none;
    height: 1px;
    background-color: var(--lightText);
    opacity: 0.7;
}

/* ========================== */
/* Responsive Adjustments     */
/* ========================== */

@media (max-width: 768px)
{
    body
    {
        max-width: 95%;
        font-size: calc(var(--base-font-size) * 0.85);
        padding: 1rem 0.5rem;
    }

    h1
    {
        font-size: calc(var(--h1-font-size) * 0.7);
    }

    h2
    {
        font-size: calc(var(--h2-font-size) * 0.8);
    }

    header
    {
        gap: 1rem;
        align-items: center;
        /* justify-content: space-between; will still apply */
    }

    nav ul
    {
        gap: 2rem;
        justify-content: flex-end; /* Align wrapped nav items to the right */
    }

    .links a
    {
        margin: 0.3rem 0.3rem;
        display: inline-block;
    }

    .about-section
    {
        flex-direction: column;
        align-items: center;
        margin-top: 5rem;
        min-height: auto;
        gap: 2rem;
    }

    .about-text-content
    {
        max-width: 100%;
        order: 2;
        text-align: left;
    }

    .profile-image-container
    {
        order: 1;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        width: 70%;
        max-width: 300px;
    }
}