/* Wordpress Posts Component  */
/* Flex layout, image added   */
/* 2024-01-16 added wordpress namespace */
/* 2026-04-02 refactored for all templates */
/* lhw - UMC */

/*
both 1-COL & 2-COL: .main .main--level
LANDING (HIGH LEVEL): .main .main--landing .main--high
*/



/* Alternate button placement for full-width layout */
/* See min-width: 64em below for additional rules */
/*
.wordpress.news--high .news__buttons.horizontal {
	display: none;
}
.wordpress:not(.news--high) .news__buttons.horizontal {
	display: revert;
}
*/


.wordpress-posts.component.news--high > .news__buttons.horizontal {
	padding: 0rem .75rem 0 0.25rem;
}

@media print, screen and (min-width: 48em) {
	.wordpress-posts.component.news--high {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 2rem;
	}

	.wordpress-posts.component.news--high > .news__title {
		flex: 1 1 auto;
		min-width: 0;
		margin-right: auto;
		padding-bottom: 0px;
        margin-bottom: 2rem;
	}

	.wordpress-posts.component.news--high > .news__buttons.horizontal {
		flex: 0 0 auto;
		white-space: nowrap;
		padding-bottom: 0px;
        margin-bottom: 2rem;
	}

	.wordpress-posts.component.news--high > .news__intro-section,
	.wordpress-posts.component.news--high > .o-rack,
	.wordpress-posts.component.news--high > .news__buttons.vertical {
		flex: 0 0 100%;
		width: 100%;
	}
}



/* Alternate button placement for full-width layout */
/* Landing page - full-width [ .news--high ] */
/* Interior page  [ :not(.news--high) ]  */
/* overriding .news__buttons at _news.scss: li: (various) */
/* See also media query min-width: 64em  */

/* Upper horizontal button not visible by default */
.news__buttons.horizontal {
	/* display: none; */
}


/* component folio */
html#cms-inline-editor-id .wordpress.component::before, 
html#cms-inline-editor-id *[data-folio]::before,  
body.cms-editor *[data-folio]::before, 
body.cms-preview *[data-folio]::before {
	content: attr(data-folio);
    display: block;
    position: relative;
    /* height: 68px; */
    margin: 0px;
    padding: 0.3rem 0.4rem;
    background-color: #FAEEAA;
    border-radius: 8px 8px 0px 0px;
    border: 3px #BB9000 dotted;
    border-width: 3px 3px 0px 3px;
    align-content: center;
    font: bold 0.9rem / 1rem sans-serif;
    color: #665511;
    white-space: pre;
    border-bottom: 4px solid #ccb033;
}

.wordpress.component::before, 
*[data-folio]::before {
	display: none;
	content: unset;
}


html#cms-inline-editor-id .dynamic-content.wrapper, 
body.cms-editor .dynamic-content.wrapper, 
body.cms-preview .dynamic-content.wrapper {
    border-bottom: 4px #E8E8E8 dotted;
    margin-bottom: 0.5rem;
	padding: 0 1.3rem 0.5rem 1.3rem;
}


/* ========== end ========== */



/* component folio edit button */
.cms-editor *[data-folio] a.folio-edit-source, 
.cms-preview *[data-folio] a.folio-edit-source,
.cms-editor *[data-folio] div.folio-preview-source, 
.cms-preview *[data-folio] div.folio-preview-source {
	background-color: #F7DD44; /* #D0AA77; var(--cms-edit--primary-blue-550) */
	display: block;
    position: relative;
    padding: 0px 6px 4px 18px;
	padding: 3px 2px 4px 1px;
    margin: 0px;
    border-radius: 0 0 7px 7px;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
	font-size: 11px;
    font-weight: bold;
    color: #665511; /* var(--cms-edit--primary-white) */
	/* reposition to tabs */
	/* reposition to tabs */
	/* reposition to tabs */
	position: absolute;
    top: 5px;
    right: calc(0px + 1.3rem);
    overflow: hidden;
    width: 10rem;
	width: 51%;
    height: 1rem;
	height: 35%;
	height: 1.6rem;
}

.cms-editor *[data-folio] div.folio-preview-source, 
.cms-preview *[data-folio] div.folio-preview-source {
	/* reposition to tabs */
	/* reposition to tabs */
	/* reposition to tabs */
	top: 1.5rem;
	top: 47%;
	top: 2.1rem;
}

.cms-editor *[data-folio] a.folio-edit-source:hover, 
.cms-preview *[data-folio] a.folio-edit-source:hover,
.cms-editor *[data-folio] div.folio-preview-source:hover, 
.cms-preview *[data-folio] div.folio-preview-source:hover {
	background-color: #FABA40;
}
/* ========== end ========== */