/* CSS Reset */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    min-height: 100vh;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Colors */

:root {
    --dark-brown: #211b18;
    --brown: #4a2f22;
    --red: #b72e25;
    --dark-red: #7d1914;
    --gold: #f2b544;
    --cream: #fff6e7;
    --white: #ffffff;
    --light-tan: #f0e3cc;
    --gray: #5f5f5f;
}

/* General Styles */

body {
    background-color: var(--cream);
    color: var(--dark-brown);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

h1,
h2,
h3 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.15;
}

h1 {
    font-size: 2.35rem;
}

h2 {
    color: var(--dark-red);
    font-size: 1.9rem;
    margin-bottom: 1rem;
    text-align: center;
}

h3 {
    color: var(--dark-red);
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
}

p {
    margin-bottom: 1rem;
}

/* Header (Because you need to read a main thingy) */

.site-header {
    align-items: center;
    background-color: var(--dark-brown);
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    color: var(--gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1;
}

.logo span {
    color: var(--white);
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    margin-top: 0.25rem;
    text-align: center;
}

/* Hamburger Button (BUTTONS GET PUSHED, AND IF YOU DON'T PUSH EVERY BUTTON, I DON'T KNOW IF YOU'RE EVEN HUMAN */

.menu-button {
    background-color: transparent;
    border: 2px solid var(--gold);
    border-radius: 5px;
    color: var(--gold);
    cursor: pointer;
    font-size: 1.45rem;
    min-height: 44px;
    min-width: 44px;
}

.menu-button:hover,
.menu-button:focus {
    background-color: var(--gold);
    color: var(--dark-brown);
}

/* Putting everything in its place (Like how some people should be) */

.main-nav {
    background-color: var(--dark-brown);
    display: none;
    flex-direction: column;
    left: 0;
    padding: 0 1rem 1rem;
    position: absolute;
    top: 100%;
    width: 100%;
}

.main-nav.open {
    display: flex;
}

.main-nav a {
    border-bottom: 1px solid #5e4f46;
    color: var(--white);
    font-weight: bold;
    min-height: 44px;
    padding: 0.9rem 0;
}

.main-nav a:hover,
.main-nav a:focus {
    color: var(--gold);
}

/* The dumb yes section because I was too lazy to think of a different name */

.yes {
    background-color: var(--brown);
    background-image: linear-gradient(
        rgba(33, 27, 24, 0.63),
        rgba(33, 27, 24, 0.63)
    );
    background-position: center;
    background-size: cover;
    color: var(--white);
    min-height: 440px;
    padding: 5rem 1.25rem;
    text-align: center;
}

.yes-content {
    margin: 0 auto;
    max-width: 600px;
}

.yes h1 {
    margin-bottom: 1rem;
}

.yes p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Buttons (hehe, click click, I love pushing buttons!! wait, what does this one do? its big and red, I must push it) */

.button {
    background-color: var(--red);
    border: 2px solid var(--red);
    border-radius: 6px;
    color: var(--white);
    display: inline-block;
    font-weight: bold;
    margin: 0.25rem;
    min-height: 44px;
    padding: 0.7rem 1rem;
    text-align: center;
}

.button:hover,
.button:focus {
    background-color: var(--dark-red);
    border-color: var(--dark-red);
}

.button-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--dark-brown);
}

.button-gold:hover,
.button-gold:focus {
    background-color: #ffd16d;
    border-color: #ffd16d;
}

/* Sections (because its impolite for us to not seperate them) */

.content-section {
    margin: 0 auto;
    max-width: 850px;
    padding: 2.5rem 1.1rem;
}

.section-intro {
    margin: 0 auto 1.5rem;
    max-width: 650px;
    text-align: center;
}

.dark-section {
    background-color: var(--dark-brown);
    color: var(--white);
}

.dark-section h2 {
    color: var(--gold);
}

.center-button {
    margin-top: 1.4rem;
    text-align: center;
}

/* Flexbox boxes (what did you expect? its called flexbox for a reason, and so it looks good, because someone actually wants to see this) */

.card-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.16);
    color: var(--dark-brown);
    padding: 1.2rem;
}

.card p:last-child {
    margin-bottom: 0;
}

