/* Landscape mode styles for mobile devices */
/*IPHONE 12 PRO MAX* */
@media (min-width: 426px) and (max-width: 768px) {
    #hero {
        min-height: 100vh;
    }

    /*TOP NAVIGATION LOGO*/
    .brand-logo {
        height: 20px; /* Fixed height */
        width: 200px; /* Fixed width */
    }

    .nav-bg {
        height: 56px; /* Set the height */
        box-shadow: var(--s-box-shadow);
    }

    .text-container-hero h1 {
        /*border: solid 1px dodgerblue;*/
        font-size: 2.0em;
        margin: 0;
    }

    .text-container-hero h2 {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.7em;
        margin: 0;
    }

    .text-container-hero p {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.5em;
        margin: 0;
    }
    /* Responsive Adjustments for Trompo Section */
    .content-row-1 {
        flex-direction: column; /* Stack content vertically on smaller screens */
    }

    .content-box-1 {
        margin: 0 0 30px 0;
    }

    .content-row-1 .content-box-1 {
        width: 100%; /* Full width for both sections */
    }

    .content-box-1-img {
        width: 100%; /* Match parent container width */
    }

    .btn-wrapper {
        justify-content: center; /* Positions the button horizontally */
    }
    /*MARGIN TOP SPECOFIC SECTIONS*/

    #tortillas-color .content-box-1,
    #nieves .content-box-1,
    #taco .content-box-1,
    #loyalty .content-box-1 {
        margin-top: 50px;
    }
    /*ART ADJUSTMENTS*/
    #description .art-wrapper-1 {
        width: 180px; /* Same size as .art-1 */
        height: 300px;
    }
    #description .art-wrapper-3 {
        width: 200px; /* Same size as .art-1 */
        height: 100px;
    }

    /*FOOTER STARTS*/
    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 150px;
        width: auto;
    }

    /* Full-width for `.ft-content-box` */
    .ft-content-box {
        display: flex; /* Enable flex layout */
        justify-content: space-between; /* Even spacing between the child blocks */
        align-items: flex-start; /* Align the blocks at the top edge */
        width: 100%; /* Ensure it spans the full available width */
        max-width: 100%; /* Prevent unnecessary restrictions from parents */
        padding: 0; /* Remove padding */
        margin: 30px 15px 15px 0; /* Margins */
        box-sizing: border-box; /* Include padding/borders in width calculations */
    }

    /* Ensure the child blocks (`ft-content-box-wrapper`) distribute evenly */
    .ft-content-box-wrapper {
        flex: 1; /* Let each wrapper take equal space */
        max-width: 30%; /* Allow each block 1/3 of the available space */
        box-sizing: border-box; /* Properly handle padding/margins */
    }

    /* Fix the container of the footer to remove Bootstrap constraints */
    .footer-top .container {
        width: 100%; /* Let the container take all available width */
        max-width: 100%; /* Remove Bootstrap-imposed max-width limits */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
    }

    /* Avoid negative margins from `.row` */
    .footer-content-wrapper {
        width: 100%; /* Take full width */
        margin: 0 auto; /* Center the wrapper */
        padding: 0; /* Clear default padding from `.row` */
    }

    /* Ensure the `.footer-content-wrapper.row` does not apply negative margins */
    .footer-content-wrapper.row {
        margin-left: 0; /* Clear Bootstrap's grid margins */
        margin-right: 0; /* Clear Bootstrap's grid margins */
    }

    /*FOOTER ENDS*/

    .menu-box {
        flex: 0 1 100%; /* Each box takes 100% width */
    }
    #menu .menu-section-title-2 h1 {
        font-size: 2.0em;
    }
    #menu .menu-section-title-2 h2 {
        font-size: 1.5em;
    }

    #menu .menu-section-title h1 {
        font-size: 2.0em;
    }
    #menu .menu-section-title h2 {
        font-size: 1.5em;
    }
    #menu .menu-box .menu-text-wrapper h1 {
        font-size: 1.0em;
    }
    #menu .menu-box .menu-text-wrapper h2 {
        font-size: 1.0em;
    }

    /*OPENINGS SECTION FIX*/
    .openings-img-box {
        width: 95%; /* Each box nearly covers the entire width of the device */
    }
    /*END OF OPENING*/

    .col-section {
        width: 100%; /* Full width for smaller screens */
        margin-bottom: 15px; /* Preserve gaps between stacked items */
    }

    .openings-img-wrapper {
        height: 200px; /* Smaller height for smaller devices */
    }

    .col-section-1 {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 15px; /* Optional: Add spacing between stacked items */
    }

    .col-section-2 {
        width: 100%; /* Ensures consistent alignment if `.col-section-2` is included */
    }

}

/* Make boxes grow as the screen size shrinks */
/*@media screen and (max-width: 1200px) {*/
/*    .openings-img-box {*/
/*        width: calc(50% - 3%); !* Each box takes half the width minus 3% gap *!*/
/*    }*/
/*}*/

