/* Toperz site design: fonts, header, footer, homepage. */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-var.woff") format("woff");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sora";
	src: url("../fonts/sora-var.woff") format("woff");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--tz-accent: #d7263d;
	--tz-accent-dark: #b81f33;
	--tz-accent-soft: #fcecee;
	--tz-ink: #16181d;
	--tz-text: #2b2f38;
	--tz-muted: #5f6573;
	--tz-line: #e3e5ea;
	--tz-line-soft: #eceef2;
	--tz-soft: #f6f7f9;
	--tz-display: "Sora", "Manrope", system-ui, sans-serif;
	--tz-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tz-max: 1200px;
	/* Blocksy variables, so its own pages match. */
	--theme-font-family: var(--tz-body);
	--theme-palette-color-1: #d7263d;
	--theme-palette-color-2: #b81f33;
	--theme-link-initial-color: #b81f33;
	--theme-link-hover-color: #8f1727;
}

body.tz-site {
	font-family: var(--tz-body);
	color: var(--tz-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
body.tz-site h1,
body.tz-site h2,
body.tz-site h3 {
	font-family: var(--tz-display);
	color: var(--tz-ink);
	letter-spacing: -0.02em;
}

.tz-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 1000;
	background: var(--tz-ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 700;
}
.tz-skip:focus { top: 12px; color: #fff; }

.tz-site :focus-visible { outline: 3px solid var(--tz-accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.tz-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--tz-line-soft);
}
.admin-bar .tz-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tz-site-header { top: 0; } }
.tz-site-header__inner {
	max-width: var(--tz-max);
	margin: 0 auto;
	padding: 0 24px;
	height: 76px;
	display: flex;
	align-items: center;
	gap: 40px;
}
.tz-site-logo {
	display: inline-flex;
	align-items: flex-end;
	text-decoration: none;
	color: var(--tz-accent) !important;
	flex-shrink: 0;
}
.tz-site-logo__word {
	font-family: var(--tz-display);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.03em;
}
.tz-site-logo__arrow { margin: 0 0 -6px -4px; }
.tz-site-logo__img { display: block; height: 40px; width: auto; }

.tz-site-nav { flex-grow: 1; }
.tz-site-nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tz-site-nav__list a {
	display: block;
	padding: 26px 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--tz-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.tz-site-nav__list a:hover { color: var(--tz-ink); }
.tz-site-nav__list .current-menu-item > a,
.tz-site-nav__list a[aria-current] { color: var(--tz-ink); border-bottom-color: var(--tz-accent); }

.tz-site-search,
.tz-site-burger { position: relative; }
.tz-site-search > summary,
.tz-site-burger > summary {
	list-style: none;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	border: 1px solid var(--tz-line);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--tz-ink);
	background: #fff;
}
.tz-site-search > summary::-webkit-details-marker,
.tz-site-burger > summary::-webkit-details-marker { display: none; }
.tz-site-search[open] > summary,
.tz-site-burger[open] > summary { border-color: var(--tz-ink); }
.tz-site-search__form {
	display: flex;
	gap: 8px;
}
.tz-site-search > .tz-site-search__form {
	position: absolute;
	right: 0;
	top: 54px;
	width: 380px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--tz-line);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(22, 24, 29, .12);
}
.tz-site-search__form input[type="search"] {
	flex-grow: 1;
	min-width: 0;
	height: 46px;
	border: 1px solid var(--tz-line);
	border-radius: 12px;
	padding: 0 14px;
	font: inherit;
	font-size: 16px;
	color: var(--tz-ink);
	background: #fff;
}
.tz-site-btn {
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--tz-accent);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.tz-site-btn:hover { background: var(--tz-accent-dark); }

.tz-site-burger { display: none; }
.tz-site-burger__panel {
	position: absolute;
	right: 0;
	top: 54px;
	width: min(92vw, 360px);
	background: #fff;
	border: 1px solid var(--tz-line);
	border-radius: 18px;
	box-shadow: 0 20px 40px rgba(22, 24, 29, .14);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tz-site-burger__list { list-style: none; margin: 0; padding: 0; }
.tz-site-burger__list a {
	display: block;
	padding: 12px 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--tz-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--tz-line-soft);
}
.tz-site-burger__list li:last-child a { border-bottom: 0; }

@media (max-width: 960px) {
	.tz-site-header__inner { height: 64px; gap: 12px; }
	.tz-site-nav, .tz-site-search { display: none; }
	.tz-site-burger { display: block; margin-left: auto; }
	.tz-site-logo__word { font-size: 26px; }
}

/* ---------- Footer ---------- */
.tz-site-footer {
	border-top: 1px solid var(--tz-line-soft);
	background: #fff;
	margin-top: 0;
}
.tz-site-footer__inner {
	max-width: var(--tz-max);
	margin: 0 auto;
	padding: 48px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--tz-muted);
	font-size: 14px;
}
.tz-site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.tz-site-logo--footer .tz-site-logo__word { font-size: 26px; }
.tz-site-footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.tz-site-footer__links a,
.tz-site-footer__cats a { color: var(--tz-text); text-decoration: none; font-weight: 600; }
.tz-site-footer__links a:hover,
.tz-site-footer__cats a:hover { color: var(--tz-accent-dark); text-decoration: underline; }
.tz-site-footer__cats { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; border-top: 1px solid var(--tz-line-soft); }
.tz-site-footer__cats a { color: var(--tz-muted); font-weight: 600; }
.tz-site-footer__legal { margin: 0; line-height: 1.6; max-width: 900px; }

