/*
 * Section styles for custom UI blocks layered on top of the MegaOne template.
 * Extracted / trimmed from assets/css/elements.css so the full ~33k-line file
 * does not have to be loaded.
 *
 * UI-Block-10 — blog carousel, used by template-parts/sections/home.php.
 * The block is constrained to the theme's .container width (same as the
 * Services section); height is driven by owl-carousel autoHeight.
 */

/* ==================================== Theme toggle ==================================== */
/*
 * .header-left (style.css) is position:fixed/100vh tall, and its nav
 * (.site-main-menu) is centered via position:absolute + transform:translateY,
 * not stretched — so there's always empty space below it to anchor this to
 * the rail's bottom. Below 991.98px .header-left becomes a slim horizontal
 * bar instead (style.css's max-width:991px block), so the toggle drops the
 * absolute positioning there and just sits inline with the logo/menu button.
 */
.theme-toggle {
	position: absolute;
	bottom: 24px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	color: var(--ud-muted);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	color: var(--ud-accent);
}

.theme-toggle__icon {
	font-size: 20px;
}

/*
 * Three modes, three icons, exactly one shown at a time — driven purely by
 * data-theme (assets/js/ud-theme.js): "light"/"dark" set it explicitly,
 * "system" removes it entirely (that's also the untouched-by-the-visitor
 * default), so .theme-toggle__icon--system is the base/fallback case here
 * rather than needing its own attribute value to key off of. Note this is
 * independent of which colors are actually on screen in system mode — the
 * icon reflects the chosen *mode*, not style.css's resolved
 * `prefers-color-scheme` colors, so it stays the monitor glyph whether the
 * OS is currently light or dark.
 */
.theme-toggle__icon--light,
.theme-toggle__icon--dark {
	display: none;
}

:root[data-theme="light"] .theme-toggle__icon--system,
:root[data-theme="dark"] .theme-toggle__icon--system {
	display: none;
}

:root[data-theme="light"] .theme-toggle__icon--light {
	display: block;
}

:root[data-theme="dark"] .theme-toggle__icon--dark {
	display: block;
}

@media (max-width: 991.98px) {
	.theme-toggle {
		position: static;
		width: auto;
		/* Last item in the flex row (.site-nav is position:fixed, out of
		   flow) — justify-content:space-between otherwise pins it flush
		   against the screen's right edge. Right padding matches
		   .sidemenu_btn's own margin-right so the header's edge spacing
		   reads consistently on both sides. */
		padding: 8px 20px 8px 8px;
	}
}

/* ==================================== Home logo ==================================== */
/*
 * flex+justify-content, not the markup's own .text-center (text-align):
 * whichever of the two logo variants below is current gets display:block
 * in dark/system-dark mode (not the plain img default of inline), and
 * text-align only ever centers inline content — a block img just sits at
 * the container's left edge instead. Flex centers a child regardless of
 * its own display value, so it works the same for whichever variant (and
 * whichever display type) ends up visible.
 */
.home-logo {
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
}

.home-logo__img {
	max-width: 420px;
	width: 100%;
	height: auto;
}

/*
 * .home-logo__full (the symbol+text logo) and .home-logo__text (text-only,
 * mobile) are swapped by display:contents/none below rather than picking
 * one img out of four directly — display:contents keeps the current pair's
 * two <img> (light/dark) as direct flex children of .home-logo, so the
 * light/dark rules further down (generic .home-logo__img--light/--dark
 * selectors, unaware of which pair they're in) keep working unmodified,
 * and .home-logo's flex+justify-content:center still centers whichever
 * single img actually ends up visible.
 */
.home-logo__full {
	display: contents;
}

.home-logo__text {
	display: none;
}

@media (max-width: 991px) {
	.home-logo__full {
		display: none;
	}

	.home-logo__text {
		display: contents;
	}
}

/*
 * Same light/dark/system logic as the header toggle's icons (see "Theme
 * toggle" above), but only two variants exist here — system mode shows
 * whichever the OS/browser is actually resolved to, not a distinct glyph.
 */
.home-logo__img--dark {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .home-logo__img--light {
		display: none;
	}
	:root:not([data-theme="light"]) .home-logo__img--dark {
		display: block;
	}
}

:root[data-theme="dark"] .home-logo__img--light {
	display: none;
}

:root[data-theme="dark"] .home-logo__img--dark {
	display: block;
}

@media (max-width: 767px) {
	.home-logo__img {
		max-width: 260px;
	}
}

