/* Costanoa FAQ — HƯỚNG A (WPBakery build).
   Styles the native vc_tta_accordion to match the batch-1 accordion look.
   Colour/font vars come from .cfaq (faq.css), since the wrapper row has both
   classes (cfaq cfaq-wpbakery). Loaded only on the WPBakery FAQ page. */

/* The wrapper is a WPBakery .vc_row, which stretches to the theme container width
   and overrides .cfaq's max-width — re-assert the centered 1180px container (same
   as Hướng B). Higher specificity + !important beats WPBakery's row width/margins. */
.cfaq.cfaq-wpbakery {
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	width: auto !important;
}
/* #77066: Kalium's .container caps the FAQ row at ~1116px, so the module boxes were
   narrower than the sample. Let this page's content container reach 1180px so the boxes
   match the sample width. Plugin CSS loads only on the FAQ page → other pages untouched. */
.entry-content .vc-row-container.container { max-width: 1180px !important; }
/* #77074: pointer cursor on every clickable CTA/link (override Kalium/WPBakery) */
.cfaq-wpbakery a,
.cfaq-wpbakery .qa-card,
.cfaq-wpbakery .vc_tta-panel-title > a { cursor: pointer !important; }

/* The .cfaq HTML blocks sit inside vc_column_text/wpb_wrapper — trim WPBakery gaps. */
.cfaq-wpbakery .wpb_text_column,
.cfaq-wpbakery .wpb_content_element { margin-bottom: 0 !important; }
.cfaq-wpbakery .vc_column-inner,
.cfaq-wpbakery .wpb_column { padding: 0 !important; }
.cfaq-wpbakery .faq-quick-answers,
.cfaq-wpbakery .faq-policy-tables { margin-top: 46px; }

