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

The Resource Hub
Patient Access Center Learning Resource Hub

File:
components.css

Version:
1.0 Alpha

Sprint:
2.1

Story:
TRH-001E

Description:
Reusable UI Components

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

/* ==================================================
   Card
================================================== */

.rh-card {

    background: var(--color-background);

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

    border-radius: var(--radius-lg);

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

    padding: var(--space-lg);

    transition: all var(--transition-fast);

}

.rh-card:hover {

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

    transform: translateY(-2px);

}

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

.rh-section-title {

    color: var(--color-primary);

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

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

}

/* ==================================================
   Button
================================================== */

.rh-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    padding: .75rem 1.5rem;

    border: none;

    border-radius: var(--radius-md);

    background: var(--color-primary);

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

    cursor: pointer;

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

    transition: all var(--transition-fast);

}

.rh-button:hover {

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

}

/* ==================================================
   Information Tile
================================================== */

.rh-tile {

    background: var(--color-surface);

    border-left: 4px solid var(--color-primary);

    padding: var(--space-md);

    border-radius: var(--radius-md);

}

/* ==================================================
   Reminder Panel
================================================== */

.rh-reminder {

    background: var(--color-surface);

    border-left: 6px solid var(--color-warning);

    padding: var(--space-lg);

    border-radius: var(--radius-md);

}

/* ==================================================
   Badge
================================================== */

.rh-badge {

    display: inline-block;

    padding: .35rem .75rem;

    background: var(--color-accent);

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

    border-radius: 999px;

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

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

}
/* ==================================================
   Experience Selector
================================================== */

.rh-experience-options {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-lg);

}

.rh-experience-option {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 130px;

    padding:
        var(--space-lg)
        var(--space-xl);

    background: var(--color-background);

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

    border-radius: var(--radius-lg);

    color: var(--color-text);

    text-align: center;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);

}

.rh-experience-option:hover {

    border-color: var(--color-accent);

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

    transform: translateY(-2px);

}

.rh-experience-option:focus-visible {

    outline: 3px solid var(--color-accent);

    outline-offset: 3px;

}

.rh-experience-option.is-selected {

    background: var(--color-surface);

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

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

}

.rh-experience-option-title {

    display: block;

    color: var(--color-primary);

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

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

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

}

.rh-experience-option-description {

    display: block;

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

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

    line-height: 1.4;

}
/* ==================================================
   Dashboard Resource Grid
================================================== */

.rh-resource-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: var(--space-lg);

}


/* ==================================================
   Highlight Card
================================================== */

.rh-highlight-card {

    display: flex;

    min-height: 240px;

    background:
        var(--color-background);

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

    border-top:
        5px solid var(--color-primary);

    border-radius:
        var(--radius-lg);

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

    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast);

}

.rh-highlight-card:hover {

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

    transform:
        translateY(-2px);

}


.rh-highlight-card-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 100%;

    padding:
        var(--space-lg);

}


.rh-highlight-card-title {

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

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

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

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

}


.rh-highlight-card-description {

    flex: 1;

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

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

}


/* ==================================================
   Secondary Button
================================================== */

.rh-button-secondary {

    background:
        var(--color-surface);

    color:
        var(--color-primary);

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

}


.rh-button-secondary:hover {

    background:
        var(--color-primary);

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

}


/* ==================================================
   Empty State
================================================== */

.rh-empty-state {

    padding:
        var(--space-xl);

    background:
        var(--color-surface);

    border-radius:
        var(--radius-md);

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

    text-align:
        center;

}
/* ==================================================
   Accessibility Utilities
================================================== */

.rh-visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}
/* ==================================================
   Frequently Used Resource Card
================================================== */

.rh-resource-card {

    display: flex;

    min-height: 220px;

    background:
        var(--color-background);

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

    border-radius:
        var(--radius-lg);

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

    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast);

}

.rh-resource-card:hover {

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

    transform:
        translateY(-2px);

}


.rh-resource-card-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 100%;

    padding:
        var(--space-lg);

}


.rh-resource-card-title {

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

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

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

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

}


.rh-resource-card-description {

    flex: 1;

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

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

}


/* ==================================================
   Quick Access
================================================== */

.rh-quick-access {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap:
        var(--space-md);

}


.rh-quick-access-item {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-height: 120px;

    padding:
        var(--space-lg);

    background:
        var(--color-surface);

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

    border-radius:
        var(--radius-md);

    color:
        var(--color-text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}


.rh-quick-access-item:hover {

    background:
        var(--color-background);

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

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

}


.rh-quick-access-item:focus-visible {

    outline:
        3px solid var(--color-accent);

    outline-offset:
        3px;

}


.rh-quick-access-title {

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

    color:
        var(--color-primary);

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

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

}


.rh-quick-access-description {

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

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

    line-height:
        1.4;

}
/* ==================================================
   Dashboard Search
================================================== */

.rh-search-placeholder {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap:
        var(--space-sm);

    align-items: end;

    padding:
        var(--space-lg);

    background:
        var(--color-surface);

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

    border-radius:
        var(--radius-lg);

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

}


.rh-search-placeholder label {

    grid-column:
        1 / -1;

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

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

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

}


.rh-search-placeholder input {

    width:
        100%;

    min-height:
        48px;

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

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

    border-radius:
        var(--radius-md);

    background:
        var(--color-background);

    color:
        var(--color-text);

    font-family:
        var(--font-family);

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

}


.rh-search-placeholder input:focus {

    outline:
        3px solid var(--color-accent);

    outline-offset:
        2px;

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

}


/* ==================================================
   Search Button
================================================== */

.rh-search-placeholder .rh-button {

    min-height:
        48px;

}
/* ==================================================
   Experience Selector Refinement
================================================== */

.rh-experience-option {

    min-height:
        118px;

    padding:
        var(--space-lg);

}


.rh-experience-option-title {

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

    line-height:
        1.2;

}


.rh-experience-option-description {

    max-width:
        220px;

}
/* ==================================================
   Highlight Refinement
================================================== */

.rh-highlight-card {

    border-top-width:
        6px;

}


.rh-highlight-card-content {

    padding:
        var(--space-xl);

}


.rh-highlight-card-title {

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

}
/* ==================================================
   Sidebar Navigation
================================================== */

.rh-sidebar-brand {

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

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

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

}


.rh-sidebar-brand-title {

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

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

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

    line-height:
        1.2;

}


.rh-sidebar-brand-version {

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

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

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

}


.rh-sidebar-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-xs);

}