/*
 * #merhaba only (its ID, not the shared .pt-page rule other sections also
 * use — this must not change how #hakkimda/#portfolio/#clients/#iletisim
 * behave, and it doesn't: none of them get this rule). Desktop .pt-page is
 * one exact viewport tall, position:absolute, overflow:hidden (style.css) —
 * fine while the section held only the logo + carousel, but with the
 * "diğer yazılar" grid also stacked underneath it can now be taller than a
 * short/laptop viewport, or even a large one once the grid has 4 items.
 *
 * The same fix mobile already uses for whichever section is current (see
 * style.css, max-width:991px): take #merhaba out of absolute positioning —
 * only while it's actually the current section, mirroring .pt-page-current
 * there — so it (and .pt-wrapper/.subpages around it) sizes to its real
 * content and the *document* scrolls, instead of #merhaba trapping the
 * scroll inside its own fixed-height box. An earlier version of this rule
 * used overflow-y:auto to keep #merhaba absolutely positioned and just
 * scroll its overflow internally; that avoided clipping but reintroduced
 * the exact "stuck" mid-scroll feel the mobile fix exists to avoid — wheel
 * input scrolls #merhaba's own overflow first and only reaches the real
 * page (and the footer) once that inner scroll bottoms out.
 *
 * While #merhaba isn't current it stays exactly as before (position:
 * absolute, height: 0, off-screen) — this must not permanently occupy flow
 * space while the visitor is looking at a different section.
 *
 * The logo used to be pulled out of this flow (position:absolute, sized to
 * the leftover space above the carousel via a JS-measured --home-logo-gap
 * custom property) so a perfectly-centered carousel wouldn't get pushed
 * down by the logo's own height. That measurement raced the carousel's own
 * layout/resize/init and, whenever it landed on a stale value, the logo
 * either overlapped the carousel or left a mismatched gap above it. Adding a
 * third stacked block only widened that race. Letting the logo sit in
 * normal flow (its base, non-desktop-only rule above) removes the race
 * entirely — .home-logo/.blog-section/the posts grid simply stack in order
 * and center (while short) or scroll with the page (once taller than one
 * viewport) together as one unit.
 */
@media (min-width: 992px) {
	/*
	 * position: relative, not static. Both keep #merhaba in normal flow
	 * (same sizing/layout), but z-index only ever applies to a *positioned*
	 * element — static isn't one. .pt-page-current's z-index: 90 (style.css)
	 * is what keeps the current section painted (and hit-tested) above the
	 * other four, which stay position: absolute and are only hidden via
	 * opacity/visibility, not display: some of their descendants (notably
	 * cubeportfolio's own markup inside #portfolio) reset visibility back to
	 * visible on themselves, so they're still real, clickable, absolutely
	 * positioned boxes floating over the page. With #merhaba static that
	 * z-index was silently dropped, so wherever one of those stray elements
	 * happened to land on screen, it — not #merhaba's own content — was
	 * what actually received hover/click, e.g. the "diğer yazılar" grid
	 * sitting right where #portfolio's (invisible) grid items are laid out.
	 *
	 * padding: 3rem 0 — align-items:center (the shared .pt-page rule) only
	 * has room to add breathing space above/below the logo+carousel+grid
	 * stack when that stack is shorter than min-height: 100vh; once the grid
	 * makes it taller than a viewport (routine on laptop-height screens) the
	 * stack starts flush at #merhaba's own top with zero margin, the logo
	 * butting right against the browser chrome. This padding is a floor
	 * under that gap that holds regardless of viewport height, restoring
	 * (near enough) the breathing room the original logo+carousel-only hero
	 * had, while align-items:center still adds more on tall viewports where
	 * the stack fits with room to spare.
	 */
	#merhaba.pt-page-current,
	.no-js #merhaba {
		position: relative;
		height: auto;
		min-height: 100vh;
		padding: 3rem 0;
	}

	.pt-wrapper,
	.subpages {
		height: auto;
	}
}

/*
 * #merhaba only, mobile only — an ID selector, so it wins over the shared
 * `.pt-page { padding: 8rem 0 4rem; }` (style.css) regardless of stylesheet
 * order without touching that rule, which #hakkimda/#portfolio/#clients/
 * #iletisim still need as-is.
 *
 * That 8rem (128px) top padding was sized for the old, absolutely
 * positioned/flex-centered .pt-page, where it just ate into unused
 * leftover space. Now that the current section is normal block flow (the
 * rule above) it's real, visible space — and 128px is far more than the
 * mobile header it was meant to clear (.header-left is 70px tall here, and
 * already in normal flow above .main-left, not overlapping it), so the
 * logo sat with a large dead gap above it instead of starting right under
 * the header.
 */
@media (max-width: 991px) {
	#merhaba {
		padding-top: 2rem;
	}
}

@media screen and (max-width:991px){

    .pt-page {
        padding: 3rem 0 4rem;
    }

}

/* ==================================== UI-Block-10 ==================================== */
.ui-block-10.blog.blog-section {
	width: 100%;
}

.ui-block-10.blog.blog-section .blog-carousel {
	position: relative;
}

/*
 * Image half. The image is taken out of flow (position:absolute) so its
 * aspect ratio can never dictate the slide height — a portrait vs. a square
 * source image would otherwise make one slide much taller than the others,
 * and owl-carousel's autoHeight would then visibly "jump" on that transition.
 * Every slide is pinned to the same min-height instead.
 */
.ui-block-10.blog.blog-section .item > .row {
	align-items: stretch;
	min-height: 460px;
}

.ui-block-10.blog.blog-section .blog-img {
	position: relative;
	overflow: hidden;
	min-height: 460px;
}

/*
 * Image, title and excerpt are each wrapped in an <a href="permalink">
 * (home.php) so the whole area is clickable, not just the "Devamını oku"
 * button. cursor:pointer is already an anchor's UA default, set here only
 * to make the intent explicit. .heading/.text a stay plain inline anchors
 * (no display change) so they don't interfere with the parent's own
 * -webkit-line-clamp truncation just above — an inline wrapper around
 * already-clamped text still gets one clickable box per visible line.
 */
.ui-block-10.blog.blog-section .blog-img a {
	display: block;
	height: 100%;
	cursor: pointer;
}

.ui-block-10.blog.blog-section .heading a,
.ui-block-10.blog.blog-section .text a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.ui-block-10.blog.blog-section .blog-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	display: block;
}

.ui-block-10.blog.blog-section .text-area {
	min-height: 460px;
}

