/*
Theme Name: Volkovysk Foto Archive
Theme URI: https://foto.volkovysk.by
Description: Современная тема для архива старых фотографий Волковыска.
Author: Aravak
Version: 1.0.0
Text Domain: vf
*/

/* ==========================================================
   Tokens
   ========================================================== */
:root {
	--vf-bg: #f6f1e7;
	--vf-bg-alt: #ffffff;
	--vf-ink: #2a2320;
	--vf-ink-soft: #6b5d50;
	--vf-accent: #8a4a2e;
	--vf-accent-dark: #6e3a23;
	--vf-gold: #b9863f;
	--vf-border: #e6dcc8;
	--vf-shadow: 0 10px 30px rgba(42, 35, 32, 0.08);
	--vf-shadow-lg: 0 20px 45px rgba(42, 35, 32, 0.14);
	--vf-radius: 14px;
	--vf-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--vf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--vf-max: 1200px;
}

/* ==========================================================
   Reset
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--vf-bg);
	color: var(--vf-ink);
	font-family: var(--vf-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vf-accent); text-decoration: none; }
a:hover { color: var(--vf-accent-dark); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--vf-font-display); line-height: 1.25; margin: 0 0 .5em; color: var(--vf-ink); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.vf-skip-link {
	position: absolute; top: -50px; left: 0;
	background: var(--vf-accent); color: #fff;
	padding: .75em 1.25em; z-index: 999;
	transition: top .2s ease;
}
.vf-skip-link:focus { top: 0; color: #fff; }

/* ==========================================================
   Header
   ========================================================== */
.vf-header {
	background: var(--vf-bg-alt);
	border-bottom: 1px solid var(--vf-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.vf-header__inner {
	max-width: var(--vf-max);
	margin: 0 auto;
	padding: .85em 1.5em;
	display: flex;
	align-items: center;
	gap: 1.5em;
}
.vf-brand {
	display: flex;
	align-items: center;
	gap: .7em;
	color: var(--vf-ink);
	flex-shrink: 0;
}
.vf-brand:hover { color: var(--vf-ink); }
.vf-brand__mark {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--vf-accent), var(--vf-gold));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--vf-font-display);
	font-weight: 700;
	font-size: 1.2em;
	flex-shrink: 0;
}
.vf-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.vf-brand__title { font-family: var(--vf-font-display); font-weight: 700; font-size: 1.15em; }
.vf-brand__tagline { font-size: .78em; color: var(--vf-ink-soft); }

.vf-nav {
	display: flex;
	align-items: center;
	gap: 1.5em;
	margin-left: auto;
}
.vf-nav__list {
	display: flex;
	align-items: center;
	gap: .3em;
	flex-wrap: wrap;
}
.vf-nav__list li { position: relative; }
.vf-nav__list a {
	display: block;
	padding: .5em .8em;
	border-radius: 999px;
	color: var(--vf-ink);
	font-weight: 500;
	font-size: .95em;
	white-space: nowrap;
}
.vf-nav__list a:hover { background: var(--vf-bg); color: var(--vf-accent-dark); }

/* Categories dropdown */
.vf-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: .35em;
	background: none;
	border: none;
	padding: .5em .8em;
	border-radius: 999px;
	color: var(--vf-ink);
	font-weight: 500;
	font-size: .95em;
	font-family: inherit;
	white-space: nowrap;
}
.vf-dropdown-toggle:hover { background: var(--vf-bg); color: var(--vf-accent-dark); }
.vf-dropdown-toggle span { font-size: .75em; transition: transform .2s ease; }
.vf-has-dropdown.is-open .vf-dropdown-toggle span { transform: rotate(180deg); }
.vf-has-dropdown.is-open .vf-dropdown-toggle { background: var(--vf-bg); color: var(--vf-accent-dark); }

.vf-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + .6em);
	left: 0;
	background: var(--vf-bg-alt);
	border: 1px solid var(--vf-border);
	border-radius: 12px;
	box-shadow: var(--vf-shadow-lg);
	padding: .6em;
	min-width: 280px;
	max-height: 60vh;
	overflow-y: auto;
	z-index: 60;
	columns: 2;
	column-gap: .4em;
}
.vf-has-dropdown.is-open .vf-dropdown { display: block; }
.vf-dropdown li { break-inside: avoid; }
.vf-dropdown a {
	display: flex;
	justify-content: space-between;
	gap: .6em;
	padding: .45em .6em;
	border-radius: 8px;
	font-size: .88em;
	white-space: normal;
	color: var(--vf-ink);
}
.vf-dropdown a:hover { background: var(--vf-bg); color: var(--vf-accent); }
.vf-dropdown .vf-count { color: var(--vf-ink-soft); font-size: .85em; flex-shrink: 0; }

