/* ============================================================
   ACF Block: KKK (FAQ)
   ============================================================ */

/* ── Page-level background ── */
.faq-block {
	background: var(--wp--preset--color--gray-01, #F0F4F8);
}

/* ── Wrapper ── */
.faq-block__wrapper {
	display: flex;
	gap: calc(24px * var(--pv-ui-scale));
	align-items: flex-start;
	padding: calc(40px * var(--pv-ui-scale)) calc(58px * var(--pv-ui-scale)) calc(80px * var(--pv-ui-scale));
}

/* ============================================================
   Sidebar
   ============================================================ */

.faq-sidebar {
	box-sizing: border-box;
	flex-shrink: 0;
	width: calc(var(--pv-layout-sidebar-width, 320px) * var(--pv-ui-scale));
	min-width: 0;
	max-width: 100%;
	border-radius: calc(16px * var(--pv-ui-scale));
	padding: 0 calc(16px * var(--pv-ui-scale)) calc(32px * var(--pv-ui-scale));
	position: sticky;
	top: var(--pv-sticky-header-offset);
	z-index: 10;
}

.faq-block [id] {
	scroll-margin-top: var(--pv-sticky-header-offset);
}

.faq-sidebar__label {
	/* Typography: shared .pv-*-sidebar__label rule in global.css (matches Hinnakiri) */
	box-sizing: border-box;
	padding: 0 calc(16px * var(--pv-ui-scale)) calc(18px * var(--pv-ui-scale));
}

.faq-sidebar__toggle {
	display: none;
}

.faq-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: calc(2px * var(--pv-ui-scale));
}

.faq-sidebar__item {
	border-radius: calc(12px * var(--pv-ui-scale));
	transition: background 0.18s;
}

.faq-sidebar__btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: calc(10px * var(--pv-ui-scale));
	width: 100%;
	padding: calc(14px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
	border: none;
	border-radius: calc(12px * var(--pv-ui-scale));
	background: transparent;
	color: var(--wp--preset--color--brand-01-dark);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: calc(15px * var(--pv-ui-scale));
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	text-align: left;
	white-space: normal;
	min-width: 0;
	overflow-wrap: anywhere;
	transition: color 0.18s, background 0.18s;
}

.faq-sidebar__btn:hover {
	background: rgba(255, 255, 255, 0.55);
}

.faq-sidebar__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-01);
	outline-offset: -2px;
}

.faq-sidebar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--wp--preset--color--brand-01-dark);
	transition: color 0.18s;
}

/* Active tab */
.faq-sidebar__item.is-active {
	background: var(--wp--preset--color--white);
	box-shadow: 0 calc(1px * var(--pv-ui-scale)) calc(4px * var(--pv-ui-scale)) rgba(0, 0, 0, 0.07);
}

.faq-sidebar__item.is-active .faq-sidebar__btn {
	color: var(--wp--preset--color--brand-01-dark);
}

.faq-sidebar__item.is-active .faq-sidebar__icon {
	color: var(--wp--preset--color--primary-blue);
}

.faq-sidebar__custom-icon {
	width: calc(24px * var(--pv-ui-scale));
	height: calc(24px * var(--pv-ui-scale));
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

/* ============================================================
   Main content
   ============================================================ */

.faq-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: calc(40px * var(--pv-ui-scale));
}

/* ── Breadcrumb ── */
.faq-breadcrumb {
	display: flex;
	align-items: center;
	gap: calc(20px * var(--pv-ui-scale));
}

.faq-breadcrumb__link,
.faq-breadcrumb__current {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: calc(13px * var(--pv-ui-scale));
	letter-spacing: calc(1.4px * var(--pv-ui-scale));
	text-transform: uppercase;
	white-space: nowrap;
}

.faq-breadcrumb__link {
	color: var(--wp--preset--color--gray-03);
	text-decoration: none;
	transition: color 0.15s;
}

.faq-breadcrumb__link:hover {
	color: var(--wp--preset--color--brand-01-dark);
}

.faq-breadcrumb__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-01);
	outline-offset: 2px;
	border-radius: calc(2px * var(--pv-ui-scale));
}

