/*
 * "What's new" panel - one markup, two skins.
 * The panel is printed once into an inert <template> and moved to whichever
 * trigger was clicked, so the images are only requested when it is opened.
 *
 * @since 8.0
 */

:root{
	--av-news-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 14.8a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM2.4 9.1a1 1 0 0 1 1-1 9.9 9.9 0 0 1 9.9 9.9 1 1 0 1 1-2 0 7.9 7.9 0 0 0-7.9-7.9 1 1 0 0 1-1-1zm0-5.7a1 1 0 0 1 1-1A15.6 15.6 0 0 1 19 18a1 1 0 1 1-2 0A13.6 13.6 0 0 0 3.4 4.4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
	--av-news-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 13.4a1 1 0 0 1-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L10 11l4.29-4.3a1 1 0 1 1 1.42 1.42l-5 5a1 1 0 0 1-.71.28z'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   trigger: WP admin bar
   ---------------------------------------------------------------------------- */
#wpadminbar #wp-admin-bar-av-news .ab-item{
	display: flex;
	align-items: center;
	gap: 6px;
}
#wpadminbar #wp-admin-bar-av-news .av-news-ab-icon{
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: currentColor;
	opacity: .75;
	-webkit-mask: var(--av-news-icon) center / 16px 16px no-repeat;
	mask: var(--av-news-icon) center / 16px 16px no-repeat;
}
#wpadminbar #wp-admin-bar-av-news .av-news-badge,
#avia_options_page .av-news-trigger-options .av-news-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	max-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: #2271b1;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
}
#wpadminbar #wp-admin-bar-av-news.av-news-open .ab-item{
	background: #32373c;
}

/* ----------------------------------------------------------------------------
   trigger: Enfold options header
   ---------------------------------------------------------------------------- */
/*
 * The header cell gives up its padding so the trigger can own the whole box - that is
 * what lets the hover state cover the cell edge to edge instead of a strip inside it.
 * Its height carries the 20px the padding used to add, so the sidebar header still
 * lines up with the one in the content column.
 */
body.av-news-has-options-trigger #avia_options_page .avia_options_page_sidebar .avia_header{
	padding: 0;
}
.av-news-trigger-options{
	box-sizing: border-box;
	display: flex;
	align-items: center;			/* keeps the caret centred against both lines */
	gap: 4px;
	width: 100%;
	height: 100%;
	padding: 20px;
	text-decoration: none;
	box-shadow: none;
	color: #444;
	line-height: 1.35;
	transition: background-color .15s ease;
}
.av-news-trigger-options .av-news-ab-icon{
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background: currentColor;
	color: #2271b1;
	-webkit-mask: var(--av-news-icon) center / 14px 14px no-repeat;
	mask: var(--av-news-icon) center / 14px 14px no-repeat;
}
/* takes the free space so the two lines ellipsis instead of pushing the caret out */
.av-news-trigger-options .av-news-options-text{
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.av-news-trigger-options:hover,
.av-news-trigger-options:focus{
	background: #f1f1f1;
	color: #2271b1;
	box-shadow: none;
}
.av-news-trigger-options.av-news-open{
	background: #f1f1f1;
}
/*
 * Same #avia_options_page prefix as the shared badge rule above, or that one wins on
 * specificity and the badge goes back to 28px - which is exactly the width the label
 * needs to avoid ellipsing in a 146px column.
 */
#avia_options_page .av-news-trigger-options .av-news-badge{
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	font-size: 10px;
	line-height: 16px;
	width: 16px;
}
.av-news-trigger-options .av-news-caret{
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
	background: currentColor;
	-webkit-mask: var(--av-news-caret) center / 11px 11px no-repeat;
	mask: var(--av-news-caret) center / 11px 11px no-repeat;
	transition: transform .15s ease;
}
.av-news-trigger-options.av-news-open .av-news-caret{
	transform: rotate( 180deg );
}
/*
 * The sidebar column is 146px wide and this row carries an icon, a label, a badge and
 * a caret. Small caps with letter spacing did not fit once the badge appeared, so the
 * label is sentence case here - the admin bar entry keeps the wider treatment.
 */
