/* =============================================================================
   Acacia Center for Justice — Blog (editorial landing page) styles
   All rules are scoped under .acj-blog to avoid affecting the rest of the
   site. Loads ONLY on the /blog/ landing page (see inc/assets.php).

   Design tokens below intentionally mirror the values already established in
   acj-reda/assets/reda.css (same brand green/orange, same Besley + Public
   Sans type system, same spacing/radius scale) so the Blog reads as part of
   the same Acacia site. The theme does not currently expose these as global
   :root variables — acj-reda scopes them under .acj-reda by design — so they
   are intentionally re-declared here, scoped under .acj-blog, rather than
   introducing a shared global stylesheet that could affect other templates.
   See docs/installation.md for the full source-of-truth notes.
   ============================================================================= */

.acj-blog {
	/* Brand tokens (mirrored from acj-reda; see note above). */
	--acj-blog-green:        #174337;
	--acj-blog-green-dark:   #0B320C;
	--acj-blog-green-hover:  #0f3530;
	--acj-blog-green-light:  #e6eeeb;
	--acj-blog-green-soft:   rgba(23, 67, 55, 0.08);

	--acj-blog-orange:       #c2561a;
	--acj-blog-orange-soft:  rgba(194, 86, 26, 0.12);

	--acj-blog-black:        #0e0e0e;
	--acj-blog-text:         #1a1a1a;
	--acj-blog-text-muted:   #525250;
	--acj-blog-text-light:   #888884;

	--acj-blog-bg:           #ffffff;
	--acj-blog-bg-subtle:    #f8f7f4;
	--acj-blog-bg-warm:      #f4f1ea;
	--acj-blog-border:       #dddbd5;
	--acj-blog-border-light: #eae8e2;

	--acj-blog-font-serif: 'Besley', 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--acj-blog-font-sans:  'Public Sans', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--acj-blog-space-xs: 0.35rem;
	--acj-blog-space-sm: 0.65rem;
	--acj-blog-space-md: 1rem;
	--acj-blog-space-lg: 1.5rem;
	--acj-blog-space-xl: 2rem;
	--acj-blog-space-2xl: 3rem;
	--acj-blog-space-3xl: 4.5rem;

	--acj-blog-measure: 42rem;
	--acj-blog-radius: 2px;
	--acj-blog-shadow-soft: 0 1px 2px rgba(14, 14, 14, 0.06);

	/* Vertical clearance for the parent theme's fixed/sticky navbar.
	 * Sized to clear Impreza's header so the hero eyebrow isn't covered. */
	--acj-blog-nav-offset: 140px;

	color: var(--acj-blog-text);
	font-family: var(--acj-blog-font-sans);
	line-height: 1.6;
	overflow-wrap: break-word;
}

.acj-blog *,
.acj-blog *::before,
.acj-blog *::after {
	box-sizing: border-box;
}

.acj-blog [hidden] {
	display: none !important;
}

.acj-blog .acj-blog-visually-hidden,
.acj-blog .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Anti-spam honeypot field (newsletter form). Deliberately different from
 * .acj-blog-visually-hidden above: this must be invisible to *both* sighted
 * users and screen readers (paired with aria-hidden="true" on its wrapper in
 * the template), while still being present as an ordinary, fillable text
 * input in the DOM — that's what tricks unsophisticated spam bots into
 * completing it. Mirrors Mailchimp's own generated markup convention.
 */
.acj-blog .acj-blog-honeypot-wrap {
	position: absolute;
	left: -5000px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * Layout shell
 * -------------------------------------------------------------------------- */

.acj-blog-container {
	max-width: 78rem;
	margin: 0 auto;
	padding: var(--acj-blog-space-2xl) var(--acj-blog-space-lg) var(--acj-blog-space-3xl);
}

/* -----------------------------------------------------------------------------
 * Buttons + inputs (shared visual language with REDA)
 * -------------------------------------------------------------------------- */

.acj-blog .acj-blog-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--acj-blog-space-xs);
	padding: 0.65rem 1.3rem;
	font-family: var(--acj-blog-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--acj-blog-radius);
	border: 1px solid transparent;
	cursor: pointer;
	background: transparent;
	color: var(--acj-blog-green);
	min-height: 44px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acj-blog .acj-blog-btn:focus-visible {
	outline: 2px solid var(--acj-blog-orange);
	outline-offset: 2px;
}

.acj-blog .acj-blog-btn--primary {
	background: var(--acj-blog-green);
	color: #fff;
	border-color: var(--acj-blog-green);
}

.acj-blog .acj-blog-btn--primary:hover,
.acj-blog .acj-blog-btn--primary:focus-visible {
	background: var(--acj-blog-green-hover);
	border-color: var(--acj-blog-green-hover);
	color: #fff;
}

