/* Common Subpage Header & Breadcrumbs Styling */

.sub-page-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-bg-white);
    padding: 4.5rem 0;
    text-align: center;
    position: relative;
    border-bottom: 3px solid var(--color-accent);
}

.sub-page-header h1 {
    color: var(--color-bg-white);
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
}

.breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.85);
    transition: var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

.breadcrumbs span {
    color: var(--color-accent);
}