/*!
 * Ilia Iliev — main stylesheet
 * Theme created by Milenski — https://napravenozateb.com
 *
 * Plain, hand-authored CSS (no build step, no framework) so the theme
 * has zero install-time dependencies. Organized:
 *   1. Custom properties & resets
 *   2. Typography
 *   3. Layout primitives
 *   4. Components (header, buttons, cards, hero…)
 *   5. Sections (homepage blocks)
 *   6. Blog & single content
 *   7. Utilities & motion
 *   8. Responsive breakpoints
 */

/* ==========================================================================
   1. Custom properties & resets
   ========================================================================== */
:root {
	--ii-color-ivory: #f7f5f1;
	--ii-color-white: #ffffff;
	--ii-color-sand: #e9e2d6;
	--ii-color-warm-grey: #8b8478;
	--ii-color-charcoal: #2b2925;
	--ii-color-black: #141311;
	--ii-color-gold: #b6924c;
	--ii-color-gold-soft: #d9c48f;

	--ii-font-heading: "Cormorant Garamond", "Times New Roman", serif;
	--ii-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	--ii-container: 1400px;
	--ii-container-narrow: 800px;
	--ii-gutter: clamp(1.25rem, 4vw, 3rem);

	--ii-space-xs: 0.5rem;
	--ii-space-s: 1rem;
	--ii-space-m: 2rem;
	--ii-space-l: 4rem;
	--ii-space-xl: 6rem;
	--ii-space-xxl: 10rem;

	--ii-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ii-transition: 420ms var(--ii-ease);
	--ii-header-height: 92px;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background: var(--ii-color-ivory);
	color: var(--ii-color-charcoal);
	font-family: var(--ii-font-body);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* Visible, high-contrast focus ring everywhere — WCAG 2.2 focus visibility */
:focus-visible {
	outline: 2px solid var(--ii-color-gold);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--ii-color-black);
	color: var(--ii-color-white);
	padding: 0.75rem 1.25rem;
	transition: top var(--ii-transition);
}

.skip-link:focus {
	top: 1rem;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-heading {
	font-family: var(--ii-font-heading);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 var(--ii-space-s);
}

h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.375rem; }

p { margin: 0 0 var(--ii-space-s); }
p:last-child { margin-bottom: 0; }

.eyebrow {
	display: inline-block;
	font-family: var(--ii-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ii-color-gold);
	margin-bottom: var(--ii-space-s);
}

.section-heading {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: var(--ii-space-l);
}

.section-heading--left {
	margin-left: 0;
	text-align: left;
}

.lede {
	font-size: 1.25rem;
	color: var(--ii-color-warm-grey);
	font-weight: 300;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.container {
	max-width: var(--ii-container);
	margin-inline: auto;
	padding-inline: var(--ii-gutter);
}

.container--narrow {
	max-width: var(--ii-container-narrow);
}

/*
 * Structural, gap-based vertical spacing between a section's stacked
 * blocks (heading / grid / CTA link) — used wherever a fixed inline
 * "margin-top" would otherwise be the only thing separating a trailing
 * CTA from the content grid above it. A flex/gap gap can never collapse
 * or be overridden away to zero the way a single element's own margin
 * can, so it's the more robust choice here regardless of content length
 * or viewport.
 */
.section-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ii-space-l);
}
/* .section-heading already carries its own margin-bottom; without this
   it would add on top of the flex gap above and double the spacing
   before the grid, changing the existing design. */
.section-stack > .section-heading {
	margin-bottom: 0;
}

.section {
	padding-block: var(--ii-space-xl);
}

.section--tight { padding-block: var(--ii-space-l); }

.section--sand { background: var(--ii-color-sand); }
.section--charcoal { background: var(--ii-color-charcoal); color: var(--ii-color-ivory); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 { color: var(--ii-color-white); }
.section--white { background: var(--ii-color-white); }

.grid {
	display: grid;
	gap: var(--ii-space-m);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 1em 2.1em;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	transition: background var(--ii-transition), color var(--ii-transition), border-color var(--ii-transition);
	white-space: nowrap;
}

.btn--primary {
	background: var(--ii-color-charcoal);
	border-color: var(--ii-color-charcoal);
	color: var(--ii-color-white);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--ii-color-gold); border-color: var(--ii-color-gold); color: var(--ii-color-black); }

.btn--outline {
	background: transparent;
	color: inherit;
}
.btn--outline:hover, .btn--outline:focus-visible { background: currentColor; color: var(--ii-color-ivory); }

