:root {
    --dark-green: #437666;
    --light-cream: #f8fae5;
    --warm-brown: #b19470;
    --dark-brown: #76453b;
    --darker-brown: #3e211c;
}

body {
    font-family: 'Helvetica Neue';
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    min-height: 100vh; /* Full height for the body */
    margin: 0;
    background-color: var(--light-cream);
    color: var(--darker-brown);
    font-family: sans-serif;
}

section#about {
    text-align: center;
    padding: 1em;
    font-size: x-large;
}

header {
    text-align: center;
    background-color: var(--dark-green);
    padding: 0;
    color: var(--light-cream);
}

h1 {
    font-family: Garamond;
    margin: 0;
    padding-top: 1em;
}

nav ul#nav {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 1em;
    margin: 0;
    justify-content: center;
}

li.nav-item a {
    text-decoration: none;
    color: var(--light-cream);
    transition: color 0.3s ease;
}

li.nav-item a:hover {
    color: var(--warm-brown);
    text-decoration: underline;
}

main {
    flex: 1; /* Allows main to grow and take remaining space */
    width: 95%;
    max-width: 1000px;
    margin-inline: auto;
    font-size: larger;
}

footer {
    background-color: var(--dark-green);
    color: var(--light-cream);
    text-align: center;
    padding: 10px 0; /* Padding for the footer */
}

footer a {
    text-decoration: none;
    color: var(--light-cream);
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--warm-brown);
    text-decoration: underline;
}

#socials {
    display: flex;
    justify-content: center;
}

#order-form {
    display: flex;
    justify-content: center;
}

.gallery-container {
  max-width: 1000px;
  margin: 0 auto;
  columns: 3 300px;
  column-gap: 1em;
  padding: 1em 0;
}

.gallery-container figure {
  display: inline-block;
  width: 100%;
  margin: 0 0 1em;
  break-inside: avoid; /* prevents columns from breaking figure contents */
}

.gallery-container img {
  display: block;
  width: 100%;
  border-radius: 0.2em;
}

.gallery-container figcaption {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.25em;
  text-align: left;
}

.gallery-container figcaption a {
    text-decoration: none;
    color: var(--dark-green);
    transition: color 0.3s ease;
}

.gallery-container figcaption a:hover {
    color: var(--warm-brown);
    text-decoration: underline;
}

.card {
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 1em 0;

    overflow: hidden;
    transition: flex-direction 0.3s ease;
}

.card img {
    width: 50%; 
    height: auto;
}

.card p {
    padding: 20px;
    width: 50%; 
    text-align: center;
    font-size: x-large;
}

/* Switch to column layout on portrait orientation or small screens */
@media (orientation: portrait), (max-width: 600px) {
    .card {
        flex-direction: column;
    }

    .card img, .card p {
        width: 100%; /* Full width in portrait mode */
    }
}

main .menu-category {

    padding: 15px;
    margin-bottom: 20px;
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); */
}

main .menu-category h3 {
    color: var(--dark-brown);
    border-bottom: 2px solid var(--warm-brown);
    padding-bottom: 5px;
}

main .menu-category ul {
    list-style-type: disc;

}

main .menu-category ul li {
    padding: 5px 0;
}

main #menu {
    display: flex;
    padding: 1em;
    justify-content: center;
    margin: 0;
}


/* Styles for the cakes section subsections */
#cake-options {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto new lines */
    gap: 20px; /* Space between subsections */
}

.cake-option {
    flex: 1 1 33%; /* Flex-grow, flex-shrink, and base width of 45% */
}

/* Adjust the layout for smaller screens */
@media (max-width: 600px) {
    #cakes {
        flex-direction: column; /* Stack the subsections on top of each other */
    }

    .cake-option {
        flex: 1 1 100%; /* Take up full width on small screens */
    }
}

#allergen-notice {
    color: var(--dark-brown);
    font-size: medium;
}

.menu-category span {
    font-size: 0.9em; 
    font-style: italic;
}