/*
Theme Name: Skinnovate
Author: mardor - MadWorks
Author URI: https://madworks.hu
Description: A Skinnovate B2B webshop FSE témája — hibrid: blokk-téma a tartalomhoz, klasszikus WooCommerce pénztár (Barion + átvevőpont-választó). A MaD Zero starterből származik; a belső blokk- és pattern-névterek szándékosan maradtak madzero/-n, hogy a starter fejlesztései átemelhetők legyenek.
Version: 0.1.6
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: skinnovate
*/

/*
 * ELV: ide CSAK az kerül, amit a theme.json / blokk-beállítás tényleg nem tud.
 * Blokk-specifikus stílus → wp_enqueue_block_style (functions.php), NEM ide.
 * Ez a fájl a cél szerint 2-3 KB alatt marad.
 */

/* Utility: teljes magasság/szélesség kitöltés (pattern-konvenció) */
.full-height,
.full-height img { height: 100%; }
.full-width,
.full-width img { width: 100%; }

/* Utility: háttérkép-kitöltő kép (pattern-konvenció) */
.bcg-img { height: 100%; width: 100%; }
.bcg-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Kijelölés-szín a brandhez */
::selection {
	color: var(--wp--preset--color--txt-light);
	background: var(--wp--preset--color--primary);
}

/* Tartalmi linkek aláhúzva — GLOBÁLIS alapelv (a landing.css-ből emelve, 2026-07-14).
   A theme.json elements.link decorationje `none` (nav, gombok, kártyák miatt);
   a folyószöveg-linkek viszont mindenütt aláhúzottak. A :where() 0 specificitású,
   így bármely blokk-szintű beállítás felülírhatja. */
:where(section, footer, .entry-content) a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mobil sorrend-csere utility (pattern-konvenció) */
@media screen and (max-width: 781px) {
	.m-order-2 { order: 2; }
}

/* Marquee logósor (CSS-only, 0 JS) — pattern: logosor-marquee.
   Két azonos fél a trackben → a -50% transzform hézagmentesen loopol.
   A logók alt=""-esek (dekoratívak), a duplikátum így SR-nek néma. */
.madzero-marquee { overflow: hidden; }
.madzero-marquee .madzero-marquee__track {
	display: flex;
	gap: 0;
	width: max-content;
	animation: madzero-marquee 30s linear infinite;
}
.madzero-marquee .madzero-marquee__half {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--h-m);
	padding-right: var(--wp--preset--spacing--h-m);
}
.madzero-marquee:hover .madzero-marquee__track { animation-play-state: paused; }
@keyframes madzero-marquee {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   KERET — fejléc / lábléc (Skinnovate)
   Csak token-hivatkozás, nyers érték nincs (a radius kivétel: a pirula-forma
   szándékosan „végtelen", nem design-token).
   ========================================================================== */

main { margin:0; }   
/* --- Fejléc --- */
.site-header .jet-ajax-search-block {
    width: 100%;
    float: right;
}
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.wp-admin-bar .site-header { top: 32px; }

/* Pirula-gombok a fejlécben (Partnerprogram / Fiókom).
   A theme.json globális gomb-radiusa 0 (éles kártyák) — a fejléc-nav
   viszont pirula, ezért itt szkópoltan írjuk felül. */
.site-header .header-pills .wp-block-button__link {
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.85em 1.75em;
}
.site-header .header-pills .is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--separator);
	background: transparent;
	color: var(--wp--preset--color--txt-dark);
}
.site-header .header-pills .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--txt-light);
}

/* Mini-kosár: pirula, hogy a gombokkal egy sorban egységes legyen */
.site-header .wc-block-mini-cart__button {
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: 999px;
	padding: 0.7em 1.25em;
	background: var(--wp--preset--color--bcg-light);
}

/* Fő navigáció */
.site-header .main-navigation .wp-block-navigation-item__content {
	letter-spacing: 0.08em;
}

/* Fiókom / Regisztráció / Partnerprogram: desktopon pirula-gomb a fejlécben,
   ezért a nav-sorból kivesszük — a mobil overlay-ben viszont ott a helyük. */
@media screen and (min-width: 782px) {
	.site-header .main-navigation .nav-only-mobile, .site-header .mobile-search { display: none; }
}

/* Kereső: széles pirula a logó és a gombok között (desktopon is látszik) */
.site-header__search {
	flex: 1 1 auto;
	max-width: 42rem;
	margin-inline: var(--wp--preset--spacing--h-m);
}
.site-header__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: 999px;
	padding: 0.35em 0.35em 0.35em 1.15em;
	background: var(--wp--preset--color--page-bcg);
}
.site-header__search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding-inline-start: 0.5em;
}
.site-header__search .wp-block-search__input:focus { outline: none; }
/* a nagyító ikon balra kerül, a gomb csupasz */
.site-header__search .wp-block-search__inside-wrapper { flex-direction: row-reverse; }
.site-header__search .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--txt-dark);
}