.popular-card {
    border-top: 6px solid var(--gold);
}

.menu-card {
    border-left: 7px solid var(--red);
}

.deal-card {
    border-top: 7px solid var(--gold);
}

/* Hours (don't blame us if you get locked in the store after hours) */

.hours-box {
    background-color: var(--gold);
    border-radius: 8px;
    color: var(--dark-brown);
    padding: 1.3rem;
    text-align: center;
}

.hours-box h3 {
    color: var(--dark-brown);
}

.hours-box p {
    margin-bottom: 0.4rem;
}

/* Menu (eat your fill, or else) */

.price-list {
    list-style: none;
    margin-top: 0.9rem;
}

.price-list li {
    border-top: 1px solid var(--light-tan);
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0;
}
/* I pushed the button, and the world is ending, so you better hurry up and eat your pizza before the world ends, because I care about my pizza, and if you don't eat your pizza, then I will eat it, and you will be sad, and I will be happy, because I love pizza more than anything else in the world, and if you don't like pizza, then you are wrong, and I will fight you, because pizza is the best food ever, and if you don't agree with me, then you are a fool, and you will be left with nothing but sadness and regret, because pizza is life, and life is pizza, and if you don't understand that, then you are not worthy of THE ALMIGHTY PIZZA, and it will leave you behind to suffer in your ignorance, while I enjoy my delicious pizza in peace. */
.menu-description {
    color: var(--gray);
    font-style: italic;
}

.topping-box {
    background-color: var(--white);
    border-radius: 8px;
    padding: 1.2rem;
}

.topping-box p {
    margin-bottom: 0;
}

/* Deals (honestly, we don't really have any for a reason) */

.deal-price {
    color: var(--red);
    font-size: 1.65rem;
    font-weight: bold;
}

.small-print {
    color: var(--white);
    font-size: 0.9rem;
    margin-top: 1.5rem;
    text-align: center;
}

/* Location and Map (so you know where we are, and so we can find us (really, some of our workers are really stupid)) */

.location-box {
    background-color: var(--gold);
    border-radius: 8px;
    color: var(--dark-brown);
    padding: 1.25rem;
    text-align: center;
}

.location-box h3 {
    color: var(--dark-brown);
}

.location-box p {
    margin-bottom: 0.35rem;
}

.location-box a {
    color: var(--dark-red);
    font-weight: bold;
    text-decoration: underline;
}

.map-box {
    margin-top: 1.5rem;
}

.map-box iframe {
    border: 0;
    border-radius: 8px;
    min-height: 310px;
    width: 100%;
}

/* Contact Form (does apsolutely nothing because we don't care) */

.contact-form {
    background-color: var(--white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.2rem;
}

.contact-form label {
    color: var(--dark-brown);
    font-weight: bold;
    margin-top: 0.7rem;
}

.contact-form input,
.contact-form textarea {
    border: 2px solid #cbbba3;
    border-radius: 5px;
    min-height: 44px;
    padding: 0.7rem;
    width: 100%;
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.required {
    color: #c90000;
    font-weight: bold;
}

.optional {
    color: var(--gray);
    font-size: 0.85rem;
    font-weight: normal;
}

.contact-form button {
    background-color: var(--red);
    border: none;
    border-radius: 6px;
    color: var(--white);
    cursor: pointer;
    font-weight: bold;
    margin-top: 1rem;
    min-height: 44px;
    padding: 0.75rem;
}

.contact-form button:hover,
.contact-form button:focus {
    background-color: var(--dark-red);
}

/* Yelp review (so you yourself can submit reviews) */

.yelp-box {
    background-color: var(--white);
    border-left: 7px solid #d32323;
    border-radius: 8px;
    padding: 1.2rem;
    text-align: center;
}

/* Footer (contains copyright information) */

.site-footer {
    background-color: var(--dark-brown);
    color: var(--white);
    padding: 1.5rem 1rem;
    text-align: center;
}

.site-footer p {
    margin-bottom: 0.4rem;
}

.site-footer a {
    color: var(--gold);
    text-decoration: underline;
}
.logo img {
    display: block;
    height: 75px;
    width: auto;
}