/**
 * Fontrova mobile navigation drawer.
 *
 * Replaces Astra's inline mobile dropdown, which cannot open on this site: the
 * header bar is pinned to a fixed height, so the expanding nav is clipped to
 * zero and tapping the hamburger appears to do nothing.
 *
 * A slide-in drawer is also what the site architecture calls for - nested
 * flyout dropdowns are the usual failure mode on mobile. Group expansion uses
 * native <details>, so open/close, keyboard support and screen-reader
 * semantics work even if the JavaScript never loads.
 *
 * @package Fontrova_UI_Fix
 */

/* Astra's own mobile nav is dead weight once the drawer exists. Hidden rather
 * than dequeued so the markup stays available as a no-JS fallback target. */
@media ( max-width: 1023px ) {

	#masthead .main-header-bar-navigation,
	#masthead .ast-mobile-header-content {
		display: none !important;
	}
}

.fds-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba( 15, 23, 42, 0.45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms var( --fds-ease ), visibility 220ms var( --fds-ease );
}

.fds-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min( 88vw, 360px );
	background: var( --fds-bg );
	border-inline-start: 1px solid var( --fds-border );
	box-shadow: -20px 0 48px rgba( 15, 23, 42, 0.18 );
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform 260ms var( --fds-ease ), visibility 260ms var( --fds-ease );
	/* The drawer scrolls, not the page behind it. */
	overscroll-behavior: contain;
}

.fds-drawer-open .fds-drawer {
	transform: translateX( 0 );
	visibility: visible;
}

.fds-drawer-open .fds-drawer-backdrop {
	opacity: 1;
	visibility: visible;
}

/* Body is frozen via position:fixed while open - the only technique that
 * reliably stops iOS Safari scrolling the page behind an overlay. */
body.fds-drawer-open {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}

.fds-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 18px 20px;
	border-bottom: 1px solid var( --fds-border );
}

.fds-drawer-title {
	margin: 0;
	font-family: var( --fds-stack-mono );
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

.fds-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -8px -10px 0;
	padding: 0;
	border: 0;
	border-radius: var( --fds-radius-sm );
	background: none;
	color: var( --fds-foreground );
	cursor: pointer;
}

.fds-drawer-close:hover {
	background: var( --fds-muted );
}

.fds-drawer-close:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: 2px;
}

.fds-drawer-close svg {
	width: 20px;
	height: 20px;
}

.fds-drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0 24px;
}

/* Groups: native <details>, so this works with JS disabled. */
.fds-drawer-group {
	border-bottom: 1px solid var( --fds-border );
}

.fds-drawer-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 0 20px;
	cursor: pointer;
	list-style: none;
	font-family: var( --fds-stack-body );
	font-size: 15px;
	font-weight: 600;
	color: var( --fds-foreground );
}

.fds-drawer-group > summary::-webkit-details-marker {
	display: none;
}

.fds-drawer-group > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-inline-end: 4px;
	border-right: 2px solid var( --fds-accent );
	border-bottom: 2px solid var( --fds-accent );
	transform: rotate( 45deg );
	transition: transform 200ms var( --fds-ease );
}

.fds-drawer-group[open] > summary::after {
	transform: rotate( -135deg );
}

.fds-drawer-group > summary:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: -2px;
}

.fds-drawer-sub {
	margin: 0;
	padding: 0 0 10px;
	list-style: none;
}

.fds-drawer a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	font-family: var( --fds-stack-body );
	font-size: 15px;
	color: var( --fds-muted-foreground );
	text-decoration: none;
}

.fds-drawer-sub a {
	padding-inline-start: 32px;
	font-size: 14.5px;
}

.fds-drawer a:hover,
.fds-drawer a:focus-visible {
	color: var( --fds-accent-text );
	background: var( --fds-muted );
}

.fds-drawer a[aria-current="page"] {
	color: var( --fds-accent-text );
	font-weight: 600;
}

