/* ===================================== */
/* =               FONTS               = */
/* ===================================== */
/* Install extra fonts */
@font-face {
    font-family: Figtree-Light;
    src: url('../fonts/Figtree/static/Figtree-Light.ttf');
}

@font-face {
    font-family: Figtree-Bold;
    src: url('../fonts/Figtree/static/Figtree-Bold.ttf');
}

@font-face {
    font-family: Poppins-Semi-Bold;
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf');
}

/* ===================================== */
/* =            SET COLOURS            = */
/* ===================================== */
:root {
    /* Background colours */
    --bg-colour-1: white;
    --bg-colour-2: #e6dad0;
    --bg-colour-3: rgba(244, 236, 230);
    /* Highlight colours */
    --highlight-colour-1: #0050ff;
    /* Text colours */
    --text-colour-1: black;
    --text-colour-2: white;
    /* Transparent */
    --bg-colour-transparent: rgba(255, 255, 255, 0.0);
}

/* ===================================== */
/* =          GENERAL STYLING          = */
/* ===================================== */
/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    zoom: 100%;
}

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    color: black; /* Default text color set to black */
    font-family: Figtree-Light;
}

/* Body layout: flex to support footer at the bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area to grow and push the footer down */
main {
    flex: 1;
    position: relative;
    padding-top: 100px; /* Account for header height */
    display: flex;
    flex-direction: column;
}

/* ===================================== */
/* =          PAGE TRANSITION          = */
/* ===================================== */
/* Default state for main and footer - fully visible */
/* Main and footer start with 0 opacity */
main {
    opacity: 1; /* Start with unhidden content */
    /* opacity: 0; Start with hidden content (NEED THIS IF I WANT .js FADE-IN/FADE-OUT */
    transition: opacity 0.5s ease-in-out; /* Apply smooth transition */
}

/* When fade-in is triggered, opacity becomes 1 */
.fade-in {
    opacity: 1; /* Fully visible */
}

/* When fade-out is triggered, opacity goes back to 0 */
.fade-out {
    opacity: 0; /* Fade out effect */
}

/* ================================================= */
/* =          DEFAULT INTRODUCTION LAYOUT          = */
/* ================================================= */
.page-layout {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    width: calc(100% - 30px - 30px);
    align-self: center;
}

.introduction {
    /* Define sub-grid */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0px 0px;
    grid-template-areas:
        "introduction-title"
        "introduction-text"
        "introduction-buttons";
    justify-self: center;
    align-self: center;
    /* Dimension */
    /* width: 100%; */
    width: calc(100% - 20% - 20%);
    height: auto;
    /* Border */
    margin: 0;
}

.introduction-title {
    justify-self: start;
    align-self: end;
    /* Dimensions */
    /* width: calc(100% - 30% - 30%); */
    width: auto;
    /* Border */
    margin-left: 20px;
}

.introduction-title h1 {
    /* Font things */
    font-family: Poppins-Semi-Bold;
    font-size: 56px;
}

.introduction-text {
    grid-area: introduction-text;
    justify-self: start;
    align-self: start;
    /* Dimensions */
    /* width: 700px; */
    width: 90%;
    /* min-height: 176px; */
    /* Border */
    margin-left: 20px;
    margin-bottom: 10px;
}

.introduction-text p {
    font-family: Figtree-Light;
    font-size: 16px;
    line-height: 1.8em;
    letter-spacing: 0px;
}

.introduction-buttons {
    grid-area: introduction-buttons;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-self: start;
    align-self: center;
    margin-left: 20px;
    padding-bottom: 10px;
}

.download-file-button, .scroll-button {
    /* Appearance */
    background-color: var(--highlight-colour-1);
    border: none;
    border-radius: 100px;
    /* Dimension */
    min-width: 200px;
    min-height: 30px;
    /* Padding */
    /* padding: 0px 100px; */
    /* Alignment */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /* Font */
    font-family: Figtree-Light;
    font-size: 16px;
    color: var(--text-colour-2);
    /* Effect */
    transition: transform 0.2s ease;
}

/* Hover effects */
.download-file-button:hover, .scroll-button:hover {
    transform: scale(1.1);
}

/* ============================================ */
/* =          DEFAULT CONTENT LAYOUT          = */
/* ============================================ */
/* Category blocks */
.category {
    /* Define sub-grid */
    display: flex;
    flex-direction: column;
    /* Alignment */
    justify-content: center;
    align-items: center;
    /* Dimension */
    width: 100%;
    height: auto;
    /* Border */
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* Colour */
    background-color: var(--bg-colour-3);
}

.category-title {
    /* Alignment */
    justify-self: center;
    /* Dimensions */
    width: calc(100% - 20% - 20%);
    height: auto;
    /* Border */
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}

.category-title h2 {
    font-family: Poppins-Semi-Bold;
    font-size: 38px;
}

.category {
    /* Define sub-grid */
    display: flex;
    flex-direction: column;
    /* Alignment */
    justify-content: center;
    align-items: center;
    /* Dimension */
    width: 100%;
    height: auto;
    /* Border */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
    /* Colour */
    background-color: var(--bg-colour-3);
}

/* ============================================== */
/* =          DEFAULT MOBILE PAGE LAYOUT        = */
/* ============================================== */
@media (max-width: 768px) {
    .page-layout {
            width: 100%;
     }

    .introduction {
        width: calc(100% - 20px - 20px);
        /* padding: 0 20px; */
        padding: 0;
        margin-bottom: 0;
        justify-self: start;
        padding-left: 20px;
    }


    .introduction-title {
        /* max-width: 60%; */
        width: 100%;
        margin: 0;
        padding: 0;
        justify-self: start;
        padding-left: 00px;
    }

    .introduction-title h1 {
        font-size: 45px;
    }

    .introduction-text {
        width: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        justify-self: start;
        padding-left: 00px;
    }

    .introduction-buttons {
        width: 100%;
        margin-left: 00px;
        flex-direction: column;
        gap: 10px 0px;
    }

    .introduction-scroll-buttons {
        margin-top: 10px;
        margin-left: 0px;
    }

    /* ===================================== */
    /* =            PAGE CATEGORY          = */
    /* ===================================== */
    .category {
        margin-left: 0;
        margin-right: 0;
        padding: 0px 20px;
    }

    .category-title {
        width: 100%;
        margin-left: 0;
        padding-bottom: 5px;
        padding-left: 0px;
    }

}