.vf-nav__search { position: relative; display: flex; }
.vf-nav__search input {
	border: 1px solid var(--vf-border);
	background: var(--vf-bg);
	border-radius: 999px;
	padding: .5em 1em;
	font-size: .9em;
	width: 170px;
	color: var(--vf-ink);
}
.vf-nav__search input:focus { outline: 2px solid var(--vf-gold); outline-offset: 1px; }

.vf-nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: .5em;
	margin-left: auto;
	flex-direction: column;
	gap: 4px;
}
.vf-nav-toggle span {
	width: 22px; height: 2px; background: var(--vf-ink); display: block; border-radius: 2px;
}

/* ==========================================================
   Layout
   ========================================================== */
.vf-container { max-width: var(--vf-max); margin: 0 auto; padding: 0 1.5em; }
.vf-main { padding-bottom: 4em; }

.vf-hero { padding: 3em 0 1.5em; text-align: center; max-width: 720px; margin: 0 auto; }
.vf-hero--compact { padding: 2.2em 0 1em; }
.vf-hero__eyebrow {
	text-transform: uppercase; letter-spacing: .12em; font-size: .8em;
	color: var(--vf-accent); font-weight: 600; margin-bottom: .5em;
}
.vf-hero__title { font-size: clamp(1.8em, 4vw, 2.6em); }
.vf-hero__lead { color: var(--vf-ink-soft); font-size: 1.05em; }

.vf-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 2.5em;
	align-items: start;
}
.vf-content { min-width: 0; }

/* ==========================================================
   Photo grid / cards
   ========================================================== */
.vf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.4em;
}
.vf-card {
	background: var(--vf-bg-alt);
	border-radius: var(--vf-radius);
	overflow: hidden;
	box-shadow: var(--vf-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
	display: flex;
	flex-direction: column;
}
.vf-card:hover { transform: translateY(-4px); box-shadow: var(--vf-shadow-lg); }
.vf-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--vf-bg);
	overflow: hidden;
	position: relative;
}
.vf-card__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.vf-card:hover .vf-card__img { transform: scale(1.06); }
.vf-card__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 2.4em; color: var(--vf-border);
}
.vf-card__body { padding: 1em 1.1em 1.2em; flex: 1; display: flex; flex-direction: column; gap: .35em; }
.vf-card__cat {
	align-self: flex-start;
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--vf-accent);
	background: rgba(138, 74, 46, 0.09);
	padding: .25em .65em;
	border-radius: 999px;
}
.vf-card__title { font-size: 1.05em; margin: 0; line-height: 1.35; }
.vf-card__title a { color: var(--vf-ink); }
.vf-card__title a:hover { color: var(--vf-accent); }
.vf-card__date { font-size: .82em; color: var(--vf-ink-soft); }

.vf-empty { text-align: center; padding: 3em 1em; color: var(--vf-ink-soft); }

/* ==========================================================
   Pagination
   ========================================================== */
