/**
 * Výstaviště FAQ Accordion – styly
 *
 * Barvy = Avada Global Colors (var(--awb-color1..8)):
 *   color5  … text faded (odpovědi)
 *   color8  … hlavní text (černá)
 *   custom_color_1 … „#1 border light" (linky mezi otázkami)
 *
 * Typografie = Avada Typography Sets (var(--awb-typographyN-*)).
 * Číslování setů odpovídá pořadí vytvoření v Global Typography:
 *   1 = Headings, 2 = Subheadings, 3 = Lead, 4 = Body, 5 = Small, 6 = Body M
 * Pokud čísla na webu nesedí, upravte je níže na jednom místě
 * (custom properties v .vfaq).
 */

.vfaq {
	/* Namapování Avada variables na jedno místo – snadná úprava. */
	--vfaq-color-text:      var(--awb-color8, #0a0a0a);
	--vfaq-color-answer:    var(--awb-color5, #6b6b6b);
	--vfaq-color-border:    var(--awb-custom_color_1, var(--awb-color3, rgba(0, 0, 0, .12)));

	--vfaq-title-family:    var(--awb-typography2-font-family, var(--awb-typography1-font-family, inherit));
	--vfaq-title-weight:    var(--awb-typography2-font-weight, 400);
	--vfaq-title-lh:        var(--awb-typography2-line-height, 1.2);
	--vfaq-title-ls:        var(--awb-typography2-letter-spacing, 0);

	--vfaq-q-family:        var(--awb-typography4-font-family, inherit);
	--vfaq-q-ls:            var(--awb-typography4-letter-spacing, 0.015em);

	--vfaq-a-family:        var(--awb-typography5-font-family, inherit);
	--vfaq-a-size:          var(--awb-typography5-font-size, 13px);
	--vfaq-a-lh:            var(--awb-typography5-line-height, 1.5);
	--vfaq-a-ls:            var(--awb-typography5-letter-spacing, 0.015em);

	width: 100%;
}

.vfaq__group + .vfaq__group {
	margin-top: 72px;
}

.vfaq__group-title {
	font-family: var(--awb-typography2-font-family) !important;
    font-weight: var(--awb-typography2-font-weight);
    font-style: var(--awb-typography2-font-style);
    letter-spacing: var(--awb-typography2-letter-spacing);
    text-transform: var(--awb-typography2-text-transform);
    font-size: 36px !important;
    line-height: var(--awb-typography2-line-height);
	color: var(--awb-color8);
	margin-bottom: 32px;
}

.vfaq__item {
	border-bottom: 1px solid var(--vfaq-color-border);
}

.vfaq__item:first-child {
	border-top: 1px solid var(--vfaq-color-border);
}

.vfaq__question {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.vfaq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 22px 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-align: left;
	color: var(--vfaq-color-text);
	font-family: var(--vfaq-q-family);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--vfaq-q-ls);
}

.vfaq__toggle:focus-visible {
	outline: 2px solid var(--vfaq-color-text);
	outline-offset: 4px;
}

/* Ikona chevron down → chevron up (rotace) */
.vfaq__icon {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--awb-color5);
}

.vfaq__chevron {
	display: block;
	width: 16px;
	height: 16px;
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform .3s ease;
}

button[aria-expanded="true"] .vfaq__icon { color: var(--awb-color8); }

.vfaq__item.is-open .vfaq__chevron {
	transform: rotate(180deg);
}

/* Ikonka odkazu (kopírování do schránky) – vedle chevronu */
.vfaq__question {
	position: relative;
}

.vfaq__question-text {
	margin-right: 34px; /* rezerva, aby text nezajížděl pod ikonku odkazu */
}

.vfaq__copy {
	position: absolute;
	top: 50%;
	right: 36px; /* vlevo od chevronu (16px chevron + mezera) */
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--awb-color5);
	transition: color .2s ease;
}

.vfaq__copy:hover,
.vfaq__copy:focus-visible {
	color: var(--awb-color8);
}

.vfaq__copy:focus-visible {
	outline: 2px solid var(--vfaq-color-text);
	outline-offset: 2px;
}

.vfaq__chain {
	display: block;
	width: 16px;
	height: 16px;
}

/* Panel s odpovědí – plynulá animace přes grid-template-rows */
.vfaq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.vfaq__panel[hidden] {
	display: grid; /* přepíšeme default, aby fungovala animace; viditelnost řeší 0fr + overflow */
}