.faq-breadcrumb__sep {
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--gray-03);
}

.faq-breadcrumb__current {
	color: var(--wp--preset--color--brand-01-dark);
}

/* ── Tab panels ── */
.faq-panel {
	display: none;
}

.faq-panel.is-active {
	display: block;
}

/* ── FAQ section ── */
.faq-section {
	display: flex;
	flex-direction: column;
	gap: calc(32px * var(--pv-ui-scale));
}

.faq-heading {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 700;
	font-size: calc(46px * var(--pv-ui-scale));
	letter-spacing: calc(-1.4px * var(--pv-ui-scale));
	line-height: 1.1;
	color: var(--wp--preset--color--brand-01-dark);
	margin: 0;
}

/* ============================================================
   Accordion
   ============================================================ */

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: calc(8px * var(--pv-ui-scale));
}

.faq-accordion__item {
	background: var(--wp--preset--color--white);
	border-radius: calc(12px * var(--pv-ui-scale));
	overflow: hidden;
}

.faq-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: calc(22px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale));
	gap: calc(16px * var(--pv-ui-scale));
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.faq-accordion__header:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-01);
	outline-offset: -2px;
}

.faq-accordion__question {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 700;
	font-size: calc(20px * var(--pv-ui-scale));
	letter-spacing: calc(-0.5px * var(--pv-ui-scale));
	line-height: 1.1;
	color: var(--wp--preset--color--brand-01-dark);
}

.faq-accordion__btn {
	flex-shrink: 0;
	width: calc(42px * var(--pv-ui-scale));
	height: calc(42px * var(--pv-ui-scale));
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--gray-02);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--brand-01-dark);
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.faq-accordion__btn svg {
	transition: transform 0.3s ease;
}

/* Open state */
.faq-accordion__item.is-open .faq-accordion__btn {
	background: var(--wp--preset--color--primary-blue);
	border-color: var(--wp--preset--color--primary-blue);
	color: var(--wp--preset--color--white);
}

.faq-accordion__item.is-open .faq-accordion__btn svg {
	transform: rotate(180deg);
}

/* Divider */
.faq-accordion__divider {
	height: calc(1px * var(--pv-ui-scale));
	background: var(--wp--preset--color--gray-02);
	margin: 0 calc(24px * var(--pv-ui-scale));
	display: none;
}

.faq-accordion__item.is-open .faq-accordion__divider {
	display: block;
}

/* Body (animated) */
.faq-accordion__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-accordion__item.is-open .faq-accordion__body {
	max-height: calc(800px * var(--pv-ui-scale));
}

.faq-accordion__body-inner {
	padding: calc(24px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale)) calc(28px * var(--pv-ui-scale));
	display: flex;
	flex-direction: column;
	gap: calc(20px * var(--pv-ui-scale));
}

.faq-accordion__ans-title {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: calc(15px * var(--pv-ui-scale));
	line-height: 1.5;
	color: var(--wp--preset--color--brand-01-dark);
	margin: 0;
}

.faq-accordion__ans-text {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	font-size: calc(15px * var(--pv-ui-scale));
	line-height: 1.6;
	color: var(--wp--preset--color--gray-03);
	max-width: calc(var(--pv-faq-answer-measure, 820px) * var(--pv-ui-scale));
}

@media (min-width: 1921px) {
	.faq-accordion__ans-text {
		font-size: calc(var(--pv-content-body-size, 16px) * var(--pv-ui-scale));
	}

	.faq-accordion__ans-title,
	.faq-contact__desc,
	.faq-accordion__empty {
		font-size: calc(var(--pv-content-body-size, 16px) * var(--pv-ui-scale));
	}
}

.faq-accordion__ans-text p {
	margin: 0 0 calc(12px * var(--pv-ui-scale));
}

.faq-accordion__ans-text p:last-child {
	margin-bottom: 0;
}

.faq-answer-block {
	display: flex;
	flex-direction: column;
	gap: calc(8px * var(--pv-ui-scale));
}

