/*
Theme Name: Revive
Theme URI: https://discoverbec.com/revive/
Author: Built for Revive (BEC) — community recycling & upcycling
Description: Custom block theme for Revive, a community recycling and upcycling project. Brand-aligned, accessibility-first (WCAG 2.1 AA / DDA), powered by the WordPress block editor (FSE). Designed for non-technical maintainers.
Version: 0.4.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: revive
Tags: block-theme, full-site-editing, charity, accessibility-ready, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images
*/

/* Block-theme styling lives in theme.json + block stylesheets. */
/* Only minimal global rules here for accessibility helpers + custom components. */

/* ------------------------------------------------------------------
   Accessibility helpers
   ------------------------------------------------------------------ */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	padding: 0.75rem 1rem;
	background: #ffffff;
	color: #2a7c7b;
	text-decoration: underline;
	font-weight: 600;
	border: 2px solid #2a7c7b;
	border-radius: 4px;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #2a7c7b;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 600px) {
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------------
   Fixed site header — pinned to top of viewport at all times
   ------------------------------------------------------------------ */

.revive-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	transition: transform 0.28s ease;
	will-change: transform;
}

/* Brand logo in the header — size-by-height so future logos of any aspect
   ratio fit the navbar without resizing the whole header. */
.revive-site-brand .custom-logo,
.revive-site-brand .wp-block-site-logo img {
	height: 44px;
	width: auto;
	max-width: none;
	display: block;
}

@media (max-width: 600px) {
	.revive-site-brand .custom-logo,
	.revive-site-brand .wp-block-site-logo img {
		height: 36px;
	}
}

/* Smart-sticky: header slides up out of view when JS adds .is-hidden.
   Triggered by header-scroll.js on scroll-down; removed on scroll-up. */
.revive-site-header.is-hidden {
	transform: translateY(-100%);
}

/* When the WP admin bar is showing, we don't want translateY(-100%) to also
   sweep the admin bar away — translate only the header's own height. */
body.admin-bar .revive-site-header.is-hidden {
	transform: translateY(calc(-100% - 32px));
}

@media (prefers-reduced-motion: reduce) {
	.revive-site-header { transition: none; }
	.revive-site-header.is-hidden { transform: none; }
}

/* Body padding-top reserves room for the fixed header.
   html-prefix raises specificity above theme.json's body padding rule. */
html body {
	padding-top: 84px;
}

@media (max-width: 781px) {
	html body { padding-top: 68px; }
}

/* When the WP admin bar is showing (logged-in users only), push the site
   header down by the admin-bar height so it sits below the admin bar
   instead of being covered by it. End visitors won't see this. */
body.admin-bar .revive-site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .revive-site-header {
		top: 46px;
	}
}

/* Offset anchor targets so the fixed header doesn't cover them */
[id="about"], [id="team"], [id="journey"], [id="restorations"], [id="volunteer"], [id="donate"], [id="news"], [id="contact"] {
	scroll-margin-top: 6rem;
}

/* ------------------------------------------------------------------
   Horizontal card scroller (team + restorations) — single row, swipe/scroll
   ------------------------------------------------------------------ */

/* Higher specificity to win over WP's .wp-block-group.is-layout-flex defaults */
.wp-block-group.revive-card-scroller {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.5rem;
	/* Bleed to the edges of the section, not the viewport. 100vw includes the
	   vertical scrollbar (~15px) and pushed the page sideways; cancelling the
	   section's own padding does not. !important is required because WP's
	   constrained-layout CSS sets `margin-inline: auto !important` on children. */
	width: auto;
	margin-left: calc(var(--wp--preset--spacing--40, 1.5rem) * -1) !important;
	margin-right: calc(var(--wp--preset--spacing--40, 1.5rem) * -1) !important;
	max-width: none;
	overflow-x: auto;
	overflow-y: hidden;
	padding-inline: max(var(--wp--preset--spacing--40, 1.5rem), calc((100% - 1200px) / 2));
	padding-block: 0.5rem 1.5rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.revive-card-scroller::-webkit-scrollbar { height: 10px; }
.revive-card-scroller::-webkit-scrollbar-track { background: transparent; }
.revive-card-scroller::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}
.revive-card-scroller::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.45); }

.revive-card-scroller > .revive-marquee__card,
.revive-card-scroller > .wp-block-group.revive-marquee__card {
	flex: 0 0 auto;
	width: 320px;
	scroll-snap-align: start;
}

@media (max-width: 600px) {
	.revive-card-scroller > .revive-marquee__card,
	.revive-card-scroller > .wp-block-group.revive-marquee__card {
		width: 82vw;
		max-width: 320px;
	}
}