/* Mobil / desktop nav-váltás: desktopon a nav-sor él (hamburger rejtve),
   mobilon a hamburger (nav-mobile) él és a nav-sor tűnik el. A két nav
   ugyanarra a menüre (ref 284) mutat — egy helyen szerkeszted. */
@media screen and (min-width: 782px) {
	.site-header .nav-mobile { display: none; }
}

/* ---- Mobil overlay-menü: kompakt, középre rendezett HARMONIKA (a régi oldal mintájára) ----
   A core a nyitott modalban alapból MINDEN almenüt statikusan kinyit és a
   nyíl-gombokat elrejti — mi harmonikát csinálunk: alapból zárva, a core saját
   toggle-gombja (aria-expanded) nyitja. Nem kell custom JS.
   Kinézet: teljes szélességű krém sorok hajszál-elválasztókkal, a nyíl a címke
   MELLETT (inline), sűrű ritmus. */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	padding: 4rem 0 2rem; /* a sorok falig érnek */
}
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	gap: 0; /* a core 2em-es hézagja helyett a sorok paddingje adja a ritmust */
	align-items: stretch;
}
/* Menüsor: teljes szélesség, középre zárt tartalom, krém háttér, elválasztó.
   A core a modalban flex-direction:column-t és background:#0000!important-ot
   ad az elemekre — ezért kell itt a row-irány és az !important. */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* a kinyíló almenü (width:100%) új sorba törik */
	justify-content: center;
	align-items: center;
	background: var(--wp--preset--color--bcg-light) !important;
	border-top: 1px solid var(--wp--preset--color--page-bcg);
	padding: 0.75rem 1rem;
	margin: 0;
}
/* A címke ne feszüljön teljes szélesre (a core nyújtaná) — így fér mellé a nyíl */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: auto;
	flex: 0 0 auto;
}
/* Almenü alapból ZÁRVA a modalban (a core kinyitó szabályának felülírása).
   display:none kell — a rejtett doboz SZÉLESSÉGE különben a flex-sorban marad,
   és balra tolja a címkét (minél hosszabb az almenü, annál jobban). */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	display: none;
	height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	padding: 0;
	margin: 0;
	min-width: 0;
}
/* …és a nyíl-gombbal nyílik (aria-expanded=true): folytatólagos sor-lista */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	width: calc(100% + 2rem); /* a szülő-sor paddingjén túl, falig */
	margin: 0.75rem -1rem -0.75rem;
	position: static;
	gap: 0;
}
/* Nyitott almenü sorai: fehér háttér, halkabb szín, sűrűbb ritmus */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	background: var(--wp--preset--color--page-bcg) !important;
	border-top: 1px solid var(--wp--preset--color--bcg-light);
	padding: 0.65rem 1rem;
}
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--txt-muted);
	/* az al-link teljes szélességű marad (core), a szövegét igazítjuk középre */
	text-align: center;
}
/* A nyíl-gombot a core a modalban elrejti — visszakapcsoljuk, kompakt inline
   mérettel (a sor-padding adja hozzá az ujjbarát magasságot). Nyitva átfordul. */
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 1.4rem;
	margin-left: 0.1rem;
	cursor: pointer;
}
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.18s ease;
}
.nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ---- Desktop lenyíló: hajszál-elválasztók a tételek között (a régi oldal mintájára) ---- */
.main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-top: 1px solid var(--wp--preset--color--separator);
}
.main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
	border-top: none;
}
.main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-top: 0.7em;
	padding-bottom: 0.7em;
}

/* Mobil: a kereső külön sorba kerül, a logó alá */
@media screen and (max-width: 781px) {
	.site-header__bar { flex-wrap: wrap !important; }
	.site-header__search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		margin-inline: 0;
		margin-top: var(--wp--preset--spacing--v-s);
	}
	.site-header .header-pills, .site-header .desktop-search { display: none; }
	.site-header__nav { display: none; }
}

/* --- Lábléc --- */
footer.wp-block-template-part {
    margin: 0;
}
.site-notice {position: fixed; bottom: 0; left: 0; width: 100%;}
.site-footer__claim { max-width: 46rem; margin-inline: auto; }

/* A „skin expert" (lakossági testvér-oldal) kiemelése */
.site-footer__b2c-logo a {
	font-family: var(--wp--preset--font-family--header);
	line-height: 1.1;
}

.site-footer .footer-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}
.site-footer .footer-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* ==========================================================================
   DESIGN SYSTEM — a blokk-stílus-variánsok szerkezeti kiegészítése
   A színt/tipót/keretet a `styles/blocks/*.json` adja (Gutenberg felajánlja
   a Stílusok panelen). Ide CSAK az kerül, amit a theme.json nem tud kifejezni:
   pozicionálás, display-mód, pszeudo-elem.
   ========================================================================== */

