#isOpenCheck {
    text-align: center;
    font-weight: bold;
    color: gray;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: black;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: url("images/wood-header.jpg");
    background-size: cover;
}

.button-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.button-stack .button {
    padding: 6px 12px;
    font-size: 18px;
    cursor: pointer;
    background-color: rgba(218, 0, 1, 1);
    border-radius: 10px;
    color: white;
    border-width: 1px;
    border-color: white;
    border-style: solid;
    box-shadow: black;
    transition: 0.3s;
    text-decoration: none;
}

.button-stack .button:hover {
    background-color: rgb(255, 230, 0);
    color: black;
    border-color: black;
}

.logo {
    display: flex;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    width: 192px;
    height: 192px;
}

.logo_img {
    max-width: 100%;
}

/* Optional: make sure stacks don’t stretch vertically */
.side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* --- Sticky Navigation Bar --- */
/* Make the navbar a consistent height */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    color: white;
    background: black;
    width: 100%;
    height: 60px; /* Choose your desired height */
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center nav-menu inside navbar */
    box-shadow: 0 5px 10px black;
}

/* Make nav-menu take full navbar height */
.nav-menu {
    display: flex;
    justify-content: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%; /* Fill navbar height */
    align-items: stretch; /* Stretch <li> to navbar height */
}

/* Make links fill their parent <li> */
.nav-menu li a {
    display: flex;           /* Flex to allow full height */
    align-items: center;     /* Vertically center text */
    justify-content: center; /* Optional: horizontally center text */
    height: 100%;            /* Fill li height */
    padding: 0 5px;         /* Horizontal spacing */
    text-decoration: none;
    font-weight: 600;
    color: white;
    box-sizing: border-box;
    transition: 0.3s;
}

.nav-menu li a:hover {
    background-color: rgba(218, 0, 1, 1);
}


/* Dropdown container */
.dropdown {
    position: relative;
}

/* clickable/tappable label */
.dropdown > a {
    display: inline-block;
    padding: 8px 5px;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;       /* ✔ Attach directly to bottom of navbar item */
    left: 0;
    color: white;
    background: black;
    border: 1px solid black;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    min-width: 160px;
    z-index: 999;

    /* Animation (optional) */
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Items */
.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    white-space: nowrap;
    color: white;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background: rgba(218, 0, 1, 1);
}

@media (hover: hover) and (pointer: fine) {
    /* hover parent OR menu itself */
    .dropdown:hover > .dropdown-menu,
    .dropdown-menu:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        display: block;
    }
}

/* --- Hamburger Button --- */
#hamburgerBtn {
    display: none; /* Hidden by default */
    font-size: 24px;
    background: rgba(0,0,0,0.95);
    border: none;
    cursor: pointer;
    color: white;
    z-index: 1000;
}

/* --- Mobile Menu Overlay --- */
#mobileMenu {
    display: flex;              /* Keep it in DOM for transitions */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    color: white;
    opacity: 0;                 /* Hidden initially */
    pointer-events: none;       /* Not clickable when hidden */
    transition: opacity 0.3s ease;
    z-index: 1001;
}

#mobileMenu.active {
    opacity: 1;                 /* Fade in */
    pointer-events: auto;       /* Enable clicks */
}


.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-menu li {
    margin: 20px 0;
}

