/*
 * Reyting — Народный рейтинг. Site chrome and premium details.
 * Palette & type scale come from theme.json; this file styles the header,
 * footer, hero, cards, buttons and blends the PeopleRank plugin into the
 * purple identity. Colours reference theme.json presets (--wp--preset--*).
 */

:root {
	--rey-ink: var(--wp--preset--color--contrast, #171320);
	--rey-muted: var(--wp--preset--color--muted, #6b6577);
	--rey-line: var(--wp--preset--color--line, #e7e3f0);
	--rey-primary: var(--wp--preset--color--primary, #6d28d9);
	--rey-primary-strong: var(--wp--preset--color--primary-strong, #591fb0);
	--rey-primary-soft: var(--wp--preset--color--primary-soft, #ede9fe);
	--rey-dark: var(--wp--preset--color--dark, #1c1526);
	--rey-gold: var(--wp--preset--color--gold, #c8a24a);

	/* One magnifier used everywhere, drawn so the handle meets the circle
	   cleanly. Applied as a mask, so it takes whatever colour is set on it. */
	--rey-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.3 16.3 4.2 4.2'/%3E%3C/svg%3E");

	/* Layered, low-opacity elevation — never a flat drop shadow. */
	--rey-shadow-sm: 0 1px 2px rgba(23, 19, 32, .04), 0 2px 6px rgba(23, 19, 32, .04);
	--rey-shadow-md: 0 2px 6px rgba(23, 19, 32, .05), 0 12px 28px rgba(23, 19, 32, .09);
	--rey-shadow-lg: 0 8px 20px rgba(76, 29, 149, .10), 0 28px 64px rgba(23, 19, 32, .16);
}

/* ---- Root polish -------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--wp--preset--color--base, #fff);
	/* Repaint the plugin's accent in the theme's purple everywhere it renders. */
	--pr-accent: var(--rey-primary);
}

/* Block themes insert the global block gap between every top-level block, which
   renders as a white band under the header and above the footer. Header, main
   and footer are chrome that owns its own padding — they must sit flush. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* Same reason: the first/last block inside main must not add an outer gap on
   top of the padding the template already sets. */
.rey-main > :first-child { margin-block-start: 0; }
.rey-main > :last-child { margin-block-end: 0; }

/* Sections own their vertical rhythm. WordPress otherwise adds its global block
   gap between every top-level child, which stacks on top of each section's own
   padding and makes the spacing uneven down the page. Zeroing the gap here
   leaves exactly one source of truth: the section padding below. */
.rey-home > * { margin-block: 0; }
.rey-main > .alignfull { margin-block: 0; }

/* Keyboard focus: a visible 2px ring everywhere, gold on the dark chrome so it
   stays visible against the deep purple. */
:focus-visible {
	outline: 2px solid var(--rey-primary);
	outline-offset: 2px;
	border-radius: 3px;
}
.rey-header :focus-visible,
.rey-hero :focus-visible,
.rey-author-hero :focus-visible,
.rey-footer :focus-visible { outline-color: var(--rey-gold); }

/* Skip link — first focusable element, visible only when focused. */
.rey-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .75rem 1.25rem;
	background: #fff;
	color: var(--rey-primary);
	font-weight: 600;
	border-radius: 0 0 10px 0;
}
.rey-skip:focus {
	left: 0;
	outline: 2px solid var(--rey-primary);
	outline-offset: -2px;
}

/* Display headings get optical tightening; body copy wraps politely. */
:where(h1, h2) {
	text-wrap: balance;
	letter-spacing: -.02em;
	font-optical-sizing: auto;
}
:where(h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

.rey-lead {
	color: var(--rey-muted);
	font-size: 1.125rem;
	line-height: 1.6;
}

/* Small uppercase label above section headings. */
.rey-kicker {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--rey-primary);
	margin: 0 0 .5rem;
}
.rey-section-head .rey-lead { margin-top: .6rem; }
.rey-section-head :where(h2) { margin: 0; }

/* theme.json underlines every link on hover. That is right for body copy, but
   chrome links (nav, brand, cards, footer, buttons) carry their own affordance —
   without this reset the navigation shows two underlines at once. */
.rey-header a,
.rey-header a:hover,
.rey-footer a,
.rey-footer a:hover,
.rey-card a,
.rey-card a:hover,
.rey-authorcard-name,
.rey-authorcard-name:hover,
.rey-stat a,
.wp-block-button__link,
.wp-block-button__link:hover {
	text-decoration: none;
}
/* Footer list links keep a hover underline — they sit in a text block where an
   underline is the expected cue, but only one. */
.rey-footer .rey-footer-list a:hover { text-decoration: underline; }

/* Content links: refined underline, never a default browser one. */
.rey-main :where(p, li) a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, var(--rey-primary) 35%, transparent);
	transition: text-decoration-color .15s ease, color .15s ease;
}
.rey-main :where(p, li) a:hover { text-decoration-color: var(--rey-primary); }

/* Images carry a hairline edge for consistent depth (pure black, never tinted). */
.rey-main img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }

/* ---- Header ------------------------------------------------------------- */
.rey-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-top: .9rem;
	padding-bottom: .9rem;
	background: rgba(18, 13, 26, .88);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.rey-header,
.rey-header a { color: #fff; }
.rey-brand { gap: .65rem; flex-wrap: nowrap; }
.rey-header .wp-block-site-title { margin: 0; }
.rey-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	letter-spacing: -.015em;
	text-decoration: none;
	/* The brand must never wrap to a second line — it reads as broken chrome. */
	white-space: nowrap;
}
.rey-header .wp-block-site-logo img { border-radius: 9px; }

/* Keep the bar on one row only where there is room for it. Below the block's
   overlay breakpoint the navigation collapses to its own hamburger, so forcing
   nowrap there would push the menu off-canvas.
   Specificity beats the block layout's generated flex rules. */
/* The navigation block makes the inner <ul> the flex container, so the gap has
   to land there — setting it on the <nav> alone leaves the items touching. */
.rey-header .rey-nav,
.rey-header .rey-nav .wp-block-navigation__container {
	gap: clamp(0.9rem, 2.2vw, 1.9rem);
}
@media (min-width: 782px) {
	.rey-header .rey-nav,
	.rey-header .rey-nav .wp-block-navigation__container { flex-wrap: nowrap; }
}
/* Between the overlay breakpoint and the desktop bar the brand and the menu
   cannot share one row. Give the menu its own centred row so the wrap reads as
   a deliberate second tier instead of an overflow. */
@media (max-width: 781px) {
	.rey-header .rey-nav { width: 100%; }
	.rey-header .rey-nav .wp-block-navigation__container { justify-content: center; }
}
.rey-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, .8);
	font-weight: 500;
	font-size: .98rem;
	/* Vertical padding lifts the target to a comfortable 40px+ hit area. */
	padding: 11px 2px;
	position: relative;
	white-space: nowrap;
	transition: color .15s ease;
}
.rey-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 1.5px;
	background: var(--rey-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .18s cubic-bezier(.2, 0, 0, 1);
}
.rey-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.rey-nav .current-menu-item .wp-block-navigation-item__content { color: #fff; }
.rey-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.rey-nav .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }
.rey-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--rey-dark); }
.rey-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; font-size: 1.15rem; }

