/*
 * Shared tokens for the Buildiyo package pages.
 *
 * Everything is scoped under .bdy so the plugin never leaks styles into the
 * surrounding theme, and theme resets never reach in.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

.bdy {
	--bdy-ink: #101B2B;
	--bdy-ink-soft: #37414F;
	--bdy-muted: #54606F;
	--bdy-muted-2: #5A6472;
	--bdy-dim: #8FA3BE;
	--bdy-blue: #1D63C4;
	--bdy-blue-light: #6FA3E8;
	--bdy-blue-pale: #A9CBF5;
	--bdy-line: #D9E5F6;
	--bdy-line-soft: #E7F0FB;
	--bdy-line-strong: #D3E1F4;
	--bdy-surface: #FFFFFF;
	--bdy-surface-alt: #F8FBFF;
	--bdy-on-dark: #EDF3FC;
	--bdy-radius: 18px;

	box-sizing: border-box;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	color: var(--bdy-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.bdy *,
.bdy *::before,
.bdy *::after {
	box-sizing: inherit;
}

.bdy h2,
.bdy h3 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0;
}

.bdy p {
	margin: 0;
}

.bdy button {
	font-family: inherit;
	cursor: pointer;
}

/*
 * No blanket link colour here on purpose. `.bdy a` out-specifies a
 * single-class button rule, so a shared default would repaint white-on-blue
 * calls to action in link blue. Every link states its own colour, either
 * directly or through its container.
 */
.bdy a {
	text-decoration: none;
}

.bdy input:focus-visible,
.bdy button:focus-visible,
.bdy a:focus-visible {
	outline: 2px solid var(--bdy-blue);
	outline-offset: 2px;
}

.bdy__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/*
 * These layouts are designed at 1200px, but a shortcode usually lands inside a
 * theme's content column, which is often far narrower. This breaks the section
 * out to the full viewport width from wherever it sits. Turn it off with
 * full_width="no" on the shortcode when the theme already gives a wide canvas.
 *
 * 100vw counts the scrollbar, so a classic scrollbar can leave the section a
 * dozen pixels wider than the page; that is the trade for not needing to know
 * anything about the theme's markup.
 */
.bdy--full {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Horizontal scrollers keep their own scrollbar rather than the page's. */
.bdy [data-scroll] {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bdy [data-scroll]::-webkit-scrollbar {
	height: 6px;
}

.bdy [data-scroll]::-webkit-scrollbar-thumb {
	background: var(--bdy-line-strong);
	border-radius: 99px;
}

.bdy-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bdy-empty {
	border: 1px dashed #c3c4c7;
	background: #fff;
	padding: 20px;
	font-family: system-ui, sans-serif;
}

/* Range inputs are styled per-page but share the track/thumb shape. */
.bdy input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	outline: none;
}

.bdy input[type='number'] {
	-moz-appearance: textfield;
	font-family: inherit;
}

.bdy input[type='number']::-webkit-outer-spin-button,
.bdy input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Theme armour ─────────────────────────────────────────────────────────
 *
 * Themes style content generically — `.entry-content a`, `.entry-content h2`,
 * `.content-area button` — at two-class specificity, which beats a plain
 * single-class rule here and repaints the design in the theme's colours. The
 * doubled `.bdy.bdy` prefix costs nothing and outranks those.
 *
 * Component stylesheets use the same doubled prefix for anything a theme
 * competes over: headings, links that look like buttons, and lists.
 */
.bdy.bdy a {
	text-decoration: none;
	box-shadow: none;
}

.bdy.bdy button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
}

.bdy.bdy p {
	margin: 0;
}

.bdy.bdy img {
	max-width: 100%;
	height: auto;
}

/* ── Service type tabs ────────────────────────────────────────────────────
 *
 * Home | Commercial | … Real links carrying ?bdy_type=, so each type has its
 * own URL, works without JavaScript, and can be indexed separately. */

.bdy .bdy-types {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(16, 27, 43, 0.06);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.bdy.bdy .bdy-types__tab {
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	color: #54606F;
	background: transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.bdy.bdy .bdy-types__tab:hover {
	color: #101B2B;
}

.bdy.bdy .bdy-types__tab.is-active {
	background: #101B2B;
	color: #fff;
	box-shadow: 0 1px 3px rgba(16, 27, 43, 0.18);
}