.btn--ghost-light {
	color: var(--ii-color-white);
}
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: var(--ii-color-white); color: var(--ii-color-black); }

/* Site header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ii-header-height);
	padding-inline: var(--ii-gutter);
	background: rgba(247, 245, 241, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ii-transition), background var(--ii-transition);
}

.site-header.is-scrolled {
	border-color: var(--ii-color-sand);
}

.site-header--transparent:not(.is-scrolled) {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	color: var(--ii-color-white);
}

.site-branding { flex-shrink: 0; }
.site-branding .custom-logo-link img,
.site-branding__logo img { max-height: 46px; width: auto; }

.footer-logo { margin-bottom: var(--ii-space-s); }
.footer-logo img,
.footer-logo .custom-logo-link img { max-height: 64px; width: auto; }

.site-branding__text {
	font-family: var(--ii-font-heading);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
}

/*
 * The header is a single-line flex row (logo / nav / actions) with no
 * flex-shrink protection on the logo or the CTA+hamburger cluster, so
 * without a minimum width guard the browser squeezes all three toward
 * each other under real menu content (7 Cyrillic labels + a CTA button
 * routinely need more width than an 1280–1440px laptop viewport has) —
 * visually overlapping/crowded nav items. "min-width: 0" lets this flex
 * item actually shrink instead of forcing the row to overflow, and the
 * horizontal scroll is a last-resort safety net for any menu long enough
 * to still not fit even past the breakpoint below.
 */
.nav-menu-wrap {
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.nav-menu-wrap::-webkit-scrollbar { display: none; }

.nav-menu {
	display: flex;
	gap: var(--ii-space-m);
}

.nav-menu a {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.5rem 0;
	position: relative;
}

.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transition: right var(--ii-transition);
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.nav-menu .current-menu-item > a::after {
	right: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--ii-space-s);
	flex-shrink: 0;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 0.5rem;
}
.menu-toggle span { width: 24px; height: 1px; background: currentColor; transition: transform var(--ii-transition), opacity var(--ii-transition); }

/*
 * ".mobile-nav" only gets its off-canvas positioning (fixed, translateY,
 * z-index) from the ≤1280px media query below — above that breakpoint it
 * had no display rule at all, so it rendered as a plain in-flow block
 * right after </header>. That's invisible behind a solid sticky header,
 * but the front page's header goes "position: absolute" (removed from
 * flow) once scrolled back to the very top, which shifts this element up
 * to sit at the top of the document — right where the transparent header
 * lets it show through as stray unstyled menu text under the logo. Hidden
 * here by default, exactly like ".menu-toggle" above it; the media query
 * already switches it back to "display: flex" for real mobile use.
 */
.mobile-nav {
	display: none;
}

/* Hero */
.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	color: var(--ii-color-white);
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__media img, .hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,19,17,0.15) 0%, rgba(20,19,17,0.75) 100%);
}

.hero__content {
	position: relative;
	z-index: 1;
	padding: var(--ii-space-xl) var(--ii-gutter) var(--ii-space-xxl);
	max-width: 46rem;
}

.hero__title { color: var(--ii-color-white); }
.hero__subtitle { font-size: 1.125rem; max-width: 34rem; margin-bottom: var(--ii-space-m); color: var(--ii-color-sand); }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-s);
}

.hero__scroll-cue {
	position: absolute;
	bottom: var(--ii-space-m);
	right: var(--ii-gutter);
	z-index: 1;
	writing-mode: vertical-rl;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: var(--ii-space-xs);
}
.hero__scroll-cue::after { content: ""; width: 1px; height: 48px; background: currentColor; opacity: 0.6; }

/* Cards */
.card {
	background: var(--ii-color-white);
}

.look-card { position: relative; overflow: hidden; }
.look-card__media { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ii-color-sand); }
.look-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ii-ease); }
.look-card:hover .look-card__media img { transform: scale(1.05); }
.look-card__caption { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--ii-space-xs); }
.look-card__title { font-family: var(--ii-font-heading); font-size: 1.125rem; }
.look-card__tag { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ii-color-warm-grey); }

