/* ────────────────────────────────────────────────────────────
   03-tabs-horizontal.css — Tabs — Horizontal
   Class chain: core/group outer (bg via Style panel, alignfull)
                → gb element .tabs-horizontal → .tabs__inner
                → generateblocks-pro/tabs: .gb-tabs → .gb-tabs__menu
                  (.gb-tabs__menu-item ×N) + .gb-tabs__items
                  (.gb-tabs__item ×N)
   Tab-switching JS and panel show/hide (.gb-tabs__item-open) are
   handled entirely by generateblocks-pro's own tabs.css/tabs.js —
   this file only styles layout, color, and the active-tab indicator.
   Frame default: full-bleed band, no card/radius (see text-table.css,
   accordion-section.css) — deliberately different from Arch's
   contained-card treatment of the same pattern.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper (full-bleed) ─────────────────────────── */
.tabs-horizontal.gb-element {
	padding: var(--spacing-4xl) var(--spacing-md);
}

/* ── Inner wrapper (constrains width) ─────────────────────── */
/* No flex `gap` here — heading-to-intro and intro-to-tabs spacing are
   each controlled explicitly below (matching card-collection's
   convention) so they don't stack with each element's own margin. */
.tabs-horizontal.gb-element .tabs__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

/* ── Heading ──────────────────────────────────────────────── */
/* GB text h2 — lacks .wp-block-heading so global dark inversion won't apply */
.tabs-horizontal.gb-element h2 {
	text-align: center;
	margin: 0 0 var(--spacing-sm);
}

/* ── Intro paragraph ──────────────────────────────────────── */
.tabs-horizontal.gb-element .tabs__inner > p {
	max-width: var(--content-max-prose);
	margin-inline: auto;
	font-size: var(--text-heading-sm);
	margin-bottom: var(--spacing-xl);
	text-align: center;
}

/* ── Tabs block: menu + items side by side ────────────────── */
.tabs-horizontal.gb-element .gb-tabs {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing-xl);
}

/* ── Nav list (left) ──────────────────────────────────────── */
.tabs-horizontal.gb-element .gb-tabs__menu {
	display: flex;
	flex-direction: column;
	width: 220px;
	flex-shrink: 0;
}

.tabs-horizontal.gb-element .gb-tabs__menu-item {
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--color-gray-stroke);
	border-left: 3px solid transparent;
	padding-left: var(--spacing-sm);
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	color: var(--color-text-body);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tabs-horizontal.gb-element .gb-tabs__menu-item:hover,
.tabs-horizontal.gb-element .gb-tabs__menu-item:focus-visible {
	color: var(--color-blue-primary);
}

.tabs-horizontal.gb-element .gb-tabs__menu-item:focus-visible {
	outline: 2px solid var(--color-blue-primary);
	outline-offset: -2px;
}

.tabs-horizontal.gb-element .gb-tabs__menu-item.gb-block-is-current {
	border-left-color: var(--color-blue-primary);
	color: var(--color-blue-primary);
	font-weight: var(--font-weight-medium);
}

/* ── Content pane (right) — flush, no boxed treatment ─────── */
.tabs-horizontal.gb-element .gb-tabs__items {
	flex-grow: 1;
}

.tabs-horizontal.gb-element .gb-tabs__item h3 {
	font-size: var(--text-heading-md);
	margin: 0 0 var(--spacing-xs);
}

.tabs-horizontal.gb-element .gb-tabs__item p {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	margin: 0 0 var(--spacing-sm);
}

.tabs-horizontal.gb-element .gb-tabs__item p:last-child {
	margin-bottom: 0;
}

/* Lists aren't covered by core/paragraph styling above — the global
   .is-style-bg-dark rule doesn't touch ul/ol either, so this component
   handles both explicitly, matching text-table.css's .wp-block-list
   convention. */
.tabs-horizontal.gb-element .gb-tabs__item ul,
.tabs-horizontal.gb-element .gb-tabs__item ol {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	margin: 0 0 var(--spacing-sm);
	padding-left: var(--spacing-md);
}

.tabs-horizontal.gb-element .gb-tabs__item ul:last-child,
.tabs-horizontal.gb-element .gb-tabs__item ol:last-child {
	margin-bottom: 0;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
/* h2/intro are GB text — no .wp-block-heading, not caught by global inversion */
.is-style-bg-dark .tabs-horizontal.gb-element h2,
.is-style-bg-dark .tabs-horizontal.gb-element .tabs__inner > p {
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item {
	border-bottom-color: var(--color-overlay-light-fade);
	color: var(--color-text-body-inverse);
}

.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item:hover,
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item:focus-visible,
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item.gb-block-is-current {
	border-left-color: var(--color-white);
	color: var(--color-white);
}

.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item:focus-visible {
	outline-color: var(--color-white);
}

/* Both need an explicit override here: h3 is GB text (no .wp-block-heading,
   so the global inversion never reaches it), and p's own base rule above
   is more specific than the global `.is-style-bg-dark p` rule so it wins
   by default. Panel stays flush/transparent (no boxed treatment), so
   content should read white against the blue background like everything
   else in the section. */
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__item h3,
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__item p,
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__item ul,
.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__item ol {
	color: var(--color-text-body-inverse);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.tabs-horizontal.gb-element {
		padding: var(--spacing-2xl) var(--spacing-sm);
	}
}

@media (max-width: 768px) {
	.tabs-horizontal.gb-element {
		padding-block: var(--spacing-xl);
	}

	.tabs-horizontal.gb-element .gb-tabs {
		flex-direction: column;
	}

	.tabs-horizontal.gb-element .gb-tabs__menu {
		flex-direction: row;
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tabs-horizontal.gb-element .gb-tabs__menu-item {
		flex-shrink: 0;
		white-space: nowrap;
		border-left: none;
		border-bottom: 3px solid transparent;
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.tabs-horizontal.gb-element .gb-tabs__menu-item.gb-block-is-current {
		border-left-color: transparent;
		border-bottom-color: var(--color-blue-primary);
	}

	.is-style-bg-dark .tabs-horizontal.gb-element .gb-tabs__menu-item.gb-block-is-current {
		border-bottom-color: var(--color-white);
	}

	.tabs-horizontal.gb-element .gb-tabs__items {
		padding-top: var(--spacing-md);
	}
}