.vf-pagination { margin-top: 2.5em; display: flex; justify-content: center; }
.vf-pagination ul { display: flex; gap: .4em; flex-wrap: wrap; }
.vf-pagination a, .vf-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4em; height: 2.4em; padding: 0 .6em;
	border-radius: 999px; border: 1px solid var(--vf-border);
	color: var(--vf-ink); font-size: .9em; background: var(--vf-bg-alt);
}
.vf-pagination a:hover { background: var(--vf-accent); color: #fff; border-color: var(--vf-accent); }
.vf-pagination span.current { background: var(--vf-accent); color: #fff; border-color: var(--vf-accent); }

/* ==========================================================
   Sidebar / widgets
   ========================================================== */
.vf-sidebar { display: flex; flex-direction: column; gap: 1.4em; }
.widget {
	background: var(--vf-bg-alt);
	border-radius: var(--vf-radius);
	padding: 1.4em;
	box-shadow: var(--vf-shadow);
}
.widget-title {
	font-size: 1.02em;
	margin-bottom: .8em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--vf-border);
}
.vf-search { display: flex; gap: .5em; }
.vf-search input {
	flex: 1;
	border: 1px solid var(--vf-border);
	background: var(--vf-bg);
	border-radius: 999px;
	padding: .6em 1em;
	font-size: .92em;
	color: var(--vf-ink);
}
.vf-search button {
	width: 2.6em; height: 2.6em; border-radius: 50%;
	border: none; background: var(--vf-accent); color: #fff; flex-shrink: 0;
}
.vf-search button:hover { background: var(--vf-accent-dark); }

.vf-cat-list li, .vf-recent-list li { margin-bottom: .55em; }
.vf-cat-list a {
	display: flex; justify-content: space-between; gap: .5em;
	color: var(--vf-ink); font-size: .93em; padding: .3em 0;
}
.vf-cat-list a:hover { color: var(--vf-accent); }
.vf-count { color: var(--vf-ink-soft); font-size: .85em; }
.vf-recent-list a { display: block; color: var(--vf-ink); font-size: .93em; }
.vf-recent-list a:hover { color: var(--vf-accent); }
.vf-recent-list time { display: block; font-size: .78em; color: var(--vf-ink-soft); }

/* Generic core widgets fallback styling */
.widget ul { display: flex; flex-direction: column; gap: .5em; }
.widget select { width: 100%; padding: .5em; border-radius: 8px; border: 1px solid var(--vf-border); }

/* ==========================================================
   Single post
   ========================================================== */
.vf-single {
	background: var(--vf-bg-alt);
	border-radius: var(--vf-radius);
	padding: 2em clamp(1.2em, 4vw, 2.6em);
	box-shadow: var(--vf-shadow);
}
.vf-breadcrumb { font-size: .85em; color: var(--vf-ink-soft); margin-bottom: .6em; }
.vf-breadcrumb a { color: var(--vf-ink-soft); }
.vf-breadcrumb a:hover { color: var(--vf-accent); }
.vf-single__title { font-size: clamp(1.5em, 3.4vw, 2.1em); }
.vf-single__meta { color: var(--vf-ink-soft); font-size: .9em; margin-bottom: 1.6em; }
.vf-dot { margin: 0 .3em; }

.vf-single__content { font-size: 1.03em; }
.vf-single__content img,
.vf-single__content .wp-caption,
.vf-single__content .alignnone,
.vf-single__content .aligncenter {
	border-radius: 10px;
	margin: 0 auto 1.2em;
	box-shadow: var(--vf-shadow);
}
.vf-single__content a:has(img) { display: inline-block; cursor: zoom-in; }
.vf-single__content .wp-caption-text {
	text-align: center; font-size: .85em; color: var(--vf-ink-soft);
}

.vf-tags { display: flex; flex-wrap: wrap; gap: .5em; margin: 1.5em 0; }
.vf-tags a {
	background: var(--vf-bg); border-radius: 999px; padding: .3em .8em;
	font-size: .85em; color: var(--vf-ink-soft);
}
.vf-tags a:hover { color: var(--vf-accent); }

.vf-edit-link a { font-size: .85em; color: var(--vf-ink-soft); }

.vf-post-nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1em;
	margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--vf-border);
}
.vf-post-nav__next { text-align: right; }
.vf-post-nav a { font-size: .92em; color: var(--vf-ink); }
.vf-post-nav a:hover { color: var(--vf-accent); }

/* ==========================================================
   Comments
   ========================================================== */
.vf-comments, .vf-comments-wrap {
	background: var(--vf-bg-alt);
	border-radius: var(--vf-radius);
	padding: 2em clamp(1.2em, 4vw, 2.6em);
	box-shadow: var(--vf-shadow);
	margin-top: 1.6em;
}
.vf-comment-list { display: flex; flex-direction: column; gap: 1.3em; margin: 1.5em 0; }
.vf-comment-list ol.children { margin-top: 1.3em; padding-left: 1.5em; border-left: 2px solid var(--vf-border); }
.comment-body { display: flex; gap: 1em; }
.comment-author .avatar { border-radius: 50%; }
.comment-meta { font-size: .82em; color: var(--vf-ink-soft); margin-bottom: .3em; }
.comment-content p { margin: 0 0 .6em; }
.comment-reply-link {
	font-size: .8em; color: var(--vf-accent); border: 1px solid var(--vf-border);
	padding: .2em .7em; border-radius: 999px;
}