/* FAQ Categories cream panel (nested vc_row_inner) — matches Hướng B .faq-sections-panel */
.cfaq-wpbakery .cfaq-faq-panel {
	background: var(--c-panel, #f2eee7) !important;
	border-radius: 4px;
	padding: 30px 34px 34px !important;
	margin: 46px 0 40px !important;
}
.cfaq-wpbakery .cfaq-faq-panel > .wpb_column,
.cfaq-wpbakery .cfaq-faq-panel > .wpb_column > .vc_column-inner { padding: 0 !important; }
.cfaq-wpbakery .faq-category-head { margin-top: 0; }

/* Category heading spacing above each accordion group */
/* margin-bottom needs !important: WPBakery's .wpb_wrapper > *:last-child{margin-bottom:0} overrides it */
.cfaq-wpbakery .card-title { margin-top: 34px; margin-bottom: 13px !important; font-size: 26px !important; } /* #76853 margin; #77076 font-size 26px */

/* ---- vc_tta_accordion -> batch-1 accordion rows ---- */
.cfaq-wpbakery .vc_tta.vc_general.vc_tta-accordion { margin: 0 0 8px !important; }
.cfaq-wpbakery .vc_tta-panels,
.cfaq-wpbakery .vc_tta-panels-container { background: transparent !important; border: 0 !important; }
.cfaq-wpbakery .vc_tta-panel {
	background: var(--c-white, #fff) !important;
	border: 0 !important;
	border-left: 3px solid transparent !important;
	border-radius: 3px !important;
	margin: 0 0 9px !important;
	box-shadow: none !important;
}
.cfaq-wpbakery .vc_tta-panel.vc_active { border-left-color: var(--c-accent, #708400) !important; }
.cfaq-wpbakery .vc_tta-panel-heading {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.cfaq-wpbakery .vc_tta-panel-title { font-size: inherit !important; line-height: 1 !important; }
.cfaq-wpbakery .vc_tta-panel-title > a {
	display: flex !important;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 17px !important;
	color: var(--c-head, #003b4c) !important;
	font-family: var(--c-body-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 19px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.cfaq-wpbakery .vc_tta-title-text { color: var(--c-head, #003b4c) !important; }
.cfaq-wpbakery .vc_tta-panel-title > a:hover .vc_tta-title-text { color: var(--c-accent-dark, #657700) !important; }

/* Hide WPBakery's own +/- control icon (its absolute positioning + pseudo-element
   lines are fragile to override) and draw a clean brand-olive +/− on the right,
   toggled by .vc_active — same look as the Hướng B accordion. */
.cfaq-wpbakery .vc_tta-controls-icon { display: none !important; }
.cfaq-wpbakery .vc_tta-panel-title > a { position: relative; padding-right: 42px !important; }
.cfaq-wpbakery .vc_tta-panel-title > a::after {
	content: "+";
	position: absolute;
	right: 17px;
	top: 12px;
	color: var(--c-accent, #708400);
	font-family: var(--c-body-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}
.cfaq-wpbakery .vc_tta-panel.vc_active .vc_tta-panel-title > a::after { content: "\2013"; }

/* Answer body -> .faq-detail styling */
.cfaq-wpbakery .vc_tta-panel-body {
	padding: 0 17px 15px !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--c-body-font) !important;
	font-size: 15px !important;
	line-height: 21px !important;
	color: var(--c-text) !important; /* HWV-153 #76851: answer text per tester (#202124) */
}
.cfaq-wpbakery .vc_tta-panel-body p { margin: 0 !important; }
/* #77057: animated underline — grows left->right (1.5px, 180ms), shrinks back on leave. */
.cfaq-wpbakery .vc_tta-panel-body a {
	color: var(--c-link, #004A66) !important;
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-repeat: no-repeat !important;
	background-position: 0 100% !important;
	background-size: 0% 1.5px !important;
	transition: background-size 180ms ease, color 180ms ease !important;
}
.cfaq-wpbakery .vc_tta-panel-body a:hover { color: #00435C !important; background-size: 100% 1.5px !important; }

/* #77069: hover fills the FULL question box (apply to the whole collapsed panel, not just the inner link) */
.cfaq-wpbakery .vc_tta-panel:not(.vc_active) { transition: background .2s ease; }
.cfaq-wpbakery .vc_tta-panel:not(.vc_active):hover { background: #eef3f7 !important; }

/* Focus visibility on the toggle */
.cfaq-wpbakery .vc_tta-panel-title > a:focus-visible { outline: 2px solid var(--c-accent, #708400) !important; outline-offset: 2px; }

/* Keep jump targets clear of the sticky header */
.cfaq-wpbakery [id] { scroll-margin-top: 120px; }

/* More breathing room above + below the guest CTA, matching the batch-1 sites. */
.cfaq-wpbakery .faq-guest-cta { margin-top: 72px !important; margin-bottom: 90px !important; }

/* CTA buttons: Kalium's link-style (underline-animated) strips the anchor
   background inside vc_column_text, so re-assert it here. */
/* HWV-153 #76847: center the label both axes (the primary button gets stretched
   to the taller bordered secondary, so top-aligned text looked shifted up). */
.cfaq-wpbakery .cfaq-btn { text-decoration: none !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.cfaq-wpbakery .cfaq-btn--primary { background: var(--c-accent, #708400) !important; color: var(--c-white, #fff) !important; }
.cfaq-wpbakery .cfaq-btn--primary:hover,
.cfaq-wpbakery .cfaq-btn--primary:focus-visible { background: var(--c-accent-dark, #657700) !important; color: #fff !important; }
.cfaq-wpbakery .cfaq-btn--secondary { background: transparent !important; color: var(--c-head, #003b4c) !important; border: 2px solid var(--c-head, #003b4c) !important; }
.cfaq-wpbakery .cfaq-btn--secondary:hover,
.cfaq-wpbakery .cfaq-btn--secondary:focus-visible { background: var(--c-head, #003b4c) !important; color: #fff !important; }
/* Links inside answers keep the underline, but never a background pill */
/* (#77057: answer-link underline is the background gradient set above) */

/* HWV-153 #76854: tighter side gutters on mobile. The WPBakery row forces ~34px
   side padding and the cream categories panel adds another 34px, so content sat
   far from the edges — trim both to match the live page's narrower gutters. */
@media all and (max-width: 767px) {
	.cfaq.cfaq-wpbakery { padding-left: 0 !important; padding-right: 0 !important; }
	.cfaq-wpbakery .cfaq-faq-panel { padding-left: 16px !important; padding-right: 16px !important; }
	/* HWV-153 #76860/#76861/#76862: every WPBakery text-column wrapper adds 15px
	   side padding, so the content blocks (quick-answers, policy tables, categories
	   heading/pills, guest CTA) ended up narrower / misaligned against each other.
	   Zero it everywhere so all sections span the same width and line up. */
	.cfaq-wpbakery .wpb_text_column { padding-left: 0 !important; padding-right: 0 !important; }
}