/* ============================================================
   FAQ V2 – zdieľaný vizuál akordeónu

   1. Nový markup  – .rp-homepage-v2-faq__* (Control/Homepage/Faq/templates/faq-v2.latte)
   2. Starý markup – #faq / .faqQuestion / .faqAnswer / span.sipkadole

   Sekcia 2 existuje preto, že FAQ v článkoch prichádza ako uložené HTML
   z CMS (mb_blog) a nedá sa prepísať. Dostáva rovnaký vizuál čisto cez CSS.
   Stav "otvorené" značí trieda .is-active, ktorú nasadzuje JS stránky.

   Štrukturálne primitívy sekcie (.rp-homepage-v2-section, .hp-container,
   __header, __title) sú v layout-v2.css – ten musí byť načítaný tiež.
   ============================================================ */


/* ============================================================
   1. NOVÝ MARKUP
   ============================================================ */

.rp-homepage-v2-faq {
	color: #3d3b3c;
	padding: 48px 0;
}

.rp-homepage-v2-faq .rp-homepage-v2-section__tag {
	color: #ff1782;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 1.5px;
	line-height: 18px;
	margin-bottom: 8px;
}

.rp-homepage-v2-faq .rp-homepage-v2-section__title::after {
	background: #ff1782;
}

.rp-homepage-v2-faq__list {
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

.rp-homepage-v2-faq__item {
	border-bottom: 1px solid #eaeaea;
	border-left: 3px solid transparent;
	float: none;
	margin: 0;
	padding: 0;
	transition: border-color 200ms ease, padding-left 200ms ease;
	width: 100%;
}

.rp-homepage-v2-faq__item.is-active {
	border-left-color: #ff1782;
	padding-left: 20px;
}

.rp-homepage-v2-faq__item h3 {
	float: none;
	font-family: "Bariol", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	width: 100%;
}

.rp-homepage-v2-faq__question {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	color: #3d3b3c;
	cursor: pointer;
	display: flex;
	float: none;
	font-family: "Bariol", Arial, sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.35;
	margin: 0;
	min-height: 48px;
	padding: 20px 0;
	text-align: left;
	width: 100%;
}

.rp-homepage-v2-faq__question:hover,
.rp-homepage-v2-faq__question:focus-visible {
	color: #ff1782;
	outline: none;
}

.rp-homepage-v2-faq__question:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 23, 130, 0.22);
}

.rp-homepage-v2-faq__question svg {
	color: #ff1782;
	flex: 0 0 20px;
	transition: transform 300ms ease;
}

.rp-homepage-v2-faq__item.is-active .rp-homepage-v2-faq__question svg {
	transform: rotate(45deg);
}

.rp-homepage-v2-faq__answer {
	color: #666;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.rp-homepage-v2-faq.is-enhanced .rp-homepage-v2-faq__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 300ms ease;
}

.rp-homepage-v2-faq__answer-inner {
	padding: 0 34px 20px 0;
}

.rp-homepage-v2-faq__answer p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 12px;
	padding: 0;
}

.rp-homepage-v2-faq__answer p:last-child,
.rp-homepage-v2-faq__answer ul:last-child {
	margin-bottom: 0;
}

.rp-homepage-v2-faq__answer ul {
	list-style: disc;
	margin: 0 0 12px 20px;
	padding: 0;
}

.rp-homepage-v2-faq__answer li {
	margin: 0 0 4px;
	padding: 0;
}

.rp-homepage-v2-faq__answer a {
	color: #ff1782;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media screen and (min-width: 768px) {
	.rp-homepage-v2-faq {
		padding-bottom: 64px;
		padding-top: 64px;
	}

	.rp-homepage-v2-faq__question {
		font-size: 1rem;
		padding: 24px 0;
	}

	.rp-homepage-v2-faq__answer {
		font-size: 1rem;
	}

	.rp-homepage-v2-faq__answer-inner {
		padding-bottom: 24px;
	}
}

@media screen and (min-width: 1024px) {
	.rp-homepage-v2-faq {
		padding-bottom: 80px;
		padding-top: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-homepage-v2-faq__item,
	.rp-homepage-v2-faq__question svg,
	.rp-homepage-v2-faq.is-enhanced .rp-homepage-v2-faq__answer {
		transition: none;
	}
}


/* ============================================================
   2. STARÝ MARKUP Z CMS

   #faq > div[itemprop="mainEntity"]        → položka
           > div.faqQuestion                → otázka (span[itemprop=name] + span.sipkadole)
           > div[itemprop="acceptedAnswer"]
               > div.faqAnswer              → odpoveď

   Selektory sú zámerne neskopované, aby sa dal súbor pripojiť na
   ľubovoľnú stránku so starým FAQ markupom.
   ============================================================ */

/* Rovnaká šírka merania ako .rp-homepage-v2-faq__list – v širokom obsahovom
   stĺpci (napr. text kategórie) by otázky inak boli roztiahnuté cez celú šírku. */
#faq {
	margin: 0;
	max-width: 800px;
	width: 100%;
}

