/* body with pageheader colour gives that colour to masthead  */

.pageheader { background:var(--ttl_cream);
/*    --pageheader-spacing:24px;*/
    overflow: hidden;  }

.pageheader .txt header{ flex:1;  display: flex; flex-direction: column;  }
.pageheader .txt header p:not(.cta):not(.subhead) {  font-size: 28px; /*    max-width: 24em; */}
.pageheader .txt header p:not(.cta):not(.subhead)+p:not(.cta):not(.subhead) {  font-size: var(--bodytext_size); }
/*.pageheader .txt header p:not(.cta)+p:not(.cta){ font-size: var(--bodytext_size); max-width:36em; }*/
.pageheader .txt header p:not(:last-child) {  margin-bottom:1em; }


p.subhead {  margin-top: calc(0px - (var(--bodytext_size) / 2)); font-size: var(--bodytext_size); margin-bottom: var(--gutter); }


@media (prefers-color-scheme: dark) {

    .pageheader {
        background-color: var(--ttl_black) !important;
        color: #ffffff;
    }
    /* Add other style overrides here */
}



body.home .pageheader .txt header p:not(.cta):first-child { font-weight: 700; font-size: 56px; line-height: 1.2; margin-bottom: 24px;}

body.home .pageheader .txt header p:not(.cta):not(:first-child) { margin-bottom: 40px;}


@media all and (max-width:1199.98px) {
    .pageheader .txt header p:not(.cta):not(.subhead) {
        font-size: 24px;
    }
    body.home .pageheader .txt header p:not(.cta):not(.subhead):first-child,
    body.home .pageheader .txt header p.subhead+p
    {
        font-size: 40px;
    }
    body.home .pageheader .txt header p:not(.cta):not(.subhead):not(.subhead+p):not(:first-child) {
        margin-bottom: var(--gutter);
    }
}

@media all and (max-width:899.98px) {
    body.home .pageheader .txt header p:not(.cta):not(.subhead):first-child,
    body.home .pageheader .txt header p.subhead+p
    {
        font-size: 24px;margin-bottom: 16px;
    }
    .pageheader .txt header p:not(.cta):not(.subhead) {
        font-size: 20px;
    }
   /* body.home .pageheader .txt header p:not(.cta):not(.subhead):not(.subhead+p):not(:first-child) {
        font-size: 32px; margin-bottom: 16px;
    }*/

}
@media all and (max-width:599.98px) {


}


.pageheader .txt header picture{ display:block; width: 100%; height: 120px;
    position: relative;}
.pageheader .txt header img{ object-fit: contain; object-position: left top; position: absolute; top: 0; left:0; width: 100%; height: 100%;  }

.pageheader > .wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; column-gap: calc(var(--gutter) * 2);}

.pageheader > .wrapper:has(.sandwich) { align-items: center; }

.pageheader > .wrapper > :is(div) { width:calc(50% - (var(--gutter_big) / 2)); }
.pageheader > .wrapper > div.txt { flex:1; max-width:880px; display: flex; flex-direction: column; }

.pageheader {
    --padding:64px;
    padding: 0;
}

.pageheader:has(#ttl_filter),
.pageheader:has(#postmeta),
.pageheader:has(#teammeta),
.pageheader:has(.breadcrumbs)
{
    padding: var(--padding) 0;
}

.pageheader:not(:has(#ttl_filter)):not(:has(#postmeta)):not(:has(#teammeta)):not(:has(.breadcrumbs)) .txt {
    padding: var(--padding) 0;
}
/*
.pageheader:not(:has(#ttl_filter)):not(:has(#postmeta)):not(:has(#teammeta)):not(:has(.breadcrumbs)) figure.sandwich {
    margin: var(--padding) 0;
}
*/


.pageheader:has(.breadcrumbs) .breadcrumbs{
    margin-bottom:var(--padding);
}


@media all and (min-width:1200px) {
    .pageheader {  --padding:72px; }
}

@media all and (min-width:900px) {
    .pageheader:has(.breadcrumbs){
        padding-top: 0 !important;
    }
}

.pageheader > .wrapper > .image {  display: flex; flex-direction: column;
    position: relative;  width: 50%; justify-content: flex-end  }

.pageheader > .wrapper > .image > picture  {  height: auto;

    width:calc(50vw - (var(--gutter_big) / 2)); height: 100%; width: 100%;
    position: absolute; left: 0; top:0; /*display: block; width: 100%;position: relative;*/
}


/*
.pageheader > .wrapper > .image::before { display:block; content:""; width:100%; padding-bottom: 71.06481481481481%;  }
.pageheader > .wrapper > .image > picture img {   object-position: right center; right:0; top: 0; width: 100%; height: 100%; object-fit: contain; }
*/
.pageheader > .wrapper > .image > picture:not(.full) img{  object-fit: contain; }

.eyebrow { font-size: 24px; line-height: 1.2; margin-bottom:0.5em; font-weight: 700;}


@media all and (max-width:1199.98px) {

    .pageheader {
        --padding:48px ;
    }
    /*.pageheader .txt>p:not(.cta) { font-size:24px; }*/

    .pageheader .txt header picture{ height:90px; }
}
@media all and (max-width: 1023.98px) {
    .pageheader {

        border-top: var(--masthead-height) solid transparent;
    }
    .pageheader .txt:not(:last-child) { margin-bottom: var(--gutter_big); }

}
@media all and (max-width: 899.98px) {

    .pageheader > .wrapper > :is(div),
    .pageheader > .wrapper > div.txt { width:100%;}

    .pageheader > .wrapper > .image{ /*order: -1;*/ width:100%;}
    .pageheader > .wrapper > .image picture:not(.full){ /*order: -1;*/ width:100%;}
    .pageheader > .wrapper > .image picture:not(.full) img {  right:auto; left: 50% !important; transform: translateX(-50%); object-position: center !important; position: absolute;}


    .pageheader {
        --padding: 32px;

    }

    .eyebrow { font-size: 18px; }
}
@media all and (max-width: 599.98px) {

    .pageheader > .wrapper > .image::before { display:block; content:""; width:100%; padding-bottom: 100%;  }
}