/* Ensure the viewport is properly set */
html,
body {
    width: 100%;
    overflow-x: hidden;
    font-size: 18px;
    /* Default for large screens */
}

/* Adjust the masthead height for smaller screens */
.masthead {
    height: 375px;
    /* Default height */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .masthead {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .masthead {
        height: 250px;
    }
}

@media (max-width: 576px) {
    .masthead {
        height: 200px;
    }
}

/* Center all paragraph text on smaller screens */
p {
    text-align: left;
}

@media (max-width: 768px) {
    p {
        text-align: center;
    }
}

/* Ensure images scale properly and are centered */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Adjust font size for smaller screens */
@media (max-width: 992px) {
    body {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
}

/* Post Titles and Subtitles Adjustments */
.post-title {
    font-size: 2rem;
    /* Default for large screens */
    font-weight: bold;
}

.post-subtitle {
    font-size: 1.5rem;
    /* Default for large screens */
    font-weight: normal;
}

/* Ensure post-title scales properly */
@media (max-width: 992px) {
    .post-title {
        font-size: 1.75rem !important;
    }

    .post-subtitle {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 768px) {
    .post-title {
        font-size: 1.5rem !important;
    }

    .post-subtitle {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 576px) {

    h2.post-title,
    h3.post-subtitle {
        font-size: 1.25rem !important;
        /* Ensure it gets smaller */
    }
}

/* Remove left padding from ul and ol on smaller screens */
ul,
ol {
    padding-left: 0 !important;
}

/* Adjust layout for smaller screens */
@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }

    /* Center text inside sections */
    .post-preview {
        text-align: center;
    }

    /* Stack columns and increase their width */
    .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .col-3,
    .col-6 {
        width: 100% !important;
        /* Ensure full width when stacked */
        text-align: center;
    }
}

/* Adjustments for very small screens */
@media (max-width: 576px) {
    .site-heading h1 {
        font-size: 1.5rem !important;
        /* Ensure it shrinks */
        line-height: 1.2 !important;
    }

    .site-heading .subheading {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }

    .post-preview h2,
    .post-preview h3 {
        text-align: center;
    }

    #index-text {
        flex: 0 0 90% !important;
        /* Forces full width */
        max-width: 90% !important;
        /* Ensures it expands fully */
    }

    #professional, #little-rock {
        flex: 0 0 40% !important;
        /* Forces full width */
        max-width: 40% !important;
    }

    /* Ensure all columns take full width */
    .col-3,
    .col-6 {
        width: 100% !important;
        text-align: center;
    }

    .post-title {
        font-size: .5rem !important;
    }

    .post-subtitle {
        font-size: .4rem !important;
    }

    #skills-row {
        flex-direction: column;
        /* Stack items */
        align-items: center;
        /* Center align */
        text-align: center;
    }

    #skills-row .col-3 {
        width: 100% !important;
        /* Expand to full width */
        max-width: 100% !important;
    }
}