/*
Theme Name: London Fano
Theme URI: https://londonfano.org
Author: London Fano
Description: Warm, editorial block theme for London Fano — a UK advocacy group giving voice to the Amhara people of Ethiopia. Design tokens (colour, type, spacing) are defined in theme.json; sections are built from core blocks composed into patterns.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: london-fano
Tags: block-theme, editorial, advocacy, non-profit
*/

/*
 * Flag rule: the thin Ethiopian flag accent (green, yellow, red, in that
 * order) called for in the brief. Rendered as a hard-stop gradient on an
 * empty core/group so it stays an editable block instead of raw HTML.
 * Colours come from the flag-* palette tokens in theme.json.
 */
.lf-flag-rule {
	display: block;
	flex: none;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--flag-green) 0 33.333%,
		var(--wp--preset--color--flag-yellow) 33.333% 66.666%,
		var(--wp--preset--color--flag-red) 66.666% 100%
	);
}

/* Site Editor fix: the flag rule is an empty core/group, and the editor drops
   a `.components-placeholder` box inside empty, directly-editable blocks. On a
   4px-tall element that placeholder overflows to ~216px and renders as a grey
   box in the Templates view (the front end has no such element, and template
   parts like the footer are previewed, so both look correct). Hiding the
   placeholder lets the gradient stripe show while editing. Editor-only:
   `.components-placeholder` does not exist on the front end, so this is inert
   there. Loaded into the editor via add_editor_style( 'style.css' ). */
.lf-flag-rule .components-placeholder {
	display: none !important;
}

/* Sits on top of photography: slightly narrower, with a soft shadow so the
   accent reads against a busy image. */
.lf-flag-rule.is-on-photo {
	width: 44px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.4 );
}

/* On the dark green (primary) block: a softened flag palette so all three
   bands read against the background — the standard flag-green would vanish. */
.lf-flag-rule.is-on-dark {
	background: linear-gradient(
		to right,
		#8fbf9a 0 33.333%,
		#f5d083 33.333% 66.666%,
		#e08a7e 66.666% 100%
	);
}

/* Balance a short centred heading/quote across its lines. */
.lf-balance {
	text-wrap: balance;
}

/* Sticky header on wider screens so the nav follows the reader down the page.
   Not on mobile, where the drawer overlay handles navigation. The template
   part renders an outer <header class="wp-block-template-part"> wrapper whose
   parent is the full-height .wp-site-blocks; the sticky must sit on that
   wrapper (the inner .lf-header's containing block is only header-height, so
   sticking it there does nothing). */
@media ( min-width: 700px ) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* Mobile nav drawer: the header navigation is right-justified for the desktop
   bar, which stacks the menu items hard against the right edge of the open
   overlay (no breathing room). Centre the stacked items within the open
   overlay only (the desktop bar keeps its right alignment). The list is forced
   full-width and centre-aligned; !important beats core's more specific
   justification rule on the list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	width: 100%;
}

/* Header CTA: the green "Get Involved" button shows on the desktop bar; on
   mobile it is hidden and instead appears as the last item in the drawer,
   styled as a pill (see below). Breakpoints match the nav's overlay breakpoint
   (600px), so exactly one of the two is visible at any width. */
@media ( max-width: 599.98px ) {
	.lf-header-cta {
		display: none !important;
	}
}
@media ( min-width: 600px ) {
	.lf-nav-cta {
		display: none !important;
	}
}

/* Larger, comfortable menu type + tap targets in the open drawer. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 19px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* "Get Involved" drawer item as a pill, set apart from the plain links so the
   call to action keeps its weight once it is no longer the header button. */
.wp-block-navigation__responsive-container.is-menu-open .lf-nav-cta {
	margin-top: 12px;
}
.wp-block-navigation__responsive-container.is-menu-open .lf-nav-cta .wp-block-navigation-item__content {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--panel );
	padding: 12px 30px;
	border-radius: 7px;
}
.wp-block-navigation__responsive-container.is-menu-open .lf-nav-cta .wp-block-navigation-item__content:hover {
	background-color: var( --wp--preset--color--primary-dark );
}

/* Highlight the current page in the menu (uses the aria-current WP adds to the
   matching link; degrades gracefully when nothing matches). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item[aria-current] .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open [aria-current] {
	color: var( --wp--preset--color--accent );
}

/* Give the drawer close (X) breathing room from the top-right screen edge. */
.wp-block-navigation__responsive-container-close {
	margin-top: 8px;
	margin-right: 10px;
}

