/*
Theme Name: Zvonkove-systemy.cz
Template: twentytwentyfive
Version: 1.0.0
Text Domain: zvonkove-systemy
*/

/* Small, deliberately narrow CSS reset. This theme is a WordPress block
   theme - most spacing (paragraph/heading margins, block gaps) is already
   normalized via theme.json's spacing system, so a classic full reset
   (zeroing all margins, forcing img/media to display:block, etc.) would
   fight that and risk breaking block layout and the hero section's
   intentionally-overflowing, absolutely-positioned artwork. This only
   covers browser inconsistencies that are safe sitewide regardless of
   WordPress's own styling. (The a:focus-visible rule further down is part
   of this same reset - it lives next to the other link/focus rules it's
   grouped with instead of here.) */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Self-hosted fonts (previously loaded from fonts.googleapis.com), paired
   with <link rel=preload> in functions.php for the above-the-fold weights.
   font-display: swap (rather than optional) guarantees Exo/PT Sans are
   always used once they arrive - optional would occasionally skip them
   permanently for a page view if the font missed its ~100ms grace window,
   which is worse for this small, same-origin, preloaded file than the
   brief swap-in flash swap can cause. */
@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/exo-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/exo-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/exo-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/exo-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/exo-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/exo-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('assets/fonts/exo-900-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Exo';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('assets/fonts/exo-900-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/ptsans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/ptsans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/ptsans-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/ptsans-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

strong,
b {
	font-weight: 700;
}

/* The outer template-part element is a permanent, never-resizing spacer
   that reserves the header's full-size height in normal document flow.
   The actual visible header (.site-header-inner) is always fixed on top
   of it. Because the spacer never changes size, nothing below it ever
   has to jump when the header itself shrinks on scroll. */
header.wp-block-template-part {
	position: relative;
	height: 82px;
}

.site-header-inner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 82px;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px;
	/* Same side padding as the content sections (WordPress's root padding,
	   30-50px depending on the window width), so on narrower windows the
	   logo and menu line up with the headings below. */
	padding: 10px var(--wp--style--root--padding-right, 24px) 10px var(--wp--style--root--padding-left, 24px) !important;
	box-sizing: border-box;
}

.site-header-inner .wp-block-group.is-layout-flex {
	align-items: flex-end;
	min-height: 62px;
}

.site-header-inner .wp-block-site-logo {
	align-self: center;
}

.site-header-inner .wp-block-site-logo img {
	transition: transform 0.15s ease;
	transform-origin: center;
}

.site-header-inner .custom-logo-link:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.is-stuck .wp-block-site-logo img {
	transform: scale(0.629);
}

.wp-block-navigation {
	gap: 25px !important;
}

.wp-block-navigation a {
	color: #2974bb !important;
	text-decoration: none !important;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	text-transform: uppercase;
	padding: 15px 0 !important;
}

/* WordPress only switches the menu to the hamburger below a fixed 600px.
   Between that and 700px the full menu (~383px) doesn't fit next to the
   logo and wraps onto a second line, so the hamburger takes over up to
   700px instead. The "header" prefix outranks core's equally specific
   600px rules regardless of stylesheet order. */
@media (min-width: 600px) and (max-width: 699.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation a:hover {
	color: #154577 !important;
}

.nav-home-active a,
a.nav-home-active {
	color: #154577 !important;
}

/* Sitewide focus-ring reset. Previously the old Revolution Slider
   stylesheet (removed along with the slider itself) happened to carry a
   broad "outline: none" reset that was masking the browser's default
   focus ring on every link that doesn't set its own - most visibly the
   white "back to top" button and the dark-background contact links,
   where the default outline color (inherited from the link's own white
   text) stood out as a stray white border on click. :focus-visible
   keeps it keyboard-only, so mouse/touch clicks stay borderless while
   tab-navigation still gets a visible ring, in the link's own color via
   currentColor. */
a:focus {
	outline: none;
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Mouse/touch clicks only - :not(:focus-visible) keeps the keyboard
   focus ring from the a:focus-visible rule above, which these more
   specific (and !important) rules would otherwise override. The :has()
   one is kept on its own: a browser without :has() support drops the
   whole selector list it appears in. */
.wp-block-navigation a:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

.wp-block-navigation-item:focus-within:not(:has(:focus-visible)) {
	outline: none !important;
	box-shadow: none !important;
}

#uvod img,
#uvod img:focus,
#uvod a:focus img {
	outline: none;
	border: none;
}

/* ============ HERO ============
   A single static hero scene with staggered entrance animations and two
   looping decorative icons - previously built with jQuery + Revolution
   Slider (~114 KB of JS/CSS) for what is, in the end, just a handful of
   CSS transitions. Pure CSS keyframes instead: same visual effect, zero
   JS, nothing to block rendering on. */
.hero {
	padding: 1px 0;
	overflow: hidden;
}

.hero-inner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.hero-copy {
	flex: 1 1 420px;
	min-width: 0;
}

.hero-line {
	margin: 0;
	font-family: Exo, sans-serif;
	font-weight: 900;
	line-height: 1.15;
	opacity: 0;
	animation: hero-fade-in-left 0.8s ease-out forwards;
}

.hero-line-1 {
	font-size: 36px;
	color: #565656;
	animation-delay: 0s;
}

.hero-line-2,
.hero-line-3 {
	font-size: 48px;
	color: #2974bb;
	animation-delay: 0.4s;
}

.hero-line-4 {
	font-size: 25px;
	color: #565656;
	margin-top: 8px;
	animation-delay: 1s;
}

.hero-art {
	position: relative;
	flex: 0 1 480px;
	height: 385px;
	min-width: 280px;
}

/* Both images are positioned absolutely (anchored to the container's right
   edge) instead of via flex + negative margin - margin-left on a flex item
   gets cancelled out by justify-content: flex-end re-anchoring the line to
   the container's end, so it had no visible effect. Absolute + right: %
   lets each image's horizontal position be tuned independently. */
.hero-art-front {
	position: absolute;
	right: 18%;
	bottom: 0;
	z-index: 2;
	height: 100%;
	width: auto;
	opacity: 0;
	animation: hero-fade-in-right 0.8s ease-out 2s forwards;
}

.hero-art-back {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 100%;
	width: auto;
	opacity: 0;
	animation: hero-fade-in-right 0.8s ease-out 1.6s forwards;
}

.hero-badge {
	position: absolute;
	left: -6%;
	top: 50%;
	transform: translateY(-50%);
	width: 34%;
	aspect-ratio: 163 / 120;
	z-index: 3;
	opacity: 0;
	animation: hero-fade-in 0.6s ease-out 2.6s forwards;
}

.hero-badge img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-badge-wave {
	animation: hero-pulse 2.6s ease-in-out 3.2s infinite;
	transform-origin: 50% 50%;
}

.hero-badge-bell {
	animation: hero-pendulum 0.4s ease-in-out 3.2s infinite;
	transform-origin: 50% 50%;
}

@keyframes hero-fade-in-left {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-fade-in-right {
	from { opacity: 0; transform: translateX(30px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hero-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

@keyframes hero-pendulum {
	0%, 100% { transform: rotate(-8deg); }
	50% { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-line,
	.hero-art-front,
	.hero-art-back,
	.hero-badge {
		animation: none;
		opacity: 1;
	}

	.hero-badge-wave,
	.hero-badge-bell {
		animation: none;
	}
}

@media (max-width: 782px) {
	.hero {
		padding-top: 28px;
	}

	.hero-inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	/* align-items was "center" on the base rule, which sizes a flex item's
	   cross axis (width, now that the container is column-direction) to
	   shrink-to-fit its content - here that floors at the width of the
	   longest unbreakable word, wider than the phone screen, so the text
	   overflowed off the right edge instead of wrapping. flex: none +
	   width: 100% (with align-items: stretch above) makes it wrap inside
	   the actual container width instead. */
	.hero-copy {
		flex: none;
		width: 100%;
	}

	.hero-line-1 {
		font-size: 24px;
	}

	.hero-line-2,
	.hero-line-3 {
		font-size: 32px;
	}

	.hero-line-4 {
		font-size: 17px;
	}

	/* flex-basis switches to governing height (not width) once the flex
	   container becomes column-direction, so the desktop "flex: 0 1 480px"
	   would otherwise force a 480px-tall art box on mobile. flex: none lets
	   the explicit width/height below take over instead. */
	.hero-art {
		flex: none;
		width: 100%;
		max-width: 320px;
		height: 230px;
		margin: 0 auto;
	}
}

.wp-block-post-content > .wp-block-group.alignfull,
#slider-wrap-outer,
main.wp-block-group > .wp-block-post-content,
footer.wp-block-template-part {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wp-block-post-content > .wp-block-group.alignfull {
	padding-top: 70px !important;
	padding-bottom: 70px !important;
	box-sizing: border-box;
}

.wp-block-post-content h3.wp-block-heading {
	font-size: 24px;
	font-weight: 800;
}

/* Feature icon grid */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px 2px;
	margin-top: 32px;
}

@media (max-width: 782px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.feature-box {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background-color: #4189ce;
	padding: 20px 10px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	overflow-anchor: none;
}

.feature-grid.is-visible .feature-box {
	opacity: 1;
	transform: translateY(0);
}

/* The reveal-on-scroll trigger never runs inside the editor (it's only
   enqueued on the front end), so without this the tiles would stay stuck
   at their hidden starting state while editing. */
.editor-styles-wrapper .feature-box {
	opacity: 1;
	transform: none;
}

.feature-box .feature-icon {
	width: 56px;
	height: 56px;
	border: 2px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
}

.feature-box .feature-icon svg {
	width: 100%;
	height: 100%;
	fill: #fff;
}

.feature-box p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	color: #fff;
	margin: 0;
}

footer .has-footer-dark-background-color {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	box-sizing: border-box;
}

#kontakt {
	padding-top: 70px !important;
	padding-bottom: 70px !important;
	box-sizing: border-box;
}

/* Footer */
.contact-row {
	align-items: flex-start !important;
	gap: 10px !important;
	margin-top: 0 !important;
	margin-bottom: 8px !important;
}

.contact-row p {
	margin: 0;
}

.contact-row a {
	color: #fff;
	text-decoration: none;
}

.contact-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: #fff;
	margin-top: 3px;
}

#go-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	display: none;
	height: 40px;
	width: 40px;
	background: #193d72;
	text-align: center;
	line-height: 40px;
	z-index: 9999;
}

#go-top a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	color: #fff;
	text-decoration: none !important;
}

/* Keyboard focus ring drawn inside the button rather than around it -
   the button floats over both light and dark sections, so a ring outside
   it would disappear against one of them. Inside, it always sits on the
   button's own background in the arrow's color. */
#go-top a:focus-visible {
	outline-offset: -4px;
	border-radius: inherit;
}


#go-top a svg {
	width: 18px;
	height: 18px;
}

.contact-logo-column {
	display: flex;
	justify-content: flex-start;
}

/* White version of the dark logos on the contact section's dark
   background. Kept here as a class instead of an inline style on the
   <img>, because core/image's save() doesn't emit "filter" - an inline
   one makes the block editor flag the block as invalid content. */
.logo-white img {
	filter: brightness(0) invert(1);
}