body {
    background-color: #fcf1dc;
    color: #161412;
    font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, .bigTitle {
    /* Headings use the more classic display font */
    font-family: "Playfair Display", "Times New Roman", serif;
    max-width: auto;
}

.u {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
}

h2.classic, h3.classic {
    text-decoration-color: #cf2019;
    color: #cf2019;
    text-align: center;
}

.bigTitle.classic {
    font-size: 30px;
    text-align: center;
}

/* About Us Container */
.businessDesc {
    margin-top: 10px;
    display: flex;  /* puts the children in a row */
    align-items: flex-start; /* aligns the top edges */
    gap: 1.5rem;  /* space between text and image */
    text-align: left;   
    text-wrap: wrap;
}
/* Text colum */
.businessDesc-text {
    font-size: 24px;
    flex: 1;    /* takes the remaining space */
    max-width: 50%;
    min-width: 0;   /* allows flex item to shrink to prevent overflow */
    overflow-wrap: break-word; /* wrap long words instead of overflowing */
    word-break: break-word; /* tells the browser to break long words so they dont stick out of the contianer */
    margin: 0;
}
.businessDesc-text h2 {
    margin-top: 10%;
    margin-bottom: 0.5rem;
}
/* Image column */
.businessDesc-img {
    width: 500px;   /* control image size */
    height: auto;   /* keep aspect ratio */
    max-width: 100%;    /* stays responsive */
    align-self: flex-start; /* keeps img visually to the right */
    margin-top: -10px;
}

.flavorTitles {
    margin-top: .5rem;
    text-align: left;
    text-decoration-color: #425be6;
    color: #425be6;
}

.flavorDesc {
    margin-top: -1rem;
    margin-bottom: 2rem;
    max-width: 30%;
}

footer.white-on-flag {
    position: fixed;          /* sticks to bottom */
    bottom: 0;
    left: 0;
    width: 100%;

    background-color: #425be6;   /* blue strip */
    color: #fdfaf3;              /* light text */

    text-align: center;
    font-size: 10px;             /* small and subtle */

    padding: 4px 0;              /* thin banner */
    line-height: 1.2;            /* tight lines */

    border-radius: 0;            /* no pill shape */
    border: none;                /* ignore border-width */
}
footer.white-on-flag p {
    margin: 0;                   /* removes extra height from p */
}

/* Responsive adjustments for smaller screens */
/* Mobile fixes */
@media (max-width: 768px) {
  .businessDesc {
    display: block;  /* stack the children vertically */
    text-align: left;
  }

  .businessDesc-text {
    max-width: 100%;
    width: 100%;
    font-size: 18px;          /* slightly smaller for phones */
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: normal;
  }

    .businessDesc-text h2 {
        margin-top: 1rem;
        text-align: center;
    }

    .businessDesc-img {
        display: block;
        margin: 1rem auto 0 auto; /* center the image */
        width: 70%;               /* slightly smaller image */
        max-width: 320px;
    }

  .flavorDesc {
    max-width: 100%;
  }
}