/* Termékkártya: a badge abszolút pozicionálásához kell a relatív kontextus. */
.is-style-snv-kartya {
	position: relative;
	height: 100%;               /* rácsban egyforma magas kártyák */
	display: flex;
	flex-direction: column;
}
/* A kártyán belüli utolsó elem (a CTA) mindig legalulra kerül. */
.is-style-snv-kartya > :last-child { margin-top: auto; }

/* Kártya-badge: jobb felső sarok. A SZÍNT kártyánként a szerkesztőben állítod
   (a kártya felső keretével azonosra) — a helyét itt rögzítjük. */
.is-style-snv-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

/* Vonal-címke és chip: tartalomra méretezett pirula, nem teljes sor. */
.is-style-snv-vonal-cimke,
.is-style-snv-chip {
	display: inline-block;
	width: auto;
}

/* Chip-sor: a géptípusok flexben törnek. Tedd a chipeket egy Group-ba,
   annak adj `flex` layoutot a szerkesztőben — a gap innen jön. */
.is-style-snv-kartya .wp-block-group.is-layout-flex { gap: 0.4rem; }

/* Sötét fejlécű táblázat: a thead-et a theme.json elements-e nem éri el. */
.is-style-snv-tabla-sotet-fej thead th {
	background-color: var(--wp--preset--color--txt-dark);
	color: var(--wp--preset--color--txt-light);
}

/* Csupasz lista (pötty és behúzás nélkül) — a landingek kártya-listáihoz.
   Tudatosan variáns, NEM globális: a jogi oldalakon (ÁSZF, GDPR) kell a
   normál felsorolás. A variánst a styles/blocks/18-lista-csupasz.json
   ajánlja fel a szerkesztőben; a list-style-t a JSON nem tudja kifejezni. */
.is-style-snv-lista-csupasz {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* ==========================================================================
   PANEL / ACCORDION — design-system primitívum (globális, tokenből)
   Egy forrás, három fogyasztó:
     1) core/details blokk `is-style-snv-panel` variánsa (jövőbeli FAQ/lenyíló,
        a szerkesztő felajánlja — styles/blocks/19-panel.json)
     2) termék-adatlap shortcode (.snv-adatlap__panel — natív <details>)
     3) Yoast FAQ (.schema-faq — a harmonikát a main.js adja, globálisan)
   A +/− pszeudo-elemet és a <details>-marker elrejtését a theme.json nem
   tudja kifejezni → ez a szerkezeti réteg. A keret/háttér/padding tokenből.
   Korábban duplikálva élt (woo.css: adatlap, landing.css: FAQ) — összevonva.
   ========================================================================== */

/* Konténer */
.is-style-snv-panel,
.snv-adatlap__panel,
.schema-faq .schema-faq-section {
	border: 1px solid var(--wp--preset--color--separator);
	background: var(--wp--preset--color--page-bcg);
	margin-bottom: 0.5rem;
}

/* Fej (summary / kérdés) */
.is-style-snv-panel > summary,
.snv-adatlap__fej,
.schema-faq .schema-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 1.25rem;
	font-weight: 700;
	margin: 0;
	cursor: pointer;
	list-style: none; /* natív <details>-háromszög ki */
}
.is-style-snv-panel > summary::-webkit-details-marker,
.snv-adatlap__fej::-webkit-details-marker { display: none; }

/* +/− jelző jobbra, kis keretes dobozban (a régi oldal mintája) */
.is-style-snv-panel > summary::after,
.snv-adatlap__fej::after,
.schema-faq .schema-faq-question::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border: 1px solid var(--wp--preset--color--separator);
	background: var(--wp--preset--color--bcg-light);
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--txt-dark);
	flex-shrink: 0;
}
.is-style-snv-panel[open] > summary::after,
.snv-adatlap__panel[open] > .snv-adatlap__fej::after,
.schema-faq .schema-faq-section.is-open .schema-faq-question::after { content: "−"; }

/* Tartalom */
.is-style-snv-panel > *:not(summary),
.snv-adatlap__tartalom,
.schema-faq .schema-faq-answer {
	padding: 0 1.25rem 1rem;
	margin: 0;
}

/* Yoast FAQ harmonika (main.js teszi rá az osztályokat). JS nélkül minden
   válasz látszik (SEO/no-JS); JS-sel csak a nyitott szekció válasza. */
.snv-faq-init .schema-faq-question { cursor: pointer; }
.snv-faq-init .schema-faq-section:not(.is-open) .schema-faq-answer { display: none; }

/* Mozgás-érzékeny felhasználóknak: minden animáció/átmenet ki */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}