/*
Theme Name: Anitas_Theme_A4
Author: Sheldon Marshall
Description: A custom WordPress theme designed for Anita's Kneaded Nook.
Version: 0.0.4
Tags: Bakery, Baking, Bakeshop Rustic, Clean
*/

:root {
    /* Brand Colors */
    --coloe-bg-primary: #F8F3EA;
    --color-bg_secondary: #BF895C;
    --color-accent: #519795;
    --color-accent-secondary: #FBCECE;
    --color-primary-dark: #7B506F;

    /* Utility Colors */
    --color-white: #FFFFFF;
    --color-gray-medium: #333333;
    --color-gray-dark: #111111;
    --color-black: #000000;
}

/* --- GLOBAL TYPOGRAPHY --- */
body {
    background-color: var(--color-gray-medium);
    color: var(--color-gray-medium);
    /* Set Roboto as the default body font */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
}

/* Titles: Bold Merriweather */
h1, .site-title {
    font-family: 'Merriweather', serif;
    font-weight: 700;
}

/* General Headings: Bold Roboto */
h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

/* --- MATERIAL ICONS CONFIGURATION --- */
.material-symbols-outlined {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
}

body {
    background-color: var(--coloe-bg-primary);
    color: var(--color-gray-medium);
    font-family: Arial, sans-serif;
    margin: 0;
}

/* Site Container for constraints */
.site-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HEADER STYLING --- */
.site-header {
    background-color: var(--color-white);
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    /* NEW: Keeps the header glued to the top of the screen */
    position: sticky;
    top: 0;

    /* NEW: Forces the header to sit ABOVE the mobile overlay (which is 999) */
    z-index: 1001;
}

.site-header .site-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Update your existing .social-links to match the wider gap in the mockup */
.social-links {
    display: flex;
    gap: 16px;
    flex: 1;
    align-items: center;
}

/* Ensure the links behave as flexible containers for the images */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Size and color the new PNG logos */
.social-icon img {
    height: 45px;
    width: auto;
    object-fit: contain;
    transition: all 0.2s ease-in-out;

    /* Convert the white PNG to #BF895C (Brown) */
    filter: brightness(0) saturate(100%) invert(58%) sepia(31%) saturate(583%) hue-rotate(344deg) brightness(94%) contrast(87%);
}

.social-icon-yt img {
    height: 75px;
    width: auto;
    object-fit: contain;
    transition: all 0.2s ease-in-out;

    /* Convert the white PNG to #BF895C (Brown) */
    filter: brightness(0) saturate(100%) invert(58%) sepia(31%) saturate(583%) hue-rotate(344deg) brightness(94%) contrast(87%);
}

/* Simple hover state */
.social-icon:hover img {
    opacity: 0.7;
    /* Optional: If you want the hover state to change colors entirely,
       you would swap in a different filter chain here instead of opacity */
}

/* Simple hover state */
.social-icon-yt:hover img {
    opacity: 0.7;
    /* Optional: If you want the hover state to change colors entirely,
       you would swap in a different filter chain here instead of opacity */
}

/* Give the new logo image a constrained height so it fits the header */
.main-logo-img {
    height: 65px; /* Adjust this number to make the logo larger or smaller */
    width: auto;  /* Maintains the aspect ratio */
    display: block;
}

.main-navigation {
    margin-right: auto; /* Consumes all empty space to the right, pushing actions away */
    margin-left: 40px;  /* Creates breathing room between the logo and the links */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

.main-navigation a {
    text-decoration: none;
    color: var(--color-gray-medium);
    font-size: 0.95rem;
}

.main-navigation a:hover {
    color: var(--color-accent);
}

.header-actions {
    display: flex;
    gap: 10px;
}


/* --- REUSABLE BUTTONS (Translated from Design) --- */
.hero-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    border-radius: 12px; /* Updated from 20px to your 12px spec */
    font-family: 'Nunito Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    min-width: 80px;
    height: 36px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    /* #0073E6 replaced with your primary variable */
    background-color: var(--color-accent);
    /*border: 1px solid var(--color-primary);*/
    color: var(--color-white);
}

.btn-secondary {
    background-color: transparent;
    /* Specific rgba border from your export */
    border: 2px solid var(--color-accent);
    color: var(--color-white);
}

/* --- HERO BREAD GRAPHIC --- */
.bakery-hero .hero-right {
    display: flex;
    align-items: center;      /* Centers the image vertically alongside the text */
    justify-content: flex-end; /* Pushes the image to the far right side */
}

