/*
Theme Name: Simurg
Description: Feed-style light theme for simurg.info, based on the ozgur.ca design language.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: simurg
*/

:root {
	--page: #F4F4F1;
	--surface: #FFFFFF;
	--ink: #111111;
	--text-strong: #2A2A2A;
	--text: #3D3D3D;
	--nav: #4A4A4A;
	--muted: #5F5F5F;
	--line: rgba(0, 0, 0, 0.08);
	--line-strong: rgba(0, 0, 0, 0.14);
	--line-hover: rgba(0, 0, 0, 0.28);
	--field: #FFFFFF;
	--field-line: rgba(0, 0, 0, 0.18);
	--chip: #E8E8E4;
	--hover: #EDEDE9;
	--card-hover: #FBFBF9;
	--accent: #1F5A3A;
	--accent-hover: #17482E;
	--accent-tint: #E6EEE8;
	--on-accent: #FFFFFF;
	--sans: "Geist", system-ui, -apple-system, sans-serif;
	--mono: "Geist Mono", ui-monospace, monospace;
	color-scheme: light;
}

/* Themes. With no choice saved, the site follows the device: light, or Koyu in dark mode. */
:root[data-theme="sepia"] {
	--page: #EFE5D3;
	--surface: #F8F0E1;
	--ink: #2A1F15;
	--text-strong: #3A2D21;
	--text: #46382B;
	--nav: #54453A;
	--muted: #6B5A49;
	--line: rgba(70, 45, 20, 0.12);
	--line-strong: rgba(70, 45, 20, 0.2);
	--line-hover: rgba(70, 45, 20, 0.36);
	--field: #FCF7EE;
	--field-line: rgba(70, 45, 20, 0.24);
	--chip: #E6D9C2;
	--hover: #EDE1CC;
	--card-hover: #F4EAD8;
	--accent: #2B5A36;
	--accent-hover: #21472A;
	--accent-tint: #E2E2C9;
	--on-accent: #FFFFFF;
}
:root[data-theme="dark"] {
	--page: #0E0F0E;
	--surface: #171918;
	--ink: #F2F2F0;
	--text-strong: #DCDFDC;
	--text: #CDD1CD;
	--nav: #C2C6C2;
	--muted: #9CA19D;
	--line: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.15);
	--line-hover: rgba(255, 255, 255, 0.3);
	--field: #101211;
	--field-line: rgba(255, 255, 255, 0.18);
	--chip: #252826;
	--hover: #202321;
	--card-hover: #1C1E1D;
	--accent: #84C7A0;
	--accent-hover: #9DD3B3;
	--accent-tint: #1C2D23;
	--on-accent: #0C1F14;
	color-scheme: dark;
}
:root[data-theme="darussafaka"] {
	--page: #0F1A14;
	--surface: #15241B;
	--ink: #EEF3EF;
	--text-strong: #DCE6DF;
	--text: #CFDAD2;
	--nav: #C3CFC7;
	--muted: #9DB0A3;
	--line: rgba(220, 255, 230, 0.09);
	--line-strong: rgba(220, 255, 230, 0.16);
	--line-hover: rgba(220, 255, 230, 0.32);
	--field: #0C1510;
	--field-line: rgba(220, 255, 230, 0.2);
	--chip: #21352A;
	--hover: #1B2D22;
	--card-hover: #192A20;
	--accent: #9AD6B0;
	--accent-hover: #B3E1C4;
	--accent-tint: #1F3A2B;
	--on-accent: #0B1F13;
	color-scheme: dark;
}
:root[data-theme="fenerbahce"] {
	--page: #08142C;
	--surface: #0E1D3D;
	--ink: #F3F5FA;
	--text-strong: #DFE4F0;
	--text: #CFD6E6;
	--nav: #C2CADC;
	--muted: #9CA8C2;
	--line: rgba(200, 215, 255, 0.1);
	--line-strong: rgba(200, 215, 255, 0.18);
	--line-hover: rgba(200, 215, 255, 0.34);
	--field: #0A1733;
	--field-line: rgba(200, 215, 255, 0.22);
	--chip: #1C2B52;
	--hover: #172649;
	--card-hover: #132346;
	--accent: #FFD23F;
	--accent-hover: #FFDD6E;
	--accent-tint: #1E2C50;
	--on-accent: #0A1630;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--page: #0E0F0E;
		--surface: #171918;
		--ink: #F2F2F0;
		--text-strong: #DCDFDC;
		--text: #CDD1CD;
		--nav: #C2C6C2;
		--muted: #9CA19D;
		--line: rgba(255, 255, 255, 0.08);
		--line-strong: rgba(255, 255, 255, 0.15);
		--line-hover: rgba(255, 255, 255, 0.3);
		--field: #101211;
		--field-line: rgba(255, 255, 255, 0.18);
		--chip: #252826;
		--hover: #202321;
		--card-hover: #1C1E1D;
		--accent: #84C7A0;
		--accent-hover: #9DD3B3;
		--accent-tint: #1C2D23;
		--on-accent: #0C1F14;
		color-scheme: dark;
	}
}

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

