html, body{
            background: #606c38; 
            color: white;
            margin: 0;
            padding:0;
            height: 100%;
            display: flex; 
            flex-direction: column;
            font-size: 25px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        main{
            flex:1;
        }
        
        header{
            padding: 20px;
            height: 300px;
            background-color: black;
            background-image: url(images_website/sombreropic6.jpg);
            background-size:100%;
            background-position: center;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
        }
        header a{
            color: white;
            text-decoration: none;
            text-transform: uppercase;
        }

        header .logo a{
            background-image: url(images_website/Elsombrero_logo.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 300px;
            height: 200px;
            display: inline-block;
            position: relative;
            top:-20px;
            
            /* Visually hide text, but keep it accessible */
            text-indent: -9999999px
        }
        
        a:hover{
            text-decoration: underline;
        }
        section{
            color: #fefae0;
            margin: 20px 40px;
            display: flex;
            flex-direction: row;
        }

        nav {
            width: 100%;
            display: flex;
            justify-content: center; 
        }
        nav ul{
            list-style-type:none;
            justify-content: center;
            align-items: center; 
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
            font-size: 35px;
        }
        nav li a{
            display: inline-block;
            margin: 20px;
            padding: 6px 10px; 
            background-color: black;
            border-radius: 10px;
        }

        /* HOME PAGE */

        .grid-hero {
            display: grid;
            grid-template-columns: minmax(200px, 1fr); 
            gap: 1rem;
            align-items: center; 
            padding: 20px; 
        }

        .text-block{
            background: #283618;
            border-radius: 10px;
            color: fefae0;
            max-width: 800px;
            margin: 0 auto; 
            padding: 1.5rem;
            display: flex; 
            flex-direction: column;
            justify-content: center; 
        }

        .text-block h1 {
            font-size: 2rem; 
            text-align: center; 
        }

        .text-block p {
            font-size: 25px; 
            text-align: center;
            color: #fefae0;
        }

        .btn-primary {
            width: fit-content; 
            display: inline-block;
            margin: 0 auto;
            text-align: center; 
            margin-top: 1rem; 
            background: #D77F33;
            color: white;
            padding: 0.6rem 1.2rem; 
            text-decoration: none; 
            border-radius: 6px; 

        }

        .promotions {
            background-color: #283618; /* matches hero text-block for harmony */
            color: #fefae0;
            text-align: center;
            border-radius: 10px;
            padding: 25px 15px;
            margin: 20px auto;
            max-width: 900px
        }
        .promotions h2 {
            font-size: 1.6rem;
            margin-bottom: 15px; /* proper breathing room */
            color: #ffd700; /* gold accent to match your catering page */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .promo-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .promo-container a {
            flex: 1 1 300px;
            max-width: 350px; 
            text-align: center; 
        }
        .promo-item img {
            width: 100%;
            max-width: 350px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: transform 0.25s ease;
        }
        .promo-item img:hover {
            transform: scale(1.03);
        }

        .promo-container a img {
            width: 100%;
            max-width: 350px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: transform 0.25s ease;
            }

            .promo-container a img:hover {
            transform: scale(1.03);
            cursor: pointer;
            }

        /* MENU PAGE */

        section.menu{
            display: flex;
            flex-direction: column; 
            align-items: center;
        }

        section.menu img{
            width: 100%;
            max-width: 1250px;
            height: auto; 
            margin: 0 auto;
            transform: scale(0.95);
        }

        

        /* GALLERY PAGE */

       

        #gallery.features img {
            display: block;
            width: 80%;
            max-width: 650px;
            height: auto;
            margin: 10px auto 0;
            padding-bottom: 10px;
        }





        /* CATERING PAGE */


        .catering-info {
        background: #283618;
        border-radius: 10px;
        padding: 20px;
        max-width: 700px;
        margin: 0 auto 30px;
        text-align: center;
        }

        .catering-info h3 {
        color: #ffd700;
        font-size: 1.6rem;
        margin-bottom: 10px;
        }

        .catering-info p {
        font-size: 1rem;
        line-height: 1.6;
        color: #fefae0;
        margin-bottom: 10px;
        }

        @media screen and (min-width: 769px) {
        .catering-info {
            max-width: 900px;   /* wider than the form */
            margin: 0 auto;
            padding: 20px 30px;
            background: #283618;
            border-radius: 10px;
        }

        .catering-info h3 {
            margin-bottom: 20px;
        }

        .catering-info p {
            max-width: 850px;
            margin: 10px auto;
            line-height: 1.6;
        }
        }



        #catering-inquiry {
            margin: 40px;
            color: white;
            display: flex;
            flex-direction: column; 
            gap: 30px; 
        }

        #catering-inquiry h2 {
            font-size: 2rem; 
            margin-bottom: 1.2rem; 
            color: #ffd700;
            text-align: center; 
        }

        #catering-inquiry form{
            flex-direction: column; 
            gap: 1rem; 
            max-width: 500px; 
            margin: auto; 
        }

        #catering-inquiry label {
            font-size: 1rem;
            margin-bottom: 0.2rem;
    
        }

        #catering-inquiry input, #catering inquiry textarea {
            width: 100%;
            padding: 8px;
            font-size: 1rem;
            border-radius: 4px;
            border: 3px solid #ccc;
            box-sizing: border-box; 

        }

        #catering-inquiry textarea {
            resize: vertical;
        }

        #catering-inquiry button {
            margin-top: 1.2rem; 
            padding: 0.8rem;
            font-size: 1.1rem; 
            color: white; 
            background: #283618;
            border: none; 
            border-radius: 6px; 
        }

        .hidden { display: none; }

        #catering-inquiry fieldset {
            border: none; 
            display: flex;
            flex-direction: column;
            align-items: center;;
            margin: 1rem; 
            padding: 20px; 
        }

        /* this is the Order Type text */

        #catering-inquiry legend {
            font-size: 1rem;
            text-align: center;
            margin-bottom: 0.3rem; 
            color: #ffd700;
        }

        input[type="radio"] {
            display: none;
        }

        input[type="radio"] + label {
            padding: 0.6rem 1.2rem;
            border: 2px solid #ffd700;
            border-radius: 10px;
            color: #ffd700;
            background: transparent;
            cursor: pointer;
        }

        input[type="radio"]:checked + label {
            background: #ffd700;
            color: #283618;
        }


        #catering-inquiry input[type="radio"]{
            margin-right: 0.3rem;
            
        }

        .radio-group {
            display: flex;
            gap: 12px;
            margin-top: 10px;
        }

        .radio-group input[type="radio"]{
            display: none;
        }

        #details {
            width: 100%; 
            max-width: 600px; 
            height: 150px;
            padding: 8px; 
            font-size: 20px; 
            line-height: 1.4; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            box-sizing: border-box; 
        }

        #catering-inquiry button[type="submit"]{
            display: block;
            margin: 1.5rem auto 0;
            width: 60%;
            max-width: 200px;
            cursor: pointer;
        }


        #address-fields {margin-top: 0.5rem; margin-bottom: 10px;}
        fieldset {border: none; margin: 1rem 0;}
        legend{ font-size: 1rem; color: #ffd700;}

        footer{
            background: black;
            color: gray;
            font-size: 15px;
            padding: 20px 2px;
            text-align: center; 
        }

        footer .social-links {
            display: flex;
            justify-content: center;
            gap: 10px; 
            margin-bottom: 10px; 
        }

        footer .social-links a{
            color: white;
            font-size: 40px; 
            width: 55px; 
            height: 55px;
            display: inline-flex;
            align-items: center;
            justify-content: center; 
            background: #606c38;
            border-radius: 50%;
            text-decoration: none;
        }


        /* -- Desktop & Tablet: center gallery items -- */
        .pswp-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 0 auto;
        max-width: 1200px; /* optional limit to prevent too-wide layout */
        }

        /* Individual items centered intrinsically */
        .pswp-gallery a {
        display: block;
        text-align: center;
        margin: 0 auto;
        }

        /* -- Responsive Images -- */
        .pswp-gallery img {
        width: auto;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        }

        /* -- Optional: ensure fullscreen container is always centered */
        .pswp img {
        max-width: none !important;
        object-fit: contain !important;
        }


        /* MOBILE LAYOUT*/

        @media screen and (max-width: 768px){
            html, body{
                font-size: 18px;
                flex-direction: column;
            }

            nav ul{
                flex-direction: column;
                gap: 10px;
                font-size: 22px;
                align-items: center;
            }

            section{
                flex-direction: column;
                margin: 20px;
            }

            .grid-hero{
                grid-template-columns: 1fr;
            }

            .text-block{
                padding: 1rem;
            }

            .text-block h1,
            .text-block p {
                text-align: center;
            }

            header {
                height: auto;
                padding: 40px 20px;
                background-size: cover;
            }

            .logo a {
                width: 200px;
                height: 130px;
            }

            footer .social-links {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
            }

            #catering-inquiry form,
            #details {
                width: 100%;
                padding: 0;
            }

            .pswp img,
            .pswp__img {
            max-width: none !important;
            object-fit: contain !important;
}

        }