/*
 * SWA theme: what theme.json cannot express.
 * Design values come from the live Hub/Elementor site (measured October 2026).
 */

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

.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 15px;
	z-index: 100000;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Header: overlays the top of the page, as on the Hub site ---------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header.is-stuck {
	position: fixed;
	top: 0;
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
	animation: swa-header-in 0.3s ease;
}

.admin-bar .site-header.is-stuck {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header.is-stuck .swa-topbar {
	display: none;
}

@keyframes swa-header-in {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

.site-header > .wp-block-group,
.site-header > div {
	margin-block-start: 0;
}

.swa-topbar {
	min-height: var(--wp--custom--header--topbar-height);
	padding: 0 var(--wp--custom--header--gutter);
	gap: 20px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--size-12);
	line-height: 1;
}

.swa-topbar p {
	margin: 0;
}

.swa-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	white-space: nowrap;
}

.swa-topbar a:hover {
	text-decoration: underline;
}

.swa-topbar__mail a::before,
.swa-topbar__phone a::before,
.swa-topbar__services a::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--swa-icon) center / contain no-repeat;
	mask: var(--swa-icon) center / contain no-repeat;
}

.swa-topbar__mail a::before {
	--swa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zM2 5l10 8 10-8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.swa-topbar__phone a::before {
	--swa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.swa-topbar__services a::before {
	--swa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}

.swa-topbar__right {
	gap: 24px;
}

.swa-bar {
	position: relative;
	min-height: var(--wp--custom--header--bar-height);
	padding: 0 var(--wp--custom--header--gutter);
	background: var(--wp--preset--color--cloud);
}

.swa-bar .wp-block-site-logo {
	line-height: 0;
}

.swa-bar .wp-block-site-logo img {
	width: 200px;
	height: auto;
}

@media (max-width: 1100px) {
	:root {
		--swa-header-height: 110px;
	}

	.swa-bar {
		min-height: 67px; /* live phone header: 35 + 67 */
	}

	.swa-topbar__services {
		display: none;
	}

	.swa-topbar {
		min-height: 35px;
		gap: 10px;
	}
}

/* "Get In Touch" tab fixed to the right edge (desktop only) */
.swa-sticky-tab {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 80;
	margin: 0;
	transform: translateY(-50%);
}

.swa-sticky-tab p {
	margin: 0;
}

.swa-sticky-tab a {
	/* As Hub's sticky button: 61 x 200px, 15px text centred (vertical-rl: the first padding runs along the text). */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 200px;
	padding: 20px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 15px;
	line-height: 21px;
	text-decoration: none;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.swa-sticky-tab__page {
	display: none !important;
}

@media (max-width: 1100px) {
	.swa-sticky-tab {
		display: none;
	}
}

/* Contact pop-up */
.swa-modal {
	width: min(600px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	padding: 40px 30px 20px;
	border: 0;
	background: var(--wp--preset--color--base);
}

.swa-modal::backdrop {
	background: rgb(0 0 0 / 0.6);
}

.swa-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

/* ---------- Main ---------- */
.site-main {
	margin-block-start: 0;
}

/* ---------- Blog post ---------- */
/* Posts sit in Bootstrap's .container on the live site: 15px side padding, not the theme's 20px. */
.swa-post { --wp--style--root--padding-left: 15px; --wp--style--root--padding-right: 15px; }
.swa-post-header {
	padding-top: calc(var(--wp--custom--header--topbar-height) + var(--wp--custom--header--bar-height) + 56px);
	padding-bottom: 21px;
}

.swa-post-header > * {
	padding-left: 10px;
	padding-right: 10px;
}

.swa-post-header__cats {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--size-13);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.swa-post-header__cats a {
	color: var(--wp--preset--color--contrast);
}

.swa-post-header .wp-block-post-title {
	margin-top: calc(0.35em + 2.5px); /* Hub: the category line, then .35em */
	letter-spacing: -0.32px;
	line-height: 1;
}

.swa-post-nav {
	margin-top: 60px;
	padding: 30px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.swa-post-nav a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.swa-related {
	margin-top: 80px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.swa-related .swa-related__heading {
	margin-bottom: 30px;
}

.swa-related .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.swa-related__meta {
	gap: 10px;
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--size-12);
}

.swa-related__meta .wp-block-post-terms a {
	padding: 4px 8px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.swa-related .wp-block-post-title {
	margin-top: 12px;
	font-weight: 700;
}

.swa-related .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

/* ---------- Footer ---------- */
.site-footer {
	margin-block-start: 0;
}

.swa-footer {
	padding-top: 71px;
	padding-bottom: 43px;
	color: var(--wp--preset--color--base);
}

.swa-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.swa-footer a:hover {
	text-decoration: underline;
}

.swa-footer .swa-footer__email {
	font-size: var(--wp--preset--font-size--size-36);
	line-height: 1.2;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.swa-footer .swa-footer__email {
		font-size: 20px;
		text-align: left;
	}
}

.swa-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--size-13);
	line-height: 21px;
}

.swa-footer__badges {
	gap: 30px;
	align-items: center;
}

.swa-footer__badges .wp-block-image {
	margin: 0;
}

.swa-footer__consent {
	font-size: var(--wp--preset--font-size--size-10);
}

.swa-footer__legal {
	font-size: var(--wp--preset--font-size--size-12);
	text-align: center;
}

.swa-footer__legal p {
	margin: 0;
}

.swa-footer .wp-block-social-links {
	gap: 30px;
}

.swa-footer .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--steel);
	font-size: 25px;
}

/* As the Elementor footer: 50px icon boxes (25px glyph), the row starting at the column edge, 10px column padding. */
.swa-footer .wp-block-social-links { margin-left: -12.5px; margin-right: -12.5px; }
.swa-footer .wp-block-social-links .wp-social-link a { padding: 12.5px; }
.swa-footer > .wp-block-columns > .wp-block-column { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }

/* Footer newsletter (Contact Form 7) */
.swa-footer .wpcf7-form {
	position: relative;
	display: flex;
	margin: 0;
	border: 1px solid var(--wp--preset--color--steel);
}

.swa-footer .wpcf7-form p {
	display: flex;
	flex: 1;
	align-items: stretch;
	margin: 0;
}

.swa-footer .wpcf7-form p br {
	display: none;
}

.swa-footer .wpcf7-form-control-wrap {
	display: block;
	flex: 1;
}

.swa-footer .wpcf7-email {
	width: 100%;
	padding: 12px 15px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--size-13);
}

.swa-footer .wpcf7-email::placeholder {
	color: var(--wp--preset--color--silver);
}

.swa-footer .wpcf7-submit {
	padding: 0 18px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-size: 18px;
	cursor: pointer;
}

.swa-footer .wpcf7-response-output {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: var(--wp--preset--font-size--size-12);
}

.swa-footer .wpcf7-spinner {
	display: none;
}

/* ---------- Archives, search, 404 ---------- */
.swa-archive {
	padding-top: calc(var(--wp--custom--header--topbar-height) + var(--wp--custom--header--bar-height) + 50px);
	padding-bottom: 80px;
}

/* Footer newsletter laid out as the Elementor form: email 70% (33px tall), icon button 30%. */
.swa-footer .wpcf7-form-control-wrap { flex: 0 0 70%; }
.swa-footer .wpcf7-email { height: 33px; padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; }
.swa-footer .wpcf7-submit { flex: 0 0 30%; min-height: 33px; }

/* Footer on phones, as on Hub: smaller logo and email, one list of quick links, 25px gutter. */
@media (max-width: 781px) {
	.swa-footer > .wp-block-columns > .wp-block-column { padding-left: 5px; padding-right: 5px; }
	.swa-footer .wp-block-image img[alt="Smart Web Agency"] { width: 194px !important; }
	.swa-footer .swa-footer__email { font-size: 14px; line-height: 20px; }
	.swa-footer .swa-footer__links-cols { gap: 0; }
}

/* Hub renders all text antialiased (lighter strokes on macOS); match it site-wide. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Footer social glyphs are white on Hub (the link colour is steel, the SVG fill white). */
.swa-footer .wp-block-social-links .wp-social-link svg { fill: var(--wp--preset--color--base) !important; }

/* Footer newsletter as the Elementor form: white 1px frame (7px radius), black email field rounded on the
   left, black envelope button rounded on the right; 40px tall inside the frame. */
.swa-footer .wpcf7-form { border: 1px solid var(--wp--preset--color--base); border-radius: 7px; }
.swa-footer .wpcf7-email { height: 40px; padding: 4px 12px; background: #000; border-radius: 10px 0 0 10px; }
.swa-footer .wpcf7-submit {
	min-height: 40px; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	border-radius: 0 10px 10px 0; color: transparent; font-size: 0;
}

/* Below Hub's mobile-nav breakpoint (1200px) the header sits in the page flow and scrolls away; only the
   side "Get in touch" bar stays fixed. */
@media (max-width: 1199px) {
	.site-header,
	.site-header.is-stuck { position: relative; top: auto; box-shadow: none; animation: none; }
	.admin-bar .site-header,
	.admin-bar .site-header.is-stuck { top: auto; }
	.site-header.is-stuck .swa-topbar { display: block; }
	/* Templates no longer need room for an overlaid header. */
	.swa-post-header { padding-top: 50px; padding-bottom: 19px; }
	.swa-archive { padding-top: 50px; }
}

/* Phones: the post header's lines start at the container edge (15px), like the post text. */
@media (max-width: 781px) {
	.swa-post-header > * { padding-left: 0; padding-right: 0; }
	.swa-post-header .wp-block-post-title { margin-top: 0.35em; }
}

/* Hub caps bold at 700 (a <strong> inside a 700 heading stays 700, not "bolder" 900). */
b, strong { font-weight: 700; }

/* As on Hub (its custom CSS hides it): the wp-bottom-menu plugin's phone bar. Its script then pads the body by 0px. */
.wp-bottom-menu { display: none !important; }

/* Footer on phones, the rest of Hub's mobile layout: socials 3 per row, badges centred, newsletter stacked,
   10px between the two quick-link lists. */
@media (max-width: 781px) {
	.swa-footer .swa-footer__links-cols { gap: 10px; }
	.swa-footer .swa-footer__badges { justify-content: center; column-gap: 0; }
	.swa-footer .swa-footer__badges img[alt^="Website powered"] { width: 300px !important; }
	.swa-footer .wpcf7-form p { flex-direction: column; }
	.swa-footer .wpcf7-form-control-wrap, .swa-footer .wpcf7-submit { flex: 0 0 auto; width: 100%; }
	.swa-footer .wpcf7-submit { min-height: 40px; }
	.swa-footer .wp-block-social-links { display: grid; grid-template-columns: repeat(3, 50px); column-gap: 89.5px; row-gap: 5px; justify-content: start; margin: 0 0 0 3px; }
}

/* Footer, desktop: live's right column (Hub container, no gap between the two columns, 10px padding), its
   badges (the two certificates side by side, the renewable-energy badge at the far end), the 33px email field
   centred in its 42px frame, and the vertical rhythm measured on live. */
@media (min-width: 782px) {
	.swa-footer > .wp-block-columns:nth-of-type(2) { column-gap: 0; }
	.swa-footer .swa-footer__badges { justify-content: flex-start; align-items: flex-start; column-gap: 0; margin-top: -6px; padding: 0 10px; }
	.swa-footer .swa-footer__badges > :last-child { margin-left: auto; align-self: center; }
	.swa-footer .swa-newsletter { margin-top: 38px; }
	.swa-footer .wpcf7-form p { align-items: center; }
	.swa-footer .wpcf7-email { height: 33px; }
	.swa-footer .swa-footer__consent { margin-top: 7px; }
	.swa-footer .wp-block-social-links { margin-top: 9.5px; }
	.swa-footer .swa-footer__links-cols { column-gap: 0; margin-top: 21px; }
	.swa-footer .swa-footer__legal { margin-top: 60px !important; }
	.swa-footer { padding-bottom: 47px; }
}

/* Footer, phones: live's measurements (logo 220px from 50px down, the badge row 10px left of centre, a 33px
   email field over the 40px button, tighter gaps around the form). */
@media (max-width: 781px) {
	.swa-footer { padding-top: 50px; }
	.swa-footer .wp-block-image img[alt="Smart Web Agency"] { width: 220px !important; }
	.swa-footer .swa-footer__badges { padding-right: 20px; }
	.swa-footer .wpcf7-email { height: 33px; }
	.swa-footer .swa-footer__consent { margin-top: 6px; }
	.swa-footer .wp-block-social-links { margin-top: 10.5px; }
	.swa-footer .swa-footer__links-cols { margin-top: 20px; }
	.swa-footer .swa-footer__badges { margin-top: 20px; }
	.swa-footer .swa-newsletter { margin-top: 28px; }
	.swa-footer .swa-footer__legal { margin-top: 59px !important; }
	.swa-footer .swa-footer__legal a[href^="tel:"], .swa-footer .swa-footer__legal a[href^="mailto:"] { display: none; } /* live hides them here on phones */
}

/* As on the original (html, body overflow-x hidden): content wider than the screen (e.g. a big title's long
   word) never makes the page scroll sideways. clip, unlike hidden, keeps the sticky header working. */
html { overflow-x: hidden; } /* propagates to the viewport, so phones do not widen the page either */
body { overflow-x: clip; }