/*
 * hs-base foundation.
 *
 * RTL-first: logical properties only, never left/right (AI_RULES.md §3).
 * Stylelint enforces this, so a physical property fails the build.
 *
 * This is structure and accessibility, not visual identity. Child themes own
 * colour, type scale, spacing rhythm and composition.
 */

:root {
	--hsb-measure: 760px;
	--hsb-measure-wide: 1200px;
	--hsb-gap: 1rem;
	--hsb-gap-lg: 2.5rem;
	--hsb-focus: 3px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--hsb-font-body, sans-serif);
	line-height: 1.7;
	text-wrap: pretty;
}

/* Visible focus everywhere, never removed (ARCHITECTURE.md §6.5). */
:focus-visible {
	outline: var(--hsb-focus) solid currentcolor;
	outline-offset: 2px;
}

/* --- Skip link ---------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.hsb-skip-link:focus {
	position: fixed;
	z-index: 100;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: Canvas;
	color: CanvasText;
	outline: var(--hsb-focus) solid currentcolor;
}

/* --- Layout ------------------------------------------------------------- */

.hsb-header__inner,
.hsb-footer__inner,
.hsb-main > * {
	max-inline-size: var(--hsb-measure-wide);
	margin-inline: auto;
	padding-inline: var(--hsb-gap);
}

/*
 * Full-bleed bands.
 *
 * The rule above boxes every direct child of <main>, which is right for a
 * listing or an article but wrong for a front-page band: a coloured section has
 * to reach both viewport edges or it reads as a floating rectangle. These
 * children carry their own centred `__inner` wrapper, so releasing the outer
 * constraint costs nothing and the measure is still held.
 */
.hsb-main > .hsb-section,
.hsb-main > .hsb-bleed {
	max-inline-size: none;
	padding-inline: 0;
}

.hsb-content,
.hsb-title,
.hsb-single__meta {
	max-inline-size: var(--hsb-measure);
	margin-inline: auto;
}

.hsb-content > .alignwide {
	max-inline-size: var(--hsb-measure-wide);
}

.hsb-main {
	display: block;
	padding-block: var(--hsb-gap-lg);
}

/* A page built from bands supplies its own vertical rhythm. */
.hsb-main:has(> .hsb-bleed) {
	padding-block: 0;
}

.hsb-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hsb-gap);
	padding-block: var(--hsb-gap);
}

.hsb-header__nav {
	flex: 1 1 auto;
}

.hsb-header__site-name {
	margin: 0;
	font-weight: 700;
}

/* --- Media: explicit sizing to avoid CLS (ARCHITECTURE.md §6.4) --------- */

img,
video,
iframe {
	max-inline-size: 100%;
	block-size: auto;
}

/* --- Logo --------------------------------------------------------------- */

.hsb-logo {
	display: inline-block;
	line-height: 0;
}

/*
 * A DEFINITE block-size, not auto.
 *
 * With both dimensions auto the logo's box is zero until the file arrives and
 * then jumps to its intrinsic size — measured on site 01 the header went from
 * 73px to 95px on load and pushed the whole document down, which was most of a
 * CLS of 0.13. Given a definite height the browser derives the width from the
 * img's own width/height attributes before the bytes arrive, so the full box is
 * reserved from first paint. object-fit keeps a logo of any ratio undistorted
 * inside it.
 */
.hsb-logo img,
.custom-logo {
	block-size: 52px;
	inline-size: auto;
	max-inline-size: 240px;
	object-fit: contain;
	object-position: inline-start;
}

.hsb-site-name {
	margin: 0;
	font-weight: 700;
}

.hsb-site-name a {
	color: inherit;
	text-decoration: none;
}

/* --- Menus -------------------------------------------------------------- */

.hsb-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hsb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Mobile menu: closed by default, opened by the toggle --------------- */

.hsb-header__toggle {
	display: none;
	font: inherit;
	cursor: pointer;
}

@media (width <= 767px) {
	.hsb-header__toggle {
		display: inline-block;
	}

	.hsb-header__nav {
		flex-basis: 100%;
	}

	/* Hidden from assistive tech too, not just visually. */
	.hsb-header__nav[hidden] {
		display: none;
	}

	.hsb-menu {
		flex-direction: column;
	}
}

/* --- Cards and services ------------------------------------------------- */