/* Journey-so-far cards — same scroller mechanics as team/restorations, but
   bigger because the images are the focal point of this section (no body text). */
.revive-card-scroller > .revive-journey__card,
.revive-card-scroller > .wp-block-group.revive-journey__card {
	width: 440px;
}
.revive-journey__card .wp-block-image img {
	height: 300px;
}
@media (max-width: 600px) {
	.revive-card-scroller > .revive-journey__card,
	.revive-card-scroller > .wp-block-group.revive-journey__card {
		width: 86vw;
		max-width: 440px;
	}
	.revive-journey__card .wp-block-image img {
		height: 240px;
	}
}

/* ------------------------------------------------------------------
   Team page — alternating image/text rows with a hard-stop "downward bleed"
   transition between rows. Each row paints its own colour 80px past its
   bottom edge, overlapping the TOP 80px of the next row. Hard cut, not
   a gradient.

   Why this approach: each row is self-contained — its colour bleeds DOWN.
   No row needs to know about its neighbours. So the customer can:
     • duplicate a row to add a new team member
     • delete any row
     • re-order rows via drag-and-drop
     • change any row's background colour in the editor
   …and the bleed effect just follows automatically.

   To add a new colour: add a new wp:preset colour to theme.json and a
   matching `.has-X-background-color { --revive-row-bg: #hex; }` line below.
   ------------------------------------------------------------------ */

.revive-team-row {
	position: relative;
}

/* Stamp 80px of the row's OWN colour down past its bottom edge, covering
   the top 80px of whatever row comes next. z-index keeps it above the
   next row's background but the next row's content (padded down by 80px,
   see below) stays visible. */
.revive-team-row::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 80px;
	background: var( --revive-row-bg, transparent );
	z-index: 1;
	pointer-events: none;
}

