/*
Theme Name:   Topalovic
Theme URI:    https://dan.topalovic.com
Description:  A calm, premium editorial block theme for an independent executive publication — essays, conversations, and signals on digitalization, AI, strategy, leadership, and organizational transformation. Built on the block-theme foundation introduced by Twenty Twenty-Five, redesigned as a standalone theme.
Author:       Dan Topalovic
Version:      1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  topalovic
Tags:         block-patterns, block-styles, editor-style, full-site-editing, one-column, custom-colors, custom-logo
*/

/*
 * The design system lives in theme.json. This file only carries the few
 * devices theme.json cannot express: the section kicker, the signal ledger,
 * topic pills, the hero plate, and interaction/accessibility details.
 * Class prefix: tp- (Topalovic).
 */

/* --- Section kicker: mono label opened by a small copper tick ----------- */
.tp-kicker {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tp-kicker::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background: var(--wp--preset--color--accent-2);
	flex: none;
}

.tp-on-deep .tp-kicker {
	color: rgba(250, 249, 245, 0.65);
}

/* Section header row: kicker + "All …" link over a hairline. */
.tp-section-head {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 0.875rem;
}

.tp-on-deep .tp-section-head {
	border-bottom-color: rgba(250, 249, 245, 0.18);
}

.tp-all-link a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.tp-all-link a:hover {
	color: var(--wp--preset--color--accent-2);
}

.tp-on-deep .tp-all-link a {
	color: rgba(250, 249, 245, 0.8);
}

/* --- Hero plate: headline block shifted up over the feature image -------
   !important beats Gutenberg's generated layout-gap rule
   (.wp-container-* > * + * { margin-block-start: … }). */
@media (min-width: 782px) {
	.tp-card > .tp-plate {
		background: var(--wp--preset--color--base);
		margin-block-start: -4.5rem !important;
		margin-right: 7rem !important;
		position: relative;
		padding: 1.75rem 2rem 0 0;
	}
}

/* --- Editorial cards ---------------------------------------------------- */
.tp-card .wp-block-post-featured-image {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.tp-card .wp-block-post-featured-image img {
	transition: transform 0.5s ease;
}

.tp-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* --- Signal ledger: compact rows, mono dates, hairline separators ------- */
.tp-ledger .wp-block-post {
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

.tp-ledger .wp-block-post:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tp-ledger-row {
	padding: 1.125rem 0.25rem;
	transition: background-color 0.2s ease;
}

.tp-ledger .wp-block-post:hover .tp-ledger-row {
	background-color: var(--wp--preset--color--surface);
}

.tp-ledger .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

/* --- Topic pills (styled tag cloud) ------------------------------------- */
.tp-pills.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.tp-pills.wp-block-tag-cloud a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tp-pills.wp-block-tag-cloud a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* --- Conversation chip: small play marker on media cards ---------------- */
.tp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.tp-chip::before {
	content: "";
	inline-size: 0;
	block-size: 0;
	border-block: 0.3rem solid transparent;
	border-inline-start: 0.45rem solid currentColor;
}

.tp-on-deep .tp-chip {
	color: rgba(250, 249, 245, 0.75);
}

/* --- Content on the Midnight band --------------------------------------- */
.tp-on-deep .wp-block-post-title a,
.tp-on-deep .wp-block-post-title a:hover {
	color: var(--wp--preset--color--base);
}

.tp-on-deep .wp-block-post-excerpt,
.tp-on-deep .wp-block-post-date {
	color: rgba(250, 249, 245, 0.65);
}

.tp-on-deep .wp-block-post-terms a {
	color: rgba(250, 249, 245, 0.75);
}

/* --- Header search: quiet icon button ----------------------------------- */
.tp-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	padding: 0.4rem;
	margin-left: 0;
}

.tp-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Coherent image grading: calm, slightly desaturated ------------------ */
.tp-card .wp-block-post-featured-image img,
.tp-media-card .wp-block-post-featured-image img,
.tp-row-card .wp-block-post-featured-image img {
	filter: saturate(0.78) contrast(1.03);
	transition: filter 0.4s ease, transform 0.5s ease;
}

.tp-card:hover .wp-block-post-featured-image img,
.tp-media-card:hover .wp-block-post-featured-image img,
.tp-row-card:hover .wp-block-post-featured-image img {
	filter: saturate(1) contrast(1);
}

/* --- Media card: conversation module with still + midnight panel --------- */
.tp-media-card {
	overflow: hidden;
}

.tp-media-card .wp-block-post-featured-image {
	margin: 0;
	position: relative;
}

/* Quiet play affordance on conversation stills. */
.tp-media-card .wp-block-post-featured-image::after,
.tp-row-card.tp-is-media .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset-block-end: 0.875rem;
	inset-inline-start: 0.875rem;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: rgba(250, 249, 245, 0.92);
	pointer-events: none;
}

.tp-media-card .wp-block-post-featured-image::before,
.tp-row-card.tp-is-media .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-end: 1.55rem;
	inset-inline-start: 1.72rem;
	border-block: 0.32rem solid transparent;
	border-inline-start: 0.5rem solid var(--wp--preset--color--accent);
	pointer-events: none;
}

.tp-media-body {
	padding: 1.375rem 1.5rem 1.625rem;
}

.tp-guest-name {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.tp-guest-role {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.tp-on-deep .tp-guest-role {
	color: rgba(250, 249, 245, 0.6);
}

.tp-reading-time {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.tp-on-deep .tp-reading-time {
	color: rgba(250, 249, 245, 0.65);
}

/* --- Hero side briefs: compact stacked teasers --------------------------- */
.tp-briefs > * + * {
	border-top: 1px solid var(--wp--preset--color--line);
}

.tp-brief {
	padding-block: 1rem;
}

.tp-brief .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

/* --- Essays lead: text-first feature with a strong top rule -------------- */
.tp-lead {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: 1.25rem;
}

/* --- Horizontal row card: square still + text ---------------------------- */
.tp-row-card .wp-block-post-featured-image {
	flex: none;
	margin: 0;
	position: relative;
}

/* --- Topic index strip: publication index, not buttons ------------------- */
.tp-index.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem 2rem;
}

.tp-index.wp-block-tag-cloud a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.tp-index.wp-block-tag-cloud a:hover {
	color: var(--wp--preset--color--accent);
}

.tp-index .tag-link-count {
	color: var(--wp--preset--color--accent-2);
	font-size: 0.85em;
}

/* --- Signals ledger: optional one-line support sentence ------------------ */
.tp-ledger-sub {
	margin: 0.25rem 0 0;
	max-inline-size: 46rem;
}

/* --- Accessibility & motion --------------------------------------------- */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.tp-on-deep :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.tp-card .wp-block-post-featured-image img,
	.tp-ledger-row,
	.tp-pills.wp-block-tag-cloud a {
		transition: none;
	}

	.tp-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}