/*
Theme Name: StoryImpact
Theme URI: https://bikramkaji.com.np/storyimpact
Author: Bikram
Author URI: https://bikramkaji.com.np/
Description: StoryImpact is an accessible, action-oriented block theme built for non-profits, charities, NGOs, environmental groups, community fundraisers, and social enterprises. High-contrast colors, clear typography, and ready-made patterns for donation calls-to-action, impact statistics, and mission storytelling help your cause make a trustworthy first impression and turn visitors into supporters. Fully editable with the Site Editor — no custom post types, no bundled plugins, nothing to configure before you start telling your story.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: storyimpact
Tags: full-site-editing, block-patterns, wide-blocks, rtl-language-support, threaded-comments, blog, news

StoryImpact WordPress Theme, Copyright 2026 Bikram
StoryImpact is distributed under the terms of the GNU General Public License v2 (or later).

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
*/

/*
This file is intentionally minimal. StoryImpact is a block theme:
almost all styling (colors, typography, spacing) lives in theme.json
so it stays available and editable inside the Site Editor. The rules
below cover the handful of things theme.json cannot express.
*/

/* Respect reduced-motion preferences site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Prevent long, unbroken words/URLs (donor names, long titles, email
   addresses in the Contact pattern, etc.) from forcing horizontal
   scroll. overflow-wrap and word-break both inherit in CSS, so
   setting them once on body covers every text element on the site —
   headings, buttons, list items, table cells, anything a site owner
   types — without needing to list each one. */
body {
	overflow-wrap: break-word;
}

/* A width backstop, not an overflow one: overflow-x: hidden here
   would silently mask any future overflow bug instead of surfacing
   it, and risks clipping legitimate content like focus outlines or
   off-canvas menus. max-width alone is enough of a safety net. */
html,
body {
	max-width: 100%;
}

/* Code and preformatted text should never force the whole page to
   scroll sideways, but breaking mid-word inside code (the way the
   body-level rule above would) ruins its formatting and readability.
   The correct fix is a contained horizontal scrollbar on the code
   block itself, not word-breaking. */
pre,
.wp-block-code {
	max-width: 100%;
	overflow-x: auto;
}

code,
kbd,
samp {
	overflow-wrap: normal;
	word-break: normal;
}

/* Tables have the same problem as code: breaking words inside cells
   to fit is worse than just letting the table scroll horizontally
   within its own row on narrow screens. */
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

.wp-block-table table {
	overflow-wrap: normal;
	word-break: normal;
}

/* Embeds (YouTube, etc.) and any other media should never exceed
   their container's width, regardless of a fixed width/height
   attribute on the original embed code. Height is left alone so
   core's own responsive-embed aspect-ratio wrapper still controls it. */
img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}

/* Strong, visible focus outline on every interactive element, on top
   of whatever theme.json/core supplies, so keyboard focus is never
   ambiguous against the light or dark sections of the page. */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
summary:focus,
.wp-block-button__link:focus {
	outline: 3px solid var(--wp--preset--color--impact-rust);
	outline-offset: 2px;
}

/* Core's automatic block-theme skip link (WP 6.4+) targets the first
   <main> element; make sure it is visibly styled when it receives
   focus so keyboard users can see it land. Core's own skip-link rule
   has higher specificity than a plain .skip-link selector, so
   !important is needed here to actually apply this theme's branded
   colors — this is a safe use of it, since skip-link appearance
   isn't exposed as a customizable block attribute in the Site
   Editor, unlike the cases elsewhere in this file where !important
   was deliberately removed for exactly that reason. */
.skip-link {
	background: var(--wp--preset--color--deep-forest) !important;
	color: var(--wp--preset--color--white) !important;
	padding: 1em 1.5em !important;
	position: fixed !important;
	top: -100px;
	inset-inline-start: 0 !important;
	z-index: 100000 !important;
	text-decoration: none !important;
}

.skip-link:focus {
	top: 0 !important;
}

/* Donate / primary action buttons: keep a visible border so the
   button reads clearly even for users with color-vision deficiencies,
   not color alone. */
.wp-block-button.is-style-storyimpact-donate .wp-block-button__link {
	border: 2px solid currentColor;
	font-weight: 700;
}

/* Impact stat numbers used in the "Impact Stats" pattern. Text is
   centered to match the icons above them (which are already centered
   via their own margin), so the whole stat block reads as one
   centered unit rather than icon-centered-but-text-left-aligned. */
.stim-stats-row {
	text-align: center;
}

