/* Common page headers for Indy Hub */

:root {
    --page-header-radius: var(--bs-border-radius-xl, 1.25rem);
    --page-header-shadow: var(--bs-box-shadow-lg, 0 1.5rem 3rem rgb(0 0 0 / 20%));
    --page-header-bg: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.92) 0%,
        rgba(var(--bs-secondary-rgb, var(--bs-primary-rgb)), 0.85) 100%
    );
    --page-header-fg: var(--bs-light, #f8f9fa);
    --page-header-muted: rgba(var(--bs-light-rgb), 0.85);
}

[data-bs-theme="dark"] {
    --page-header-shadow: 0 1.5rem 3rem rgb(0 0 0 / 45%);
    --page-header-muted: rgba(var(--bs-light-rgb), 0.7);
}

.page-header {
    background: var(--page-header-bg);
    border-radius: var(--page-header-radius);
    color: var(--page-header-fg);
    padding: 2.5rem 2rem 2rem 2rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--page-header-shadow);
    position: relative;
    overflow: hidden;
}

.page-header h1 {
    color: var(--page-header-fg);
    margin-bottom: 0.5rem;
}

.page-header .header-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 180px;
    opacity: 0.16;
    pointer-events: none;
    font-size: clamp(6rem, 12vw, 8rem);
    color: rgba(var(--bs-light-rgb), 0.22);
}

[data-bs-theme="dark"] .page-header .header-bg {
    opacity: 0.12;
}

.page-header .description {
    color: var(--page-header-muted);
    margin-bottom: 0;
}

.page-header.page-header--surface {
    background: var(--bs-tertiary-bg, var(--bs-body-bg));
    color: var(--bs-emphasis-color, var(--bs-body-color));
    box-shadow: var(--page-header-shadow);
}

.page-header.page-header--surface h1,
.page-header.page-header--surface .description {
    color: var(--bs-body-color);
}

.page-header.page-header--surface .header-bg {
    color: rgba(var(--bs-secondary-rgb, 108 117 125), 0.18);
}

[data-bs-theme="dark"] .page-header.page-header--surface {
    background: rgba(var(--bs-light-rgb), 0.08);
    color: rgba(var(--bs-light-rgb), 0.92);
}

[data-bs-theme="dark"] .page-header.page-header--surface .description {
    color: rgba(var(--bs-light-rgb), 0.7);
}

[data-bs-theme="dark"] .page-header.page-header--surface .header-bg {
    color: rgba(var(--bs-light-rgb), 0.2);
}

/* Specific icons for different pages */
.page-header .fa-industry,
.page-header .fa-scroll,
.page-header .fa-briefcase,
.page-header .fa-copy,
.page-header .fa-handshake,
.page-header .fa-list,
.page-header .fa-database,
.page-header .fa-key,
.page-header .fa-cogs {
    font-size: 2.5rem;
}

/* Ensure main content area background matches theme */
main {
    background-color: var(--bs-body-bg);
}
