@import url(../css/main.css);

.holy-grail-layout{
    font-family: 'Work Sans', sans-serif;
    gap: var(--space-lg);
    min-height: 100vh;
    max-width: 100%;
    margin: auto;
    background-color: var(--background-day);
    color: var(--primary-font);
    grid-template-columns: 16rem auto;
    grid-template-rows: 6rem auto 6rem;
    grid-template-areas:
        "side-nav top-nav"
        "side-nav content"
        "side-nav cta-footer"
} 

.side-nav{
    grid-area: side-nav;
}

.top-nav{
    grid-area: top-nav;
}

pre{
    white-space: pre-wrap;
}

/* Sidebar Starts  */
.side-nav{
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-lg);
    position: sticky;
    top: 0rem;
    justify-content: start;
    max-height: 100vh;
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;
    color: var(--secondary-font);
    border-radius: 0 var(--space-sm) var(--space-sm) 0;
}


.side-nav::-webkit-scrollbar {
    display: none;
  }

.sub-title{
    color: var(--primary);
    font-weight: bold;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--space-xs);
    background-color: var(--green-hover);
}

.sub-list-items{
    margin-bottom: var(--space-xs);
    display: flex;
    justify-content:flex-start;
    align-items: end;
    padding: var(--space-xs) 0;
}

.sub-list-items:hover{
    background-color: var(--primary-light);
    color: var(--background-day);
    border-radius: var(--radius-sm);
}

.sub-list-items span{
    margin-right: var(--space-sm);
}

/* Sidebar Ends  */


.content{
    grid-area: content;
    max-width: 85%;
    margin: 0 var(--space-lg) 0 var(--space-xs);
}

.cta-footer{
    grid-area: cta-footer;
    justify-content: space-between;
    align-items: flex-start;
    margin-right: var(--space-lg);
}

.component-container{
    border: solid 2px var(--gray-opaque);
    border-radius: var(--space-xs);
    max-width: 100%;
    gap: 1rem;
    padding: var(--space-md) var(--space-lg);
}

p{
    color: var(--secondary-font);
}
@media screen and (max-width: 992px) {
    .side-nav{
        display: none !important;
    }
    .content{
        margin: 0 auto;
    }
    .holy-grail-layout{
        width: 100vw;
        margin: 0 auto;
        padding: 1rem;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "top-nav"
        "content"
        "cta-footer";
    }
    .top-nav{
        width: 90%;
        margin: 0 auto;
    }
    .component-container{
        justify-content: center;
    }
    .nav-links{
        display: flex;
        flex-direction: column;
    }
}