/* Subtle Ethiopian-flag accent near the top of the open drawer, centred, tying
   the menu into the site's visual language. Decorative pseudo-element — does
   not affect layout, focus, or width. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 34px;
	left: 50%;
	transform: translateX( -50% );
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var( --wp--preset--color--flag-green ) 0 33.333%,
		var( --wp--preset--color--flag-yellow ) 33.333% 66.666%,
		var( --wp--preset--color--flag-red ) 66.666% 100%
	);
}

/* On-brand focus ring for nav links (replaces the browser-default blue). */
.wp-block-navigation .wp-block-navigation-item a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Slide the drawer in from the right when opened; reads as unfolding from the
   hamburger. Reduced-motion users get no animation. */
@media ( prefers-reduced-motion: no-preference ) {
	@keyframes lf-nav-slide-in {
		from {
			transform: translateX( 100% );
		}
		to {
			transform: translateX( 0 );
		}
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: lf-nav-slide-in 260ms ease-out both;
	}
}

/* Soft elevation for the panel card in the "Stand With Us" section. */
.lf-elevated {
	box-shadow: 0 10px 34px rgba( 42, 32, 25, 0.08 );
}

/* Contact form (WPForms) — on-brand styling. Overrides the plugin's modern
   CSS variables (scoped to our form card) to match the site: cream fields,
   green submit button, Instrument Sans throughout. !important is needed
   because WPForms sets these variables via an id-scoped inline stylesheet. */
.lf-contact-form .wpforms-container-full {
	--wpforms-field-background-color: #f3ece0 !important;
	--wpforms-field-border-color: rgba( 42, 32, 25, 0.2 ) !important;
	--wpforms-field-border-size: 1.5px !important;
	--wpforms-field-border-radius: 8px !important;
	--wpforms-field-text-color: #2a2019 !important;
	--wpforms-button-background-color: var( --wp--preset--color--primary ) !important;
	--wpforms-button-text-color: var( --wp--preset--color--panel ) !important;
	--wpforms-button-border-radius: 8px !important;
	--wpforms-button-size-font-size: 15px !important;
}
.lf-contact-form .wpforms-form input,
.lf-contact-form .wpforms-form select,
.lf-contact-form .wpforms-form textarea,
.lf-contact-form .wpforms-form .wpforms-field-label,
.lf-contact-form .wpforms-form button {
	font-family: var( --wp--preset--font-family--instrument-sans );
}
.lf-contact-form .wpforms-form .wpforms-field-label {
	color: #4a4034;
	font-weight: 600;
	font-size: 13.5px;
}
.lf-contact-form .wpforms-form button.wpforms-submit {
	font-weight: 600;
	padding: 15px 32px;
}
.lf-contact-form .wpforms-form button.wpforms-submit:hover {
	background-color: var( --wp--preset--color--primary-dark ) !important;
}

/* Contact "Follow" social icons: double the gap between each icon and its
   label (core default is ~8px). Needs the extra specificity + !important to
   beat core's label spacing rule.
   DORMANT: the Follow card was removed from the Contact sidebar (and the
   footer's Follow column with it) while the real TikTok/Instagram/X profile
   URLs are unknown, rather than ship links that go nowhere. Kept so the card
   styles correctly the moment those links are restored. */
.lf-social .wp-social-link .wp-block-social-link-label {
	margin-inline-start: 16px !important;
}

/* Editorial "note to editor" callout (e.g. The Crisis placeholder note):
   a soft panel with the amber accent as a left rule. Kept as a utility class
   so the decorative border stays out of block border attributes. */
.lf-note {
	border-left: 3px solid var( --wp--preset--color--accent );
	background: #efe7d8;
	border-radius: 0 10px 10px 0;
	padding: 20px 24px;
}

/* Soft panel card (Contact page form + info cards): radius + light shadow,
   with no forced height/overflow (unlike .lf-post-card), so cards size to
   their content in a column. */
.lf-card {
	border-radius: 16px;
	box-shadow: 0 3px 14px rgba( 42, 32, 25, 0.06 );
}

/* Square portrait slot for team member cards (Who We Are). Same swappable
   striped placeholder as .lf-post-thumb, but 1:1 for headshots. */
.lf-portrait {
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	background: repeating-linear-gradient(
		135deg,
		#eadfcc,
		#eadfcc 11px,
		#e2d4bc 11px,
		#e2d4bc 22px
	);
}

/* Round author avatar placeholder (Article single byline). Same swappable
   striped fill as the other image slots, but a circle. */
.lf-avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: repeating-linear-gradient(
		135deg,
		#dccfb8,
		#dccfb8 6px,
		#d2c3a8 6px,
		#d2c3a8 12px
	);
}

/* Thin top rule used to separate a trailing block (e.g. the article share
   row) from the content above it. */
