/* ==========================================================================
   Optic 2026 — design tokens (from client brief, verbatim)
   ========================================================================== */
:root {
	--bg-page: #f3f5f8;
	--text-main: #0D214C;
	--text-muted: #777;
	--radius-block: 46px;
	--radius-btn: 12px;
	--font-main: 'Manrope', sans-serif;

	--white: #ffffff;
	--card-bg: #ffffff;
	--border-soft: rgba(13, 33, 76, 0.08);
	--shadow-card: 0 12px 32px rgba(13, 33, 76, 0.08);
	--shadow-card-hover: 0 20px 48px rgba(13, 33, 76, 0.14);
	--blue-chip-bg: rgba(81, 152, 214, 0.12);
	--blue-chip-text: #3987C9;
}

.gradient-primary { background: linear-gradient(0.052turn, rgba(156,202,238,1) 0%, rgba(81,152,214,1) 100%); }
.gradient-primary-alt { background: linear-gradient(0.08turn, rgba(156,202,238,1) 0%, rgba(81,152,214,1) 50%, rgba(57,135,201,1) 100%); }
.gradient-btn-secondary { background: linear-gradient(0turn, rgba(156,202,238,0.16) 0%, rgba(156,202,238,0.16) 100%); }

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg-page);
	color: var(--text-main);
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: none; }
.icon { width: 1em; height: 1em; }
.icon--flip { transform: scaleX(-1); }

.container {
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 15px;
}

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

/* ==========================================================================
   Typography
   ========================================================================== */
h1, .h1 { font-size: clamp(1rem, 1.2rem + 1.4vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
h2, .h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--blue-chip-text);
	background: var(--blue-chip-bg);
	padding: 6px 14px; border-radius: 999px;
}
.muted { color: var(--text-muted); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head p { margin-top: 14px; color: var(--text-muted); font-size: 1.05rem; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 15px 28px;
	border-radius: var(--radius-btn);
	font-weight: 700; font-size: 0.95rem;
	border: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--text-main); color: var(--white); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(13,33,76,0.28); }
.btn-white { background: var(--white); color: var(--text-main); }
.btn-white:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
.btn-secondary { background-color: rgba(156,202,238,0.16); color: var(--text-main); }
.btn-secondary:hover { background-color: rgba(156,202,238,0.28); }
.btn-outline { border: 1.5px solid var(--border-soft); color: var(--text-main); background: transparent; }
.btn-outline:hover { border-color: var(--text-main); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	border-bottom: 1px solid var(--border-soft);
}
/* backdrop-filter lives on a pseudo-element, not .site-header itself — a
   filter/backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants, which broke the fixed, full-viewport mobile
   nav panel nested inside the header (it sized itself against the ~104px
   header box instead of the viewport). */
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(243,245,248,0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.site-header__row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 16px 15px;
}
.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo img { flex: none; width: 43px; height: 38px; }
.site-logo__text { display: flex; flex-direction: column; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.site-logo__text em { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.primary-nav { display: flex; align-items: center; gap: 4px; }
.primary-nav > ul { display: flex; align-items: center; gap: 4px; }
.primary-nav li { position: relative; }
.primary-nav a {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 16px; border-radius: var(--radius-btn);
	font-weight: 600; font-size: 0.92rem;
	transition: background .15s ease;
}
.primary-nav > ul > li > a:hover { background: rgba(13,33,76,0.06); }
.primary-nav .icon { width: 14px; height: 14px; opacity: .6; }

.primary-nav .sub-menu {
	display: none;
	position: absolute; top: calc(100% + 8px); left: 0;
	background: var(--white); border-radius: 20px;
	box-shadow: var(--shadow-card);
	padding: 10px; min-width: 280px;
	max-height: 70vh; overflow-y: auto;
}
/* Shown via JS (hover-intent with a small close delay), not raw :hover — a
   li's layout box only wraps its trigger link, not the absolutely-positioned
   dropdown below it, so pure CSS :hover drops the instant the cursor leaves
   the link on its way down to the menu. */
.primary-nav li.is-open > .sub-menu { display: block; }
.primary-nav .sub-menu a { padding: 10px 14px; font-weight: 500; border-radius: 10px; }
.primary-nav .sub-menu a:hover { background: var(--bg-page); }

/* Mobile-only accordion arrow next to a parent item — injected by JS since
   WP's default nav walker has no hook for extra per-item markup. Hidden on
   desktop, where hover-intent (above) drives the dropdown instead. */
.submenu-toggle { display: none; background: none; border: none; padding: 10px; flex: none; color: var(--text-main); }
.submenu-toggle .icon { width: 18px; height: 18px; }

.primary-nav__cta { display: none; }

.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.header-phone .icon { width: 18px; height: 18px; color: var(--blue-chip-text); }

.a11y-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 43px; height: 43px; flex: none;
	background: var(--bg-page); border: 1.5px solid var(--border-soft); border-radius: 50%;
	color: var(--text-main); transition: background .15s ease, border-color .15s ease;
}
.a11y-toggle:hover { border-color: var(--blue-chip-text); color: var(--blue-chip-text); }
.a11y-toggle .icon { width: 20px; height: 20px; }
.a11y-toggle[aria-pressed="true"] { background: var(--text-main); border-color: var(--text-main); color: var(--white); }

.nav-toggle { display: none; background: none; padding: 8px; border: 1.5px solid var(--border-soft); border-radius: 10px; }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; margin-bottom: -1px; }

