/*
 * Companion rules for the lifted Webflow export on the four /Tuning/ pages.
 *
 * assets/css/tuning-webflow.css is the vendored, .ubd-wf-scoped Webflow
 * stylesheet (generated — do not edit). This file is the small hand-written
 * layer that replaces what Webflow's IX2 runtime used to do at runtime, plus
 * the one page-level reset the retired iframe wrapper used to provide.
 *
 * Loaded by inc/tuning.php on the four tuning pages only.
 */

/* --------------------------------------------------------------------
 * Page shell.
 *
 * The retired <iframe id="webflowIFrame"> block shipped an inline
 * `main {padding:0 !important; line-height:0 !important}` so the frame sat
 * flush. The Webflow sections are still full-bleed, so the padding reset
 * stays — but line-height:0 was only ever safe because no real text lived
 * in <main>, and is deliberately NOT carried over.
 *
 * .ubd-wf-page is added to <body> by inc/tuning.php on these four pages
 * only, so this rule can never match anywhere else even if the sheet were
 * loaded site-wide by mistake.
 *
 * The [role="main"] qualifier is load-bearing, not decoration: site.css's
 * `body:not(.home:not(.admin)) main{padding-top:15px;padding-bottom:15px}`
 * scores (0,2,2) because :not() inherits its argument's specificity. This
 * selector ties it and wins on order — no !important needed.
 * -------------------------------------------------------------------- */
body.ubd-wf-page main[role="main"] {
	padding: 0;
}

/* --------------------------------------------------------------------
 * FAQ accordion.
 *
 * Markup is the export's, verbatim:
 *   .accordion-wrapper > .accordion-item---v1
 *       > .accordion-top   (h3.display-6 + .secondary-button-icon.accordion-button
 *                           containing two .accordion-icon-line divs)
 *       > .accordion-bottom (the answer)
 *
 * Webflow ships `.accordion-bottom{overflow:hidden}` and relied on IX2 to
 * animate height 0 → auto. Without IX2 every answer would render open, so
 * the collapsed state is declared here and driven by the .is-open class
 * that assets/js/main.js toggles on .accordion-item---v1.
 *
 * 60rem is comfortably above the tallest answer at the narrowest breakpoint
 * (~750 characters in a 494px column), so the reveal never clips.
 * -------------------------------------------------------------------- */