.ui-block-10.blog.blog-section .carousel-section h2 {
	color: #fff;
	font-size: 48px;
	font-weight: 500;
	margin-bottom: 40px;
}

.ui-block-10.blog.blog-section .text-area {
	padding: 50px 40px;
	background-color: #35ab39;
	text-align: left;
	overflow: hidden;
}

.ui-block-10.blog.blog-section .subheading {
	color: #fff;
	font-size: 20px;
	font-weight: 400;
}

/* Clamp title / excerpt so posts of varying length keep every slide the
   same height (the carousel no longer uses autoHeight). */
.ui-block-10.blog.blog-section .heading {
	color: #fff;
	font-weight: 700;
	margin-bottom: 25px;
	font-size: 32px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ui-block-10.blog.blog-section .text {
	font-size: 15px;
	font-weight: 400;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ui-block-10.blog.blog-section .blog-navigation {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	cursor: pointer;
}

.ui-block-10.blog.blog-section .blog-navigation a {
	text-decoration: none;
	border-radius: 50%;
	display: block;
	color: #fff;
	background-color: #3e3939;
	height: 50px;
	line-height: 55px;
	width: 50px;
	border: 1px solid transparent;
	text-align: center;
}

.ui-block-10.blog.blog-section .blog-navigation a i {
	font-size: 20px;
}

.ui-block-10.blog .about-button {
	margin-top: 30px;
	margin-left: 5px;
}

.ui-block-10.blog .btn-hvr-setting {
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50px;
}

.ui-block-10.blog .btn-hvr-setting-inner {
	position: relative;
	display: block;
	height: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ui-block-10.blog .btn-hvr-effect {
	position: absolute;
	top: -5px;
	width: 25%;
	height: 100%;
	border-radius: 100%;
	transform: translate3d(0, 150%, 0) scale(1.7);
	transition: transform 0.45s !important;
	background: #3e3939;
	border-color: #3e3939;
}

.ui-block-10.blog .btn-hvr-effect:nth-child(1) {
	left: 0;
	transition-delay: 0s !important;
}

.ui-block-10.blog .btn-hvr-effect:nth-child(2) {
	left: 30%;
	transition-delay: 0.08s !important;
}

.ui-block-10.blog .btn-hvr-effect:nth-child(3) {
	left: 60%;
	transition-delay: 0.16s !important;
}

.ui-block-10.blog .btn-hvr-effect:nth-child(4) {
	left: 90%;
	transition-delay: 0.24s !important;
}

.ui-block-10.blog .btn-hvr-setting:hover .btn-hvr-effect,
.ui-block-10.blog .btn:hover .btn-hvr-effect,
.ui-block-10.blog .btn:active .btn-hvr-effect,
.ui-block-10.blog .btn:focus .btn-hvr-effect {
	transform: translateZ(0) scale(1.7) !important;
}

.ui-block-10.blog .btn.btn-hvr-pink:hover,
.ui-block-10.blog .btn.btn-hvr-pink:focus {
	color: #fff;
	border-color: #3e3939;
	background: transparent !important;
}

.ui-block-10.blog .btn.btn-hvr-pink .btn-hvr-pink {
	background: #3e3939;
	border-color: #3e3939;
}

.ui-block-10.blog .btn.btn-white {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.ui-block-10.blog .btn {
	z-index: 2;
	font-size: 14px;
	letter-spacing: .5px;
	border-radius: 0;
	font-weight: 600;
	overflow: hidden;
	position: relative;
	line-height: inherit;
	display: inline-block;
	border: 2px solid transparent;
	text-transform: capitalize;
	-webkit-appearance: initial;
	transition: all .5s ease !important;
	font-family: 'Montserrat', sans-serif;
}

.ui-block-10.blog .btn.button {
	padding: 9px 34px !important;
	line-height: 1.8em !important;
}

.ui-block-10.blog .btn.btn-rounded {
	border-radius: 50px;
}

@media (max-width: 991.98px) {
	.ui-block-10.blog.blog-section .blog-navigation {
		display: none;
	}
	.ui-block-10.blog.blog-section .heading {
		font-size: 28px;
	}
	/* Columns stack — the image no longer stretches to the text height, so
	   give it its own fixed height and drop the shared min-heights. */
	.ui-block-10.blog.blog-section .item > .row,
	.ui-block-10.blog.blog-section .text-area {
		min-height: 0;
	}
	.ui-block-10.blog.blog-section .blog-img {
		min-height: 0;
		height: 240px;
	}
	.ui-block-10.blog .about-button {
		text-align: center;
		margin-bottom: 30px;
		margin-left: 0;
	}
}

/*
 * "Diğer Yazılar" — the 4 posts right after the carousel's 5, shown below it
 * in #merhaba (template-parts/sections/home.php). Deliberately its own
 * .home-more-posts* namespace rather than reusing .single-post__related*
 * (template-parts/related-posts.php, same visual idea on single.php): they
 * render in very different contexts — this one inside a fixed-viewport,
 * potentially-scrolling .pt-page (see the #merhaba rule above) versus a
 * plain white content card — and keeping them separate means a tweak meant
 * for one (spacing, column count, card size) can never leak into the other.
 */
.home-more-posts {
	width: 100%;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ud-border);
}

.home-more-posts__title {
	color: var(--ud-heading);
	font-size: 1.1rem;
	margin: 0 0 1rem;
}

/* Heading doubles as a link to the Blog listing (ud_blog_url()). */
.home-more-posts__title-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.home-more-posts__title-link:hover,
.home-more-posts__title-link:focus-visible {
	color: #35ab39;
}

.home-more-posts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.home-more-posts__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ud-border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s ease-in-out;
}

.home-more-posts__item:hover {
	border-color: #35ab39;
}

.home-more-posts__thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.home-more-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.home-more-posts__item:hover .home-more-posts__thumb img {
	transform: scale(1.06);
}

.home-more-posts__body {
	flex: 1;
	padding: 12px 14px;
}

.home-more-posts__date {
	display: block;
	font-size: 11px;
	color: var(--ud-muted);
	margin-bottom: 4px;
}

.home-more-posts__heading {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ud-heading);
	font-family: 'Poppins', sans-serif;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-more-posts__item:hover .home-more-posts__heading {
	color: #35ab39;
}

.home-more-posts__excerpt {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ud-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 991.98px) {
	.home-more-posts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.home-more-posts__grid {
		grid-template-columns: 1fr;
	}
}


/* ==================================== Single post ==================================== */
/*
 * single.php — matches the theme language: centred .heading-area title, green
 * .sub-title, a white content card on the grey .single-layout background.
 */

/*
 * The vendor stylesheet gives .header-left `float: left`. On the one-page
 * front layout that never bites (the sections are position:absolute, and on
 * desktop position:fixed makes the float moot). On every other template the
 * header is a normal in-flow bar on mobile — but the leftover float means the
 * article renders *behind* that bar, and any top padding on the article then
 * drags the floated header down with it. Dropping the float makes the header a
 * plain block the content sits below. Front page (body.home) keeps the float.
 */
body:not( .home ) .header-left {
	float: none;
}

/*
 * Mobile inner pages: the vendor stylesheet turns the side rail into an
 * in-flow 70px top bar (position: relative) that scrolls away with the page.
 * `sticky` pins it to the top on scroll while keeping its space reserved, so
 * no compensating padding is needed. Front page (body.home) is untouched.
 */
@media (max-width: 991.98px) {
	body:not( .home ) .header-left {
		position: sticky;
		top: 0;
		z-index: 999;
	}
}

/*
 * Keep the fixed desktop side rail clear of the WordPress admin bar (this
 * rule was previously in style.css; without it the logo is clipped when
 * logged in). Scoped to desktop so it never offsets the mobile bar.
 *
 * height/min-height must shrink by the same 32px `top` adds, or the rail's
 * own box still runs the full 100vh starting 32px lower — pushing its
 * bottom edge 32px past the real viewport bottom. .theme-toggle sits
 * `bottom: 24px` *inside that box*, not the viewport, so it landed 8px
 * below the visible window instead of 24px above it.
 */
@media (min-width: 992px) {
	.admin-bar .header-left {
		top: 32px;
		height: calc(100% - 32px);
		min-height: calc(100vh - 32px);
	}
}

.single-post {
	display: block;
}

.single-post__header {
	max-width: 820px;
	margin: 0 auto 2.5rem;
	padding-top: 5rem;
	text-align: center;
}

.single-post__header .title {
	margin-bottom: 1.25rem;
}

/* Pages reuse this layout but have no meta row under the title. */
.single-post--page .single-post__header {
	margin-bottom: 2rem;
}

.single-post--page .single-post__header .title {
	margin-bottom: 0;
}

.single-post__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	font-size: 14px;
	color: var(--ud-muted);
}

.single-post__meta li {
	display: inline-flex;
	align-items: center;
}

.single-post__meta i {
	color: #35ab39;
	margin-right: 8px;
	font-size: 15px;
}

.single-post__meta a {
	color: inherit;
}

.single-post__meta a:hover {
	color: #35ab39;
}

/* Category / tag meta items: a comma-separated run of links after the icon. */
.single-post__meta-tax {
	max-width: 100%;
}

.single-post__meta-tax a {
	white-space: nowrap;
}

/* Lead paragraph: the hand-written excerpt, above the featured image and
   the body inside .single-post__card (see single.php). */
.single-post__excerpt {
	margin: 0 0 2rem;
	color: var(--ud-muted);
	font-size: 1.15rem;
	line-height: 1.65;
}

/* Now sits inside .single-post__card, between the lead and the body — so it
   spans the card's content width rather than its own wider block. */
.single-post__thumb {
	margin: 0 0 2rem;
}

.single-post__thumb img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: 12px;
}

