/* ==========================================================================
   DaK Architects – 2026 design update
   Loaded LAST (linked in header.php after bootstrap.min.css) so it overrides
   style.css / custom.css without editing those files.
   Tweak the variables below on staging if anything is a few px off.
   ========================================================================== */
:root {
	--dak-content-max: 1243px;     /* same content width as the Insights grid */
	--dak-gutter: 50px;            /* side padding under 1243px (matches existing theme) */
	--dak-header-h: 110px;         /* desktop header depth: 30 + 50 logo + 30 */
	--dak-logo-h: 50px;
	--dak-nav-baseline: -3px;      /* nudge nav text onto the logo baseline (+ = down, - = up) */
	--dak-hero-max: 80px;          /* largest hero font-size on wide screens */
	--dak-hero-top: 0px;           /* space above the centred hero text (set automatically on mobile) */
}

/* ---------- HEADER (desktop, ≥931px – the theme switches to the burger menu at 930px) ---------- */
@media only screen and (min-width: 931px) {
	#site-header-menu,
	#site-header-menu #site-navigation {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	#site-header-menu {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
	#site-header-menu #site-navigation {
		display: flex;
		align-items: flex-end;            /* nav sits on the bottom edge of the logo */
		justify-content: space-between;
		min-height: var(--dak-logo-h);
		border: 0;
	}
	#site-header-menu #site-navigation::before,
	#site-header-menu #site-navigation::after { display: none; } /* kill Bootstrap clearfix inside flex */

	#site-header-menu .navbar-header,
	#site-header-menu .site-branding { float: none; padding: 0; }
	#site-header-menu .site-branding .site-title,
	.site-header .site-title,
	.site-header .site-title > a {
		margin: 0 !important;
		line-height: 0 !important;
		font-size: 0 !important;
	}
	#site-header-menu .logo-head {
		display: block;
		height: var(--dak-logo-h) !important;
		width: auto !important;
		max-width: none;
	}

	#site-header-menu .navbar-collapse {
		float: none;
		margin: 0 !important;
		padding: 0 !important;
	}
	.site-header .primary-menu { float: none; margin: 0; display: flex; align-items: flex-end; }
	.site-header .primary-menu > li {
		float: none;
		padding: 0 !important;
		margin-left: 54px;
	}
	.site-header .primary-menu > li:first-child { margin-left: 0; }
	.site-header .primary-menu > li > a {   /* FIX: scoped to the header only – the footer uses the same menu class */
		padding: 0 !important;
		margin: 0 !important;
		font-size: 18px;
		line-height: 1 !important;
		position: relative;
		top: calc(3px + var(--dak-nav-baseline)); /* line-height:1 leaves ~3px under the baseline */
		border-bottom: 0 !important;
	}
	/* old orange "active" underline would push one item off the baseline – draw it below instead */
	.site-header .main-navigation li.active > a::after,
	.site-header .main-navigation li.current-menu-item > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		bottom: -12px;
		height: 3px;
		background: #f46f3b;
	}
}
@media only screen and (min-width: 931px) and (max-width: 1199px) {
	.site-header .primary-menu > li { margin-left: 30px; }
}

/* ---------- HEADER (burger menu, ≤930px): 25 + 30 logo + 25 = 80px ---------- */
@media only screen and (max-width: 930px) {
	#site-header-menu .navbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;      /* markup has the toggle before the logo */
		padding-top: 25px !important;
		padding-bottom: 25px !important;
		min-height: 80px;
	}
	#site-header-menu .navbar-header::before,
	#site-header-menu .navbar-header::after { display: none; }
	#site-header-menu .site-branding { float: none; padding: 0 !important; width: auto !important; }
	#site-header-menu .site-branding .site-title,
	.site-header .site-title,
	.site-header .site-title > a { margin: 0 !important; line-height: 0 !important; font-size: 0 !important; }
	#site-header-menu .logo-head { display: block; height: 30px !important; width: auto !important; }
	.site-header .navbar-toggle {
		position: static !important;
		float: none;
		margin: 0 !important;
		padding: 4px 0 !important;
	}
}
@media only screen and (max-width: 767px) {
	header.site-header { padding: 0 !important; }
	#site-header-menu .navbar-header { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- HERO height = screen minus header ----------
   Superslides sizes the slider to the full window height, but on tablet/desktop the
   header sits ABOVE the slider, so the bottom of the image (and the scroll arrow) was
   pushed below the fold by the header's height. Superslides writes inline heights,
   hence !important. */
:root { --dak-adminbar: 0px; }
body.admin-bar { --dak-adminbar: 32px; }   /* only when logged in */
@media screen and (max-width: 782px) { body.admin-bar { --dak-adminbar: 46px; } }
@media only screen and (max-width: 930px) { :root { --dak-header-h: 80px; } }

@media only screen and (min-width: 768px) {
	body.page-template-teamplate-landing #slides,
	body.page-template-teamplate-landing #slides .slides-container,
	body.page-template-teamplate-landing #slides .slides-container > li,
	body.page-template-teamplate-landing #slides .land_img {
		height: calc(100vh - var(--dak-header-h) - var(--dak-adminbar)) !important;
		min-height: 420px;
	}
}
/* ≤767px the theme lays the header OVER the slider (position:absolute),
   so keep the full-height slider and centre the text below the header instead. */
@media only screen and (max-width: 767px) {
	:root { --dak-hero-top: var(--dak-header-h); }
}