/* ---- Hero --------------------------------------------------------------- */
.rey-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding-top: clamp(3.5rem, 8vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	background:
		radial-gradient(120% 100% at 50% 0%, #3b1d6e 0%, #241040 55%, #150c24 100%);
}
/* Fine grid + gold glow: depth without noise. */
.rey-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
}
.rey-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(46% 40% at 50% 108%, rgba(200, 162, 74, .22), transparent 70%);
	pointer-events: none;
}
.rey-hero :where(h1, p) { color: #fff; }

/* Eyebrow framed by two hairline rules — a quiet editorial signal. */
.rey-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	text-transform: uppercase;
	letter-spacing: .26em;
	font-size: .72rem;
	font-weight: 600;
	color: var(--rey-gold);
	margin: 0 0 1.1rem;
}
.rey-eyebrow::before,
.rey-eyebrow::after {
	content: "";
	width: clamp(24px, 6vw, 54px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(200, 162, 74, .75));
}
.rey-eyebrow::after { background: linear-gradient(90deg, rgba(200, 162, 74, .75), transparent); }

.rey-hero-title {
	max-width: 22ch;
	margin-inline: auto;
	font-size: clamp(2.5rem, 6.2vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -.03em;
}
.rey-hero-sub {
	max-width: 46ch;
	margin: 1.15rem auto 0;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}
.rey-hero-cta { margin-top: 2rem; gap: .8rem; }

/* Trust figures — the detail that makes a rating site read as authoritative. */
.rey-stats {
	gap: clamp(1.5rem, 6vw, 4.5rem);
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: 1.9rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.rey-stat { text-align: center; }
.rey-stat-n {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.rey-stat-l {
	margin: .45rem 0 0;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .55);
}

/* ---- Buttons ------------------------------------------------------------ */
.wp-block-button__link {
	box-shadow: 0 1px 2px rgba(23, 19, 32, .1);
	transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease, color .15s ease, border-color .15s ease;
}
.wp-block-button__link:active { transform: scale(.96); }

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--rey-primary);
	border: 1.5px solid currentColor;
	box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--rey-primary);
	color: #fff;
	border-color: var(--rey-primary);
}