.single-post__card {
	max-width: 860px;
	margin: 0 auto;
	background: var(--ud-surface);
	border-radius: 12px;
	padding: 3.25rem 3.25rem 2.5rem;
	box-shadow: 0 0 10px 1px var(--ud-shadow);
}

/* --- Content typography --- */
.single-post__body {
	color: var(--ud-text);
	font-size: 16px;
	line-height: 1.75;
}

.single-post__body > * {
	margin-bottom: 1.5rem;
}

.single-post__body > *:last-child {
	margin-bottom: 0;
}

.single-post__body h1,
.single-post__body h2,
.single-post__body h3,
.single-post__body h4,
.single-post__body h5,
.single-post__body h6 {
	color: var(--ud-heading);
	margin: 2.5rem 0 1rem;
	line-height: 1.3;
}

.single-post__body h2 { font-size: 1.6rem; }
.single-post__body h3 { font-size: 1.4rem; }
.single-post__body h4 { font-size: 1.2rem; }

.single-post__body a {
	color: #35ab39;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-post__body a:hover {
	color: #2b8f2f;
}

.single-post__body img,
.single-post__body iframe {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.single-post__body figure {
	margin: 0 0 1.5rem;
}

.single-post__body figcaption {
	font-size: 13px;
	color: var(--ud-muted);
	text-align: center;
	margin-top: 8px;
}

.single-post__body ul,
.single-post__body ol {
	margin: 0 0 1.5rem 1.35rem;
	padding: 0;
}

.single-post__body li {
	margin-bottom: .5rem;
}

.single-post__body blockquote {
	border-left: 2px solid #35ab39;
	background: var(--ud-bg-subtle);
	padding: 18px 22px;
	margin: 2rem 0;
	font-size: 18px;
	line-height: 28px;
	border-radius: 0 8px 8px 0;
}

.single-post__body pre {
	background: #1d1d21;
	color: #f3f3f3;
	padding: 20px;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 14px;
}

.single-post__body code {
	background: var(--ud-bg-subtle);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 90%;
}

.single-post__body pre code {
	background: none;
	padding: 0;
}

.single-post__body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.single-post__body th,
.single-post__body td {
	border: 1px solid var(--ud-border);
	padding: 10px 14px;
	text-align: left;
}

/*
 * Overrides WP core's block-library style.css (.wp-block-table thead {
 * border-bottom: 3px solid }) — every cell already gets its own 1px border
 * above, so this extra 3px rule just double-thickens the line under the
 * header row.
 */
.single-post__body .wp-block-table thead {
	border-bottom: 0;
}

/*
 * WP core's own Image-block lightbox (click to expand). This isn't the
 * theme's markup, so it can't be fixed at the source without editing
 * WordPress. wp-includes/blocks/image.php renders both the scrim
 * (`style="background-color: #fff"`) and the close/nav buttons
 * (`style="fill: #000"`) with inline styles — its defaults when the theme
 * has no theme.json — so on the now-dark scrim the close X is invisible.
 * Inline styles only yield to !important.
 */
.wp-lightbox-overlay .scrim {
	background-color: var(--ud-bg) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	fill: var(--ud-heading) !important;
}

/* --- Tags (end of the post body) --- */
.single-post__tags {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ud-border);
	font-size: 14px;
}

