/*
Theme Name: EKC – Extrémna Krížová Cesta
Theme URI: https://www.ekc.sk/
Author: Extrémna Krížová Cesta
Description: Child téma pre Twenty Twenty-Five s dizajnom podľa webu ekc.sk: červená horná lišta, pevný ľavý panel s logom a menu, písmo Metropolis a červený akcent. Obsahuje vzory stránok EKC a štýly pre WooCommerce.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ekc
*/

/*
 * Rozloženie stránky:
 * - od 960 px: pevná červená lišta hore a pevný ľavý panel s logom, košíkom, vyhľadávaním a menu,
 * - pod 960 px: panel sa zmení na mobilnú hlavičku (logo, názov, košík, lupa, hamburger).
 * Súbor sa načítava aj v editore; pevné pozicovanie platí len na webe
 * (v editore má body triedu .editor-styles-wrapper).
 * Štýly blokov sú v assets/css/blocks.css, farby a písma v theme.json.
 */

:root {
	--ekc-lista-h: 40px;
	--ekc-panel-w: 300px;
	--ekc-adminbar-h: var(--wp-admin--admin-bar--height, 0px);
	--ekc-ciara: rgba(77, 25, 10, 0.08);
}

body {
	background-image: url("assets/images/vzor-ciary.svg");
}

/* ---------- Horná lišta ---------- */

.ekc-topbar {
	gap: 20px;
	min-height: var(--ekc-lista-h);
	margin: 0;
	padding: 0 20px;
	background: var(--wp--preset--color--ekc-lista);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	line-height: 1.2;
}

.ekc-topbar .wp-block-social-links {
	gap: 12px;
	margin: 0;
}

.ekc-topbar .wp-social-link a {
	padding: 0;
}

.ekc-topbar .wp-social-link svg {
	width: 18px;
	height: 18px;
}

.ekc-topbar__kontakt {
	display: flex;
	gap: 22px;
	margin: 0;
	white-space: nowrap;
}

.ekc-topbar__kontakt a,
.ekc-topbar__kontakt a:hover {
	color: inherit;
}

.ekc-topbar__kontakt a {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.ekc-topbar__kontakt a:hover {
	text-decoration-color: currentColor;
}

.ekc-topbar__kontakt a::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: var(--ekc-ikona) no-repeat center / contain;
	mask: var(--ekc-ikona) no-repeat center / contain;
}

.ekc-topbar__kontakt a[href^="mailto:"] {
	--ekc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='1.5'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E");
}

.ekc-topbar__kontakt a[href^="tel:"] {
	--ekc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

/* ---------- Bočný panel: logo, názov a slogan ---------- */

.ekc-sidebar {
	margin: 0;
	background: var(--wp--preset--color--base) url("assets/images/vzor-trojuholniky.svg");
}

.ekc-brand .wp-block-site-logo {
	display: flex;
	justify-content: center;
	margin: 0;
}

.ekc-brand .wp-block-site-logo img {
	height: auto;
}

.ekc-brand__text {
	margin-top: 16px;
}

.ekc-brand .wp-block-site-title,
.ekc-brand .wp-block-site-tagline {
	margin: 0;
	text-align: center;
}

.ekc-brand .wp-block-site-title a {
	text-decoration: none;
}

/* Slogan s krátkymi čiarami po stranách. */
.ekc-brand .wp-block-site-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.ekc-brand .wp-block-site-tagline::before,
.ekc-brand .wp-block-site-tagline::after {
	content: "";
	flex: 0 0 26px;
	height: 1px;
	background: currentColor;
}

/* ---------- Bočný panel: košík a vyhľadávanie ---------- */

.ekc-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.ekc-tools > * {
	margin: 0 !important;
}

.ekc-kosik .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 35px;
	padding: 0 14px;
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
	font-weight: 700;
}

.ekc-kosik .wc-block-mini-cart__button::before {
	content: "Košík";
}

.ekc-kosik .wc-block-mini-cart__button:hover {
	opacity: 1;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ekc-kosik .wc-block-mini-cart__icon {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--ekc-ruzova);
}

.ekc-kosik .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.ekc-hladanie {
	width: 100%;
}

.ekc-hladanie .wp-block-search__inside-wrapper {
	gap: 0;
}