/* Collections tiles (homepage) */
.collection-tile {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	color: var(--ii-color-white);
}
.collection-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ii-ease); }
.collection-tile:hover img { transform: scale(1.06); }
.collection-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,17,0) 40%, rgba(20,19,17,0.8) 100%); }
.collection-tile__label { position: absolute; left: var(--ii-space-m); right: var(--ii-space-m); bottom: var(--ii-space-m); z-index: 1; }
.collection-tile__label h3 { color: var(--ii-color-white); margin-bottom: 0.25rem; }
.collection-tile__label span { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Why-us */
.feature { text-align: center; }
.feature__icon { width: 44px; height: 44px; margin: 0 auto var(--ii-space-s); color: var(--ii-color-gold); }
.feature__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.feature__text { color: var(--ii-color-warm-grey); font-size: 0.95rem; }

/* Process */
.process-list { counter-reset: process; }
.process-step { display: grid; grid-template-columns: auto 1fr; gap: var(--ii-space-m); padding-block: var(--ii-space-m); border-top: 1px solid var(--ii-color-sand); }
.process-step:first-child { border-top: 0; }
.process-step__number { counter-increment: process; font-family: var(--ii-font-heading); font-size: 2rem; color: var(--ii-color-gold); }
.process-step__number::before { content: counter(process, decimal-leading-zero); }
.process-step__title { margin-bottom: 0.4rem; }
.process-step__text { color: var(--ii-color-warm-grey); }

/* Testimonials */
.testimonial { background: var(--ii-color-white); padding: var(--ii-space-m); }
.testimonial__quote { font-family: var(--ii-font-heading); font-size: 1.375rem; font-style: italic; margin-bottom: var(--ii-space-s); }
.testimonial__author { display: flex; align-items: center; gap: var(--ii-space-xs); }
.testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name { font-weight: 500; }
.testimonial__role { font-size: 0.8125rem; color: var(--ii-color-warm-grey); }
.rating { color: var(--ii-color-gold); letter-spacing: 0.1em; display: inline-block; margin-bottom: var(--ii-space-xs); }

/* Instagram feed */
.instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.instagram-grid__item { position: relative; aspect-ratio: 1; overflow: hidden; }
.instagram-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ii-transition); }
.instagram-grid__item:hover img { transform: scale(1.08); }

/* Gallery / masonry */
.masonry {
	column-count: 3;
	column-gap: var(--ii-space-m);
}
.masonry .look-card { break-inside: avoid; margin-bottom: var(--ii-space-m); }

.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--ii-space-xs); justify-content: center; margin-bottom: var(--ii-space-l); }
.gallery-filters button {
	padding: 0.6em 1.4em;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--ii-color-sand);
	transition: background var(--ii-transition), color var(--ii-transition), border-color var(--ii-transition);
}
.gallery-filters button.is-active,
.gallery-filters button:hover { background: var(--ii-color-charcoal); color: var(--ii-color-white); border-color: var(--ii-color-charcoal); }

/* Lightbox */
.ii-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(20, 19, 17, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ii-transition);
}
.ii-lightbox.is-open { opacity: 1; visibility: visible; }
.ii-lightbox img { max-height: 88vh; max-width: 88vw; object-fit: contain; }
.ii-lightbox__close, .ii-lightbox__prev, .ii-lightbox__next {
	position: absolute;
	color: var(--ii-color-white);
	font-size: 1.5rem;
	padding: 1rem;
}
.ii-lightbox__close { top: 0; right: 0; }
.ii-lightbox__prev { left: 0; top: 50%; transform: translateY(-50%); }
.ii-lightbox__next { right: 0; top: 50%; transform: translateY(-50%); }

/* Blog cards */
/*
 * flow-root gives each card its own block-formatting context, so its
 * content can never visually leak into (or be leaked into by) the
 * "Всички публикации" link below the grid, regardless of excerpt
 * length or grid row-height stretching — a defensive boundary, not a
 * visual change (a block-level <article> already behaves this way in
 * every case actually exercised by this markup).
 *
 * flow-root alone does NOT stop a card's own title/excerpt/button from
 * overflowing past its OWN bottom edge, though: ".grid"'s items default
 * to "align-self: stretch", so every card in a row is forced to the
 * *shortest* card's auto-computed row height rather than its own content
 * height whenever titles in that row wrap to noticeably different
 * numbers of lines — confirmed live on a long title ("Мъжки костюм по
 * поръчка: защо си заслужава инвестицията") whose title+excerpt+button
 * rendered ~290px past the card box's own bottom edge, overlapping
 * whatever came next, while shorter-titled cards in the same row looked
 * fine. "align-self: start" opts each card out of that stretch, so it
 * always sizes to its own content instead of a shared, title-length-
 * sensitive row height.
 */
