﻿/* Mobile bubble */
@media (max-width: 921px) {
	:root {
		--noul-header-bubble-width: 92vw;
		--noul-header-bubble-max-width: 92vw;
		--noul-header-bubble-padding-x: 1rem;
		--noul-mobile-edge-offset: 0;
		--noul-header-sticky-top: 14px;
		--noul-header-float-gap: 16px;
		--noul-layout-gutter: calc((100vw - var(--noul-header-bubble-width)) / 2);
		--noul-content-align-start: var(--noul-layout-gutter);
		--noul-page-content-top-spacing: 3.25rem;
		--noul-header-bubble-radius-mobile: 24px;
	}

	body.admin-bar #masthead {
		top: calc(46px + var(--noul-header-sticky-top));
	}

	/* Center header bar + dropdown as one column (fixes Astra absolute dropdown offset) */
	#ast-mobile-header.ast-mobile-header-wrap {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		position: relative !important;
	}

	#ast-mobile-header,
	#masthead .ast-mobile-header-wrap,
	#masthead .ast-mobile-header-wrap .ast-main-header-wrap,
	#masthead .ast-mobile-header-wrap .main-header-bar-wrap {
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}

	#masthead .ast-mobile-header-wrap .ast-main-header-wrap,
	#masthead .ast-mobile-header-wrap .main-header-bar-wrap {
		width: var(--noul-header-bubble-width) !important;
		max-width: var(--noul-header-bubble-max-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Override Astra customizer white panel on mobile dropdown */
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .ast-builder-menu-mobile,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .ast-main-header-bar-alignment,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-navigation,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-navigation > ul,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu > .menu-item,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .menu-link,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .site-navigation {
		background: transparent !important;
		background-color: transparent !important;
	}

	#masthead .ast-mobile-header-wrap .site-header-primary-section-left {
		padding-left: 0.15rem;
	}

	#masthead .ast-mobile-header-wrap .site-header-primary-section-right {
		padding-right: 0.15rem;
	}

	#masthead .ast-mobile-header-wrap .ast-primary-header-bar,
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar.site-primary-header-wrap {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 3.35rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0.4rem var(--noul-header-bubble-padding-x) !important;
		background: var(--noul-header-bubble-bg) !important;
		backdrop-filter: blur(16px) saturate(120%);
		-webkit-backdrop-filter: blur(16px) saturate(120%);
		border: none !important;
		border-radius: var(--noul-header-bubble-radius-mobile) !important;
		box-shadow: 0 8px 32px rgba(var(--noul-shadow-rgb), 0.18);
	}

	#masthead .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row,
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row-container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	#masthead .ast-mobile-header-wrap .site-header-primary-section-left,
	#masthead .ast-mobile-header-wrap .site-header-primary-section-right {
		align-items: center;
	}

	#masthead .ast-mobile-header-wrap .menu-toggle,
	#masthead .ast-mobile-header-wrap .ast-mobile-menu-trigger-minimal {
		background: transparent !important;
		border: none !important;
		color: #ffffff !important;
		padding: 0.25rem !important;
	}

	#masthead .ast-mobile-header-wrap .mobile-menu-toggle-icon,
	#masthead .ast-mobile-header-wrap .ast-mobile-svg {
		color: #ffffff !important;
		fill: currentColor !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: var(--noul-header-bubble-width) !important;
		max-width: var(--noul-header-bubble-max-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 0.45rem !important;
		padding: 0.65rem 1rem 0.85rem !important;
		background: var(--noul-header-bubble-bg) !important;
		backdrop-filter: blur(16px) saturate(120%);
		-webkit-backdrop-filter: blur(16px) saturate(120%);
		border: none !important;
		border-radius: var(--noul-header-bubble-radius-mobile) !important;
		box-shadow: 0 8px 32px rgba(var(--noul-shadow-rgb), 0.18);
	}

	body.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-mobile-header-content {
		margin-top: 0 !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content > * {
		padding: 0 !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-navigation,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-navigation > ul {
		width: 100% !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content.content-align-flex-start,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .ast-main-header-bar-alignment,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-navigation {
		width: 100% !important;
		margin: 0 !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.15rem !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu > .menu-item {
		width: 100%;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .menu-link {
		display: block !important;
		width: 100%;
		padding: 0.55rem 0 !important;
		color: #ffffff !important;
		font-size: 0.95rem !important;
		font-weight: 500 !important;
	}

	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .menu-link:hover,
	#masthead .ast-mobile-header-wrap .ast-mobile-header-content .menu-link:focus-visible {
		color: rgba(255, 255, 255, 0.85) !important;
		opacity: 1 !important;
	}

	/* Open menu — connected block, uniform 24px outer corners */
	body.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
	body.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-primary-header-bar.site-primary-header-wrap {
		border-radius: var(--noul-header-bubble-radius-mobile) var(--noul-header-bubble-radius-mobile) 0 0 !important;
		box-shadow: none !important;
	}

	body.ast-main-header-nav-open #masthead .ast-mobile-header-wrap .ast-mobile-header-content {
		margin-top: 0 !important;
		padding-top: 0.35rem !important;
		border-radius: 0 0 var(--noul-header-bubble-radius-mobile) var(--noul-header-bubble-radius-mobile) !important;
		box-shadow: 0 8px 32px rgba(var(--noul-shadow-rgb), 0.18) !important;
	}

	#masthead .noul-site-logo,
	#masthead .custom-logo {
		height: 48px;
		max-width: 48px;
	}

	/* Page content — centered column matching menu width */
	body:not(.home) #content.site-content,
	body:not(.home) .site-content > .ast-container {
		padding-top: var(--noul-page-content-top-spacing) !important;
	}

	body.page:not(.home) .site-content > .ast-container,
	body.page:not(.home) .entry-content {
		width: var(--noul-header-bubble-width) !important;
		max-width: var(--noul-header-bubble-max-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (max-width: 544px) {
	:root {
		--noul-page-content-top-spacing: 2.75rem;
	}
}