.lf-rule-top {
	border-top: 1px solid rgba( 42, 32, 25, 0.16 );
}

/* Latest updates: Query Loop post cards. */
.lf-post-card {
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 3px 14px rgba( 42, 32, 25, 0.06 );
}

/* Swappable image slot for each post — a striped placeholder until real
   photography (or a featured image) is set. Centres any placeholder label
   inside it (e.g. "Post image") independently of block-layout justification,
   so the label stays centred at every breakpoint. */
.lf-post-thumb {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: repeating-linear-gradient(
		135deg,
		#eadfcc,
		#eadfcc 11px,
		#e2d4bc 11px,
		#e2d4bc 22px
	);
}
/* When the slot carries an explicit min-height (featured / article hero), let
   that win over the 16:9 ratio. */
.lf-post-thumb[style*="min-height"] {
	aspect-ratio: auto;
}

/* Updates category filter pills (patterns/updates-filter.php).
 *
 * One pattern serves the Updates page and all five category archives, so the
 * navigation cannot drift between them. Every pill ships in the same outline
 * style; which one reads as current is decided here, from the body classes
 * WordPress already emits:
 *   - a category archive gets `category` plus `category-{slug}`
 *   - the Updates page has neither, so "All" is current there
 * That keeps the markup identical everywhere and needs no per-page variant.
 */
.lf-pill > .wp-block-button__link {
	border-color: rgba( 42, 32, 25, 0.28 );
}
body:not( .category ) .lf-pill-all > .wp-block-button__link,
body.category-news .lf-pill-news > .wp-block-button__link,
body.category-updates .lf-pill-updates > .wp-block-button__link,
body.category-statements .lf-pill-statements > .wp-block-button__link,
body.category-reports .lf-pill-reports > .wp-block-button__link,
body.category-events .lf-pill-events > .wp-block-button__link {
	background-color: var( --wp--preset--color--primary );
	border-color: transparent;
	/* !important is required: every pill carries core's `has-muted-color`
	   preset class, which WordPress emits with !important, so without this the
	   current pill renders muted brown on dark green and fails contrast. */
	color: var( --wp--preset--color--panel ) !important;
}
/* Hover on the pills that are not current. */
.lf-pill > .wp-block-button__link:hover {
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
}
body:not( .category ) .lf-pill-all > .wp-block-button__link:hover,
body.category-news .lf-pill-news > .wp-block-button__link:hover,
body.category-updates .lf-pill-updates > .wp-block-button__link:hover,
body.category-statements .lf-pill-statements > .wp-block-button__link:hover,
body.category-reports .lf-pill-reports > .wp-block-button__link:hover,
body.category-events .lf-pill-events > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--primary-dark );
	border-color: transparent;
	color: var( --wp--preset--color--panel ) !important;
}

/* Inline links inside running prose must not be distinguished by colour alone
   (WCAG 1.4.1). Flagged by axe on the legal pages, where links sit mid
   sentence. Scoped to post content so the nav, buttons, footer link lists and
   card links keep their own treatment, where position and grouping already
   make them identifiable. */
.wp-block-post-content a:not( .wp-element-button ) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Click-to-load video placeholder. The server renders YouTube embeds as this
   (see london_fano_youtube_facade), which contacts nobody; video-embed.js swaps
   in the youtube-nocookie player on click. Styled as a documentary-ish slot
   rather than a YouTube thumbnail, since fetching the thumbnail would leak the
   visitor's IP to Google on page view, which is the thing being avoided. */
.lf-video {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: 14px;
	padding: 24px;
	text-align: center;
	background: var( --wp--preset--color--footer );
}

/* The thumbnail is served from our own uploads directory (see
   london_fano_youtube_thumbnail), never hotlinked from Google. */
.lf-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* hqdefault fallbacks are 4:3 with letterboxing; cover crops the bars. */
}
/* Scrim so the title and play button stay legible over any photograph.
   Excluded once the player has loaded, or it would sit over the iframe. */
.lf-video.has-thumb:not( .is-loaded )::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba( 20, 14, 10, 0.12 ) 0%,
		rgba( 20, 14, 10, 0.32 ) 45%,
		rgba( 20, 14, 10, 0.82 ) 100%
	);
}

.lf-video.is-loaded {
	padding: 0;
	display: block;
}
.lf-video-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Centred circular play control once there is a thumbnail behind it; the
   no-thumbnail fallback keeps the simpler labelled pill. */