/* ---------- Homepage ---------- */
.tz-home { font-family: var(--tz-body); color: var(--tz-text); }
.tz-home *, .tz-home *::before, .tz-home *::after { box-sizing: border-box; }
.tz-home-wrap { max-width: var(--tz-max); margin: 0 auto; padding: 0 24px; }
.tz-home-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tz-accent-dark);
}
.tz-home-eyebrow--light { color: #ff8a98; }

.tz-home-hero { padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 80px); }
.tz-home-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.tz-home .tz-home-hero__title {
	margin: 0;
	font-family: var(--tz-display);
	font-weight: 800;
	font-size: clamp(46px, 8.4vw, 100px);
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--tz-ink);
}
.tz-home-hero__title span { color: var(--tz-accent); }
.tz-home-hero__lead { margin: 0; max-width: 680px; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--tz-muted); }
.tz-home-search {
	width: min(100%, 760px);
	min-height: 68px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 20px;
	border: 2px solid var(--tz-ink);
	border-radius: 18px;
	background: #fff;
	color: var(--tz-muted);
}
.tz-home-search input {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 18px;
	color: var(--tz-ink);
	padding: 0;
	box-shadow: none;
}
.tz-home-search button {
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--tz-accent);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
}
.tz-home-search button:hover { background: var(--tz-accent-dark); }
.tz-home-search:focus-within { box-shadow: 0 0 0 4px var(--tz-accent-soft); }
.tz-home-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: var(--tz-muted); }
.tz-home-popular span { font-weight: 700; }
.tz-home-popular a {
	padding: 8px 14px;
	border-radius: 999px;
	background: #f1f2f5;
	color: var(--tz-ink);
	font-weight: 700;
	text-decoration: none;
}
.tz-home-popular a:hover { background: var(--tz-accent-soft); color: var(--tz-accent-dark); }

.tz-home-trust { border-top: 1px solid var(--tz-line-soft); border-bottom: 1px solid var(--tz-line-soft); }
.tz-home-trust__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.tz-home-trust__inner > div { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--tz-text); }
.tz-home-trust svg { color: var(--tz-accent); flex-shrink: 0; }
@media (max-width: 900px) {
	.tz-home-trust__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-home-trust__inner > div { justify-content: flex-start; font-size: 14px; }
}

.tz-home-section { padding: clamp(56px, 7vw, 88px) 0; }
.tz-home-section--tight { padding: 24px 0 72px; }
.tz-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.tz-home .tz-home-head h2,
.tz-home .tz-home-method h2 {
	margin: 0;
	font-family: var(--tz-display);
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--tz-ink);
}
.tz-home-head p { margin: 8px 0 0; font-size: 18px; color: var(--tz-muted); }