.av-news-trigger-options .av-news-options-head{
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
}
.av-news-trigger-options .av-news-options-title{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.av-news-trigger-options .av-news-options-teaser{
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #646970;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   panel - shared structure
   ---------------------------------------------------------------------------- */
.av-news-panel-wrap{
	position: absolute;
	z-index: 100000;
	width: 400px;
	max-width: calc( 100vw - 40px );
	box-shadow: 0 12px 40px rgba( 0, 0, 0, .22 );
	border-radius: 0px;
	overflow: hidden;
}
.av-news-panel{
	font-size: 13px;
	line-height: 1.5;
	max-height: 70vh;
	overflow-y: auto;
}
.av-news-panel *{ box-sizing: border-box; }

.av-news-cover,
.av-news-thumb{
	display: block;
	overflow: hidden;
	background-color: #f0f0f1;
	background-image: repeating-linear-gradient( 135deg, #e8e8ea 0 6px, #f3f3f4 6px 12px );
}
.av-news-cover{ width: 100%; height: 170px; }
.av-news-thumb{ width: 54px; height: 54px; flex: 0 0 54px; border-radius: 2px; }
.av-news-cover img,
.av-news-thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-news-lead-body{ padding: 16px 18px 18px; }
.av-news-meta{
	font-size: 12px;
	color: #787c82;
	margin-bottom: 6px;
}
.av-news-panel .av-news-headline{
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
}
.av-news-panel p.av-news-description{
	margin: 0 0 12px;
	color: #50575e;
}
/*
 * The lead item is one click target. The label stays a real link - keyboard focus and
 * "open in new tab" keep working - and its ::before is stretched over the whole item,
 * so anywhere in the block follows it.
 */
.av-news-lead{ position: relative; }
.av-news-panel a.av-news-link{
	text-decoration: none;
	font-weight: 600;
	box-shadow: none;
}
.av-news-panel a.av-news-link::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.av-news-panel--light .av-news-lead:hover{ background: #f6f7f7; }
.av-news-panel--dark .av-news-lead:hover{ background: #2c3338; }

.av-news-panel a.av-news-row{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 18px;
	text-decoration: none;
	box-shadow: none;
	border-top: 1px solid #e0e0e0;
}
.av-news-row-body{ min-width: 0; }
/* same line as the lead item, one step smaller so the headline still leads the row */
.av-news-row-meta{
	display: block;
	font-size: 11px;
	margin-bottom: 1px;
}
.av-news-row-headline{
	display: block;
	font-weight: 600;
	color: #1d2327;
}
/* two lines, then ellipsis - one line cut most of these descriptions mid sentence */
.av-news-row-description{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin-top: 2px;
	color: #787c82;
	overflow: hidden;
}

/* ----------------------------------------------------------------------------
   skin: light (options header)
   ---------------------------------------------------------------------------- */
.av-news-panel--light{ background: #fff; }
.av-news-panel--light .av-news-headline{ color: #1d2327; }
.av-news-panel--light a.av-news-link,
.av-news-panel--light a.av-news-row:hover .av-news-row-headline{ color: #2271b1; }
.av-news-panel--light a.av-news-row:hover{ background: #f6f7f7; }

/* ----------------------------------------------------------------------------
   skin: dark (admin bar)
   ---------------------------------------------------------------------------- */
.av-news-panel--dark{ background: #1d2327; }
.av-news-panel--dark .av-news-headline,
.av-news-panel--dark .av-news-row-headline{ color: #f0f0f1; }
.av-news-panel--dark p.av-news-description,
.av-news-panel--dark .av-news-row-description{ color: #a7aaad; }
.av-news-panel--dark .av-news-meta{ color: #8c8f94; }
.av-news-panel--dark a.av-news-link{ color: #72aee6; }
.av-news-panel--dark a.av-news-row{ border-top-color: #2c3338; }
.av-news-panel--dark a.av-news-row:hover{ background: #2c3338; }
.av-news-panel--dark a.av-news-row:hover .av-news-row-headline{ color: #72aee6; }
.av-news-panel--dark .av-news-cover,
.av-news-panel--dark .av-news-thumb{
	background-color: #2c3338;
	background-image: repeating-linear-gradient( 135deg, #2c3338 0 6px, #32373c 6px 12px );
}

@media only screen and (max-width: 782px){
	.av-news-panel-wrap{ width: 320px; }
	.av-news-cover{ height: 140px; }
	.av-news-trigger-options .av-news-options-teaser{ display: none; }
}
