/*
 * furk.space — extras stylesheet.
 *
 * theme.json carries the design tokens and block styling. This file is only for
 * the handful of things theme.json can't express yet: pseudo-elements, cross-link
 * affordances, and a couple of editorial niceties. Loaded on the front end and in
 * the editor (see functions.php → furkspace_block_assets / add_editor_style).
 */

/* Fallback background before global styles paint (also covers the editor canvas). */
body {
	background-color: var(--wp--preset--color--base, #faf7f0);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- dark mode -----------------------------------------------------------
 * Driven by data-theme on <html> (assets/js/theme.js), with the OS
 * preference as the default. These override the base palette custom
 * properties WP prints from theme.json; every var(--wp--preset--color--*)
 * downstream — including the wall's derived --fs-* tokens — follows. The
 * values match the "Dark" style variation in styles/dark.json. Both the
 * media query (unless the visitor forced light) and the explicit
 * [data-theme="dark"] carry the same block. */
:root[data-theme="dark"] {
	--wp--preset--color--base: #14130f;
	--wp--preset--color--surface: #1e1c17;
	--wp--preset--color--border: #33302a;
	--wp--preset--color--muted: #9a9284;
	--wp--preset--color--contrast: #ece7db;
	--wp--preset--color--accent: #7fb58f;
	--wp--preset--color--accent-2: #d98b6b;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base: #14130f;
		--wp--preset--color--surface: #1e1c17;
		--wp--preset--color--border: #33302a;
		--wp--preset--color--muted: #9a9284;
		--wp--preset--color--contrast: #ece7db;
		--wp--preset--color--accent: #7fb58f;
		--wp--preset--color--accent-2: #d98b6b;
		color-scheme: dark;
	}
}

/* --- theme toggle (parts/header.html) ---------------------------------- */
.fs-theme-toggle {
	--fs-tt-w: 2.6rem;
	--fs-tt-h: 1.5rem;
	flex: none;
	width: var(--fs-tt-w);
	height: var(--fs-tt-h);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.fs-theme-toggle__track {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.fs-theme-toggle__thumb {
	position: absolute;
	top: 50%;
	left: 2px;
	width: calc(var(--fs-tt-h) - 8px);
	height: calc(var(--fs-tt-h) - 8px);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	transform: translateY(-50%);
	transition: transform 0.16s ease;
}
.fs-theme-toggle[aria-pressed="true"] .fs-theme-toggle__thumb {
	transform: translate(calc(var(--fs-tt-w) - var(--fs-tt-h)), -50%);
}
.fs-theme-toggle:hover { border-color: var(--wp--preset--color--contrast); }
@media (prefers-reduced-motion: reduce) {
	.fs-theme-toggle__thumb { transition: none; }
}

/* Optical sizing for Newsreader across the reading column. */
.wp-block-post-content,
.entry-content,
.is-root-container {
	font-optical-sizing: auto;
}

/* Keep long code / tables from blowing out the reading column on phones. */
.wp-block-code,
.wp-block-preformatted,
.wp-block-table {
	overflow-x: auto;
}

/* Sticky posts in a query loop. */
.wp-block-post.is-sticky {
	border-left: 2px solid var(--wp--preset--color--accent-2);
	padding-left: var(--wp--preset--spacing--30, 1rem);
}

/*
 * Cross-links. furk.space is meant to weave areas together rather than silo them;
 * mark internal "see also" links (add class="furkspace-xref" on the <a>) so they
 * read as garden threads, not generic links.
 */
a.furkspace-xref {
	text-decoration-style: dotted;
	text-underline-offset: 0.2em;
}

a.furkspace-xref::before {
	content: "\2197\00a0"; /* ↗ + nbsp */
	text-decoration: none;
	font-size: 0.85em;
}

/* Meta strips — dates, areas, field lines. Used by patterns and the
   furkspace-core dynamic blocks (entry-meta, related, backlinks, …).
   Fragment Mono: metadata / indexing reads as technical apparatus, not prose. */
.furkspace-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

.furkspace-meta a {
	color: inherit;
}

/* --- furkspace-core dynamic blocks -------------------------------------- */

.furkspace-entry-meta {
	margin-block: 0.15rem 0;
}

.furkspace-entry-summary {
	margin-block: 0.25rem 0;
}

/* Small uppercase kicker above a linked list (Links / Linked from / …).
   Fragment Mono — indexing labels, same technical voice as the meta strips. */
.furkspace-section-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.4rem;
}

.furkspace-entry-links ul,
.furkspace-see-also ul,
.furkspace-backlinks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.furkspace-entry-links,
.furkspace-backlinks {
	margin-top: var(--wp--preset--spacing--40, 1.6rem);
}

.furkspace-see-also {
	margin-top: var(--wp--preset--spacing--50, 2.6rem);
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.6rem);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
}

.furkspace-content-notes {
	margin-block: var(--wp--preset--spacing--30, 1rem);
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--surface);
	border-left: 2px solid var(--wp--preset--color--accent-2);
}