/* Header narrows in stages as the viewport shrinks from desktop down to the
   hamburger breakpoint: tighten spacing first, then shrink the logo label,
   then switch to the mobile nav panel — instead of the row's content
   fighting for space and wrapping (the phone number splitting mid-digit). */
@media (max-width: 1290px) {
	.site-header__row { gap: 15px; }
	.header-cta .btn-primary { padding: 10px 20px; }
	.primary-nav a { padding: 10px 8px; }
}

@media (max-width: 1160px) {
	.site-logo__text { width: 160px; }
	.site-logo__text em { font-size: 0.5rem; }
}

@media (max-width: 1113px) {
	.site-logo__text { width: 110px; }
}

@media (max-width: 1063px) {
	/* display:block, not the inherited desktop display:flex row — .primary-nav
	   wraps a single <ul>, and as a row flex item with no flex-grow that <ul>
	   only shrink-wrapped to its content width instead of filling the panel,
	   which cascaded down through align-items:stretch to every <li>. */
	.primary-nav { display: block; position: fixed; inset: 0; top: 72px; background: var(--bg-page); padding: 10px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav > ul { flex-direction: column; align-items: stretch; padding-bottom: 60px; }
	/* flex-flow: wrap is load-bearing — without it, the link + arrow +
	   .sub-menu are three items in one unwrapped flex row, and the wide
	   submenu list gets pushed out to the right instead of dropping onto
	   its own line below the link. */
	.primary-nav li.menu-item-has-children { display: flex; align-items: flex-start; flex-flow: wrap; width: 100%; }
	.primary-nav li.menu-item-has-children > a { flex: 1; }
	.primary-nav .sub-menu { position: static; box-shadow: none; margin-left: 0px; width: 100%; margin-top: 5px; margin-bottom: 10px; }
	.submenu-toggle { display: flex; align-items: center; justify-content: center; }
	.nav-toggle { display: block; }
	.nav-toggle .icon { margin-bottom: -5px; }
	.site-logo__text { width: auto; }
}

@media (max-width: 690px) {
	.header-phone span { display: none; }
	.header-phone .icon { width: 26px; height: 26px; margin-bottom: -4px; }
}

@media (max-width: 550px) {
	.header-cta .btn-primary { display: none; }
	/* Compensates for the button hidden above — only shown here, where the
	   header's own "Записаться" disappears. */
	.primary-nav__cta { display: block; margin-top: 12px; }
	.primary-nav__cta .btn-primary { width: 100%; }
}

@media (max-width: 440px) {
	.site-logo { gap: 5px; }
	.site-logo img { width: 8vw; height: auto; }
	.site-logo__text { font-size: 4vw; }
	.site-logo__text em { font-size: 1.7vw; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 32px 0 72px; }
.hero__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
.hero__banner {
	border-radius: var(--radius-block);
	padding: 56px;
	color: var(--white);
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 40px;
	position: relative;
	overflow: hidden;
}
.hero__banner h1 { color: var(--white); max-width: 20ch; }
.hero__lede { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,0.88); font-size: 1.05rem; }
.hero__eyebrow { background: rgba(255,255,255,0.18); color: var(--white); }

.hero__progress { margin-top: 8px; }
.hero__progress-label { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.hero__progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; }
.hero__progress-fill { height: 100%; border-radius: 999px; background: var(--white); }

.hero__avatars { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hero__avatars-stack { display: flex; }
.hero__avatars-stack img {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
	border: 3px solid rgba(255,255,255,0.9);
	margin-left: -14px;
}
.hero__avatars-stack img:first-child { margin-left: 0; }
.hero__avatars-text { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.9); }

.hero__side {
	border-radius: var(--radius-block);
	background: var(--white);
	padding: 40px 36px;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 28px;
	box-shadow: var(--shadow-card);
	background-image: url(/wp-content/uploads/2026/08/hero__side.webp);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #fbfbfb;
}
.hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.hero__stat b { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
.hero__stat span { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__banner, .hero__side { padding: 36px 28px; border-radius: 32px; }
	.hero__side { min-height: 80vw; background-size: 60vw; }
}

@media (max-width: 595px) {
	.hero__stats { grid-template-columns: 1fr; max-width: 50%; }
	.hero__side { background-size: 90vw; background-position: 30vw bottom; }
}

@media (max-width: 460px) {
	.hero__avatars { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Services grid
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card {
	background: var(--card-bg);
	border-radius: 28px;
	padding: 32px 28px;
	box-shadow: var(--shadow-card);
	transition: box-shadow .2s ease, transform .2s ease;
	display: flex; flex-direction: column; gap: 16px;
	height: 100%;
}
.service-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.service-card__icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--blue-chip-bg); color: var(--blue-chip-text);
	display: flex; align-items: center; justify-content: center;
	flex: none;
}
.service-card__icon .icon { width: 26px; height: 26px; }
.service-card p { color: var(--text-muted); font-size: 0.94rem; }
.service-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; color: var(--blue-chip-text); }
.service-card__link .icon { width: 16px; height: 16px; }

@media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   About section (photo + plaque, feature cards)
   ========================================================================== */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.about__media { position: relative; border-radius: var(--radius-block); overflow: hidden; }
.about__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

.single-doctor .about__media { position: sticky; top: 100px; }
@media (max-width: 900px) {
	.single-doctor .about__media { position: relative; top: auto; }
}
.about__plaque {
	position: absolute; left: 20px; right: 20px; bottom: 20px;
	background: rgba(13,33,76,0.55);
	backdrop-filter: blur(6px);
	border-radius: 24px;
	padding: 20px 24px;
	color: var(--white);
	display: flex; align-items: center; gap: 16px;
}
.about__plaque b { font-size: 1.6rem; font-weight: 800; }
.about__plaque span { font-size: 0.82rem; color: rgba(255,255,255,0.85); }

.about__features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.feature-card { display: flex; flex-direction: column; gap: 12px; }
.feature-card__icon {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--blue-chip-bg); color: var(--blue-chip-text);
	display: flex; align-items: center; justify-content: center;
}
.feature-card__icon .icon { width: 22px; height: 22px; }
.feature-card p { color: var(--text-muted); font-size: 0.9rem; }

