/* Site header, topbar, primary nav, logo swap, desktop dropdown submenu.
   Mobile overlay nav lives in [mobile-nav.css](/krossroads-theme/assets/css/mobile-nav.css);
   inner-page main top-padding lives in [layout.css](/krossroads-theme/assets/css/layout.css). */

/* Fixed navigation, transparent over hero, solid on scroll */
.kr-site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	background-color: transparent;
	transition:
		background-color var(--k-dur) var(--k-ease),
		box-shadow var(--k-dur) var(--k-ease);
}

.kr-site-header.is-scrolled {
	background-color: var(--k-gray);
	box-shadow: 0 20px 40px rgba(26, 26, 26, 0.13);
}

/* Top utility bar: phone, email, referral link.
   Transparent on home hero, solid blue on scroll and inner pages. */
.kr-topbar {
	--kr-nav-underline-inset: -3px;

	background-color: rgba(0, 0, 0, 0.15);
}

.kr-topbar-link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding-block: 0.5rem;
	padding-inline: 0;
	font-family: var(--k-font-heading);
	font-size: var(--k-text-sm2);
	font-weight: 500;
	color: var(--k-secondary-text-color);
	text-decoration: none;
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 transparent;
	transition:
		color var(--k-dur) var(--k-ease),
		box-shadow var(--k-dur) var(--k-ease),
		opacity var(--k-dur) var(--k-ease);
}

.kr-topbar-link:hover,
.kr-topbar-link:focus-visible {
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 var(--k-shamrock);
}

.kr-site-header.is-scrolled .kr-topbar,
.kr-inner-page .kr-topbar {
	background-color: #dedede;
}

.kr-inner-page .kr-topbar-link,
.kr-site-header.is-scrolled .kr-topbar-link {
	color: var(--k-blue-bold);
}

.kr-topbar-inner {
	display: flex;
	gap: var(--k-space-sm);
	align-items: center;
	justify-content: space-between;
	max-inline-size: var(--k-container);
	padding-inline: var(--k-space-md);
	margin-inline: auto;
}

.kr-topbar-audience {
	display: flex;
	flex-wrap: wrap;
	gap: 2.25rem;
	align-items: center;
}

.kr-topbar-audience .kr-icon {
	inline-size: var(--k-text-base);
	block-size: var(--k-text-base);
	margin: 0;
}

.kr-topbar-contact {
	display: flex;
	flex-shrink: 0;
	gap: var(--k-space-md);
	align-items: center;
}

@media (max-width: 1320px) {
	.kr-topbar-email {
		justify-content: center;
		min-inline-size: 2rem;
	}

	.kr-topbar-email .kr-icon {
		margin-inline-end: 0;
	}

	.kr-topbar-email-text {
		display: none;
	}
}

/* Topbar phone: visible only where the nav CTA is collapsed (i.e. at
   compressed desktop + hamburger widths <=1500). Above 1500 the green CTA pill in the nav
   already surfaces the number, so hiding this copy avoids duplication. */
@media (min-width: 1501px) {
	.kr-topbar-phone {
		display: none;
	}

	.kr-topbar-inner {
		padding-block: 0;
		padding-inline: var(--k-space-md);
	}
}

/* The hamburger overlay carries Donate at tablet and mobile widths, so the
   topbar copy drops out as soon as the hamburger appears. */
@media (max-width: 1100px) {
	.kr-topbar-donate {
		display: none;
	}
}

/* Phone-only topbar at xxs widths. The email address is too long to
   share a single topbar row with the phone number on small phones. */
@media (max-width: 480px) {
	.kr-topbar-email {
		display: none;
	}
}

@media (max-width: 768px) {
	.kr-topbar-inner {
		flex-direction: column;
		gap: 0.35rem;
		align-items: center;
	}

	.kr-topbar-audience {
		justify-content: center;
	}

	.kr-topbar-contact {
		/* gap: 1rem; */
		justify-content: center;
	}
}

/* Primary nav row */
.kr-nav {
	--kr-nav-underline-inset: -3px;
	--kr-nav-inline-pad: 2rem 2.7rem;

	display: flex;
	align-items: center;
	padding-block: 0;
	padding-inline: var(--kr-nav-inline-pad);
}

/* Logo and referral button take fixed space, links fill the center */
.kr-nav-logo {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	margin-block: 0.75rem;
	margin-inline: 0;
	line-height: 0;
}

.kr-logo-svg svg {
	display: block;
	inline-size: auto;
	block-size: 75px;
}

/* Dual logo swap: white mark at rest on home hero, color mark on scroll/inner pages. */
.kr-logo-svg--light {
	display: block;
}

.kr-logo-svg--light path {
	fill: var(--k-white);
}

.kr-logo-svg--dark {
	display: none;
}

.kr-site-header.is-scrolled .kr-logo-svg--light,
.kr-inner-page .kr-logo-svg--light {
	display: none;
}

.kr-site-header.is-scrolled .kr-logo-svg--dark,
.kr-inner-page .kr-logo-svg--dark {
	display: block;
}

/* Donate */
.kr-nav-cta {
	flex-shrink: 0;
	margin-inline-end: 0.5rem;
}

/* Green phone CTA in the nav. Hidden at the <=1500 compressed desktop
   breakpoint before the nav links collapse into the hamburger. The topbar
   continues to surface the phone number + email in the compressed range.
   Specificity note: .kr-btn.kr-nav-phone beats the later-declared
   .kr-btn base rule's display: inline-flex. */
.kr-nav-phone {
	flex-shrink: 0;
	margin-inline-start: var(--k-space-sm);
}

