/*
Theme Name: Razhan
Theme URI: https://www.razhan.me
Author: Razhan Mahmood
Author URI: https://www.razhan.me
Description: Custom block theme for razhan.me: HR, immigration and people consulting in Berlin. Includes German and English homepage patterns, a header-less landing template, and Impressum/Datenschutz page templates.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: razhan
*/

:root {
	--rz-display: var(--wp--preset--font-family--display);
	--rz-serif: var(--wp--preset--font-family--serif);
	--rz-mono: var(--wp--preset--font-family--mono);
	--rz-deep: var(--wp--preset--color--deep);
	--rz-ink: var(--wp--preset--color--ink);
	--rz-ground: var(--wp--preset--color--ground);
	--rz-paper: var(--wp--preset--color--paper);
	--rz-gold: var(--wp--preset--color--gold);
	--rz-gold-ink: var(--wp--preset--color--gold-ink);
	--rz-mute: var(--wp--preset--color--mute);
	--rz-rule: var(--wp--preset--color--rule);
	--rz-deep-ink: var(--wp--preset--color--deep-ink);
	--rz-deep-mute: var(--wp--preset--color--deep-mute);
	--rz-deep-rule: #2A3B59;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--rz-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Landing template: full-width sections sit flush ---------- */
body .rz-landing .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
.rz-section { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
body .rz-section.rz-flush-top { padding-top: 0; }
.rz-deep { background: var(--rz-deep); color: var(--rz-deep-ink); }
.rz-paper { background: var(--rz-paper); border-top: 1px solid var(--rz-rule); border-bottom: 1px solid var(--rz-rule); }

/* A narrower text column that still lines up with the content column */
body .rz-narrow {
	max-width: 36em;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2)) !important;
	margin-right: auto !important;
}

/* ---------- Shared type ---------- */
.rz-h2 {
	font-family: var(--rz-display);
	font-weight: 700;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: .95;
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -.005em;
}
body .rz-section .rz-h2 { margin-bottom: 0; }
body .rz-lede { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--rz-mute); }
body .rz-deep .rz-lede { color: var(--rz-deep-mute); }

/* ---------- Buttons ---------- */
body .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1.5px solid currentColor;
	padding: 11.5px 18.5px;
}
body .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: transparent; color: inherit; border-color: var(--rz-gold); }
body .rz-deep .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--rz-deep-rule); }
body .rz-deep .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--rz-deep-ink); }

/* ---------- Hero ---------- */
.rz-hero { padding-bottom: clamp(48px, 6vw, 72px); }
body .rz-nav { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rz-deep-rule); gap: 16px 24px; }
.rz-word {
	margin: 0;
	font-family: var(--rz-display);
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	font-stretch: 118%;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.rz-word a { text-decoration: none; color: inherit; }
.rz-word strong, .rz-verb strong { color: var(--rz-gold); font-weight: inherit; }
.rz-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-family: var(--rz-display); font-weight: 500; font-size: 14px; line-height: 1.4; }
.rz-links a { text-decoration: none; color: var(--rz-mute); }
.rz-deep .rz-links a { color: var(--rz-deep-mute); }
.rz-links a:hover, .rz-deep .rz-links a:hover { color: inherit; }
body .rz-hero .rz-links a:last-child { padding: 4px 10px; border: 1px solid var(--rz-deep-rule); border-radius: 999px; color: var(--rz-deep-ink); }

body .rz-hero .rz-kicker {
	margin-top: clamp(40px, 6vw, 76px);
	font-family: var(--rz-mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rz-deep-mute);
}
body .rz-hero .rz-num {
	margin-top: 22px;
	margin-bottom: 0;
	font-family: var(--rz-display);
	font-weight: 800;
	font-size: clamp(84px, 16.5vw, 232px);
	line-height: .84;
	font-stretch: 108%;
	letter-spacing: -.035em;
	color: var(--rz-gold);
	font-variant-numeric: tabular-nums;
}
body .rz-hero .rz-hero-grid { margin-top: 32px; margin-bottom: 0; gap: clamp(28px, 5vw, 72px); }
.rz-claim {
	font-family: var(--rz-display);
	font-weight: 500;
	font-size: clamp(22px, 2.3vw, 30px);
	line-height: 1.28;
	font-stretch: 96%;
	letter-spacing: -.01em;
}
body .rz-hero .rz-claim { margin: 0; }
body .rz-hero .rz-claim + .rz-claim { margin-top: 18px; color: var(--rz-deep-mute); }
.rz-claim sup, .rz-source sup { color: var(--rz-gold); }
body .rz-hero .rz-intro { margin: 0; font-size: 18px; line-height: 1.6; }
body .rz-hero .wp-block-buttons { margin-top: 26px; }
body .rz-hero .rz-source { margin-top: 40px; font-family: var(--rz-mono); font-size: 11.5px; line-height: 1.4; color: var(--rz-deep-mute); }