@media (max-width: 900px) {
	.about { grid-template-columns: 1fr; }
	.about__features { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Timeline banner (full-width gradient + capsule dates)
   ========================================================================== */
.timeline-banner {
	border-radius: var(--radius-block);
	padding: 64px 56px;
	color: var(--white);
	text-align: center;
}
.timeline-banner h2 { color: var(--white); max-width: 26ch; margin: 0 auto; }
.timeline-banner p { color: rgba(255,255,255,0.85); max-width: 56ch; margin: 16px auto 0; }
.timeline-track {
	margin-top: 48px;
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 12px; position: relative;
}
.timeline-track::before {
	content: ''; position: absolute; top: 15px; left: 5%; right: 5%; height: 2px;
	background: rgba(255,255,255,0.3);
}
.timeline-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.timeline-step__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--blue-chip-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; z-index: 1; }
.timeline-step__capsule {
	background: rgba(255,255,255,0.16);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.78rem; font-weight: 700;
}
.timeline-step__label { font-size: 0.88rem; font-weight: 600; max-width: 16ch; }

@media (max-width: 900px) {
	.timeline-banner { padding: 44px 28px; border-radius: 32px; }
	.timeline-track { flex-direction: column; align-items: stretch; gap: 28px; }
	.timeline-track::before { display: none; }
	.timeline-step { flex-direction: row; text-align: left; }
}

/* ==========================================================================
   Doctors
   ========================================================================== */
.doctors-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.doctor-card { background: var(--card-bg); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.doctor-card__media { aspect-ratio: 3/4; overflow: hidden; background: var(--blue-chip-bg); }
.doctor-card__media img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card__body { padding: 18px 20px 22px; }
.doctor-card__body h3 { font-size: 1.02rem; }
.doctor-card__body p { margin-top: 6px; color: var(--text-muted); font-size: 0.84rem; }

@media (max-width: 1100px) { .doctors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .doctors-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.review-badge {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 16px; padding: 10px 16px;
	background: var(--white); border-radius: 999px; box-shadow: var(--shadow-card);
	font-size: 0.86rem; font-weight: 700; color: var(--text-main);
}
.review-badge svg { flex: none; }
.review-badge__sep { color: var(--border-soft); }
.review-badge__rating { color: var(--text-muted); font-weight: 600; }
.review-badge__rating b { color: var(--text-main); font-weight: 800; }

@media (max-width: 550px) {
	.about__features { grid-template-columns: 1fr; }
	.timeline-step { flex-flow: wrap; }
	.timeline-step__label { max-width: 100%; }
	.doctors-grid { grid-template-columns: 1fr; }
	.review-badge { flex-flow: wrap; padding: 15px; border-radius: 16px; }
	:root { --radius-block: 26px; }
}

.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.testimonial-card { background: var(--card-bg); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-card); }
.testimonial-card__quote { width: 32px; height: 32px; color: var(--blue-chip-text); margin-bottom: 16px; }
.testimonial-card p { color: var(--text-main); font-size: 0.98rem; line-height: 1.65; }
.testimonial-card__author { margin-top: 20px; font-weight: 700; font-size: 0.9rem; color: var(--text-muted); }

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

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq-item { background: var(--card-bg); border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
.faq-item__q {
	width: 100%; text-align: left; background: none; border: none;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 26px; font-weight: 700; font-size: 1rem; color: var(--text-main);
}
.faq-item__q .icon { width: 18px; height: 18px; flex: none; transition: transform .2s ease; color: var(--blue-chip-text); }
.faq-item[open] .faq-item__q .icon { transform: rotate(180deg); }
.faq-item__a { padding: 0 26px 22px; color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; }

/* ==========================================================================
   Sponsors strip
   ========================================================================== */
.sponsors-strip {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 24px; padding: 32px 40px;
	background: var(--white); border-radius: var(--radius-block);
	box-shadow: var(--shadow-card);
}
.sponsors-strip img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .2s ease, filter .2s ease; }
.sponsors-strip a:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   Blog teaser
   ========================================================================== */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { background: var(--card-bg); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--blue-chip-bg); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__cat { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-chip-text); }
.post-card__body h3 { font-size: 1.08rem; }
.post-card__body p { color: var(--text-muted); font-size: 0.88rem; }
.post-card__date { margin-top: auto; font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact / map section
   ========================================================================== */
.contact-block { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.contact-card {
	border-radius: var(--radius-block);
	padding: 48px;
	color: var(--white);
	display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.contact-card__list { display: flex; flex-direction: column; gap: 18px; }
.contact-card__item { display: flex; align-items: flex-start; gap: 14px; }
.contact-card__item .icon { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.contact-card__item b { display: block; font-size: 1.02rem; }
.contact-card__item span { font-size: 0.86rem; color: rgba(255,255,255,0.8); }
.contact-map { border-radius: var(--radius-block); overflow: hidden; min-height: 320px; box-shadow: var(--shadow-card); background: var(--blue-chip-bg); }
.contact-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

@media (max-width: 900px) { .contact-block { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
	.contact-card { padding: 20px; }
	.sponsors-strip { padding: 20px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--text-main); color: rgba(255,255,255,0.82); padding: 64px 0 32px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.88rem; opacity: .82; transition: opacity .15s ease; }
.footer-col a:hover { opacity: 1; }
.footer-logo { font-weight: 800; font-size: 1.2rem; color: var(--white); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; opacity: .65; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Generic content page (single/page fallback)
   ========================================================================== */
.page-hero { padding: 48px 0 8px; }
.page-hero h1 { max-width: 34ch; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumbs a:hover { color: var(--text-main); }
.entry-content { max-width: 780px; font-size: 1.02rem; line-height: 1.75; }
.entry-content h2, .entry-content h3 { margin-top: 2em; margin-bottom: 0.6em; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content img { border-radius: 24px; margin: 1.5em 0; }

.entry-content ul, .entry-content ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.entry-content ul li, .entry-content ol li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.entry-content ul li::before {
	content: ''; position: absolute; left: 4px; top: 0.65em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--blue-chip-text);
}
.entry-content ol { counter-reset: optic-ol; }
.entry-content ol li::before {
	counter-increment: optic-ol; content: counter(optic-ol);
	position: absolute; left: 0; top: 0;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--blue-chip-bg); color: var(--blue-chip-text);
	font-size: 0.72rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.entry-content li > ul, .entry-content li > ol { margin-top: 10px; }

.entry-content a { color: var(--blue-chip-text); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--text-main); }
.entry-content a.btn,
.entry-content a.btn:hover { text-decoration: none; color: inherit; }

/* WP core "Buttons" block, used e.g. in doctor bios ("Записаться к ...") */
.entry-content .wp-block-buttons { margin: 0 0 1.5em; }
.entry-content .wp-block-button__link,
.entry-content a.wp-element-button {
	display: inline-flex; align-items: center;
	background: var(--text-main); color: var(--white) !important;
	padding: 15px 28px; border-radius: var(--radius-btn);
	font-weight: 700; font-size: 0.95rem;
	text-decoration: none !important;
	transition: box-shadow .18s ease, background .18s ease;
}
.entry-content .wp-block-button__link:hover,
.entry-content a.wp-element-button:hover {
	background: var(--text-main); box-shadow: 0 10px 24px rgba(13,33,76,0.28);
}

/* post-carousel plugin's "Читать далее" buttons — plugin ships its own inline
   <style> with an outdated look; override to match the design system. */
.sp-pcp-readmore .pcp-readmore-link,
a.pcp-readmore-link {
	display: inline-flex !important; align-items: center;
	background: var(--text-main) !important; color: var(--white) !important;
	border: none !important; border-radius: var(--radius-btn) !important;
	padding: 12px 22px !important; font-weight: 700 !important; font-size: 0.85rem !important;
	text-transform: none !important; letter-spacing: normal !important;
	text-decoration: none !important;
	transition: box-shadow .18s ease !important;
}
.sp-pcp-readmore .pcp-readmore-link:hover,
a.pcp-readmore-link:hover {
	background: var(--text-main) !important; color: var(--white) !important;
	box-shadow: 0 10px 24px rgba(13,33,76,0.28);
}
.sps-list-layout .sp-pcp-post.left-thumb .pcp-post-thumb-wrapper { width: 100%; }
.sps-list-layout .sp-pcp-post.left-thumb .pcp-post-thumb-wrapper img { width: 100%; }

/* A wide table (many columns, long cell text) forces its own intrinsic
   width past the viewport, and since the table itself has no wrapper to
   scroll within, that overflow was pushing the whole page into horizontal
   scroll. .wp-block-table is the actual wrapper Gutenberg renders around
   every core table block — scope the scroll to it instead. */
.wp-block-table { max-width: 100%; overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.entry-content th, .entry-content td { border: 1px solid var(--border-soft); padding: 10px 14px; text-align: left; }

/* On narrow screens, forcing the table to width:100% just crushes every
   column and wraps long cell text into a tall, unreadable stack — the
   wrapper's overflow-x:auto above never even kicks in, since the table
   never gets wider than the wrapper. Give each column room to stay
   readable instead and let the table scroll sideways within the wrapper. */
@media (max-width: 640px) {
	.entry-content table { width: auto; min-width: 100%; }
	.entry-content th, .entry-content td { min-width: 220px; }
}

/* The plugin's actual front-end markup (.wptb-table-wrapper) is a different
   wrapper than the .wptb-container-legacy one styled below (that one only
   matches its editor-preview markup) — it never had its own overflow
   containment, so a table wider than its column (plugin sets a per-table
   min-width inline based on column count) pushed the whole page into
   horizontal scroll instead of scrolling within itself. */
.entry-content .wptb-table-wrapper { overflow-x: auto; }

/* WP Table Builder price tables — the plugin bakes every color/border/padding
   choice into inline styles per cell, so overriding needs !important. Gives
   every table a consistent modern card look instead of the old per-table
   ad-hoc grey/blue borders. */
.entry-content .wptb-container-legacy {
	margin: 1.8em 0; border-radius: 24px;
	box-shadow: var(--shadow-card) !important; background: var(--white);
	border: none !important; outline: none !important;
	overflow-x: auto; overflow-y: hidden;
}
.entry-content .wptb-preview-table {
	border: none !important; outline: none !important;
	border-spacing: 0 !important;
	table-layout: auto !important; width: 100% !important; min-width: 100% !important;
}
.entry-content .wptb-preview-table .wptb-row {
	background: var(--white) !important;
	border: none !important;
	border-bottom: 1px solid var(--border-soft) !important;
}
.entry-content .wptb-preview-table .wptb-row:first-child {
	background: var(--text-main) !important;
}
.entry-content .wptb-preview-table .wptb-row:nth-child(even):not(:first-child) {
	background: var(--bg-page) !important;
}
.entry-content .wptb-preview-table .wptb-row:last-child { border-bottom: none !important; }
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-cell {
	border: none !important; outline: none !important; box-shadow: none !important;
	border-radius: 0 !important;
	padding: 16px 20px !important;
	width: auto !important; min-width: 0 !important; max-width: none !important;
	white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important;
}
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-row:first-child .wptb-cell {
	white-space: nowrap !important;
}
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-text-container,
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-text-container p,
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-text-container strong {
	color: var(--text-main); font-size: 0.94rem !important;
	white-space: inherit !important; overflow-wrap: normal !important; word-break: normal !important;
}
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-row:first-child .wptb-text-container,
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-row:first-child .wptb-text-container p,
.entry-content .wptb-container-legacy .wptb-preview-table .wptb-row:first-child .wptb-text-container strong {
	color: var(--white) !important;
}
.entry-content .wptb-text-container p { margin: 0; }
.discount-card-form { max-width: 480px; }
.discount-card-form__row { display: flex; gap: 10px; margin-top: 14px; }
.discount-card-form__row input { flex: 1; }
.discount-card-form__row button { flex: none; }
.check-discount-card-notice { display: none; margin-top: 16px; }
.check-discount-card-notice p {
	margin: 0; padding: 16px 20px; border-radius: 16px;
	background: var(--blue-chip-bg); display: inline-block;
}
.check-discount-card-notice h2 { font-size: 1.05rem; margin: 0 0 8px; }

.entry-content blockquote {
	margin: 1.6em 0; padding: 4px 28px; border-left: 3px solid var(--blue-chip-text);
	color: var(--text-muted); font-style: normal; font-size: 1.05rem;
}
.has-vivid-red-background-color { padding: 20px; }

.content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
/* Grid items default to min-width:auto, i.e. "never shrink narrower than
   my widest content" — a wide table (or any wide content) inside the
   article column was forcing that whole grid track wider instead of
   scrolling within its own wrapper. */
.content-layout > * { min-width: 0; }
@media (max-width: 900px) { .content-layout { grid-template-columns: 1fr; } }
/* ==========================================================================
   Contact page (page-contact.php)
   ========================================================================== */
.contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-page__quick { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.contact-page__quick-item {
	display: flex; align-items: center; gap: 14px;
	background: var(--white); border-radius: 20px; padding: 16px 20px;
	box-shadow: var(--shadow-card);
}
.contact-page__quick-item .icon { width: 22px; height: 22px; color: var(--blue-chip-text); flex: none; }
.contact-page__quick-item b { display: block; font-size: 0.98rem; }
.contact-page__quick-item span { font-size: 0.8rem; color: var(--text-muted); }
.contact-page__content .has-text-align-center { text-align: left !important; }
.contact-page__content .wp-block-image { display: inline-block; margin: 0 10px 10px 0; }
.contact-page__content .wp-block-image img {
	width: 56px !important; height: 56px !important; object-fit: contain;
	border-radius: 16px; margin: 0; background: var(--white); padding: 10px;
	box-shadow: var(--shadow-card);
}
.contact-page__map {
	position: sticky; top: 96px;
	border-radius: var(--radius-block); overflow: hidden; min-height: 480px;
	box-shadow: var(--shadow-card); background: var(--blue-chip-bg);
}
.contact-page__map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

@media (max-width: 900px) {
	.contact-page { grid-template-columns: 1fr; }
	.contact-page__map { position: static; min-height: 320px; }
	.contact-page__map iframe { min-height: 320px; }
}

.widget { background: var(--white); border-radius: 24px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.widget-title { font-size: 0.95rem; margin-bottom: 14px; }
.widget ul { display: flex; flex-direction: column; gap: 10px; }
.widget ul li { font-size: 0.9rem; }
.widget ul a:hover { color: var(--blue-chip-text); }
.widget select { width: 100%; }

/* ==========================================================================
   Form controls — sane defaults for search/select/inputs anywhere on the site
   ========================================================================== */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], input[type="password"], textarea, select {
	font-family: var(--font-main);
	font-size: 0.94rem;
	color: var(--text-main);
	background: var(--white);
	border: 1.5px solid var(--border-soft);
	border-radius: var(--radius-btn);
	padding: 12px 16px;
	width: 100%;
	transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--blue-chip-text);
}
select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
}
/* ==========================================================================
   WPForms — the plugin ships its own "modern" theme CSS that doesn't match
   the site (default blue/grey, system font, English datepicker locale is a
   separate JS fix, see main.js). Scoped to .wpforms-container with !important
   since WPForms' own stylesheet loads with its own specificity/order.
   ========================================================================== */
.wpforms-container * { font-family: var(--font-main) !important; }
.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
	color: var(--text-main) !important; font-weight: 700 !important; font-size: 0.94rem !important;
}
.wpforms-container .wpforms-field-description { color: var(--text-muted) !important; }
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container input[type="password"],
.wpforms-container textarea,
.wpforms-container select,
.wpforms-container .wpforms-datepicker {
	font-size: 0.94rem !important;
	line-height: 1.2 !important;
	color: var(--text-main) !important;
	background: var(--white) !important;
	border: 1.5px solid var(--border-soft) !important;
	border-radius: var(--radius-btn) !important;
	padding: 10px 16px !important;
	box-shadow: none !important;
	transition: border-color .15s ease;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	outline: none !important;
	border-color: var(--blue-chip-text) !important;
	box-shadow: none !important;
}
.wpforms-container select {
	appearance: none !important; -webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px !important;
	padding-right: 40px !important;
}
/* icon-choice checkboxes/radios (agreement checkbox etc.) — the real native
   input needs to stay reliably hidden so only WPForms' own icon UI shows,
   instead of both rendering on top of each other. */
.wpforms-container .wpforms-field-checkbox .wpforms-icon-choices .wpforms-icon-choices-item input[type="checkbox"],
.wpforms-container .wpforms-field-checkbox .wpforms-icon-choices .wpforms-icon-choices-item input[type="radio"],
.wpforms-container .wpforms-field-radio .wpforms-icon-choices .wpforms-icon-choices-item input[type="checkbox"],
.wpforms-container .wpforms-field-radio .wpforms-icon-choices .wpforms-icon-choices-item input[type="radio"],
.wpforms-container .wpforms-icon-choices-item input.wpforms-screen-reader-element {
	position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important;
	padding: 0 !important; margin: -1px !important; overflow: hidden !important;
	clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background: var(--text-main) !important; color: var(--white) !important;
	border: none !important; border-radius: var(--radius-btn) !important;
	padding: 14px 28px !important; font-weight: 700 !important; font-size: 0.95rem !important;
	box-shadow: none !important; transition: box-shadow .18s ease;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	box-shadow: 0 10px 24px rgba(13,33,76,0.28) !important;
}

input[type="submit"], .search-submit {
	width: auto;
	background: var(--text-main);
	color: var(--white);
	border: none;
	border-radius: var(--radius-btn);
	padding: 12px 22px;
	font-weight: 700;
	font-size: 0.9rem;
}

.search-form { display: flex; gap: 10px; }
.search-form .search-field { flex: 1; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination, .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
}
.page-numbers { list-style: none; }
a.page-numbers, span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 8px;
	border-radius: var(--radius-btn);
	background: var(--white); color: var(--text-main);
	font-weight: 700; font-size: 0.88rem;
	box-shadow: var(--shadow-card);
}
a.page-numbers:hover { color: var(--blue-chip-text); }
span.page-numbers.current { background: var(--text-main); color: var(--white); box-shadow: none; }
.page-numbers svg { width: 16px; height: 16px; }

/* ==========================================================================
   Accessible mode ("Версия для слабовидящих") — toggled via a class on
   <html> (see header.php inline script + main.js), no separate stylesheet,
   no extra request. Larger type, hard contrast, always-underlined links,
   no motion/decorative gradients — the usual baseline for this feature.
   ========================================================================== */
html.a11y-mode { font-size: 118%; }
html.a11y-mode body { line-height: 1.8; }
html.a11y-mode, html.a11y-mode body { background: #ffffff !important; }
html.a11y-mode * {
	color: #000000 !important;
	background-image: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	animation: none !important;
	transition: none !important;
}
html.a11y-mode .site-header,
html.a11y-mode .widget,
html.a11y-mode .service-card,
html.a11y-mode .doctor-card,
html.a11y-mode .testimonial-card,
html.a11y-mode .post-card,
html.a11y-mode .faq-item,
html.a11y-mode .hero__side,
html.a11y-mode .contact-page__quick-item,
html.a11y-mode .site-footer {
	background: #ffffff !important;
	border: 2px solid #000000 !important;
}
html.a11y-mode .footer-col a,
html.a11y-mode .footer-bottom,
html.a11y-mode .footer-logo {
	opacity: 1 !important;
}
html.a11y-mode .footer-bottom {
	border-top-color: #000000 !important;
}
html.a11y-mode a { color: #0000EE !important; text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-mode a:visited { color: #551A8B !important; }
html.a11y-mode .btn,
html.a11y-mode .a11y-toggle,
html.a11y-mode .nav-toggle,
html.a11y-mode .hero__banner,
html.a11y-mode .timeline-banner,
html.a11y-mode .contact-card,
html.a11y-mode .gradient-primary,
html.a11y-mode .gradient-primary-alt {
	background: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #000000 !important;
}
html.a11y-mode .btn *, html.a11y-mode .a11y-toggle *,
html.a11y-mode .hero__banner *, html.a11y-mode .timeline-banner *, html.a11y-mode .contact-card * {
	color: #ffffff !important;
}
html.a11y-mode a.btn { text-decoration: none !important; }
html.a11y-mode h1, html.a11y-mode h2, html.a11y-mode h3 { color: #000000 !important; }
html.a11y-mode img:not(.site-logo img) { filter: grayscale(1) contrast(1.1); }
html.a11y-mode .icon { color: #000000 !important; }
html.a11y-mode .btn .icon, html.a11y-mode .a11y-toggle .icon,
html.a11y-mode .hero__banner .icon, html.a11y-mode .timeline-banner .icon, html.a11y-mode .contact-card .icon {
	color: #ffffff !important;
}