.acj-blog .acj-blog-btn--secondary {
	background: var(--acj-blog-bg);
	color: var(--acj-blog-green);
	border-color: var(--acj-blog-border);
}

.acj-blog .acj-blog-btn--secondary:hover,
.acj-blog .acj-blog-btn--secondary:focus-visible {
	border-color: var(--acj-blog-green);
	background: var(--acj-blog-green-soft);
}

.acj-blog .acj-blog-btn--ghost {
	background: transparent;
	color: var(--acj-blog-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.acj-blog .acj-blog-btn--ghost:hover,
.acj-blog .acj-blog-btn--ghost:focus-visible {
	color: var(--acj-blog-green);
}

.acj-blog .acj-blog-input {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--acj-blog-font-sans);
	font-size: 0.95rem;
	line-height: 1.4;
	min-height: 44px;
	color: var(--acj-blog-text);
	background: var(--acj-blog-bg);
	border: 1px solid var(--acj-blog-border);
	border-radius: var(--acj-blog-radius);
}

.acj-blog .acj-blog-input:focus-visible {
	outline: 2px solid var(--acj-blog-orange);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------------------- */

.acj-blog-hero {
	background: var(--acj-blog-bg-warm);
	border-bottom: 1px solid var(--acj-blog-border);
	padding-top: calc(var(--acj-blog-nav-offset) + var(--acj-blog-space-xl));
}

.acj-blog-hero__inner {
	max-width: 78rem;
	margin: 0 auto;
	padding: 0 var(--acj-blog-space-lg) var(--acj-blog-space-2xl);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--acj-blog-space-xl);
	align-items: end;
}

.acj-blog-hero__content {
	max-width: 40rem;
}

.acj-blog-hero__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--acj-blog-orange);
	margin: 0 0 var(--acj-blog-space-sm);
}

.acj-blog-hero__title {
	font-family: var(--acj-blog-font-serif);
	font-weight: 600;
	line-height: 1.15;
	font-size: clamp(2rem, 4.5vw, 3rem);
	margin: 0 0 var(--acj-blog-space-md);
	color: var(--acj-blog-text);
}

.acj-blog-hero__intro {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--acj-blog-text-muted);
	margin: 0;
	max-width: var(--acj-blog-measure);
}

.acj-blog-hero__visual {
	display: none;
}

.acj-blog-hero__panel {
	height: 12rem;
	border-radius: var(--acj-blog-radius);
	background: linear-gradient(155deg, var(--acj-blog-green) 0%, var(--acj-blog-green-dark) 100%);
	display: flex;
	align-items: flex-end;
	padding: var(--acj-blog-space-lg);
}

.acj-blog-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
	border-radius: var(--acj-blog-radius);
}

.acj-blog-hero__mark {
	font-family: var(--acj-blog-font-serif);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 64rem) {
	.acj-blog-hero__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}

	.acj-blog-hero__visual {
		display: block;
	}
}

/* -----------------------------------------------------------------------------
 * Filters (search + category chips)
 * -------------------------------------------------------------------------- */

.acj-blog-filters {
	margin-bottom: var(--acj-blog-space-xl);
	padding-bottom: var(--acj-blog-space-xl);
	border-bottom: 1px solid var(--acj-blog-border);
	display: grid;
	gap: var(--acj-blog-space-lg);
}

.acj-blog-filters__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acj-blog-text-muted);
	margin-bottom: var(--acj-blog-space-xs);
}

.acj-blog-filters__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acj-blog-space-sm);
	max-width: 34rem;
}

.acj-blog-filters__search-row .acj-blog-input {
	flex: 1 1 14rem;
}

.acj-blog-filters__categories {
	margin: 0;
}

.acj-blog-filters__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--acj-blog-space-xs);
	margin: 0;
	padding: 0;
}

.acj-blog-filters__item {
	margin: 0;
}

.acj-blog-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.5rem 1rem;
	font-family: var(--acj-blog-font-sans);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--acj-blog-text-muted);
	background: var(--acj-blog-bg);
	border: 1px solid var(--acj-blog-border);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acj-blog-chip:hover {
	border-color: var(--acj-blog-green);
	color: var(--acj-blog-green);
}

.acj-blog-chip:focus-visible {
	outline: 2px solid var(--acj-blog-orange);
	outline-offset: 2px;
}

.acj-blog-chip.is-active {
	background: var(--acj-blog-green);
	border-color: var(--acj-blog-green);
	color: #fff;
}

.acj-blog-chip.is-active:hover {
	background: var(--acj-blog-green-hover);
	border-color: var(--acj-blog-green-hover);
}