.rey-btn-light .wp-block-button__link {
	background: #fff;
	color: #1a1226;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 10px 24px rgba(0, 0, 0, .16);
}
.rey-btn-light .wp-block-button__link:hover { background: var(--rey-primary-soft); color: var(--rey-primary-strong); }

.rey-btn-ghost.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .38);
}
.rey-btn-ghost.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .8);
}

/* ---- Cards (no imagery — typography and numerals carry the design) ------ */
.wp-block-query .rey-cards {
	gap: 1.5rem;
	counter-reset: reycard;
}
.rey-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18px;
	padding: 1.6rem 1.5rem 1.35rem;
	overflow: hidden;
	box-shadow: var(--rey-shadow-sm), 0 0 0 1px var(--rey-line);
	transition: transform .2s cubic-bezier(.2, 0, 0, 1), box-shadow .2s ease;
	height: 100%;
	counter-increment: reycard;
}
.rey-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--rey-shadow-md), 0 0 0 1px color-mix(in srgb, var(--rey-primary) 32%, var(--rey-line));
}

/* Oversized editorial numeral, set in the serif — the visual anchor that
   replaces the image. Decorative only, so it is hidden from assistive tech. */
.rey-card::before {
	content: counter(reycard, decimal-leading-zero);
	position: absolute;
	top: .55rem;
	right: 1.1rem;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--rey-primary);
	opacity: .09;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	transition: opacity .2s ease, color .2s ease;
}
.rey-card:hover::before { opacity: .16; }

/* Gold hairline reveals on hover — restrained, never decorative clutter. */
.rey-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--rey-primary), var(--rey-gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s cubic-bezier(.2, 0, 0, 1);
	z-index: 2;
}
.rey-card:hover::after { transform: scaleX(1); }

.rey-card-eyebrow {
	margin: 0 0 .6rem;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--rey-primary);
}
.rey-card .wp-block-post-title {
	margin: 0 0 .5rem;
	font-size: 1.32rem;
	line-height: 1.24;
	letter-spacing: -.02em;
	/* Keep clear of the decorative numeral in the top-right corner. */
	padding-inline-end: 2.5rem;
}
.rey-card .wp-block-post-title a {
	color: var(--rey-ink);
	text-decoration: none;
	transition: color .15s ease;
}
/* The title link covers the whole card, so the entire surface is clickable
   while the accessible name and keyboard focus stay on the real link. */
.rey-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.rey-card:hover .wp-block-post-title a { color: var(--rey-primary); }
.rey-card:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--rey-primary);
	outline-offset: 2px;
}
.rey-card .wp-block-post-title a:focus-visible { outline: none; }
.rey-card .wp-block-post-excerpt {
	color: var(--rey-muted);
	font-size: .95rem;
	line-height: 1.58;
	margin: 0;
}
.rey-card .wp-block-post-excerpt__more-text { display: none; }

/* Footer affordance, pinned to the bottom so ragged excerpts stay aligned. */
.rey-card-go {
	margin: 1.1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--rey-line);
	font-size: .85rem;
	font-weight: 600;
	color: var(--rey-primary);
	margin-top: auto;
}
.rey-card-go::after {
	content: " →";
	display: inline-block;
	transition: transform .18s cubic-bezier(.2, 0, 0, 1);
}
.rey-card:hover .rey-card-go::after { transform: translateX(3px); }