.comment-form p { margin: 0 0 1em; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--vf-border);
	background: var(--vf-bg);
	border-radius: 10px;
	padding: .7em .9em;
	font-family: inherit;
	font-size: .95em;
	color: var(--vf-ink);
}
.comment-form textarea { resize: vertical; }
.comment-form input[type="submit"] {
	background: var(--vf-accent); color: #fff; border: none;
	border-radius: 999px; padding: .7em 1.6em; font-weight: 600;
}
.comment-form input[type="submit"]:hover { background: var(--vf-accent-dark); }

/* ==========================================================
   404
   ========================================================== */
.vf-404 { text-align: center; padding: 4em 1em; max-width: 480px; margin: 0 auto; }
.vf-404__code { font-family: var(--vf-font-display); font-size: 4em; color: var(--vf-gold); margin: 0; }
.vf-404 .vf-search { margin: 1.5em auto; max-width: 340px; }
.vf-btn {
	display: inline-block; background: var(--vf-accent); color: #fff;
	padding: .7em 1.6em; border-radius: 999px; font-weight: 600; margin-top: .5em;
}
.vf-btn:hover { background: var(--vf-accent-dark); color: #fff; }

/* ==========================================================
   Footer
   ========================================================== */
.vf-footer { background: var(--vf-ink); color: #f0e9de; margin-top: 3em; }
.vf-footer__inner {
	max-width: var(--vf-max); margin: 0 auto; padding: 2.4em 1.5em;
	display: flex; flex-direction: column; gap: 1.2em; align-items: center; text-align: center;
}
.vf-footer__about { font-family: var(--vf-font-display); font-size: 1.1em; }
.vf-footer__cats { display: flex; flex-wrap: wrap; gap: .5em 1em; justify-content: center; }
.vf-footer__cats a { color: #cbb99e; font-size: .88em; }
.vf-footer__cats a:hover { color: #fff; }
.vf-footer__copy { font-size: .82em; color: #a99a86; margin: 0; }

/* Back to top */
.vf-to-top {
	position: fixed; right: 1.4em; bottom: 1.4em;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--vf-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--vf-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .25s ease;
	z-index: 40;
}
.vf-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.vf-to-top:hover { background: var(--vf-accent-dark); color: #fff; }

/* ==========================================================
   Lightbox
   ========================================================== */
.vf-lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(20, 15, 12, 0.92);
	display: flex; align-items: center; justify-content: center;
	padding: 3em 1.5em;
}
.vf-lightbox[hidden] { display: none; }
.vf-lightbox__img { max-width: 100%; max-height: 90vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.vf-lightbox__close {
	position: absolute; top: 1.2em; right: 1.2em;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 1.6em; line-height: 1;
}
.vf-lightbox__close:hover { background: rgba(255,255,255,.25); }
body.vf-noscroll { overflow: hidden; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {
	.vf-layout { grid-template-columns: 1fr; }
	.vf-sidebar { order: 2; }
}

@media (max-width: 760px) {
	.vf-nav-toggle { display: flex; }
	.vf-nav {
		position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 82vw);
		background: var(--vf-bg-alt); flex-direction: column; align-items: stretch;
		padding: 5.5em 1.5em 2em; gap: 1.2em;
		transform: translateX(100%); transition: transform .3s ease;
		box-shadow: -10px 0 30px rgba(0,0,0,.15);
	}
	.vf-nav.is-open { transform: translateX(0); }
	.vf-nav__list { flex-direction: column; align-items: stretch; }
	.vf-nav__list a { padding: .7em .3em; }
	.vf-dropdown-toggle { width: 100%; padding: .7em .3em; justify-content: space-between; }
	.vf-dropdown {
		position: static; box-shadow: none; border: none; background: var(--vf-bg);
		columns: 1; width: 100%; min-width: 0; margin-top: .3em; max-height: none;
	}
	.vf-nav__search input { width: 100%; }
	.vf-post-nav { grid-template-columns: 1fr; }
	.vf-post-nav__next { text-align: left; }
}

@media (max-width: 480px) {
	.vf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1em; }
	.vf-hero { padding: 2em 0 1em; }
}