/*
Theme Name: Prikee Design
Theme URI: https://www.prikee.eu/
Description: Prikee Design child theme for Hello Elementor. Modern WordPress, webshop, maintenance and SEO-oriented web presence.
Author: Prikler József / Prikee Design
Author URI: https://www.prikee.eu/
Template: hello-elementor
Version: 0.3.1
Text Domain: prikee-design
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
  Main visual rules live in assets/css/prikee-design.css.
  Keep this file primarily for the WordPress theme header.
*/

/* =========================================================
   Prikee Design – globális ragadós fejléc
   Az Elementor Theme Builder külső wrapperén
   ========================================================= */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	overflow: visible;
}

/* Bejelentkezett adminisztrátoroknál ne kerüljön
   a fejléc a WordPress adminisztrációs sáv alá. */
body.admin-bar .elementor-location-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .elementor-location-header {
		top: 46px;
	}
}

/* =========================================================
   Prikee Design – mobilmenü ajánlatkérő CTA
   ========================================================= */

/*
 * Asztali nézetben elrejtjük, mert a fejlécben
 * már van külön Elementor CTA-gomb.
 */
@media screen and (min-width: 1025px) {
	.elementor-location-header
	.prikee-mobile-menu-cta {
		display: none !important;
	}
}

/*
 * Tablet és mobil dropdownban gombként jelenik meg.
 * Ez a töréspont akkor megfelelő, ha az Elementor
 * menü Breakpoint beállítása: Tablet.
 */
@media screen and (max-width: 1024px) {
	.elementor-location-header
	.elementor-nav-menu--dropdown
	.prikee-mobile-menu-cta {
		display: block !important;
		margin: 20px 20px 24px;
	}

	.elementor-location-header
	.elementor-nav-menu--dropdown
	.prikee-mobile-menu-cta > a {
		display: flex !important;
		align-items: center;
		justify-content: center;

		width: 100%;
		min-height: 48px;
		padding: 14px 20px !important;

		color: #ffffff !important;
		background-color: #e6332a !important;

		font-family: "Montserrat", sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;

		border: 1px solid #e6332a;
		border-radius: 6px;

		transition:
			background-color 200ms ease,
			border-color 200ms ease,
			transform 150ms ease;
	}

	.elementor-location-header
	.elementor-nav-menu--dropdown
	.prikee-mobile-menu-cta > a:hover,
	.elementor-location-header
	.elementor-nav-menu--dropdown
	.prikee-mobile-menu-cta > a:focus-visible {
		color: #ffffff !important;
		background-color: #484444 !important;
		border-color: #484444;
	}

	.elementor-location-header
	.elementor-nav-menu--dropdown
	.prikee-mobile-menu-cta > a:active {
		transform: scale(0.98);
	}
}

/* =========================================================
   Prikee Design – animált hamburger → X mobilmenü-gomb
   Elementor WordPress Menu widgethez
   ========================================================= */

.prikee-main-menu .elementor-menu-toggle {
	--prikee-toggle-color: #484444;
	--prikee-toggle-active-color: #e6332a;
	--prikee-toggle-size: 48px;
	--prikee-line-width: 26px;
	--prikee-line-height: 2px;
	--prikee-line-gap: 8px;

	position: relative;
	display: inline-grid;
	place-items: center;

	width: var(--prikee-toggle-size);
	height: var(--prikee-toggle-size);
	min-width: var(--prikee-toggle-size);

	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 6px;

	color: var(--prikee-toggle-color) !important;
	background-color: transparent !important;

	cursor: pointer;
	overflow: hidden;

	transition:
		color 220ms ease,
		background-color 220ms ease,
		border-color 220ms ease,
		transform 140ms ease;
}

/*
 * Az Elementor saját hamburger- és X-ikonjainak elrejtése.
 * A gomb működését és akadálymentes attribútumait nem érinti.
 */
.prikee-main-menu .elementor-menu-toggle svg,
.prikee-main-menu .elementor-menu-toggle i,
.prikee-main-menu .elementor-menu-toggle .e-font-icon-svg {
	opacity: 0 !important;
	visibility: hidden !important;
}

/*
 * A három hamburger-vonalat a ::before elem és
 * annak két box-shadow másolata rajzolja.
 */
.prikee-main-menu .elementor-menu-toggle::before,
.prikee-main-menu .elementor-menu-toggle::after {
	content: "";
	position: absolute;
	z-index: 2;

	top: 50%;
	left: 50%;

	width: var(--prikee-line-width);
	height: var(--prikee-line-height);
	border-radius: 999px;

	background-color: currentColor;
	transform-origin: center;

	transition:
		transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 180ms ease,
		background-color 220ms ease;
}