/* ---- Values band -------------------------------------------------------- */
.rey-values {
	background: var(--wp--preset--color--surface, #faf9fc);
	border-top: 1px solid var(--rey-line);
	border-bottom: 1px solid var(--rey-line);
}
.rey-values :where(h2) { margin: 0; }
.rey-value-cols { gap: 2.5rem; }
.rey-value { padding-top: 1.25rem; border-top: 2px solid var(--rey-primary); }
.rey-value-t { font-size: 1.25rem; margin: 0 0 .5rem; letter-spacing: -.015em; }
.rey-value-p { color: var(--rey-muted); font-size: 1rem; line-height: 1.6; margin: 0; }

/* ---- Author page + author card (E-E-A-T) -------------------------------- */
.rey-author-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding-top: clamp(2.75rem, 6vw, 4.25rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	background: radial-gradient(120% 110% at 50% 0%, #3b1d6e 0%, #241040 55%, #150c24 100%);
}
.rey-author-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(42% 46% at 50% 106%, rgba(200, 162, 74, .2), transparent 70%);
}
.rey-author-name {
	color: #fff;
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	letter-spacing: -.025em;
}

/* Card on the dark hero. */
.rey-author-hero .rey-authorcard {
	max-width: 640px;
	margin-inline: auto;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .13);
	color: rgba(255, 255, 255, .82);
	text-align: left;
}
.rey-author-hero .rey-authorcard-name { color: #fff; }
.rey-author-hero .rey-authorcard-job { color: var(--rey-gold); }
.rey-author-hero .rey-authorcard-bio { color: rgba(255, 255, 255, .78); }
.rey-author-hero .rey-authorcard-tags li {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .8);
}
.rey-author-hero .rey-authorcard-stats { border-top-color: rgba(255, 255, 255, .14); }
.rey-author-hero .rey-authorcard-stats dt { color: rgba(255, 255, 255, .55); }
.rey-author-hero .rey-authorcard-stats dd { color: #fff; }
.rey-author-hero .rey-authorcard-links a { color: var(--rey-gold); }
.rey-author-hero .rey-authorcard-avatar { outline-color: rgba(255, 255, 255, .2); }

/* Base card (light surfaces: single posts, pages). */
.rey-authorcard {
	margin: var(--wp--preset--spacing--50, 3rem) auto 0;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--rey-line);
	border-radius: 18px;
	background: var(--wp--preset--color--surface, #faf9fc);
}
.rey-authorcard-top { display: flex; align-items: center; gap: 1rem; }
.rey-authorcard-avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	flex: 0 0 auto;
	outline: 1px solid rgba(0, 0, 0, .1);
	outline-offset: -1px;
}
.rey-authorcard-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rey-authorcard-label {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--rey-muted);
}
.rey-authorcard-name {
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--rey-ink);
	text-decoration: none;
}
a.rey-authorcard-name:hover { color: var(--rey-primary); }
.rey-authorcard-job { font-size: .9rem; color: var(--rey-primary); font-weight: 600; }
.rey-authorcard-bio {
	margin: 1rem 0 0;
	font-size: .98rem;
	line-height: 1.65;
	color: var(--rey-muted);
}

/* Expertise chips — the visible "knowsAbout" signal. */
.rey-authorcard-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1rem 0 0;
	padding: 0;
}
.rey-authorcard-tags li {
	font-size: .8rem;
	padding: .25rem .7rem;
	border: 1px solid var(--rey-line);
	border-radius: 999px;
	background: #fff;
	color: var(--rey-muted);
}

.rey-authorcard-stats {
	display: flex;
	gap: 2.25rem;
	margin: 1.15rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rey-line);
}
.rey-authorcard-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.rey-authorcard-stats dt {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--rey-muted);
	margin: 0;
}
.rey-authorcard-stats dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--rey-ink);
	font-variant-numeric: tabular-nums;
}
.rey-authorcard-links {
	margin: 1.1rem 0 0;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-size: .9rem;
	font-weight: 600;
}
.rey-authorcard-links a { color: var(--rey-primary); text-decoration: none; }
.rey-authorcard-links a:hover { text-decoration: underline; }