/* ---------- Route ---------- */
body .rz-route { gap: 0; margin-top: 44px; margin-bottom: 0; }
.rz-route > .wp-block-column { position: relative; padding: 34px 24px 0 0; }
.rz-route > .wp-block-column::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; border-top: 2px solid var(--rz-ink); }
.rz-route > .wp-block-column::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--rz-ground); border: 2px solid var(--rz-ink); }
.rz-route > .rz-now::before { border-top-style: dashed; }
.rz-route > .rz-now::after { background: var(--rz-gold); border-color: var(--rz-gold); width: 18px; height: 18px; top: -2px; }
body .rz-route .rz-city { margin: 0; font-family: var(--rz-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1; font-stretch: 75%; text-transform: uppercase; }
body .rz-route .rz-yrs { margin: 10px 0 12px; font-family: var(--rz-mono); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rz-mute); }
body .rz-route .rz-now .rz-yrs { color: var(--rz-gold-ink); }
body .rz-route .rz-role { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--rz-mute); }

body .rz-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; margin-top: clamp(56px, 7vw, 88px); }
.rz-quote::before { content: "\201C"; grid-row: span 2; font: 800 120px/.8 var(--rz-display); color: var(--rz-gold); }
body .rz-quote > * { margin: 0; }
body .rz-quote .rz-q { max-width: 24em; font-style: italic; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -.01em; }
body .rz-quote .rz-cite { margin-top: 16px; font-family: var(--rz-mono); font-size: 12px; letter-spacing: .04em; color: var(--rz-mute); }

/* ---------- For professionals ---------- */
body .rz-split { gap: 0; margin-top: 44px; margin-bottom: 0; border-top: 2px solid var(--rz-ink); }
.rz-split > .wp-block-column { padding: 26px clamp(18px, 2.5vw, 32px) 8px; }
.rz-split > .wp-block-column:first-child { padding-left: 0; }
.rz-split > .wp-block-column + .wp-block-column { border-left: 1px solid var(--rz-rule); }
body .rz-verb { margin: 0 0 18px; font-family: var(--rz-display); font-weight: 800; font-size: clamp(38px, 4vw, 52px); line-height: 1; font-stretch: 112%; letter-spacing: -.02em; }
body .rz-item { margin: 0; padding: 12px 0; border-top: 1px solid var(--rz-rule); font-size: 16.5px; line-height: 1.45; }

/* ---------- For companies ---------- */
body .rz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); margin-top: 44px; border-top: 2px solid var(--rz-ink); }
body .rz-grid2 > * { margin: 0; }
.rz-service { padding: 22px 0 24px; border-bottom: 1px solid var(--rz-rule); }
body .rz-service > * { margin: 0; }
body .rz-service h3 { font-family: var(--rz-display); font-weight: 700; font-size: 22px; line-height: 1.2; font-stretch: 92%; }
body .rz-service .rz-ref { margin-top: 6px; font-family: var(--rz-mono); font-size: 11.5px; line-height: 1.5; color: var(--rz-gold-ink); }
body .rz-service .rz-desc { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--rz-mute); }

body .rz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
body .rz-facts > *, body .rz-fact > * { margin: 0; }
body .rz-fact .rz-fig { font-family: var(--rz-display); font-weight: 800; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body .rz-fact .rz-cap { margin-top: 8px; max-width: 22ch; font-size: 14px; line-height: 1.45; color: var(--rz-mute); }

body .rz-client-voice { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rz-rule); }
body .rz-note { margin-top: 28px; font-family: var(--rz-mono); font-size: 12.5px; line-height: 1.6; color: var(--rz-mute); }
body .rz-section > .wp-block-buttons { margin-top: 28px; }

/* ---------- Languages ---------- */
body .rz-langs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 44px; }
body .rz-langs > * { margin: 0; }
.rz-lang { padding: 22px 18px; border-top: 1px solid var(--rz-deep-rule); border-left: 1px solid var(--rz-deep-rule); }
.rz-lang:first-child { border-left: 0; padding-left: 0; }
body .rz-lang > * { margin: 0; }
body .rz-lang > * + * { margin-top: 10px; }
body .rz-lang .rz-code { font-family: var(--rz-display); font-weight: 800; font-size: 46px; line-height: 1; font-stretch: 120%; letter-spacing: -.02em; }
body .rz-lang .rz-auto { font-family: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", Tahoma, var(--rz-serif); font-size: 19px; line-height: 1.3; color: var(--rz-deep-mute); }
body .rz-lang .rz-lvl { display: inline-block; padding: 5px 8px; border-radius: 3px; background: var(--rz-gold); color: var(--rz-deep); font-family: var(--rz-mono); font-weight: 600; font-size: 11.5px; line-height: 1; }

/* ---------- Voices ---------- */
body .rz-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); margin-top: 44px; }
body .rz-voices > *, body .rz-voice > * { margin: 0; }
body .rz-voice .rz-v { font-size: clamp(21px, 2vw, 25px); line-height: 1.45; }
body .rz-voice .rz-vc { margin-top: 18px; font-family: var(--rz-mono); font-size: 12px; line-height: 1.5; letter-spacing: .03em; color: var(--rz-mute); }
.rz-vc strong { color: var(--rz-ink); font-weight: 600; }