/* The page scrollbar is always shown, so the layout never shifts, and takes the selected theme's colours. */
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
	scrollbar-color: var(--line-hover) var(--page);
}
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--page); }
::-webkit-scrollbar-thumb { background: var(--line-hover); border: 3px solid var(--page); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: var(--page); }

html body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.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;
}

.skip-link {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--ink);
	color: var(--surface);
	font-weight: 500;
}
.skip-link:focus { top: 16px; }

/* Layout: brand + nav, feed, sidebar. Wraps to one column on narrow screens. */
.shell {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 16px 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.site-header {
	flex: 1 1 200px;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.brand { display: flex; flex-direction: column; gap: 8px; }
.brand-name { display: inline-flex; color: var(--accent); }
.brand-name:hover { text-decoration: none; }
.brand-logo { display: block; width: 196px; max-width: 100%; height: auto; overflow: visible; }
.brand-logo .logo-letter, .brand-logo .logo-dot { transform-box: fill-box; }

/* Logo motion: the bird fades in where it stands and beats its wings twice, the letters settle after it
   and the dot on the i lands last. Plays on the first page of a visit and on reloads (logo-intro is set in wp_head); hovering lifts
   the bird. None with reduced motion. The bird's parts turn on fixed points in the logo's own units
   (the wing's lowest joint, the head feather's joint, the tail's top joint). The wings only lift and the
   tail only dips, each from rest, and every root runs under the body, so no gap opens, so they never depend on a measured box. */
.brand-logo .logo-bird, .brand-logo .bird-wing-back, .brand-logo .bird-wing-front, .brand-logo .bird-tail { transform-box: view-box; }
.logo-bird { transform-origin: 69px 175px; }
.bird-wing-back { transform-origin: 100.7px 97.4px; }
.bird-wing-front { transform-origin: 130.7px 31.5px; }
.bird-tail { transform-origin: 81.2px 108.2px; }
@media (prefers-reduced-motion: no-preference) {
	.logo-bird { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.brand-name:hover .logo-bird,
	.brand-name:focus-visible .logo-bird { transform: translateY(-3px) rotate(-4deg); }
	.logo-intro .logo-bird { animation: logo-appear 0.35s ease-out backwards; }
	.logo-intro .bird-wing-back { animation: logo-flap-back 1.1s ease-in-out 0.15s backwards; }
	.logo-intro .bird-wing-front { animation: logo-flap-front 1.1s ease-in-out 0.2s backwards; }
	.logo-intro .bird-tail { animation: logo-tail 1.1s ease-in-out 0.15s backwards; }
	.logo-intro .logo-letter { animation: logo-settle 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(0.35s + var(--i) * 70ms); }
	.logo-intro .logo-dot { transform-origin: 50% 50%; animation: logo-dot 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.95s backwards; }
}
@keyframes logo-appear { from { opacity: 0; } }
@keyframes logo-settle { from { opacity: 0; transform: translateY(18%); } }
@keyframes logo-dot { from { opacity: 0; transform: translateY(-80%) scale(0.4); } }
@keyframes logo-flap-back { 20% { transform: rotate(10deg); } 45% { transform: rotate(2deg); } 65% { transform: rotate(6deg); } 82% { transform: rotate(1deg); } }
@keyframes logo-flap-front { 20% { transform: rotate(16deg); } 45% { transform: rotate(2deg); } 65% { transform: rotate(9deg); } 82% { transform: rotate(1deg); } }
@keyframes logo-tail { 30% { transform: rotate(-4deg); } 60% { transform: rotate(-1deg); } }
.tagline { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--nav);
}
.site-nav a:hover { background: var(--chip); text-decoration: none; }
.site-nav .current-menu-item > a,
.site-nav a[aria-current="page"] { background: var(--chip); color: var(--ink); }
/* A parent item with children is a plain label, its pages listed under it. */
.site-nav .nav-label, .side-cats .nav-label { display: block; padding: 18px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.site-nav .sub-menu a { padding-left: 24px; }

.feed {
	flex: 999 1 560px;
	min-width: 0;
	max-width: 620px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.site-aside {
	flex: 1 1 260px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* From 1000px the menu and the category list share one panel in the sticky left column;
   below that the categories are chips above the feed. */
.side-cats { display: none; }
.cat-list .count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* From 1000px the left column is at least the window's height and Görünüm sits at its foot.
   No overflow clipping, so the logo's wings and the focus rings stay visible. */
@media (min-width: 1000px) {
	.site-header { position: sticky; top: 32px; min-height: calc(100dvh - 64px); }
	.admin-bar .site-header { top: 64px; min-height: calc(100dvh - 96px); }
	.site-header .theme-picker { margin-top: auto; }
	.side-cats { display: block; }
	.feed-head .chips { display: none; }
	.nav-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px; }
	.site-header { gap: 16px; }
	.nav-panel .site-nav ul { gap: 0; }
	.nav-panel .site-nav a { min-height: 32px; padding: 6px 12px; font-size: 15px; }
	.nav-panel .nav-label { padding: 10px 12px 4px; }
	.site-header .theme-picker { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; }
	.site-header .theme-picker legend { float: left; width: 100%; }
}

/* The sidebar sticks only when all three columns fit side by side. It can be taller
   than the window, so it scrolls on its own instead of hiding its lower part. */
@media (min-width: 1120px) {
	.site-aside {
		position: sticky;
		top: 32px;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-bottom: 2px;
	}
	.admin-bar .site-aside { top: 64px; max-height: calc(100vh - 96px); }
}

@media (max-width: 720px) {
	.shell { padding-top: 20px; gap: 20px; }
	.site-header, .site-aside { max-width: none; }
	.site-header { gap: 12px; }
	.site-nav ul { flex-direction: row; flex-wrap: wrap; }
	.site-nav .menu-item-has-children, .site-nav .sub-menu { display: contents; }
	.site-nav .nav-label { display: none; }
	.site-nav .sub-menu a { padding-left: 12px; }
	.feed { border-radius: 11px; }
}

/* Feed header */
.feed-head {
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.feed-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.archive-picker { position: relative; }
.archive-picker summary { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 34px 0 12px; border-radius: 8px; border: 1px solid var(--field-line); background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px; font-size: 14px; color: var(--ink); cursor: pointer; list-style: none; }
.archive-picker summary::-webkit-details-marker { display: none; }
.archive-picker .ap-label { color: var(--muted); }
.archive-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 272px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); }
.ap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ap-step, .ap-title { display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px; color: var(--ink); }
.ap-step { width: 32px; font-size: 20px; }
.ap-title { gap: 6px; padding: 0 10px; font-weight: 600; }
.ap-title small, .ap-months small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-step:hover, .ap-title:hover, .ap-years a:hover { background: var(--chip); text-decoration: none; }
.ap-months a:hover { text-decoration: none; }
.ap-months, .ap-years ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
/* Every month is the same tile: name over a count line. Months with posts are filled click areas;
   empty months keep an invisible count so their names sit on the same line. */
.ap-months a, .ap-months span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 46px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; line-height: 1.2; }
.ap-months small, .ap-months span::after { font-size: 11px; line-height: 1.2; }
.ap-months a { background: var(--chip); color: var(--ink); font-weight: 500; }
.ap-months a:hover { border-color: var(--line-hover); }
.ap-months span { color: var(--muted); opacity: 0.45; }
.ap-months span::after { content: "0"; visibility: hidden; }
.ap-months a[aria-current="page"], .ap-years a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.ap-months a[aria-current="page"] small { color: inherit; }
.ap-years-title { margin: 2px 4px 8px; font-size: 13px; color: var(--muted); }
.ap-years ul { max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.ap-years a { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.feed-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.feed-desc { margin: 0; font-size: 14px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	color: var(--nav);
	font-size: 14px;
	font-weight: 500;
}
.chip:hover { color: var(--ink); border-color: var(--line-hover); text-decoration: none; }
.chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Feed card */
.card {
	display: flex;
	gap: 14px;
	padding: 20px;
	border-bottom: 1px solid var(--line);
}
.card:last-of-type { border-bottom: 0; }
.card:hover { background: var(--card-hover); }

.avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--accent-tint);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.avatar-mark { display: block; width: 24px; height: 24px; }

.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.card-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; }
.card-author { color: var(--ink); font-weight: 500; }
.card-sub { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; }
.card-sub a { color: var(--muted); }

.card-title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }

.card-excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.card-poem { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }

.card-media { display: block; }
.card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: var(--hover);
}