/* .rp-faq-item dopĺňa faq-accordion-v2.js tam, kde CMS text nemá obal
   [itemprop="mainEntity"] – vďaka tomu je položka vždy jeden element. */
#faq > [itemprop="mainEntity"],
#faq > .rp-faq-item {
	border-bottom: 1px solid #eaeaea;
	border-left: 3px solid transparent;
	box-sizing: border-box;
	float: none;
	margin: 0;
	padding: 0;
	transition: border-color 200ms ease, padding-left 200ms ease;
	width: 100%;
}

#faq > [itemprop="mainEntity"].is-active,
#faq > .rp-faq-item.is-active {
	border-left-color: #ff1782;
	padding-left: 20px;
}

.faqQuestion {
	align-items: center;
	background: transparent;
	border: 0;
	/* Stránky bez globálneho border-box resetu (legacy rám) by inak k min-height
	   pripočítali ešte padding a riadok by narástol na dvojnásobok. */
	box-sizing: border-box;
	color: #3d3b3c;
	cursor: pointer;
	display: flex;
	float: none;
	font-family: "Bariol", Arial, sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.35;
	margin: 0;
	min-height: 48px;
	padding: 20px 0;
	position: relative;
	text-align: left;
	text-indent: 0;
	width: 100%;
}

.faqQuestion:hover {
	color: #ff1782;
}

.faqQuestion > [itemprop="name"] {
	flex: 1 1 auto;
}

/* Ikona plus nakreslená v CSS – nahrádza pôvodné PNG pozadie šípky.
   V stave .is-active sa otočí o 45° na ✕, rovnako ako SVG na homepage. */
.faqQuestion span.sipkadole {
	/* !important je tu nutné: staré CMS texty majú v DB natvrdo
	   style="background-image: url(sipkadole.png)", ktorý by inak presvital
	   spoza plusu ako sivý fľak. HTML v databáze sa prepísať nedá. */
	background-image: none !important;
	flex: 0 0 20px;
	height: 20px;
	position: relative;
	right: auto;
	top: auto;
	transition: transform 300ms ease;
	width: 20px;
}

.faqQuestion span.sipkadole::before,
.faqQuestion span.sipkadole::after {
	background: #ff1782;
	content: '';
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.faqQuestion span.sipkadole::before {
	height: 2px;
	width: 14px;
}

.faqQuestion span.sipkadole::after {
	height: 14px;
	width: 2px;
}

.faqQuestion.is-active span.sipkadole,
.is-active > .faqQuestion span.sipkadole {
	transform: rotate(45deg);
}

.faqAnswer {
	border: 0;
	color: #666;
	font-size: 0.9375rem;
	line-height: 1.6;
	padding: 0 34px 20px 0;
}

/* Selektor s #faq je tu zámerne: FAQ býva vnorené v CMS texte stránky, ktorý má
   vlastnú typografiu odstavcov s rovnakou špecificitou (napr. .category-text-down-hidden p).
   Jej margin-top by odtlačil odpoveď od otázky a prerušil ružový pruh položky. */
.faqAnswer p,
#faq .faqAnswer p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 12px;
	padding: 0;
	text-align: left;
}

.faqAnswer p:last-child,
.faqAnswer ul:last-child,
#faq .faqAnswer p:last-child,
#faq .faqAnswer ul:last-child {
	margin-bottom: 0;
}

.faqAnswer ul,
#faq .faqAnswer ul {
	list-style: disc;
	margin: 0 0 12px 20px;
	padding: 0;
}

.faqAnswer li,
#faq .faqAnswer li {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 4px;
	padding: 0;
}

.faqAnswer a {
	color: #ff1782;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.faqAnswer strong {
	font-weight: 700;
}

@media screen and (min-width: 768px) {
	.faqQuestion {
		font-size: 1rem;
		padding: 24px 0;
	}

	.faqAnswer {
		font-size: 1rem;
		padding-bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#faq > [itemprop="mainEntity"],
	.faqQuestion span.sipkadole {
		transition: none;
	}
}