/**
 * TechBBQ base layout — content widths, header chrome, footer chrome.
 *
 * Structural styles only. Visual settings (colors, paddings, typography)
 * live in the Elementor Theme Builder template data and Site Settings so
 * editors keep control. Source frames:
 * https://www.figma.com/design/5yXrB09CMVaqf3V343o3yZ/ nodes
 * 4299:20471 (360) / 4299:20520 (768) / 4299:20504 (1024) / 4299:20487 (1440)
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1440, 1440+.
 */

body {
	background-color: var(--techbbq-bg-main);
	font-family: var(--techbbq-font-family-body);
	--e-global-typography-text-font-family: var(--techbbq-font-family-body);
}

html {
	scrollbar-gutter: stable;
}

/* ── Section content width ────────────────────────────────────
 * Use on the inner column of full-bleed sections. The outer
 * section shell keeps background/layout full width; .section-inner
 * caps the layout at --techbbq-content-max (Figma frame width) with
 * side padding applied inside via border-box.
 * Inner readable width: 360 → 328, 768 → 720, 1024 → 976, 1440 → 1392.
 */
.section-inner,
.techbbq-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--techbbq-content-max);
	margin-inline: auto;
	padding-left: var(--techbbq-container-padding);
	padding-right: var(--techbbq-container-padding);
}

/* Header location shell: banner full-bleed + glass bar overlaying page content.
 * Site Kit sets --container-max-width: 1440px on all .e-con; containers also
 * default to 10px padding — zero both so the strip spans edge-to-edge.
 */