.single-post__tags span {
	font-weight: 600;
	margin-right: 10px;
}

.single-post__tags a {
	display: inline-block;
	margin: 4px 6px 4px 0;
	padding: 5px 14px;
	background: var(--ud-bg-subtle);
	border-radius: 50px;
	color: var(--ud-text);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.single-post__tags a:hover {
	background: #35ab39;
	color: #fff;
}

/* --- Share (below the tags, above the RSS line) --- */
.ud-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.75rem;
}

/* .ud-share__native-item (the Web Share API button, shown alongside the
   icon row below, not instead of it) starts `hidden` in the markup (see
   ud_share_links()) until assets/js/ud-share.js confirms navigator.share
   support. .ud-social__link's own `display: flex` further down would
   otherwise win over the browser's default [hidden] rule, since both are
   author-origin, same specificity, and the icon rule comes later in this
   file. */
.ud-share [hidden] {
	display: none;
}

.ud-share__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ud-text);
}

.ud-share__list {
	margin: 0;
}

/* Icons are smaller here than the Contact section's .ud-social (42px). */
.ud-share__link {
	width: 34px;
	height: 34px;
	font-size: 15px;
}

/* The X share link has no LineIcons glyph — it renders an inline SVG logo
   instead (see ud_share_links()), sized to match the icon font next to it.
   Both classes: a share link is also .ud-social__link, whose own `svg` rule
   (18px, further down) would otherwise win on source order alone. */
.ud-share__link.ud-social__link svg {
	width: 15px;
	height: 15px;
}

/* Our own hand-drawn stroke icons (ud_share_icon_svg(), ud_copy_icon_svg(),
   ud_copy_done_icon_svg(), ud_email_icon_svg()) are drawn on a 24x24 grid
   with a Feather/Heroicons-style safe margin around the shape — appropriate
   at the sizes those icon sets are normally used at, but at this row's 15px
   box that margin eats into the icon and it reads visibly smaller than the
   brand logos next to it (X/Facebook/WhatsApp/LinkedIn — all drawn
   edge-to-edge in their own viewBox, so 15px already renders them at full
   visual size). 20px measured (see the ink-bounding-box check in the PR/
   commit this landed in) to the same rendered "ink" size as those logos —
   don't change this without re-measuring both groups together. */
.ud-share__link.ud-social__link svg.ud-share__stroke-icon {
	width: 20px;
	height: 20px;
}

/* Every .ud-social__link (the share row's buttons and the footer/Contact
   social-icon row — both built by ud_icon_markup()/ud_social_links() /
   ud_share_links() in inc/template-tags.php) carries its name in
   data-ud-tip; show it as a small tooltip above the icon on hover / keyboard
   focus. */
.ud-social__link {
	position: relative;
}

.ud-social__link::after {
	content: attr(data-ud-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--ud-heading);
	color: var(--ud-bg);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) translateY(4px);
	pointer-events: none;
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
	z-index: 2;
}

.ud-social__link:hover::after,
.ud-social__link:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Copy-link button: a <button> styled as a share icon. On success
   assets/js/ud-share.js adds .is-copied, swapping the copy glyph for a
   checkmark that pops in briefly. */