.storyimpact-stat__number {
	font-size: clamp(1.9rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--deep-forest);
	/* Numbers have no natural break point the way a long word does,
	   so letting the global word-break rule hit them just breaks
	   "12,400" into "12,40" / "0" instead of wrapping gracefully.
	   Shrinking via the clamp() above and refusing to wrap here
	   keeps it on one line at any realistic column width. */
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
}

.storyimpact-stat__label {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Rounded corners on pattern images, applied via a plain custom class
   instead of the Image block's border-radius attribute. Hand-authored
   theme markup that uses block-support-generated color/border classes
   can drift from what the editor expects to regenerate from those
   attributes, which triggers "invalid content" / block-recovery
   prompts in the Site Editor. A single static class avoids that. */
.stim-rounded-img img {
	border-radius: 8px;
	box-shadow: 0 16px 32px -18px rgba(16, 40, 30, 0.45);
}

/* Hero section background + text color for the "Hero with Donate
   Call-to-Action" pattern, for the same reason: one plain class
   instead of a Group block's gradient + textColor attributes. */
.stim-hero {
	background: linear-gradient(160deg, #1b4332 0%, #10281e 100%);
	color: var(--wp--preset--color--white);
}

/* theme.json sets a global color on every heading element (h1–h6)
   via `elements.heading`. That's an explicit rule on the element
   itself, so it always wins over a heading's inherited color —
   inheritance only applies when nothing else matches. Any section
   with a dark background that contains a heading must therefore say
   so explicitly, or the heading renders in the (invisible, on a dark
   background) default heading color. This bit our hero headline and
   the footer's "Quick Links" / "Stay Connected" labels. */
.stim-hero h1,
.stim-hero h2,
.stim-hero h3,
.stim-hero h4,
.stim-hero h5,
.stim-hero h6,
.stim-footer h1,
.stim-footer h2,
.stim-footer h3,
.stim-footer h4,
.stim-footer h5,
.stim-footer h6 {
	color: var(--wp--preset--color--white);
}

.stim-hero-outline-btn .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stim-hero-outline-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-forest);
}

/* Callout box in the "Contact Info" pattern — background + rounded
   corners via one plain class, for the same reason as above: combining
   a Group block's backgroundColor and border-radius attributes is an
   untested pairing of two block supports, so it's avoided on principle. */
.stim-callout {
	background: var(--wp--preset--color--warm-sand);
	border-radius: 8px;
}

/* The hero's own photo sits on a dark gradient, so it gets a slightly
   heavier shadow and a faint light border to keep its edge visible. */
.stim-hero-img img {
	border: 4px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

/* Hover lift on the "Causes Grid" pattern's cards — a light touch of
   interactivity, disabled automatically by the reduced-motion rule
   above. */
.stim-cause-card {
	transition: transform 0.18s ease;
}

.stim-cause-card:hover,
.stim-cause-card:focus-within {
	transform: translateY(-4px);
}

.stim-cause-card:hover .stim-rounded-img img,
.stim-cause-card:focus-within .stim-rounded-img img {
	box-shadow: 0 20px 36px -16px rgba(16, 40, 30, 0.55);
}

/* A short, centered accent rule under key section headings —
   StoryImpact's one recurring signature mark, tying "Where your
   support goes" and "Latest stories" back to the action-oriented
   accent color used on buttons. */
.stim-section-heading {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--20);
}

.stim-section-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	background: var(--wp--preset--color--impact-rust);
	border-radius: 2px;
}

/* ----------------------------------------------------------------
   Baseline styling for plain HTML form elements. This theme
   deliberately doesn't bundle a donation or contact-form plugin (see
   the readme FAQ), but virtually every site built on it will install
   one. Plugins usually output plain <input>/<select>/<textarea>/
   <button> markup rather than WordPress blocks, so without this,
   that markup would fall back to completely unstyled browser
   defaults. This is presentation only — it doesn't process forms,
   validate input, or add any behavior, just keeps a plugin's own
   output visually consistent with the rest of the theme.
   ---------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input:not([type]),
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.9em;
	border: 1px solid var(--wp--preset--color--sage-mist);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--impact-rust);
}

label {
	display: inline-block;
	margin-bottom: 0.4em;
	font-weight: 600;
}

fieldset {
	border: 1px solid var(--wp--preset--color--sage-mist);
	border-radius: 6px;
	padding: 1.25rem;
}

/* A plain <button> or submit input a plugin renders outside the
   Buttons block (a donation form's "Give now", a newsletter
   signup's "Subscribe") gets the same look as the theme's own
   buttons, so it doesn't read as a foreign, unstyled element. Core's
   own Search and Navigation buttons already have their own styling
   and are excluded so this doesn't double up on top of that. */
