/*
Theme Name: SLOVBAT
Theme URI: https://www.slovbat.sk/
Description: Child téma pre web SLOVBAT s.r.o. (výkup použitých batérií, sklad, logistika). Tokeny sú v theme.json, tu je len to, čo editor nastaviť nevie.
Author: Kristl Design Studio
Author URI: https://www.kristldesign.sk/
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.7
Tested up to: 7.1
Text Domain: slovbat-child
*/

/* ------------------------------------------------------------------
   1. Mobilné hodnoty tokenov (do 781 px)
   Presety v theme.json sú v px pre desktop. Na mobile ich prepíšeme
   cez premenné na <body>, takže platia všade, kde sa preset použil.
   ------------------------------------------------------------------ */
@media (max-width: 781px) {
	html body {
		--wp--preset--font-size--nadpis-xl: 36px;
		--wp--preset--font-size--nadpis-l: 28px;
		--wp--preset--font-size--nadpis-m: 21px;
		--wp--preset--font-size--zakladny: 17px;
		--wp--preset--spacing--sekcia-s: 28px;
		--wp--preset--spacing--sekcia-m: 48px;
		--wp--preset--spacing--sekcia-l: 64px;
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* Poistka veľkostí nadpisov (pasca 4): body h1 má vyššiu špecificitu ako globálne štýly,
   preset priradený konkrétnemu bloku v editore ju stále prebije. */
body h1 { font-size: var(--wp--preset--font-size--nadpis-xl); }
body h2 { font-size: var(--wp--preset--font-size--nadpis-l); }
body h3 { font-size: var(--wp--preset--font-size--nadpis-m); }

/* Zalamovanie ako v schválenom náhľade. WordPress dáva nadpisom aj odsekom
   text-wrap: pretty, preto vyššia špecificita cez body. */
body :is(h1, h2, h3) {
	text-wrap: balance;
	overflow-wrap: break-word;
}
body p {
	text-wrap: wrap;
}

/* ------------------------------------------------------------------
   2. Rozostupy medzi susednými blokmi (editor ich nevie nastaviť)
   ------------------------------------------------------------------ */

/* Žiadna medzera medzi sekciami a pred pätičkou (pasca 13) */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + *,
.wp-block-post-content > * + .alignfull {
	margin-block-start: 0;
}

/* Pod nadpisom H2 o niečo väčší odstup ako medzi odsekmi */
.wp-block-heading:is(h2) + * {
	margin-block-start: 24px;
}

/* Odkazy */
a {
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   3. Hlavička – prilepená hore, výška riadku
   ------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(72px + var(--wp-admin--admin-bar--position-offset, 0px));
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 50;
}

.slovbat-hlavicka__vnutro {
	min-height: 72px;
}

@media (max-width: 781px) {
	html { scroll-padding-top: calc(64px + var(--wp-admin--admin-bar--position-offset, 0px)); }
	.slovbat-hlavicka__vnutro { min-height: 64px; }
}

/* ------------------------------------------------------------------
   4. Menu – telefón ako tlačidlo, zbalenie do 1100 px (pasca 18)
   ------------------------------------------------------------------ */
.slovbat-menu .slovbat-menu__tel > .wp-block-navigation-item__content {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	border: 2px solid var(--wp--preset--color--hlavna);
	background-color: var(--wp--preset--color--hlavna);
	color: var(--wp--preset--color--pozadie);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.slovbat-menu .slovbat-menu__tel > .wp-block-navigation-item__content:hover,
.slovbat-menu .slovbat-menu__tel > .wp-block-navigation-item__content:focus {
	border-color: #A31F25;
	background-color: #A31F25;
	color: var(--wp--preset--color--pozadie);
}

.slovbat-menu .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Tlačidlá Menu / Zavrieť ako textové tlačidlo s rámikom */
.slovbat-menu .wp-block-navigation__responsive-container-open,
.slovbat-menu .wp-block-navigation__responsive-container-close {
	padding: 9px 16px;
	border: 2px solid currentColor;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
}

@media (max-width: 1100px) {
	.slovbat-menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.slovbat-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { display: flex; }
}

/* Otvorené mobilné menu: položky pod sebou zarovno vľavo, telefón dole cez celú šírku */
.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 16px var(--wp--style--root--padding-right) 24px var(--wp--style--root--padding-left);
}
.slovbat-menu .is-menu-open .wp-block-navigation__responsive-dialog,
.slovbat-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}
.slovbat-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 56px;
}
.slovbat-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch !important;
	gap: 0 !important;
}
.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--tlmena);
}
.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 0;
	font-size: 18px;
}
.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open .slovbat-menu__tel {
	border-bottom: 0;
	margin-top: 20px;
}
.slovbat-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .slovbat-menu__tel > .wp-block-navigation-item__content {
	padding: 14px 26px;
	text-align: center;
}

/* ------------------------------------------------------------------
   5. Úvod (blok Obálka)
   ------------------------------------------------------------------ */