.ud-share__copy {
	padding: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ud-share__copy.is-copied {
	color: #fff;
	background-color: #35ab39;
	border-color: #35ab39;
}

.ud-share__copy-done {
	display: none;
}

.ud-share__copy.is-copied .ud-share__copy-icon {
	display: none;
}

.ud-share__copy.is-copied .ud-share__copy-done {
	display: block;
	animation: ud-copy-pop 0.25s ease-out;
}

@keyframes ud-copy-pop {
	0% {
		transform: scale(0.4);
		opacity: 0;
	}
	60% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Visually-hidden live region: announces the copy for screen readers only. */
.ud-share__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ud-share__link::after {
		transition: opacity 0.15s ease-out;
	}

	.ud-share__copy.is-copied .ud-share__copy-done {
		animation: none;
	}
}

/* --- Subscribe / RSS (below the article) --- */
.single-post__subscribe {
	margin-top: 1.75rem;
}

.ud-rss-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ud-text);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.ud-rss-link i {
	font-size: 16px;
	color: #ee802f;
}

.ud-rss-link:hover,
.ud-rss-link:focus {
	color: #35ab39;
}

/* --- Related posts --- */
.single-post__related {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ud-border);
}

.single-post__related-title {
	color: var(--ud-heading);
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

.single-post__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.single-post__related-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ud-border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s ease-in-out;
}

.single-post__related-item:hover {
	border-color: #35ab39;
}

.single-post__related-thumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.single-post__related-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.single-post__related-item:hover .single-post__related-thumb img {
	transform: scale(1.06);
}

.single-post__related-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px 16px;
}

.single-post__related-date {
	display: block;
	font-size: 12px;
	color: var(--ud-muted);
	margin-bottom: 6px;
}

.single-post__related-heading {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ud-heading);
	font-family: 'Poppins', sans-serif;
}

.single-post__related-item:hover .single-post__related-heading {
	color: #35ab39;
}

.single-post__related-excerpt {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ud-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Comments --- */
.single-post__comments {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ud-border);
}

.single-post__comments-title,
.single-post__comments .comment-reply-title {
	color: var(--ud-heading);
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.single-post__comments .comment-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.single-post__comments .comment-list ol.children {
	list-style: none;
	margin: 1.25rem 0 0 2.25rem;
	padding: 0;
}

.single-post__comments .comment-body {
	padding: 0 0 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--ud-border);
}

.single-post__comments .comment-author img {
	border-radius: 50%;
	margin-right: 12px;
	float: left;
}

.single-post__comments .comment-author .fn {
	font-weight: 600;
	color: var(--ud-heading);
	font-style: normal;
}

.single-post__comments .comment-metadata {
	font-size: 12px;
	color: var(--ud-muted);
}

.single-post__comments .comment-metadata a {
	color: inherit;
}

.single-post__comments .reply a {
	font-size: 13px;
	font-weight: 600;
	color: #35ab39;
}

.single-post__comments .comment-respond {
	background: var(--ud-bg-subtle);
	border-radius: 12px;
	padding: 2rem;
}

.single-post__comments input[type="text"],
.single-post__comments input[type="email"],
.single-post__comments input[type="url"],
.single-post__comments textarea {
	width: 100%;
	border: 1px solid var(--ud-border);
	background: var(--ud-surface);
	color: var(--ud-text);
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 1rem;
	font-family: inherit;
	font-size: 14px;
}

.single-post__comments textarea {
	min-height: 130px;
}

@media (max-width: 991.98px) {
	.single-post__header {
		padding-top: 2rem;
	}
	.single-post__card {
		padding: 1.9rem 1.4rem 1.6rem;
	}
	.single-post__related-grid {
		grid-template-columns: 1fr;
	}
}


/* style.css's `body { text-align: center }` (max-width:991px) centers any
   text that doesn't set its own alignment — .single-post__card's content
   (title, meta, excerpt, body copy) never did, so below that breakpoint it
   inherited centered text instead of staying left-aligned like on desktop. */
.single-post__layout {
	text-align: left;
}

/* --- Optional sidebar layout (templates/with-sidebar.php) --- */
/* Without .has-sidebar the card keeps its own centred max-width (default). */
.single-post__layout.has-sidebar {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	max-width: 1160px;
	margin: 0 auto;
}

.single-post__layout.has-sidebar .single-post__card {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	margin: 0;
}

.single-post__sidebar {
	flex: 0 0 320px;
	width: 320px;
}

/*
 * Sticky only above the 991.98px breakpoint where the layout is columns
 * (see the max-width:991.98px block below) — stacked on mobile, so there's
 * no separate scroll rhythm to stick against there. Safe to stick to the
 * viewport itself: .header-left is a fixed *left* rail (90px, style.css),
 * not a top bar, so nothing overlaps the sidebar at top:0 on desktop.
 * `.single-post__layout.has-sidebar`'s align-items:flex-start (above) is
 * what leaves the sidebar free to detach from the (taller) content column's
 * height instead of being stretched to match it — required for sticky to
 * have anywhere to travel.
 */
@media (min-width: 992px) {
	.single-post__sidebar {
		position: sticky;
		top: 30px;
	}
}

.single-post__sidebar .widget {
	background: var(--ud-surface);
	border-radius: 12px;
	padding: 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 0 10px 1px var(--ud-shadow);
}

.single-post__sidebar .widget:last-child {
	margin-bottom: 0;
}

.single-post__sidebar .widget-title,
.single-post__sidebar .widget h2,
.single-post__sidebar .widget h3,
.single-post__sidebar .wp-block-heading {
	margin: 0 0 1rem;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--ud-heading);
}

.single-post__sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-post__sidebar li {
	padding: 6px 0;
	border-bottom: 1px solid var(--ud-border);
}

.single-post__sidebar li:last-child {
	border-bottom: 0;
}

