/*
Theme Name: DFI2026
Theme URI: https://dfiproductions.com
Author: DFI Productions
Author URI: https://dfiproductions.com
Description: Bare-bones classic WordPress theme for DFI Productions. Built from scratch as a clean foundation.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dfi2026
*/

* {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	/* The collapsing sticky header (site-header--sticky/is-scrolled)
	   intentionally resizes itself on scroll. Scroll anchoring — the
	   browser nudging scroll position to compensate for that resize —
	   has to be disabled on the scrolling container itself; disabling
	   it only on the header excludes it as an anchor *candidate* but
	   doesn't stop compensation triggered by its effect on siblings,
	   which fed back into the scroll handler and caused it to thrash. */
	overflow-anchor: none;
}

body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	overflow-x: clip;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: #111;
	background: #fff;
}

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

a {
	color: inherit;
}

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--dfi-footer-bg, #222222);
	border-top: var(--dfi-footer-border-top-width, 0) solid var(--dfi-footer-border-top-color, transparent);
}

.site-header {
	background: var(--dfi-header-bg, #ffffff);
	font-family: var(--dfi-header-font, inherit);
}

/* Sub-page title banner (inc/page-title.php) — full-width, directly
   below the nav on every singular page/post except the front page. */

.dfi-page-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--dfi-pt-padding, 4rem) 1rem;
	background-image: var(--dfi-pt-bg-image, none);
	background-size: cover;
	background-position: var(--dfi-pt-bg-position, center);
	overflow: hidden;
}

.dfi-page-title__overlay {
	position: absolute;
	inset: 0;
	background: var(--dfi-pt-overlay, transparent);
	z-index: 0;
}

.dfi-page-title__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--dfi-pt-title-size, 2.5rem);
	color: var(--dfi-pt-text-color, #ffffff);
	text-shadow: 0 0 var(--dfi-pt-shadow-blur, 0px) var(--dfi-pt-shadow-color, transparent);
}

/* Enhanced sub-page title layout — opt-in per page (see the "Page Title
   Options" meta box). Overrides the standard banner's centered-over-
   image look above with a left-aligned text column and the image
   right-justified, faded into the wash color on its left edge. */