.rey-authorcard--compact { padding: 1.25rem 1.4rem; }
.rey-authorcard--compact .rey-authorcard-avatar { width: 54px; height: 54px; }
.rey-authorcard--compact .rey-authorcard-name { font-size: 1.15rem; }

@media (max-width: 600px) {
	.rey-authorcard-top { flex-direction: column; align-items: flex-start; gap: .8rem; }
	.rey-authorcard-stats { gap: 1.5rem; }
}

/* The plugin's own author box on rating pages, matched to the theme. */
.pr-authorbox {
	border-radius: 18px !important;
	border-color: var(--rey-line) !important;
	background: var(--wp--preset--color--surface, #faf9fc) !important;
	padding: 1.5rem 1.6rem !important;
}
.pr-authorbox-avatar { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.pr-authorbox-label { letter-spacing: .16em !important; }
.pr-authorbox-name {
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	letter-spacing: -.015em;
}
.pr-authorbox-name:hover { color: var(--rey-primary); }
.pr-authorbox-job { color: var(--rey-primary) !important; font-weight: 600; }
.pr-authorbox-link { color: var(--rey-primary) !important; }

/* ---- Previous / next post navigation ------------------------------------ */
.rey-post-nav {
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rey-line);
}
.rey-post-nav .post-navigation-link-previous,
.rey-post-nav .post-navigation-link-next { max-width: 22rem; }
.rey-post-nav .post-navigation-link-next { text-align: end; margin-inline-start: auto; }
.rey-post-nav a {
	display: inline-block;
	color: var(--rey-ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	transition: color .15s ease;
}
.rey-post-nav a:hover { color: var(--rey-primary); text-decoration: none; }
/* The block prints the label ("Назад"/"Далее") as plain text before the title;
   style it as a small uppercase eyebrow so the pair reads as one control. */
.rey-post-nav .wp-block-post-navigation-link {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--rey-muted);
}
.rey-post-nav .wp-block-post-navigation-link a { font-size: 1.05rem; text-transform: none; letter-spacing: -.015em; }

/* ---- Archive / listing head -------------------------------------------- */
.rey-archive-head { margin-bottom: 2.5rem; text-align: center; }
.rey-archive-head .rey-lead { margin-top: .6rem; }

/* ---- 404 ---------------------------------------------------------------- */
.rey-404 .has-huge-font-size {
	color: var(--rey-primary);
	line-height: .9;
	margin-bottom: 0;
	font-variant-numeric: tabular-nums;
}
.rey-404 .wp-block-search { max-width: 26rem; margin: 2rem auto 0; }

/* ---- Footer ------------------------------------------------------------- */
.rey-footer {
	color: rgba(255, 255, 255, .7);
	background: #120d1a;
	padding-top: var(--wp--preset--spacing--60, 4.5rem);
	padding-bottom: var(--wp--preset--spacing--40, 2rem);
}
.rey-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .15s ease; }
.rey-footer a:hover { color: #fff; }
.rey-footer .wp-block-site-title a {
	color: #fff;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 1.25rem;
	letter-spacing: -.015em;
}
.rey-footer-tag { margin-top: .7rem; line-height: 1.65; color: rgba(255, 255, 255, .52); }
/* Grid keeps the columns evenly distributed instead of wrapping lopsidedly.
   Specificity is raised so it wins over the block layout's generated flex. */
.rey-footer .rey-footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem 3rem;
	margin-bottom: 2.75rem;
	align-items: start;
}
@media (max-width: 781px) {
	.rey-footer .rey-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.rey-footer .rey-footer-top { grid-template-columns: 1fr; }
}
.rey-footer h4 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .74rem;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	margin: 0 0 .9rem;
}
.rey-footer-list { list-style: none; margin: 0; padding: 0; }
.rey-footer-list li { margin: .45rem 0; font-size: .95rem; }
.rey-footer-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 0; }
.rey-copy { color: rgba(255, 255, 255, .45); margin-top: 1.5rem; font-size: .85rem; }

/* ---- Section rhythm ----------------------------------------------------- */
/* One padding scale for every homepage band, so the page reads as an even
   sequence instead of a stack of differently-spaced blocks. */
/* Every band runs edge-to-edge (align: full) and re-applies the layout margin
   itself, so the wide grid inside can reach the full wide-size instead of being
   capped at the content width by an outer constrained group. */