.card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 2px -12px -8px 0;
}
.card-more { font-size: 14px; font-weight: 500; color: var(--accent); }

.share { display: flex; }
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: transparent;
	border: 0;
	color: var(--muted);
	cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn[hidden] { display: none; }

.feed-empty { margin: 0; padding: 32px 20px; color: var(--muted); }

/* Newer on the left, older on the right; the older link stays right even when it is alone. */
.feed-pages {
	padding: 20px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
}
.feed-pages .btn-older { margin-left: auto; }
.feed-pages .btn { gap: 8px; }
.btn {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--page);
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Single post and page */
.entry { padding: 24px 20px 20px; }
.entry-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.entry-title { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.entry-figure { margin: 0 0 24px; }
/* Every post image shows at 3:2, cropped toward the upper middle so faces stay in frame. */
.entry-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: 11px; border: 1px solid var(--line); }

.entry-content { font-size: 17px; line-height: 1.75; color: var(--text-strong); overflow-wrap: break-word; }
.entry-content > * { margin-top: 0; margin-bottom: 1.1em; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--ink); font-weight: 600; line-height: 1.3; margin-top: 1.6em; margin-bottom: 0.6em; }
.entry-content h2 { font-size: 22px; }
.entry-content h3 { font-size: 19px; }
.entry-content strong, .entry-content b { font-weight: 600; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.entry-content img, .entry-content video { max-width: 100%; height: auto; border-radius: 8px; }
.entry-content iframe { max-width: 100%; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption, .entry-content .wp-caption-text { font-size: 13px; color: var(--muted); margin-top: 8px; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content blockquote { margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent-tint); color: var(--text); font-style: italic; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignleft { float: left; margin: 0.3em 1.2em 0.8em 0; }
.entry-content .alignright { float: right; margin: 0.3em 0 0.8em 1.2em; }
.entry-content::after { content: ""; display: table; clear: both; }

.entry-foot {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--chip); font-size: 13px; color: var(--text-strong); }

.post-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.post-nav a { color: var(--accent); font-weight: 500; }

/* Comments */
.comments { padding: 20px; border-top: 1px solid var(--line); }
.comments-title { margin: 0 0 16px; font-size: 18px; color: var(--ink); }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-left: 20px; padding-left: 16px; border-left: 1px solid var(--line); }
.comment-body { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.comment-author { color: var(--ink); font-weight: 500; }
.comment-author .says { display: none; }
.comment-metadata, .comment-metadata a { font-size: 13px; color: var(--muted); }
.comment-content p { margin: 0 0 0.6em; }
.reply a { font-size: 13px; color: var(--accent); font-weight: 500; }
.comment-respond { margin-top: 20px; }
.comment-reply-title { font-size: 16px; color: var(--ink); }
.comment-form label { display: block; font-size: 13px; color: var(--nav); margin-bottom: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--field-line);
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}
.comment-form .submit { height: 44px; padding: 0 22px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }

/* Sidebar */
.box {
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.box-filled { background: var(--surface); }
.box h2, .box .widget-title, .box .widgettitle { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }

.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1px solid var(--field-line);
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}
.tag-form select {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--field-line);
	background: var(--field);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}
