/* Title margin: same clamp + mobile breadcrumb-clearance fallback as the
   default page template (defaultPage.css) — this template never had its own
   rule, so the title was falling back to the global margin-top:0 reset on
   first-of-type headings and colliding with the fixed header. */
#SD.page-template-SDportfolio H1.entry-title
{
	margin-top:clamp(calc(var(--defaultInterval)*1), 20vw, 140px);
}
@media only screen and (max-width: 999px)
{
	#SD.page-template-SDportfolio H1.entry-title
	{
		margin-top: max(clamp(calc(var(--defaultInterval)*1), 20vw, 140px), var(--breadcrumb-mobile-clearance));
	}
}

/* Content width is now handled by page-width-control.css (keyed off the
   page_width ACF field's body class) instead of being hard-coded to this
   template. See that file for the .wpg-block / .SDblock exclusions this
   used to carry locally. */

/* Portfolio subnav — same pill-button look as the /work/ filter bar
   (.formWrapper .projectSelector), rebuilt here as a plain wp_nav_menu. */
.portfolioSubnav
{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:calc(var(--defaultInterval)*.3);
	width:max-content;
	max-width:100vw;
	background-color:var(--colI);
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-top-right-radius:var(--defaultBorderRadius);
	border-bottom-right-radius:var(--defaultBorderRadius);
	padding-top:calc(var(--defaultInterval)*.5);
	padding-bottom:calc(var(--defaultInterval)*.5);
	padding-right:calc(var(--defaultInterval)*.5);
	/* Bleed to the viewport's left edge regardless of ancestor padding —
	   same calc(50vw) technique as .wpg-block.alignfull in
	   workPortfolioGrid.css. padding-left is set per width-tier below
	   (matches wherever that tier's title/content actually sits) rather
	   than here — leave at 0 as a harmless default in case the body is
	   ever missing a width-* class. */
	padding-left:0;
	margin-left:calc(50% - 50vw);
	margin-right:0;
	margin-top:calc(var(--defaultInterval)*.75);
	margin-bottom:calc(var(--defaultInterval)*.75);
}

/* Pad the bled-out subnav back in to match wherever the page's width tier
   actually puts the title/content's left edge — boxed/wide/very_wide are
   centered (page-width-control.css), so the gap from the viewport edge to
   that centered box's left edge is 50vw minus half the tier's width. Full
   isn't centered, so it reuses that tier's own content margin instead. */
#SD.width-boxed .portfolioSubnav
{
	padding-left:calc(50vw - (var(--boxedWidth)/2));
}
#SD.width-wide .portfolioSubnav
{
	padding-left:calc(50vw - (var(--wideWidth)/2));
}
#SD.width-very_wide .portfolioSubnav
{
	padding-left:calc(50vw - (var(--veryWideWidth)/2));
}
#SD.width-full .portfolioSubnav
{
	padding-left:var(--insetLMargin);
}

/* Mobile: wide/very_wide collapse to the same fixed gutter as the title and
   .entry-content children (page-width-control.css's own mobile override)
   instead of the centering formula above, which would otherwise produce a
   near-zero or negative padding once --wideWidth's floor takes over. */
@media only screen and (max-width: 999px)
{
	#SD.width-wide .portfolioSubnav,
	#SD.width-very_wide .portfolioSubnav
	{
		padding-left:var(--defaultInterval);
	}
}

/* Bottom repeat of the subnav: no grey box, no left bleed — just a plain,
   centered row of buttons closing out the page. */
nav.portfolioSubnav.portfolioSubnav--bottom
{
	background-color:transparent;
	border-radius:0;
	width:max-content;
	margin-left:auto !important;
	margin-right:auto !important;
	padding-left:0;
	padding-right:0;
	justify-content:center;
}

/* Scoped to the container class rather than the menu's auto-generated ID
   (which depends on whatever the menu is named in wp-admin) — this matches
   regardless of menu naming. Inherits spacing from .portfolioSubnav's own
   gap so that stays the single source of truth for button spacing. */
.portfolioSubnav ul
{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:inherit;
	list-style:none;
	margin:0 !important;
	padding:0;
}

.portfolioSubnav li
{
	list-style:none;
	margin:0;
}

#SD .portfolioSubnav a
{
	display:inline-block;
	background-color:var(--colA);
	color:#fff;
	font-weight:bold;
	font-size:var(--h5Size);
	text-decoration:none;
	border-radius:var(--defaultBorderRadius);
	padding:var(--btn-primary-padding-y) var(--btn-primary-padding-x);
	transition:var(--defaultTransition);
}

#SD .portfolioSubnav a:hover,
#SD .portfolioSubnav a:focus-visible
{
	background-color:var(--btn-primary-hover-bg);
}

#SD .portfolioSubnav .current-menu-item > a
{
	background-color:var(--colH);
	cursor:auto;
}

@media only screen and (max-width: 767px)
{
	#SD .portfolioSubnav a
	{
		padding:calc(var(--btn-primary-padding-y) * .7) calc(var(--btn-primary-padding-x) * .7);
	}
}