.hero-bread-graphic {
    max-width: 80%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Adjusting the grid layout for mobile screens */
@media (max-width: 768px) {
    .bakery-hero .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .bakery-hero .hero-actions {
        justify-content: center;
    }

    .hero-bread-graphic {
        margin-top: 40px; /* Adds breathing room between the button and the image on mobile */
    }
}


.profile-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.desktop-only-nav {
    align-self: center;
}

/* You can safely remove the margin rules from .main-navigation now */
.main-navigation ul {
    align-self: center;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

/* --- BAKERY SPECIFIC STYLES --- */

/* Header Top Section */
.bakery-header {
    background-color: var(--coloe-bg-primary); /* Uses your existing cream color */
    padding: 0; /* Removing default padding to allow edge-to-edge pink nav */
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.social-links {
    display: flex;
    gap: 10px;
    flex: 1; /* Helps center the logo */
}

.social-icon {
    font-size: 24px;
    color: var(--color-bg_secondary); /* Uses your existing brown color */
    text-decoration: none;
}

.bakery-header .site-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.bakery-header .main-logo-img {
    height: 80px; /* Scaled up slightly for the bakery layout */
}

.bakery-header .header-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Pink Navigation Bar */
.bakery-nav-bar {
    background-color: var(--color-accent-secondary); /* Uses your existing pink color */
    padding: 10px 0;
    text-align: center;
}

.bakery-nav-bar .main-navigation {
    margin: 0 auto;
    display: inline-block;
}

.bakery-nav-bar .main-navigation ul {
    justify-content: center;
    gap: 30px;
}

.bakery-nav-bar .main-navigation a {
    color: var(--color-gray-medium); /* Dark text for contrast */
    font-weight: 700;
    font-size: 1rem;
    text-transform: capitalize;
}

/* Bakery Hero Section */
.bakery-hero {
    background-image: url('Resources/assets/images/Anitas_Kneaded_Nook__BG_Trans.png');
    background-color: var(--coloe-bg-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* THE FIX: Calculate height based on the screen minus the header height (~160px) */
    height: calc(100vh - 160px);
    min-height: 450px; /* Prevents squishing on very short screens */

    /* Remove the old padding */
    padding-bottom: 10px;

    /* Use Flexbox to perfectly center the hero-container vertically */
    display: flex;
    align-items: center;
}

.bakery-hero .hero-container {
    display: flex;
    align-items: center;
}

.bakery-hero .hero-content {
    flex: 1;
    width: 100%;
    padding: 20px;
    border-radius: 12px;
}

.bakery-hero h1 {
    color: var(--color-accent); /* Your teal color */
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.bakery-hero p {
    color: #9C6A41; /* Custom brown to match the mockup subtitle */
    font-size: 1.25rem;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Button overrides for Bakery theme */
.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 8px; /* Slightly squarer than your portfolio buttons */
    font-size: 1.1rem;
}

/* --- MENU SECTION STYLES --- */
html {
    scroll-behavior: smooth; /* Enables the smooth scroll effect for anchor links */
}

.bakery-menu-section {
    padding: 60px 20px;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr 1fr; /* 2-column layout on desktop */
        gap: 60px;
    }
}

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

.menu-category h2 {
    color: var(--color-accent); /* Uses your existing Teal */
    font-size: 2.2rem;
    margin-bottom: 5px;
    text-align: center;
}

.menu-note {
    font-size: 0.75rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-gray-medium);
    margin-bottom: 20px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--color-gray-medium);
}

/*.inclusions-list {*/
/*    list-style: none;*/
/*    padding-left: 20px;*/
/*    margin-top: -5px;*/
/*    margin-bottom: 15px;*/
/*    font-size: 0.8rem;*/
/*    color: var(--color-gray-medium);*/
/*    text-transform: uppercase;*/
/*}*/

.inclusions-list li::before {
    content: "•";
    color: var(--color-gray-medium);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.disclaimer-box {
    background-color: #C09A7F; /* Lighter brown matching the mockup footer box */
    color: var(--color-white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    max-width: 700px;
    margin: 40px auto 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* --- GLOBAL ANCHOR LINK FIX --- */
section[id] {
    scroll-margin-top: 108px; /* Accounts for your header height + some breathing room */
}

/* --- MENU SECTION STYLES --- */
.section-main-title {
    text-align: center;
    color: var(--color-accent); /* Uses your Teal brand color */
    font-size: 3.5rem;
    margin-top: 0;
    margin-bottom: 50px;
    font-family: 'Merriweather', serif; /* Matches your header typography */
}

/* --- GALLERY BENTO BOX STYLES --- */
/* --- GALLERY BENTO BOX STYLES --- */
.bakery-gallery-section {
    padding: 60px 20px;
    max-width: 1600px; /* Creates a wider custom boundary just for the gallery */
    margin: 0 auto;    /* Keeps the whole section perfectly centered on massive monitors */
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
    gap: 20px;
    max-width: 100%; /* Changed from 1000px so the grid stretches to fill the space */
    margin: 0 auto;
}

/* Desktop 4-Column Interlocking Layout */
@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 250px;
    }

    .span-2-col {
        grid-column: span 2;
    }

    .span-2-row {
        grid-row: span 2;
    }
}

/* Individual Box Styles */
.bento-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden; /* Keeps the scaled image inside the rounded corners */
    background-color: var(--color-white);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.bento-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Center Logo Specifics */
.bento-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.bento-logo img {
    object-fit: contain;
    width: 80%;
    height: 80%;
}

/* --- HOVER EFFECTS --- */
.bento-overlay {
    position: absolute;
    inset: 0; /* Stretches overlay across the whole parent */
    background-color: rgba(191, 137, 92, 0.6); /* Brand brown with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Prevents the overlay from blocking clicks */
}

.bento-title {
    color: var(--color-white);
    font-size: 1.5rem;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    padding: 0 15px;
}

/* Trigger animations on hover, excluding the logo box */
.bento-item:not(.bento-logo):hover > img {
    filter: blur(6px);
    transform: scale(1.05); /* Slight zoom for depth */
}

.bento-item:not(.bento-logo):hover .bento-overlay {
    opacity: 1;
}

.bento-item:not(.bento-logo):hover .bento-title {
    transform: translateY(0);
}

/* --- GALLERY LIGHTBOX STYLES --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* #FBCECE converted to RGB with 0.5 opacity */
    background-color: rgba(251, 206, 206, 0.5);
    z-index: 2000; /* Ensures it sits above your sticky header */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Toggled via JavaScript */
.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    position: relative;
    background-color: var(--coloe-bg-primary); /* Swapped to your cream color */
    padding: 50px 20px 60px 20px; /* Increased top padding to 50px */
    border-radius: 16px;
    border: 4px solid var(--color-bg_secondary);
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.lightbox-content img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
}

/* --- LIGHTBOX TITLE --- */
.lightbox-title {
    color: var(--color-bg_secondary);
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
    margin-top: -30px; /* Pulls the title further up to align with the close button */
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    padding: 0 40px; /* Prevents long titles from running into the close button */
    box-sizing: border-box;
}

/* Ensure the bento items look clickable */
.bento-item:not(.bento-logo) {
    cursor: pointer;
}

/* --- LIGHTBOX ICONS & BUTTONS --- */
.lightbox-close {
    position: absolute;
    top: 20px; /* Pushes the button slightly down to center vertically with the text */
    right: 20px;
    color: var(--color-bg_secondary);
    font-size: 32px;
    cursor: pointer;
    transition: opacity 0.2s;
    z-index: 10;
}

.lightbox-controls {
    position: absolute;
    bottom: 15px;
    display: flex;
    gap: 20px;
}

.lightbox-controls span {
    color: var(--color-bg_secondary);
    font-size: 40px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.lightbox-close:hover,
.lightbox-controls span:hover {
    opacity: 0.6;
}

/* --- HEADER CART ICON --- */
.cart-toggle {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: var(--color-accent);
    display: flex;
    align-items: center;
}

.cart-toggle .material-symbols-outlined {
    font-size: 32px;
}

.cart-badge, .sidebar-badge {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -10px;
}

/* --- MENU ITEM CONTROLS --- */
.item-action-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.add-to-cart-init {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}

.add-to-cart-init:hover {
    transform: scale(1.1);
}

.quantity-controls {
    display: flex;
    align-items: center;
    background-color: var(--color-accent-secondary);
    border-radius: 20px;
    border: 1px solid var(--color-primary-dark);
    padding: 2px 5px;
    gap: 10px;
}

.qty-btn {
    background: none;
    border: none;
    color: var(--color-primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.qty-display {
    color: var(--color-primary-dark);
    font-weight: bold;
    min-width: 15px;
    text-align: center;
}

/* --- SLIDE-OUT CART SIDEBAR --- */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background-color: rgba(248, 243, 234, 0.75);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden off-screen by default */
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--color-accent-secondary);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    border-left: 2px solid var(--color-primary-dark);

    overflow-y: auto;
}

/* Active states toggled via JS */
.cart-overlay.active { opacity: 1; pointer-events: auto; }
.cart-sidebar.active { right: 0; }

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 15px 20px; /* Tweaked bottom padding slightly for visual balance */
    border-bottom: 2px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
    gap: 10px; /* Ensures items don't overlap on very narrow phones */
}

/* Adjust the title wrapper so it matches the visual weight of the button */
.cart-title-wrapper h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.cart-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

/* --- NEW: Header Checkout Button --- */
.header-checkout-btn {
    font-size: 1.1rem;
    padding: 6px 16px;
    border-radius: 20px; /* Pill shape matching your mockup */
    margin: 0 auto; /* Pushes it exactly into the center space */
    white-space: nowrap; /* Prevents "Order Now" from wrapping onto two lines */
    height: auto;
}

.sidebar-badge {
    position: relative;
    top: 0; right: 0;
}

.close-cart {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 28px;
}

.cart-items-container {
    background-color: var(--coloe-bg-primary);
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* --- CHECKOUT FORM --- */
.cart-footer {
    padding: 20px;
    background-color: var(--coloe-bg-primary);
    border-top: 2px solid var(--color-primary-dark);

    flex-shrink: 0;
}

.cart-total-wrapper {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--color-primary-dark);
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(123, 80, 111, 0.3);
    padding-bottom: 5px;
}

.form-group label {
    color: var(--color-accent);
    font-weight: bold;
}

.form-group input {
    background: transparent;
    border: none;
    text-align: right;
    color: var(--color-accent);
    outline: none;
    font-family: inherit;
}

.form-group input::placeholder {
    color: rgba(81, 151, 149, 0.5);
}

.form-note {
    color: #D32F2F; /* Red warning text */
    font-size: 0.8rem;
    text-align: right;
    font-weight: bold;
    margin-top: -10px;
    margin-bottom: 15px;
}

.important-notice {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.checkout-btn {
    width: 100%;
    border-radius: 20px;
    font-size: 1.2rem;
    padding: 12px;
}


/* --- MENU VARIANT GROUPS --- */
.menu-variant-group {
    margin-bottom: 10px;
}

.variant-group-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--color-gray-medium);
}

/* Indent the flavors so they visually belong to the header above them */
.sub-item {
    padding-left: 20px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(0,0,0,0.05); /* Very subtle separator */
    padding-bottom: 8px;
}

/* Remove the border from the last item in a group */
.sub-item:last-child {
    border-bottom: none;
}

/* Since the price is at the top, we hide it on the individual variants to keep it clean */
.sub-item .item-action-area {
    justify-content: flex-end;
}

/* Sidebar Cart Items */
.sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: var(--color-accent); /* Teal text */
    font-weight: 700;
    font-size: 0.95rem;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(81, 151, 149, 0.2);
}