button:not(.wp-block-button__link):not(.wp-block-search__button):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation-submenu__toggle):not(.wp-block-accordion-heading__toggle),
input[type="submit"],
input[type="button"] {
	display: inline-block;
	background: var(--wp--preset--color--impact-rust);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 4px;
	padding: 0.75em 1.5em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

button:not(.wp-block-button__link):not(.wp-block-accordion-heading__toggle):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background: var(--wp--preset--color--deep-forest);
}

/* The 404 page's "Back to homepage" link uses the dynamic core Home
   Link block (so it resolves correctly via home_url() instead of a
   hardcoded "/"), styled here to match the theme's button look since
   the block doesn't carry that styling on its own. */
.stim-home-link-wrap {
	list-style: none;
}

.stim-home-link-wrap .wp-block-home-link__content {
	display: inline-block;
	background: var(--wp--preset--color--impact-rust);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	border-radius: 4px;
	padding: 0.75em 1.5em;
	font-weight: 700;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.stim-home-link-wrap .wp-block-home-link__content:hover {
	background: var(--wp--preset--color--deep-forest);
}

/* ----------------------------------------------------------------
   Mobile text breathing room. "Wide"-width patterns (Causes Grid,
   Mission Story, Impact Stats, Contact Info, Testimonial, Latest
   Stories) have no side padding of their own, relying on their max-
   width being narrower than the viewport to create the appearance of
   margins. On mobile, the viewport itself is the constraint, so text
   would otherwise run edge-to-edge. Padding on <main> fixes this for
   text content without touching full-bleed sections at all: alignfull
   blocks (hero, donate banner) escape any ancestor's padding using
   viewport-relative (100vw) math, not a percentage of their parent,
   so they keep bleeding to the true screen edge regardless of this
   rule. Header and footer are separate template parts outside <main>
   entirely, so they're unaffected either way.
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
	main.wp-block-group .wp-block-group {
		padding-inline: 1.25rem;
	}
}

/* ----------------------------------------------------------------
   Beautification pass. Everything below is pure CSS — no new block
   attributes — so none of it can reopen the block-validation issues
   documented above.
   ---------------------------------------------------------------- */

/* Slightly tighter tracking on large display type reads more
   editorial and less like default browser serif/sans-serif sizing. */
h1,
.wp-block-post-title {
	letter-spacing: -0.01em;
}

/* A soft wave along the bottom edge of the hero, so it hands off to
   the white stats section with a curve instead of a hard line. Pure
   CSS/SVG background, no markup change. */
.stim-hero {
	position: relative;
}

.stim-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 C 300 0 900 0 1200 48 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Thin vertical dividers between the Impact Stats numbers, so the
   row reads as one connected data strip rather than four loose
   columns. */
.stim-stats-row > .wp-block-column:not(:first-child) {
	border-inline-start: 1px solid var(--wp--preset--color--sage-mist);
}

/* WordPress's Columns block can lose its gap once it stacks to a
   single column on narrow screens: the horizontal gap between
   columns doesn't always carry over to a vertical gap between the
   now-stacked items, leaving cards/images/text touching directly
   with no breathing room. Rather than forcing a blanket gap value
   here (which would need !important to beat each block's own inline
   gap style, and would block Site Editor customization), every
   Columns-based pattern in the theme now carries its own explicit
   blockGap value directly, which already applies correctly whether
   stacked or not. Only the stats-divider's axis conversion still
   needs a mobile-specific rule. */
@media (max-width: 781px) {
	.stim-stats-row > .wp-block-column:not(:first-child) {
		border-inline-start: none;
		border-top: 1px solid var(--wp--preset--color--sage-mist);
		padding-top: 1.5rem;
	}
}

/* Icon glyphs above each Impact Stats number (inserted as Custom
   HTML blocks, so there are no computed attributes involved at all —
   the safest possible way to add static markup to a pattern). */
.storyimpact-stat__icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 12px;
}

/* Thin vertical dividers between the footer's three columns, echoing
   the same signature used in the Impact Stats row. */
.stim-footer > .wp-block-group > .wp-block-group:not(:first-child) {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* Every button gets a small lift and shadow on hover/focus, on top of
   whatever color change theme.json already applies, for a slightly
   more tactile feel. Disabled automatically by the reduced-motion
   rule at the top of this file. */
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(16, 40, 30, 0.5);
}

/* A subtle diagonal gradient instead of a flat fill on the donate
   banner, for a bit more depth on what's meant to be the page's
   highest-urgency section. */