.mobile-menu li a {
    text-decoration: none;
    color: white;
    font-size: 24px;
}
.mainPage {
    z-index: 1;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-height: 700px;
    text-shadow: black 0px 0px 10px;
    -webkit-text-stroke-width: 0.5px; /* Width of the stroke */
    -webkit-text-stroke-color: black; /* Color of the stroke */
}
#bgVideo, #bgPoster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.craving{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 230, 0);
    box-shadow: 0 0 20px black;
}
.textContainer {
    text-align: center;
    width: 50%;
}
.textFix {
    font-weight: bold;
    width: auto;
    height: auto;
}
h3 {
    font-family: Philosopher, "Philosopher Fallback";
    font-weight: lighter;
    font-size: 24px;
}
h2 {
    font-family: Philosopher, "Philosopher Fallback";
    font-weight: lighter;
    font-size: 30px;
    border-bottom: 1px dotted #333; 
    border-width: 1px;
    border-radius: 10%;
}
h1 {
    font-family: Philosopher, "Philosopher Fallback";
    font-weight: bold;
    font-size: 40px;
    margin: 0;
}
.pizzaArea {
    margin: auto;
    text-align: center;
    color: white;
    padding-top: 7%;
    width: 80%;
    padding-bottom: 7%;
    z-index: 10;
}
.pizzaText {
    z-index: 1;
    font-size: 24px;
}
.littleBiggerText {
    font-size: 20px;
}
.sideBySide {
    display: flex;
    gap: 20px;
    margin: 0 auto;
    width: 75%;
    font-weight:normal;
    color: black;
}
.sideBySideLeft {
    flex: 1;
    min-width: 540px;
}
.sideBySideLeft ul {
    list-style-type: disc;
    text-align: left;
    font-size: 20px;
}
.sideBySideLeft li {
    padding: 10px 0px;
}
.whyRR {
    width: 100%;
    background-color: white;
}
.sideBySideRight {
    flex: 3;
    text-align: left;
    font-size: 18px;
}
.boxContainer {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 20px;
}
.boxContainer .button-stack{
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 70px;
}
.centerIt {
    display: flex;
    align-items: center;
    justify-content: center;
}
.foodSections {
    color: black;
    box-shadow: 0 0 20px black;
}
.locationSections {
    background-color: black;
    color: white;
}
.foodSections, .locationSections {
    display: flex;          /* Enables horizontal flex layout */
    height: 100%;           /* Full viewport height */
}
.section {
    flex: 1;                /* Each section takes equal width */
    display: flex;
    align-items: center;    /* Center content vertically */
    justify-content: center;/* Center content horizontally */
    font-size: 1.5rem;
    padding-bottom: 20px;
}
.foodSections .section1 {
    background-color: rgba(218, 0, 1, 1);
    color: white;
}
.foodSections .section2 {
    background-color: rgb(255, 230, 0);
}
.foodSections .section3 {
    background-color: rgba(218, 0, 1, 1);
    color: white;
}
.section1, .section2, .section3 {
    display: flex;
    flex-direction: column;
}
.sectionText {
    width: 80%;
    font-size: 16px;
    text-align: center;
}
.locationText {
    font-size: 16px;
    padding-bottom: 10px;
    margin-top: -7px;
}
.locationHead {
    border-bottom: 1px dotted white;
}
.foodSectionIcon {
    width: 80px;
    height: 80px;
    margin-top: 20px;
}
.mainPizzaIcon {
    width: 60px;
    height: 60px;
}
.pizzaInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pizzaInfo li {
    text-align: left;
}
.pizzaInfo ul {
    width: 75%;
}
.craving .sideBySide .sideBySideRight {
    flex: 1;
}
.craving .sideBySide .sideBySideRight li {
    padding: 10px 0;
    display: inline-block;
    border-bottom: 1px dashed #333; /* solid border */
    margin-right: 5px;
}
.craving .sideBySide .sideBySideLeft {
    flex: 1;
    min-width: 0px;
}
.craving .sideBySide .sideBySideLeft ul {
    font-size: 18px;
 }
.craving .sideBySide .sideBySideLeft li {
    padding: 10px 0;
    display: inline-block;
    border-bottom: 1px dashed #333; /* solid border */
    margin-right: 5px;
}
.contactUs {
    padding-top: 10px;
    margin-top: 0;
    background: black;
    color: white;
    text-align: center;
}
.contactUs .button-stack {
    padding-bottom:10px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.typeOf {
    font-size: 24px;
    font-style: italic;
}
.costOf {
    font-size: 18px;
    margin-top: -10px;
}
.toppingsOf {
    margin-top: -20px;
    font-style: italic;
    border-bottom: #333 2px dotted;
    border-radius: 20%;
}
.titleOf {
    margin-bottom: -15px;
    text-decoration: underline;
}
.warning {
    color: rgba(218, 0, 1, 1);
    font-style: italic;
}
.mobileOnly .button-stack {
    display: none;
}
.section1 .sectionText .toppingsOf, .section3 .sectionText .toppingsOf {
    border-color: white;
    margin-top: 20px;
}
.section1 .sectionText .warning, .section3 .sectionText .warning {
    color: rgb(255, 230, 0);
}
.hideStyle {
    text-decoration: none;
    color: white;
}
.leaflet-popup-content {
    text-shadow: none;
}
.orderNow {
    background-color: white;
    color: black;
}
.toppingsOf.sandwich {
    font-size: 20px;
}
.paymentOptions img {
    height: 50px;
    padding-left: 60px;
    padding-right: 60px;
    transition: 1s;
}
.paymentOptions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Show hamburger and hide normal nav on small screens */
@media screen and (max-width: 810px) {
    .navbar {
        display: none;
    }
    #hamburgerBtn {
        display: block;
    }
    .button-stack {
        display: none;
    }
    .mobileOnly .button-stack {
        display: flex;
    }
    .boxContainer .button-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .contactUs .button-stack {
        display: flex;
        flex-direction: column;
    }
    .sideBySideLeft li {
        font-size: 18px;
        padding: 5px 0;
    }
    .sideBySideRight li {
        font-size: 18px;
        padding: 5px 0;
    }
    .locationSections .button-stack {
        display: flex;
    }
    .paymentOptions img {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media screen and (max-width: 1280px) {
    .textContainer {
        width: 90%;
    }
    .sideBySide {
        display: block;
    }
    .sideBySideRight {
        text-align: center;
    }
    .sideBySideLeft {
        min-width: 0px;
    }
    .sideBySideLeft ul {
        text-align: center;
    }
    .sideBySideLeft li {
        display: inline-block;
        border-bottom: 1px dashed #333; /* solid border */
        margin-right: 5px;
    }
    .sideBySideRight li {
        display: inline-block;
        border-bottom: 1px dashed #333; /* solid border */
        margin-right: 5px;
    }
    .foodSections, .locationSections {
        flex-direction: column;
    }
    .locationSections .section {
        border-bottom: 1px dotted white;
    }
    .section1 .sectionText .allItemWrap, .section2 .sectionText .allItemWrap, .section3  .sectionText .allItemWrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .itemWrap {
        width: 300px;
    }
}