/* -----------------------------------------------------------------------------
 * Results summary
 * -------------------------------------------------------------------------- */

.acj-blog-results-summary {
	margin: 0 0 var(--acj-blog-space-lg);
	font-size: 0.9rem;
	color: var(--acj-blog-text-muted);
}

.acj-blog-results-summary__label {
	color: var(--acj-blog-text);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * Grid + card
 * -------------------------------------------------------------------------- */

.acj-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--acj-blog-space-xl);
	margin-bottom: var(--acj-blog-space-2xl);
}

@media (min-width: 42rem) {
	.acj-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.acj-blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--acj-blog-space-2xl) var(--acj-blog-space-xl);
	}
}

.acj-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--acj-blog-bg);
	border: 1px solid var(--acj-blog-border);
	border-radius: var(--acj-blog-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.acj-blog-card:hover,
.acj-blog-card:focus-within {
	border-color: var(--acj-blog-green);
	box-shadow: 0 8px 28px rgba(14, 14, 14, 0.07);
	transform: translateY(-2px);
}

.acj-blog-card__image-link {
	display: block;
	line-height: 0;
}

.acj-blog-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--acj-blog-bg-subtle);
}

.acj-blog-card__image--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, var(--acj-blog-green-light) 0%, var(--acj-blog-bg-warm) 100%);
}

.acj-blog-card__fallback-mark {
	font-family: var(--acj-blog-font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--acj-blog-green);
	letter-spacing: 0.03em;
}

.acj-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--acj-blog-space-sm);
	padding: var(--acj-blog-space-lg);
	flex: 1;
}

.acj-blog-card__category {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--acj-blog-orange);
}