.furkspace-content-notes p {
	margin: 0;
}

/* Archive cards. Flat list for now — a grid is a design-pass decision. */
.furkspace-card > * {
	margin-block: 0;
}

.furkspace-card :where(h2, h3) {
	margin-bottom: 0.15rem;
}

/* --- like button (furkspace/like-button block) -----------------------------
   Borderless heart + count, Twitter/Instagram style. The heart pops on like. */

:root { --fs-heart: #e0356b; }

.furkspace-like {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 4px;
	margin: -4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.82rem;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.furkspace-like:hover,
.furkspace-like.is-liked {
	color: var(--fs-heart);
}

.furkspace-like__heart {
	width: 1.2em;
	height: 1.2em;
	flex: none;
	display: block;
}

.furkspace-like__heart--fill { display: none; }
.furkspace-like.is-liked .furkspace-like__heart--line { display: none; }
.furkspace-like.is-liked .furkspace-like__heart--fill { display: block; }

.furkspace-like__count {
	font-variant-numeric: tabular-nums;
}
.furkspace-like.is-zero .furkspace-like__count { display: none; }

@media not (prefers-reduced-motion: reduce) {
	.furkspace-like__heart { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.4); }
	.furkspace-like:active .furkspace-like__heart { transform: scale(0.8); }
	.furkspace-like.is-liked .furkspace-like__heart--fill {
		animation: furkspace-like-pop 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.4);
	}
}

@keyframes furkspace-like-pop {
	0%   { transform: scale(0.4); }
	45%  { transform: scale(1.25); }
	72%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

/* --- site identity mark ---------------------------------------------------
   The furk.space "fs" glyph (assets/img/logo.svg) set just before the site
   title in the header. Masked rather than <img>'d so it always paints in the
   palette accent green — the same green as the reply links / buttons — and
   tracks the title's font-size. The box keeps the glyph's aspect ratio
   (viewBox 262 × 284). */
.site-header .wp-block-site-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.site-header .wp-block-site-title::before {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1.3em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("../img/logo.svg") no-repeat center / contain;
	mask: url("../img/logo.svg") no-repeat center / contain;
}

/* Below the nav's overlay breakpoint (600px) the wordmark and the
   nav-toggle / theme-toggle / auth cluster otherwise wrap onto two rows.
   Keep the header a single row: no wrap, tighter gaps, slightly smaller
   wordmark so logo + title + menu icon + "Giriş yap" fit at 360px. */
@media (max-width: 599px) {
	.site-header > .wp-block-group {
		flex-wrap: nowrap;
		column-gap: 0.75rem;
	}

	.site-header > .wp-block-group > .wp-block-group:last-child {
		flex: none;
		flex-wrap: nowrap;
		gap: 0.85rem;
	}

	.site-header .wp-block-site-title {
		font-size: 1.15rem;
	}
}

/* Give the mobile nav overlay a solid backdrop that matches the palette. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 0;
}

/* The header nav is right-justified on desktop (layout.justifyContent =
   "right"). Core feeds that same value into the open mobile overlay as
   `align-items`, which pins every item to the right edge and lets the list
   shrink-wrap until the longer labels ("Çalışmalar") clip off-screen. Inside
   the overlay, put it back to a plain full-width column that reads left-aligned
   and clears the close button. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	padding: 4.5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch;
	flex-wrap: nowrap;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.4rem;
}

/* Focus ring that survives both palettes. */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- auth wall card (content gate + members-only comments) ----------- */
.fs-authwall {
	margin: 2rem 0;
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
}
.fs-authwall__title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.35rem;
}
.fs-authwall__text {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}
.fs-authwall__actions {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	flex-wrap: wrap;
}
.fs-authwall__actions a {
	text-decoration: none;
	font-size: 0.88rem;
	padding: 0.55em 1.1em;
	border-radius: 999px;
}
.fs-authwall__actions .is-primary {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.fs-authwall__actions .is-secondary {
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

/* Content gate: not a footer box — an interruption. The teaser above fades
   out, a rule + a "N more words" line say the article keeps going. */
.fs-authwall--gate {
	position: relative;
	margin: 0.25rem 0 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.fs-authwall__fade {
	position: absolute;
	left: 0;
	right: 0;
	top: -7rem;
	height: 7rem;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base) 88%);
	pointer-events: none;
}
.fs-authwall__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.fs-authwall__lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--accent);
}
.fs-authwall__lock svg { width: 1.1rem; height: 1.1rem; }
.fs-authwall--gate .fs-authwall__title { font-size: 1.05rem; margin: 0; }
.fs-authwall--gate .fs-authwall__text { margin: 0 0 0.75rem; }
.fs-authwall--gate .fs-authwall__actions { justify-content: flex-start; }