.blog-card { display: flow-root; align-self: start; }
.blog-card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--ii-space-s); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ii-ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.entry-meta { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ii-color-warm-grey); margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center; }
.entry-category { color: var(--ii-color-gold); }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--ii-space-s); font-size: 0.8125rem; color: var(--ii-color-warm-grey); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs__sep { margin-left: 0.4rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: var(--ii-space-s); margin-top: var(--ii-space-l); font-size: 0.8125rem; letter-spacing: 0.08em; }
.pagination .page-numbers { padding: 0.5em 0.9em; }
.pagination .page-numbers.current { border-bottom: 1px solid var(--ii-color-gold); }

/* Forms */
.form-field { margin-bottom: var(--ii-space-s); }
.form-field label { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--ii-color-warm-grey); }
.form-field input, .form-field textarea, .form-field select {
	width: 100%;
	padding: 0.85em 1em;
	background: var(--ii-color-white);
	border: 1px solid var(--ii-color-sand);
	transition: border-color var(--ii-transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--ii-color-gold); }
.form-honeypot { position: absolute; left: -9999px; }
.form-message { margin-top: var(--ii-space-s); padding: 1em; }
.form-message--success { background: #eaf3e8; color: #3a5d34; }
.form-message--error { background: #fbeaea; color: #7a2b2b; }

/* Social links */
.social-links { display: flex; gap: var(--ii-space-s); }
.social-links a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; transition: background var(--ii-transition), color var(--ii-transition); }
.social-links a:hover, .social-links a:focus-visible { background: var(--ii-color-gold); color: var(--ii-color-black); border-color: var(--ii-color-gold); }
.icon { width: 16px; height: 16px; display: inline-block; }

/* Footer */
.site-footer { background: var(--ii-color-charcoal); color: var(--ii-color-sand); padding-top: var(--ii-space-xl); }
.site-footer h4 { color: var(--ii-color-white); }
.site-footer a:hover { color: var(--ii-color-gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--ii-space-m); padding-bottom: var(--ii-space-l); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-block: var(--ii-space-m); font-size: 0.8125rem; flex-wrap: wrap; gap: var(--ii-space-s); }
.site-credit { font-size: 0.75rem; opacity: 0.7; }
.site-credit__link:hover { opacity: 1; }
.footer-legal-menu { display: flex; gap: var(--ii-space-s); flex-wrap: wrap; }

/* FAQ accordion */
.faq-item { border-top: 1px solid var(--ii-color-sand); }
.faq-item:last-child { border-bottom: 1px solid var(--ii-color-sand); }
.faq-item__question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--ii-space-s) 0;
	text-align: left;
	font-family: var(--ii-font-heading);
	font-size: 1.25rem;
}
.faq-item__icon { transition: transform var(--ii-transition); }
.faq-item[data-open="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ii-transition);
}
.faq-item[data-open="true"] .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer-inner { overflow: hidden; padding-bottom: var(--ii-space-s); color: var(--ii-color-warm-grey); }

/* ==========================================================================
   6. Blog & single content
   ========================================================================== */
.entry-content { max-width: var(--ii-container-narrow); margin-inline: auto; }
.entry-content > * + * { margin-top: var(--ii-space-s); }
.entry-content img { margin-block: var(--ii-space-s); }
.entry-content blockquote {
	font-family: var(--ii-font-heading);
	font-size: 1.5rem;
	font-style: italic;
	border-left: 2px solid var(--ii-color-gold);
	padding-left: var(--ii-space-m);
	margin: var(--ii-space-m) 0;
}
.entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ii-color-gold); }

/* Block-editor Buttons (and any hand-placed .btn) must never inherit the
   prose underline above — a .wp-block-button__link has higher-priority
   background/color rules but loses the text-decoration tie-break to the
   more specific ".entry-content a" selector, so without this override a
   button typed into a page's content looks correct in the editor canvas
   (which never loads .entry-content styles) but renders as an underlined
   link on the live site. */
.entry-content .wp-block-button__link,
.entry-content .btn { text-decoration: none; }

.entry-header { max-width: var(--ii-container-narrow); margin: 0 auto var(--ii-space-l); text-align: center; }
.entry-title { margin-bottom: var(--ii-space-xs); }

.entry-thumbnail { aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: var(--ii-space-l); }
.entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.entry-tags { margin-top: var(--ii-space-m); }

.author-box { display: flex; gap: var(--ii-space-s); align-items: center; border-top: 1px solid var(--ii-color-sand); padding-top: var(--ii-space-m); }
.author-box img { border-radius: 50%; }