.acj-blog-card__title {
	margin: 0;
	font-family: var(--acj-blog-font-serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.35;
}

.acj-blog-card__title-link {
	color: var(--acj-blog-text);
	text-decoration: none;
}

.acj-blog-card__title-link:hover,
.acj-blog-card__title-link:focus-visible {
	color: var(--acj-blog-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.acj-blog-card__excerpt {
	margin: 0;
	color: var(--acj-blog-text-muted);
	font-size: 0.95rem;
}

.acj-blog-card__meta {
	/*
	 * Pinned to the bottom of the card unconditionally — not just via the
	 * excerpt's flex-grow above it — so author/date sit flush with the
	 * card's bottom edge whether or not a post has an excerpt. Without this,
	 * cards with no excerpt (nothing to grow and push the meta down) end up
	 * with meta directly under the title instead, misaligned against
	 * neighboring cards that do have one.
	 */
	margin: auto 0 0;
	font-size: 0.82rem;
	color: var(--acj-blog-text-light);
}

/* -----------------------------------------------------------------------------
 * Pagination
 * -------------------------------------------------------------------------- */

.acj-blog-pagination {
	margin: 0 0 var(--acj-blog-space-3xl);
}

.acj-blog-pagination__list {
	list-style: none !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: center;
	gap: var(--acj-blog-space-xs);
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * The parent theme applies its own default spacing/line-height to generic
 * `li`/`a`/`nav` elements site-wide. These !important resets keep every
 * pagination item's own box (not just its text) identically positioned
 * regardless of what the theme's global stylesheet declares, since a single
 * un-reset `margin-top` or `line-height` on one link (browsers can resolve
 * inherited values slightly differently per element depending on content)
 * is enough to visibly knock one button out of alignment with its siblings.
 */
.acj-blog-pagination__item {
	display: flex;
	align-items: center;
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.acj-blog-pagination__item--gap {
	padding: 0 0.35rem;
	color: var(--acj-blog-text-light);
}

.acj-blog-pagination__link {
	display: inline-flex;
	align-items: center !important;
	align-self: center !important;
	justify-content: center;
	gap: 0.35rem;
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2 !important;
	color: var(--acj-blog-text);
	text-decoration: none;
	border: 1px solid var(--acj-blog-border);
	border-radius: var(--acj-blog-radius);
	background: var(--acj-blog-bg);
	vertical-align: middle;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.acj-blog-pagination__link:hover {
	border-color: var(--acj-blog-green);
	color: var(--acj-blog-green);
}

.acj-blog-pagination__link:focus-visible {
	outline: 2px solid var(--acj-blog-orange);
	outline-offset: 2px;
}

.acj-blog-pagination__link--current {
	background: var(--acj-blog-green);
	border-color: var(--acj-blog-green);
	color: #fff;
	/*
	 * This is a <span>, not a link — there is nothing to activate — but it
	 * still carries the shared .acj-blog-pagination__link class, so without
	 * this it was also matching that class's own :hover rule (color: the
	 * same green as this element's background), making the number
	 * illegible on hover. pointer-events: none is the real fix (the browser
	 * never enters a :hover state for it at all); the explicit :hover
	 * override just below is a second, redundant guard in case anything
	 * upstream ever re-enables pointer events on it.
	 */
	pointer-events: none;
}

.acj-blog-pagination__link--current:hover {
	color: #fff;
}

.acj-blog-pagination__link--disabled {
	color: var(--acj-blog-text-light);
	background: var(--acj-blog-bg-subtle);
	cursor: default;
}

/* -----------------------------------------------------------------------------
 * Empty state
 * -------------------------------------------------------------------------- */

.acj-blog-empty-state {
	margin: 0 0 var(--acj-blog-space-2xl);
	padding: var(--acj-blog-space-2xl);
	text-align: center;
	background: var(--acj-blog-bg-subtle);
	border: 1px dashed var(--acj-blog-border);
	border-radius: var(--acj-blog-radius);
}

.acj-blog-empty-state__title {
	font-family: var(--acj-blog-font-serif);
	font-size: 1.3rem;
	font-weight: 600;
	margin: 0 0 var(--acj-blog-space-sm);
	color: var(--acj-blog-text);
}

.acj-blog-empty-state__hint {
	margin: 0 0 var(--acj-blog-space-lg);
	color: var(--acj-blog-text-muted);
}

/* -----------------------------------------------------------------------------
 * Newsletter
 * -------------------------------------------------------------------------- */

.acj-blog-newsletter {
	background: var(--acj-blog-green);
	border-radius: var(--acj-blog-radius);
	padding: var(--acj-blog-space-2xl) var(--acj-blog-space-xl);
	color: #fff;
}

.acj-blog-newsletter__inner {
	display: grid;
	gap: var(--acj-blog-space-lg);
	max-width: 60rem;
	margin: 0 auto;
}

@media (min-width: 56rem) {
	.acj-blog-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--acj-blog-space-2xl);
	}
}

.acj-blog-newsletter__heading {
	font-family: var(--acj-blog-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 var(--acj-blog-space-sm);
	color: #fff;
}

.acj-blog-newsletter__intro {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.98rem;
}

.acj-blog-newsletter__badge {
	margin: 0 0 var(--acj-blog-space-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acj-blog-orange);
	background: rgba(255, 255, 255, 0.92);
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}

.acj-blog-newsletter__field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acj-blog-space-sm);
}

.acj-blog-newsletter__field-row .acj-blog-input {
	flex: 1 1 14rem;
	background: #fff;
}

.acj-blog-newsletter__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: var(--acj-blog-space-xs);
	color: #fff;
}

.acj-blog-newsletter__privacy {
	margin: var(--acj-blog-space-sm) 0 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.75);
}

.acj-blog-newsletter__message {
	margin: var(--acj-blog-space-sm) 0 0;
	padding: var(--acj-blog-space-sm) var(--acj-blog-space-md);
	border-radius: var(--acj-blog-radius);
	font-size: 0.88rem;
}

.acj-blog-newsletter__message--error {
	background: #fff;
	color: #7a2418;
	border: 1px solid var(--acj-blog-orange);
}

.acj-blog-newsletter__message--success {
	background: #fff;
	color: var(--acj-blog-green-dark);
	border: 1px solid var(--acj-blog-green);
}

/*
 * Dedicated Sign up button class (not .acj-blog-btn--primary). The shared
 * primary button paints white text on hover, which is correct on light
 * backgrounds (Search) but illegible inside this dark-green newsletter
 * section. Using its own class means that white-on-hover rule never
 * applies here at all.
 *
 * !important + the type=submit attribute beat Impreza's global
 * `button[type="submit"]:hover { color: #fff }` styles that load after
 * this stylesheet.
 */
.acj-blog .acj-blog-newsletter button.acj-blog-newsletter__submit[type="submit"] {
	background: #fff !important;
	color: #0e0e0e !important;
	border-color: #fff !important;
}

.acj-blog .acj-blog-newsletter button.acj-blog-newsletter__submit[type="submit"]:hover,
.acj-blog .acj-blog-newsletter button.acj-blog-newsletter__submit[type="submit"]:focus,
.acj-blog .acj-blog-newsletter button.acj-blog-newsletter__submit[type="submit"]:focus-visible,
.acj-blog .acj-blog-newsletter button.acj-blog-newsletter__submit[type="submit"]:active {
	background: #e6eeeb !important;
	color: #0e0e0e !important;
	border-color: #e6eeeb !important;
}

/* -----------------------------------------------------------------------------
 * Motion preferences
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.acj-blog *,
	.acj-blog *::before,
	.acj-blog *::after {
		transition: none !important;
		animation: none !important;
	}
}