.hsb-archive__list,
.hsb-services__grid {
	display: grid;
	gap: var(--hsb-gap-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.hsb-card__thumb img,
.hsb-services__link img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.hsb-card__title {
	margin-block: 0 0.5rem;
}

/* --- Rank Math output --------------------------------------------------- */

.hsb-breadcrumbs {
	max-inline-size: var(--hsb-measure-wide);
	margin-inline: auto;
	padding-inline: var(--hsb-gap);
	padding-block-end: var(--hsb-gap);
	font-size: 0.875rem;
}

/* Rank Math's FAQ block, styled at base level; children restyle. */
.rank-math-block .rank-math-question {
	margin-block-start: var(--hsb-gap);
	font-weight: 600;
}

.rank-math-block .rank-math-answer {
	margin-block-start: 0.25rem;
}

/* --- Contact components: structure only, children own the look ---------- */

.hsb-footer {
	padding-block: var(--hsb-gap-lg);
}

.hsc-floating-bar {
	position: fixed;
	z-index: 50;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
}

.hsc-floating-bar > a {
	flex: 1 1 0;
	padding-block: 0.9rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Author box at the end of every article (company as the author) ---- */

.hsb-authorbox {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-block: 2.5rem 0.5rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid rgb(0 0 0 / 8%);
	border-inline-start: 4px solid var(--hsc-main, #1d4ed8);
	border-radius: 12px;
	background: rgb(0 0 0 / 2.5%);
	line-height: 1.7;
}

.hsb-authorbox__mark {
	flex: none;
	inline-size: 64px;
	block-size: 64px;
	margin: 0;
	padding: 6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgb(0 0 0 / 10%);
	object-fit: contain;
}

.hsb-authorbox__body {
	min-inline-size: 0;
}

.hsb-authorbox p {
	margin: 0;
}

.hsb-authorbox__label {
	font-size: 0.8125rem;
	opacity: 0.75;
}

.hsb-authorbox__name {
	color: inherit;
	font-size: 1.125rem;
	font-weight: 800;
}

.hsb-authorbox__text {
	margin-block: 0.25rem 0.5rem;
	font-size: 0.9375rem;
}

.hsb-authorbox a.hsb-authorbox__link {
	color: var(--hsc-main, #1d4ed8);
	font-size: 0.9375rem;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Business details at the foot of the About page (only when filled) -- */

.hsb-facts {
	max-inline-size: 1170px;
	margin: 0 auto 3rem;
	padding-inline: 1.5rem;
}

.hsb-facts__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 1rem 1.5rem;
	border: 1px solid rgb(0 0 0 / 8%);
	border-radius: 12px;
}

.hsb-facts__list div {
	display: flex;
	gap: 0.5rem;
}

.hsb-facts__list dt {
	font-weight: 800;
}

.hsb-facts__list dd {
	margin: 0;
}

/* --- Footer map --------------------------------------------------------- */

.hsb-map iframe {
	display: block;
	inline-size: 100%;
	block-size: 180px;
	border: 0;
}

/* --- Footer social icons: raised 3D buttons in each network's colours ---- */

.hsb-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.hsb-social__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	color: #fff;

	/*
	 * Top light and a bottom rim give the raised look. The drop shadow takes
	 * each network's own colour (--hsb-social-glow), not black, which read as
	 * a dirty shadow under the icons (owner, 2026-09-24).
	 */
	box-shadow:
		inset 0 2px 0 rgb(255 255 255 / 35%),
		inset 0 -3px 0 rgb(0 0 0 / 12%),
		0 6px 14px var(--hsb-social-glow, rgb(0 0 0 / 15%));
	transition: transform 0.2s, box-shadow 0.2s;
}

/* The logo sits above the shine, so the shine never greys it. */
.hsb-social__link svg {
	position: relative;
	z-index: 1;
}

.hsb-social__link::before {
	position: absolute;
	inset: 3px 6px 55%;
	border-radius: 50% 50% 40% 40%;
	background: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 0%));
	content: "";
	pointer-events: none;
}

.hsb-social__link:hover,
.hsb-social__link:focus-visible {
	box-shadow:
		inset 0 2px 0 rgb(255 255 255 / 35%),
		inset 0 -3px 0 rgb(0 0 0 / 12%),
		0 10px 18px var(--hsb-social-glow, rgb(0 0 0 / 18%));
	transform: translateY(-3px);
}

.hsb-social__link--facebook {
	--hsb-social-glow: rgb(24 119 242 / 40%);

	background: linear-gradient(160deg, #3b8cff, #1259c3);
}

.hsb-social__link--instagram {
	--hsb-social-glow: rgb(214 36 159 / 35%);

	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.hsb-social__link--x {
	--hsb-social-glow: rgb(0 0 0 / 25%);

	background: linear-gradient(160deg, #3a3a3a, #000);
}

.hsb-social__link--snapchat {
	--hsb-social-glow: rgb(230 205 0 / 45%);

	background: linear-gradient(160deg, #fffc70, #f5e400);
}

/*
 * White logos whatever the theme's footer link colour is. Themes colour
 * "footer a" grey or green, which turned the logos grey — the "dark shadow"
 * the owner saw (2026-09-24). Two classes and an attribute outrank a theme's "footer a:hover".
 */
.hsb-social .hsb-social__link[href],
.hsb-social .hsb-social__link[href]:hover,
.hsb-social .hsb-social__link[href]:focus-visible {
	color: #fff;
}