/* 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);
}

html[data-theme="darkly"] {
    --page-header-shadow: 0 1.5rem 3rem rgb(0 0 0 / 45%);
    --page-header-fg: #fff;
    --page-header-muted: rgba(var(--bs-light-rgb), 0.82);
}

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

.page-header h1,
.page-header h2,
.page-header h3,
.page-header .h1,
.page-header .h2,
.page-header .h3 {
    color: var(--page-header-fg) !important;
    margin-bottom: 0.5rem;
}

/* Force heading tokens inside header to use light fg */
.page-header {
    --bs-heading-color: var(--page-header-fg);
}

.page-header .header-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 180px;
    opacity: 0.35;
    pointer-events: none;
    font-size: clamp(6rem, 12vw, 8rem) !important;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767.98px) {
    .page-header {
        padding: 1.5rem;
        min-height: 0;
        margin-bottom: 1.5rem;
    }
}

html[data-theme="darkly"] .page-header .header-bg {
    opacity: 0.25;
    color: rgba(255, 255, 255, 0.4);
}

.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-primary-rgb, 13 110 253), 0.15);
    opacity: 0.5;
}

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

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

html[data-theme="darkly"] .page-header.page-header--surface .header-bg {
    color: rgba(var(--bs-primary-rgb, 13 110 253), 0.2);
    opacity: 0.4;
}

/* 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);
}

/* Bootstrap utility classes overrides */
html[data-theme="darkly"] .bg-body-tertiary,
html[data-theme="darkly"] .bg-body-secondary,
html[data-theme="darkly"] .bg-light,
html[data-theme="darkly"] .bg-white {
    background-color: #303030 !important;
}

html[data-theme="darkly"] [class*="subtle"] {
    background-color: #303030 !important;
}
