/*
 * Falken Pride — Theme CSS
 *
 * Accessibility, Pride flag decorative elements, focus styles,
 * reduced-motion support, tag colour system, and layout utilities.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────────────────────── */

:root {
	/* Progress Pride flag stripe colours, used by .falken-pride-stripe */
	--falken-stripe-black:      #000000;
	--falken-stripe-brown:      #784F17;
	--falken-stripe-trans-blue: #55CDFC;
	--falken-stripe-trans-pink: #F7A8B8;
	--falken-stripe-white:      #FFFFFF;
	--falken-stripe-red:        #E40303;
	--falken-stripe-orange:     #FF8C00;
	--falken-stripe-yellow:     #FFED00;
	--falken-stripe-green:      #008026;
	--falken-stripe-blue:       #004DFF;
	--falken-stripe-purple:     #750787;

	/* Focus ring — matches primary brand colour */
	--falken-focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #750787;
	--falken-focus-outline: 3px solid #750787;
	--falken-focus-outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — SKIP LINK
   Visually hidden until focused; first tab stop on every page.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-skip-to-content {
	position: absolute;
	top: -9999px;
	left: 6px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	z-index: 9999;
}

.falken-skip-to-content:focus,
.falken-skip-to-content:focus-visible {
	position: fixed;
	top: 6px;
	left: 6px;
	width: auto;
	height: auto;
	padding: 0.75rem 1.5rem;
	clip: auto;
	overflow: visible;
	white-space: normal;
	background-color: #750787;
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: var(--falken-focus-ring);
	outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — FOCUS STYLES
   Visible, consistent focus indicator for all interactive elements.
   Never rely on colour alone; use both outline and a shape change where possible.
   ──────────────────────────────────────────────────────────────────────────── */

:focus-visible {
	outline: var(--falken-focus-outline);
	outline-offset: var(--falken-focus-outline-offset);
	border-radius: 2px;
}

/* Buttons get a white inner ring so the purple outline reads on both light and
   dark button backgrounds. */
.wp-block-button__link:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible {
	outline: none;
	box-shadow: var(--falken-focus-ring);
}

/* Navigation links */
.wp-block-navigation a:focus-visible,
.wp-block-navigation-item a:focus-visible {
	outline: var(--falken-focus-outline);
	outline-offset: 2px;
	border-radius: 2px;
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY — REDUCED MOTION
   Respects the user's OS-level preference. No animations or transitions unless
   explicitly wanted.
   ──────────────────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────────────────
   PROGRESS PRIDE STRIPE
   Purely decorative — the full 11-colour Progress Pride flag rendered as a
   horizontal band at the top of the header. aria-hidden="true" in markup.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-pride-stripe {
	display: block;
	width: 100%;
	height: 7px;
	background: linear-gradient(
		to right,
		var(--falken-stripe-black)      0%    9.09%,
		var(--falken-stripe-brown)      9.09% 18.18%,
		var(--falken-stripe-trans-blue) 18.18% 27.27%,
		var(--falken-stripe-trans-pink) 27.27% 36.36%,
		var(--falken-stripe-white)      36.36% 45.45%,
		var(--falken-stripe-red)        45.45% 54.55%,
		var(--falken-stripe-orange)     54.55% 63.64%,
		var(--falken-stripe-yellow)     63.64% 72.73%,
		var(--falken-stripe-green)      72.73% 81.82%,
		var(--falken-stripe-blue)       81.82% 90.91%,
		var(--falken-stripe-purple)     90.91% 100%
	);
	/* Prevent the thin white trans-white band from disappearing on white bg */
	border-top: 1px solid #E7E5E4;
	border-bottom: 1px solid #E7E5E4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────────────────────────────── */

.wp-block-template-part[data-slug="header"] {
	border-bottom: 1px solid var(--wp--preset--color--mono-3, #E7E5E4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────────────────── */

.falken-footer {
	border-top: 1px solid var(--wp--preset--color--mono-3, #E7E5E4);
}

.falken-footer-stripe {
	display: block;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		to right,
		var(--falken-stripe-red)    0%    16.67%,
		var(--falken-stripe-orange) 16.67% 33.33%,
		var(--falken-stripe-yellow) 33.33% 50%,
		var(--falken-stripe-green)  50%    66.67%,
		var(--falken-stripe-blue)   66.67% 83.33%,
		var(--falken-stripe-purple) 83.33% 100%
	);
}

/* ─────────────────────────────────────────────────────────────────────────────
   POST CARD LAYOUT — two-column grid with image left
   ──────────────────────────────────────────────────────────────────────────── */

.blog-two-columns .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--superbspacing-medium, 2rem);
}

@media (min-width: 768px) {
	.blog-two-columns .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}
}

/* Post featured image — consistent height, cover crop */
.blog-two-columns .wp-block-post-featured-image img,
.blog-two-columns .wp-block-post-featured-image a img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY IMPROVEMENTS
   ──────────────────────────────────────────────────────────────────────────── */

/* Improve line length for readability in post content */
.wp-block-post-content {
	max-width: 72ch;
	margin-inline: auto;
}

/* Paragraph spacing within content */
.wp-block-post-content p + p {
	margin-top: 1.25em;
}

/* Ensure links in body copy are clearly distinguishable beyond colour */
.wp-block-post-content a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wp-block-post-content a:hover,
.wp-block-post-content a:focus {
	text-decoration-thickness: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMMENT SECTION
   ──────────────────────────────────────────────────────────────────────────── */

.wp-block-comments .wp-block-comment-author-name {
	font-weight: 600;
}

/* Input fields in comment form */
.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea,
.wp-block-post-comments-form select {
	border: 2px solid var(--wp--preset--color--mono-3, #E7E5E4);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: inherit;
	transition: border-color 0.15s ease;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	border-color: #750787;
	outline: none;
	box-shadow: 0 0 0 3px rgba(117, 7, 135, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAG / CATEGORY COLOUR PILLS
   Apply these classes to category/tag blocks via Additional CSS Class in the
   editor to colour-code content by theme.
   All combinations meet WCAG AA (4.5:1) for their respective text colours.
   ──────────────────────────────────────────────────────────────────────────── */

.tag-pride-red    { background-color: #E40303; color: #FFFFFF; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-orange { background-color: #FF8C00; color: #1C1917; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-yellow { background-color: #FFED00; color: #1C1917; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-green  { background-color: #008026; color: #FFFFFF; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-blue   { background-color: #004DFF; color: #FFFFFF; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-purple { background-color: #750787; color: #FFFFFF; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-pride-brown  { background-color: #784F17; color: #FFFFFF; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-trans-blue   { background-color: #55CDFC; color: #1C1917; padding: 0.2em 0.6em; border-radius: 4px; }
.tag-trans-pink   { background-color: #F7A8B8; color: #1C1917; padding: 0.2em 0.6em; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────────────────
   404 PAGE
   ──────────────────────────────────────────────────────────────────────────── */

.falken-404-number {
	font-size: clamp(5rem, 20vw, 10rem);
	font-weight: 700;
	line-height: 1;
	/* Rainbow gradient text */
	background: linear-gradient(
		135deg,
		var(--falken-stripe-red)    0%,
		var(--falken-stripe-orange) 20%,
		var(--falken-stripe-yellow) 40%,
		var(--falken-stripe-green)  60%,
		var(--falken-stripe-blue)   80%,
		var(--falken-stripe-purple) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #750787; /* fallback for browsers without background-clip: text */
}

@supports not (-webkit-background-clip: text) {
	.falken-404-number {
		-webkit-text-fill-color: unset;
		color: #750787;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH FORM
   ──────────────────────────────────────────────────────────────────────────── */

.wp-block-search__input {
	border: 2px solid var(--wp--preset--color--mono-3, #E7E5E4);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

.wp-block-search__input:focus {
	border-color: #750787;
	outline: none;
	box-shadow: 0 0 0 3px rgba(117, 7, 135, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION
   ──────────────────────────────────────────────────────────────────────────── */

.wp-block-query-pagination-numbers .page-numbers {
	padding: 0.3em 0.6em;
	border-radius: 4px;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: #750787;
	color: #FFFFFF;
}

.wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
	background-color: var(--wp--preset--color--mono-4, #F0EDE8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   Remove decorative elements in print; ensure good contrast.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   FRONT PAGE — hero fills to the very top of the viewport
   Eliminate any root padding (e.g. from useRootPaddingAwareAlignments) so the
   hero starts flush with the top of the viewport — no dead space above the
   image.  The floating header then overlays the top of the hero.
   ──────────────────────────────────────────────────────────────────────────── */

body.home,
body.home .wp-site-blocks {
	padding-top: 0 !important;
}

/* WP applies a 24px block-gap margin between the header and main, and
   a default 22px padding-top to the cover block — both push the hero
   down and create whitespace above the photo. Kill them on the front page. */
body.home main.wp-block-group {
	margin-top: 0 !important;
}

body.home .falken-hero.wp-block-cover {
	padding-top: 0 !important;
}

body.home header.wp-block-template-part {
	position: absolute;
	top: 7px;      /* sit below the 7px pride stripe on the hero */
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent !important;
	border-bottom: none !important;
}

/* The pride stripe is now baked into the top of the hero image itself —
   hide the one in the header so we don't double-render it. */
body.home header .falken-pride-stripe {
	display: none !important;
}

/* Site title and navigation links go white over the dark image */
body.home header .wp-block-site-title a,
body.home header .wp-block-navigation a,
body.home header .wp-block-navigation-item__content {
	color: rgba(250, 250, 248, 0.92) !important;
}

body.home header .wp-block-site-title a:hover,
body.home header .wp-block-navigation a:hover {
	color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO — full-bleed parallax cover
   dimRatio is 0 in the block so WP doesn't render its own overlay span.
   We own the gradient entirely via ::before, giving us a dissolve from the
   dark centre down to the page background colour at the bottom.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-hero {
	margin-top: 0 !important;
	position: relative;
}

/* CSS parallax: image scrolls slower than the page */
.falken-hero .wp-block-cover__image-background {
	background-attachment: fixed;
}

/* Gradient overlay — no WP span, we do this ourselves */
.falken-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0,  0,  0, 0.55)  0%,    /* header zone — readable nav            */
		rgba(0,  0,  0, 0.30) 20%,    /* ease off before the title             */
		rgba(0,  0,  0, 0.62) 42%,    /* title band — peak darkness            */
		rgba(0,  0,  0, 0.62) 62%,    /* hold the dark band through the title  */
		rgba(0,  0,  0, 0.30) 76%,    /* taper toward the dissolve             */
		rgba(250,250,248,0.6) 90%,    /* begin dissolve to page background     */
		rgba(250,250,248,1.0) 100%    /* full page background — seamless join  */
	);
}

/* Progress Pride stripe sits at the very top of the hero image.
   z-index 10 keeps it above the gradient overlay (z-1) but the floating
   header (z-100) still layers on top — links remain clickable. */
.falken-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 7px;
	z-index: 10;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--falken-stripe-black)      0%    9.09%,
		var(--falken-stripe-brown)      9.09% 18.18%,
		var(--falken-stripe-trans-blue) 18.18% 27.27%,
		var(--falken-stripe-trans-pink) 27.27% 36.36%,
		var(--falken-stripe-white)      36.36% 45.45%,
		var(--falken-stripe-red)        45.45% 54.55%,
		var(--falken-stripe-orange)     54.55% 63.64%,
		var(--falken-stripe-yellow)     63.64% 72.73%,
		var(--falken-stripe-green)      72.73% 81.82%,
		var(--falken-stripe-blue)       81.82% 90.91%,
		var(--falken-stripe-purple)     90.91% 100%
	);
}

/* Inner content sits above the gradient */
.falken-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	padding-inline: var(--wp--preset--spacing--superbspacing-small, 1.5rem);
	/* Push text down from the floating header */
	padding-top: clamp(5rem, 12vh, 9rem);
	padding-bottom: clamp(4rem, 10vh, 8rem);
}

/* iOS/iPadOS does not support background-attachment:fixed on most elements.
   Fall back gracefully — the image still looks good, just without the parallax. */
@supports (-webkit-overflow-scrolling: touch) {
	.falken-hero .wp-block-cover__image-background {
		background-attachment: scroll;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   FRONT PAGE — INTRO
   ──────────────────────────────────────────────────────────────────────────── */

.falken-intro p {
	max-width: 62ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FRONT PAGE — FEATURED BLOG POST
   ──────────────────────────────────────────────────────────────────────────── */

.falken-featured-post .falken-featured-post__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--superbspacing-medium, 2rem);
	align-items: start;
}

@media (max-width: 680px) {
	.falken-featured-post .falken-featured-post__inner {
		grid-template-columns: 1fr;
	}
}

/* If there's no featured image the image block renders empty — collapse it
   so the text column fills the space naturally */
.falken-featured-post .wp-block-post-featured-image:empty,
.falken-featured-post .wp-block-post-featured-image:not(:has(img)) {
	display: none;
}

.falken-featured-post .wp-block-post-featured-image:empty ~ *,
.falken-featured-post .wp-block-post-featured-image:not(:has(img)) ~ * {
	grid-column: 1 / -1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FRONT PAGE — FINDS SECTION CARDS
   ──────────────────────────────────────────────────────────────────────────── */

.falken-section-cards {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: var(--wp--preset--spacing--superbspacing-small, 1.5rem) !important;
	flex-wrap: unset !important; /* override WP inline flex */
}

@media (max-width: 900px) {
	.falken-section-cards {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.falken-section-cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.falken-section-card {
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.falken-section-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Pride colour accent bar at top of each card */
.falken-section-card::before {
	content: '';
	display: block;
	height: 4px;
	border-radius: 8px 8px 0 0;
	margin: calc(-1 * var(--wp--preset--spacing--superbspacing-small, 1.5rem));
	margin-bottom: var(--wp--preset--spacing--superbspacing-small, 1.5rem);
}

.falken-section-card--good-places::before    { background-color: #008026; } /* Pride Green  */
.falken-section-card--fitting-room::before   { background-color: #55CDFC; } /* Trans Blue   */
.falken-section-card--admin::before          { background-color: #004DFF; } /* Pride Blue   */
.falken-section-card--pleasure::before       { background-color: #750787; } /* Pride Purple */
.falken-section-card--hearts::before         { background-color: #E40303; } /* Pride Red    */

/* Card heading links */
.falken-section-card h3 a {
	text-decoration: none;
	color: inherit;
}

.falken-section-card h3 a:hover {
	color: var(--wp--preset--color--primary, #750787);
}

.falken-section-card h3 a:focus-visible {
	outline: var(--falken-focus-outline);
	outline-offset: var(--falken-focus-outline-offset);
	border-radius: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.falken-section-card {
		transition: none;
	}
	.falken-section-card:hover {
		transform: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY SWITCHER WIDGET
   Fixed bottom-right floating button that opens a colour-mode panel.
   The widget is appended outside .wp-site-blocks so CSS filters on the
   page content never affect it.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-a11y-widget {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 10000;
	font-family: var(--wp--preset--font-family--fontprimary, system-ui, sans-serif);
	font-size: 1rem;
}

/* Toggle button */
.falken-a11y-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: #750787;
	color: #ffffff;
	border: 2px solid #ffffff;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	line-height: 1;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.falken-a11y-toggle:hover {
	background-color: #5C0669;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.falken-a11y-toggle:focus-visible {
	outline: 3px solid #FFED00;
	outline-offset: 3px;
	box-shadow: none;
}

/* Panel */
.falken-a11y-panel {
	position: absolute;
	bottom: calc(100% + 0.75rem);
	right: 0;
	width: 268px;
	background: #ffffff;
	border: 2px solid #1C1917;
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.falken-a11y-panel[hidden] {
	display: none;
}

.falken-a11y-panel__title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #1C1917;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #E7E5E4;
}

/* Individual option row — label left, toggle switch right */
.falken-a11y-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0;
	cursor: pointer;
}

.falken-a11y-option__text {
	flex: 1;
	min-width: 0;
}

.falken-a11y-option__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1C1917;
	line-height: 1.4;
}

.falken-a11y-option__desc {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: #57534E;
	margin-top: 0.1rem;
	line-height: 1.35;
}

/* Toggle switch */
.falken-a11y-switch {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	width: 2.5rem;
	height: 1.375rem;
}

.falken-a11y-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.falken-a11y-switch__slider {
	position: absolute;
	inset: 0;
	background-color: #D1CFC8;
	border-radius: 1.375rem;
	transition: background-color 0.15s ease;
	pointer-events: none;
}

.falken-a11y-switch__slider::before {
	content: '';
	position: absolute;
	height: 1rem;
	width: 1rem;
	left: 0.1875rem;
	bottom: 0.1875rem;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.falken-a11y-switch input:checked + .falken-a11y-switch__slider {
	background-color: #750787;
}

.falken-a11y-switch input:checked + .falken-a11y-switch__slider::before {
	transform: translateX(1.125rem);
}

.falken-a11y-switch input:focus-visible + .falken-a11y-switch__slider {
	outline: 3px solid #750787;
	outline-offset: 2px;
}

/* Hint at base of panel */
.falken-a11y-panel__hint {
	font-size: 0.68rem;
	color: #57534E;
	margin: 0.6rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid #E7E5E4;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY MODES
   Applied as classes on <html> by accessibility-switcher.js.
   ──────────────────────────────────────────────────────────────────────────── */

/* HIGH CONTRAST
   Override key custom properties for maximum contrast. Uses CSS custom
   properties so all WP block styles that reference them update automatically. */

html.a11y-high-contrast {
	--wp--preset--color--base:          #ffffff;
	--wp--preset--color--mono-1:        #000000;
	--wp--preset--color--mono-2:        #000000;
	--wp--preset--color--mono-3:        #000000;
	--wp--preset--color--mono-4:        #eeeeee;
	--wp--preset--color--primary:       #4a0057;
	--wp--preset--color--primary-hover: #2d0036;
	--falken-focus-ring:    0 0 0 3px #ffffff, 0 0 0 6px #000000;
	--falken-focus-outline: 3px solid #000000;
	filter: contrast(1.2);
}

/* Extra punch on the hero overlay in high-contrast mode */
html.a11y-high-contrast .wp-block-cover {
	filter: contrast(1.15) brightness(1.05);
}

/* COLOUR-BLINDNESS COMPENSATION MODES
   Applied to .wp-site-blocks (the FSE content wrapper) rather than <body>
   so that position:fixed elements (including the a11y widget itself) are
   unaffected by the stacking-context created by CSS filter.

   The SVG filter definitions are injected by PHP via the wp_footer hook.

   Matrices are compensation matrices (not simulation): they shift the
   colour channels that are hardest to distinguish for each condition,
   making the palette more legible without inverting everything. */

/* Deuteranopia (green-weak): shifts green channel toward teal/blue */
html.a11y-deuteranopia .wp-site-blocks {
	filter: url('#falken-filter-deuteranopia');
}

/* Protanopia (red-weak): redistributes red-channel energy via green */
html.a11y-protanopia .wp-site-blocks {
	filter: url('#falken-filter-protanopia');
}

/* Tritanopia (blue-yellow): shifts blue toward blue-purple for clarity */
html.a11y-tritanopia .wp-site-blocks {
	filter: url('#falken-filter-tritanopia');
}

/* DYSLEXIA-FRIENDLY
   Applies OpenDyslexic throughout with spacing adjustments that reduce
   visual crowding — the main cause of reading difficulty for many dyslexic
   readers. Warm off-white background reduces contrast harshness. */

html.a11y-dyslexia .wp-site-blocks *,
html.a11y-dyslexia .wp-site-blocks {
	font-family: 'OpenDyslexic', cursive !important;
	line-height: 1.9 !important;
	letter-spacing: 0.05em !important;
	word-spacing: 0.2em !important;
}

/* Warm cream background — slightly lower contrast than pure white,
   which many dyslexic readers find reduces visual stress */
html.a11y-dyslexia {
	--wp--preset--color--base: #FFF9F0;
}

html.a11y-dyslexia .wp-site-blocks {
	background-color: #FFF9F0 !important;
}

/* Override section backgrounds */
html.a11y-dyslexia .falken-finds-section {
	background-color: #FFF0DC !important; /* slightly deeper cream for differentiation */
}

/* Section cards also pick up cream */
html.a11y-dyslexia .falken-section-card {
	background-color: #FFF9F0 !important;
}

/* Hero text doesn't need font override — it's display type, not body copy */
html.a11y-dyslexia .falken-hero .wp-block-site-title,
html.a11y-dyslexia .falken-hero .wp-block-site-tagline {
	font-family: var(--wp--preset--font-family--generica) !important;
	letter-spacing: 0.02em !important;
	word-spacing: normal !important;
}

/* Slightly larger body text */
html.a11y-dyslexia .wp-site-blocks p,
html.a11y-dyslexia .wp-site-blocks li {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
}

/* SIMPLIFIED VIEW
   Removes all decorative visual elements and linearises the layout.
   Useful for screen reader users who also use visual display, and for
   people who prefer minimal cognitive load.
   Note: the site's ARIA roles, landmark regions and semantic HTML are
   always active — this mode just strips the visual decoration. */

/* Hero: replace parallax photo with a solid dark slab */
html.a11y-simplified .falken-hero .wp-block-cover__image-background {
	display: none !important;
}

html.a11y-simplified .falken-hero::before {
	background: #1C1917 !important;
}

html.a11y-simplified .falken-hero::after {
	display: none !important;
}

/* Remove all decorative pride stripes */
html.a11y-simplified .falken-pride-stripe,
html.a11y-simplified .falken-footer-stripe {
	display: none !important;
}

/* Flat white on all section backgrounds */
html.a11y-simplified .wp-site-blocks,
html.a11y-simplified .falken-finds-section {
	background-color: #ffffff !important;
	background-image: none !important;
}

/* Remove featured image from blog preview — show text only */
html.a11y-simplified .falken-featured-post .wp-block-post-featured-image {
	display: none !important;
}

html.a11y-simplified .falken-featured-post .falken-featured-post__inner {
	grid-template-columns: 1fr !important;
}

/* Cards: replace colour-bar accent with a plain left border */
html.a11y-simplified .falken-section-card::before {
	display: none !important;
}

html.a11y-simplified .falken-section-card {
	border-top: none !important;
	border-left: 4px solid var(--wp--preset--color--primary, #750787) !important;
	border-radius: 0 6px 6px 0 !important;
	box-shadow: none !important;
}

html.a11y-simplified .falken-section-card:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Strip shadows and visual noise site-wide */
html.a11y-simplified .wp-site-blocks * {
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
}

@media print {
	.falken-pride-stripe,
	.falken-footer-stripe,
	.wp-block-navigation,
	.falken-skip-to-content {
		display: none !important;
	}

	body {
		color: #000000 !important;
		background: #FFFFFF !important;
	}

	a {
		color: #000000 !important;
		text-decoration: underline !important;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE
   White text on dark background. Added to the COLOUR_FILTERS group in JS so
   it is mutually exclusive with High Contrast and colour-blindness modes.
   ──────────────────────────────────────────────────────────────────────────── */

html.a11y-dark-mode {
	--wp--preset--color--base:          #121212;
	--wp--preset--color--mono-1:        #E8E6E1;
	--wp--preset--color--mono-2:        #A8A5A0;
	--wp--preset--color--mono-3:        #3A3836;
	--wp--preset--color--mono-4:        #1A1818;
	--wp--preset--color--primary:       #C084D0;
	--wp--preset--color--primary-hover: #D4A0E0;
	color-scheme: dark;
}

html.a11y-dark-mode body,
html.a11y-dark-mode .wp-site-blocks {
	background-color: #121212 !important;
	color: #E8E6E1 !important;
}

/* Hero gradient: dissolve bottom matches dark background */
html.a11y-dark-mode .falken-hero::before {
	background: linear-gradient(
		to bottom,
		rgba(0,   0,   0, 0.55)  0%,
		rgba(0,   0,   0, 0.30)  20%,
		rgba(0,   0,   0, 0.65)  42%,
		rgba(0,   0,   0, 0.65)  62%,
		rgba(0,   0,   0, 0.35)  76%,
		rgba(18, 18,  18, 0.85)  90%,
		rgba(18, 18,  18, 1.0)   100%
	) !important;
}

/* Section cards — override hard-coded inline white background */
html.a11y-dark-mode .falken-section-card {
	background-color: #242220 !important;
}

html.a11y-dark-mode .falken-finds-section {
	background-color: #1A1818 !important;
}

/* Support section */
html.a11y-dark-mode .falken-support-section {
	background-color: #1A1818 !important;
}

html.a11y-dark-mode .falken-support-card {
	background-color: #242220 !important;
}

/* All text in site blocks */
html.a11y-dark-mode .wp-site-blocks h1,
html.a11y-dark-mode .wp-site-blocks h2,
html.a11y-dark-mode .wp-site-blocks h3,
html.a11y-dark-mode .wp-site-blocks h4,
html.a11y-dark-mode .wp-site-blocks p,
html.a11y-dark-mode .wp-site-blocks li {
	color: #E8E6E1 !important;
}

/* Links */
html.a11y-dark-mode .wp-site-blocks a {
	color: #C084D0 !important;
}

html.a11y-dark-mode .wp-site-blocks a:hover {
	color: #D4A0E0 !important;
}

/* Section card heading links */
html.a11y-dark-mode .falken-section-card h3 a,
html.a11y-dark-mode .falken-support-card h3 {
	color: #E8E6E1 !important;
}

html.a11y-dark-mode .falken-section-card h3 a:hover {
	color: #C084D0 !important;
}

/* Support card phone links */
html.a11y-dark-mode .falken-support-card a[href^="tel:"] {
	color: #88CEFA !important;
}

/* Borders */
html.a11y-dark-mode .wp-block-template-part[data-slug="header"] {
	border-bottom-color: #3A3836 !important;
}

html.a11y-dark-mode .falken-footer {
	border-top-color: #3A3836 !important;
}

/* Footer credit box */
html.a11y-dark-mode .falken-footer .has-mono-4-background-color {
	background-color: #1A1818 !important;
}

/* Comment form & search inputs */
html.a11y-dark-mode .wp-block-post-comments-form input,
html.a11y-dark-mode .wp-block-post-comments-form textarea,
html.a11y-dark-mode .wp-block-search__input {
	background-color: #1E1C1A !important;
	border-color: #3A3836 !important;
	color: #E8E6E1 !important;
}

/* Pagination hover */
html.a11y-dark-mode .wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
	background-color: #2A2826 !important;
}

/* A11y widget panel */
html.a11y-dark-mode .falken-a11y-panel {
	background-color: #242220 !important;
	border-color: #3A3836 !important;
}

html.a11y-dark-mode .falken-a11y-panel__title {
	color: #E8E6E1 !important;
	border-bottom-color: #3A3836 !important;
}

html.a11y-dark-mode .falken-a11y-option__label {
	color: #E8E6E1 !important;
}

html.a11y-dark-mode .falken-a11y-option__desc,
html.a11y-dark-mode .falken-a11y-panel__hint {
	color: #A8A5A0 !important;
}

html.a11y-dark-mode .falken-a11y-panel__hint {
	border-top-color: #3A3836 !important;
}

html.a11y-dark-mode .falken-a11y-switch__slider {
	background-color: #3A3836 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOSS BUTTON — Quick Exit
   A small floating "Exit" button (bottom-left). Clicking it — or pressing
   Escape twice quickly — replaces the visible page with an innocuous decoy
   screen. Click/keypress anywhere on the decoy dismisses it.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-boss-btn {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	background-color: #B91C1C;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 2rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--fontprimary, system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.falken-boss-btn:hover {
	background-color: #991B1B;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.falken-boss-btn:focus-visible {
	outline: 3px solid #FFED00;
	outline-offset: 3px;
	box-shadow: none;
}

/* Decoy overlay — sits above everything, covers full viewport */
#falken-boss-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background-color: #f5f5f5;
	overflow-y: auto;
}

#falken-boss-overlay[hidden] {
	display: none;
}

/* Decoy page styles — deliberately generic, food-blog aesthetic */
.falken-boss-decoy {
	min-height: 100vh;
	font-family: Georgia, 'Times New Roman', serif;
	color: #1a1a1a;
	background-color: #f5f5f5;
}

.falken-boss-decoy__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.875rem 1.5rem;
	background-color: #1a2744;
	color: #ffffff;
}

.falken-boss-decoy__logo {
	font-size: 1.25rem;
	font-weight: 700;
	font-family: Arial, sans-serif;
	letter-spacing: 0.04em;
	color: #61affe;
}

.falken-boss-decoy__nav {
	display: flex;
	gap: 1.5rem;
	font-family: Arial, sans-serif;
	font-size: 0.875rem;
}

.falken-boss-decoy__nav a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.falken-boss-decoy__nav a:hover {
	text-decoration: underline;
}

.falken-boss-decoy__main {
	max-width: 760px;
	margin: 2rem auto;
	padding: 2rem;
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.falken-boss-decoy__main h1 {
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
	color: #1a1a1a;
	font-family: Georgia, serif;
	font-weight: 700;
}

.falken-boss-decoy__kicker {
	font-family: Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #61affe;
	margin: 0 0 0.4rem;
}

.falken-boss-decoy__meta {
	font-family: Arial, sans-serif;
	font-size: 0.875rem;
	color: #666;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eee;
}

.falken-boss-decoy__main h2 {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.5rem;
	color: #1a1a1a;
	font-family: Arial, sans-serif;
	font-weight: 700;
}

.falken-boss-decoy__main ul,
.falken-boss-decoy__main ol {
	padding-left: 1.5rem;
	margin: 0 0 1rem;
}

.falken-boss-decoy__main li {
	font-size: 1rem;
	line-height: 1.7;
	color: #333;
	margin-bottom: 0.3rem;
}

.falken-boss-decoy__dismiss {
	position: fixed;
	bottom: 0.75rem;
	right: 0.75rem;
	font-size: 0.7rem;
	color: #999;
	background: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	font-family: Arial, sans-serif;
	opacity: 0.5;
}

.falken-boss-decoy__dismiss:hover {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUPPORT & CRISIS RESOURCES SECTION
   ──────────────────────────────────────────────────────────────────────────── */

.falken-support-section {
	border-top: 5px solid #55CDFC; /* Trans blue — calm, not alarming */
}

.falken-support-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--wp--preset--spacing--superbspacing-small, 1.5rem) !important;
	flex-wrap: unset !important;
}

@media (max-width: 900px) {
	.falken-support-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.falken-support-grid {
		grid-template-columns: 1fr !important;
	}
}

.falken-support-card {
	border-left: 4px solid #55CDFC !important;
	border-radius: 0 6px 6px 0 !important;
}

.falken-support-card h3 {
	font-size: 0.95rem !important;
	margin-bottom: 0.25rem !important;
	font-weight: 700 !important;
}

/* Phone number links — large, tap-friendly */
.falken-support-card a[href^="tel:"] {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #750787);
	text-decoration: none;
	margin-bottom: 0.35rem;
	letter-spacing: 0.01em;
}

.falken-support-card a[href^="tel:"]:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--primary-hover, #5C0669);
}

/* "Text" shortcodes e.g. "Text SHOUT to 85258" */
.falken-support-card .falken-support-text-code {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #750787);
	margin-bottom: 0.35rem;
	font-style: normal;
}

/* Hours/description line */
.falken-support-card .falken-support-hours {
	font-size: 0.78rem;
	color: var(--wp--preset--color--mono-2, #57534E);
	margin-top: 0;
}

/* Charity / organisation cards — purple left accent, distinct from crisis blue */
.falken-charity-card {
	border-left: 4px solid #750787 !important;
	border-radius: 0 6px 6px 0 !important;
}

.falken-charity-card h3 {
	font-size: 0.95rem !important;
	margin-bottom: 0.25rem !important;
	font-weight: 700 !important;
}

.falken-charity-card a[href^="tel:"] {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #750787);
	text-decoration: none;
	margin-bottom: 0.35rem;
}

.falken-charity-card a[href^="tel:"]:hover {
	text-decoration: underline;
}

.falken-charity-card .falken-charity-web {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #750787);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-bottom: 0.35rem;
}

.falken-charity-card .falken-support-hours {
	font-size: 0.78rem;
	color: var(--wp--preset--color--mono-2, #57534E);
	margin-top: 0;
}

/* Dark mode overrides for charity cards */
html.a11y-dark-mode .falken-charity-card {
	background-color: #242220 !important;
}

/* Sub-heading separating crisis lines from organisations */
.falken-support-subheading {
	font-family: var(--wp--preset--font-family--generica);
	font-size: var(--wp--preset--font-size--superbfont-xxsmall);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mono-2, #57534E);
	margin: var(--wp--preset--spacing--superbspacing-medium) 0 var(--wp--preset--spacing--superbspacing-small);
	padding-top: var(--wp--preset--spacing--superbspacing-small);
	border-top: 1px solid var(--wp--preset--color--mono-3, #E7E5E4);
}

html.a11y-dark-mode .falken-support-subheading {
	border-top-color: #3A3836 !important;
	color: #A8A5A0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATIC PAGE — PAGE HEADER ZONE
   Full-width tinted title band, separated from content by the pride stripe.
   Applied to pages via the .falken-page-header class in page.html.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-page-header {
	position: relative;
	/* Extra room at the bottom so the CSS pride stripe sits inside the band
	   without overlapping the title text. The !important is needed to override
	   the inline padding-bottom set by the WordPress block serialiser. */
	padding-bottom: calc(var(--wp--preset--spacing--superbspacing-medium, 2.5rem) + 9px) !important;
}

/* Pride stripe rendered in CSS — avoids any wp:html block in the template,
   which can cause the Site Editor's block parser to misbehave. */
.falken-page-header::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7px;
	background: linear-gradient(
		to right,
		var(--falken-stripe-black)      0%     9.09%,
		var(--falken-stripe-brown)      9.09%  18.18%,
		var(--falken-stripe-trans-blue) 18.18% 27.27%,
		var(--falken-stripe-trans-pink) 27.27% 36.36%,
		var(--falken-stripe-white)      36.36% 45.45%,
		var(--falken-stripe-red)        45.45% 54.55%,
		var(--falken-stripe-orange)     54.55% 63.64%,
		var(--falken-stripe-yellow)     63.64% 72.73%,
		var(--falken-stripe-green)      72.73% 81.82%,
		var(--falken-stripe-blue)       81.82% 90.91%,
		var(--falken-stripe-purple)     90.91% 100%
	);
	border-top: 1px solid #E7E5E4;
	border-bottom: 1px solid #E7E5E4;
}

/* The h1 inside the page header — override any WP inline colour so dark mode
   works correctly without needing an extra selector. */
.falken-page-header h1,
.falken-page-header .wp-block-post-title {
	color: var(--wp--preset--color--mono-1, #1C1917);
}

html.a11y-dark-mode .falken-page-header {
	background-color: #1A1818 !important;
}

html.a11y-dark-mode .falken-page-header::after {
	border-color: #3A3836 !important;
}

html.a11y-dark-mode .falken-page-header h1,
html.a11y-dark-mode .falken-page-header .wp-block-post-title {
	color: #E8E6E1 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUPPORT PAGE — page-support.html specific overrides
   The section-level heading in the support page uses a slightly larger intro
   paragraph and a subtle intro card.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-support-page-intro {
	max-width: 68ch;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUPPORT BANNER — compact crisis strip for Finds pages
   A slim full-width bar with the most critical numbers and a link to the
   full support page. Trans-blue top border for visual recognition.
   ──────────────────────────────────────────────────────────────────────────── */

.falken-support-banner {
	border-top: 4px solid #55CDFC;
	background-color: var(--wp--preset--color--mono-4, #F0EDE8);
}

.falken-support-banner p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--mono-1, #1C1917);
	text-align: center;
}

.falken-support-banner a[href^="tel:"] {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #750787);
	text-decoration: none;
}

.falken-support-banner a[href^="tel:"]:hover {
	text-decoration: underline;
}

.falken-support-banner .falken-support-banner__more {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #750787);
}

html.a11y-dark-mode .falken-support-banner {
	background-color: #1A1818 !important;
}

html.a11y-dark-mode .falken-support-banner p {
	color: #E8E6E1 !important;
}

html.a11y-dark-mode .falken-support-banner a[href^="tel:"],
html.a11y-dark-mode .falken-support-banner .falken-support-banner__more {
	color: #C084D0 !important;
}

/* Footer crisis link */
.falken-footer-crisis-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--wp--preset--color--primary, #750787);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.875rem;
}

.falken-footer-crisis-link:hover {
	text-decoration: underline;
}