.lf-video-play {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	padding: 13px 26px 13px 22px;
	font-family: var( --wp--preset--font-family--instrument-sans );
	font-size: 15px;
	font-weight: 600;
	color: var( --wp--preset--color--panel );
	background: var( --wp--preset--color--primary );
	transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.lf-video-play:hover {
	background: var( --wp--preset--color--primary-dark );
}
.lf-video-play:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}
.lf-video.has-thumb .lf-video-play {
	width: 76px;
	height: 76px;
	padding: 0;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.34 );
}
.lf-video.has-thumb .lf-video-play:hover {
	transform: scale( 1.06 );
}
@media ( prefers-reduced-motion: reduce ) {
	.lf-video-play {
		transition: none;
	}
	.lf-video.has-thumb .lf-video-play:hover {
		transform: none;
	}
}
/* The visible "Play" word belongs only to the no-thumbnail pill; with a
   thumbnail the triangle carries the meaning and the button keeps its
   aria-label for screen readers. */
.lf-video.has-thumb .lf-video-play-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}
/* Play triangle, drawn rather than loaded. */
.lf-video-icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
}
.lf-video.has-thumb .lf-video-icon {
	border-width: 11px 0 11px 18px;
	margin-left: 4px;
}

.lf-video-info {
	position: relative;
	z-index: 2;
}
.lf-video.has-thumb .lf-video-info {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 18px 22px;
	text-align: left;
}
.lf-video-title {
	margin: 0;
	font-family: var( --wp--preset--font-family--spectral );
	font-size: 19px;
	line-height: 1.3;
	color: var( --wp--preset--color--on-dark );
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.5 );
}

/* Privacy note sits below the card, as a caption. Keeping it off the
   thumbnail means it stays readable whatever the photograph looks like. */
.lf-video-note {
	margin: 10px 0 0;
	font-family: var( --wp--preset--font-family--instrument-sans );
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --wp--preset--color--faint );
}
.lf-video-note a {
	color: var( --wp--preset--color--primary );
}

@media ( max-width: 600px ) {
	.lf-video.has-thumb .lf-video-play {
		width: 58px;
		height: 58px;
	}
	.lf-video.has-thumb .lf-video-icon {
		border-width: 9px 0 9px 14px;
	}
	.lf-video-title {
		font-size: 16px;
	}
	.lf-video.has-thumb .lf-video-info {
		padding: 14px 16px;
	}
}

/* Cookie notice banner. Informational only (see functions.php / HANDOFF.md).
   Fixed to the bottom of the viewport, on-brand panel colours, dismissible.
   Printed with the `hidden` attribute and revealed by cookie-notice.js only on
   first visit; the flag gradient on the top edge ties it to the site accent. */
.lf-cookie-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 200;
	background: var( --wp--preset--color--panel );
	border-top: 3px solid transparent;
	border-image: linear-gradient(
			to right,
			var( --wp--preset--color--flag-green ) 0 33.333%,
			var( --wp--preset--color--flag-yellow ) 33.333% 66.666%,
			var( --wp--preset--color--flag-red ) 66.666% 100%
		)
		1;
	box-shadow: 0 -6px 24px rgba( 42, 32, 25, 0.12 );
}
/* Fade/slide the banner up when revealed. Skipped under reduced-motion. */
@media ( prefers-reduced-motion: no-preference ) {
	.lf-cookie-banner {
		transform: translateY( 12px );
		opacity: 0;
		transition: transform 300ms ease-out, opacity 300ms ease-out;
	}
	.lf-cookie-banner.is-visible {
		transform: translateY( 0 );
		opacity: 1;
	}
}
.lf-cookie-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
}
.lf-cookie-text {
	margin: 0;
	flex: 1 1 320px;
	font-family: var( --wp--preset--font-family--instrument-sans );
	font-size: 14px;
	line-height: 1.5;
	color: var( --wp--preset--color--contrast );
}
.lf-cookie-text a {
	color: var( --wp--preset--color--contrast );
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lf-cookie-text a:hover {
	color: var( --wp--preset--color--accent );
}
.lf-cookie-dismiss {
	flex: none;
	border: 0;
	cursor: pointer;
	font-family: var( --wp--preset--font-family--instrument-sans );
	font-size: 14px;
	font-weight: 600;
	color: var( --wp--preset--color--panel );
	background: var( --wp--preset--color--primary );
	padding: 11px 28px;
	border-radius: 7px;
}
.lf-cookie-dismiss:hover {
	background: var( --wp--preset--color--primary-dark );
}
.lf-cookie-dismiss:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
}

/* Category + date meta line. Force the amber accent (including the category
   link, which would otherwise take the default green link colour). */
.lf-post-meta {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.lf-post-meta,
.lf-post-meta a {
	color: var( --wp--preset--color--accent );
}
.lf-post-meta a {
	text-decoration: none;
}