.sidebar-item:last-child {
    border-bottom: none;
}

.remove-item-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.remove-item-btn:hover {
    opacity: 0.6;
}

/* --- CUSTOM ALERT MODAL --- */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.6);
    z-index: 3000; /* Extremely high to sit above the cart and lightbox */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.custom-alert-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-alert-box {
    background-color: var(--coloe-bg-primary); /* Your cream color */
    padding: 30px;
    border-radius: 12px;
    border: 4px solid var(--color-primary-dark);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.custom-alert-overlay.active .custom-alert-box {
    transform: translateY(0);
}

.custom-alert-box h3 {
    color: var(--color-primary-dark);
    margin-top: 0;
    margin-bottom: 15px;
}

.custom-alert-box p {
    color: var(--color-gray-medium);
    margin-bottom: 25px;
    font-weight: 500;
}

/* ==========================================
   ABOUT SECTION STYLES
   ========================================== */
.bakery-about-us-section {
    padding: 60px 20px;
    background-color: var(--coloe-bg-primary);
    /*font-family: 'Roboto', sans-serif;*/
}

.about-container {
    max-width: 1200px; /* Constrains the width to match the mockup */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Space between the two blocks */
}

.about-block {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Image container */
.about-image {
    /*flex: 1;*/
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
}

/* Text container */
.about-text {
    flex: 1.2; /* Gives the text slightly more breathing room */
    color: var(--color-gray-medium);
    font-size: 1rem;
    line-height: 1.8;
}

.about-heading {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 20px;
}

.about-text p:last-of-type {
    margin-bottom: 0;
}

/* Specific styling for the date callout */
.highlight-date {
    color: var(--color-accent);
    font-weight: 700;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 777px) {
    .about-block,
    .about-block.reverse {
        flex-direction: column;
        gap: 30px;
    }

    /* Forces images to stack neatly on top of text on mobile screens */
    .about-block .about-image,
    .about-block.reverse .about-image {
        order: -1;
    }

    .about-image img {
        max-width: 100%;
    }
}

/* ==========================================
   FOOTER STYLES (NEW DESIGN)
   ========================================== */
.bakery-footer {
    background-color: var(--color-bg_secondary);
    color: var(--color-white);
    padding: 50px 0 20px 0;
    font-family: 'Roboto', sans-serif;
}

.footer-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.footer-logo {
    margin: 0 0 20px 0; /* Adds breathing room between the heading and the social links */
}

.footer-logo img {
    height: 100px; /* Shrinks the logo—adjust this number up or down to your liking */
    width: auto;
    display: block;
    margin: 0 auto; /* This forces the block element to center horizontally */
}

.footer-social-col {
    text-align: center;
}

.footer-social-col h4 {
    color: var(--color-white);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
}

.footer-social-list-horizontal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px;
    align-items: center;
}

.footer-social-list-horizontal li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.1rem;
    transition: opacity 0.2s ease;
}