/*******************************
    General iPhone XR
*******************************/
/* Portrait Orientation */
/* Portrait and Landscape Combined Range for iPhone XR */
@media (min-width: 360px) and (max-width: 414px) {
    /* Map Marker Adjustments */
    .city-marker-1, .city-marker-2, .city-marker-3,
    .city-marker-4, .city-marker-5, .city-marker-6 {
        width: 3%; /* Slightly larger markers for better visibility */
    }

    /* Tooltip Adjustments for Small Screens */
    .city-marker-1::after, .city-marker-2::after,
    .city-marker-3::after, .city-marker-4::after,
    .city-marker-5::after, .city-marker-6::after {
        font-size: 12px; /* Reduce tooltip font size */
        width: 180px; /* Shrink tooltip width */
    }

    /* Hero Section (if applicable) */
    #hero {
        min-height: 100vh;
    }

    /*TOP NAVIGATION LOGO*/
    .brand-logo {
        height: 20px; /* Fixed height */
        width: 200px; /* Fixed width */
    }

    .nav-bg {
        height: 56px; /* Set the height */
        box-shadow: var(--s-box-shadow);
    }

    .warrior-container {
        height: 170px; /* Fixed height for container */
    }


    #hero .text-container-hero h1 {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.6em;
        margin: 0;
    }

    .text-container-hero h2 {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.4em;
        margin: 0;
    }

    .text-container-hero p {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.0em;
        margin: 0;
    }

    /* Responsive Adjustments for Trompo Section */
    .content-row-1 {
        flex-direction: column; /* Stack content vertically on smaller screens */
    }

    .content-box-1 {
        margin: 0 0 30px 0;
    }

    /*Puts in the second line the Plant based word from description section*/
    #description .text-container-1 h1 {
        display: inline-block; /* Ensure block-level behavior for the text */
        white-space: pre-wrap; /* Allow line breaking where needed */
    }

    #description .text-container-1 h1::after {
        content: "\A"; /* Force a line break after the text */
        display: inline; /* Ensure proper rendering of the break */
        white-space: pre; /* Respect the line break */
    }

    .content-box-1 h2 {
        font-size: 1.6em;
    }
    .content-box-1-img {}

    .content-row-1 .content-box-1 {
        width: 100%; /* Full width for both sections */
    }

    .content-row-1 .content-box-1-img {
        width: 100%; /* Full width for both sections */
    }

    .btn-wrapper {
        justify-content: center; /* Positions the button horizontally */
    }

    /*MARGIN TOP SPECOFIC SECTIONS*/

    #tortillas-color .content-box-1,
    #nieves .content-box-1,
    #taco .content-box-1,
    #loyalty .content-box-1 {
        margin-top: 30px;
    }
    /*ART ADJUSTMENTS*/
    #description .art-wrapper-1 {
        width: 180px; /* Same size as .art-1 */
        height: 300px;
    }
    #description .art-wrapper-3 {
        width: 200px; /* Same size as .art-1 */
        height: 100px;
    }
    #menu .art-wrapper-3 {
        width: 200px; /* Same size as .art-1 */
        height: 100px;
    }

    /*FOOTER STARTS*/
    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 140px;
        width: auto;
    }

    /* Full-width for `.ft-content-box` */
    .ft-content-box {
        display: flex; /* Enable flex layout */
        justify-content: space-between; /* Even spacing between the child blocks */
        align-items: flex-start; /* Align the blocks at the top edge */
        width: 100%; /* Ensure it spans the full available width */
        max-width: 100%; /* Prevent unnecessary restrictions from parents */
        padding: 0; /* Remove padding */
        margin: 30px 15px 15px 0; /* Margins */
        box-sizing: border-box; /* Include padding/borders in width calculations */
    }

    /* Ensure the child blocks (`ft-content-box-wrapper`) distribute evenly */
    .ft-content-box-wrapper {
        flex: 1; /* Let each wrapper take equal space */
        max-width: 29%; /* Allow each block 1/3 of the available space */
        box-sizing: border-box; /* Properly handle padding/margins */
    }

    /* Fix the container of the footer to remove Bootstrap constraints */
    .footer-top .container {
        width: 100%; /* Let the container take all available width */
        max-width: 100%; /* Remove Bootstrap-imposed max-width limits */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
    }

    /* Avoid negative margins from `.row` */
    .footer-content-wrapper {
        width: 100%; /* Take full width */
        margin: 0 auto; /* Center the wrapper */
        padding: 0; /* Clear default padding from `.row` */
    }

    /* Ensure the `.footer-content-wrapper.row` does not apply negative margins */
    .footer-content-wrapper.row {
        margin-left: 0; /* Clear Bootstrap's grid margins */
        margin-right: 0; /* Clear Bootstrap's grid margins */
    }
    /*FOOTER ENDS*/
    .menu-box {
        flex: 0 1 100%; /* Each box takes 100% width */
    }
    #menu .menu-section-title-2 h1 {
        font-size: 2.0em;
    }
    #menu .menu-section-title-2 h2 {
        font-size: 1.5em;
    }

    #menu .menu-section-title h1 {
        font-size: 2.0em;
    }
    #menu .menu-section-title h2 {
        font-size: 1.5em;
    }
    #menu .menu-box .menu-text-wrapper h1 {
        font-size: 1.0em;
    }
    #menu .menu-box .menu-text-wrapper h2 {
        font-size: 1.0em;
    }


    /*OPENINGS SECTION FIX*/
    .openings-img-wrapper {
        height: 150px; /* Smaller height for smaller devices */
    }

    .openings-img-box {
        width: 95%; /* Each box nearly covers the entire width of the device */
    }

    .col-section {
        width: 100%; /* Full width for smaller screens */
        margin-bottom: 15px; /* Preserve gaps between stacked items */
    }

    .col-section-1 {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 15px; /* Optional: Add spacing between stacked items */
    }

    .col-section-2 {
        width: 100%; /* Ensures consistent alignment if `.col-section-2` is included */
    }
}

