/*
    rezw-themed-page.css
    Page header and footer styling
*/

/* Extends the Artsy theme...
*/
@import "rz-themed-page.css";
@import "rezw-icons.css" layer( tenant );

@layer tenant {
    /* theme overrides
    */
    .rz-themed {
        --rz-page-head-sz : 1.1rem;
        --rz-header-bg: white;
        --rz-header-shadow: 0 2px 4px rgba(0,0,0,0.1);
        --rz-primary-color: #2c3e50;
        --rz-hover-color: #3498db;
    }

    body.rz-themed {
        --rz-ff : 'Open Sans', 'Roboto', sans-serif;
        padding: 20px;
    }

    /* Enhanced masthead styling */
    body.rz-themed > header.masthead {
        background: var(--rz-header-bg);
        box-shadow: var(--rz-header-shadow);
        padding: 1rem 2rem;
        min-height: 5em;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    body.rz-themed > header.masthead .row {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    body.rz-themed > header.masthead .brand {
        flex: 0;
        display: flex;
        align-items: center;
    }

    body.rz-themed > header.masthead .brand img.logo {
        height: auto;
        max-height: 60px;
        width: auto;
        max-width: 200px;
        object-fit: contain;
    }

    body.rz-themed > header.masthead .slogan {
        font-size: 1.2rem;
        color: var(--rz-primary-color);
        font-weight: 500;
    }

    body.rz-themed > header.masthead a {
        color: var(--rz-primary-color);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    body.rz-themed > header.masthead a:hover {
        color: var(--rz-hover-color);
    }

    /* Set up our standard page footer
    */
    body.rz-themed > footer {
        --rz-pad           : 0.5em 1em;
    }
    body.rz-themed > footer p {
        margin          : 0 0 0.5em;
    }
    body.rz-themed > footer nav>ul {
        margin          : 0;
    }
    body.rz-themed > footer a,
    body.rz-themed > footer a:visited {
        color           : navajowhite;
    }

    body.rz-themed .-flex-row {
        display: flex;
        flex-direction: row;
    }
    body.rz-themed .-flex-row > .w0 {
        flex: 0;
    }
    body.rz-themed .-flex-row > .w1 {
        flex: 1;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        body.rz-themed > header.masthead .row {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }

        body.rz-themed > header.masthead .brand {
            justify-content: center;
        }
    }

    /* Add mobile portrait styles */
    @media screen and (max-width: 768px) and (orientation: portrait) {
    

        body.rz-themed > header.masthead {
            padding: 0;
            border-radius: 0;
        }

    }
}