/**
 * WAFT Redesign — hand-written styles.
 *
 * theme.json holds design tokens and block settings. This file is for CSS that
 * theme.json cannot express: breakpoint overrides, third-party block tweaks, etc.
 */

/* -------------------------------------------------------------------------
 * Full-height layout — footer stays at the bottom on short pages.
 * ---------------------------------------------------------------------- */
html,
body {
	height: 100%;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------------
 * Home hero.
 * ---------------------------------------------------------------------- */
.home-hero {
	text-align: center;
}

.home-hero__badge {
	display: inline-block;
}

.home-hero :is( h1, h2, h3 ) {
	color: var( --wp--preset--color--on-primary );
}

.home-hero__lead {
	max-width: 42rem;
	margin-inline: auto;
	opacity: 0.85;
}

.home-hero .wp-block-buttons {
	justify-content: center;
}

.home-hero .is-style-outline .wp-block-button__link {
	color: var( --wp--preset--color--on-primary );
	border-color: currentColor;
}

/* -------------------------------------------------------------------------
 * Home sections — shared.
 * ---------------------------------------------------------------------- */
/* Standard section rhythm. Patterns set matching inline padding for the editor;
   this keeps detached / future sections consistent and tightens it on mobile. */
.home-section {
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
}

@media ( max-width: 600px ) {
	.home-section {
		padding-top: var( --wp--preset--spacing--50 );
		padding-bottom: var( --wp--preset--spacing--50 );
	}
}

.home-section__head {
	width: 100%;
}

.home-section__link {
	margin: 0;
}

.home-section__link a {
	color: var( --wp--preset--color--secondary );
	font-weight: 700;
	text-decoration: none;
}

.home-section__link a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Home — Coming Up Next / program cards. Cards are PHP-rendered (live data),
 * laid out with plain CSS grid rather than the columns block.
 * ---------------------------------------------------------------------- */
.program-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--40 );
}