/*
 * Link hover — same language as the MegaOne template's nav: muted until
 * interaction, then a smooth 0.2s slide toward the brand green with a short
 * marker growing in from the left (echoes .site-main-menu li.active > a:before).
 */
.single-post__sidebar a {
	color: var(--ud-text);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.single-post__sidebar a:hover,
.single-post__sidebar a:focus {
	color: #35ab39;
}

.single-post__sidebar li > a {
	position: relative;
	display: inline-block;
	transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}

/*
 * Core's Search block CSS (wp-includes/blocks/search/style.css) gives the
 * input 8px of vertical padding and the button 6px, and neither sets
 * box-sizing — browser default content-box means those paddings stack on
 * top of the border instead of being absorbed by a fixed box, so the two
 * end up 4px apart in height. Forcing both to the same border-box height
 * here fixes that regardless of which padding core ships next.
 */
.single-post__sidebar .wp-block-search__inside-wrapper {
	align-items: stretch;
}

.single-post__sidebar .wp-block-search__input,
.single-post__sidebar .wp-block-search__button {
	box-sizing: border-box;
	height: 44px;
	border-radius: 8px;
}

.single-post__sidebar .wp-block-search__input {
	border: 1px solid var(--ud-border);
	background: var(--ud-surface);
	color: var(--ud-text);
	padding: 0 14px;
}

.single-post__sidebar .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	padding: 0 16px;
	border: none;
	background-color: #35ab39;
	color: #fff;
	cursor: pointer;
}

.single-post__sidebar .wp-block-search__button:hover,
.single-post__sidebar .wp-block-search__button:focus {
	background-color: #2c8f2f;
}

.single-post__sidebar li > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	background-color: #35ab39;
	transform: translateY(-50%);
	transition: width 0.2s ease-in-out;
}

.single-post__sidebar li > a:hover {
	padding-left: 16px;
}

.single-post__sidebar li > a:hover::before {
	width: 10px;
}

/* Tag cloud — pill hover. */
.single-post__sidebar .wp-block-tag-cloud a,
.single-post__sidebar .tagcloud a {
	display: inline-block;
	margin: 3px 4px 3px 0;
	padding: 4px 12px;
	background: var(--ud-bg-subtle);
	border-radius: 50px;
	font-size: 13px !important;
	color: var(--ud-text);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.single-post__sidebar .wp-block-tag-cloud a:hover,
.single-post__sidebar .tagcloud a:hover {
	background: #35ab39;
	color: #fff;
}

@media (max-width: 991.98px) {
	.single-post__layout.has-sidebar {
		flex-direction: column;
	}
	.single-post__sidebar {
		flex-basis: auto;
		width: 100%;
	}
}


/* ==================================== Blog archive ==================================== */
/*
 * templates/blog.php — the full post list. Sits in the same white
 * .single-post__card on the grey .single-layout background as single.php.
 */
.blog-archive__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-archive__item {
	display: flex;
	gap: 28px;
	padding: 2rem 0;
	border-bottom: 1px solid var(--ud-border);
}

.blog-archive__item:first-child {
	padding-top: 0;
}

.blog-archive__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.blog-archive__thumb {
	flex: 0 0 220px;
	display: block;
	overflow: hidden;
	border-radius: 10px;
}

.blog-archive__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 170px;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.blog-archive__thumb:hover img {
	transform: scale(1.04);
}

.blog-archive__body {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-archive__title {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
	line-height: 1.3;
}

.blog-archive__title a {
	color: var(--ud-heading);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

.blog-archive__title a:hover,
.blog-archive__title a:focus {
	color: #35ab39;
}

/* Meta row: reuse .single-post__meta but left-align it here. */
.blog-archive__meta {
	justify-content: flex-start;
	margin-bottom: 0.85rem;
}

.blog-archive__excerpt {
	margin: 0 0 0.75rem;
	color: var(--ud-text);
	font-size: 15px;
	line-height: 1.7;
}

.blog-archive__more {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 14px;
	font-weight: 600;
	color: #35ab39;
	text-decoration: none;
}

.blog-archive__more:hover,
.blog-archive__more:focus {
	color: #2b8f2f;
}

/* Pagination — pill links, brand green for the current page. */
.blog-archive__pagination {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ud-border);
}

.blog-archive__pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	margin: 0 4px 6px 0;
	padding: 7px 12px;
	text-align: center;
	background: var(--ud-bg-subtle);
	border-radius: 50px;
	color: var(--ud-text);
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.blog-archive__pagination a.page-numbers:hover,
.blog-archive__pagination a.page-numbers:focus {
	background: #35ab39;
	color: #fff;
}

.blog-archive__pagination .page-numbers.current {
	background: #35ab39;
	color: #fff;
}

.blog-archive__pagination .page-numbers.dots {
	background: transparent;
}

@media (max-width: 767.98px) {
	.blog-archive__item {
		flex-direction: column;
		gap: 16px;
	}
	.blog-archive__thumb {
		flex-basis: auto;
	}
	.blog-archive__thumb img {
		max-height: 220px;
	}
}


/* ==================================== Contact — social ==================================== */
/*
 * Icon row under the Contact section's .address-item list
 * (template-parts/sections/contact.php). Round outlined buttons that fill with
 * the brand green on hover, matching the theme's button language.
 */
.ud-social {
	list-style: none;
	margin: 1.75rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ud-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ud-border);
	color: var(--ud-text);
	font-size: 18px;
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.ud-social__link:hover,
.ud-social__link:focus {
	color: #fff;
	background-color: #35ab39;
	border-color: #35ab39;
}

/* X, Facebook and 500px render an inline SVG logomark instead of a LineIcons
   glyph (see ud_social_links()/ud_icon_markup()), sized to match the icon
   font used by the other links in this row. */
.ud-social__link svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 767.98px) {
	.ud-social {
		margin: 0 0 1.75rem 0;
	}
}


/* ==================================== Contact — form spam gate ==================================== */
/*
 * Honeypot: kept in the DOM (and in the tab order it is pulled out of) but off
 * screen, so real users never see it and bots that autofill every field trip it.
 * Not display:none — some bots skip hidden fields.
 */
.ud-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cloudflare Turnstile widget spacing (rendered only when keys are set). */
.contact-form .cf-turnstile {
	min-height: 65px;
}


/* ==================================== Contact — submit state ==================================== */
/*
 * The submit control is an <a>, so it has no native disabled/busy state. While
 * a request is in flight ud-contact.js adds .is-sending: the button is visually
 * muted and non-interactive, its label swaps to "Sending…" and the CSS spinner
 * shows (no icon-font dependency). #result shows an immediate "Sending…" line
 * so the visitor is never left guessing.
 */
.contact_btn {
	transition: opacity 0.2s ease-in-out;
}

.contact_btn.is-sending {
	pointer-events: none;
	opacity: 0.65;
	cursor: progress;
}


/* ==================================== Search form (ud_search_form()) ==================================== */
/*
 * The styled search box used on 404.php and search.php's "no results" state
 * (inc/template-tags.php, ud_search_form()) — .form-control/.form-group match
 * the contact form's inputs instead of WP's unstyled search-form markup.
 */
.ud-search-form {
	max-width: 360px;
	margin: 0 auto;
}

.ud-search-form .form-group {
	margin-bottom: 1rem;
}

/* search.php: the retry box shown under the "no results" message. */
.search-again {
	margin-top: 1.5rem;
	text-align: center;
}

/* ==================================== 404 ==================================== */
/*
 * 404.php reuses .heading-area/.single-post__header and .single-post__card
 * as-is (see "Single post" above) — this only adds the extra centering and
 * spacing specific to this page's button + search box.
 */
.error-404__home {
	margin: 0.5rem 0 2rem;
}

.contact_btn .contact_btn__label {
	vertical-align: middle;
}

.ud-spinner {
	box-sizing: border-box;
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: ud-spin 0.6s linear infinite;
}

/* Button spinner: hidden until .is-sending, sits before the label. */
.contact_btn .ud-spinner {
	display: none;
	margin-right: 8px;
}

.contact_btn.is-sending .ud-spinner {
	display: inline-block;
}

.ud-spinner--inline {
	margin-right: 8px;
	flex: 0 0 auto;
}

.ud-form-alert {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	margin-bottom: 30px;
}

@keyframes ud-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ud-spinner {
		animation-duration: 1.6s;
	}

	.contact_btn {
		transition: none;
	}
}

