/* Reusable but site specific styles */

.logotype{
	line-height: 100%;
	-webkit-text-cap-height: 100%;
	font-weight: var(--heavy);
	display: flex;
	justify-content: center;
	gap: 20px;
	padding:20px;
}

.logotype_type svg{
	width: 100%;
	max-width: 469px;
	height: auto;
}

.logotype_link{
	display: flex;
	flex-direction: column;
	align-items: start;
	padding-top:4px;
}

.logotype_link svg{
	width: 100%;
	max-width: 50px;
	height: auto;
}

.skip_links{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-small);
}

.skip_links a{
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--photocopy-toner, #232323);
	color: var(--white);
	padding: 8px 16px;
	cursor: pointer;
	align-items: center;
	line-height: 1.1;
	text-decoration: none;
	justify-content: center;
	text-transform: uppercase;
	font-weight: var(--heavy);
}

.cta{
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--photocopy-toner, #232323);
	color: var(--white);
	padding: 8px 16px;
	cursor: pointer;
	align-items: center;
	line-height: 1.1;
	text-decoration: none;
	justify-content: center;
	text-transform: uppercase;
	font-weight: var(--heavy);
}
.cta_smol{
	width:fit-content;
	margin-inline: auto;
	padding: 4px 8px;
	font-size: 14px;
}

.cta:hover{
	background: var(--accent);
	color: var(--white);
}

.skip_links a:hover{
	background: var(--accent);
}