.ekc-hladanie .wp-block-search__input {
	height: 38px;
	padding: 0 10px;
	border: 0;
	border-radius: 3px 0 0 3px;
	background: rgba(241, 226, 217, 0.3);
	color: var(--wp--preset--color--accent-3);
	font-size: 0.95rem;
	font-weight: 700;
}

.ekc-hladanie .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--accent-1);
	opacity: 1;
}

.ekc-hladanie .wp-block-search__button,
.ekc-hladanie-mobil .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 38px;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 0 3px 3px 0 !important;
	background: var(--wp--preset--color--accent-1);
	box-shadow: none;
	color: var(--wp--preset--color--base);
}

.ekc-hladanie .wp-block-search__button svg,
.ekc-hladanie-mobil .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ekc-sidebar__oddelovac {
	width: 30px;
	margin-inline: auto;
	border: 0;
	border-top: 1px solid rgba(77, 25, 10, 0.15) !important;
}

/* ---------- Bočný panel: menu ---------- */

.ekc-nav {
	width: 100%;
}

.ekc-nav .wp-block-navigation__container {
	width: 100%;
	gap: 14px;
}

.ekc-nav .wp-block-navigation-item {
	position: relative;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	text-align: center;
}

.ekc-nav .wp-block-navigation-item__content {
	display: block;
	flex: 1 1 100%;
	padding: 0 28px;
	line-height: 1.5;
}

.ekc-nav .current-menu-item > .wp-block-navigation-item__content,
.ekc-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.ekc-nav .has-child:has(.current-menu-item) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

/* Šípka podmenu vpravo: zatvorené „>“, otvorené „v“. */
.ekc-nav .wp-block-navigation__submenu-icon {
	position: absolute;
	top: 5px;
	right: 4px;
	z-index: 2;
	width: 14px;
	height: 14px;
	margin: 0;
	padding: 2px;
	color: var(--wp--preset--color--contrast);
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

.ekc-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.ekc-nav .has-child:has(.current-menu-item) > .wp-block-navigation__submenu-icon {
	transform: none;
	color: var(--wp--preset--color--accent-1);
}

/* Podmenu ako rozbaľovací zoznam (akordeón) namiesto vysúvacieho okna. */
.ekc-sidebar .ekc-nav .has-child > .wp-block-navigation__submenu-container,
.ekc-sidebar .ekc-nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.ekc-sidebar .ekc-nav .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
	position: static;
	flex-basis: 100%;
	width: 100%;
	min-width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	transition: none;
}

.ekc-sidebar .ekc-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.ekc-sidebar .ekc-nav .has-child.has-child:has(.current-menu-item) > .wp-block-navigation__submenu-container {
	height: auto;
	padding: 8px 0 4px;
	overflow: visible;
	visibility: visible;
	opacity: 1;
}

.ekc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	justify-content: center;
	padding: 2px 24px;
	font-size: 0.84rem;
	line-height: 1.35;
}

/* Rámik okolo šípky len pri ovládaní klávesnicou, nie po kliknutí myšou. */
.ekc-nav .wp-block-navigation__submenu-icon:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Pätička ---------- */

.ekc-footer {
	margin-top: 0;
}

.ekc-footer__siete a,
.ekc-footer__pravne a {
	color: var(--wp--preset--color--accent-3);
	text-decoration-color: rgba(140, 47, 18, 0.6);
}

.ekc-footer__siete a {
	font-style: italic;
}

.ekc-footer__pravne {
	color: var(--wp--preset--color--accent-4);
}

/* ---------- Počítač (od 960 px): pevná lišta a pevný bočný panel ---------- */

@media (min-width: 960px) {
	html {
		scroll-padding-top: calc(var(--ekc-lista-h) + 20px);
	}

	body:not(.editor-styles-wrapper) .wp-site-blocks {
		padding-top: var(--ekc-lista-h);
		padding-left: var(--ekc-panel-w);
	}

	body:not(.editor-styles-wrapper) .ekc-topbar {
		position: fixed;
		top: var(--ekc-adminbar-h);
		right: 0;
		left: 0;
		z-index: 30;
		height: var(--ekc-lista-h);
	}

	.ekc-sidebar {
		padding: 30px 30px 40px;
	}

	body:not(.editor-styles-wrapper) .ekc-sidebar {
		position: fixed;
		top: calc(var(--ekc-adminbar-h) + var(--ekc-lista-h));
		bottom: 0;
		left: 0;
		z-index: 20;
		width: var(--ekc-panel-w);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-right: 1px solid var(--ekc-ciara);
		scrollbar-width: thin;
		scrollbar-color: rgba(77, 25, 10, 0.25) transparent;
	}

	/* V editore má bočný panel šírku ako na webe, aby sa dal upravovať v reálnej podobe. */
	.editor-styles-wrapper .ekc-sidebar {
		max-width: var(--ekc-panel-w);
		border: 1px solid var(--ekc-ciara);
	}

	.ekc-sidebar > * {
		margin-block: 0;
	}

	.ekc-sidebar > * + * {
		margin-block-start: 30px;
	}

	.ekc-only-mobile {
		display: none !important;
	}
}

