/* ==========================================================================
   Home page refresh (2026)
   Loaded on the front page only (functions.php, uwkc_enqueue_home_refresh),
   whatever page template the home page uses. Every rule is scoped to
   body.home, which WordPress adds to the front page.

   Opt-in classes, added in the editor under Advanced > Additional CSS class
   on the Page Section block that wraps each area:
     home-stats    stats Columns become a 2 x 2 grid on mobile
     home-scroll   cards Columns swipe sideways on mobile
     home-circles  concentric rings behind the section
                   (add home-circles--right too to put them top right)
     btn--red      on a Button block or a link: red button
   ========================================================================== */

/* ── Year-end notice banner (temporary) ──────────────────────────────────
   Full-width yellow banner at the top of the fixed header on the home page.
   Turned on/off in the home page editor (Notice bar box; base.twig, functions.php). */
body.home {
	--year-end-notice-height: 5.6rem;
}

body.home .year-end-notice {
	width: 100%;
	background-color: #FFC72C; /* yellow, so it doesn't run into the red Donate / Give buttons */
	border-bottom: 1px solid #E5AE12;
}

body.home .year-end-notice a,
body.home .year-end-notice a:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6rem;
	height: var(--year-end-notice-height);
	padding: 0 2rem;
	color: #21296B;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

body.home .year-end-notice_text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Long message on larger screens, short one on phones */
body.home .year-end-notice_short {
	display: none;
}

/* Navy "Give now" pill */
body.home .year-end-notice_cta {
	flex: 0 0 auto;
	padding: 0.6rem 1.6rem;
	border-radius: 2.5rem;
	background-color: #21296B;
	color: #FFFFFF;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.home .year-end-notice a:hover,
body.home .year-end-notice a:focus {
	background-color: #FFD45C;
	color: #21296B;
}

body.home .year-end-notice a:hover .year-end-notice_cta,
body.home .year-end-notice a:focus .year-end-notice_cta {
	background-color: #0044B5;
	color: #FFFFFF;
}

body.home .year-end-notice a:focus-visible {
	outline: 3px solid #21296B;
	outline-offset: -3px;
}

/* The header is fixed, so push the page down by the banner's height */
body.home:has(.year-end-notice) #site_content {
	margin-top: var(--year-end-notice-height);
}