.kit{
	padding: 16px 24px;
	background-color: var(--white-alpha);
	color: var(--photocopy-toner, #232323);
	text-align: center;
	text-wrap: balance;
	font-size: 18px;
	font-weight: 700;
	line-height: 140%; /* 25.2px */
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.top_kit{
	display: none;
}

.bottom_kit{
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: var(--gap);
}

@media (min-width: 768px) {
	.top_kit{
		display: block;
	}
	.bottom_kit{
		display: none;
	}
}


.social_media_links{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.social_media_links a{
	display: flex;
	align-items: center;
	color: var(--photocopy-toner, #232323);
	text-decoration: none;
}

.social_media_links a svg{
	height: 44px;
	width: auto;
}

.social_media_links a span{
	display: none;
}

.social_media_links a:hover{
	color: var(--accent);
}

.sc_content{
	background-color: var(--white-alpha);
	padding: 20px;
}

.sc_def{
	background-color: var(--accent);
	color: var(--white);
	padding: 20px;
	color: var(--white);

	/* definition */
	font-size: 12px;
	font-weight: 400;
	line-height: 140%;
}

.sc_def a{
	color: var(--white);
}



/** expando blocks */

.expando_group{
	display: flex;
	flex-direction: column;
	gap: var(--gap-small);
	width: 100%;
	max-width: 64ch;
}

.eg_item details{
	border: 0 solid var(--theme);
	border-radius: 8px;
	width: 100%;
}

.eg_item details summary{
	color:white;
	background-color: var(--accent);
	padding: 8px 16px;
	cursor: pointer;
	transition: var(--transition);
	display: grid;
	grid-template-columns: 1fr 21px;
	gap:var(--gap-small);
	align-items: center;
	line-height: 1.1;
	font-weight: var(--heavy);
	text-transform: uppercase;
}

.eg_item details summary .eg_item_icon{
	transition: var(--transition);
	transform-origin: center;
}

.eg_item details[open] summary .eg_item_icon{
	transform: rotate(180deg);
	transform-origin: center;
	transition: var(--transition);
}

.eg_item details summary::marker{
	display: none;
}

.eg_item details:hover{
	transition: var(--transition);
	border-color: var(--dark);

	summary{
		background-color: var(--dark);
		transition: var(--transition);
	}

}

.eg_item details[open] summary{
	border-color: var(--accent);
}


/** ah. for read more links we want to keep things simple */
details.read_more{
	border: 0;
	width: 100%;
}

details.read_more summary,
.eg_item details.read_more summary{
	color:var(--accent);;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
	transition: var(--transition);
	display: grid;
	grid-template-columns: 1fr 21px;
	gap:var(--gap-small);
	align-items: center;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: var(--heavy);
	max-width: 459px;
	transition: var(--transition);
}

details.read_more summary:hover,
.eg_item details.read_more summary:hover{
	color: var(--dark);
	text-decoration: none;
	transition: var(--transition);
}


details.read_more summary::marker{
	display: none;
}

details.read_more:hover{
	transition: var(--transition);
	color: var(--dark);
	background-color: transparent;

	summary{
		background-color: transparent;
		transition: var(--transition);
	}

}

details.read_more[open] summary{
	border:0;
}

.summary_content{
	padding:1rem;
	font-size: var(--step--1);
	background-color: var(--white-alpha);
	word-break: break-all;
}


.campaign_websites{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.campaign_website_card{
	display:grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	color: var(--pale);
	background:url('/site/assets/images/photocopy_dark_background_640.jpg') repeat 0 0 var(--dark);
	background-size: 640px 360px;
	padding:24px;
}

@container (min-width: 560px) {
	.campaign_website_card{
		grid-template-columns: 96px 1fr;
	}
}

.cwc_image{
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwc_title{
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 10px;
	color: var(--photocopy-toner, #232323);
	background-color: var(--white);
	font-size: 32px;
	line-height: 110%; /* 35.2px */
}
.cwc_content{
	display: flex;
	flex-direction: column;
	gap: var(--gap-small);
}

.cwc_link{
	display: flex;
	padding: 8px 16px;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	border:1px solid var(--white);
	color: var(--white, #FFF);
	font-size: 18px;
	font-weight: var(--heavy);
	line-height: 140%; /* 25.2px */
	text-transform: uppercase;
	text-decoration: none;
}

.cwc_link_icon{
	width: 32px;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwc_link:hover{
	background-color: var(--accent);
	color: var(--white);
}

.h_panel_content{
	padding:20px;
	background: var(--text-panel-bg, rgba(255, 255, 255, 0.70));
	color: var(--photocopy-toner, #232323);
}

.podcasts h3{
	color: var(--photocopy-toner, #232323);
	font-size: 24px;
	font-weight: 700;
	line-height: 140%; /* 33.6px */
}

.podcast_card{
	display: grid;
	grid-template-columns: 4fr 1fr;
	gap: var(--gap);
}

.podcast_card.latest_episode{
	grid-template-columns: 3fr 100px;
}

@container (min-width: 560px) {
	.podcast_card.latest_episode{
		grid-template-columns: 3fr 2fr;
	}
}

.pc_title{
	color: var(--photocopy-toner, #232323);
	font-size: 18px;
	font-weight: var(--heavy);
	line-height: 140%; /* 25.2px */
}

.pc_audio{
	width: 100%;
}

.pc_summary{
	font-size: 14px;
	line-height: 140%;
	color: var(--photocopy-toner, #232323);
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

.podcast_card summary{
	color:var(--accent);
	cursor: pointer;
}

.podcast_card summary:hover{
	color:var(--dark);
}

.pc_summary_full{
	padding:var(--gap-small) 0; 
	overflow-wrap: break-word;
	overflow-x: ellipsis;
}

.pc_image{
	width: 100%;
	min-width: 60px;
}

.pc_image img{
	width: 100%;
	height: auto;
}

.podcasts hr{
	margin: 0;
	background-color: var(--dark);
}

.p_panel_content{
	padding: var(--gap-small);
}

audio.pc_audio{
	width: 100%;
	background-color: white;
	border-radius: 0;
	accent-color: var(--accent);
}

audio {
	width: 100%;
	accent-color: var(--accent);
}

audio::-webkit-media-controls-play-button {
	color: var(--white);
	background-color: var(--accent);
	border-radius: 0;
	accent-color: var(--accent);
}
audio::-webkit-media-controls-panel {
	background-color: white;
}

.podcast_platforms{
	display: flex;
	flex-direction: row;
	gap: var(--gap-small);
	justify-content: end;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
}

.podcast_platforms_list{
	display: flex;
	flex-direction: row;
	gap: var(--gap-small);
	color:white;
}


.podcast_platforms_list a {
	color: white;
	background-color: white;
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 8px;
}

.podcast_platforms_list a:hover{
	color:var(--accent);
	background-color: var(--accent);
}

.podcast_platforms_list a svg{
	height:38px;
	width: auto;
}