/* ---------- HERO intro text ---------- */
/* Vertically centred in the image area, aligned to the logo, 9/12 of the content column,
   ~70px / 80px at 1320px wide and still scaling with the viewport. */
body.page-template-teamplate-landing #slides .land_img .wrap-content {
	position: absolute;
	top: var(--dak-hero-top);
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	display: flex;
	align-items: center;
	padding: 0 max(var(--dak-gutter), calc((100% - var(--dak-content-max)) / 2));
	box-sizing: border-box;
}
body.page-template-teamplate-landing #slides .land_img .wrap-content h2.heading {
	display: block;
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
	font-weight: 700;
	/* 70px @1320px. Scales with width, but also limited by screen HEIGHT so it never
	   overflows the image, and capped where the 1243px content column stops growing. */
	font-size: clamp(34px, min(5.3vw, 11vh), var(--dak-hero-max));
	line-height: 1.143;                    /* 80/70 */
	letter-spacing: 0;
	max-width: 13em;                       /* = ~9/12 of the column at 70px; keeps the mock-up line breaks at every size */
	margin: 0;
	color: #fff;
}
@media only screen and (max-width: 930px) {
	body.page-template-teamplate-landing #slides .land_img .wrap-content { padding: 0 30px; }
}
@media only screen and (max-width: 767px) {
	body.page-template-teamplate-landing #slides .land_img .wrap-content { padding: 0 20px; }
	body.page-template-teamplate-landing #slides .land_img .wrap-content h2.heading {
		font-size: min(10vw, 6.5vh);       /* ~38px on a 375px phone, as in the mobile mock-up */
		line-height: 1.1;
		max-width: none;
	}
}

/* ---------- FOOTER: stretch to the full content width ---------- */
.site-footer .wrap-f { max-width: var(--dak-content-max) !important; }
.wrap-footer .media-social { margin: 0; }
.site-footer .f2 .site_footer_level_4 { float: right; text-align: right; }

/* Footer menu spacing (same "primary" menu, so keep it separate from the header rules) */
.wrap-footer .primary-menu > li > a {
	padding: 0 !important;
	margin: 0 56px 0 0 !important;
	font-size: 16px;
	line-height: 22px;
}
.wrap-footer .primary-menu > li:last-child > a { margin-right: 0 !important; }
@media only screen and (max-width: 991px) {
	.wrap-footer .primary-menu > li > a { margin-right: 30px !important; }
}

/* X (Twitter) icon – sits in the same grey circle as the other icons */
.media-social li a .icon-x {
	width: 13px;
	height: 13px;
	fill: currentColor;
	vertical-align: middle;
	margin-top: -3px;
}

/* Homepage Insights row: no date / divider (also removed in teamplate-landing.php) */
.insight_home .grid-agenda .box .sf-line,
.insight_home .grid-agenda .box .sf-time { display: none !important; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- FOOTER on mobile (≤767px): everything left-aligned, even spacing ---------- */
@media only screen and (max-width: 767px) {
	#colophon .wrap-footer .primary-menu { float: none; margin: 0; }
	#colophon .wrap-footer .primary-menu > li { float: none; display: block; }
	#colophon .wrap-footer .primary-menu > li > a {
		display: block;
		margin: 0 !important;
		padding: 7px 0 !important;        /* breathing room + bigger tap target */
		font-size: 16px;
		line-height: 22px;
	}
	#colophon .border { margin-top: 20px; }

	#colophon .f2 .site_footer_level,
	#colophon .f2 .site_footer_level_4 {
		float: none !important;
		width: auto;
		margin: 0 0 12px !important;
		text-align: left !important;
	}
	#colophon .f2 { padding-top: 25px; }
	#colophon .f2 .site_footer_level p,
	#colophon .f2 .site_footer_level span { margin: 0; }

	#colophon .site_footer_level_3.mobile { text-align: left; padding: 15px 0 40px; }
	#colophon .site_footer_level_3.mobile .media-social {
		float: none;
		display: flex;
		gap: 12px;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}
	#colophon .site_footer_level_3.mobile .media-social li { float: none; margin: 0 !important; }
}
.site-footer .email a, .site-footer .tel a { color: inherit; text-decoration: none; }
.site-footer .email a:hover, .site-footer .tel a:hover { color: #f46f3b; }

/* ---------- FOOTER social icons spacing (mock-up: ~26px between 30px circles) ---------- */
#colophon .wrap-footer .site_footer_level_3 .media-social {
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
}
#colophon .wrap-footer .site_footer_level_3 .media-social li,
#colophon .site_footer_level_3.mobile .media-social li {
	float: none;
	margin: 0 !important;
	padding: 0 !important;   /* theme adds 0 5px – removed so the last icon lines up with the rule's right end */
}
@media only screen and (max-width: 767px) {
	#colophon .site_footer_level_3.mobile .media-social { gap: 18px; }
}

/* ---------- FOOTER monogram position (client spec: 60px from top of footer,
   footer ~320px deep, monogram sits well clear of the navigation) ---------- */
#colophon .logo-footer img { display: block; height: 60px; width: auto; }
@media only screen and (min-width: 768px) {
	#colophon.site-footer { padding-top: 0 !important; }      /* was 30px + 70px logo padding = 100px */
	#colophon .logo-footer { padding: 60px 0 72px; }          /* 60px above, ~72px gap down to the menu */
}
@media only screen and (max-width: 767px) {
	#colophon .logo-footer { padding: 10px 0 40px; }          /* footer already has 30px padding on mobile */
}