/* ---------- Tablet a mobil (pod 960 px): hlavička v jednom riadku ---------- */

@media (max-width: 959px) {
	.ekc-topbar,
	.ekc-only-desktop {
		display: none !important;
	}

	.ekc-sidebar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--ekc-ciara);
	}

	.ekc-sidebar > * {
		margin-block: 0 !important;
	}

	.ekc-brand {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
	}

	.ekc-brand .wp-block-site-logo img {
		width: 56px !important;
	}

	.ekc-brand__text {
		min-width: 0;
		margin: 0;
	}

	.ekc-brand .wp-block-site-title,
	.ekc-brand .wp-block-site-tagline {
		text-align: left;
	}

	.ekc-brand .wp-block-site-title {
		font-size: 1rem;
		line-height: 1.35;
	}

	.ekc-brand .wp-block-site-tagline {
		justify-content: flex-start;
		font-size: 0.875rem;
	}

	.ekc-brand .wp-block-site-tagline::after {
		display: none;
	}

	.ekc-brand .wp-block-site-tagline::before {
		flex-basis: 18px;
	}

	.ekc-tools {
		flex-direction: row;
		gap: 2px;
	}

	.ekc-kosik .wc-block-mini-cart__button {
		height: 40px;
		padding: 0 8px;
		background: transparent;
		box-shadow: none;
	}

	.ekc-kosik .wc-block-mini-cart__button::before {
		content: none;
	}

	.ekc-kosik .wc-block-mini-cart__icon {
		width: 24px;
		height: 24px;
		color: var(--wp--preset--color--contrast);
	}

	.ekc-hladanie-mobil .wp-block-search__button {
		width: 40px;
		height: 40px;
		border-radius: 3px !important;
		background: transparent;
		color: var(--wp--preset--color--contrast);
	}

	.ekc-hladanie-mobil.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
		border: 0;
	}

	.ekc-hladanie-mobil:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		top: 100%;
		right: 16px;
		left: 16px;
		z-index: 10;
	}

	.ekc-hladanie-mobil:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		border: 0;
		background: var(--wp--preset--color--base);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	}

	.ekc-hladanie-mobil:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
		background: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--base);
	}

	.ekc-sidebar {
		position: relative;
	}

	/* Hamburger a menu cez celú obrazovku. */
	.ekc-nav-mobil .wp-block-navigation__responsive-container-open {
		padding: 6px;
		color: var(--wp--preset--color--contrast);
	}

	.ekc-nav-mobil .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	.ekc-nav-mobil .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px 20px 48px;
		background: var(--wp--preset--color--base) url("assets/images/vzor-trojuholniky.svg") !important;
		color: var(--wp--preset--color--contrast) !important;
		text-align: center;
	}

	.ekc-nav-mobil .is-menu-open .wp-block-navigation__container {
		gap: 16px;
	}

	.ekc-nav-mobil .is-menu-open .wp-block-navigation-item__content {
		font-size: 1.05rem;
	}

	.ekc-nav-mobil .is-menu-open .wp-block-navigation__submenu-container {
		gap: 6px;
		padding-top: 8px !important;
	}

	.ekc-nav-mobil .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.9rem;
	}

	.ekc-nav-mobil .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent-1);
	}
}

@media (max-width: 480px) {
	.ekc-brand .wp-block-site-logo img {
		width: 46px !important;
	}

	.ekc-brand .wp-block-site-title {
		font-size: 0.875rem;
	}

	.ekc-brand .wp-block-site-tagline {
		gap: 8px;
		font-size: 0.75rem;
		letter-spacing: 0.5px;
	}
}