@media ( min-width: 700px ) {
	.program-cards {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.program-card {
	border: 1px solid var( --wp--preset--color--surface-variant );
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	padding: var( --wp--preset--spacing--40 );
}

/* Only stretch cards to match row height and pin the host to the bottom once
 * they're actually side by side (see the 700px grid breakpoint below) — on a
 * single mobile column this left a large dead gap above the host name. */
@media ( min-width: 700px ) {
	.program-card {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}

.program-card__time {
	margin: 0 0 0.25rem;
	color: var( --wp--preset--color--secondary );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.program-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
}

.program-card__title a {
	color: inherit;
	text-decoration: none;
}

.program-card__title a:hover {
	text-decoration: underline;
}

.program-card__desc {
	margin: 0 0 0.5rem;
	color: var( --wp--preset--color--on-surface-variant );
}

.program-card__host {
	margin: 0.75rem 0 0;
	font-weight: 700;
}

@media ( min-width: 700px ) {
	.program-card__host {
		margin-top: auto;
		padding-top: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
 * Full schedule page — day tabs (JS-enhanced; all panels stay visible and
 * stacked if JS doesn't run, so nothing is lost without it).
 * ---------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.schedule-tabs {
	display: flex;
	gap: var( --wp--preset--spacing--40 );
	border-bottom: 1px solid var( --wp--preset--color--surface-variant );
	margin-bottom: var( --wp--preset--spacing--20 );
}

.schedule-tabs__tab {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.75rem 0.125rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-family: var( --wp--preset--font-family--manrope );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	color: var( --wp--preset--color--on-surface-variant );
}

.schedule-tabs__tab:hover {
	color: var( --wp--preset--color--primary );
}

.schedule-tabs__tab.is-active {
	color: var( --wp--preset--color--secondary );
	border-bottom-color: var( --wp--preset--color--secondary );
}

.schedule-tabs__tab:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Full schedule page — day sections of PHP-rendered rows.
 * ---------------------------------------------------------------------- */
.schedule-day__rows {
	border-top: 1px solid var( --wp--preset--color--surface-variant );
}

.schedule-row {
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--30 ) 0;
	border-bottom: 1px solid var( --wp--preset--color--surface-variant );
}

.schedule-row__time {
	flex: 0 0 6rem;
	margin: 0;
	color: var( --wp--preset--color--secondary );
	font-family: var( --wp--preset--font-family--manrope );
	font-weight: 700;
}

.schedule-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.schedule-row__title {
	margin: 0;
	font-weight: 700;
}

.schedule-row__title a {
	color: inherit;
	text-decoration: none;
}

.schedule-row__title a:hover {
	text-decoration: underline;
}

.schedule-row__meta {
	margin: 0.125rem 0 0;
	color: var( --wp--preset--color--on-surface-variant );
	font-size: 0.875rem;
}

.schedule-row__meta a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Home — Articles (link-out cards).
 * ---------------------------------------------------------------------- */
.home-articles .wp-block-query {
	width: 100%;
}

.articles-grid.wp-block-post-template {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: 1fr;
}

@media ( min-width: 640px ) {
	.articles-grid.wp-block-post-template {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 900px ) {
	.articles-grid.wp-block-post-template {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1140px ) {
	.articles-grid.wp-block-post-template {
		grid-template-columns: repeat( 5, 1fr );
	}
}

.articles-grid > li {
	margin: 0;
}

.article-card__image {
	margin: 0 0 0.625rem;
}

.article-card__image img {
	width: 100%;
	border-radius: 16px;
}

.article-card__title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__title a {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.article-card__title a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Home — Community Highlights (bento grid).
 * ---------------------------------------------------------------------- */
.home-highlights__grid {
	align-items: stretch;
}

.home-highlights__grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.highlight-card {
	border-radius: 28px;
	overflow: hidden;
}

/* Right column: the two stacked cards share the large card's height. */
@media ( min-width: 782px ) {
	.home-highlights__grid > .wp-block-column:last-child > .highlight-card {
		flex: 1 1 0;
	}
}

.highlight-badge {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 8px;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--manrope );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.highlight-action {
	justify-content: space-between;
}

.highlight-action .is-style-outline .wp-block-button__link {
	color: var( --wp--preset--color--on-primary );
	border-color: currentColor;
}

/* -------------------------------------------------------------------------
 * Home — Ways to Give.
 * ---------------------------------------------------------------------- */
.home-give__image img {
	width: 100%;
	height: auto;
	border-radius: 32px;
}

.home-give__image--placeholder {
	width: 100%;
	border-radius: 32px;
}

.give-option {
	border: 1px solid var( --wp--preset--color--surface-variant );
	border-radius: 16px;
	transition: border-color 0.15s ease;
}

.give-option:hover {
	border-color: var( --wp--preset--color--secondary );
}

.give-option__title {
	margin: 0;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Footer — links and headings on the dark background.
 * ---------------------------------------------------------------------- */
.site-footer :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--on-primary );
}

.site-footer a:not( .wp-block-button__link ):not( .wp-social-link a ) {
	color: var( --wp--preset--color--on-primary );
	opacity: 0.8;
	text-decoration: none;
}

.site-footer a:not( .wp-block-button__link ):hover {
	opacity: 1;
	text-decoration: underline;
}

.site-footer__bar {
	border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	width: 100%;
	opacity: 0.7;
}

.site-footer .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	fill: var( --wp--preset--color--on-primary );
}

/* -------------------------------------------------------------------------
 * Header layout — logo left, nav centred, actions right.
 * ---------------------------------------------------------------------- */
@media ( min-width: 870px ) {
	.site-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-header__actions {
		justify-self: end;
	}
}

/* Below the breakpoint: Give on the left, logo centre, hamburger on the right. */
@media ( max-width: 869.98px ) {
	.site-header__row {
		flex-wrap: nowrap;
		gap: 0.75rem;
		justify-content: space-between;
	}

	.site-header__actions {
		order: 1;
		flex: 0 0 auto;
	}

	.site-header__brand {
		order: 2;
	}

	.site-header__nav {
		order: 3;
		flex: 0 0 auto;
	}

	.site-header__brand img {
		max-width: 120px;
		height: auto;
	}
}

/* Larger tap target / clearer bars for the open + close icons. */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Active / current page link. box-shadow avoids the layout shift a border adds. */
.site-header__nav .wp-block-navigation-item__content[aria-current="page"],
.site-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--secondary );
	font-weight: 700;
	box-shadow: inset 0 -2px 0 0 var( --wp--preset--color--secondary );
	padding-bottom: 0.25rem;
}

/* -------------------------------------------------------------------------
 * Navigation — collapse to the hamburger at 870px instead of the default 600px.
 * Re-creates the block's "overlay" behaviour for the 600–870px range.
 * ---------------------------------------------------------------------- */
@media ( min-width: 600px ) and ( max-width: 869.98px ) {
	.wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not( .is-menu-open ):not( .always-shown ) {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100000;
	}

	.wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* -------------------------------------------------------------------------
 * Navigation overlay — keep the links off the right edge and left-aligned.
 * ---------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2.5rem 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-right: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	gap: 1rem;
}