/*
Theme Name: MetaPlate
Theme URI: https://ouhrabka.cz
Author: Martin Ouhrabka
Author URI: https://ouhrabka.cz
Description: Vymazlená WP šablona
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metaplate
*/

/* ==========================================================================
   1. ZÁKLADNÍ NASTAVENÍ A POMOCNÉ TŘÍDY
   ========================================================================== */

/*
   Globální reset pro box-sizing.
   Zajišťuje, že padding a border jsou započítány do celkové šířky a výšky prvků.
   Předchází problémům s přetékáním obsahu.
*/
html {
	scroll-behavior: smooth; /* TUTO ŘÁDKU PŘIDEJTE */
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

/* Import hlavního fontu Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* Pomocná třída pro aplikaci fontu Poppins */
.poppins-font {
	font-family: 'Poppins', sans-serif;
}

/* Pomocná třída pro vlastní mezery mezi odstavci (např. v popisu nemovitosti) */
.custom-prose-spacing p {
	margin-bottom: 1rem; /* Odpovídá Tailwind třídě mb-4 */
}

/*
   Globální reset pro box-sizing.
   Zajišťuje, že padding a border jsou započítány do celkové šířky a výšky prvků.
   Předchází problémům s přetékáním obsahu.
*/
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}


/* ==========================================================================
   2. VLASTNÍ ANIMACE
   ========================================================================== */

@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.animate-slideDown {
	animation: slideDown 0.8s ease-out;
}


/* ==========================================================================
   3. PŘEPSÁNÍ STYLŮ EXTERNÍCH PLUGINŮ
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Swiper.js (Slider referencí)
   -------------------------------------------------------------------------- */

/* Přepsání pozicování paginace, aby byla v normálním toku dokumentu */
.swiper-references .swiper-pagination-references {
	position: relative !important;
	bottom: auto !important;
	top: auto !important;
}

/* Vzhled neaktivní tečky v paginaci */
.swiper-pagination-bullet {
	background-color: #d1d5db; /* gray-300 */
	opacity: 1;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	transition: background-color 0.3s ease;
}

/* Vzhled aktivní tečky v paginaci */
.swiper-pagination-bullet-active {
	background-color: #262e61; /* customBlue */
}

/* --------------------------------------------------------------------------
   3.2 FsLightbox.js (Galerie na detailu nemovitosti)
   -------------------------------------------------------------------------- */

/* Základní styl pro tlačítko šipky - průhledné s bílým rámečkem */
.fslightbox-slide-btn {
	background-color: transparent !important;
	border: 2px solid white !important;
	border-radius: 50% !important;
	width: 48px !important;
	height: 48px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	transition: all 0.2s ease-in-out;
}

/* Vzhled šipky při najetí myší */
.fslightbox-slide-btn:hover {
	background-color: rgba(255, 255, 255, 0.15) !important;
	transform: scale(1.05);
}

/* Skrytí původní SVG ikony, kterou vkládá plugin */
.fslightbox-slide-btn .fslightbox-svg {
	display: none !important;
}

/* Vytvoření prostoru pro naši vlastní ikonu */
.fslightbox-slide-btn::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Vložení vlastní BÍLÉ ikony pro šipku VPRAVO */
.fslightbox-slide-btn-container-next .fslightbox-slide-btn::after {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="%23FFFFFF"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>');
}

/* Vložení vlastní BÍLÉ ikony pro šipku VLEVO */
.fslightbox-slide-btn-container-previous .fslightbox-slide-btn::after {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="%23FFFFFF"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>');
}

/* Odsazení šipek od okrajů obrazovky */
.fslightbox-slide-btn-container-previous {
	left: 1.5rem !important;
}

.fslightbox-slide-btn-container-next {
	right: 1.5rem !important;
}


/* ==========================================================================
   4. STYLY PRO FORMULÁŘE
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Reset pro Contact Form 7
   -------------------------------------------------------------------------- */

/* Odstranění výchozích <p> a <br> tagů, které CF7 generuje,
   aby bylo možné formulář plně stylovat pomocí Flexboxu/Gridu. */
.wpcf7-form p, .wpcf7-form br {
	display: none;
}

/* Zajištění, aby se obalující div s Tailwind třídami zobrazil */
.wpcf7-form .space-y-4 {
	display: block;
}

/* --------------------------------------------------------------------------
   4.2 Formulář na tmavém pozadí (třída .form-input)
   Používá se např. u kontaktního formuláře na detailu nemovitosti.
   -------------------------------------------------------------------------- */
.form-input {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.3);
	font-family: "Poppins", sans-serif;
	font-size: 0.8rem;
	color: white;
	padding: 10px 14px;
	border-radius: 6px;
	transition: all 0.2s ease-in-out;
	outline: none;
	box-shadow: none;
}

.form-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}