.rey-section {
	padding-block: clamp(3rem, 6vw, 4.75rem);
	padding-inline: 1.25rem;
}
.rey-section-head { text-align: center; }
.rey-section-head + * { margin-top: 2.25rem; }
.rey-section-more { margin-top: 2.25rem; }
.rey-section--find {
	background: var(--wp--preset--color--surface, #faf9fc);
	border-block: 1px solid var(--rey-line);
}

/* ---- Empty states ------------------------------------------------------- */
.rey-empty-t {
	margin: 0 0 .4rem;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--rey-ink);
}
.rey-empty-t + .rey-lead { margin-bottom: 1.4rem; }

/* ---- Rating search ------------------------------------------------------ */
.rey-search { max-width: 620px; margin-inline: auto; }
.rey-search-form { position: relative; }
/* The section heading already names this control, so the label is for
   assistive tech only — the field is never left without an accessible name. */
.rey-search-label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rey-search-row { display: flex; gap: .6rem; }
.rey-search-inputwrap { position: relative; flex: 1 1 auto; min-width: 0; }
.rey-search-icon {
	position: absolute;
	inset-inline-start: .95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--rey-muted);
	pointer-events: none;
	transition: background-color .15s ease;
	-webkit-mask: var(--rey-icon-search) center / contain no-repeat;
	mask: var(--rey-icon-search) center / contain no-repeat;
}
.rey-search-inputwrap:focus-within .rey-search-icon { background: var(--rey-primary); }
.rey-search-input {
	width: 100%;
	/* 16px stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--rey-ink);
	padding: .85rem 1rem .85rem 2.9rem;
	border: 1px solid var(--rey-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--rey-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.rey-search-input::placeholder { color: var(--rey-muted); }
.rey-search-input:hover { border-color: color-mix(in srgb, var(--rey-primary) 30%, var(--rey-line)); }
.rey-search-input:focus {
	border-color: var(--rey-primary);
	box-shadow: var(--rey-shadow-md);
	outline: none;
}
.rey-search-input:focus-visible { outline: 2px solid var(--rey-primary); outline-offset: 2px; }
.rey-search-submit {
	flex: 0 0 auto;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: #fff;
	background: var(--rey-primary);
	border: 0;
	border-radius: 12px;
	padding: .85rem 1.5rem;
	min-height: 48px;
	transition: background-color .15s ease, transform .08s ease;
}
.rey-search-submit:hover { background: var(--rey-primary-strong); }
.rey-search-submit:active { transform: scale(.96); }

.rey-search-results {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + .5rem);
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--rey-line);
	border-radius: 14px;
	box-shadow: var(--rey-shadow-lg);
	max-height: 22rem;
	overflow-y: auto;
}
.rey-search-item a {
	display: block;
	padding: .6rem .8rem;
	border-radius: 9px;
	color: var(--rey-ink);
	text-decoration: none;
	font-size: .98rem;
}
.rey-search-item a:hover,
.rey-search-item.is-active a {
	background: var(--rey-primary-soft);
	color: var(--rey-primary-strong);
}
.rey-search-sem { font-size: .8rem; color: var(--rey-muted); margin-inline-start: .35rem; }
.rey-search-status {
	margin: .6rem 0 0;
	font-size: .85rem;
	color: var(--rey-muted);
	text-align: center;
	min-height: 1.2em;
}

/* ---- Create-a-rating band ------------------------------------------------
   The plugin renders its widget as a white card (.pr-create-hero) and most of
   its inner elements use `color: inherit`. So the band itself must NOT set a
   white text colour — doing that paints white text onto that white card and the
   whole form disappears. White is applied only to this section's own heading;
   the widget keeps a normal dark-on-light context. */
.rey-create {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: radial-gradient(110% 130% at 50% 0%, #2e1655 0%, #1a1029 60%, #120d1a 100%);
}
.rey-create::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(38% 55% at 50% 0%, rgba(200, 162, 74, .16), transparent 70%);
}
.rey-kicker--light { color: var(--rey-gold); }
.rey-create-title { color: #fff; margin: 0; }

/* Re-point the widget's own design tokens at the theme palette. `.pr-create`
   redefines --pr-accent locally (orange), so a body-level override never
   reaches inside — it has to be re-declared on the same element. */
.rey-create .pr-create {
	--pr-accent: var(--rey-primary);
	--pr-line: var(--rey-line);
	--pr-muted: var(--rey-muted);
	--pr-bg: #fff;
	max-width: 660px;
	margin-inline: auto;
	/* Anchors every `color: inherit` inside the widget to readable ink. */
	color: var(--rey-ink);
}

/* The widget's white panel, matched to the theme's card language. */
.rey-create .pr-create-hero {
	background:
		radial-gradient(120% 120% at 50% -10%, color-mix(in srgb, var(--rey-primary) 9%, transparent), transparent 60%),
		#fff;
	border: 1px solid var(--rey-line);
	border-radius: 20px;
	box-shadow: var(--rey-shadow-lg);
}
.rey-create .pr-create-label {
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	color: var(--rey-ink);
	letter-spacing: -.02em;
}
.rey-create .pr-create-sub,
.rey-create .pr-create-hint,
.rey-create .pr-create-exlabel { color: var(--rey-muted); }
.rey-create .pr-create-h { color: var(--rey-ink); }

/* Step two ("С чем будем рейтинговать?") is a sibling of the hero card with no
   background of its own, so on the dark band its dark text was invisible. It
   gets the same white panel, which also makes the two steps read as a sequence. */
.rey-create .pr-create-step2 {
	margin-top: 1rem;
	padding: 1.6rem 1.5rem;
	background: #fff;
	border: 1px solid var(--rey-line);
	border-radius: 20px;
	box-shadow: var(--rey-shadow-lg);
	text-align: start;
}
.rey-create .pr-create-h {
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: 1.25rem;
	letter-spacing: -.015em;
	color: var(--rey-ink);
}
/* Full border declared here rather than only border-color: this must not
   depend on the plugin continuing to set a width somewhere else. */
.rey-create .pr-nominee {
	background: #fff;
	border: 1px solid var(--rey-line);
	border-radius: 12px;
	transition: border-color .15s ease, background-color .15s ease;
}
.rey-create .pr-nominee-cb { accent-color: var(--rey-primary); }
.rey-create .pr-nominee:hover {
	border-color: var(--rey-primary);
	background: var(--rey-primary-faint, #f6f4fc);
}
.rey-create .pr-nominee-body b { color: var(--rey-ink); }
.rey-create .pr-nominee-body span { color: var(--rey-muted); }

.rey-create .pr-create-input,
.rey-create .pr-create-add-input {
	/* 16px keeps iOS Safari from zooming the page on focus. */
	font-size: 16px;
	color: var(--rey-ink);
	background: #fff;
	border: 1px solid var(--rey-line);
	border-radius: 12px;
}
.rey-create .pr-create-input { padding-block: 1rem; }
.rey-create .pr-create-input::placeholder,
.rey-create .pr-create-add-input::placeholder { color: var(--rey-muted); }
/* The plugin hardcodes an orange focus ring; repaint it purple. */
.rey-create .pr-create-input:focus,
.rey-create .pr-create-add-input:focus {
	border-color: var(--rey-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rey-primary) 18%, transparent);
}

/* The bundled magnifier is drawn as one path whose handle detaches from the
   circle. Swap it for a correctly constructed icon, masked so it inherits
   colour and stays crisp at any size. */
.rey-create .pr-create-icon { display: none; }
.rey-create .pr-create-inputwrap::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--rey-muted);
	pointer-events: none;
	z-index: 1;
	transition: background-color .15s ease;
	-webkit-mask: var(--rey-icon-search) center / contain no-repeat;
	mask: var(--rey-icon-search) center / contain no-repeat;
}
.rey-create .pr-create-inputwrap:focus-within::before { background: var(--rey-primary); }

