/* Body setup */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    /* stack nav and images vertically */
    align-items: center;
    /* center content horizontally */
    background-color: #f1eadf;

    margin: 0;
    background-image: url('../images/mobilesign.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 40%;
    /* stretches vertically */
    background-attachment: fixed;
    /* keeps it in place */
}



@media (min-width: 1024px) {
    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        /* stack nav and images vertically */
        align-items: center;
        /* center content horizontally */
        background-color: #f1eadf;

        margin: 0;
        background-image: url('../images/sign.png');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: auto 100%;
        /* stretches vertically */
        background-attachment: fixed;
        /* keeps it in place */
    }
}

/* Nav container: logo above links */
.nav {
    display: flex;
    flex-direction: column;
    /* stack logo above links */
    align-items: center;
    /* center horizontally */
    margin-top: 25px;
    /* spacing from top of page */
    margin-bottom: 50px;
}

.nav a {
    font-family: 'Shelten', sans-serif;
    text-decoration: none;
    color: black;
}

.nav a:visited,
.nav a:hover,
.nav a:active,
.nav a:focus {
    color: black;
    text-decoration: none;
}

.nav-links {
    display: flex;
    /* stack links horizontally or vertically */
    flex-direction: row;
    /* stack vertically for mobile */
    align-items: center;
    /* center links */
    gap: 80px;
    /* small space between buttons */
}

.nav-links h1:nth-child(1),
.nav-links h1:nth-child(2),
.nav-links h1:nth-child(3) {
    justify-self: auto;
    /* default alignment */
    font-size: 20px;
    /* smaller buttons for mobile */
}

@media (min-width: 1024px) {
    .nav-links {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        /* left, center, right */
        column-gap: 300px;
        /* big spacing like your original CSS */
        align-items: center;
    }

    .nav-links h1:nth-child(1) {
        justify-self: end;
    }

    .nav-links h1:nth-child(2) {
        justify-self: center;
    }

    .nav-links h1:nth-child(3) {
        justify-self: start;
    }

    .nav-links h1 {
        font-size: 54px;
        /* restore original size for laptop */
    }

    .nav a {
        font-size: 40px;
    }
}

.logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    /* space between logo and links */
}

.logo img {
    width: 60px;
    /* adjust this to taste */
    height: auto;
}


.container {
    display: flex;
    flex-direction: column;
    /* stack images vertically */
    align-items: center;
    /* center horizontally */
    gap: 30px;
    /* space between images */
    margin-top: 50px;
    /* space below nav */
    width: 90vw;
    /* allow images to scale with viewport */
}

.container img {
    border-radius: 10px;
}

/* Individual images */
.container img {
    max-width: 90%;
    /* don’t exceed container width */
    max-height: 70vh;
    /* each image can fill up to 70% of viewport height */
    height: auto;
    /* preserve original aspect ratio */
    width: 50vh;
    /* preserve original aspect ratio */
    object-fit: contain;
    /* ensure image fits inside box without cropping */
}


/* Images container */
@media (min-width: 1024px) {
    .container {
        display: flex;
        flex-direction: column;
        /* stack images vertically */
        align-items: center;
        /* center horizontally */
        gap: 30px;
        /* space between images */
        margin-top: 50px;
        /* space below nav */
        width: 90vw;
        /* allow images to scale with viewport */
    }

    .container img {
        border-radius: 10px;
    }

    /* Individual images */
    .container img {
        max-width: 70vh;
        /* don’t exceed container width */
        max-height: 70vh;
        /* each image can fill up to 70% of viewport height */
        height: auto;
        /* preserve original aspect ratio */
        width: 50vh;
        /* preserve original aspect ratio */
        object-fit: contain;
        /* ensure image fits inside box without cropping */
    }
}

@font-face {
    font-family: 'Shelten';
    /* name you will use in CSS */
    src: url('../fonts/Shelten.ttf') format('truetype');
    /* path to the .ttf file */
    font-weight: normal;
    font-style: normal;
}


.footer {
    width: 100%;
    /* full screen width */
    display: flex;
    justify-content: center;
    /* center the icons horizontally */
    align-items: center;
    /* vertically center icons */
    gap: 10px;
    /* space between icons */
    padding: 80px 0;
    /* vertical spacing */
    background-color: #fff9f3;
    /* footer background */
    box-sizing: border-box;
    /* include padding in width */
    margin-top: 200px;
    /* optional spacing from content above */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 100;
    font-size: smaller;
}



/* Footer full width */
@media (min-width: 1024px) {
    .footer {
        width: 100%;
        /* full screen width */
        display: flex;
        justify-content: center;
        /* center the icons horizontally */
        align-items: center;
        /* vertically center icons */
        gap: 50px;
        /* space between icons */
        padding: 80px 0;
        /* vertical spacing */
        background-color: #fff9f3;
        /* footer background */
        box-sizing: border-box;
        /* include padding in width */
        margin-top: 200px;
        /* optional spacing from content above */
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: 100;
        font-size: smaller;
    }
}

/* Footer icons */
.footer img {
    width: auto;
    /* use natural width proportionally */
    height: 40px;
    /* keep height consistent */
    object-fit: contain;
    /* maintain aspect ratio */
    transition: transform 0.2s;
}