@media screen and (max-width: 600px) {
	body.home {
		--year-end-notice-height: 5rem;
	}

	body.home .year-end-notice a,
	body.home .year-end-notice a:visited {
		gap: 1.2rem;
		padding: 0 1.6rem;
		font-size: 1.7rem;
	}

	body.home .year-end-notice_long {
		display: none;
	}

	body.home .year-end-notice_short {
		display: inline;
	}

	body.home .year-end-notice_cta {
		padding: 0.5rem 1.4rem;
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 360px) {
	body.home .year-end-notice a,
	body.home .year-end-notice a:visited {
		gap: 0.8rem;
		padding: 0 1rem;
		font-size: 1.5rem;
	}

	body.home .year-end-notice_cta {
		padding: 0.4rem 1rem;
		font-size: 1.2rem;
		letter-spacing: 0.04em;
	}
}

/* ── Red buttons ─────────────────────────────────────────────────────── */
body.home .wp-block-button.btn--red .wp-block-button__link,
body.home .wp-block-button.btn--red .wp-block-button__link:visited {
	background-color: #D12626;
	border-color: #D12626;
	color: #FFFFFF;
}

body.home .wp-block-button.btn--red .wp-block-button__link:hover,
body.home .wp-block-button.btn--red .wp-block-button__link:focus {
	background-color: #A81E1E;
	border-color: #A81E1E;
	color: #FFFFFF;
}

/* Footer Get Updates / Get SMS Alerts (theme "live-united" links),
   styled to match the page's Button blocks (Give / Get Help) */
body.home a.live-united.btn--red,
body.home a.live-united.btn--red:visited {
	display: inline-block;
	min-width: 250px;
	padding: 16px 30px;
	border: 3px solid #D12626;
	border-radius: 2.5rem;
	background-color: #D12626;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	color: #FFFFFF !important;
	font-family: 'Palanquin', sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 21px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 2px #040812;
}

body.home a.live-united.btn--red strong {
	font-weight: inherit;
}

body.home a.live-united.btn--red:hover,
body.home a.live-united.btn--red:focus {
	background-color: #A81E1E;
	border-color: #A81E1E;
	color: #FFFFFF !important;
}

body.home .wp-block-button.btn--red .wp-block-button__link:focus-visible,
body.home a.btn--red:focus-visible {
	outline: 3px solid #21296B;
	outline-offset: 2px;
}

/* ── Background circles ──────────────────────────────────────────────── */
body.home .home-circles {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.home .home-circles::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -320px;
	bottom: -440px;
	width: 900px;
	height: 900px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none' stroke='%235082F0'%3E%3Ccircle cx='450' cy='450' r='300' stroke-width='3'/%3E%3Ccircle cx='450' cy='450' r='350' stroke-width='2'/%3E%3Ccircle cx='450' cy='450' r='400' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.home .home-circles.home-circles--right::before {
	left: auto;
	bottom: auto;
	right: -320px;
	top: -440px;
}

/* Swipe controls for card rails (added by uwkc_assets/js/home-refresh.js).
   Hidden on larger screens, where the cards sit side by side. */
.home-scroll-nav {
	display: none;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 781px) {

	body.home .home-circles::before {
		left: auto;
		bottom: auto;
		right: -220px;
		top: -200px;
		width: 440px;
		height: 440px;
	}

	/* Stats: 2 x 2 grid */
	body.home .home-stats .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px !important;
	}

	body.home .home-stats .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		min-width: 0;
	}

	body.home .home-stats .stat-block {
		padding: 14px 10px 16px;
	}

	body.home .home-stats .stat-block__icon {
		margin-bottom: 6px;
	}

	body.home .home-stats .stat-block__icon-svg,
	body.home .home-stats .stat-block__icon-img {
		width: 40px;
		height: 40px;
	}

	body.home .home-stats .stat-block__badge {
		font-size: 36px;
	}

	body.home .home-stats .stat-block__label {
		font-size: 14px;
		line-height: 1.35;
	}

	/* No hover zoom on touch screens */
	body.home .home-stats .stat-block:hover {
		transform: none;
		box-shadow: none;
	}

	/* Cards: horizontal swipe row, next card peeks in */
	body.home .home-scroll .wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 14px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 4px;
		-webkit-overflow-scrolling: touch;
		padding: 4px 4px 14px;
		scrollbar-width: thin;
		scrollbar-color: #8E97EF transparent;
	}

	body.home .home-scroll .wp-block-columns > .wp-block-column {
		flex: 0 0 80% !important;
		max-width: 300px !important;
		width: auto !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	body.home .home-scroll .wp-block-columns::-webkit-scrollbar {
		height: 6px;
	}

	body.home .home-scroll .wp-block-columns::-webkit-scrollbar-thumb {
		background: #8E97EF;
		border-radius: 3px;
	}

	/* Previous / next buttons and position dots under each rail.
	   (iPhone Safari never shows scrollbars, so these are the swipe cue.) */
	body.home .home-scroll-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-top: 12px;
	}

	body.home .home-scroll-nav_btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 2px solid #21296B;
		border-radius: 50%;
		background: #FFFFFF;
		color: #21296B;
		cursor: pointer;
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}

	body.home .home-scroll-nav_btn:focus-visible {
		outline: 3px solid #FFC72C;
		outline-offset: 2px;
	}

	body.home .home-scroll-nav_btn:disabled {
		opacity: 0.35;
		cursor: default;
	}

	body.home .home-scroll-nav_dots {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	body.home .home-scroll-nav_dots span {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: rgba(33, 41, 107, 0.3);
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	body.home .home-scroll-nav_dots span.is-active {
		width: 22px;
		background: #21296B;
	}

	/* On a blue section (What We Do) the dots go white */
	body.home .is-style-full-background .home-scroll-nav_btn {
		border-color: #FFFFFF;
	}

	body.home .is-style-full-background .home-scroll-nav_dots span {
		background: rgba(255, 255, 255, 0.45);
	}

	body.home .is-style-full-background .home-scroll-nav_dots span.is-active {
		background: #FFFFFF;
	}

	/* Latest News (Deferred Latest Posts block): featured post full width but
	   shorter, the other four in a 2 x 2 grid of smaller tiles. */
	body.home .latest_posts_main_wrapper .latest_posts_post,
	body.home .latest_posts_main_wrapper .latest_posts_link,
	body.home .latest_posts_main_wrapper .latest_posts_image,
	body.home .latest_posts_main_wrapper .overlay {
		width: 100% !important;
		height: 230px !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
	}

	body.home .latest_posts_main_wrapper .latest_posts_title {
		font-size: 22px !important;
		line-height: 1.15 !important;
	}

	body.home .latest_posts_grid_container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100% !important;
		height: auto !important;
		/* The block's own CSS gives the grid -1rem side margins, which pushed the
		   tiles out of line with the featured post. */
		margin: 0 !important;
	}

	/* Gap under the featured post (padding, so no margin rule can cancel it) */
	body.home .latest_posts_grid_wrapper {
		padding-top: 10px !important;
	}

	body.home .latest_posts_grid_container > .latest_posts_post {
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		margin: 0 !important;
	}

	body.home .latest_posts_grid_container .latest_posts_post,
	body.home .latest_posts_grid_container .latest_posts_link,
	body.home .latest_posts_grid_container .latest_posts_image,
	body.home .latest_posts_grid_container .overlay {
		width: 100% !important;
		height: 170px !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
	}

	body.home .latest_posts_grid_container .latest_posts_title {
		font-size: 16px !important;
		line-height: 1.2 !important;
		padding: 0 8px !important;
	}

	/* Phones show 3 posts: the featured post plus one row of two. */
	body.home .latest_posts_grid_container > .latest_posts_post:nth-child(n+3) {
		display: none !important;
	}

	/* Show a block only on phones / only on larger screens (Advanced > Additional
	   CSS class). Used for the second Hourglass banner between the stats and Latest News. */
	body.home .home-desktop-only,
	body.home #home-desktop-only { /* also works if entered as the HTML anchor */
		display: none !important;
	}
}

@media (min-width: 782px) {
	body.home .home-mobile-only,
	body.home #home-mobile-only {
		display: none !important;
	}

	/* Latest News: 3 posts. Featured post on the left, two wide tiles stacked
	   beside it, together the same height as the featured post. */
	body.home .latest_posts_grid_container {
		display: grid !important;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 10px;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1; /* same square as the featured post beside it */
		margin: 0 !important; /* the block's own -1rem side margins */
	}

	body.home .latest_posts_grid_container > .latest_posts_post {
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		aspect-ratio: auto !important;
	}

	body.home .latest_posts_grid_container > .latest_posts_post:nth-child(n+3) {
		display: none !important;
	}

	body.home .latest_posts_grid_container .latest_posts_link,
	body.home .latest_posts_grid_container .latest_posts_image,
	body.home .latest_posts_grid_container .overlay {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
	}

	/* Crop the photos to fill the wider tiles instead of squashing them */
	body.home .latest_posts_grid_container img,
	body.home .latest_posts_grid_container .latest_posts_image {
		object-fit: cover !important;
		object-position: center;
		background-size: cover !important;
		background-position: center !important;
	}
}