.rey-create .pr-create-ex {
	background: #fff;
	border: 1px solid var(--rey-line);
	color: var(--rey-ink);
	border-radius: 999px;
	min-height: 36px;
}
.rey-create .pr-create-ex:hover {
	border-color: var(--rey-primary);
	color: var(--rey-primary);
	background: var(--rey-primary-soft);
}
/* The "add nominee" row is a flex pair whose input carries width:100%. Without
   min-width:0 that width wins over shrinking and pushes the button off the row. */
.rey-create .pr-create-add-input { flex: 1 1 auto; min-width: 0; }
.rey-create .pr-create-add-btn {
	background: var(--rey-primary-soft);
	color: var(--rey-primary-strong);
	border-radius: 12px;
	min-height: 46px;
	transition: background-color .15s ease;
}
.rey-create .pr-create-add-btn:hover { background: color-mix(in srgb, var(--rey-primary) 22%, #fff); }

/* The plugin ships an orange glow under this button; repaint the whole thing. */
.rey-create .pr-create-submit {
	background: var(--rey-primary);
	color: #fff;
	border-radius: 14px;
	min-height: 52px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--rey-primary) 32%, transparent);
	transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.rey-create .pr-create-submit:hover {
	background: var(--rey-primary-strong);
	filter: none;
	transform: none;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--rey-primary) 42%, transparent);
}
.rey-create .pr-create-submit:active { transform: scale(.98); }

