/*
Theme Name: Plain Interest — The Answer Path
Version: 0.3.13-uncached-rolling-homepage
Description: Plain Interest Answer Path block theme with responsive mobile-first article and edition layouts.
License: GNU General Public License v2 or later; bundled Space Grotesk and Literata fonts are licensed under the SIL Open Font License 1.1. See assets/fonts/.
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plain-interest
*/

.pi-podcast-grid > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.pi-podcast-grid > a:hover {
	background: var(--wp--preset--color--coral-tint);
}

.pi-podcast-grid > a:focus-visible {
	position: relative;
	z-index: 1;
}

.pi-cookie-settings {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.16em;
	cursor: pointer;
}

/* Plain Interest currently uses only necessary storage and Analytics. */
#ckyDetailCategoryfunctional,
#ckyDetailCategoryperformance,
#ckyDetailCategoryadvertisement {
	display: none;
}

.pi-article-trust-mobile {
	display: none;
}

.pi-breadcrumbs {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.6875rem;
	font-weight: 750;
	line-height: 1.45;
}

.pi-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi-breadcrumbs li {
	min-width: 0;
}

.pi-breadcrumbs li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--wp--preset--color--soft-ink);
}

.pi-breadcrumbs a {
	color: inherit;
	text-underline-offset: 0.16em;
}

.pi-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--soft-ink);
}

.pi-evidence a {
	color: inherit;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.pi-evidence a:hover {
	color: var(--wp--preset--color--answer-coral);
}

.pi-evidence small {
	color: var(--wp--preset--color--soft-ink);
}

.pi-evidence .pi-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pi-evidence table {
	width: 100%;
	border-collapse: collapse;
}

.pi-evidence th,
.pi-evidence td {
	padding: 12px;
	border: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	text-align: left;
}

.pi-next-reason,
.pi-next-availability {
	display: block;
	margin-top: 5px;
}

.pi-next-availability {
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Listen / podcast index */
.pi-listen-page {
	box-sizing: border-box;
	padding: clamp(36px, 5vw, 68px) 40px clamp(56px, 7vw, 90px);
}

.pi-listen-page > .wp-block-post-title,
.pi-listen-page > .wp-block-post-content {
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px !important;
	margin-inline: auto;
}

.pi-listen-title {
	margin: 0 0 18px;
	font-size: clamp(2.35rem, 5vw, 4rem) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.055em !important;
}

.pi-listen-intro {
	width: 100%;
	max-width: 760px;
	margin: 0 auto clamp(28px, 4vw, 44px) 0 !important;
	font-family: var(--wp--preset--font-family--long-form);
	font-size: clamp(1.15rem, 2.1vw, 1.55rem);
	line-height: 1.45;
}

.pi-listen-featured {
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px !important;
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--ink);
	border-left: 8px solid var(--wp--preset--color--answer-coral);
	background: var(--wp--preset--color--white);
	box-shadow: 9px 9px 0 var(--wp--preset--color--pale-tint);
	overflow: hidden;
}

.pi-listen-featured-grid {
	display: grid !important;
	grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
	gap: 0 !important;
}

.pi-listen-cover {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin: 0 !important;
	border-right: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}

.pi-listen-cover img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 1;
	object-fit: contain;
}

.pi-listen-featured-copy {
	box-sizing: border-box;
	padding: clamp(26px, 4vw, 44px);
}

.pi-listen-badge {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin: 0 0 18px;
	padding: 4px 9px;
	border: 1px solid var(--wp--preset--color--answer-coral);
	background: var(--wp--preset--color--coral-tint);
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
}

.pi-listen-featured-copy h2 {
	max-width: 650px;
	margin: 0 0 14px;
	font-size: clamp(1.75rem, 3.4vw, 2.8rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.045em !important;
}

.pi-listen-summary {
	max-width: 620px;
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--long-form);
	font-size: 1rem;
	line-height: 1.55;
}

.pi-listen-platforms {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
}

.pi-listen-platform-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 16px;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}

.pi-listen-platform-name {
	margin: 0 0 3px;
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.9375rem;
	font-weight: 850;
}

.pi-listen-platform-note {
	margin: 0;
	color: var(--wp--preset--color--soft-ink);
	font-size: 0.6875rem;
	line-height: 1.4;
}

.pi-listen-platform-button {
	flex: 0 0 auto;
}

