/* Tabbed Content
--------------------------------------------- */

.tabbed-content {
	border-radius: 24px;
}

.tabbed-content__header {
	margin-bottom: var(--wp--preset--spacing--48) !important;
}

.tabbed-content__header .gtt-halo-gradient-text {
	background: linear-gradient(155deg, var(--wp--preset--color--emerald) 30%, var(--wp--preset--color--malibu) 82%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: block;
}

/* Promote the header alongside the tablist/panels into one grid, so the
tablist stacks under the heading in column 1 and the panel sits in column 2,
top-aligned with the heading — rather than the plugin's default stacked
"header full width, then a nested tablist/panels row" layout. */
.tabbed-content.is-layout-side {
	column-gap: var(--wp--preset--spacing--64);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	row-gap: 0;
}

.tabbed-content.is-layout-side .tabbed-content__header {
	grid-column: 1;
	grid-row: 1;
}

.tabbed-content.is-layout-side .tabbed-content__body {
	display: contents;
}

.tabbed-content.is-layout-side .tabbed-content__tablist {
	gap: var(--wp--preset--spacing--48) !important;
	grid-column: 1;
	grid-row: 2;
}

.tabbed-content.is-layout-side .tabbed-content__panels {
	align-self: start;
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* The editor renders the block from edit.js rather than render.php, so it
never produces the __body/__tablist/__panels wrapper elements above — the
tab items group (__items) is a direct grid child there instead, and it holds
both the tablist AND the panel (each tabbed-content-item uses display:contents
per editor.scss, so its tab and panel become the items group's own internal
grid columns). It needs the full row's width to split between them — pinning
it to column 1 alone squeezes the panel into half the space and leaves
column 2 empty. */
.tabbed-content.is-layout-side .tabbed-content__items {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Below this point the plugin's own tablist/panel grid would normally
collapse to one column (see .tabbed-content__body in the plugin's styles),
but display:contents above takes that grid out of play. Collapse our own
grid to match at the same breakpoint, so the panel drops under the tablist
instead of being squeezed into a second column. */
@media screen and (max-width: 781px) {
	.tabbed-content.is-layout-side {
		grid-template-columns: minmax(0, 1fr);
	}

	.tabbed-content.is-layout-side .tabbed-content__panels {
		grid-column: 1;
		grid-row: 3;
		margin-top: var(--wp--preset--spacing--48);
	}
}

/* Tab affordance: a dot-and-line "step" marker in front of the tab's
heading + description, mirroring the Figma stepper without importing the
dot/line as separate SVG assets. */
.tabbed-content__tab {
	opacity: 1;
	padding: 0 !important;
}

/* The site-wide focus style (assets/style.css) rings any button inside a
black-background block with a 2px outline, and the plugin adds one of its own.
A tab's button box isn't a meaningful shape here, so drop both rings. The long
selector is what it takes to out-specify the site-wide rule's !important. */
body:not(.wp-admin, .block-editor-iframe__body)
	.has-black-background-color
	.tabbed-content__tab:focus,
.tabbed-content__tab:focus {
	box-shadow: none;
	outline: none !important;
}

/* Keyboard focus still needs a marker: glow the tab's own text instead. */
.tabbed-content__tab:focus-visible .tabbed-content__tab-content {
	text-shadow: 0 0 12px var(--wp--preset--color--emerald);
}

.tabbed-content__tab-content {
	color: var(--wp--preset--color--mid-grey);
	padding-left: var(--wp--preset--spacing--56);
	position: relative;
}

/* The plugin's own editor.scss nests a generic placeholder padding/gap rule
under .wp-block-humanmade-tabbed-content .wp-block-humanmade-tabbed-content-tab
(its editor-only bordered-box affordance), which clobbers the padding-left
above and adds a gap the front end doesn't have. Matching that selector's
two-class specificity is a tie decided by stylesheet order (and losing it);
add a third class to win outright regardless of order. */
.wp-block-humanmade-tabbed-content .tabbed-content__tab-content.wp-block-humanmade-tabbed-content-tab {
	gap: 0;
	padding: 0 0 0 var(--wp--preset--spacing--56);
}

.tabbed-content__tab-content::before {
	background-color: var(--wp--preset--color--mid-grey);
	border-radius: 50%;
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	top: 10px;
	width: 12px;
}

.tabbed-content__tab:not(:last-child) .tabbed-content__tab-content::after {
	background-color: var(--wp--preset--color--abbey);

	/* Reaches past the tablist's own gap to the next dot's vertical position
	(10px, matching ::before's own top offset), so the line touches both dots
	rather than stopping at the next tab's content box edge. */
	bottom: calc((var(--wp--preset--spacing--48) + 10px) * -1);
	content: "";
	left: 5px;
	position: absolute;
	top: 22px;
	width: 2px;
}

.tabbed-content__tab-content h4,
.tabbed-content__tab-content p {
	color: inherit;
	margin: 0;
}

/* The front end wraps each tab in a `.tabbed-content__tab` button carrying
`.is-active`. The editor has no such wrapper — `.is-active` lands on
`.tabbed-content-item` instead (see tabbed-content-item/edit.js) — so both
selectors are needed to light up the active tab in each context. */
.tabbed-content__tab.is-active .tabbed-content__tab-content,
.tabbed-content-item.is-active .tabbed-content__tab-content {
	color: var(--wp--preset--color--white);
}

.tabbed-content__tab.is-active .tabbed-content__tab-content::before,
.tabbed-content-item.is-active .tabbed-content__tab-content::before {
	background-color: var(--wp--preset--color--emerald);
}

/* Halo of Defense: glowing icon orb with an overlapping tag pill. */
.gtt-halo-defense-visual {
	margin: 0 auto !important;
	max-width: 300px;
	position: relative;
	width: 100%;
}

.gtt-halo-defense-visual__tag {
	background-color: var(--wp--preset--color--black);
	border-radius: 9px;
	bottom: 5%;
	color: var(--wp--preset--color--white);
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
	font-weight: 700;
	letter-spacing: 0.48px;
	margin: 0;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	position: absolute;
	right: -16%;
	text-transform: uppercase;
}

/* Below the orb's own width the pill has no room to hang off its right edge. */
@media screen and (max-width: 600px) {
	.gtt-halo-defense-visual__tag {
		right: 0;
	}
}

/* Persona Section: shared "Time = Risk = $" graphic panel. */
.gtt-halo-persona-visual {
	background-color: var(--wp--preset--color--deep-purple);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24) !important;
}

.gtt-halo-persona-visual img {
	margin: 0 auto;
}