/* Zárt állapot: három vízszintes vonal. */
.prikee-main-menu .elementor-menu-toggle::before {
	transform:
		translate(-50%, -50%)
		translateY(calc(var(--prikee-line-gap) * -1));

	box-shadow:
		0 var(--prikee-line-gap) 0 currentColor,
		0 calc(var(--prikee-line-gap) * 2) 0 currentColor;
}

/*
 * A második X-szár zárt állapotban
 * kicsinyítve és átlátszóan várakozik.
 */
.prikee-main-menu .elementor-menu-toggle::after {
	opacity: 0;

	transform:
		translate(-50%, -50%)
		rotate(-45deg)
		scale(0.55);
}

/* Megnyitott állapot: piros X. */
.prikee-main-menu
.elementor-menu-toggle:is(
	.elementor-active,
	[aria-expanded="true"]
) {
	color: var(--prikee-toggle-active-color) !important;
	background-color: rgba(230, 51, 42, 0.08) !important;
	border-color: rgba(230, 51, 42, 0.20) !important;
}

/*
 * A felső vonal középre mozog és
 * az óramutató járásával megegyezően elfordul.
 * A másik két hamburger-vonal közben összeolvad.
 */
.prikee-main-menu
.elementor-menu-toggle:is(
	.elementor-active,
	[aria-expanded="true"]
)::before {
	transform:
		translate(-50%, -50%)
		rotate(45deg);

	box-shadow:
		0 0 0 transparent,
		0 0 0 transparent;
}

/* Megjelenik az X második szára. */
.prikee-main-menu
.elementor-menu-toggle:is(
	.elementor-active,
	[aria-expanded="true"]
)::after {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		rotate(-45deg)
		scale(1);
}

/* Finom lenyomási reakció. */
.prikee-main-menu .elementor-menu-toggle:active {
	transform: scale(0.94);
}

/*
 * Piros hoverhatás csak valódi egérrel rendelkező eszközökön.
 * Érintőképernyőn így nem marad beragadt piros állapot.
 */
@media (hover: hover) and (pointer: fine) {
	.prikee-main-menu
	.elementor-menu-toggle:not(.elementor-active):hover {
		color: #e6332a !important;
		background-color: rgba(230, 51, 42, 0.06) !important;
		border-color: rgba(230, 51, 42, 0.18) !important;
	}
}

/* Billentyűzetes fókusz. */
.prikee-main-menu .elementor-menu-toggle:focus-visible {
	outline: 3px solid rgba(230, 51, 42, 0.28);
	outline-offset: 3px;
}

/* Bezárás után biztos visszaállítás sötétszürkére. */
.prikee-main-menu
.elementor-menu-toggle:not(.elementor-active)[aria-expanded="false"] {
	color: #484444 !important;
	background-color: transparent !important;
	border-color: transparent !important;
}

/* Mozgáscsökkentést kérő felhasználók számára. */
@media (prefers-reduced-motion: reduce) {
	.prikee-main-menu .elementor-menu-toggle,
	.prikee-main-menu .elementor-menu-toggle::before,
	.prikee-main-menu .elementor-menu-toggle::after {
		transition-duration: 0.01ms !important;
	}
}

/* Asztali nézetben a hamburger/X ne jelenjen meg. */
@media screen and (min-width: 1025px) {
	.prikee-main-menu .elementor-menu-toggle {
		display: none !important;
	}
}

/* Tableten és mobilon jelenjen meg. */
@media screen and (max-width: 1024px) {
	.prikee-main-menu .elementor-menu-toggle {
		display: inline-grid !important;
	}
}

/* Footer CTA-gomb ne zsugorodjon össze */
.prikee-footer-cta-button {
	flex: 0 0 auto;
}

/* Az „Ajánlatot kérek” maradjon egy sorban */
.prikee-footer-cta-button .elementor-button {
	white-space: nowrap;
}

/* =========================================================
   Prikee Design – egységes belső tartalmi szélesség
   ========================================================= */

:root {
	--prikee-content-max-width: 1240px;
	--prikee-content-gutter: 24px;
}

/*
 * Közös belső tartalmi keret:
 * fejléc, tagline, footer CTA, fő footer és alsó footer számára.
 */
.prikee-site-inner {
	width: 100%;
	max-width: var(--prikee-content-max-width);
	margin-inline: auto;
	padding-inline: var(--prikee-content-gutter);
	box-sizing: border-box;
}

/* Mobilon valamivel kisebb oldalsó térköz. */
@media screen and (max-width: 767px) {
	:root {
		--prikee-content-gutter: 20px;
	}
}