.vfaq__item.is-open .vfaq__panel {
	grid-template-rows: 1fr;
}

.vfaq__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.vfaq__answer {
	padding: 0 40px 22px 0;
	font-size: var(--awb-typography4-font-size);
    line-height: var(--awb-typography4-line-height);
    letter-spacing: var(--awb-typography4-letter-spacing);
    text-transform: var(--awb-typography4-text-transform);
    font-family: var(--awb-typography4-font-family);
    font-weight: var(--awb-typography4-font-weight);
    font-style: var(--awb-typography4-font-style);
	color: var(--awb-color8);
}

.vfaq__answer > :first-child { margin-top: 0; }
.vfaq__answer > :last-child  { margin-bottom: 0; }

/* Cíle scrollu – rezerva pro případnou fixní hlavičku */
.vfaq__group,
.vfaq__item {
	scroll-margin-top: var(--vfaq-scroll-offset, 110px);
}

/* -------------------------------------------------------------------------
 * Navigace kategorií (nad výpisem)
 * ---------------------------------------------------------------------- */

.vfaq-nav {
	margin-bottom: 64px;
}

.vfaq-nav__title {
	font-family: var(--awb-typography2-font-family) !important;
	font-weight: var(--awb-typography2-font-weight);
	font-style: var(--awb-typography2-font-style);
	letter-spacing: var(--awb-typography2-letter-spacing);
	text-transform: var(--awb-typography2-text-transform);
	font-size: 20px !important;
	line-height: var(--awb-typography2-line-height);
	color: var(--awb-color8);
	margin-bottom: 16px;
}

.vfaq-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.vfaq-nav__item {
	margin: 0;
}

.vfaq-nav__link, .post-content a.vfaq-nav__link {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--vfaq-color-text);
	background: transparent;
	color: var(--vfaq-color-text);
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}

.vfaq-nav__link:focus-visible, .post-content a.vfaq-nav__link:focus-visible,
.vfaq-nav__link:hover, .post-content a.vfaq-nav__link:hover {
	background: var(--awb-color8);
	color: var(--awb-color1);
}

/* Mobilní dropdown – na desktopu skrytý */
.vfaq-nav__select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.vfaq-nav__select {
  width: 100%;

  /* Místo pro ikonku vpravo */
  padding-right: 48px;

  /* Odstranění výchozí šipky */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  display: none;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--vfaq-color-text);
	background: transparent;
	color: var(--vfaq-color-text);
	font-weight: 700;
	cursor: pointer;
	border-radius: 0px;
}

/* Pro starší Microsoft prohlížeče */
.vfaq-nav__select::-ms-expand {
  display: none;
}

.vfaq-nav__select-icon {
  position: absolute;
  display: none;
  top: 50%;
  right: 16px;

  width: 16px;
  height: 16px;

  background-image: url("/wp-content/uploads/2026/07/chevron.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  pointer-events: none;

  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* Otočení při otevřeném selectu */
.vfaq-nav__select:open + .vfaq-nav__select-icon {
  transform: translateY(-50%) rotate(180deg);
}

/* -------------------------------------------------------------------------
 * Toast – potvrzení zkopírování odkazu
 * ---------------------------------------------------------------------- */

.vfaq-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translate(-50%, 12px);
	max-width: calc(100vw - 32px);
	padding: 12px 20px;
	background: var(--awb-color8, #0a0a0a);
	color: var(--awb-color1, #fff);
	font-size: 14px;
	line-height: 1.4;
	border-radius: 0px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 99999;
}

.vfaq-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.vfaq__icon-line,
	.vfaq__chevron,
	.vfaq-toast,
	.vfaq__panel {
		transition: none;
	}
}

@media only screen and (max-width: 750px) {
	.vfaq__toggle {font-size: 16px;}

	.vfaq__group-title {
    font-size: 22px !important;
	margin-bottom: 24px;
}

.vfaq__group + .vfaq__group {
    margin-top: 48px;
}

	/* Navigace kategorií: místo buttonů dropdown */
	.vfaq-nav {
		margin-bottom: 40px;
	}

	.vfaq-nav__title {
		font-size: 22px !important;
		margin-bottom: 24px;
	}

	.vfaq-nav__list {
		display: none;
	}

	.vfaq-nav__select, .vfaq-nav__select-icon  {
		display: block;
	}

	.vfaq-toast {
		max-width: unset;
		width: calc(100vw - 32px);
	}

}