/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra used for the WXPN radio/player rebuild.
Author: Brian Divver
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

:root {
	--wxpn-font-sans: "Figtree", sans-serif;
	--ast-global-color-0: transparent !important;

	/* --------------------------------------------------------------------
	   Canonical theme breakpoints

	   Every @media query in the chrome files (header.css, footer.css,
	   radio-player.css) should pin its pixel value to one of these.
	   CSS @media doesn't accept var() for the condition itself, so the
	   pixels are duplicated in each query; each query carries a comment
	   naming which canonical breakpoint it represents. These vars are
	   still useful in calc()/clamp() inside rules.

	     --wxpn-bp-sm: small phone               (≤ 480px = sm)
	     --wxpn-bp-md: tablet portrait           (≤ 767px = below md)
	     --wxpn-bp-lg: desktop                   (≤ 1023px = below lg)
	     --wxpn-bp-xl: wide desktop              (≥ 1440px = xl)

	   Other route-specific stylesheets (default-page.css, music-news.css
	   etc.) still use ad-hoc breakpoints; consolidating those is a
	   followup, not in scope for this PR.
	   -------------------------------------------------------------------- */
	--wxpn-bp-sm: 480px;
	--wxpn-bp-md: 768px;
	--wxpn-bp-lg: 1024px;
	--wxpn-bp-xl: 1440px;
}

html,
body,
button,
input,
select,
textarea,
.site,
.site * {
	font-family: var(--wxpn-font-sans);
}

html,
body,
input,
select,
textarea,
button {
	accent-color: transparent;
}

h1,h2, h3,h4,h5,h6,h7{
	color: black;
}

#content {
	background-color: #ffffff;
}

/*
 * Astra's ast-separate-container mode paints the page #f5f5f5 so content cards
 * float on grey. Every template here is designed on white, and #content above
 * is already white, so that grey only ever shows as a band around the content.
 * It applies to the homepage and to the single templates for video, artist,
 * host, program, playlist, countdown, npr_story_post and popup. Pages use the
 * plain container and posts the narrow container, so those were unaffected and
 * the grey read as a defect only on the separate-container templates.
 */
body.ast-separate-container {
	background-color: #ffffff;
}

.single-post #content {
	margin-bottom: 0;
}

.track-element {
	cursor: pointer;
	padding: 0.75rem 1rem 1rem 1rem;
	border: 1px solid #000000;
	margin-bottom: 15px;
	background-color: #cf4016;
	color: #ffffff;
	font-weight: bold;
}

.track-element::before {
	content: "\25B6";
	margin-right: 6px;
	vertical-align: middle;
}

.ast-separate-container #primary,
.ast-separate-container.ast-left-sidebar #primary,
.ast-separate-container.ast-right-sidebar #primary {
	margin: 0 !important;
}

#primary {
	margin: 0 !important;
}

.ast-container,
.ast-container-fluid {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wxpn-single-post__article {
	padding: 20px !important;
}

.page-template-full-width-page #content > .ast-container {
	display: block;
	width: 100%;
	max-width: none;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.wxpn-full-width-page,
.wxpn-full-width-page__article,
.wxpn-full-width-page__content {
	width: 100%;
	max-width: none;
	margin: 0 auto;
    /* padding: 0 20px;    Prevents text from touching screen edges */
}

body ::selection {
	background: #f29d07;
	background-color: #f29d07;
	color: #111;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: transparent;
}

*:focus-visible {
	outline-color: transparent;
}

.wxpn-page-ad-slot {
	display: flex;
	justify-content: center;
	margin: 0 auto 28px;
}

.wxpn-soundline,
.wxpn-single-post__soundline {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 1.75rem;
	border-bottom: 1px solid #111;
}

.wxpn-soundline::before,
.wxpn-single-post__soundline::before {
	content: " ";
	display: block;
	width: 4.25rem;
	height: 1.6875rem;
	background-image: url("/wp-content/themes/astra-child/assets/images/soundline.svg");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: cover;
	position: absolute;
	bottom: -0.875rem;
	right: 0;
}

@media (max-width: 768px) {
	.wxpn-soundline,
	.wxpn-single-post__soundline {
		padding-bottom: 1.25rem;
	}

	.wxpn-soundline::before,
	.wxpn-single-post__soundline::before {
		width: 3.5rem;
		height: 1.4rem;
		bottom: -0.72rem;
	}
}