html:has(.building-color) {
    background-color: var(--dark);
}

.header-main {
    /* position: absolute; */
    /* padding: 1lh; */
    width: 100%;
    grid-row: 1;
}

main {
    grid-row: 1 / 3;
}

.header-main {
    & .st2 {
        stroke: var(--white);
    }

    & .st0,
    .st1 {
        stroke: var(--white);
    }
}

footer {
    background-color: var(--dark);
}

.header-main,
.all-maps,
figcaption {
    -webkit-text-stroke: .17em black;
    paint-order: stroke fill;
}

figure {
    position: relative;

}

figure>picture>img {
    max-height: 90vh;
    width: 100%;
    object-fit: contain;
    object-position: left;
}

figcaption {
    display: block;
    padding: 1lh;
    position: absolute;
    bottom: 1lh;
    z-index: 2;
    margin: auto;
}

.block-image--full {
    width: 100vw;

    & picture img {
        max-height: unset;

    }
}

.all-maps {
    position: absolute;
    top: 2lh;
    right: 7.3lh;
    z-index: 3;
}

.all-maps[open] {
    top: 0;
    right: 0;
}


.building-color {
    background-color: var(--dark);
    color: var(--cntrst);
}



/* ------------------ Map View Everything */

/* Details Tag */

summary:hover {
    cursor: pointer;
}

details summary::-webkit-details-marker {
    /* display: none; */
}

details>summary::before {
    /* display: none; */
    content: "Map";
}


details[open]>summary::before {
    /* display: none; */
    content: "Close";
    position: absolute;
    top: 1lh;
    right: 2lh;
    z-index: 2;
}

summary:hover {
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Map View / Single Map*/

.map-view {
    background-color: var(--light);
    color: var(--black);
    position: relative;
    padding: 1lh;

    width: 100vw;
    height: 100vh;

    & .room-list {
        position: absolute;
        bottom: 2lh;
        left: 2lh;
        z-index: 2;
    }

    & svg {

        position: absolute;
        z-index: 1;
        top: 1lh;
        height: calc(100vh - 2lh);
        width: calc(100vw - 2lh);
        object-fit: contain;
    }

    & .full-drawing {
        position: absolute;
        z-index: 3;
        top: 1lh;
        height: calc(100vh - 2lh);
        width: calc(100vw - 2lh);
        margin: auto;
        object-position: center;
        object-fit: contain;

        pointer-events: none;
    }

}

/* Map View / SVG Hover ------ */

/* default rect fill */
.map-view .room {
    fill: rgba(255, 255, 255, 0);
    /* transition: fill 0.15s; */
}

/* hover rect → highlight rect */
.map-view .room:hover {
    fill: var(--cntrst);
    cursor: pointer;
}

/* hover rect → highlight matching link */
.map-view:has(.bathroom:hover) a.bathroom,
.map-view:has(.hallway:hover) a.hallway,
.map-view:has(.living-room:hover) a.living-room,
.map-view:has(.deck:hover) a.deck,
.map-view:has(.kitchen:hover) a.kitchen,
.map-view:has(.bedroom-1:hover) a.bedroom-1,
.map-view:has(.bathroom-2:hover) a.bathroom-2,
.map-view:has(.bedroom-2:hover) a.bedroom-2,
.map-view:has(.master-bedroom:hover) a.master-bedroom {
    color: var(--cntrst-d);
}

/* hover link → highlight matching rect */
.map-view:has(a.bathroom:hover) .bathroom,
.map-view:has(a.hallway:hover) .hallway,
.map-view:has(a.living-room:hover) .living-room,
.map-view:has(a.deck:hover) .deck,
.map-view:has(a.kitchen:hover) .kitchen,
.map-view:has(a.bedroom-1:hover) .bedroom-1,
.map-view:has(a.bathroom-2:hover) .bathroom-2,
.map-view:has(a.bedroom-2:hover) .bedroom-2,
.map-view:has(a.master-bedroom:hover) .master-bedroom {
    fill: var(--cntrst);
}

/* hover link → highlight link itself */
.map-view a:hover {
    color: var(--cntrst-d);
}