.faq-accordion__empty {
	font-family: var(--wp--preset--font-family--inter);
	font-size: calc(15px * var(--pv-ui-scale));
	color: var(--wp--preset--color--gray-03);
	padding: calc(24px * var(--pv-ui-scale));
	background: var(--wp--preset--color--white);
	border-radius: calc(12px * var(--pv-ui-scale));
	margin: 0;
}

/* ============================================================
   Contact banner
   ============================================================ */

.faq-contact {
	background: var(--wp--preset--color--brand-02-light);
	border-radius: calc(12px * var(--pv-ui-scale));
	padding: calc(24px * var(--pv-ui-scale));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20px * var(--pv-ui-scale));
	flex-wrap: wrap;
}

.faq-contact__left {
	display: flex;
	align-items: center;
	gap: calc(14px * var(--pv-ui-scale));
}

.faq-contact__icon {
	width: calc(57px * var(--pv-ui-scale));
	height: calc(57px * var(--pv-ui-scale));
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.faq-contact__title {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-weight: 700;
	font-size: calc(20px * var(--pv-ui-scale));
	letter-spacing: calc(-0.5px * var(--pv-ui-scale));
	color: var(--wp--preset--color--brand-01-dark);
	margin: 0;
}

.faq-contact__desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: calc(15px * var(--pv-ui-scale));
	line-height: 1.5;
	color: var(--wp--preset--color--gray-03);
	margin: 0;
}

.faq-contact__btn {
	display: inline-flex;
	align-items: center;
	gap: calc(6px * var(--pv-ui-scale));
	background: var(--wp--preset--color--primary-blue);
	color: var(--wp--preset--color--white);
	border-radius: calc(100px * var(--pv-ui-scale));
	padding: calc(14px * var(--pv-ui-scale)) calc(28px * var(--pv-ui-scale));
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: calc(15px * var(--pv-ui-scale));
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s;
}

.faq-contact__btn:hover {
	background: #0057d6;
	color: var(--wp--preset--color--white);
}

.faq-contact__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-01-dark);
	outline-offset: 2px;
}

/* ============================================================
   Responsive — desktop (usertest p.13: wider sidebar + larger type)
   Tablet/mobile (≤900px) and accordion internals stay unchanged.
   ============================================================ */

@media (min-width: 901px) {
	.faq-sidebar {
		width: calc(400px * var(--pv-ui-scale));
		min-width: calc(400px * var(--pv-ui-scale));
	}

	.faq-sidebar__label {
		font-size: calc(16px * var(--pv-ui-scale));
		letter-spacing: calc(1.6px * var(--pv-ui-scale));
	}

	.faq-sidebar__btn {
		font-size: calc(17px * var(--pv-ui-scale));
	}

	.faq-heading {
		font-size: calc(64px * var(--pv-ui-scale));
		letter-spacing: calc(-1.92px * var(--pv-ui-scale));
	}
}

@media (max-width: 900px) {
	.faq-block__wrapper {
		flex-direction: column;
		padding: calc(24px * var(--pv-ui-scale)) calc(24px * var(--pv-ui-scale)) calc(60px * var(--pv-ui-scale));
	}

	.faq-sidebar {
		width: 100%;
		position: static;
	}

	.faq-heading {
		font-size: calc(32px * var(--pv-ui-scale));
	}

	.faq-accordion__question {
		font-size: calc(17px * var(--pv-ui-scale));
	}

	.faq-sidebar__toggle {
		display: none;
	}
}

/* ============================================================
   Responsive — mobile
   ============================================================ */

@media (max-width: 600px) {
	.faq-block__wrapper {
		padding: calc(48px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) calc(60px * var(--pv-ui-scale));
	}

	.faq-contact {
		flex-direction: column;
		align-items: flex-start;
	}

	.faq-breadcrumb {
		/* Wrapper gap is 24px; +4px → 28px to next section */
		margin-bottom: calc(4px * var(--pv-ui-scale));
	}

	.faq-accordion__header {
		padding: calc(18px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale));
	}

	.faq-accordion__body-inner {
		padding: calc(18px * var(--pv-ui-scale)) calc(16px * var(--pv-ui-scale)) calc(22px * var(--pv-ui-scale));
	}

	.faq-accordion__divider {
		margin: 0 calc(16px * var(--pv-ui-scale));
	}
}