.ubd-wf .accordion-top {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.ubd-wf .accordion-top:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ubd-wf .accordion-bottom {
	max-height: 0;
	opacity: 0;
	transition: max-height .4s ease, opacity .25s ease;
}

.ubd-wf .accordion-item---v1.is-open > .accordion-bottom {
	max-height: 60rem;
	opacity: 1;
}

/*
 * The two .accordion-icon-line divs form a "+"; Webflow's base rule holds
 * the vertical one at rotate(90deg). Rotating it to 180deg on open lands it
 * flat on top of the horizontal line — a "−" — with the same quarter-turn
 * spin IX2 used. Four classes here beats the three-class base rule.
 */
.ubd-wf .accordion-icon-line.vertical {
	transition: transform .3s ease;
}

.ubd-wf .accordion-item---v1.is-open .accordion-icon-line.vertical {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ubd-wf .accordion-bottom,
	.ubd-wf .accordion-icon-line.vertical,
	.ubd-wf .accordion-item---v1 {
		transition: none;
	}
}

/* --------------------------------------------------------------------
 * Tabs.
 *
 * Show/hide is entirely the vendored Webflow CSS's job
 * (.w-tab-pane{display:none} / .w--tab-active{display:block}); main.js just
 * moves the classes. Only the pointer affordance is missing, because the
 * export's tab links are <a> elements with no href.
 * -------------------------------------------------------------------- */
.ubd-wf .w-tab-link {
	cursor: pointer;
}

/* --------------------------------------------------------------------
 * REVERSE ISOLATION — site CSS bleeding INTO the lifted export.
 *
 * The retired iframe isolated styles in BOTH directions. Scoping the
 * vendored Webflow sheet under .ubd-wf stopped Webflow's rules escaping,
 * but nothing stopped the theme's own global rules — and Bootstrap's and
 * MDB's — from applying to the lifted markup. These rules restore what the
 * iframe boundary used to guarantee. Each one neutralises a specific,
 * identified collision; this is not a blanket reset.
 * -------------------------------------------------------------------- */

/*
 * site.css `h1,.h1{...text-transform:uppercase}` (and h2) would shout every
 * Webflow heading. The export sets its own case deliberately, so opt out.
 * Scoped to .ubd-wf, so the site's own headings are untouched.
 */
.ubd-wf h1, .ubd-wf .h1,
.ubd-wf h2, .ubd-wf .h2,
.ubd-wf h3, .ubd-wf .h3,
.ubd-wf h4, .ubd-wf .h4,
.ubd-wf h5, .ubd-wf .h5,
.ubd-wf h6, .ubd-wf .h6 {
	text-transform: none;
}

/*
 * Class-name collision: Webflow's FAQ toggle is `.secondary-button-icon
 * .accordion-button`, which is ALSO Bootstrap 5's accordion header button
 * class. Bootstrap paints it white, stretches it full-width and appends a
 * chevron ::after — destroying the +/- icon. Undo just those Bootstrap
 * declarations inside the wrapper; the Webflow rules then apply as authored.
 */
.ubd-wf .accordion-button {
	position: static;
	display: flex;
	width: auto;
	padding: 0;
	font-size: inherit;
	color: inherit;
	text-align: inherit;
	background-color: transparent;
	border-radius: inherit;
	box-shadow: none;
	overflow-anchor: auto;
}

.ubd-wf .accordion-button::after {
	content: none;
	display: none;
}

.ubd-wf .accordion-button:not(.collapsed) {
	color: inherit;
	background-color: transparent;
	box-shadow: none;
}

/*
 * MDB reboot: `a:not([href]):not([tabindex]){color:inherit}` (0,2,1) beats
 * the scoped `.ubd-wf a` (0,1,1). The export's tab links are exactly that
 * shape, so restore the intended colour at matching specificity.
 */
.ubd-wf a:not([href]):not([tabindex]) {
	color: #222;
	text-decoration: none;
}

/*
 * Hover text colour, reverse isolation (client-reported, Aug 2026).
 *
 * site.css carries `a:hover:not(.btn):not(.nav-link){color:#d91e25}` at
 * specificity 0,3,1 — higher than any of the export's own class rules
 * (0,2,0) and even Webflow's explicit hover rules (0,2,1). Inside live's
 * iframe that rule doesn't exist, so on our un-iframed pages every link
 * button flipped red on hover. These restate the Webflow cascade's
 * intended hover colours at 0,4,1 (`.ubd-wf a.x:hover:not(.btn)`), which
 * outranks the site rule; values are read from tuning-webflow.css — the
 * filled buttons flip white→black with their background swap, everything
 * else keeps its resting colour. Order matters where classes stack:
 * generic w-button/w-tab-link first, specific overrides after.
 */
.ubd-wf a.w-button:hover:not(.btn) { color: #fff; }
.ubd-wf a.w-tab-link:hover:not(.btn) { color: #222; }
.ubd-wf a.w-inline-block:hover:not(.btn) { color: inherit; }
.ubd-wf a.category---link:hover:not(.btn) { color: var(--core--colors--neutral--600); }
.ubd-wf a.ubd-banner-button:hover:not(.btn) { color: #000; }
.ubd-wf a.ubd-insta-cta-btn:hover:not(.btn) { color: #fff; }
.ubd-wf a.ubd-tune-why-link:hover:not(.btn) { color: #111; }
.ubd-wf a.ubd-tuning-hero-btn:hover:not(.btn),
.ubd-wf a.ubd-tune-btn:hover:not(.btn),
.ubd-wf a.ubd-tune-why-btn:hover:not(.btn),
.ubd-wf a.ubd-scan-card-btn:hover:not(.btn),
.ubd-wf a.ubd-detail-btn:hover:not(.btn) { color: #000; }