.elementor-location-header .techbbq-header-shell {
	--container-max-width: 100%;
	--content-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

.techbbq-header-shell {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* Full-bleed section widgets opt in via techbbq-section-full on the Elementor wrapper
 * (see TechBBQ_Section_Widget_Base). Content width lives in .section-inner. */
.elementor-widget.techbbq-section-full {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.elementor-widget.techbbq-section-full--overflow-hidden {
	overflow: hidden;
}

/* ── Header: floating glass bar overlaying page content ────────
 * Width matches page layout (--techbbq-content-max; padding is inside).
 * Figma: radius 8px, blur(15px), bg --techbbq-bg-surface-glass.
 * Overlay requires taking the Theme Builder container out of flow;
 * Elementor Pro sticky takes over with inline position:fixed once scrolling starts.
 * backdrop-filter is not an Elementor control, so it lives here.
 *
 * Exclude .elementor-sticky__spacer — Pro clones the header for
 * layout preservation; it must stay in normal flow inside the
 * header location wrapper, not use the viewport insets.
 */
.techbbq-header:not(.elementor-sticky__spacer) {
	position: absolute;
	top: var(
		--techbbq-header-top,
		calc(var(--techbbq-banner-height) + var(--techbbq-space-1))
	) !important;
	right: auto;
	left: 50%;
	width: min(
		var(--techbbq-content-max),
		calc(100% - 2 * var(--techbbq-header-inset))
	) !important;
	max-width: var(--techbbq-content-max);
	transform: translateX(-50%);
	z-index: 100;
	/* Glass lives on ::before so nested desktop submenus can blur page content
	 * independently (backdrop-filter does not stack on descendant elements). */
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.techbbq-header:not(.elementor-sticky__spacer)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--techbbq-bg-surface-glass);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	pointer-events: none;
}

/* Pro sticky: content-width centering + scroll-linked top. */
.techbbq-header.elementor-sticky--active:not(.elementor-sticky__spacer) {
	top: var(
		--techbbq-header-top,
		calc(var(--techbbq-banner-height) + var(--techbbq-space-1))
	) !important;
	right: auto !important;
	left: 50% !important;
	width: min(
		var(--techbbq-content-max),
		calc(100% - 2 * var(--techbbq-header-inset))
	) !important;
	max-width: var(--techbbq-content-max);
	transform: translateX(-50%);
}

/* Admin-bar offset applies only when the header is fixed (viewport-relative).
 * In normal flow the shell already sits below the admin bar via html margin-top. */
.admin-bar .techbbq-header.elementor-sticky--active:not(.elementor-sticky__spacer) {
	top: calc(
		var(
			--techbbq-header-top,
			calc(var(--techbbq-banner-height) + var(--techbbq-space-1))
		) + var(--wp-admin--admin-bar--height, 32px)
	) !important;
}

/* Pro sticky clones the header for layout preservation; collapse it because
 * the bar is out of flow (absolute/fixed) and must not inflate the shell.
 */
.techbbq-header.elementor-sticky__spacer {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Header children size to content; the bar itself is space-between. */
.techbbq-header:not(.elementor-sticky__spacer) > .e-con,
.techbbq-header:not(.elementor-sticky__spacer) > .elementor-widget {
	width: auto;
}

.techbbq-header .techbbq-btn-wrapper {
	width: auto;
}

/* Header CTA group — strip Elementor .e-con-full default padding (10px). */
.techbbq-header:not(.elementor-sticky__spacer) > .e-con.e-child {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* ── Desktop nav (1440+) ──────────────────────────────────────── */
@media (min-width: 1440px) {
	/* Relocated from @media (min-width: 1025px) */
	/* Figma centers the nav absolutely within the bar at desktop. */
	.techbbq-header:not(.elementor-sticky__spacer) .elementor-widget-nav-menu {
		order: unset;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ── Footer ───────────────────────────────────────────────────
 * Outer section carries the orb-gradient backdrop; the inner card
 * is capped at content width regardless of Site Settings.
 * Figma section / footer height: 1060px at 1440, 1024, 768, and 360.
 * nodes 4299:20503, 4299:20519, 4299:20534, 4299:20486
 */
.techbbq-footer {
	--techbbq-footer-height: 1060px;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	min-height: var(--techbbq-footer-height);
	overflow: hidden;
}

.techbbq-footer > .techbbq-footer__orb-wrap.elementor-element {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	max-width: none !important;
	pointer-events: none;
}

.techbbq-footer > .techbbq-footer__orb-wrap .elementor-widget-container {
	height: 100%;
}

.techbbq-footer__orb {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.techbbq-footer__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--techbbq-content-max);
}

.techbbq-footer p {
	margin: 0;
}

/* Figma 4299:20486 — mobile: footer link lists, 2 columns per row. */
@media (max-width: 767px) {
	.techbbq-footer .techbbq-footer__card.e-con {
		--padding-top: var(--techbbq-space-3);
		--padding-right: var(--techbbq-space-3);
		--padding-bottom: var(--techbbq-space-3);
		--padding-left: var(--techbbq-space-3);
	}

	.techbbq-footer .techbbq-footer__card .techbbq-footer__link-grid.e-con {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--techbbq-space-1);
		row-gap: var(--techbbq-space-4);
		--display: grid;
		--column-gap: var(--techbbq-space-1);
		--row-gap: var(--techbbq-space-4);
		--gap: var(--techbbq-space-4) var(--techbbq-space-1);
	}

	.techbbq-footer .techbbq-footer__card .techbbq-footer__link-grid > .e-con {
		--width: 100%;
		--flex-grow: 0;
		--flex-shrink: 0;
		width: 100%;
		max-width: none;
		flex: none;
	}

	/* Figma 4299:20486 — mobile: 12px between Need help? and text below. */
	.techbbq-footer .techbbq-footer__card .techbbq-footer__help-block.e-con {
		--row-gap: 0;
		--column-gap: 0;
		--gap: 0;
	}

	.techbbq-footer .techbbq-footer__help-block .elementor-widget-heading {
		margin-bottom: var(--techbbq-space-sm);
	}

	.techbbq-footer .techbbq-footer__help-block .elementor-widget-text-editor + .elementor-widget {
		margin-top: var(--techbbq-space-2);
	}

	/* Figma 4299:20486 — mobile: Browse FAQ full width. */
	.techbbq-footer .techbbq-footer__help-block .techbbq-btn-wrapper {
		width: 100%;
	}

	.techbbq-footer .techbbq-footer__help-block .techbbq-btn {
		width: 100%;
	}
}

/* Footer nested containers — strip Elementor .e-con default padding (10px).
 * Padding lives on .techbbq-footer (section inset) and .techbbq-footer__card only. */
.techbbq-footer .e-con:not(.techbbq-footer):not(.techbbq-footer__card) {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* Figma 4299:20486 — mobile: bottom bar row gap space/6 (24px). */
.techbbq-footer .techbbq-footer__bottom-bar.e-con {
	--row-gap: var(--techbbq-space-3);
	--column-gap: var(--techbbq-space-3);
	--gap: var(--techbbq-space-3) var(--techbbq-space-3);
}

.techbbq-footer .techbbq-footer__bottom-bar .elementor-icon-list--layout-inline .elementor-inline-items {
	row-gap: var(--techbbq-space-3);
}

/* Figma 4299:20534 — tablet: row gap space/2 (16px); meta left, credit right. */
@media (min-width: 768px) {
	.techbbq-footer .techbbq-footer__bottom-bar.e-con {
		--row-gap: var(--techbbq-space-2);
		--column-gap: var(--techbbq-space-2);
		--gap: var(--techbbq-space-2) var(--techbbq-space-2);
	}

	.techbbq-footer .techbbq-footer__bottom-bar .elementor-icon-list--layout-inline .elementor-inline-items {
		row-gap: var(--techbbq-space-2);
	}

	.techbbq-footer .techbbq-footer__bottom-bar.e-con {
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.techbbq-footer .techbbq-footer__bottom-bar-left.e-con {
		flex: 0 1 auto;
		width: auto;
		max-width: none;
	}

	.techbbq-footer .techbbq-footer__credit-widget {
		flex: 0 0 auto;
	}
}

/* Desktop — bootstrap flex_gap row 24 / column 32; 3-column bottom bar. */
@media (min-width: 1024px) {
	.techbbq-footer .techbbq-footer__bottom-bar.e-con {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: end;
		width: 100%;
		--display: grid;
		--flex-direction: row;
		--row-gap: var(--techbbq-space-3);
		--column-gap: var(--techbbq-space-4);
		--gap: var(--techbbq-space-3) var(--techbbq-space-4);
	}

	.techbbq-footer .techbbq-footer__bottom-bar-left.e-con {
		display: contents;
	}

	.techbbq-footer .techbbq-footer__copyright {
		grid-column: 1;
		justify-self: start;
	}

	.techbbq-footer .techbbq-footer__legal-menu {
		grid-column: 2;
		justify-self: center;
	}

	.techbbq-footer .techbbq-footer__credit-widget {
		grid-column: 3;
		justify-self: end;
	}
}

/* Figma 4299:20486 — footer credit: Inter Display + GT Walsheim Pro brand mark. */
.techbbq-footer .techbbq-footer__bottom-bar .techbbq-footer__credit {
	margin: 0;
	color: var(--techbbq-content-secondary);
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-text-paragraph-xxs-size);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: 0.02em;
}

.techbbq-footer .techbbq-footer__bottom-bar .techbbq-footer__credit-brand {
	color: var(--techbbq-color-beige-1000);
	font-family: var(--techbbq-font-family-brand);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.techbbq-footer .techbbq-footer__bottom-bar a.techbbq-footer__credit-brand:hover,
.techbbq-footer .techbbq-footer__bottom-bar a.techbbq-footer__credit-brand:focus-visible {
	color: var(--techbbq-color-beige-1000);
	text-decoration: underline;
}

/* Footer text links — override Elementor icon-list (no underline by default). */
.techbbq-footer .elementor-icon-list-item a:hover,
.techbbq-footer .elementor-icon-list-item a:focus-visible,
.techbbq-footer .techbbq-footer__help-block .elementor-widget-text-editor a:hover,
.techbbq-footer .techbbq-footer__help-block .elementor-widget-text-editor a:focus-visible {
	color: currentColor;
	text-decoration: underline;
}