.stim-donate-banner.has-background {
	background: linear-gradient(135deg, var(--wp--preset--color--impact-rust) 0%, #8f2e15 100%);
}

/* A large, faded serif quotation mark behind every pull-quote, for an
   editorial feel. Applies to any Quote block, not just the
   "Testimonial" pattern's. */
.wp-block-quote {
	position: relative;
	overflow: hidden;
}

.wp-block-quote::before {
	/* The "/ ''" part is CSS's alt-text syntax for generated content:
	   it marks this glyph as decorative so screen readers that
	   support the syntax skip announcing it, rather than reading
	   "left double quotation mark" aloud. */
	content: "\201C" / "";
	position: absolute;
	top: -0.3em;
	inset-inline-start: -0.05em;
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	font-size: 6rem;
	line-height: 1;
	color: var(--wp--preset--color--impact-rust);
	opacity: 0.15;
	pointer-events: none;
}

/* An arrow on "Learn more" style links that nudges forward on hover,
   scoped to the Causes Grid cards so it doesn't affect links
   elsewhere in the theme or in user content. */
.stim-cause-card p a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.stim-cause-card p a::after {
	content: "\2192";
	display: inline-block;
	transition: transform 0.15s ease;
}

.stim-cause-card p a:hover::after,
.stim-cause-card p a:focus::after {
	transform: translateX(4px);
}

/* ----------------------------------------------------------------
   Page navigation & pagination. All of the blocks styled below
   (Query Pagination, Post Navigation Link, Comments Pagination,
   Navigation) are dynamic, server-rendered core blocks with no
   static saved markup, so styling them here carries no block-
   validation risk at all — it's plain CSS against WordPress's own
   standard output classes (e.g. "page-numbers").
   ---------------------------------------------------------------- */

/* Numbered pagination pills, shared by post pagination (Query
   Pagination Numbers) and comment pagination, since both use core's
   long-standing "page-numbers" class convention. */
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-comments-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--deep-forest);
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-comments-pagination-numbers a.page-numbers:hover {
	background: var(--wp--preset--color--sage-mist);
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-comments-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--deep-forest);
	color: var(--wp--preset--color--white);
}

.wp-block-query-pagination-numbers .page-numbers.dots,
.wp-block-comments-pagination-numbers .page-numbers.dots {
	background: none;
	color: var(--wp--preset--color--ink);
}

/* Previous / Next links, on both post pagination and comment
   pagination, get an arrow and the same rust accent used on buttons
   and links elsewhere. */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-comments-pagination-previous,
.wp-block-comments-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	color: var(--wp--preset--color--impact-rust) !important;
	text-decoration: none !important;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-comments-pagination-previous:hover,
.wp-block-comments-pagination-next:hover {
	text-decoration: underline !important;
}

/* A little breathing room and a top rule above any pagination row,
   so it reads as a distinct footer to the post list rather than
   crowding the last card. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--sage-mist);
}

/* Previous/Next post navigation on single posts, styled as two
   side-by-side cards instead of plain inline links. */
.stim-post-nav {
	gap: var(--wp--preset--spacing--20);
}

.stim-post-nav .wp-block-post-navigation-link {
	position: relative;
	flex: 1 1 240px;
	border: 1px solid var(--wp--preset--color--sage-mist);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--20);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Stretched link: an invisible overlay the same size as the card,
   tied to the card's one link, so the whole padded box is clickable
   instead of just the text inside it. */
.stim-post-nav .wp-block-post-navigation-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.stim-post-nav .wp-block-post-navigation-link:hover {
	border-color: var(--wp--preset--color--impact-rust);
	box-shadow: 0 8px 20px -14px rgba(16, 40, 30, 0.5);
}

/* Previous points left (the natural default); Next mirrors it to the
   right, so the pair visually reads as "back / forward" regardless
   of the exact internal layout the block itself uses. */
.stim-post-nav__next {
	text-align: end;
}

.stim-post-nav__next a,
.stim-post-nav__next a > * {
	justify-content: flex-end;
}

.stim-post-nav a {
	text-decoration: none !important;
	color: var(--wp--preset--color--deep-forest) !important;
}

/* Primary/footer navigation: an animated underline on hover, and a
   solid underline to mark whichever page the visitor is currently
   on (WordPress adds "current-menu-item" to that link automatically). */
.wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 100%;
	bottom: -2px;
	height: 2px;
	background: currentColor;
	transition: inset-inline-end 0.15s ease;
}

.wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	inset-inline-end: 0;
}

/* Category pill: a small filled badge, used on both the Latest
   Stories cards and a single post's byline. */
.stim-post-terms {
	display: block;
	margin-bottom: 0.5em;
}

