/**
 * File: page-banner.css
 * Location: /css/page-banner.css
 * Last Modified: 2025-06-11 23:05:00
 * 
 * Description:
 * Standardized styling for page banners and breadcrumb sections across the site.
 * Based on the contact.php design as the official standard for all pages.
 * Ensures consistent left-justified text and proper link styling.
 * Uses CSS variables from the :root defined in header.php
 */

/**
 * Page Banner & Breadcrumb Standardization
 * Exact styling from contact.php to be used as standard across all pages
 */
.page-banner {
    background-color: var(--color-breadcrumb-bg);
    padding: 40px 0;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
    text-align: left;
}

.page-banner .container {
    padding: 10px 30px;
}

.page-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 15px;
    text-align: left;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    text-align: left;
}

.breadcrumb-item {
    list-style-type: none;
}

.breadcrumb-item a {
    color: var(--color-breadcrumb-link); /* Specific color requested for breadcrumb links */
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #000;
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #6c757d;
    content: "/";
}

/* Remove any list-style bullets that might be appearing */
ol.breadcrumb {
    list-style-type: none;
    padding-left: 0;
}

/* Make sure breadcrumb is displayed horizontally */
.breadcrumb-item {
    display: inline-block;
}

/* Media queries for responsive design */
@media (max-width: 767px) {
    .page-banner {
        padding: 30px 0;
    }
    
    .page-title {
        font-size: 28px;
    }
}