/* container-query headings group top of page, version 2 K.Purtell */

:root {
--cq-pad-gap:1.2rem;
}

/* Wrapper to control the width and enable resize */
.targeted #main.content .header-wrapper {
min-width: 300px;
/* overflow: hidden; blocks banner */
width: 100%;
}

/* Container query context - the headings box */
.targeted #main.content #top .contain_header {
    align-items: center;
    background-image: linear-gradient(to top right, #C3D7FF 0%, rgb(195 215 255 / 0%) 100%);
    background-repeat: no-repeat;
    border: none;
    container-name: headings-container;
    container-type: inline-size;
    display: flex;
    height: auto;
    justify-content: center;
    margin-bottom: .3em;
    padding:var(--cq-pad-gap);
    width:clamp(335px, 100%, 803px)
}

@media only screen and (width <= 767px) /*phones*/ {
/* Centering box - no margin, no padding, holds the headings */
.targeted #main.content #content1 {
/* Stack headings vertically with consistent gap */
display: flex;
flex-direction: column;
gap:var(--cq-pad-gap) !important; /* Visual vertical space between headings */
margin: 0;
padding: 0;
text-rendering:optimizeLegibility;
}
}

@media only screen and (width >= 768px) /* DESKTOP */ {
.targeted #main.content #content1 {
display: flex;
flex-direction: column;
gap:var(--cq-pad-gap) !important; /* Visual vertical space between headings */
margin: 0;
padding: 0;
    /* Stack headings vertically with consistent gap */
text-rendering:optimizeLegibility;
max-width: 100%;
}}

/* Headings - no top/bottom margin to simplify spacing */
.targeted #main.content #content1 h1 {
    color:#333;
    line-height: 0.92;
    margin: 0;
    overflow-wrap: break-word;
    text-align: left;
text-box-trim:trim-both;
    text-shadow: 3px 2px 5px rgba(255, 255, 255, 0.4);
}
.targeted #main.content #content1 h2,
.targeted #main.content #content1 h3 {
    color:#333;
    line-height: 1.0;
    margin: 0;
    overflow-wrap: break-word;
    text-align: left;
text-box-trim:trim-both;
    text-shadow: 3px 2px 5px rgba(255, 255, 255, 0.4);
}

/* Container query with minimum font sizes */
@container headings-container (min-width: 0px) {
.targeted #main.content #content1 h1 {
font-size: max(2.9em, 2.9cqi);/* variant .9 */
font-weight: 900;
text-box-trim:trim-both; /* via devtools */
    }

/* H2: 1.28x larger than H3 (gradual increase), minimum 1.5em */
.targeted #main.content #content1 h2 {
font-size: max(1.7em, 1.7cqi);
font-weight: 800;
text-box-trim:trim-both; /* via devtools */
text-transform:uppercase;
}

/* H3: minimum 1.17em, scales with container */
.targeted #main.content #content1 h3 {
font-size: max(1.2em, 1.2cqi);
font-weight: 800;
text-box-trim:trim-both; /* via devtools */
}
}

.other #main #top > .flex-contain-row,
.targeted #main #top > .flex-contain-row, 
body.targeted #main.content #top > div.flex-contain-row {
align-items: center;
border: 1px solid #aaa;
color: #666;
display: flex;
flex-direction: column;
font-weight: 400;
justify-content: space-between;
line-height: 1.1em;
margin: 0 0 0.4rem;
max-height: 3em;
max-width: 100%;
padding: .35em;
}
.other #main #top > .flex-contain-row,
.targeted #main #top > .flex-contain-row div, 
body.targeted #main.content #top > div.flex-contain-row div {
margin:0;
}

@media only screen and (width >= 768px) /* DESKTOP */ {
.other #main #top > .flex-contain-row,
.targeted #main #top > .flex-contain-row, 
body.targeted #main.content #top > div.flex-contain-row {
align-items: center;
border: 1px solid #aaa;
color: #666;
display: flex;
flex-direction: row;
font-weight: 400;
justify-content: space-between;
line-height: 1.1em;
margin: 0 0 .4rem;/* was  */
max-height: 2em;
max-width:803px;
padding: .35em;
}
.other #main #top > .flex-contain-row div,
.targeted #main #top > .flex-contain-row div, 
body.targeted #main.content #top > div.flex-contain-row div {
margin:0;
}}

#top > .flex-contain-row > .flex-item, 
#top.page-header .flex-contain-row .flex-item {
border: none;
margin-bottom: .15em;
outline: none;
text-box-trim:trim-both;
}

#top>.flex-contain-row>.flex-item.byline {
flex-grow: 2;
font-style: italic;
margin-right: auto;
text-box-trim:trim-both;
white-space: nowrap;
}

#top .flex-contain-row .flex-item.space {
display: none;
flex-grow: 1;
}

#top > .flex-contain-row > .flex-item.updated {
flex-grow: 1;
margin-left:auto;
max-width: 65%;
text-align: right;
text-box-trim:trim-both;
white-space: nowrap;
}

#top > .flex-contain-row > .flex-item {
border: none;
margin-bottom: .15em;
outline: none;
text-box-trim:trim-both;
}