/* Farba pod fotkou, kým sa fotka načíta (obálka farbu pozadia v editore nemá) */
.slovbat-uvod.wp-block-cover {
	background-color: var(--wp--preset--color--doplnkova);
	/* bočný okraj rovnaký ako v ostatných sekciách (obálka má inak 1em) */
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.slovbat-uvod__text {
	max-width: 30em;
}

/* Obrysové tlačidlo na tmavej fotke: pri prejdení myšou biele */
.slovbat-uvod .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.slovbat-uvod .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--pozadie);
	border-color: var(--wp--preset--color--pozadie);
	color: var(--wp--preset--color--text-tmavy);
}

@media (max-width: 781px) {
	/* Obálka má výšku a prechod nastavené v editore (inline), na mobile ich treba prebiť */
	.slovbat-uvod.wp-block-cover { min-height: 520px !important; }
	.slovbat-uvod > .wp-block-cover__background { background: rgba(43, 48, 54, 0.8) !important; }
}

/* ------------------------------------------------------------------
   6. Dva stĺpce – na mobile vždy najprv text, potom fotka
   (blok Stĺpce poradie na mobile meniť nevie)
   ------------------------------------------------------------------ */
@media (max-width: 781px) {
	.slovbat-dvojstlpec > .slovbat-dvojstlpec__foto { order: 2; }
}

.slovbat-foto img {
	width: 100%;
}

/* ------------------------------------------------------------------
   7. Tmavá sekcia (Kontakt)
   ------------------------------------------------------------------ */
.slovbat-sekcia--tmava a:hover,
.slovbat-sekcia--tmava a:focus {
	color: var(--wp--preset--color--pozadie);
	text-decoration-thickness: 2px;
}
.slovbat-sekcia--tmava .wp-block-button__link:hover {
	text-decoration: none;
}

/* ------------------------------------------------------------------
   8. Na stiahnutie – riadky dokumentov (blok Súbor)
   ------------------------------------------------------------------ */
.slovbat-subory .wp-block-file.slovbat-subor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: inherit;
}
.slovbat-subory .slovbat-subor > a:not(.wp-block-file__button) {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.slovbat-subory .slovbat-subor > a:not(.wp-block-file__button):hover {
	text-decoration: underline;
}
.slovbat-subory .slovbat-subor .wp-block-file__button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: underline;
	white-space: nowrap;
}
.slovbat-subory .slovbat-subor .wp-block-file__button:hover,
.slovbat-subory .slovbat-subor .wp-block-file__button:focus {
	background: none;
	color: var(--wp--preset--color--hlavna);
}
@media (max-width: 600px) {
	.slovbat-subory .wp-block-file.slovbat-subor {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ------------------------------------------------------------------
   9. Pohyby (rovnaké ako v schválenom náhľade)
   Triedy slovbat-pohyb, is-viditelne a js-pohyb pridáva skript
   assets/js/slovbat-pohyby.js – bez neho je obsah normálne viditeľný.
   Pri zapnutom obmedzení pohybu v systéme sa nič nehýbe.
   ------------------------------------------------------------------ */
.slovbat-hlavicka {
	transition: box-shadow 0.3s ease;
}
.slovbat-hlavicka.is-pod-hero {
	box-shadow: 0 2px 12px rgba(28, 31, 35, 0.08);
}
.slovbat-uvod.wp-block-cover {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	/* Úvod pri načítaní: fotka sa pomaly priblíži, text sa postupne vysunie zdola.
	   V editore (.editor-styles-wrapper) sa nič nehýbe. */
	body:not(.editor-styles-wrapper) .slovbat-uvod .wp-block-cover__image-background {
		transform-origin: 50% 60%;
		animation: slovbat-priblizenie 7s ease-out both;
	}
	body:not(.editor-styles-wrapper) .slovbat-uvod__stlpec > * {
		animation: slovbat-vysun 0.7s ease-out both;
	}
	body:not(.editor-styles-wrapper) .slovbat-uvod__stlpec > :nth-child(1) { animation-delay: 0.15s; }
	body:not(.editor-styles-wrapper) .slovbat-uvod__stlpec > :nth-child(2) { animation-delay: 0.3s; }
	body:not(.editor-styles-wrapper) .slovbat-uvod__stlpec > :nth-child(3) { animation-delay: 0.45s; }

	/* Sekcie pri doskrolovaní */
	.js-pohyb .slovbat-pohyb {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		transition-delay: var(--oneskorenie, 0s);
	}
	.js-pohyb .slovbat-pohyb--zlava { transform: translateX(-24px); }
	.js-pohyb .slovbat-pohyb--sprava { transform: translateX(24px); }
	.js-pohyb .slovbat-pohyb.is-viditelne { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
	/* na mobile všetko zdola, aby nič nevyčnievalo do strán */
	.js-pohyb .slovbat-pohyb--zlava,
	.js-pohyb .slovbat-pohyb--sprava { transform: translateY(16px); }
}
@keyframes slovbat-priblizenie {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}
@keyframes slovbat-vysun {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}