/*
Theme Name: X PLAVÁNÍ
Theme URI: https://www.xplavani.cz/
Description: Firemní vizitka X PLAVÁNÍ s.r.o. – logo, fakturační a platební údaje, kontakt. Podřazená šablona Twenty Twenty-Five bez pluginů, se světlým a tmavým režimem podle zařízení. Logo podle logomanuálu (Radek Petřík, 2018).
Author: Ing. Michal Svátek
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: xplavani
*/

/* ---------- Barvy (z logomanuálu: X = C100 K50, PLAVÁNÍ = C100, plavec = M50 Y100) ---------- */
:root {
	--xp-bg: #ffffff;
	--xp-soft: #f2f8fb;        /* jemná vodní plocha */
	--xp-card: #ffffff;
	--xp-text: #1d2328;
	--xp-heading: #0d2a38;
	--xp-muted: #56636c;
	--xp-line: #dbe7ee;
	--xp-x: #00628b;           /* X v logu – odkazy a nadpisy karet (kontrast 6,6 : 1) */
	--xp-modra: #009fe3;       /* PLAVÁNÍ v logu – jen dekorace */
	--xp-oranzova: #f39200;    /* plavec v logu – jen dekorace */
	--xp-link: #00628b;
	--xp-focus: #00628b;
	--xp-shadow: 0 1px 2px rgb(13 42 56 / 5%), 0 10px 30px rgb(13 42 56 / 7%);
	--xp-radius: 18px;
	--xp-gutter: clamp(16px, 4vw, 40px);
	color-scheme: light;
}

/* Tmavý režim podle nastavení zařízení (logo se přepne na inverzní bílou variantu z logomanuálu). */
@media (prefers-color-scheme: dark) {
	:root {
		--xp-bg: #0b1a22;
		--xp-soft: #0f2330;
		--xp-card: #12293a;
		--xp-text: #e4edf2;
		--xp-heading: #ffffff;
		--xp-muted: #a3b5c0;
		--xp-line: #1f3b4d;
		--xp-x: #6cc8f2;
		--xp-link: #7fd0f5;
		--xp-focus: #7fd0f5;
		--xp-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 25%);
		color-scheme: dark;
	}
}

/* ---------- Základ ---------- */
body {
	background: var(--xp-bg);
	color: var(--xp-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--xp-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

::selection {
	background: var(--xp-x);
	color: #fff;
}

.wp-site-blocks {
	padding: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.xp-wrap {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: var(--xp-gutter);
	box-sizing: content-box;
}

/* ---------- Logo ---------- */
.xp-logo {
	display: inline-block;
	line-height: 0;
}

.xp-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bílá varianta jen v tmavém režimu. */
.xp-logo__bile {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	.xp-logo__barevne {
		display: none !important;
	}
	.xp-logo__bile {
		display: block !important;
	}
}

/* ---------- Úvod: velké logo s ochrannou zónou ---------- */
.xp-hero {
	position: relative;
	text-align: center;
	padding: clamp(64px, 12vw, 140px) var(--xp-gutter) clamp(72px, 11vw, 128px);
	background:
		radial-gradient(120% 90% at 50% 0%, var(--xp-soft) 0%, var(--xp-bg) 70%);
	overflow: hidden;
}

.xp-hero .xp-logo {
	width: min(560px, 82vw);
	/* Ochranná zóna = výška písmene N (≈ 15 % výšky loga) – tady je volného místa víc. */
	padding: 1.5rem;
}

.xp-hero__heslo {
	margin: clamp(1rem, 2.5vw, 1.6rem) 0 0;
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--xp-muted);
}

/* Jemná vlnka pod heslem – barvy z loga. */
.xp-hero__vlna {
	display: block;
	width: 120px;
	height: 14px;
	margin: 1.4rem auto 0;
	color: var(--xp-modra);
}

/* ---------- Karty s údaji ---------- */
.xp-udaje {
	padding-block: 0 clamp(56px, 8vw, 96px);
}

.xp-udaje > .wp-block-columns {
	gap: clamp(16px, 2.5vw, 28px);
	margin: 0;
}

.xp-karta {
	height: 100%;
	box-sizing: border-box;
	background: var(--xp-card);
	border: 1px solid var(--xp-line);
	border-radius: var(--xp-radius);
	box-shadow: var(--xp-shadow);
	padding: clamp(22px, 3vw, 32px);
	position: relative;
	overflow: hidden;
}

/* Tenký proužek nahoře v barvách loga. */
.xp-karta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--xp-x) 0 22%, var(--xp-modra) 22% 88%, var(--xp-oranzova) 88%);
}

.xp-karta h2 {
	font-size: 0.85rem;
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--xp-x);
	margin: 0 0 1rem;
}

.xp-karta p {
	margin: 0 0 0.85rem;
	line-height: 1.55;
}

.xp-karta p:last-child {
	margin-bottom: 0;
}

/* Popisek nad hodnotou („IČO“, „IBAN“ …). */
.xp-karta .xp-popis {
	display: block;
	font-size: 0.8rem;
	color: var(--xp-muted);
	letter-spacing: 0.02em;
}

.xp-karta strong {
	font-weight: 600;
	color: var(--xp-heading);
}

.xp-karta code {
	font-family: inherit;
	font-size: inherit;
	font-variant-numeric: tabular-nums;
	background: none;
	padding: 0;
	color: var(--xp-heading);
	font-weight: 500;
	white-space: nowrap; /* IBAN se nesmí rozdělit */
}

/* Tlačítko „Kopírovat“ k číslům (doplní ho skript ve functions.php). */
.xp-kopirovat {
	margin-left: 0.4em;
	padding: 0.15em 0.55em;
	font: inherit;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--xp-x);
	background: transparent;
	border: 1px solid var(--xp-line);
	border-radius: 999px;
	cursor: pointer;
	vertical-align: 0.1em;
	transition: background-color 0.15s, border-color 0.15s;
}

.xp-kopirovat:hover {
	border-color: var(--xp-x);
}

.xp-kopirovat.je-hotovo {
	background: var(--xp-x);
	border-color: var(--xp-x);
	color: var(--xp-bg);
}

@media (max-width: 781px) {
	.xp-udaje > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Podstránky ---------- */
.xp-header {
	border-bottom: 1px solid var(--xp-line);
	background: var(--xp-bg);
}

.xp-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 18px;
}

.xp-header .xp-logo {
	width: 170px;
}

.xp-header__zpet {
	font-size: 0.95rem;
	color: var(--xp-link);
}

.xp-stranka {
	padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
}

.xp-stranka .xp-obsah {
	max-width: 720px;
}

.xp-stranka h1 {
	margin: 0 0 1.5rem;
}

.xp-obsah h2 {
	font-size: 1.3rem;
	margin: 2.2rem 0 0.6rem;
}

.xp-obsah .xp-lead {
	font-size: 1.15rem;
	color: var(--xp-muted);
}

/* ---------- Patička ---------- */
.xp-footer {
	border-top: 1px solid var(--xp-line);
	background: var(--xp-soft);
	color: var(--xp-muted);
	font-size: 0.9rem;
}

.xp-footer__in {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	justify-content: space-between;
	align-items: center;
	padding-block: 22px;
}

.xp-footer p {
	margin: 0;
}

.xp-footer a {
	color: inherit;
}

.xp-footer a:hover {
	color: var(--xp-link);
}

.xp-footer__odkazy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
}

@media (max-width: 600px) {
	.xp-footer__in {
		flex-direction: column;
		align-items: flex-start;
	}
}