/*
    stylesheet.css
    ----------------
    Main stylesheet for the Taco Loco demo site.

    Sections are grouped and labeled for easier navigation by
    contributors: Layout, Header, Navigation, Hero, Menu, Buttons,
    Modals, Responsive rules, etc.

    Conventions:
    - Indentation: 4 spaces
    - Add section comment blocks when inserting new rules.
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url("images/mexico.jpg");
    background-size: cover;
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    height: 100vh;
}

/* ------------------------------
    Header / Site Branding
    ------------------------------ */

.header {
    display: flex;
    justify-content: space-between;
    flex-direction: row; 
    align-items: center;
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
    margin: 10px;
}

.header img {
    height:auto;
    width:200px;
    padding: 15px;
    border-radius: 30%;
}

/* ------------------------------
   Navigation
   ------------------------------ */

.navbar {
    display: flex;
    align-items: center;
    padding: 6px 0;
}

.navbar ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    align-items: center;
}

.navbar li {
    margin: 0; /* use gap on the ul instead */
}

.navbar a {
    font-family: 'Lobster', cursive;
    color: #000000;
    text-decoration: none;
    font-weight: bolder;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.navbar a:hover {
    text-decoration: none;
    background-color: transparent;
    color: #FF5722; /* use theme color instead of white so hover is visible without a background */
}

/* Remove browser focus outlines / ring for navbar links so no faint boxes appear */
.navbar a:focus,
.navbar a:active,
.navbar a:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Remove tap highlight on mobile */
.navbar a {
    -webkit-tap-highlight-color: transparent;
}

.content {
    background-color: #fff;
    padding: 20px;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 20px;
}

.hero {
    background-image: url("images/tacos.jpg"); /* Replace with an actual taco image */
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* ------------------------------
    Hero / CTA
    ------------------------------ */

.hero h2 {
    font-family: 'Lobster', cursive;
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.cta-button {
    background-color: #FF5722;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #E64A19;
}

.special-offers {
    margin-top: 40px;
    padding: 20px;
    background-color: #f0f0f0; /* Light gray background */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.special-offers h2 {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    margin-bottom: 20px;
    color: #FF5722; /* Theme color */
    text-align: center; /* Center the heading */
}

.offer-item {
    background-color: white; /* White background for offers */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px;
    padding: 15px;
    margin: 10px 0;
    transition: box-shadow 0.3s;
}

.offer-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Elevate on hover */
}

.offer-item h3 {
    margin: 0 0 10px;
    color: #FF5722; /* Theme color */
}

.offer-item p {
    margin: 0;
    color: #333; /* Darker text for readability */
}

.contact {
    margin: 40px 0;
    text-align: center;
}

.contact h3 {
    font-size: 2em;
    margin-bottom: 10px;
}

.about {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f0f0f0; /* Light background for contrast */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.about h2 {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    margin-bottom: 20px;
    color: #FF5722; /* Matching theme color */
}

.about p {
    line-height: 1.6; /* Improved readability */
    margin-bottom: 15px;
}

.video-section {
    text-align: center;
    margin: 40px 0;
}

.video-section h2 {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    margin-bottom: 20px;
    color: #FF5722; /* Matching theme color */
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.menu {
    margin-bottom: 40px;
    padding: 20px;
}

/* ------------------------------
   Menu / Items
   ------------------------------ */

.menu h2 {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    margin-bottom: 20px;
    color: #FF5722; /* Matching theme color */
}

.menu-category {
    margin-bottom: 30px;
}

.menu-category h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333;
}

.menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.menu-item {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.menu-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.menu-item h4 {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
    color: #FF5722; /* Matching theme color */
}

.menu-item p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
}

.menu-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.menu-item button {
    background-color: #FF5722;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.98em;
    transition: background-color 0.25s, transform 0.12s;
}

/* ------------------------------
   Buttons
   ------------------------------ */

/* Specific styles for Add To Cart buttons in the menu */
.menu-item .add-to-cart {
    display: block; /* makes button take full width for easier tapping */
    width: 100%;
    padding: 10px 14px; /* larger tap target */
    margin-top: 12px; /* spacing from description */
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.menu-item .add-to-cart:hover {
    background-color: #E64A19;
    transform: translateY(-1px);
}

/* Small helper for a compact inline cart button (if used) */
.cart-link,
.cart-button {
    background-color: #FF5722;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hamburger toggle styles */
.nav-toggle-checkbox { display: none; }
.nav-toggle { display: none; cursor: pointer; font-size: 1.5rem; padding: 6px 10px; background: transparent; border-radius:6px; }

/* ------------------------------
    Hamburger / Mobile Nav
    ------------------------------ */

@media (max-width: 992px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; color: #333; }
    /* animated collapse for mobile nav: keep visual flow but hide using max-height/opacity */
    .navbar ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: white;
        padding: 10px;
        position: absolute;
        right: 16px;
        top: 64px;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        width: 220px;
        max-width: calc(100% - 32px);
        z-index: 9999;
        /* hidden state */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: max-height 320ms ease, opacity 280ms ease, transform 280ms ease;
    }
    .nav-toggle-checkbox:checked ~ .navbar ul {
        max-height: 420px; /* enough to show items */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .header { position: relative; }
}

/* Hamburger appearance and animation */
.nav-toggle { background: transparent; padding: 0; border-radius: 8px; box-shadow: none; }
.nav-toggle .hamburger { display: inline-flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.14); }
.nav-toggle .hamburger span { display: block; width: 26px; height: 3.5px; background: #FF5722; border-radius: 3px; transition: transform 220ms ease, opacity 180ms ease; }
.nav-toggle:hover .hamburger { transform: translateY(-2px); }

/* Toggle to X when checked */
.nav-toggle-checkbox:checked + .nav-toggle .hamburger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle-checkbox:checked + .nav-toggle .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle-checkbox:checked + .nav-toggle .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Larger hit target for accessibility: apply to the label container but avoid extra white box */
.nav-toggle { min-width: 52px; min-height: 52px; }

@media (max-width: 768px) {
    .menu-item .add-to-cart {
        padding: 10px; /* keep tap target consistent on mobile */
        font-size: 0.95em;
    }
}

/* Cart modal styles */
.cart-count {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    background: #fff;
    color: #FF5722;
    border-radius: 12px;
    font-weight: 700;
    margin-left: 8px;
    font-size: 0.9em;
    vertical-align: middle;
    text-align: center;
}

/* ------------------------------
    Cart Modal / Checkout
    ------------------------------ */

.cart-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.cart-modal {
    background: #fff;
    width: 90%;
    max-width: 680px;
    max-height: 80vh;
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 18px;
    position: relative;
}

.cart-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cart-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

.cart-modal table td button {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

@media (max-width: 480px) {
    .cart-modal { padding: 12px; }
    .cart-modal header h3 { font-size: 1.1rem; }
}

/* Cart summary styles */
.cart-summary {
    background: #fafafa;
    border-radius: 6px;
    padding: 10px;
    margin-top: 8px;
    border: 1px solid #eee;
}
.cart-summary strong { color: #333; }
.price { font-weight: 700; color: #333; margin-top: 8px; }

/* Convert table rows into stacked cards inside the modal on small screens */
@media (max-width: 700px) {
    .cart-modal table, .cart-modal thead, .cart-modal tbody, .cart-modal th, .cart-modal td, .cart-modal tr {
        display: block;
        width: 100%;
    }
    .cart-modal thead { display: none; }
    .cart-modal tbody tr {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        margin-bottom: 12px;
        padding: 12px;
    }
    .cart-modal td {
        padding: 6px 0;
        border: none;
    }
    .cart-modal td:nth-child(1)::before { content: 'Item: '; font-weight:600; }
    .cart-modal td:nth-child(2)::before { content: 'Price: '; font-weight:600; }
    .cart-modal td:nth-child(3)::before { content: 'Qty: '; font-weight:600; }
    .cart-modal td:nth-child(4) { text-align: right; }
}

/* Order tracker styles */
.order-tracker {
    margin-top: 10px;
}

/* ------------------------------
    Order Tracker
    ------------------------------ */
.order-tracker .eta {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #333;
}
.tracker-steps {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    min-width: 110px;
}
.tracker-step.completed { background: #e8f5e9; border-color: #c8e6c9; }
.tracker-step.active { background: #fff3e0; border-color: #ffd54f; }
.tracker-step .label { font-weight:600; font-size:0.95rem; }
.tracker-step .time { font-size:0.85rem; color:#666; margin-top:6px; }

@media (max-width:600px){
    .tracker-steps { flex-direction: column; }
    .tracker-step { width: 100%; }
}

/* Cart form (name/phone) styles */
.cart-form {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.cart-form label { display: block; margin-bottom: 8px; font-size: 0.9rem; color:#333; }
.cart-form input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
@media (max-width:600px){
    .cart-form { grid-template-columns: 1fr; }
}

/* ------------------------------
   Social / Footer
   ------------------------------ */

.contact h2 {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    margin-bottom: 20px;
    color: #FF5722; /* Matching theme color */
}

.contact label {
    display: block;
    margin: 10px 0 5px;
    font-weight: 500;
}

.contact input,
.contact textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
}

.contact button {
    background-color: #FF5722;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

.contact button:hover {
    background-color: #E64A19; /* Darker orange on hover */
}

.social-media {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.social-media h3 {
    font-family: 'Lobster', cursive;
    font-size: 1.5em;
    color: #FF5722; /* Matching theme color */
    margin-bottom: 15px;
}

.social-media ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.social-media ul li {
    margin: 0;
}

.social-media ul li a {
    text-decoration: none;
    color: #FF5722; /* Theme color */
    font-weight: 500;
    padding: 8px 12px;
    border: 1px solid #FF5722; /* Border matching theme color (thinner) */
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}

.social-media ul li a:hover {
    background-color: #FF5722; /* Change background color on hover */
    color: white; /* Change text color on hover */
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .container {
        padding: 10px; /* Reduce padding on larger tablets */
    }
}

@media (max-width: 992px) {
    /* Keep the navbar background transparent on small screens so
       the hamburger's own white rounded background is the only visible
       white box. The hamburger has its own white background and shadow. */
    .navbar {
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }
    
    .navbar ul {
        flex-direction: column; /* Stack navbar items vertically */
        align-items: center;
        margin: 10px 0;
    }

    .navbar ul li {
        margin: 10px 0; /* Space between navbar items */
    }

    .hero h2 {
        font-size: 1.8em; /* Slightly smaller heading */
    }

    .hero p {
        font-size: 1.2em; /* Smaller paragraph text */
    }

    .special-offers h2 {
        font-size: 1.8em; /* Adjust heading size */
    }

    .offer-item {
        padding: 10px; /* Reduce padding on offer items */
    }

    .offer-item h3 {
        font-size: 1.4em; /* Adjust offer item heading size */
    }
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 1.8em; /* Smaller site title */
    }

    .navbar {
        background-color: white;
        border-radius: 30%;
    }

    .navbar ul {
        margin: 10px 0;
    }

    .contact label,
    .contact input,
    .contact textarea {
        font-size: 0.9em; /* Smaller form text */
    }

    .contact button {
        padding: 8px 12px; /* Adjust button size */
        font-size: 0.9em; /* Smaller button text */
    }

    .social-media ul {
        flex-direction: column; /* Stack social links vertically */
    }

    .social-media ul li {
        margin: 5px 0; /* Adjust spacing */
    }

    .footer {
        font-size: 0.9em; /* Smaller footer text */
    }
}

@media (max-width: 576px) {
    .hero h2 {
        font-size: 1.5em; /* Further reduce heading size */
    }

    .hero p {
        font-size: 1em; /* Adjust paragraph text */
    }

    .special-offers h2 {
        font-size: 1.5em; /* Smaller heading */
    }

    .offer-item {
        margin: 5px 0; /* Reduce margin */
    }

    .offer-item h3 {
        font-size: 1.2em; /* Smaller offer item heading */
    }
}

/* Ensure hamburger is hidden on larger viewports (desktop). This rule
   overrides any other display rules that might accidentally show the
   hamburger on GitHub Pages due to caching or differing cascade order. */
@media (min-width: 993px) {
    .nav-toggle {
        display: none !important;
    }
}

/* Desktop-only: make navbar clearer across the site (individual link backgrounds)
   These rules are scoped to desktop viewports so mobile layout remains unchanged. */
@media (min-width: 993px) {
    .header { padding-top: 12px; padding-bottom: 12px; }

    /* Give the navbar a subtle container so the items sit comfortably */
    .navbar {
        background: transparent; /* keep the header background as-is; links will have white boxes */
        padding: 10px 16px; /* match homepage spacing */
        border-radius: 12px;
    }

    /* Links: use transparent backgrounds site-wide; keep padding and rounded corners for touch targets */
    .navbar ul { gap: 18px; }
    .navbar a {
        display: inline-block;
        background: transparent;
        color: #1a1a1a;
        padding: 10px 16px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 1.08rem; /* match homepage size */
        box-shadow: none;
        transition: background-color 220ms ease, transform 160ms ease, color 160ms ease;
    }

    .navbar a:hover {
        background-color: transparent;
        color: #FF5722; /* theme color on hover */
        transform: translateY(-2px);
    }

    /* Homepage-specific container shadow (optional) */
    .home .navbar { box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
}

/* Keep the header visibly separated from the page background on large screens */
@media (min-width: 1200px) {
    .header {
        margin-top: 24px; /* push header down slightly so it stays clear of background patterns */
        z-index: 50; /* ensure header stays above background layers */
    }
    .navbar { z-index: 51; }
}

/* Extra spacing for very large screens (wider than most laptops) so header
   stays below background motifs and remains readable. Using viewport-based
   spacing ensures the offset scales with very tall displays. */
@media (min-width: 1400px) {
    .container { padding-top: 4vh; }
    .header {
        margin-top: 6vh; /* larger push-down on very wide screens */
        position: relative;
        z-index: 60;
    }
    .navbar { z-index: 61; }
}

    /* Force-remove any remaining visible boxes around navbar or its items */
    .navbar,
    .navbar ul,
    .navbar li,
    .navbar a {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Ensure no subtle backdrop or highlight remains on focus or active states */
    .navbar *,
    .navbar *:before,
    .navbar *:after {
        background: transparent !important;
    }