/* Safety net: nothing on the site may cause sideways scrolling on phones.
   clip (unlike hidden) keeps position:sticky working. */
html, body {
	overflow-x: clip;
}

/*
 * Header fixes (GeneratePress "Navigation as Header": logo, menu, search,
 * CTA and the mobile toggle all sit in one non-wrapping flex row).
 * Before: on phones the CTA squeezed to three lines and pushed the menu
 * toggle off the right edge, so every page scrolled sideways.
 */
/* The Aug-30 "header size bump" in Additional CSS sets the CTA to 16px via
   #primary-menu ... li.gp-header-cta a, but the CTA is re-printed outside
   #primary-menu (functions.php, generate_after_primary_menu), so that rule
   never matched and the button fell back to an older 15px rule. */
#site-navigation .gp-header-cta > a {
	white-space: nowrap !important;
	font-size: 16px !important;
	padding: 10px 20px !important;
	line-height: 1.2 !important;
}

@media (max-width: 768px) {
	#site-navigation .inside-navigation {
		padding-left: 16px;
		padding-right: 8px;
		min-height: 64px;
		align-items: center;
	}
	#site-navigation .navigation-branding {
		margin-left: 0;
		margin-right: auto;
		flex-shrink: 0;
	}
	#site-navigation .navigation-branding .header-image {
		width: 150px !important;
		height: auto !important;
	}
	#site-navigation .menu-bar-items .menu-bar-item > a {
		padding-left: 10px;
		padding-right: 10px;
	}
	#site-navigation .gp-header-cta {
		margin: 0 2px 0 4px;
	}
	#site-navigation .gp-header-cta > a {
		font-size: 14px !important;
		padding: 9px 14px !important;
		margin-left: 4px;
	}
	#site-navigation .menu-toggle {
		padding-left: 12px;
		padding-right: 12px;
		line-height: 64px;
	}
	/* Icon-only toggle: the "Menu" label is kept for screen readers */
	#site-navigation .menu-toggle .mobile-menu {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	#site-navigation .menu-toggle .gp-icon svg {
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 420px) {
	/* Not enough room for search + CTA + toggle beside the logo */
	#site-navigation .menu-bar-items {
		display: none !important;
	}
	#site-navigation .navigation-branding .header-image {
		width: 136px !important;
	}
	#site-navigation .gp-header-cta > a {
		font-size: 13px !important;
		padding: 9px 12px !important;
	}
}

/* Sitewide header bottom border (2026-10-07). The header on this site is
   #site-navigation (branding lives inside the nav, no .site-header is
   rendered), so the border goes here and also applies to the sticky state. */
#site-navigation {
	border-bottom: 2px solid #e5e7eb;
}

/*
 * Mobile open menu (2026-10-12). This site uses GeneratePress "Navigation as
 * Header", so .inside-navigation is a non-wrapping flex row. When the toggle
 * opened the menu, .main-nav stayed a narrow flex item pinned to the right and
 * ran off the screen instead of dropping below the header. Fix: on phones,
 * when .toggled, let the row wrap and give the menu a full-width panel below.
 */
@media (max-width: 768px) {
	/* GeneratePress core forces .inside-navigation to flex-wrap:nowrap, so the
	   menu can't wrap to a new line. Drop it below the bar as an absolute panel
	   instead, which is immune to the flex row. */
	#site-navigation.toggled {
		position: relative;
	}
	#site-navigation.toggled .main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		margin: 0;
		z-index: 999;
		background: #ffffff;
		border-top: 2px solid #e5e7eb;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
		max-height: calc(100vh - 64px);
		overflow-y: auto;
	}
	#site-navigation.toggled .main-nav > ul {
		display: block;
		width: 100%;
	}
	#site-navigation.toggled .main-nav li {
		display: block;
		width: 100%;
		float: none;
		border-bottom: 1px solid #f0f0f0;
	}
	#site-navigation.toggled .main-nav li:last-child {
		border-bottom: 0;
	}
	/* GeneratePress sets a tall line-height and 0 vertical padding on nav links
	   via long selectors, so override padding and line-height with !important. */
	#site-navigation.toggled .main-nav a {
		display: block;
		width: 100%;
		padding: 15px 20px !important;
		line-height: 1.35 !important;
		height: auto !important;
	}
	/* Sub-menu (e.g. Services) is always expanded and indented as an accordion
	   instead of flying out. GeneratePress keeps it position:absolute, opacity:0
	   with high specificity, so these need !important to stay visible. */
	#site-navigation.toggled .main-nav .sub-menu {
		position: static !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		left: 0 !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
	}
	#site-navigation.toggled .main-nav .sub-menu a {
		padding-left: 36px !important;
		background: #fafafa;
		font-size: 15px;
	}
}