.box h2 label { cursor: pointer; }
.search-form button { height: 44px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }

.ranked { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ranked li { display: flex; gap: 12px; align-items: baseline; }
.ranked .num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.ranked a { font-size: 14px; line-height: 1.45; color: var(--text-strong); }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cat-chips a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--chip); font-size: 13px; color: var(--text-strong); }

.site-footer { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; font-size: 13px; color: var(--muted); }

.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--surface);
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease-out;
}
.toast.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Embedded videos fill the column at 16:9. */
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="vimeo"], .entry-content iframe[src*="dailymotion"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.entry-content .wp-block-embed { margin: 1.2em 0; }
.video-gone { display: block; padding: 14px 16px; border-radius: 10px; background: var(--chip); font-size: 15px; color: var(--muted); }

/* Theme picker under the menu */
.theme-picker { border: 0; margin: 0; padding: 0 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.theme-picker legend { padding: 0; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.theme-options { display: grid; grid-template-columns: repeat(3, 32px); justify-content: space-between; gap: 8px 10px; }
.theme-option { position: relative; }
.theme-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme-swatch { display: block; width: 32px; height: 32px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); background-clip: content-box; }
.theme-option input:checked + .theme-swatch { border: 2px solid var(--accent); padding: 2px; }
.theme-option input:focus-visible + .theme-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-auto { background-image: linear-gradient(135deg, #FFFFFF 50%, #171918 50%); }
.swatch-light { background-color: #FFFFFF; }
.swatch-sepia { background-color: #F8F0E1; }
.swatch-dark { background-color: #171918; }
.swatch-darussafaka { background-color: #15241B; }
.swatch-fenerbahce { background-image: linear-gradient(90deg, #0E1D3D 50%, #FFD23F 50%); }
@media (max-width: 720px) { .theme-picker { padding: 0; } }

/* Selects draw their own chevron, inset from the edge, in a mid grey that reads on every theme. */
.tag-form select, .archive-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 13px center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
	cursor: pointer;
}