/**
 * ============================================================
 * CYBER TEAM - FAQ
 *
 * Shortcode:
 * [ct_faq]
 *
 * Globalne brand boje:
 * --ct-color-primary
 * --ct-color-secondary
 * --ct-color-accent
 * --ct-color-dark
 * --ct-color-light
 * ============================================================
 */


/**
 * ------------------------------------------------------------
 * ROOT
 * ------------------------------------------------------------
 */

.ct-faq {
	--ct-faq-primary: var(--ct-color-primary, #17233f);
	--ct-faq-accent: var(--ct-color-accent, #d5a23a);
	--ct-faq-dark: var(--ct-color-dark, #17233f);
	--ct-faq-light: var(--ct-color-light, #ffffff);

	--ct-faq-border: rgba(23, 35, 63, 0.16);
	--ct-faq-radius: 0px;

	width: 100%;
	margin: 0;
	padding: 0;

	border: 1px solid var(--ct-faq-border);
	border-radius: var(--ct-faq-radius);

	background: transparent;

	overflow: hidden;

	font-family: inherit;
	color: var(--ct-faq-dark);
}


/**
 * ------------------------------------------------------------
 * ITEM
 * ------------------------------------------------------------
 */

.ct-faq__item {
	margin: 0;
	padding: 0;

	border: 0;
	border-bottom: 1px solid var(--ct-faq-border);

	background: transparent;
}

.ct-faq__item:last-child {
	border-bottom: 0;
}


/**
 * ------------------------------------------------------------
 * QUESTION / SUMMARY
 * ------------------------------------------------------------
 */

.ct-faq__question {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	width: 100%;

	margin: 0;
	padding: 18px 18px;

	color: var(--ct-faq-primary);
	background: transparent;

	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;

	cursor: pointer;

	list-style: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}


/**
 * Uklanja native marker.
 */
.ct-faq__question::-webkit-details-marker {
	display: none;
}

.ct-faq__question::marker {
	display: none;
	content: "";
}


.ct-faq__question:hover {
	color: var(--ct-faq-primary);
}


/**
 * Keyboard accessibility.
 */
.ct-faq__question:focus {
	outline: none;
}

.ct-faq__question:focus-visible {
	outline: 2px solid var(--ct-faq-accent);
	outline-offset: -3px;
}


/**
 * Tekst pitanja.
 */
.ct-faq__question-text {
	display: block;
	flex: 1 1 auto;

	min-width: 0;
}


/**
 * ------------------------------------------------------------
 * PLUS / X ICON
 * ------------------------------------------------------------
 */

.ct-faq__icon {
	position: relative;

	display: block;
	flex: 0 0 auto;

	width: 16px;
	height: 16px;

	color: var(--ct-faq-accent);

	transition:
		transform 0.2s ease,
		color 0.2s ease;
}


/**
 * Horizontalna linija.
 */
.ct-faq__icon::before {
	content: "";

	position: absolute;
	top: 50%;
	left: 0;

	width: 100%;
	height: 2px;

	border-radius: 2px;

	background: currentColor;

	transform: translateY(-50%);
}


/**
 * Vertikalna linija.
 */
.ct-faq__icon::after {
	content: "";

	position: absolute;
	top: 0;
	left: 50%;

	width: 2px;
	height: 100%;

	border-radius: 2px;

	background: currentColor;

	transform: translateX(-50%);
}


/**
 * Kada je pitanje otvoreno:
 * plus se rotira i vizuelno postaje X.
 */
.ct-faq__item[open] .ct-faq__icon {
	color: var(--ct-faq-primary);

	transform: rotate(45deg);
}


/**
 * ------------------------------------------------------------
 * ANSWER
 * ------------------------------------------------------------
 */

.ct-faq__answer {
	border-top: 1px solid var(--ct-faq-border);

	background: transparent;

	animation: ct-faq-reveal 0.18s ease;
}


.ct-faq__answer-inner {
	padding: 22px 18px;

	color: var(--ct-faq-dark);

	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
}


/**
 * WordPress wpautop generiše <p>.
 */
.ct-faq__answer-inner p {
	margin: 0 0 12px;
	padding: 0;
}

.ct-faq__answer-inner p:last-child {
	margin-bottom: 0;
}


/**
 * ------------------------------------------------------------
 * OPEN STATE
 * ------------------------------------------------------------
 */

.ct-faq__item[open] > .ct-faq__question {
	color: var(--ct-faq-primary);
}


/**
 * ------------------------------------------------------------
 * SUBTLE HOVER
 * ------------------------------------------------------------
 */

@media (hover: hover) {

	.ct-faq__question:hover {
		background-color: rgba(23, 35, 63, 0.025);
	}
}


/**
 * ------------------------------------------------------------
 * MOBILE
 * ------------------------------------------------------------
 */

@media (max-width: 767px) {

	.ct-faq__question {
		gap: 16px;

		padding: 17px 16px;

		font-size: 15px;
		line-height: 1.4;
	}


	.ct-faq__answer-inner {
		padding: 18px 16px;

		font-size: 15px;
		line-height: 1.6;
	}


	.ct-faq__icon {
		width: 15px;
		height: 15px;
	}
}


/**
 * ------------------------------------------------------------
 * ANIMATION
 * ------------------------------------------------------------
 */

@keyframes ct-faq-reveal {

	from {
		opacity: 0;
		transform: translateY(-3px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/**
 * ------------------------------------------------------------
 * REDUCED MOTION
 * ------------------------------------------------------------
 */

@media (prefers-reduced-motion: reduce) {

	.ct-faq__question,
	.ct-faq__icon,
	.ct-faq__answer {
		transition: none;
		animation: none;
	}
}