/* Assets/css/responsive.css */

/* --- Tablet & Small Laptop (Max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    :root {
        --body-padding: 30px;
    }

    h1,
    .h1 {
        font-size: 28px;
    }

    h2,
    .h2 {
        font-size: 22px;
    }

    h4,
    .h4 {
        font-size: 16px;
    }

    .myinfo {
        max-width: 450px;
    }
}

/* --- Mobile Devices (Max-width: 768px) --- */
@media screen and (max-width: 768px) {
    :root {
        --body-padding: 20px;
    }

    /* Allow page scrolling on mobile */
    body {
        padding: 15px;
    }


    /* --- Header --- */
    header {
        justify-content: center !important;
    }

    header section {
        width: fit-content !important;
    }

    .headlinks {
        margin-left: auto;
    }

    /* Hide 'Welcome' text on small mobile to save space, or style it */
    header section:first-child {
        margin: 0 10px;
    }

    header section:last-child {
        display: none;
    }

    .headlinks>a {
        font-size: 14px;
    }

    /* --- Home Section --- */
    #home {
        flex-direction: column-reverse;
        height: auto;
        justify-content: flex-end;
    }



    /* Image Container */
    .myimage_cntnr {
        height: 500px;
        max-height: 35vh;
        margin-bottom: 30px;
    }

    .myimage {
        height: 100%;
        max-height: 300px;
        width: auto;
    }

    .myimagemask {
        height: 100%;
        max-height: 300px;
        position: absolute;
    }

    /* Text Info */
    .myinfo {
        width: calc(100% - 50px);
    }

    /* --- Skills Section --- */
    .myskill {
        width: 100%;
        overflow: visible;
    }


    /* Ensure Splide slider has enough height on mobile or disable fixed height via JS (handled via CSS overrides if possible, but specific height is set inline by JS) */


    .message_input_cntr {
        width: calc(100% - 50px);
    }

    .footlinks {
        justify-content: center;
    }

    /* --- Footer --- */
    footer {
        flex-direction: column;
    }

    .date {
        display: none;
    }
}

/* --- Small Mobile (Max-width: 400px) --- */
@media screen and (max-width: 400px) {
    .headlinks>a {
        margin: 0 10px;
        font-size: 12px;
    }
}