/*
Theme Name: Sejas
Theme URI: https://sejas.blog
Author: Antonio Sejas
Author URI: https://sejas.blog/about-me/
Description: Editorial block theme for sejas.blog. Oversized display typography, asymmetric layouts, visible rules, generous negative space. All design tokens live in theme.json.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sejas
*/

/*
 * Interaction layer. All values come from theme.json presets/custom props
 * (--wp--preset--*, --wp--custom--*) — no raw design values here.
 */

/* --- Typographic detail ------------------------------------------------ */

.entry-content,
.wp-block-post-content {
	hanging-punctuation: first last;
}

.wp-block-post-title,
h1.wp-block-heading {
	text-wrap: balance;
}

/* --- Posts list: index numbers + lead entry ----------------------------- */

.sejas-posts-list .wp-block-post-template {
	counter-reset: sejas-post;
	list-style: none;
}

.sejas-posts-list .wp-block-post {
	counter-increment: sejas-post;
}

/* Right-margin index number (01, 02, …) — rendered as a flex item. */
.sejas-post-row::after {
	content: counter(sejas-post, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--wide-caps);
	color: var(--wp--preset--color--contrast-2);
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.wp-block-post:hover .sejas-post-row::after {
	color: var(--wp--preset--color--accent);
}

/* Lead treatment: newest entry gets display-size title; only it shows the
   standfirst (excerpt). !important needed to beat the preset
   .has-x-large-font-size class emitted by core. */
.sejas-posts-list .wp-block-post:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large) !important;
}

.sejas-posts-list .wp-block-post:not(:first-child) .wp-block-post-excerpt {
	display: none;
}

.sejas-posts-list .wp-block-post-excerpt {
	max-width: var(--wp--style--global--content-size);
}

/* --- Category filter bar ------------------------------------------------ */

.sejas-cat-filter__nav {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.sejas-cat-filter__nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wide-caps);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.sejas-cat-filter__nav a:hover,
.sejas-cat-filter__nav a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.sejas-cat-filter__nav a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	box-shadow: 0 var(--wp--custom--line--width) 0 0 currentColor;
}

/* --- Index list (home intro) ------------------------------------------- */

.sejas-index-list {
	list-style: none;
}

.sejas-index-list li + li {
	border-top: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	margin-top: 0.5em;
	padding-top: 0.5em;
}

/* --- Link micro-interaction: underline draw ---------------------------- */

.wp-block-post-content a:not(.wp-block-button__link),
.sejas-index-list a,
.wp-block-post-navigation-link a,
.wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% var(--wp--custom--line--width);
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition:
		background-size var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
.wp-block-post-content a:not(.wp-block-button__link):focus-visible,
.sejas-index-list a:hover,
.sejas-index-list a:focus-visible,
.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus-visible,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	background-size: 100% var(--wp--custom--line--width);
}

/* --- Post navigation (prev/next essay) ---------------------------------- */

.wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--wide-caps);
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-post-navigation-link .post-navigation-link__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

/* --- Comment form: keep fields on the paper surface ---------------------- */

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .comment-form-cookies-consent label,
.wp-block-post-comments-form .logged-in-as {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

/* --- Tables: horizontal hairlines only ----------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	border: none;
}

.wp-block-table th,
.wp-block-table td {
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
}

/* Color shift on nav + buttons is handled by theme.json :hover styles;
   add the transition so the shift is animated. */
.wp-block-navigation a,
.wp-block-site-title a,
.wp-block-button__link,
.wp-block-query-pagination a {
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}

/* --- Scroll reveal (classes added by reveal.js only) -------------------- */

.sjs-reveal {
	opacity: 0;
	translate: 0 var(--wp--custom--motion--reveal-distance);
	transition:
		opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--ease),
		translate var(--wp--custom--motion--duration) var(--wp--custom--motion--ease);
}

.sjs-reveal.is-in {
	opacity: 1;
	translate: 0 0;
}

/* --- Map block (sejas/map-block plugin) integration ---------------------- */

.wp-block-sejas-map-block {
	--sejas-map-block-accent: var(--wp--preset--color--accent);
}

.wp-block-sejas-map-block__map {
	border: var(--wp--custom--line--width) solid var(--wp--preset--color--line);
	border-radius: 0;
}

.wp-block-sejas-map-block__caption {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Focus visibility --------------------------------------------------- */

:focus-visible {
	outline: var(--wp--custom--line--focus-width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--line--focus-offset);
}

/* --- Reduced motion: kill everything ------------------------------------ */

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

	.sjs-reveal {
		opacity: 1;
		translate: none;
	}
}