/* Loading radar is hardcoded orange in the plugin. */
.rey-create .pr-radar { border-color: color-mix(in srgb, var(--rey-primary) 25%, transparent); }
.rey-create .pr-radar i {
	background: conic-gradient(from 0deg, color-mix(in srgb, var(--rey-primary) 55%, transparent), transparent 38%);
}

/* Suggestion dropdown and nominee picker sit on white too. */
.rey-create .pr-create-results { border-radius: 14px; box-shadow: var(--rey-shadow-lg); }
.rey-create .pr-result { color: var(--rey-ink); }
.rey-create .pr-result:hover { background: var(--rey-primary-faint, #f6f4fc); }
.rey-create .pr-result--create { color: var(--rey-primary); }
.rey-create .pr-create-done {
	border-radius: 20px;
	border-color: var(--rey-line);
	box-shadow: var(--rey-shadow-lg);
}
/* Fallback shown when the widget cannot run — keeps the band useful. */
.rey-noscript {
	max-width: 46ch;
	margin: 1.25rem auto 0;
	text-align: center;
	color: rgba(255, 255, 255, .75);
}
.rey-noscript a { color: var(--rey-gold); text-decoration: underline; }

/* ---- Core search block (search template) -------------------------------- */
.wp-block-search__input {
	border: 1px solid var(--rey-line);
	border-radius: 10px;
	font-size: 16px;
	padding: .6rem .8rem;
}
.wp-block-search .wp-block-search__button { border-radius: 10px; }

/* ---- Blend the PeopleRank plugin into the purple identity --------------- */
/* Each of these widgets redeclares --pr-accent on itself (orange), so the
   override has to target the same elements — a body-level variable is shadowed
   by the widget's own declaration and never reaches inside. */
.pr-rating,
.pr-create,
.pr-nominee-content,
.pr-nominee-page,
.pr-reviews,
.pr-longread,
.pr-authorbox { --pr-accent: var(--rey-primary); }

.pr-longread :where(h2, h3) { font-family: var(--wp--preset--font-family--serif, Georgia, serif); letter-spacing: -.015em; }

/* Tabular figures wherever the plugin shows counts, so they don't jitter. */
.pr-nrow-votes,
.pr-nratings-count,
.pr-count,
.pr-votes { font-variant-numeric: tabular-nums; }

/* ---- Rendering performance ----------------------------------------------
   `content-visibility: auto` was tried on the values band and the footer and
   removed again: their real heights are ~518px and ~524px against a 420px
   `contain-intrinsic-size` estimate, so the placeholder resized on scroll and
   produced layout shift. On a page this light the skipped paint saves far less
   than a Cumulative Layout Shift regression costs. The performance work that
   matters here lives in inc/class-performance.php and in using system fonts. */

/* ---- Motion restraint --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rey-card,
	.rey-card::after,
	.rey-card::before,
	.rey-card-go::after,
	.wp-block-button__link,
	.rey-search-input,
	.rey-search-submit,
	.rey-nav .wp-block-navigation-item__content::after,
	.rey-main :where(p, li) a { transition: none; }
	.rey-card:hover { transform: none; }
	.rey-card:hover::after { transform: scaleX(1); }
	.rey-card:hover .rey-card-go::after { transform: none; }
	.wp-block-button__link:active,
	.rey-search-submit:active { transform: none; }
}