.stim-post-terms a {
	display: inline-block;
	background: var(--wp--preset--color--sage-mist);
	color: var(--wp--preset--color--deep-forest) !important;
	text-decoration: none !important;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stim-post-terms a:hover {
	background: var(--wp--preset--color--impact-rust);
	color: var(--wp--preset--color--white) !important;
}

/* On a single post's byline, the category pill sits inline with the
   date and author rather than on its own line. */
.stim-post-meta .stim-post-terms {
	display: inline-block;
	margin-bottom: 0;
}

/* Small dot separators between the date / author / category on a
   single post, so they read as one byline instead of three
   run-together fragments. */
.stim-post-meta {
	align-items: center;
}

.stim-post-meta > *:not(:last-child)::after {
	content: "\2022";
	margin: 0 0.6em;
	color: var(--wp--preset--color--sage-mist);
}

/* Tag pills at the end of a post: outlined rather than filled, so
   they read as secondary to the category badge above. */
.stim-post-tags a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--sage-mist);
	color: var(--wp--preset--color--deep-forest) !important;
	text-decoration: none !important;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0.3em 0.3em 0;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.stim-post-tags a:hover {
	border-color: var(--wp--preset--color--impact-rust);
	color: var(--wp--preset--color--impact-rust) !important;
}

/* ----------------------------------------------------------------
   Mobile navigation overlay. Targets the Navigation block's own
   structural/state classes (is-menu-open, aria-expanded, etc.) which
   are always present regardless of block attributes, so none of this
   depends on hand-matching a computed color class list.
   ---------------------------------------------------------------- */

/* The hamburger button sits in the white header, so it stays dark;
   the close (X) button appears inside the dark overlay once open, so
   it needs to be white to stay visible. */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--deep-forest);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
	margin-block-start: 0.5rem;
	margin-inline-end: 0.5rem;
}

/* Full-screen, on-brand background instead of the plain default. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--deep-forest) !important;
}

/* The overlay's own inner wrapper gets side padding, so the divider
   lines between items can still run edge-to-edge while the text and
   icons inside each item keep breathing room from the screen edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1rem;
}

/* Every top-level item becomes a full-width, generously sized tap
   target with a subtle divider, instead of small inline text. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 3rem;
	padding: 0.9rem 1.75rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--white) !important;
	background: none;
}

/* Give the chevron itself a little room from the text beside it and
   from the right edge, instead of sitting flush against both. */
.wp-block-navigation__submenu-icon {
	flex-shrink: 0;
	margin-inline-start: 0.25rem;
}

/* Sub-items are indented, slightly smaller, and sit on a faintly
   darker strip, so the hierarchy is visible at a glance instead of
   every level looking identical. */
.wp-block-navigation__submenu-container {
	background: rgba(0, 0, 0, 0.15);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline-start: 2.75rem;
	font-size: 1rem;
	font-weight: 500;
	opacity: 0.9;
}

/* Core's mobile overlay shows every submenu level already expanded
   by default, regardless of the "open submenus on click" block
   setting (that setting mainly governs desktop hover-vs-click, not
   the overlay's own display logic). Force real accordion behavior
   here instead: hidden until the toggle button's own aria-expanded
   state says otherwise — the one thing core reliably sets and
   flips on click, independent of the overlay's default styling. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: block;
}

/* The toggle chevron rotates on expand, using the button's own
   aria-expanded state — a standard, reliable accessibility
   attribute core always sets, rather than a guessed class name. */
.wp-block-navigation__submenu-icon svg {
	transition: transform 0.15s ease;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* Confirmed via browser inspector: core's own default rule
   ".wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container"
   sets a white background-color, which beat the earlier attempt at
   this fix on specificity. The footer nav's text is already white
   (inherited from its own textColor setting) — that was correct all
   along; the popover's unexpected white background was the actual
   problem. Overriding that exact selector, scoped to the footer so
   the header's own (already-working, light-background/dark-text)
   dropdowns are untouched. */
footer .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--deep-forest) !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 0.4rem 0;
}

footer .wp-block-navigation__submenu-container a,
footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white) !important;
}

footer .wp-block-navigation__submenu-container a:hover {
	color: var(--wp--preset--color--sage-mist) !important;
}

/* The "Theme: StoryImpact" credit link defaults to the site's link
   color (rust), which reads too dim against the dark footer
   background. Make it clearly visible and distinguishable as a link. */
.stim-footer-bottom a {
	color: var(--wp--preset--color--white) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.stim-footer-bottom a:hover {
	color: var(--wp--preset--color--sage-mist) !important;
}