/* Original vector landmarks arranged once, without a repeating tile or grid. */
body { isolation: isolate; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('../images/islamic-landmarks-names-mobile.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .34;
}
@media (min-width: 768px) {
    body::before {
        background-image: url('../images/islamic-landmarks-names.svg');
    }
}
@media print { body::before { display: none; } }

/* A quiet geometric accent that fades inward from the header edges. */
#top-area-container.top-navbar {
    background-image: url('../images/header-geometric-edge.svg'), url('../images/header-geometric-edge-right.svg');
    background-position: left top, right top;
    background-size: 240px 160px;
    background-repeat: no-repeat;
}
@media (max-width: 575.98px) {
    #top-area-container.top-navbar { background-size: 150px 100px; }
}

/* Richer footer ornaments stay at the edges and leave the links clear. */
#bottom-area-container.islambook-footer {
    background-image: url('../images/footer-islamic-edge.svg'), url('../images/footer-islamic-edge-right.svg');
    background-position: left bottom, right bottom;
    background-size: 240px 254px;
    background-repeat: no-repeat;
}
@media (max-width: 575.98px) {
    #bottom-area-container.islambook-footer { background-size: 150px 160px; }
}

/* Compact desktop header: brand, navigation and utilities share one row. */
@media (min-width: 992px) {
    #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) > .container-fluid {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "brand links welcome" !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        column-gap: 1.25rem !important;
        min-height: 60px;
    }
    #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) .navbar-brand {
        margin-block: 0 !important;
        padding-block: 0 !important;
    }
    #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) .navbar-brand img {
        max-height: 48px;
        width: auto;
    }
    #top-area-container > .container-fluid > .quran-navbar-brand-group,
    #top-area-container > .container-fluid > .islambook-nav-brand {
        grid-area: brand !important;
        align-self: center !important;
    }
    #top-area-container:has(.quran-navbar-brand-group, .islambook-nav-brand) > .container-fluid > #welcome-area {
        align-self: center !important;
    }
}

/* Muted gold divider ties the header to the geometric accents. */
#top-area-container.top-navbar {
    box-shadow: 0 1px 0 rgba(198, 175, 119, .65);
}

/* Match the header divider along the top edge of the footer. */
#bottom-area-container.islambook-footer {
    box-shadow: 0 -1px 0 rgba(198, 175, 119, .65);
}