/* ===== PAGE HEADER ===== */
.page-header {
    position: relative;
    padding: var(--spacing-xxl) 0;
    text-align: center;
    background-color: var(--cool-black);
    color: var(--white);
    margin-bottom: var(--spacing-xl);
    background-image: url('../images/page-header.jpg');
    border-bottom: 1px solid var(--dark-border);
    /* Responsive header setup */
    background-size: cover;
    background-position: center; /* Consistent center positioning */
    background-repeat: no-repeat;
    min-height: 250px; /* Mobile minimum height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add a dark overlay to ensure text readability */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(18, 33, 38, 0.2), rgba(18, 33, 38, 0.2));
    z-index: 1;
}

/* Tablet responsive header adjustments */
@media (min-width: 768px) {
    .page-header {
        min-height: 350px; /* Tablet height */
        padding: calc(var(--spacing-xxl) * 1.2) 0;
    }
}

/* Desktop responsive header adjustments */
@media (min-width: 1200px) {
    .page-header {
        min-height: 400px; /* Desktop height */
        padding: calc(var(--spacing-xxl) * 1.5) 0;
    }
}

/* Page header content styles */
.page-header-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 2; /* Ensure content is above background */
}