/* Map every theme.json colour the user might pick to the CSS variable. */
.revive-team-row.has-white-background-color     { --revive-row-bg: #ffffff; }
.revive-team-row.has-off-white-background-color { --revive-row-bg: #f7f8f8; }
.revive-team-row.has-teal-soft-background-color { --revive-row-bg: #e6f1f1; }
.revive-team-row.has-teal-background-color      { --revive-row-bg: #349a99; }
.revive-team-row.has-teal-dark-background-color { --revive-row-bg: #2a7c7b; }
.revive-team-row.has-yellow-background-color    { --revive-row-bg: #fbd569; }

/* Push every-row-after-the-first down by 80px so its content sits BELOW
   the previous row's bleed zone. First row has nothing above it, so no
   extra padding needed. */
.revive-team-row + .revive-team-row {
	padding-top: calc( var(--wp--preset--spacing--60, 2.25rem) + 80px ) !important;
}

/* White text on the deep-teal CTA row. */
.revive-team-row.has-teal-dark-background-color :is(h1, h2, h3, h4, h5, p) {
	color: #ffffff;
}

/* Facebook Page Plugin embed wrapper — keeps the 500px-wide FB iframe centered
   inside its column and gives it the same rounded card feel as the rest of the
   site. The iframe itself is responsive (adapt_container_width=true). */
.revive-fb-embed {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.revive-fb-embed iframe {
	display: block;
	width: 100%;
	max-width: 500px;
	border: 1px solid #e6f1f1;
}

/* Card — a regular wp-block-group with className "revive-marquee__card".
   Children: wp:image, wp:group (card body) with heading + paragraphs.
   Grid layout (Group block layout=grid) handles sizing; the card just styles itself. */
.revive-marquee__card.wp-block-group {
	width: 100%;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e6f1f1;
	display: flex;
	flex-direction: column;
	padding: 0;
	gap: 0;
}

.revive-marquee__card .wp-block-image,
.revive-marquee__card figure {
	margin: 0;
}

.revive-marquee__card .wp-block-image img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* The card body Group sits inside the card and gets the text padding. */
.revive-marquee__card .revive-card-body.wp-block-group {
	padding: 1.125rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.revive-marquee__card .wp-block-heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.25;
	color: #4f4f52;
}

.revive-marquee__card p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #4f4f52;
}

.revive-marquee__card .revive-card-role {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #2a7c7b;
}

.revive-marquee__card .revive-card-meta {
	font-size: 0.95rem;
	color: #2a7c7b;
	font-weight: 600;
}

.revive-marquee__card .revive-card-link a {
	font-weight: 600;
	color: #2a7c7b;
	text-decoration: none;
}
.revive-marquee__card .revive-card-link a:hover,
.revive-marquee__card .revive-card-link a:focus-visible {
	text-decoration: underline;
}

/* Variant: teal CTA card (Could this be you?) */
.revive-marquee__card.is-cta.wp-block-group {
	background: #2a7c7b;
	border-color: #2a7c7b;
	justify-content: center;
	text-align: center;
}
.revive-marquee__card.is-cta .revive-card-body.wp-block-group {
	padding: 2rem 1.25rem;
}
.revive-marquee__card.is-cta .wp-block-heading,
.revive-marquee__card.is-cta p {
	color: #ffffff;
}
.revive-marquee__card.is-cta .wp-block-button__link {
	background: #fbd569;
	color: #4f4f52;
	border-color: #fbd569;
}

@media (max-width: 600px) {
	.revive-marquee__card .wp-block-image img { height: 180px; }
}

/* ------------------------------------------------------------------
   Restorations page (alternating rows) — no extra styles needed,
   uses native block layout.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Contact Form 7 — styled to match the Revive brand
   ------------------------------------------------------------------ */

.wpcf7 form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wpcf7 label {
	display: block;
	font-weight: 500;
	font-size: 0.95rem;
	color: #2a7c7b;
	margin-bottom: 0;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid #d3dedd;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	color: #4f4f52;
	background: #ffffff;
	box-sizing: border-box;
	margin-top: 0.35rem;
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 3px solid #2a7c7b;
	outline-offset: 1px;
	border-color: #2a7c7b;
}

.wpcf7 textarea {
	min-height: 7rem;
	resize: vertical;
}

.wpcf7 input[type="file"] {
	width: 100%;
	padding: 0.5rem;
	background: #f7f8f8;
	border: 1px dashed #98999d;
	border-radius: 6px;
	margin-top: 0.35rem;
	font-size: 0.95rem;
}

.wpcf7 .wpcf7-acceptance {
	display: block;
	margin-top: 0.25rem;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: #4f4f52;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	font-size: 0.95rem;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.2rem;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: #2a7c7b;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	background: #fbd569;
	color: #4f4f52;
	border: 2px solid #fbd569;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	align-self: flex-start;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background: #f4c333;
	border-color: #f4c333;
	outline: none;
}

.wpcf7 .revive-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 600px) {
	.wpcf7 .revive-form-row {
		grid-template-columns: 1fr;
	}
}

.wpcf7 .revive-form-note {
	font-size: 0.9rem;
	font-style: italic;
	color: #78787b;
	margin: -0.5rem 0 0;
}

.wpcf7-response-output {
	border: 2px solid #2a7c7b !important;
	background: #e6f1f1;
	color: #2a7c7b;
	padding: 0.85rem 1rem !important;
	border-radius: 6px;
	margin: 1rem 0 0 !important;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #c83232 !important;
}

.wpcf7-not-valid-tip {
	color: #c83232;
	font-size: 0.85rem;
	font-weight: 500;
	margin-top: 0.25rem;
}

/* ------------------------------------------------------------------
   "Get involved" page — tabbed switcher between the Volunteer form and
   the Donate form. See assets/js/form-toggle.js.

   Progressive enhancement: the tab bar is hidden until the JS marks the
   section ".is-tabs-ready". So with JavaScript off, the tab BUTTONS never
   appear and both form panels simply show stacked — the page still works.
   ------------------------------------------------------------------ */

/* Hidden until JS is ready (see note above). */
.revive-tabs {
	display: none;
}

.revive-get-involved.is-tabs-ready .revive-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 auto 2.25rem;
}

.revive-tab {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.75rem 1.6rem;
	min-height: 44px;
	border: 2px solid #2a7c7b;
	border-radius: 999px;
	background: #ffffff;
	color: #2a7c7b;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.revive-tab:hover {
	background: #e6f1f1;
}

.revive-tab.is-active,
.revive-tab[aria-selected="true"] {
	background: #2a7c7b;
	color: #ffffff;
}

.revive-tab:focus-visible {
	outline: 3px solid #2a7c7b;
	outline-offset: 2px;
}

/* Native hiding for the inactive panel once JS is switching tabs. */
.revive-tabpanel[hidden] {
	display: none !important;
}

/* With JS off, give the two stacked panels a little breathing room. */
.revive-get-involved:not(.is-tabs-ready) .revive-tabpanel + .revive-tabpanel {
	margin-top: 2.5rem;
}

/* Keep the Get involved tabs clear of the fixed header when linked to. */
[id="get-involved"] {
	scroll-margin-top: 6rem;
}