.footer-social-list-horizontal li a:hover {
    /*opacity: 0.7;*/
    color: var(--color-primary-dark);
}

.footer-social-list-horizontal img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Bottom Copyright Bar */
.footer-bottom-row {
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white divider line */
    padding-top: 20px;
    text-align: center;
}

.copyright-link {
    color: var(--coloe-bg-primary); /* Matches the standard purple hyperlink color from the mockup */
    font-size: 15px;
    text-decoration: none;
}
.copyright-link:hover {
    color: var(--color-primary-dark);
}

/* ==========================================
   RESPONSIVE DESIGN (MOBILE ADJUSTMENTS)
   ========================================== */

/* --- 1190px Breakpoint: Hero Section --- */
@media (max-width: 1190px) {
    /* Hides the bread graphic to save space */
    .bakery-hero .hero-right {
        display: none !important;
    }

    /* Centers the hero text and button to balance the layout */
    .bakery-hero .hero-content{
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .bakery-hero p{
        color: var(--color-bg_secondary);
        font-size: 1.25rem;
        margin-bottom: 30px;
        font-weight: 500;
        max-width: 400px;
    }

    .bakery-hero .hero-actions {
        justify-content: center;
    }

}

/* --- 777px Breakpoint: Full Mobile Layout --- */
@media (max-width: 777px) {
    /* 1. Header Restructure */
    .header-top {
        flex-direction: column;
        position: relative;
        padding-top: 20px;
    }
    .bakery-header .site-logo {
        order: 1;
        margin-bottom: 15px;
    }
    .social-links {
       display: none; !important;
    }
    .header-actions {
        position: absolute;
        top: 25px;
        right: 20px;
    }

    /* Allows the pink navigation links to wrap to a second line if needed */
    .bakery-nav-bar .main-navigation ul {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 2. Typography Scaling */
    .bakery-hero h1 {
        font-size: 3rem;
    }
    .section-main-title {
        font-size: 2.8rem;
    }

    /* 3. Force Menus and Bento Grids to Single Column */
    .menu-grid, .bento-grid {
        grid-template-columns: 1fr !important;
    }
    .bento-grid {
        grid-auto-rows: 200px;
    }
    .span-2-col, .span-2-row {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* 4. Full-Screen Side Cart */
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    .cart-sidebar.active {
        right: 0;
    }

    /* 5. Mobile Cart Visual Overhaul */
    .cart-items-container {
        background-color: var(--coloe-bg-primary);
        border-radius: 12px 12px 0 0;
        margin: 15px 15px 0 15px;
        padding: 15px;

        overflow-y: visible; /* Disables the inner scroll so the main sidebar handles the scrolling */
        flex: 1 0 auto; /* Allows the container to grow, but prevents awkward squishing */
    }
    .cart-footer {
        background-color: transparent;
        border-top: none;
        padding: 0 15px 15px 15px;
    }
    .cart-total-wrapper {
        background-color: var(--coloe-bg-primary);
        margin: 0 0 15px 0;
        padding: 0 15px 15px 15px;
        border-radius: 0 0 12px 12px;
        border-top: 2px solid rgba(123, 80, 111, 0.3);
    }
    .form-group {
        background-color: var(--coloe-bg-primary);
        border-radius: 20px;
        padding: 10px 15px;
        border: none;
        margin-bottom: 10px;
    }
}