/* Containing div for page content */
#full-height {
    width: 100vw;
    height: 100vh;
}

/* ####################### */
/* # Home content styles # */
/* ####################### */
/* div taking up full height of content */
#home-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - var(--nav-height));
}
/* Grid layout for flooplan */
#floorplan-grid {
    display: grid;
    grid-template-areas: 
            "r r r s s s"
            "r r r s s s"
            "r r r . b b"
            "l l l . b b"
            "l l l . b b"
            "l l l . . ."
            "k k k k w w"
            "k k k k w w";
    gap: 2px;
    width: 60vh;
    height: 80vh;
    border: 2px solid var(--dark-blue);
    background-color: rgb(226, 226, 226);
}
/* Generic class for all rooms in floorplan */
#floorplan-grid > div {
    position: relative;
    outline: 2px solid var(--dark-blue);
    background-size: cover;
    cursor: pointer;
}
/* Invisible link over room */
#floorplan-grid> div > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* div containing link and chevron */
#floorplan-grid > div div {
    position: absolute;
    top:50%;
    font-size: 2.5rem;
    text-align: center;
}
/* Removing default underline from a tag */
#floorplan-grid> div div a { text-decoration: none; }
/* Left label */
.left-label {
    left: 0;
    transform: translate(-110%, -50%);
}
/* Right label */
.right-label {
    right: 0;
    transform: translate(110%, -50%);
}
/* Hover effects for rooms */
#floorplan-grid> div:hover { filter: brightness(1.05); }
#floorplan-grid > div:hover div { opacity: 0.8; }
#floorplan-grid > div:hover a { text-decoration: underline; }

/* All rooms in house */
#kitchen-area {
    grid-area: k;
    background-color: var(--kitchen);
    background-image: url(./assets/kitchen_details.svg);
}
#kitchen-area:hover { 
    box-shadow: inset 0 0 10px var(--kitchen-dark);
}
#living-room-area {
    grid-area: l;
    background-color: var(--living-room);
    background-image: url(./assets/living_room_details.svg);
}
#living-room-area:hover {
    box-shadow: inset 0 0 15px var(--living-room-dark);
}
#bedroom-area {
    grid-area: r;
    background-color: var(--bedroom);
    background-image: url(./assets/bedroom_details.svg);
}
#bedroom-area:hover {
    box-shadow: inset 0 0 15px var(--bedroom-dark);
}
#laundry-area {
    grid-area: w;
    background-color: var(--laundry);
    background-image: url(./assets/laundry_details.svg);
}
#laundry-area:hover {
    box-shadow: inset 0 0 15px var(--laundry-dark);
}
#bathroom-area {
    grid-area: b;
    background-color: var(--bathroom);
    background-image: url(./assets/bathroom_details.svg);
}
#bathroom-area:hover {
    box-shadow: inset 0 0 15px var(--bathroom-dark);
}
#study-area {
    grid-area: s;
    background-color: var(--study);
    background-image: url(./assets/study_details.svg);
}
#study-area:hover {
    box-shadow: inset 0 0 15px var(--study-dark);
}

@media (max-width: 900px) {
    /* Adjust size of house for mobile */
    #floorplan-grid {
        width: 45vh;
        height: 60vh;
    }
    /* Move room labels to centre of rooms */
    #floorplan-grid > div > div {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.2rem;
    }
    /* Blue room art */
    #floorplan-grid > div > a {
        backdrop-filter: blur(2.5px);
    }
    /* Hide arrow chevrons */
    #floorplan-grid > div > div > span {
        display: none;
    }
}