.fds-drawer-flat {
	border-bottom: 1px solid var( --fds-border );
}

.fds-drawer-foot {
	flex: 0 0 auto;
	padding: 16px 20px calc( 16px + env( safe-area-inset-bottom ) );
	border-top: 1px solid var( --fds-border );
}

.fds-drawer-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var( --fds-radius-md );
	background: var( --fds-gradient );
	color: #ffffff;
	font-family: var( --fds-stack-body );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.fds-drawer-cta:hover,
.fds-drawer-cta:focus-visible {
	color: #ffffff;
	background: var( --fds-gradient );
	filter: brightness( 1.08 );
}

/* Desktop header CTA - jumps straight to the tool, per the site architecture. */
.fds-header-cta {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-inline-start: 6px;
	padding: 0 18px;
	border-radius: var( --fds-radius-md );
	background: var( --fds-gradient );
	color: #ffffff;
	font-family: var( --fds-stack-body );
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: filter 200ms var( --fds-ease ), transform 200ms var( --fds-ease );
}

.fds-header-cta:hover,
.fds-header-cta:focus-visible {
	color: #ffffff;
	filter: brightness( 1.08 );
	transform: translateY( -1px );
}

@media ( min-width: 1024px ) {

	.fds-header-cta {
		display: inline-flex;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.fds-drawer,
	.fds-drawer-backdrop,
	.fds-drawer-group > summary::after {
		transition: none;
	}
}

/* FDS: room between the nav and the CTA.

   The desktop nav switches on at 922px, but the CTA only carried a 6px start
   margin and the menu links 7px of side padding. At 1024px that left an 8px
   gap between "FAQ" and the button, so they read as colliding. The gap now
   scales with the space available, and the links get enough padding that the
   row breathes at every width between the drawer and full desktop. */
@media ( min-width: 1024px ) {

	.fds-header-cta {
		margin-inline-start: clamp( 16px, 2.2vw, 30px );
	}

	.main-header-menu > .menu-item > .menu-link {
		padding-inline: 11px;
	}
}

@media ( min-width: 922px ) and ( max-width: 1040px ) {

	/* Tightest band: the nav is on but the viewport is not yet generous, so the
	   CTA loses a little of its own padding rather than crowding the links. */
	.fds-header-cta {
		padding: 0 14px;
		font-size: 13.5px;
	}

	.main-header-menu > .menu-item > .menu-link {
		padding-inline: 9px;
		font-size: 13.5px;
	}
}

/* FDS: the wordmark gets its own width.

   Astra sized the branding column at 110px while the Calistoga wordmark
   actually renders 137px wide, so "Fontrova" overflowed its cell by 27px and
   ran into the first nav item. Sizing the column to its content fixes it at
   every desktop width instead of at one tested breakpoint. */
@media ( min-width: 1024px ) {

	.ast-builder-grid-row {
		grid-template-columns: max-content minmax( 0, 1fr );
		column-gap: clamp( 20px, 2.4vw, 36px );
	}

	.site-branding,
	.ast-site-identity {
		min-width: max-content;
	}
}

/* FDS: the drawer holds until 1100px.

   Astra hands over to the desktop header at 922px, but between there and
   roughly 1100px the wordmark, six nav items and the CTA do not fit on one
   line: at 960px the row is 69px short, so something always collides. Rather
   than shrinking type until it technically fits, the mobile header - and with
   it the drawer, which is the better experience at iPad widths anyway - keeps
   the band. Swapping the two header roots is how Astra does it at 921px, so
   this extends the existing mechanism rather than inventing a second one. */
@media ( min-width: 922px ) and ( max-width: 1023px ) {

	/* Astra sets these with !important inside its own breakpoint, so matching
	   it is the only way to swap the roots. */
	#masthead #ast-desktop-header {
		display: none !important;
	}

	#masthead #ast-mobile-header {
		display: block !important;
	}
}