/* ---------- Notes ---------- */
body .rz-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
body .rz-notes > * { margin: 0; }
.rz-card { display: flex; flex-direction: column; padding: 24px; background: var(--rz-paper); border: 1px solid var(--rz-rule); }
body .rz-card > * { margin: 0; }
body .rz-card > * + * { margin-top: 14px; }
body .rz-card .rz-meta { font-family: var(--rz-mono); font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--rz-mute); }
body .rz-card h3 { font-family: var(--rz-display); font-weight: 700; font-size: 22px; line-height: 1.15; font-stretch: 88%; }
body .rz-card .rz-desc { font-size: 15.5px; line-height: 1.5; color: var(--rz-mute); }
body .rz-card .rz-more { margin-top: auto; padding-top: 14px; font-family: var(--rz-display); font-weight: 600; font-size: 13px; }
.rz-more a { color: var(--rz-gold-ink); text-decoration: none; }
.rz-more a:hover { text-decoration: underline; }

/* ---------- Contact ---------- */
body .rz-contact-box { padding-top: 40px; border-top: 2px solid var(--rz-ink); }
body .rz-contact-box > * { margin-top: 0; margin-bottom: 0; }
body .rz-contact-box .rz-big { max-width: 13ch; font-family: var(--rz-display); font-weight: 800; font-size: clamp(40px, 6.4vw, 92px); line-height: .92; font-stretch: 80%; text-transform: uppercase; letter-spacing: -.01em; }
body .rz-contact-box .rz-lede { max-width: 34em; margin-top: 22px; }
body .rz-contact-box .wp-block-buttons { margin-top: 28px; }
body .rz-contact-box .rz-mail { margin-top: 32px; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
.rz-mail a { color: inherit; text-decoration-color: var(--rz-gold); text-decoration-thickness: 3px; text-underline-offset: 8px; }
body .rz-contact-box .rz-alt { margin-top: 20px; font-family: var(--rz-mono); font-size: 13px; color: var(--rz-mute); }

/* ---------- Header (inner pages) & footer ---------- */
body .rz-bar { padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--rz-rule); gap: 16px 24px; }
body .rz-footer { padding-top: 26px; padding-bottom: 40px; border-top: 1px solid var(--rz-rule); gap: 12px 24px; font-family: var(--rz-display); font-size: 13px; color: var(--rz-mute); }
body .rz-footer p { margin: 0; }
.rz-footer a { color: inherit; text-decoration: none; }
.rz-footer a:hover { text-decoration: underline; }

/* ---------- Regular pages ---------- */
.rz-page { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(72px, 8vw, 104px); }
body .rz-page .rz-page-title { font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: .95; font-stretch: 72%; text-transform: uppercase; }
.rz-page .wp-block-post-content h2 { margin-top: 2.2em; font-size: 22px; font-stretch: 92%; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) and (min-width: 782px) {
	body .rz-route { flex-wrap: wrap !important; row-gap: 40px; }
	body .rz-route > .wp-block-column { flex-basis: 33.333% !important; flex-grow: 0; }
}
@media (max-width: 900px) {
	body .rz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	body .rz-langs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body .rz-lang:nth-child(4) { border-left: 0; padding-left: 0; }
	body .rz-notes { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	body .rz-nav .rz-links a:not(:last-child) { display: none; }
	.rz-route > .wp-block-column { padding: 0 0 32px 34px; }
	.rz-route > .wp-block-column::before { top: 0; bottom: 0; left: 6px; right: auto; border-top: 0; border-left: 2px solid var(--rz-ink); }
	.rz-route > .rz-now::before { border-left-style: dashed; border-top: 0; }
	.rz-split > .wp-block-column, .rz-split > .wp-block-column:first-child { padding-left: 0; padding-right: 0; }
	.rz-split > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--rz-rule); }
	body .rz-grid2, body .rz-voices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	body .rz-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body .rz-lang:nth-child(4) { border-left: 1px solid var(--rz-deep-rule); padding-left: 18px; }
	body .rz-lang:nth-child(odd) { border-left: 0; padding-left: 0; }
	body .rz-facts { grid-template-columns: 1fr 1fr; }
}