/* Album promo container */
.promo {
    width: 550px;
    /* set a box width */
    max-width: 90vw;
    /* responsive for smaller screens */
    margin: 40px auto;
    margin-bottom: 0;
    /* center horizontally, space from other content */
    padding: 0px;
    /* inner spacing */
    border-radius: 10px;
    /* rounded corners */
    overflow: hidden;
    /* ensures image respects border-radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
}

/* Album image inside promo */
.promo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* keeps image looking good */
    border-radius: 5px;
}

/* Promo text below the image */
.promotext {
    text-align: center;
    /* center the heading */
    font-family: 'Shelten', sans-serif;
    font-weight: 500;
    font-size: 20px;
    margin-top: 15px;
    /* spacing between image and text */
    color: #000;
    /* black text */
}

h3 {
    margin-top: 0;
}

/* Responsive YouTube video */



.video-container {
    position: relative;
    width: 90%;
    /* adjust to page width */
    max-width: 300px;
    /* optional max width */
    margin: 30px auto;
    /* center horizontally, add spacing */
    padding-bottom: 3%;
    /* 16:9 aspect ratio */
    height: auto;
}

/* Video container box */
.video-container {
    width: 300px;
    /* adjust width */
    height: auto;
    /* adjust height */
    margin: 30px auto;
    /* center horizontally with spacing */
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* Spotify album embed container */
.spotify-promo {
    width: 300px;
    /* match your promo box width */
    max-width: 90vw;
    /* responsive for small screens */
    margin: 30px auto;
    /* center horizontally with spacing */
    border-radius: 10px;
    /* rounded corners */
    overflow: hidden;
    /* ensures iframe respects radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
}

.spotify-promo iframe {
    width: 100%;
    height: 380px;
    /* default Spotify height */
    border: none;
}

@media (min-width: 1024px) {
    .video-container {
        position: relative;
        width: 90%;
        /* adjust to page width */
        max-width: 800px;
        /* optional max width */
        margin: 30px auto;
        /* center horizontally, add spacing */
        padding-bottom: 3%;
        /* 16:9 aspect ratio */
        height: 0;
    }

    /* Video container box */
    .video-container {
        width: 700px;
        /* adjust width */
        height: 450px;
        /* adjust height */
        margin: 30px auto;
        /* center horizontally with spacing */
    }

    .video-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 10px;
    }

    /* Spotify album embed container */
    .spotify-promo {
        width: 700px;
        /* match your promo box width */
        max-width: 90vw;
        /* responsive for small screens */
        margin: 30px auto;
        /* center horizontally with spacing */
        border-radius: 10px;
        /* rounded corners */
        overflow: hidden;
        /* ensures iframe respects radius */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        /* subtle shadow */
    }

    .spotify-promo iframe {
        width: 100%;
        height: 380px;
        /* default Spotify height */
        border: none;
    }
}


/* ------------------------
   Base container
------------------------ */
.contact {
    width: 97%;
    margin: 0 auto; /* centers container */
}

.contact-image-container {
    position: relative; /* relative for overlaying form */
    overflow: hidden;   /* hide any cropped image parts */
}

/* Desktop-first image */
.contact-image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* ------------------------
   Form wrapper (links heading + form)
------------------------ */
.form-wrapper {
    position: absolute;       /* overlay on image */
    top: 50%;                 /* vertically center wrapper */
    right: 10%;               /* desktop: right quarter of image */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;   /* heading stacked above form */
    align-items: flex-start;  /* left-align heading + form */
    z-index: 10;
}

/* ------------------------
   Email Us heading
------------------------ */
.email-us-title {
    position: relative;       /* sits above form naturally */
    font-family: 'Shelten', sans-serif;
    font-size: 35px;
    color: #fffaef;
    margin-bottom: 15px;      /* spacing above form */
}

/* PNG underline */
.email-us-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 10px;
    background: url('images/underline.png') no-repeat center;
    background-size: contain;
}

/* ------------------------
   Form styling
------------------------ */
.contact-form {
    width: 250px; /* default desktop width */
    padding: 25px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: 'Shelten', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    font-family: 'Shelten', sans-serif;
    font-size: 16px;
    color: #5555559d;
}

.contact-form button {
    padding: 8px 26px;
    background: linear-gradient(135deg, #435433, #5A364D);
    color: #fff;
    font-size: 12px;
    font-weight: 100;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* ------------------------
   Mobile layout
------------------------ */
@media (max-width: 1023px) {
    .form-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        align-items: center; /* center heading + form */
    }

    .contact-image-container img {
        width: 200%;               /* double width so left half fills screen */
        height: auto;
        object-fit: cover;          /* crop right side */
        object-position: left center;
    }

    .contact-form {
        width: 90%;
        max-width: 300px;
        background: rgba(255, 255, 255, 0.6);
    }

    .email-us-title {
        font-size: 24px;
        text-align: center;
    }
}

/* ------------------------
   Desktop layout (optional tweaks)
------------------------ */
@media (min-width: 1024px) {
    .contact-image-container img {
        width: 100%;
        height: auto;
    }

    .contact-form {
        width: 250px;
        padding: 25px;
    }

    .email-us-title {
        font-size: 55px;
    }
}