/* ---------------------------- PAGE LAYOUT ---------------------------------- */

body {
    background-color: var(--brown-tint-70);
    background-image: url("images/bg_page.png");
}

/* Make global header styles more specific */
#body-container > header,
header#headline {
    grid-area: header;
    background-color: #d99219;
    background-image: url(images/page_header.png);
    height: 171px;
    padding: 10px 0;
    text-align: center;
}

@media (max-width: 630px) {
    #body-container > header,
    header#headline {
        padding: 17px 0;
    }
}

/* Rest of your layout styles remain the same */
footer {
    grid-area: footer;
    background-color: #301907;
    padding: 20px;
    text-align: center;
}

#body-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    max-width: 1200px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--main-bg-color);
}

#content {
    padding: 42px 60px;
}

@media (max-width: 1000px) {
    #content {
        padding: 20px 30px 40px;
    }
}

/* ---------------------------- PAGE EDIT LINK --------------------------- */

/* Edit link styling */
#edit-link-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.edit-link {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    text-decoration: none;
    font-size: 12px;
    border-radius: 3px;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-family: monospace;
}

.edit-link:hover {
    opacity: 1;
    color: #fff;
}


/* ---------------------------- GLOBAL MAIN LAYOUT --------------------------- */

main {
    grid-area: main;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--block-gap-narrow) var(--block-gap-narrow);
}

/* Default layout for non-home pages */
main:not(.page-home main) {
    grid-template-areas:
        "main-content main-content main-content sidebar-area"
        "main-content main-content main-content sidebar-area";
}

@media (max-width: 1000px) {
    main:not(.page-home main) {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "main-content main-content"
            "sidebar-area sidebar-area";
    }
}

@media (max-width: 633px) {
    main:not(.page-home main) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "main-content"
            "sidebar-area";
    }
}

/* Grid items styling */
main > * {
    min-width: 0;
    align-self: start;
}

#main-content {
    grid-area: main-content;
}

#sidebar-area {
    grid-area: sidebar-area;
}
/* ---------------------------- GLOBAL FOOTER ------------------------------- */

/* Enhanced footer styling - Option 2: Three Column Layout - Complete */
footer {
    grid-area: footer;
    background: var(--brown-tint-90);
    padding: 2.5rem 1rem 2rem;
    position: relative;
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: stretch; /* Equal heights for all columns */
}

/* Reorder columns for desktop: contact, brand (center), location */
.footer-contact {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Keep contact aligned to top */
}

.footer-brand {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the brand content */
    align-items: center;
    text-align: center;
    height: 100%; /* Take full height of the grid row */
}

.footer-location {
    order: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Keep location aligned to top */
}

.footer-column {
    text-align: left;
}

.footer-title {
    font-family: "LobsterTwo", serif;
    color: var(--decor-color);
    font-size: 1.8rem;
    margin: 10px 0 0 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.footer-subtitle {
    font-family: "DosisSemiBold", sans-serif;
    color: var(--main-bg-soft-color);
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid var(--brown-tint-50);
    padding-bottom: 0.5rem;
}

/* Decorative element for brand column */
.footer-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.decoration-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--decor-color), transparent);
}

.decoration-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--decor-color);
}

.footer-contact-item,
.footer-location-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(247, 235, 214, 0.1);
}

.footer-contact-item:last-child,
.footer-location-item:last-child {
    border-bottom: none;
}

.footer-icon {
    color: var(--info-color);
    font-size: 1.1rem;
    min-width: 1.2rem;
}

.footer-text {
    color: var(--main-bg-color);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Responsive design - mobile layout */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        align-items: start; /* Reset to start alignment on mobile */
    }

    /* Reset order for mobile - brand first */
    .footer-brand {
        order: 1;
        height: auto; /* Remove fixed height on mobile */
        justify-content: flex-start; /* Reset vertical centering on mobile */
    }

    .footer-contact {
        order: 2;
    }

    .footer-location {
        order: 3;
    }

    .footer-column {
        text-align: center;
    }
}