.form-input:focus,
.form-input:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Odesílací tlačítko pro tmavé pozadí (třída .form-submit) */
input.wpcf7-submit.form-submit {
	display: inline-block;
	background-color: #d6398d; /* customPink */
	color: white;
	font-weight: 700;
	padding: 0.75rem 1.5rem; /* Odpovídá px-6 py-3 */
	border-radius: 6px;      /* Odpovídá rounded-md */
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

input.wpcf7-submit.form-submit:hover {
	background-color: #2e3477; /* customBlue */
}


/* --------------------------------------------------------------------------
   4.3 Formulář na světlém pozadí (patička) - "NUKLEÁRNÍ" OPRAVA
   -------------------------------------------------------------------------- */

/*
 * Tento kód používá vysoce specifické selektory a !important,
 * aby agresivně přepsal jakékoli konfliktní styly.
 */

/* KROK 1: Oprava přetékání kontejneru */
/* Cílíme na obalující SPAN a měníme ho na 'block', aby respektoval šířku. */
.footer-form-wrapper .wpcf7-form-control-wrap {
	display: block !important;
}

/* KROK 2: Agresivní přepis stylů pro VŠECHNA pole v patičkovém formuláři */
.footer-form-wrapper .wpcf7-form .wpcf7-form-control {
	/* Vlastnosti pro layout a box model */
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;

	/* Vlastnosti pro vzhled - barvy a rámečky */
	background-color: #ffffff !important;
	color: #111827 !important; /* Tmavý text */
	border: 1px solid #cccccc !important; /* VÝRAZNÝ, TMAVĚ MODRÝ RÁMEČEK */

	/* Ostatní vlastnosti */
	padding: 0.75rem 1rem !important;
	border-radius: 0.375rem !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 1rem !important;
	transition: none !important; /* Vypneme přechody pro testování */
}

/* Přepis pro placeholder */
.footer-form-wrapper .wpcf7-form .wpcf7-form-control::placeholder {
	color: #6b7280 !important;
	opacity: 1 !important;
}

/* Přepis pro focus */
.footer-form-wrapper .wpcf7-form .wpcf7-form-control:focus {
	outline: none !important;
	border-color: #d6398d !important; /* Růžová při focusu pro jasné odlišení */
	box-shadow: 0 0 0 3px rgba(214, 57, 141, 0.5) !important;
}

/* Přepis pro textarea */
.footer-form-wrapper .wpcf7-form textarea.wpcf7-form-control {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Přepis pro odesílací tlačítko */
.footer-form-wrapper .wpcf7-form .wpcf7-submit {
	/* Vlastnosti pro layout a box model */
	width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;

	/* Vlastnosti pro vzhled - barvy a rámečky */
	background-color: #FFC700 !important; /* Žlutá */
	color: #ffffff !important; /* Tmavě modrý text */
	border: none !important;

	/* Ostatní vlastnosti */
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	padding: 0.85rem 1rem !important;
	border-radius: 0.375rem !important;
	cursor: pointer !important;
	transition: none !important;
}

.footer-form-wrapper .wpcf7-form .wpcf7-submit:hover {
	background-color: #e6b300 !important;
}


/* ==========================================================================
   5. SPECIFICKÉ OPRAVY A PŘEPSÁNÍ
   ========================================================================== */

/* Přepsání pro plugin, který vkládá vlastní proměnnou --spacing */
:root, :host {
	--spacing: 0rem !important;
}


/* ==========================================================================
   DROPDOWN MENU - FINÁLNÍ NEPRŮSTŘELNÁ OPRAVA
   ========================================================================== */

@media (min-width: 1024px) {

	/* 1. VÝCHOZÍ SKRYTÝ STAV - POUŽÍVÁME display: none */
	/* Toto je nejsilnější způsob, jak prvek skrýt. */
	nav#main-navigation .main-navigation-menu .menu-item-has-children .sub-menu {
		display: none !important; /* Klíčová změna na základě vašeho testu */
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: scale(0.95) translateY(10px) !important;
		transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
	}

	/* 2. STAV PO KLIKNUTÍ - POUŽÍVÁME display: block */
	/* Tímto přepíšeme display: none a menu zobrazíme. */
	nav#main-navigation .main-navigation-menu .menu-item-has-children.submenu-otevrene > .sub-menu {
		display: block !important; /* Klíčová změna */
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: scale(1) translateY(0) !important;
	}

	/* 3. OSTATNÍ STYLY (zůstávají pro vzhled) */

	/* Pozicování a šipka */
	nav#main-navigation .main-navigation-menu .menu-item-has-children {
		position: relative;
	}
	nav#main-navigation .main-navigation-menu .menu-item-has-children > a {
		cursor: pointer;
	}
	nav#main-navigation .main-navigation-menu .menu-item-has-children > a::after {
		content: '▼';
		display: inline-block;
		font-size: 0.6em;
		margin-left: 0.5rem;
		transition: transform 0.2s ease-in-out;
	}
	nav#main-navigation .main-navigation-menu .menu-item-has-children.submenu-otevrene > a::after {
		transform: rotate(180deg);
	}

	/* Vzhled podmenu */
	nav#main-navigation .main-navigation-menu .menu-item-has-children .sub-menu {
		position: absolute !important;
		top: 100%;
		left: 0;
		z-index: 1000;
		background-color: white;
		min-width: 220px;
		padding: 0.5rem 0;
		border-radius: 0.5rem;
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	}
}

/* Zvětšení položek v mobilním menu */
@media (max-width: 1023px) {

	/* Cílíme na odkazy v menu a zvětšujeme písmo */
	#main-navigation .main-navigation-menu a {
		font-size: 1.5rem; /* cca dvojnásobek původní velikosti */
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Zvětšíme i mezery mezi jednotlivými položkami */
	#main-navigation .main-navigation-menu {
		gap: 1rem; /* Větší mezera mezi položkami */
	}

}