/* Smoothly animate header between expanded and compact */
header.site-header {
    transition:
        height 220ms ease,
        padding 220ms ease;
}

/* Default expanded size (your current) */
header.site-header {
    height: 250px;
}

/* Compact mode (when main scrolls) */
body.is-scrolled header.site-header {
    height: 120px;
    padding-left: 24px;
}

/* Scale logo down in compact mode */
body.is-scrolled header.site-header .site-logo {
    height: 70%;
}

/* Tighten text in compact mode */
body.is-scrolled header.site-header .brand-title {
    font-size: clamp(1.1rem, 2.4vw, 2rem);
}

body.is-scrolled header.site-header .brand-subtitle {
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    opacity: 0.9;
}


header.site-header{
    height: 250px;
    width: 100%;
    box-sizing: border-box;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 24px;

    padding-left: 100px;
    padding-right: 16px;
}

/* Background layer */
header.site-header::before{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("/images/headerbg.png");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;

    opacity: 0.6;                 /* turn the noise down */
    filter: saturate(0.8) contrast(0.90);
}

/* Dark overlay layer to improve readability */
header.site-header::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 18, 0.70),
        rgba(10, 10, 18, 0.35)
    );
}

/* Make sure logo/text sit above overlays */
header.site-header > *{
    position: relative;
    z-index: 1;
}

/* Logo */
header.site-header .site-logo{
    height: 90%;
    width: auto;
    display: block;
}

/* Text: professional, readable */
header.site-header .brand-title{
    margin: 0;
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(1.4rem, 3.6vw, 3rem);

    color: #f8fafc;                 /* near-white */
    text-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

header.site-header .brand-subtitle{
    margin: 0;
    font-weight: 650;
    line-height: 1.2;
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);

    color: rgba(248, 250, 252, 0.85);
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* Small accent that matches your theme (optional) */
header.site-header .brand-subtitle{
    border-left: 4px solid #1f8a5b;  /* green */
    padding-left: 10px;
}

/* Mobile tweak */
@media (max-width: 700px){
    header.site-header{
        padding-left: 16px;
        gap: 14px;
        height: 200px;
    }
    header.site-header .site-logo{
        height: 70%;
    }
}