.kr-btn.kr-btn--nav {
	padding-block: 0.5rem;
	padding-inline: 1.2rem;
}

.kr-nav-links {
	display: flex;
	flex: 1;
	gap: 0.25rem;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	list-style: none;
}

.kr-nav-links li a {
	display: flex;
	align-items: center;
	block-size: 100%;
	padding-block: 0;
	padding-inline: 0.75rem;
	font-family: var(--k-font-body);
	font-size: var(--k-text-base);
	font-weight: 400;
	color: var(--k-secondary-text-color);
	letter-spacing: var(--k-track-ui);
	white-space: nowrap;
	text-decoration: none;
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 transparent;
	transition:
		color var(--k-dur) var(--k-ease),
		box-shadow var(--k-dur) var(--k-ease),
		background-color var(--k-dur) var(--k-ease);
}

.kr-nav-links li a:hover {
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 var(--k-secondary-text-color);
}

.kr-site-header.is-scrolled .kr-nav-links li a {
	color: var(--k-blue-bold);
}

.kr-site-header.is-scrolled .kr-nav-links li a:hover {
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 var(--k-blue-bold);
}

/* Desktop dropdown submenu for Services */
.kr-nav-links li {
	position: relative;
	block-size: 100%;
	margin-block-end: initial;
}

.kr-nav-links .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 100;
	visibility: hidden;
	min-inline-size: 220px;
	padding-block: 0.5rem;
	padding-inline: 0;
	margin: 0;
	list-style: none;
	background: white;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--k-dur) var(--k-ease),
		transform var(--k-dur) var(--k-ease),
		visibility var(--k-dur) var(--k-ease);
}

.kr-nav-links > li:last-child > .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.kr-nav-links li:hover > .sub-menu,
.kr-nav-links li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.kr-nav-links .sub-menu li a {
	display: block;
	padding-block: 0.6rem;
	padding-inline: 1.25rem;
	font-size: var(--k-text-base);
	color: var(--k-blue-bold);
	white-space: nowrap;
}

.kr-nav-links .sub-menu li a:hover {
	color: var(--k-teal);
	background: var(--k-gray);
	box-shadow: none;
}

/* Scrolled state: cancel top-level hover underline inside dropdown links. */
.kr-site-header.is-scrolled .kr-nav-links .sub-menu li a:hover {
	box-shadow: none;
}

/* Inner pages: same cancel for submenu hover. */
.kr-inner-page .kr-nav-links .sub-menu li a:hover {
	box-shadow: none;
}

/* Inner pages: solid header background + dark nav-link text.
   On the home page the hero provides a colored backdrop behind the
   transparent header; everywhere else needs a solid bg from the start. */
.kr-inner-page .kr-site-header {
	background-color: var(--k-gray);
}

.kr-inner-page .kr-nav-links li a {
	color: var(--k-blue-bold);
}

.kr-inner-page .kr-nav-links li a:hover {
	box-shadow: inset 0 var(--kr-nav-underline-inset) 0 var(--k-blue-bold);
}

/* Tablet+mobile: hide desktop nav links, the green phone CTA, and the
   donate CTA -- the hamburger overlay (mobile-nav.css) takes over. */
@media (max-width: 1100px) {
	.kr-nav-cta {
		display: none;
	}

	.kr-btn.kr-nav-phone {
		display: none;
	}

	.kr-nav-links {
		display: none;
		gap: 1rem;
	}

	.kr-topbar-audience {
		display: none;
	}

	.kr-topbar-audience .kr-topbar-link {
		padding-block: 0.5rem;
		padding-inline: 0;
	}

	.kr-topbar-inner {
		justify-content: center;
	}

	.kr-topbar-contact {
		flex-wrap: wrap;
		justify-content: center;
		inline-size: 100%;
	}

	.kr-nav {
		justify-content: space-between;
	}
}

/* Compressed desktop: keep the full nav visible with tighter spacing before
   the layout hands off to the hamburger at <=1100. */
@media (min-width: 1101px) and (max-width: 1500px) {
	.kr-nav {
		--kr-nav-inline-pad: var(--k-space-md);

		gap: var(--k-space-sm);
		justify-content: center;
	}

	.kr-logo-svg svg {
		block-size: 68px;
	}

	.kr-nav-links {
		flex: 0 1 auto;
	}
}

/* Narrow desktop: keep the yellow call CTA, but collapse it to the icon
   only where the full phone label crowds the nav. */
@media (min-width: 1101px) and (max-width: 1280px) {
	.kr-btn.kr-btn--nav.kr-nav-phone {
		inline-size: 56px;
		min-inline-size: 56px;
		padding-inline: 0;
	}

	.kr-nav-phone .kr-icon {
		margin-inline: auto;
	}

	.kr-nav-phone-text {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}
}

/* Desktop nav: align the outer controls with the page content rhythm. */
@media (min-width: 1501px) {
	.kr-nav {
		--kr-nav-inline-pad: var(--k-space-lg);

		gap: var(--k-space-md);
		justify-content: center;
	}

	.kr-nav-links {
		flex: 0 0 auto;
	}
}

/* Wide desktop squeeze: the type scale grows here before the viewport has
   enough room for the full phone pill, so keep the controls closer. */
@media (min-width: 1600px) and (max-width: 1700px) {
	.kr-nav {
		--kr-nav-inline-pad: var(--k-space-md);

		gap: var(--k-space-sm);
	}

	.kr-nav-links {
		gap: 0.75rem;
	}
}

/* XL screens: wider gap between top-level nav items */
@media (min-width: 1701px) {
	.kr-nav {
		gap: var(--k-space-lg);
	}

	.kr-nav-links {
		gap: 1.5rem;
	}
}