.dfi-page-title--enhanced {
	justify-content: flex-start;
	text-align: left;
	padding: 0;
	background-image: none;
	background: var(--dfi-pt-enhanced-wash, #ffffff);
	min-height: var(--dfi-pt-enhanced-height, 32rem);
}

.dfi-page-title__enhanced-text {
	position: relative;
	z-index: 1;
	width: var(--dfi-pt-enhanced-text-width, 50%);
	box-sizing: border-box;
	padding: 3rem 4vw;
}

.dfi-page-title__enhanced-small {
	margin: 0 0 0.75rem;
	font-size: var(--dfi-pt-enhanced-small-size, 1rem);
	color: var(--dfi-pt-enhanced-small-color, #4a90d9);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dfi-page-title__enhanced-sep {
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 0 1.5rem;
	background: var(--dfi-pt-enhanced-small-color, #4a90d9);
}

.dfi-page-title__enhanced-headline {
	margin: 0 0 1.25rem;
	font-size: var(--dfi-pt-enhanced-headline-size, 2.75rem);
	font-weight: var(--dfi-pt-enhanced-headline-weight, 400);
	line-height: 1.25;
	color: var(--dfi-pt-enhanced-headline-color, #1a1a1a);
}

.dfi-page-title__enhanced-subtext {
	margin: 0;
	font-size: var(--dfi-pt-enhanced-subtext-size, 1.1rem);
	line-height: 1.65;
	color: var(--dfi-pt-enhanced-subtext-color, #444444);
}

.dfi-page-title__enhanced-headline:last-child,
.dfi-page-title__enhanced-subtext:last-child {
	margin-bottom: 0;
}

.dfi-page-title__enhanced-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--dfi-pt-enhanced-image-width, 60%);
	background-size: cover;
	background-position: var(--dfi-pt-bg-position, center);
}

.dfi-page-title__enhanced-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--dfi-pt-enhanced-wash, #ffffff) 0%, var(--dfi-pt-enhanced-wash, #ffffff) 12%, transparent 55%);
}

/* Mobile: no room for the side-by-side split, so the image runs full
   width and the text overlays its bottom edge instead of sitting beside
   it — a semi-transparent panel behind the text keeps it readable
   without needing the desktop fade (which only makes sense running
   left-to-right across extra horizontal space this layout no longer
   has). */

@media (max-width: 900px) {
	.dfi-page-title--enhanced {
		display: block;
		position: relative;
		min-height: 26rem;
	}

	.dfi-page-title__enhanced-image {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.dfi-page-title__enhanced-image::before {
		content: none;
	}

	.dfi-page-title__enhanced-text {
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: 1.75rem 1.25rem;
		background: var(--dfi-pt-enhanced-mobile-bg, rgba(255,255,255,0.85));
	}
}

/* Breaks an element out of .site-main's max-width to span the full
   viewport, regardless of how deeply it's nested in constrained
   content. Reusable beyond just Side-by-Side Boxes.

   Uses --dfi-viewport-width (assets/js/full-bleed.js) instead of the
   100vw unit directly — 100vw includes the scrollbar's reserved space,
   but the page's actual visible width doesn't, so a raw 100vw bleeds a
   few pixels past the true right edge and throws off the left/right
   balance. The JS measures document.documentElement.clientWidth, which
   excludes the scrollbar (and naturally reflects pages short enough to
   have no scrollbar at all), keeping the two edges symmetric either
   way. The 100vw fallback only applies for the instant before that JS
   runs or if it's unavailable. */

.dfi-full-bleed {
	width: var(--dfi-viewport-width, 100vw);
	margin-left: calc(50% - (var(--dfi-viewport-width, 100vw) / 2));
	margin-right: calc(50% - (var(--dfi-viewport-width, 100vw) / 2));
}

/* Side-by-Side Box shortcode (inc/side-by-side.php) */

.dfi-side-by-side {
	display: flex;
	align-items: stretch;
	gap: var(--dfi-sbs-gap, 0px);
}

.dfi-side-by-side__box {
	flex: 1 1 50%;
	box-sizing: border-box;
	min-height: var(--dfi-sbs-box-min-size, 400px);
	display: flex;
	align-items: center;
	padding: var(--dfi-sbs-box-padding, 3rem);
	background: var(--dfi-sbs-box-bg, transparent);
	background-repeat: no-repeat;
	background-size: var(--dfi-sbs-box-bg-size, auto);
	background-position: var(--dfi-sbs-box-bg-position, center);
}

.dfi-side-by-side__content {
	width: 100%;
	color: var(--dfi-sbs-text-color, #111111);
}

@media (max-width: 768px) {
	.dfi-side-by-side {
		flex-direction: column;
	}
}

.site-main {
	flex: 1 0 auto;
	width: 100%;
	padding: 1rem;
	max-width: 1280px;
	margin: 0 auto;
}

/* Header row: logo left, nav + mobile toggle right */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem;
	transition: padding 0.3s ease;
}

/* Sticky, collapsible header (opt-in via Header & Navigation options).
   Pinning is pure CSS; assets/js/sticky-header.js toggles .is-scrolled
   once the page has scrolled past the top bar's height. */

.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 900;
}

.site-header--sticky .custom-logo {
	transition: height 0.3s ease;
}

.site-header--sticky.is-scrolled .site-header__inner {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.site-header--sticky.is-scrolled .custom-logo {
	height: calc(var(--dfi-logo-height, 70px) * 0.55);
}

/* Transparent home header (opt-in, front page only, meant to pair with
   a Vimeo video assigned to that page): the header floats over the top
   of the video instead of pushing it down, transparent until scrolled,
   then behaves like the normal sticky/collapsed header — solid
   background, pinned to the viewport. .site-hero-wrap is the
   positioning context the header's absolute state anchors to. */

.site-hero-wrap {
	position: relative;
}

.site-header--transparent-home {
	position: absolute;
	inset: 0 0 auto 0;
	background: transparent;
	transition: background-color 0.3s ease;
	z-index: 20;
}

.site-header--transparent-home.is-scrolled {
	position: fixed;
	inset: 0 0 auto 0;
	background: var(--dfi-header-bg, #ffffff);
	z-index: 900;
}

/* Top-level nav items get their own color while the header is
   transparent (readable over a video/photo), fading back to the
   normal nav color once scrolled/filled in — .primary-menu a already
   has a color transition, so this just supplies the override value. */

.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a {
	color: var(--dfi-transparent-nav-color, #ffffff);
}

.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a:hover,
.site-header--transparent-home:not(.is-scrolled) .primary-menu > li > a:focus {
	color: var(--dfi-transparent-nav-hover-color, #cccccc);
}

.site-branding {
	min-width: 0;
}

.custom-logo {
	display: block;
	height: var(--dfi-logo-height, 70px);
	width: auto;
}

/* Header Logo Overlay: an alternate logo shown only while the header is
   transparent over the Vimeo video, cross-fading to the regular logo as
   the header fills in on scroll (see the "Header Logo Overlay" option
   under Header & Navigation). Only present in the markup at all when a
   transparent-home header has an overlay image set. */

.site-branding__logo-stack {
	position: relative;
	display: inline-block;
}

.site-branding__logo-stack .custom-logo {
	transition: opacity 0.3s ease, height 0.3s ease;
}

.site-branding__overlay-logo {
	position: absolute;
	inset: 0;
	height: 100%;
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.site-header--transparent-home:not(.is-scrolled) .site-branding__logo-stack .custom-logo {
	opacity: 0;
}

.site-header--transparent-home:not(.is-scrolled) .site-branding__overlay-logo {
	opacity: 1;
}

.site-title {
	margin: 0;
	font-size: 1.25rem;
}

.site-description {
	margin: 0;
	font-size: 0.85rem;
}

/* Mobile hamburger toggle */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0.25rem;
	cursor: pointer;
	line-height: 1;
}

.menu-toggle__icon {
	font-size: var(--dfi-toggle-size, 1.5rem);
	color: var(--dfi-toggle-color, #111111);
}

.mobile-menu-close {
	display: none;
}

.menu-toggle__icon--close {
	display: none;
}

.site-header.nav-is-open .menu-toggle__icon--open {
	display: none;
}

.site-header.nav-is-open .menu-toggle__icon--close {
	display: inline-block;
}

/* Primary menu — desktop: horizontal row with hover dropdowns */

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--dfi-nav-gap, 1.5rem);
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	display: block;
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--dfi-nav-size, 1rem);
	font-weight: var(--dfi-nav-weight, 400);
	color: var(--dfi-nav-color, #111111);
	padding: 0.5rem 0;
	transition: color 0.2s ease-in;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus {
	color: var(--dfi-nav-hover-color, #555555);
}

.primary-menu .sub-menu {
	list-style: none;
	margin: var(--dfi-dropdown-spacing, 0px) 0 0;
	padding: var(--dfi-dropdown-padding, 8px);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--dfi-dropdown-bg, #ffffff);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none;
	transition: opacity var(--dfi-dropdown-speed, 200ms) ease, transform var(--dfi-dropdown-speed, 200ms) ease, visibility 0s linear var(--dfi-dropdown-speed, 200ms);
}

/* Invisible bridge over the gap created by --dfi-dropdown-spacing, so
   moving the pointer from the nav item into the dropdown doesn't lose
   :hover in the empty space between them. */
.primary-menu > li > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--dfi-dropdown-spacing, 0px));
	height: var(--dfi-dropdown-spacing, 0px);
}

.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin: 0;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* Animation variants: starting (hidden) transform per type. The visible
   state above always wins (higher specificity), so this only affects
   the closed/entering position, letting the transition animate between. */
.main-navigation[data-dropdown-anim="slide-down"] .sub-menu {
	transform: translateY(-10px);
}

.main-navigation[data-dropdown-anim="slide-up"] .sub-menu {
	transform: translateY(10px);
}

.main-navigation[data-dropdown-anim="zoom"] .sub-menu {
	transform: scale(0.95);
	transform-origin: top left;
}

.main-navigation[data-dropdown-anim="none"] .sub-menu {
	transition: none;
}

.primary-menu .sub-menu li:not(:last-child) > a {
	border-bottom: var(--dfi-dropdown-sep-width, 0px) solid var(--dfi-dropdown-sep-color, transparent);
}

.primary-menu .sub-menu a {
	padding: 0.5rem 1.25rem;
	font-size: var(--dfi-dropdown-size, 0.95rem);
	font-weight: var(--dfi-dropdown-weight, 400);
	color: var(--dfi-dropdown-color, #111111);
	background-color: var(--dfi-dropdown-item-bg, transparent);
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
	color: var(--dfi-dropdown-hover-color, #555555);
	background-color: var(--dfi-dropdown-item-hover-bg, transparent);
}

.submenu-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.5rem;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dfi-mobile-arrow-color, inherit);
}

.submenu-toggle i {
	transition: transform 0.15s ease;
}

/* Mobile: hamburger flyout */

@media (max-width: 768px) {
	.menu-toggle {
		display: inline-flex;
		position: relative;
		z-index: 1001;
	}

	.custom-logo {
		height: var(--dfi-logo-height-mobile, 50px);
	}

	.site-header--sticky.is-scrolled .custom-logo {
		height: calc(var(--dfi-logo-height-mobile, 50px) * 0.55);
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	body.dfi-nav-open {
		overflow: hidden;
	}

	/* Off-canvas slide-in panel, full height, overlays everything. */
	.main-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--dfi-mobile-panel-width, 80%);
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		background-color: var(--dfi-mobile-panel-bg, #ffffff);
		background-image:
			linear-gradient(var(--dfi-mobile-panel-overlay, rgba(0, 0, 0, 0)), var(--dfi-mobile-panel-overlay, rgba(0, 0, 0, 0))),
			var(--dfi-mobile-panel-bg-image, none);
		background-size: cover;
		background-position: var(--dfi-mobile-panel-bg-position, center);
		overflow-y: auto;
		z-index: 1000;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		box-shadow: none;
	}

	.site-header.nav-is-open .main-navigation {
		transform: translateX(0);
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
	}

	.mobile-menu-close {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		padding: 1rem;
		background: none;
		border: 0;
		cursor: pointer;
		font-size: 1.5rem;
		color: var(--dfi-mobile-nav-color, #111111);
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding-bottom: 2rem;
	}

	.primary-menu a {
		font-size: var(--dfi-mobile-nav-size, 1.1rem);
		font-weight: var(--dfi-mobile-nav-weight, 600);
		color: var(--dfi-mobile-nav-color, #111111);
		background-color: var(--dfi-mobile-nav-item-bg, transparent);
		padding: 0.85rem 1.25rem;
	}

	.primary-menu > li > a:hover,
	.primary-menu > li > a:focus {
		color: var(--dfi-mobile-nav-hover-color, #555555);
		background-color: var(--dfi-mobile-nav-item-hover-bg, transparent);
	}

	.primary-menu > li:not(:last-child) > a,
	.primary-menu .sub-menu li:not(:last-child) > a {
		border-bottom: var(--dfi-mobile-sep-width, 0px) solid var(--dfi-mobile-sep-color, transparent);
	}

	.menu-item-has-children > a {
		padding-right: 2.5rem;
	}

	.primary-menu .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		box-shadow: none;
		background: var(--dfi-mobile-sub-bg, transparent);
		padding: 0;
		margin: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.primary-menu .sub-menu a {
		font-size: var(--dfi-mobile-sub-size, 0.95rem);
		font-weight: var(--dfi-mobile-sub-weight, 400);
		color: var(--dfi-mobile-sub-color, #333333);
		background-color: var(--dfi-mobile-sub-item-bg, transparent);
		padding-left: 2.25rem;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus {
		color: var(--dfi-mobile-sub-hover-color, #555555);
		background-color: var(--dfi-mobile-sub-item-hover-bg, transparent);
	}

	.primary-menu > li > .sub-menu::before {
		display: none;
	}

	.primary-menu li.submenu-is-open > .sub-menu {
		display: block;
	}

	.submenu-toggle {
		display: flex;
	}

	.submenu-is-open > .submenu-toggle i {
		transform: rotate(180deg);
	}
}

.top-bar {
	position: relative;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 1rem;
	background: var(--dfi-topbar-bg, #222222);
	font-family: var(--dfi-header-font, inherit);
	overflow: hidden;
}

.top-bar__left {
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0.4rem 0 0.4rem 1rem;
}

.top-bar__address {
	color: var(--dfi-address-color, #ffffff);
	font-size: var(--dfi-address-size, 0.85rem);
	font-weight: var(--dfi-address-weight, 400);
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

.top-bar__right {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 1rem;
	z-index: 1;
}

.top-bar__accent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--dfi-topbar-accent-bg, transparent);
	z-index: 0;
}

.top-bar__accent--angled {
	left: -2.5rem;
	clip-path: polygon(2.5rem 0, 100% 0, 100% 100%, 0 100%);
}

.top-bar__social {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.top-bar__social-link {
	display: inline-flex;
	color: var(--dfi-social-color, #ffffff);
	font-size: var(--dfi-social-size, 1rem);
	line-height: 1;
	text-decoration: none;
}

.top-bar__phone {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dfi-phone-color, #ffffff);
	font-size: var(--dfi-phone-size, 0.85rem);
	font-weight: var(--dfi-phone-weight, 400);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.top-bar__phone-icon {
	font-size: var(--dfi-phone-icon-size, 1rem);
}

.top-bar__phone-label {
	font-size: var(--dfi-phone-size, 0.85rem);
}

.top-bar__phone-number {
	font-size: var(--dfi-phone-size, 0.85rem);
	font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 600px) {
	.top-bar__phone-label,
	.top-bar__phone-number {
		display: none;
	}
}

/* Site footer: logo, contact-info lines, credit link, diagonal underlay */

.site-footer__underlay,
.site-footer__underlay-stripe {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--dfi-footer-underlay-width-pct, 45%);
	pointer-events: none;
}

.site-footer__underlay--right,
.site-footer__underlay-stripe--right {
	right: 0;
}

.site-footer__underlay--left,
.site-footer__underlay-stripe--left {
	left: 0;
}

.site-footer__underlay {
	z-index: 1;
}

.site-footer__underlay-stripe {
	z-index: 0;
	background: var(--dfi-footer-underlay-stripe-color, #ffffff);
}

.site-footer__underlay--color.site-footer__underlay--right {
	background: var(--dfi-footer-underlay-fill, transparent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dfi-footer-underlay-cut, 0) 100%);
}

.site-footer__underlay--color.site-footer__underlay--left {
	background: var(--dfi-footer-underlay-fill, transparent);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 100%, 0 100%);
}

.site-footer__underlay-stripe--right {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dfi-footer-underlay-cut, 0) 100%);
	transform: translateX(var(--dfi-footer-underlay-stripe-width, 8px));
}

.site-footer__underlay-stripe--left {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 100%, 0 100%);
	transform: translateX(calc(var(--dfi-footer-underlay-stripe-width, 8px) * -1));
}

/* "Wide at Bottom" — the mirror image of the default "Wide at Top" cut above. */

.site-footer__underlay--color.site-footer__underlay--right.site-footer__underlay--angle-bottom {
	clip-path: polygon(var(--dfi-footer-underlay-cut, 0) 0, 100% 0, 100% 100%, 0 100%);
}

.site-footer__underlay--color.site-footer__underlay--left.site-footer__underlay--angle-bottom {
	clip-path: polygon(0 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 0, 100% 100%, 0 100%);
}

.site-footer__underlay-stripe--right.site-footer__underlay-stripe--angle-bottom {
	clip-path: polygon(var(--dfi-footer-underlay-cut, 0) 0, 100% 0, 100% 100%, 0 100%);
}

.site-footer__underlay-stripe--left.site-footer__underlay-stripe--angle-bottom {
	clip-path: polygon(0 0, calc(100% - var(--dfi-footer-underlay-cut, 0)) 0, 100% 100%, 0 100%);
}

.site-footer__underlay--image.site-footer__underlay--right,
.site-footer__underlay--image.site-footer__underlay--left {
	background-image: var(--dfi-footer-underlay-image, none);
	background-size: cover;
	background-position: center;
}

.site-footer__main {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 2rem 2rem 2rem;
}

.site-footer__logo img {
	display: block;
	width: auto;
	height: var(--dfi-footer-logo-height, 50px);
}

.site-footer__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.site-footer__info-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--dfi-footer-text-color, #ffffff);
	font-size: var(--dfi-footer-text-size, 0.95rem);
	font-weight: var(--dfi-footer-text-weight, 400);
}

.site-footer__info-icon {
	flex-shrink: 0;
	width: calc(var(--dfi-footer-icon-size, 1rem) * 1.3);
	text-align: center;
	color: var(--dfi-footer-icon-color, #ffffff);
	font-size: var(--dfi-footer-icon-size, 1rem);
}

.site-footer__info-text {
	color: inherit;
	text-decoration: none;
}

a.site-footer__info-text:hover,
a.site-footer__info-text:focus {
	opacity: 0.8;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.site-footer__social-link {
	display: inline-flex;
	color: var(--dfi-footer-icon-color, #ffffff);
	font-size: var(--dfi-footer-icon-size, 1rem);
	line-height: 1;
	text-decoration: none;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus {
	opacity: 0.8;
}

.site-footer__credit {
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	transform: translateX(-50%);
	z-index: 2;
	text-align: center;
}

.site-footer__credit a {
	font-size: 0.7rem;
	color: var(--dfi-footer-text-color, #ffffff);
	opacity: 0.5;
	text-decoration: underline;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus {
	opacity: 0.8;
}

@media (max-width: 768px) {
	.site-footer__underlay,
	.site-footer__underlay-stripe {
		display: none;
	}

	.site-footer__main {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 1.5rem 1rem 0.5rem;
	}

	.site-footer__logo img {
		height: var(--dfi-footer-logo-height-mobile, 40px);
	}

	.site-footer__info {
		align-items: center;
	}

	.site-footer__credit {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		margin-top: 1.5rem;
		padding-bottom: 0.5rem;
	}
}

/* Blog (home.php, archive.php, single.php, inc/blog-options.php) */

.dfi-blog-page-header {
	max-width: 720px;
	margin: 0 auto 3rem;
	text-align: center;
}

.dfi-blog-page-header__title {
	font-size: 2.5rem;
	margin: 0 0 0.75rem;
	color: var(--dfi-blog-title-color, #131313);
}

.dfi-blog-page-header__intro {
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
	font-size: 1.05rem;
	line-height: 1.7;
}

.dfi-blog-page-header__intro p:last-child {
	margin-bottom: 0;
}

.dfi-blog-empty {
	text-align: center;
	padding: 3rem 0;
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
}

/* Grid */

.dfi-blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--dfi-blog-columns, 3), minmax(0, 1fr));
	column-gap: var(--dfi-blog-gap-h, 28px);
	row-gap: var(--dfi-blog-gap-v, 40px);
	margin: 0 0 2.5rem;
}

.dfi-blog-grid.dfi-full-bleed {
	padding: 0 var(--dfi-blog-gap-h, 28px);
}

@media (max-width: 900px) {
	.dfi-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dfi-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Card */

.dfi-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--dfi-blog-card-bg, #ffffff);
	border-radius: var(--dfi-blog-card-radius, 16px);
	overflow: hidden;
	box-shadow: var(--dfi-blog-card-shadow, none);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dfi-blog-card:hover,
.dfi-blog-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--dfi-blog-card-shadow-hover, none);
}

.dfi-blog-card__image-link {
	display: block;
}

.dfi-blog-card__image {
	position: relative;
	display: block;
	aspect-ratio: var(--dfi-blog-image-ratio, 3/2);
	overflow: hidden;
	background: #e5e5e5;
}

.dfi-blog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dfi-blog-card__img--placeholder {
	background: #f2f2f2;
	background: linear-gradient(135deg, color-mix(in srgb, var(--dfi-blog-accent, #c0392b) 25%, #f2f2f2), color-mix(in srgb, var(--dfi-blog-accent, #c0392b) 8%, #f2f2f2));
}

.dfi-blog-card:hover .dfi-blog-card__img,
.dfi-blog-card:focus-within .dfi-blog-card__img {
	transform: scale(1.06);
}

.dfi-blog-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var(--dfi-blog-badge-bg, rgba(255,255,255,0.92));
	color: var(--dfi-blog-badge-color, #131313);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dfi-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.5rem 1.5rem 1.75rem;
}

.dfi-blog-card__meta {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: var(--dfi-blog-meta-color, #8a8a8a);
}

.dfi-blog-card__meta-sep {
	margin: 0 0.4em;
}

.dfi-blog-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
	line-height: 1.35;
}

.dfi-blog-card__title a {
	color: var(--dfi-blog-title-color, #131313);
	text-decoration: none;
}

.dfi-blog-card__title a:hover {
	color: var(--dfi-blog-accent, #c0392b);
}

.dfi-blog-card__excerpt {
	margin: 0 0 1.1rem;
	color: var(--dfi-blog-excerpt-color, #5b5b5b);
	line-height: 1.65;
	flex: 1 1 auto;
}

.dfi-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	align-self: flex-start;
	color: var(--dfi-blog-accent, #c0392b);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.dfi-blog-card__more span {
	transition: transform 0.2s ease;
}

.dfi-blog-card__more:hover span {
	transform: translateX(4px);
}

/* Pagination (core the_posts_pagination() output) */

.pagination.navigation {
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e2e2e2;
	color: var(--dfi-blog-title-color, #131313);
	text-decoration: none;
	font-size: 0.9rem;
}

.pagination .page-numbers.current {
	background: var(--dfi-blog-accent, #c0392b);
	border-color: var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

.pagination .page-numbers:not(.current):not(.dots):hover {
	border-color: var(--dfi-blog-accent, #c0392b);
	color: var(--dfi-blog-accent, #c0392b);
}

/* Single post hero */

.dfi-blog-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--dfi-blog-hero-height, 46vh);
	background-size: cover;
	background-position: center;
	color: var(--dfi-blog-hero-title, #ffffff);
}

.dfi-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--dfi-blog-hero-overlay, rgba(10,10,10,0.5));
}

.dfi-blog-hero__content {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
	text-align: center;
	width: 100%;
}

.dfi-blog-hero__category {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.35em 1em;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
	backdrop-filter: blur(6px);
	color: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}

.dfi-blog-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.2;
	color: var(--dfi-blog-hero-title, #ffffff);
}

.dfi-blog-hero__meta {
	margin: 0;
	color: var(--dfi-blog-hero-meta, rgba(255,255,255,0.85));
	font-size: 0.95rem;
}

/* Single post layout: article + sidebar */

.dfi-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 3.5rem;
	align-items: start;
	padding-top: 3rem;
}

.dfi-blog-article__header {
	margin-bottom: 2rem;
}

.dfi-blog-article__title {
	font-size: 2.25rem;
	line-height: 1.25;
	margin: 0 0 0.75rem;
	color: var(--dfi-blog-title-color, #131313);
}

.dfi-blog-content {
	font-size: 1.08rem;
	line-height: 1.8;
	color: #2c2c2c;
}

.dfi-blog-content p {
	margin: 0 0 1.4em;
}

.dfi-blog-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.dfi-blog-content h2,
.dfi-blog-content h3,
.dfi-blog-content h4 {
	margin: 1.8em 0 0.7em;
	line-height: 1.35;
}

.dfi-blog-content blockquote {
	margin: 1.8em 0;
	padding: 0.25em 0 0.25em 1.4em;
	border-left: 4px solid var(--dfi-blog-accent, #c0392b);
	font-style: italic;
	color: #4a4a4a;
}

.dfi-blog-taxonomies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2.5rem 0 0;
}

.dfi-blog-pill {
	display: inline-block;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: #f2f2f2;
	color: var(--dfi-blog-title-color, #131313);
	font-size: 0.85rem;
	text-decoration: none;
}

.dfi-blog-pill:hover {
	background: var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

.dfi-blog-pill--tag {
	background: transparent;
	border: 1px solid #d8d8d8;
}

.dfi-blog-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid #e5e5e5;
}

.dfi-blog-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
	border-radius: 12px;
	background: #f7f7f7;
	text-decoration: none;
	transition: background 0.2s ease;
}

.dfi-blog-post-nav__link:hover {
	background: #efefef;
}

.dfi-blog-post-nav__link--next {
	text-align: right;
	grid-column: 2;
}

.dfi-blog-post-nav__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--dfi-blog-accent, #c0392b);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dfi-blog-post-nav__title {
	color: var(--dfi-blog-title-color, #131313);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Sidebar — styles the core block widgets already configured in Blog
   Sidebar (Search, Categories, Recent Posts, Archives, Recent Comments)
   generically, since they render as core blocks rather than classic
   widget markup. */

.dfi-blog-sidebar .widget {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid #ececec;
}

.dfi-blog-sidebar .widget:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dfi-blog-sidebar .widget h2,
.dfi-blog-sidebar .widget-title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--dfi-blog-sidebar-title, #131313);
}

.dfi-blog-sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfi-blog-sidebar .widget li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.92rem;
}

.dfi-blog-sidebar .widget li:last-child {
	border-bottom: 0;
}

.dfi-blog-sidebar .widget a {
	color: #3a3a3a;
	text-decoration: none;
}

.dfi-blog-sidebar .widget a:hover {
	color: var(--dfi-blog-accent, #c0392b);
}

.dfi-blog-sidebar .wp-block-search__input {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid #ddd;
	border-radius: 8px 0 0 8px;
}

.dfi-blog-sidebar .wp-block-search__button {
	border-radius: 0 8px 8px 0;
	background: var(--dfi-blog-accent, #c0392b);
	border: 1px solid var(--dfi-blog-accent, #c0392b);
	color: #fff;
}

@media (max-width: 900px) {
	.dfi-blog-layout {
		grid-template-columns: 1fr;
	}

	.dfi-blog-sidebar {
		border-top: 1px solid #e5e5e5;
		padding-top: 2.5rem;
	}

	.dfi-blog-post-nav {
		grid-template-columns: 1fr;
	}

	.dfi-blog-post-nav__link--next {
		grid-column: 1;
		text-align: left;
	}
}

/* Services Grid block (inc/services-block.php, inc/blocks/services/) —
   two columns with a divider line between them and between rows, one
   column on mobile. */

.dfi-services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #e2e2e2;
}

.dfi-services__item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 2.25rem 2rem;
	border-bottom: 1px solid #e2e2e2;
}

.dfi-services__item:nth-child(odd) {
	border-right: 1px solid #e2e2e2;
}

.dfi-services__icon {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.dfi-services__icon--placeholder {
	background: #eee;
}

.dfi-services__body {
	min-width: 0;
}

.dfi-services__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.dfi-services__desc {
	margin: 0;
	color: #666;
	line-height: 1.65;
}

.dfi-services__desc p {
	margin: 0;
}

@media (max-width: 768px) {
	.dfi-services {
		grid-template-columns: 1fr;
	}

	.dfi-services__item {
		padding: 1.75rem 0.5rem;
	}

	.dfi-services__item:nth-child(odd) {
		border-right: 0;
	}
}