.page-links { margin-top: var(--ii-space-m); display: flex; gap: 0.5rem; align-items: center; }
.page-links a { text-decoration: underline; }

.archive-description { margin-top: var(--ii-space-s); }

/* Comments */
.comments-title { margin-bottom: var(--ii-space-m); }
.comment-list .comment-body { padding-block: var(--ii-space-m); border-top: 1px solid var(--ii-color-sand); }
.comment-list .comment-author img { border-radius: 50%; float: left; margin-right: var(--ii-space-s); }
.comment-list .comment-metadata { font-size: 0.8125rem; color: var(--ii-color-warm-grey); }
.comment-form { margin-top: var(--ii-space-m); }
.comment-reply-title { margin-bottom: var(--ii-space-s); }

/* ==========================================================================
   7. Utilities & motion
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/*
 * Scroll-reveal fade-in. Content is visible by default — the hidden
 * starting state only switches on once main.js confirms (a) JS is
 * running and (b) the reveal-observer feature itself initialized, via
 * the ".js" class on <html>. This means a script error anywhere else on
 * the page, a blocked/failed script load, or JS being disabled can never
 * leave real content (buttons, forms, page copy) permanently invisible —
 * it just skips the animation and shows immediately, which is the
 * correct progressive-enhancement default for primary content.
 *
 * The page can already have painted a target as visible (default state)
 * before main.js gets a chance to run, so "[data-reveal-arming]" forces
 * the very first hide to happen with transitions off — otherwise the
 * browser animates that first change too, and a visitor sees content
 * flash in and then visibly fade back OUT before the real reveal ever
 * happens. main.js removes "arming" one frame after adding it, which is
 * what re-enables the transition for the real (hidden -> visible) reveal.
 */
.reveal {
	transition: opacity 800ms var(--ii-ease), transform 800ms var(--ii-ease);
}
.reveal[data-reveal-arming] {
	transition: none !important;
}
.js .reveal[data-reveal-armed] {
	opacity: 0;
	transform: translateY(24px);
}
.reveal.is-visible,
.js .reveal[data-reveal-armed].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   8. Responsive breakpoints
   ========================================================================== */
/*
 * The full desktop header (logo + all nav labels + the "Запишете час" CTA)
 * needs more width than it was previously given credit for — real
 * Cyrillic menu labels plus the CTA button routinely need close to
 * 1400px, so collapsing to the hamburger menu only below 860px left a
 * wide "danger zone" (roughly 861–1400px, i.e. most laptop screens)
 * where the nav crowded/overlapped the logo and CTA. The hamburger
 * breakpoint is now wide enough that the full nav only ever shows where
 * it demonstrably fits.
 */
@media (max-width: 1280px) {
	.nav-menu { display: none; }
	.menu-toggle { display: inline-flex; }

	.site-header { position: fixed; inset-inline: 0; }

	.mobile-nav {
		position: fixed;
		inset: 0;
		z-index: 99;
		background: var(--ii-color-ivory);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--ii-space-m);
		transform: translateY(-100%);
		transition: transform var(--ii-transition);
	}
	.mobile-nav.is-open { transform: translateY(0); }
	.mobile-nav__list { display: flex; flex-direction: column; align-items: center; gap: var(--ii-space-m); }
	.mobile-nav a { font-family: var(--ii-font-heading); font-size: 1.75rem; }

	/*
	 * The hamburger button's open/close behaviour is entirely JS-driven
	 * (main.js toggles ".is-open" on click) — with JavaScript disabled it
	 * would be a dead button and ".mobile-nav" would stay permanently
	 * off-screen, leaving no way at all to reach the site's navigation
	 * below this breakpoint. ".no-js" is only ever present on <html> when
	 * main.js truly never ran (see main.js's very first line), so this
	 * safely falls back to the plain, always-visible menu list instead.
	 */
	.no-js .nav-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.5rem;
	}
	.no-js .menu-toggle { display: none; }
	.no-js .site-header { position: static; height: auto; flex-wrap: wrap; row-gap: var(--ii-space-s); padding-block: var(--ii-space-s); }
}

@media (max-width: 1024px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.instagram-grid { grid-template-columns: repeat(3, 1fr); }
	.masonry { column-count: 2; }
}

@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.instagram-grid { grid-template-columns: repeat(2, 1fr); }
	.masonry { column-count: 1; }
	.hero { min-height: 100vh; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}