.rh-sidebar-nav-item {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        44px;

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

    border:
        none;

    border-radius:
        var(--radius-md);

    background:
        transparent;

    color:
        var(--color-text);

    font-family:
        var(--font-family);

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

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);

}


.rh-sidebar-nav-item:hover {

    background:
        var(--color-accent);

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

}


.rh-sidebar-nav-item.is-active {

    background:
        var(--color-primary);

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

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

}


.rh-sidebar-nav-item:focus-visible {

    outline:
        3px solid var(--color-accent);

    outline-offset:
        2px;

}
/* ==================================================
   Resource Pages
================================================== */

.rh-resource-page {

    max-width:
        1100px;

    margin:
        0 auto;

}


.rh-resource-header {

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

}


.rh-resource-purpose {

    max-width:
        800px;

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

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

}


/* ==================================================
   Resource Metadata
================================================== */

.rh-resource-meta {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-md);

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

}


.rh-meta-tile {

    padding:
        var(--space-md);

    background:
        var(--color-surface);

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

    border-radius:
        var(--radius-md);

}


.rh-meta-label {

    display:
        block;

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

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

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

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

    text-transform:
        uppercase;

}


.rh-meta-value {

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

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

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

}


/* ==================================================
   Resource Sections
================================================== */

.rh-resource-section {

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

}


.rh-callout {

    padding:
        var(--space-lg);

    background:
        var(--color-surface);

    border-left:
        5px solid var(--color-primary);

    border-radius:
        var(--radius-md);

}


/* ==================================================
   Actions
================================================== */

.rh-action-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-lg);

}


.rh-action-placeholder {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        var(--space-md);

    padding:
        var(--space-lg);

    background:
        var(--color-background);

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

    border-radius:
        var(--radius-lg);

}


.rh-action-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    background:
        var(--color-primary);

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

    border-radius:
        50%;

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

}


.rh-action-content h3 {

    margin-top:
        0;

}


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

.rh-resource-footer {

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

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

}


/* ==================================================
   Error Page
================================================== */

.rh-error-page {

    max-width:
        700px;

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

    text-align:
        center;

}


.rh-error-page h1 {

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

}
/* ==================================================
   Application Header
================================================== */

.rh-header-content {

    display:
        flex;

    align-items:
        center;

    min-height:
        var(--header-height);

    padding:
        0 var(--space-xl);

}


.rh-header-brand {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    padding:
        0;

    border:
        none;

    background:
        transparent;

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

    font-family:
        var(--font-family);

    text-align:
        left;

    cursor:
        pointer;

}


.rh-header-title {

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

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

}


.rh-header-version {

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

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

    opacity:
        .8;

}


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

.rh-footer-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--space-md);

    flex-wrap:
        wrap;

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

}


.rh-footer-motto {

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

}


.rh-footer-version {

    opacity:
        .75;

}
/* ==================================================
   Resource Page Template
================================================== */

.rh-resource-page {

    max-width:
        1100px;

    margin:
        0 auto;

}


.rh-resource-header {

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

}


.rh-resource-purpose {

    max-width:
        800px;

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

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

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

    line-height:
        1.6;

}


/* ==================================================
   Resource Metadata
================================================== */

.rh-resource-meta {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--space-md);

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

}


.rh-meta-tile {

    padding:
        var(--space-md);

    background:
        var(--color-surface);

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

    border-radius:
        var(--radius-md);

}


.rh-meta-label {

    display:
        block;

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

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

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

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

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

}


.rh-meta-value {

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

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

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

}


/* ==================================================
   Resource Sections
================================================== */

.rh-resource-section {

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

}


.rh-section-title {

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

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

}


.rh-callout {

    padding:
        var(--space-lg);

    background:
        var(--color-surface);

    border-left:
        5px solid var(--color-primary);

    border-radius:
        var(--radius-md);

}


.rh-remember-list {

    margin:
        0;

    padding-left:
        var(--space-lg);

}


.rh-remember-list li + li {

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

}


/* ==================================================
   Supporting Content
================================================== */

.rh-supporting-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-md);

}


.rh-supporting-item {

    padding:
        var(--space-lg);

    background:
        var(--color-background);

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

    border-radius:
        var(--radius-md);

}


/* ==================================================
   Related Resources
================================================== */

.rh-related-resources {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap:
        var(--space-md);

}


.rh-related-resource {

    padding:
        var(--space-md);

    background:
        var(--color-surface);

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

    border-radius:
        var(--radius-md);

    color:
        var(--color-primary);

    font-family:
        var(--font-family);

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

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

    text-align:
        left;

    cursor:
        pointer;

}


.rh-related-resource:hover {

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

    background:
        var(--color-background);

}
/* ==========================================
   Resource Template Responsive Behavior
========================================== */

@media (max-width: 768px) {

    .rh-resource-page {

        width:
            100%;

    }

    .rh-resource-meta {

        grid-template-columns:
            1fr;

    }

    .rh-resource-purpose {

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

    }

    .rh-resource-section {

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

    }

}