/* Landscape Orientation (refined for XR landscape) */
@media (min-width: 360px) and (max-width: 896px) and (orientation: landscape) {
    #hero .text-container-hero h1 {
        /*border: 5px solid blue; !* Target XR landscape *!*/
    }
}




/*******************************
    IPAD
*******************************/

/* Main layout for portrait and responsive screens */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .content-row-1 {
        display: flex;             /* Flex layout for side-by-side elements */
        justify-content: space-between; /* Equal spacing between text and image containers */
        align-items: flex-start;  /* Align containers at the top */
        flex-wrap: wrap;          /* Allow wrapping for responsiveness */
        gap: 20px;                /* Add space between text and image containers */
    }

    .content-row-1 .content-box-1 {
        width: 48%;                /* Text container takes 48% of width */
        flex: 1 1 calc(48% - 20px); /* Makes the layout dynamic */
        /*border: 2px solid red;     !* Debugging: Red border for text container *!*/
    }

    .content-row-1 .content-box-1-img {
        width: 48%;                /* Div occupies 48% of available space */
        flex: 1 1 calc(48% - 20px); /* Responsive sizing dynamically adjusts */
        aspect-ratio: 1 / 1;       /* Ensures the div remains a perfect square */
        /*border: 2px solid blue;    !* Debugging: Blue border for image container *!*/
        display: flex;             /* Flexbox for aligning content */
        justify-content: center;   /* Center content horizontally */
        align-items: center;       /* Center content vertically */
        position: relative;        /* Important for contained layout */
        overflow: hidden;          /* Ensures no image overflows this container */
    }

    .content-row-1 .content-box-1-img img {
        max-width: 100%;           /* Image scales down to fit within width */
        max-height: 100%;          /* Image scales down to fit within height */
        object-fit: contain;       /* Keeps the image fully visible without cropping */
        display: block;            /* Ensures proper flow in layout */
        position: absolute;        /* Ensure it doesn't affect the container's flow */
    }
}

/* Main layout for landscape orientation */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .content-row-1 {
        display: flex;             /* Flex layout for side-by-side elements */
        justify-content: space-between; /* Equal spacing between text and image containers */
        align-items: center;       /* Align containers vertically */
        flex-wrap: nowrap;         /* Prevent wrapping in wider screens */
        gap: 20px;                 /* Add space between elements */
    }

    .content-row-1 .content-box-1 {
        width: 48%;                /* Text container takes 48% of layout width */
        flex: 0 0 48%;             /* Fixed width for consistent layout */
        /*border: 2px solid red;     !* Debugging: Red border for text container *!*/
    }

    .content-row-1 .content-box-1-img {
        width: 48%;                /* Matches width of the text container */
        flex: 0 0 48%;             /* Fixed width for consistency */
        aspect-ratio: 1 / 1;       /* Always remain a square */
        /*border: 2px solid blue;    !* Debugging: Blue border for clarity *!*/
        display: flex;             /* Flexbox layout for centering the image */
        justify-content: center;    /* Horizontally center image */
        align-items: center;        /* Vertically center image */
        position: relative;        /* Important for proper alignment */
        overflow: hidden;          /* Ensures no content overflows container */
    }

    .content-row-1 .content-box-1-img img {
        max-width: 100%;           /* Fits the image within the container's width */
        max-height: 100%;          /* Fits the image within the container's height */
        object-fit: contain;       /* Ensures the image resizes proportionally without cropping */
        display: block;            /* Proper display behavior */
        position: absolute;        /* Keep the layout consistent and contained */
    }
}