/*
Theme Name: Think Act Change
Description: A block theme for a blog on Marxist philosophy, existentialism and the contradictions of modern life. Agitprop-inspired: hard edges, Anton headlines, paper/ink/red palette, and a Think / Act / Change structure built on WordPress categories.
Author: Filipe Bastos
Version: 1.0.2
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: think-act-change
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
/*
 * Declared on body (not :root): WordPress 6.4 and older define the --wp--preset-- variables on
 * body, so a :root declaration cannot see them. The fallbacks keep the design intact regardless.
 */
body {
	--tac-paper: var(--wp--preset--color--paper, #F1EBDD);
	--tac-paper-light: var(--wp--preset--color--paper-light, #FBF7EC);
	--tac-ink: var(--wp--preset--color--ink, #141210);
	--tac-red: var(--wp--preset--color--red, #C8261B);
	--tac-red-bright: var(--wp--preset--color--red-bright, #E8584B);
	--tac-display: var(--wp--preset--font-family--display, Anton, Impact, "Arial Narrow", sans-serif);
	--tac-mono: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--tac-border: 4px solid var(--tac-ink);
}

::selection {
	background: var(--tac-red);
	color: var(--tac-paper);
}

s,
strike,
del {
	text-decoration-line: line-through;
	text-decoration-color: var(--tac-red);
	text-decoration-thickness: 0.09em;
}

.tac-strike {
	text-decoration-line: line-through;
	text-decoration-color: var(--tac-red);
	text-decoration-thickness: 0.09em;
}

.tac-replace {
	color: var(--tac-red);
}

.tac-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wp-block-post-title a,
.wp-block-site-title a,
.wp-block-navigation-item__content,
.wp-block-query-pagination a {
	text-decoration: none;
}

/* Page frame: no flow-layout gaps between header / main / footer; footer sticks to the bottom. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	margin-top: auto;
}

/* Homepage bands sit flush against each other (no flow-layout gap showing between colors). */
body .tac-home > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Structural resets: keep our flex/grid groups free of flow-layout margins. */
body .tac-header > *,
body .tac-band > *,
body .tac-state > *,
body .tac-footer > *,
body .tac-tabs > *,
body .tac-item > *,
body .tac-item__main > *,
body .tac-teaser > *,
body .tac-next > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.tac-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 48px;
	border-bottom: var(--tac-border);
}

.tac-header .wp-block-site-title {
	font-family: var(--tac-display);
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tac-header .wp-block-site-title a::after {
	content: ".";
	color: var(--tac-red);
}

.tac-nav {
	font-family: var(--tac-display);
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tac-nav .wp-block-navigation__container {
	gap: 28px;
}

.tac-nav .wp-block-navigation-item__content:hover {
	color: var(--tac-red);
}

/* ==========================================================================
   Homepage: Think / Act / Change bands
   ========================================================================== */
.tac-band {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 48px;
	padding: 26px 48px 24px;
	border-top: var(--tac-border);
}

.tac-band--think {
	border-top: 0;
	padding-top: 44px;
	background: var(--tac-paper);
	color: var(--tac-ink);
}

.tac-band--act {
	background: var(--tac-ink);
	color: var(--tac-paper);
}

.tac-band--change {
	background: var(--tac-red);
	color: var(--tac-paper);
	border-bottom: var(--tac-border);
	padding-bottom: 28px;
}

.tac-band .tac-word {
	margin: 0;
	font-family: var(--tac-display);
	font-size: clamp(70px, 11vw, 160px);
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
}

.tac-band--act .tac-word {
	font-size: clamp(84px, 14vw, 200px);
}

.tac-band--change .tac-word {
	font-size: clamp(96px, 17vw, 250px);
}

.tac-band .tac-word a,
.tac-band a {
	color: inherit;
	text-decoration: none;
}

.tac-band .tac-word a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

.tac-band .tac-desc {
	flex: 0 1 360px;
	margin-bottom: 10px;
	font-size: 21px;
	line-height: 1.5;
}

.tac-band .tac-desc p {
	margin: 0;
}

.tac-band .tac-cite {
	margin-top: 8px;
	font-family: var(--tac-display);
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* The state of things */
.tac-state {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px 56px;
	padding: 56px 48px 48px;
}

.tac-label {
	margin: 0;
	padding-top: 14px;
	border-top: var(--tac-border);
	font-family: var(--tac-display);
	font-size: 16px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tac-red);
}

.tac-state .tac-label {
	flex: 0 0 220px;
}

.tac-state__body {
	flex: 1 1 520px;
	max-width: 760px;
}

.tac-lede {
	margin: 0 0 28px !important;
	font-size: 27px;
	line-height: 1.45;
}

/* Latest essays on the homepage */
.tac-teasers {
	border-top: var(--tac-border);
}

.tac-teasers .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.tac-teasers .wp-block-post {
	margin: 0;
	border-right: var(--tac-border);
}

.tac-teasers .wp-block-post:last-child {
	border-right: 0;
}

.tac-teaser {
	padding: 28px 36px 32px;
}

.tac-teaser .wp-block-post-title {
	margin-top: 8px;
	font-size: 28px;
	line-height: 1.05;
}

.tac-empty {
	padding: 28px 48px;
	font-style: italic;
}

.tac-list .tac-empty {
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Stage tags (the category chip: Think / Act / Change)
   ========================================================================== */
.tac-stage {
	font-family: var(--tac-display);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tac-stage a {
	display: inline-block;
	padding: 6px 12px;
	border: 3px solid var(--tac-ink);
	background: var(--tac-paper);
	color: var(--tac-ink);
	text-decoration: none;
}

.wp-block-post.category-act .tac-stage a {
	background: var(--tac-ink);
	color: var(--tac-paper);
}

.wp-block-post.category-change .tac-stage a {
	background: var(--tac-red);
	border-color: var(--tac-red);
	color: var(--tac-paper);
}

.tac-teaser .tac-stage a {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tac-red);
}

.wp-block-post.category-act .tac-teaser .tac-stage a,
.wp-block-post.category-change .tac-teaser .tac-stage a {
	background: none;
	border: 0;
	color: var(--tac-red);
}

/* ==========================================================================
   Archive: heading, tabs, essay list
   ========================================================================== */
.tac-archive-head {
	padding: 48px 48px 24px;
}

.tac-archive-title {
	margin: 0 0 12px;
	font-size: clamp(56px, 8vw, 112px);
	line-height: 1;
}

.tac-archive-intro {
	max-width: 680px;
	margin: 0;
	font-size: 21px;
	line-height: 1.5;
}

.tac-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 4px 48px 8px;
}

.tac-tab a {
	display: inline-block;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 22px;
	border: 4px solid var(--tac-ink);
	background: var(--tac-paper);
	color: var(--tac-ink);
	font-family: var(--tac-display);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.tac-tab a:hover,
.blog .tac-tab-all a,
.category-think .tac-tab-think a,
.category-act .tac-tab-act a {
	background: var(--tac-ink);
	color: var(--tac-paper);
}

.category-change .tac-tab-change a,
.tac-tab-change a:hover {
	background: var(--tac-red);
	color: var(--tac-paper);
}

.tac-list {
	padding: 8px 48px 64px;
}

.tac-list .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tac-list .wp-block-post {
	margin: 0;
}

.tac-item {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 28px;
	padding: 22px 0;
	border-top: var(--tac-border);
}

.tac-item::after {
	content: "\2192";
	font-family: var(--tac-display);
	font-size: 28px;
	color: var(--tac-red);
}

.tac-list .wp-block-post:last-child .tac-item {
	border-bottom: var(--tac-border);
}

.tac-item .tac-stage {
	text-align: center;
}

.tac-item .wp-block-post-title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.04;
}

.tac-item .wp-block-post-title a:hover {
	color: var(--tac-red);
}

.tac-item .wp-block-post-excerpt {
	max-width: 660px;
	margin-top: 6px;
	font-size: 18px;
	line-height: 1.45;
}

.tac-item .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-query-pagination {
	margin-top: 32px;
	font-family: var(--tac-display);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ==========================================================================
   Single essay
   ========================================================================== */
.tac-single__head {
	box-sizing: border-box;
	padding: 56px 48px 40px;
}

.tac-single__head .tac-stage a {
	border-color: var(--tac-red);
	background: var(--tac-red);
	color: var(--tac-paper);
}

.tac-single__title {
	max-width: 1000px;
	margin: 22px 0 20px;
	font-size: clamp(48px, 7.4vw, 104px);
	line-height: 0.98;
}

.tac-single__dek,
.tac-single__dek p {
	max-width: 620px;
	margin: 0;
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
}

.tac-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 22px;
	font-family: var(--tac-display);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tac-byline > * {
	margin: 0;
}

.tac-feature {
	margin: 0 0 40px;
	padding: 0 48px;
	box-sizing: border-box;
}

.tac-prose {
	padding: 24px 24px 64px;
	font-size: 21px;
	line-height: 1.75;
}

.tac-prose h2 {
	margin-top: 2em;
	font-size: clamp(30px, 4vw, 38px);
}

.tac-prose h3 {
	margin-top: 1.8em;
}

.tac-prose a {
	text-decoration-color: var(--tac-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tac-prose figcaption,
.wp-element-caption {
	font-size: 15px;
	font-style: italic;
}

.tac-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 36px 48px;
	border-top: var(--tac-border);
	background: var(--tac-red);
	color: var(--tac-paper);
	font-family: var(--tac-display);
	font-size: 30px;
	line-height: 1.05;
	text-transform: uppercase;
}

.tac-next a {
	color: var(--tac-paper);
	text-decoration: none;
	border-bottom: 4px solid var(--tac-paper);
}

.tac-next .post-navigation-link__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0.18em;
}

.tac-comments {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.tac-comments input[type="text"],
.tac-comments input[type="email"],
.tac-comments input[type="url"],
.tac-comments textarea,
.wp-block-search__input {
	border: 4px solid var(--tac-ink);
	border-radius: 0;
	background: var(--tac-paper-light);
	font-family: inherit;
	font-size: 18px;
	padding: 12px 14px;
}

.tac-comments input[type="submit"] {
	cursor: pointer;
}

/* ==========================================================================
   Content blocks
   ========================================================================== */
body .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.04em 0.12em 0 0;
	color: var(--tac-red);
	font-family: var(--tac-display);
	font-size: 4.6em;
	font-weight: 400;
	line-height: 0.8;
	text-transform: none;
}

body .wp-block-pullquote {
	padding: 6px 0 6px 24px;
	border: 0;
	border-left: 12px solid var(--tac-red);
	text-align: left;
}

body .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	text-align: left;
}

body .wp-block-pullquote p {
	text-align: left;
	font-family: var(--tac-display);
	font-size: clamp(26px, 3.4vw, 34px);
	font-style: normal;
	line-height: 1.1;
	text-transform: uppercase;
}

body .wp-block-pullquote cite {
	font-family: var(--tac-display);
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body .wp-block-quote {
	margin-inline: 0;
	padding: 0 0 0 24px;
	border-left: 4px solid var(--tac-ink);
	font-style: italic;
}

body .wp-block-quote cite {
	font-family: var(--tac-display);
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body .wp-block-separator {
	border: 0;
	border-top: 4px solid var(--tac-ink);
	background: none;
	opacity: 1;
}

.wp-block-button__link {
	box-shadow: 6px 6px 0 var(--tac-ink);
}

.wp-block-button__link:hover {
	box-shadow: none;
}

.tac-pair-title s {
	text-decoration-thickness: 0.09em;
}

/* Thesis / Antithesis block (pattern) */
.tac-pair {
	gap: 0;
	border: var(--tac-border);
}

.tac-pair .wp-block-column {
	padding: 28px 32px;
}

.tac-pair__b {
	background: var(--tac-ink);
	color: var(--tac-paper);
}

.tac-pair__label {
	margin: 0;
	font-family: var(--tac-display);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tac-red);
}

.tac-pair__b .tac-pair__label {
	color: var(--tac-red-bright);
}

.tac-pair__quote {
	margin: 12px 0 8px;
	font-size: 24px;
	font-style: italic;
	line-height: 1.4;
}

.tac-pair__source {
	margin: 0;
	font-size: 15px;
}

/* Rx prescription block (pattern) */
.tac-rx {
	max-width: 520px;
	padding: 24px 28px;
	border: var(--tac-border);
	background: var(--tac-paper-light);
	box-shadow: 10px 10px 0 var(--tac-ink);
	font-family: var(--tac-mono);
	font-size: 15px;
	line-height: 1.7;
}

.tac-rx > * {
	margin-block: 0;
}

.tac-rx__mark {
	margin-bottom: 8px;
	font-family: var(--tac-display);
	font-size: 72px;
	line-height: 0.9;
	color: var(--tac-red);
}

body .tac-rx .tac-rx__rule {
	margin: 12px 0;
	border-top: 2px solid var(--tac-ink);
}

.tac-rx p {
	margin: 0;
}

.tac-rx__sign {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 2px dashed var(--tac-ink);
	font-size: 12px;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.tac-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 48px;
	background: var(--tac-ink);
	color: var(--tac-paper);
	font-family: var(--tac-display);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tac-footer p,
.tac-footer a {
	margin: 0;
	color: var(--tac-paper);
	text-decoration: none;
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 760px) {
	.tac-header {
		padding: 14px 16px;
	}

	.tac-band,
	.tac-band--think {
		padding: 18px 16px 20px;
	}

	.tac-band .tac-desc {
		flex-basis: 100%;
		font-size: 17px;
	}

	.tac-state {
		padding: 28px 16px;
	}

	.tac-lede {
		font-size: 21px;
	}

	.tac-teasers .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.tac-teasers .wp-block-post {
		border-right: 0;
		border-bottom: var(--tac-border);
	}

	.tac-teaser {
		padding: 20px 16px;
	}

	.tac-archive-head,
	.tac-tabs,
	.tac-list {
		padding-left: 16px;
		padding-right: 16px;
	}

	.tac-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.tac-item::after {
		display: none;
	}

	.tac-item .tac-stage {
		text-align: left;
	}

	.tac-single__head {
		padding: 32px 16px 24px;
	}

	.tac-prose {
		padding-inline: 16px;
		font-size: 19px;
	}

	.tac-next {
		padding: 28px 16px;
		font-size: 24px;
	}

	.tac-footer {
		padding: 14px 16px;
	}
}