/*
====================================================

The Resource Hub
Patient Access Center Learning Resource Hub

File:
layout.css

Version:
1.0 Alpha

Sprint:
2.1

Story:
TRH-001D

Description:
Application Layout

====================================================
*/

/* ==================================================
   Global Reset
================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==================================================
   Application Shell
================================================== */

.rh-app {
    display: grid;

    grid-template-rows:
        var(--header-height)
        1fr
        auto;

    min-height: 100vh;

    background: var(--color-background);
}

/* ==================================================
   Main Layout
================================================== */

.rh-layout {

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        1fr;

    min-height: calc(100vh - var(--header-height));

}

/* ==================================================
   Header
================================================== */

#app-header {

    background: var(--color-primary);

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-md);

    z-index: 1000;

}

/* ==================================================
   Sidebar
================================================== */

#app-sidebar {

    background: var(--color-surface);

    border-right: 1px solid var(--color-border);

    padding: var(--space-lg);

}

/* ==================================================
   Main Content
================================================== */

#app-content {

    padding: var(--space-xl);

    background: var(--color-background);

}

/* ==================================================
   Footer
================================================== */

#app-footer {

    background: var(--color-primary-dark);

    color: var(--color-text-inverse);

    padding: var(--space-md);

    text-align: center;

}

/* ==================================================
   Loading State
================================================== */

.rh-loading {

    max-width: 900px;

    margin: auto;

    text-align: center;

    padding-top: var(--space-xxl);

}

.rh-loading hr {

    width: 120px;

    border: none;

    border-top: 2px solid var(--color-accent);

    margin:
        var(--space-xl)
        auto;

}
/* ==================================================
   Dashboard Sections
================================================== */

.rh-dashboard {

    width: 100%;

}


.rh-dashboard-header {

    margin-bottom:
        var(--space-xl);

}


.rh-dashboard-intro {

    max-width:
        850px;

}


.rh-eyebrow {

    margin-bottom:
        var(--space-xs);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


.rh-dashboard-motto {

    margin-bottom:
        var(--space-sm);

    color:
        var(--color-primary-dark);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-bold);

}


.rh-dashboard-description {

    max-width:
        700px;

    color:
        var(--color-text-light);

}


.rh-dashboard-search {

    margin-bottom:
        var(--space-xxl);

}


.rh-dashboard-section,
.rh-experience-section {

    margin-bottom:
        var(--space-xxl);

}


.rh-section-heading {

    margin-bottom:
        var(--space-lg);

}


.rh-section-description {

    max-width:
        700px;

    color:
        var(--color-text-light);

}
/* ==================================================
   Dashboard Visual Hierarchy
================================================== */

.rh-dashboard-header {

    padding-bottom:
        var(--space-md);

    border-bottom:
        1px solid var(--color-border);

}

.rh-dashboard-header h1 {

    margin-bottom:
        var(--space-sm);

}


/* ==================================================
   Section Heading
================================================== */

.rh-section-heading {

    position: relative;

}

.rh-section-heading::after {

    content: "";

    display: block;

    width: 48px;

    height: 3px;

    margin-top:
        var(--space-md);

    background:
        var(--color-primary);

    border-radius:
        999px;

}


/* ==================================================
   Search Container
================================================== */

.rh-dashboard-search {

    position: relative;

    z-index: 2;

}


/* ==================================================
   Resource Section Spacing
================================================== */

.rh-dashboard-section + .rh-dashboard-section {

    margin-top:
        var(--space-xxl);

}