.tz-home-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .tz-home-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tz-home-cats { grid-template-columns: minmax(0, 1fr); } }
.tz-home-cat {
	position: relative;
	border: 1px solid var(--tz-line);
	border-radius: 22px;
	padding: 28px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tz-home-cat:hover { border-color: var(--tz-ink); box-shadow: 0 18px 40px rgba(22, 24, 29, .08); transform: translateY(-2px); }
.tz-home-cat__top { display: flex; align-items: center; justify-content: space-between; }
.tz-home-cat__icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: var(--tz-accent-soft);
	color: var(--tz-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tz-home-cat__arrow { color: #9aa0ad; }
.tz-home-cat:hover .tz-home-cat__arrow { color: var(--tz-accent); }
.tz-home .tz-home-cat h3 { margin: 4px 0 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.tz-home-cat__link { color: var(--tz-ink); text-decoration: none; }
.tz-home-cat__link::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.tz-home-cat p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tz-muted); }
.tz-home-cat__tags { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.tz-home-cat__tags a {
	padding: 7px 12px;
	border-radius: 999px;
	background: #f1f2f5;
	font-size: 13px;
	font-weight: 700;
	color: var(--tz-text);
	text-decoration: none;
}
.tz-home-cat__tags a:hover { background: var(--tz-accent-soft); color: var(--tz-accent-dark); }

.tz-home-dark { background: var(--tz-ink); color: #fff; }
.tz-home .tz-home-dark h2 { color: #fff; }
.tz-home-vs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .tz-home-vs { grid-template-columns: minmax(0, 1fr); } }
.tz-home-vs__card {
	border-radius: 22px;
	background: #22252c;
	border: 1px solid #2e323b;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #fff;
	text-decoration: none;
}
.tz-home-vs__card:hover { border-color: #ff8a98; color: #fff; }
.tz-home-vs__pair { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.tz-home-vs__pair > span { height: 60px; border-radius: 14px; background: #2e323b; display: flex; align-items: center; justify-content: center; font-weight: 800; text-align: center; padding: 0 8px; }
.tz-home-vs__pair b { width: 46px; height: 46px; border-radius: 50%; background: var(--tz-accent); display: flex; align-items: center; justify-content: center; font-family: var(--tz-display); font-size: 14px; }
.tz-home-vs__foot { display: flex; justify-content: space-between; font-size: 15px; color: #c4c8d2; }
.tz-home-vs__foot strong { color: #fff; }

.tz-home-latest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .tz-home-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tz-home-latest { grid-template-columns: minmax(0, 1fr); } }
.tz-home-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--tz-ink); }
.tz-home-card__media { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #f1f2f5; }
.tz-home-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.tz-home-card:hover .tz-home-card__media img { transform: scale(1.03); }
.tz-home-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tz-accent); background: var(--tz-accent-soft); }
.tz-home-card__ph svg { width: 44px; height: 44px; }
.tz-home-card__cat { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tz-accent-dark); }
.tz-home-card__title { font-family: var(--tz-display); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.tz-home-card:hover .tz-home-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tz-home-card__date { font-size: 14px; color: var(--tz-muted); }

.tz-home-soft { background: var(--tz-soft); }
.tz-home-method { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .tz-home-method { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.tz-home-method p { margin: 14px 0; font-size: 18px; line-height: 1.6; color: var(--tz-muted); }
.tz-home-method a { font-weight: 800; color: var(--tz-accent-dark); }
.tz-home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 560px) { .tz-home-steps { grid-template-columns: minmax(0, 1fr); } }
.tz-home-steps li { background: #fff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--tz-muted); margin: 0; }
.tz-home-steps span { font-family: var(--tz-display); font-size: 30px; font-weight: 800; color: var(--tz-accent); }
.tz-home-steps strong { font-size: 19px; color: var(--tz-ink); }

.tz-home-news {
	border-radius: 28px;
	background: var(--tz-accent);
	color: #fff;
	padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}
.tz-home .tz-home-news h2 { margin: 0; font-family: var(--tz-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.tz-home-news p { margin: 8px 0 0; font-size: 18px; color: #ffe3e6; }
.tz-home-news form { display: flex; flex-wrap: wrap; gap: 10px; }
.tz-home-news input { width: min(100%, 320px); height: 56px; border: 0; border-radius: 14px; padding: 0 18px; font: inherit; font-size: 16px; }
.tz-home-news button { height: 56px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--tz-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.tz-home-cat, .tz-home-card__media img { transition: none; }
	.tz-home-cat:hover { transform: none; }
}

/* ---------- Guard against parent-theme overrides ---------- */
.tz-site-nav__list a,
.tz-site-burger__list a,
.tz-site-footer a,
.tz-site-footer p,
.tz-home li,
.tz-home a,
.tz-home input,
.tz-home button,
.tz-site-search__form input,
.tz-site-search__form button,
body.tz-site .tz li,
body.tz-site .tz th,
body.tz-site .tz td,
body.tz-site .tz summary,
body.tz-site .tz dt,
body.tz-site .tz dd { font-family: var(--tz-body); }

body.tz-site .tz-home-search button,
body.tz-site .tz-site-btn,
body.tz-site .tz-home-news button {
	background-color: var(--tz-accent) !important;
	color: #fff !important;
	border: 0;
	box-shadow: none;
	text-shadow: none;
}
body.tz-site .tz-home-news button { background-color: var(--tz-ink) !important; }
body.tz-site .tz-home-search button:hover,
body.tz-site .tz-site-btn:hover { background-color: var(--tz-accent-dark) !important; }
body.tz-site .tz-home-news button:hover { background-color: #000 !important; }

@media (max-width: 560px) {
	.tz-home-search { padding-left: 14px; gap: 8px; }
	.tz-home-search > svg { display: none; }
	.tz-home-search input { font-size: 16px; }
	.tz-home-search button { padding: 0 18px; }
}

/* Header icon buttons: keep the icon centered whatever the parent theme does to <summary>. */
body.tz-site .tz-site-search > summary,
body.tz-site .tz-site-burger > summary {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 0;
	font-size: 0;
	gap: 0;
	display: grid;
	place-items: center;
}
body.tz-site .tz-site-search > summary::marker,
body.tz-site .tz-site-burger > summary::marker { content: ""; }
body.tz-site .tz-site-search > summary::before,
body.tz-site .tz-site-search > summary::after,
body.tz-site .tz-site-burger > summary::before,
body.tz-site .tz-site-burger > summary::after { content: none; display: none; }
body.tz-site .tz-site-search > summary svg,
body.tz-site .tz-site-burger > summary svg {
	display: block;
	margin: 0;
	position: static;
	transform: none;
	flex-shrink: 0;
}
body.tz-site .tz-site-search > summary:hover,
body.tz-site .tz-site-burger > summary:hover { border-color: var(--tz-ink); }