.pi-listen-platform-button .wp-element-button {
	min-height: 46px;
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--answer-coral);
	color: var(--wp--preset--color--white);
	box-shadow: 3px 3px 0 var(--wp--preset--color--ink);
}

.pi-listen-platform-button .wp-element-button:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.pi-listen-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pi-listen-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.pi-listen-meta span + span::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--answer-coral);
}

.pi-listen-spotify-button {
	margin: 0 0 24px;
}

.pi-listen-spotify-button .wp-element-button {
	min-height: 50px;
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--answer-coral);
	color: var(--wp--preset--color--white);
	box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
}

.pi-listen-spotify-button .wp-element-button:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.pi-listen-disclosure {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--soft-ink);
	font-size: 0.6875rem;
	line-height: 1.5;
}

.pi-listen-formats {
	width: 100%;
	max-width: 1040px !important;
	margin-top: clamp(44px, 6vw, 72px);
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.pi-listen-formats-head {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: baseline;
	padding: 19px 0 16px;
}

.pi-listen-formats-head h2,
.pi-listen-formats-head p {
	margin: 0;
}

.pi-listen-formats-head p {
	color: var(--wp--preset--color--soft-ink);
	font-size: 0.75rem;
}

.pi-listen-format-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 !important;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.pi-listen-format-card {
	box-sizing: border-box;
	min-height: 170px;
	padding: 22px;
	border-right: 1px solid var(--wp--preset--color--ink);
}

.pi-listen-format-card:last-child {
	border-right: 0;
}

.pi-listen-format-number {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 900;
}

.pi-listen-format-card h3 {
	margin: 0 0 8px;
	font-size: 1rem !important;
}

.pi-listen-format-card p {
	margin: 0;
	color: var(--wp--preset--color--soft-ink);
	font-size: 0.75rem;
	line-height: 1.5;
}

@media (max-width: 719px) {
	.pi-breadcrumbs [aria-current="page"] {
		display: none;
	}

	.pi-breadcrumbs li:last-child::before {
		display: none;
	}

	.pi-listen-page {
		padding: 28px 20px 54px !important;
	}

	.pi-listen-title {
		font-size: clamp(2.15rem, 11vw, 3rem) !important;
	}

	.pi-listen-intro {
		font-size: 1.125rem;
		line-height: 1.5;
	}

	.pi-listen-featured {
		border-left-width: 1px;
		border-top: 7px solid var(--wp--preset--color--answer-coral);
		box-shadow: 6px 6px 0 var(--wp--preset--color--pale-tint);
	}

	.pi-listen-featured-grid {
		grid-template-columns: 1fr !important;
	}

	.pi-listen-cover {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--ink);
	}

	.pi-listen-cover img {
		height: auto;
		min-height: 0;
	}

	.pi-listen-featured-copy {
		padding: 24px 20px 28px;
	}

	.pi-listen-featured-copy h2 {
		font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
	}

	.pi-listen-meta {
		display: grid;
		gap: 8px;
	}

	.pi-listen-meta span + span::before {
		display: none;
	}

	.pi-listen-platform-card {
		align-items: stretch;
		flex-direction: column;
	}

	.pi-listen-platform-button,
	.pi-listen-platform-button .wp-element-button {
		width: 100%;
	}

	.pi-listen-spotify-button,
	.pi-listen-spotify-button .wp-element-button {
		width: 100%;
	}

	.pi-listen-formats-head {
		display: block;
	}

	.pi-listen-formats-head p {
		margin-top: 6px;
	}

	.pi-listen-format-grid {
		grid-template-columns: 1fr !important;
	}

	.pi-listen-format-card {
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--ink);
	}

	.pi-listen-format-card:last-child {
		border-bottom: 0;
	}

	.pi-listen-format-number {
		margin-bottom: 14px;
	}

	.wp-site-blocks > main.has-global-padding {
		padding-inline: 0 !important;
	}

	.pi-site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--wp--preset--color--paper);
	}

	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		display: inline-grid;
		place-items: center;
	}

	.pi-edition-hero,
	.pi-edition-main,
	.pi-edition-side,
	.pi-article-hero,
	.pi-article-grid {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.pi-edition-main {
		padding: 24px 20px !important;
	}

	.pi-edition-side {
		padding: 24px 20px !important;
	}

	.pi-edition-meta {
		flex-wrap: wrap;
	}

	.pi-hero-path {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.pi-hero-path > * {
		min-width: 0;
		border-bottom: 1px solid var(--wp--preset--color--ink);
	}

	.pi-hero-path > *:last-child {
		border-bottom: 0;
	}

	.pi-weekday-grid {
		padding-inline: 20px !important;
	}

	.pi-card {
		min-height: 0;
	}

	.pi-article-title {
		padding: 24px 20px 20px !important;
	}

	.pi-article-title h1 {
		font-size: clamp(1.625rem, 7.2vw, 1.875rem) !important;
		line-height: 1.05 !important;
		letter-spacing: -0.035em;
		margin: 14px 0 12px;
	}

	.pi-standfirst {
		font-size: 1.0625rem;
		line-height: 1.48;
	}

	.pi-article-trust {
		display: none;
	}

	.pi-article-trust-mobile {
		display: block;
		background: var(--wp--preset--color--pale-tint);
		border-top: 1px solid var(--wp--preset--color--line);
		border-bottom: 1px solid var(--wp--preset--color--ink);
	}

	.pi-article-trust-mobile summary {
		min-height: 60px;
		padding: 12px 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		list-style-position: inside;
	}

	.pi-article-trust-mobile summary strong {
		font-size: 0.75rem;
		text-align: right;
	}

	.pi-article-trust-mobile-body {
		padding: 0 20px 12px;
	}

	.pi-method-nav {
		display: flex !important;
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.pi-method-nav a {
		box-sizing: border-box;
		min-width: 112px;
		min-height: 48px;
		padding: 10px 12px;
		font-size: 0.625rem;
		line-height: 1.2;
		scroll-snap-align: start;
	}

	.pi-article-body {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0;
		padding: 24px 20px 44px !important;
	}

	#question,
	#plain-answer,
	#picture,
	#practice,
	#evidence {
		scroll-margin-top: 92px;
	}

	.pi-plain-answer {
		padding: 18px 16px;
	}

	.pi-plain-answer p {
		font-size: 1.1875rem;
	}

	.pi-picture-block .pi-picture-content {
		padding: 8px;
	}

	.pi-edition-zero-infographic picture,
	.pi-edition-zero-infographic img {
		display: block;
		width: 100%;
		height: auto;
	}

	.pi-evidence {
		padding: 16px;
	}

	.pi-evidence-head {
		margin: -16px -16px 16px;
		padding: 14px 16px;
	}

	.pi-evidence .pi-table-wrap {
		overflow: visible;
	}

	.pi-evidence table,
	.pi-evidence tbody,
	.pi-evidence tr,
	.pi-evidence th,
	.pi-evidence td {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	.pi-evidence table {
		min-width: 0 !important;
	}

	.pi-evidence thead {
		display: none;
	}

	.pi-evidence caption {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 0 0 12px;
		text-align: left;
	}

	.pi-evidence tbody tr {
		margin-bottom: 12px;
		border: 1px solid var(--wp--preset--color--line);
	}

	.pi-evidence tbody th,
	.pi-evidence tbody td {
		border: 0;
		overflow-wrap: anywhere;
	}

	.pi-evidence tbody th {
		border-bottom: 1px solid var(--wp--preset--color--line);
		background: var(--wp--preset--color--pale-tint);
	}

	.pi-ledger-row {
		grid-template-columns: 1fr !important;
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.pi-ledger-row b,
	.pi-ledger-row span {
		padding: 10px 12px;
	}

	.pi-ledger-row b {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.pi-next-lesson {
		display: block !important;
		padding: 20px;
	}

	.pi-next-lesson .pi-label {
		display: block;
		margin-bottom: 10px;
	}
}

.pi-audio-bar > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

.pi-audio-bar .wp-block-audio {
	margin: 8px 0;
}

.pi-audio-bar audio {
	display: block;
	width: 100%;
}

.pi-audio-external-button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	margin: 8px 0;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--paper);
	background: var(--wp--preset--color--answer-coral);
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--structural);
	font-size: 0.875rem;
	font-weight: 800;
	text-decoration: none;
}

.pi-audio-external-button:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink) !important;
}

.pi-audio-transcript {
	margin-top: 32px;
	border: 1px solid var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--white);
}

.pi-audio-transcript summary {
	cursor: pointer;
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--structural);
	font-weight: 800;
}

.pi-audio-transcript__body {
	padding: 0 16px 16px;
}

@media (max-width: 419px) {
	.pi-audio-bar {
		align-items: flex-start;
	}

	.pi-audio-bar .pi-play {
		display: none;
	}

	.pi-audio-external-button {
		box-sizing: border-box;
		width: 100%;
	}
}