/* --- Site footer ---
 * The extra top margin is only for "inner" pages (blog/single/archive/page —
 * see ud_body_classes() in functions.php), where it exposes the site's own
 * grey background (.single-layout) as breathing room under the white content
 * card. On the front page the footer follows the Contact section directly,
 * whose own background already meets the footer's — margin here would
 * insert a mismatched grey strip between two white blocks.
 */
/* Left padding is doubled (90px breathing room + 90px for .header-left,
   the fixed vertical nav from style.css) — .site-footer is a sibling of
   .main-left, not a child, so it doesn't inherit .main-left's own
   padding-left: 90px compensation and would otherwise start flush behind
   the fixed sidebar. Below 991px .header-left stops being fixed (see
   style.css), so the mobile query resets this back to a plain 20px. */
.site-footer {
	padding: 1.5rem 90px 1.5rem 180px;
	background: var(--ud-surface);
	border-top: 1px solid var(--ud-border);
}

/* Copyright/privacy text on the left, social links (ud_social_links(),
   shared with the Contact section) pushed to the right via margin-left:auto
   so they still land on their own line's right edge if this wraps. Below
   991px both are stacked and centered instead, social first (order: 1). */
.site-footer__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

body.inner-page .site-footer {
	margin-top: 3rem;
}

.site-footer__text {
	margin: 0;
	font-size: 13px;
	color: var(--ud-muted);
	text-align: left;
}

.site-footer a:not(.ud-social__link) {
	color: #35ab39;
}

.site-footer a:not(.ud-social__link):hover {
	color: var(--ud-heading);
}

/* Smaller than the Contact section's .ud-social (42px) to fit the thin bar. */
.site-footer .ud-social {
	margin: 0 0 0 auto;
}

.site-footer .ud-social__link {
	width: 34px;
	height: 34px;
	font-size: 15px;
}

.site-footer .ud-social__link svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 991px) {
	body.inner-page .site-footer {
		margin-top: 2rem;
	}
	.site-footer {
		padding: 1.25rem 20px;
	}

	/* .header-left is no longer a fixed sidebar below this width (see
	   style.css), so stack + center instead of the desktop left/right split —
	   social links first, copyright/privacy text below. */
	.site-footer__inner {
		flex-direction: column;
		justify-content: center;
	}
	.site-footer__text {
		order: 2;
		text-align: center;
	}
	.site-footer .ud-social {
		order: 1;
		margin: 0;
	}
}

/* --- Contact form consent note --- */
.ud-consent-note {
	margin-top: 12px;
	font-size: 12px;
	color: var(--ud-muted);
}

.ud-consent-note a {
	color: #35ab39;
}