/* ==========================================================================
   Advanced Header by Foxco
   Position-aware header with 4 positions (left/top/right/bottom),
   6 visual presets, and a fullscreen drawer.
   ========================================================================== */

/* ---------- Host collapse ----------
   When auto_collapse_host is ON, the widget writes data-foxco-ah-host on:
     - its own .elementor-widget-foxco_advanced_header wrapper
     - the closest Elementor Container / Section / Column
     - the Theme Builder <header class="elementor-location-header"> wrapper
     - any <header> tag ancestor
   These rules force zero height, padding, margin, and min-height on all of
   them so the fixed-positioned rail/bar never leaves an accidental stripe
   of reserved space at the top of the page.

   An inline script rendered with each widget instance sets data-foxco-ah-host
   BEFORE first paint, preventing any flash of the unstyled container.
*/

[data-foxco-ah-host="widget"],
[data-foxco-ah-host="widget"] > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

[data-foxco-ah-host="container"] {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* ---------- Base variables ---------- */

.foxco-ah {
	/* Size per breakpoint (set inline by widget). */
	--foxco-ah-size-desktop: 80px;
	--foxco-ah-size-tablet: 70px;
	--foxco-ah-size-mobile: 60px;

	/* Timing */
	--foxco-ah-speed: 350ms;

	/* Default colors (overridden by preset classes). */
	--foxco-ah-rail-bg: #1a1a2e;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-title-size: 14px;
	--foxco-ah-drawer-bg: #1a1a2e;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.1);
	--foxco-ah-logo-size: 48px;
	--foxco-ah-z: 9998;
	--foxco-ah-drawer-z: 9999;

	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--foxco-ah-rail-bg);
	z-index: var(--foxco-ah-z);
	box-sizing: border-box;
}

.foxco-ah *,
.foxco-ah-drawer * {
	box-sizing: border-box;
}

.foxco-ah__inner {
	display: flex;
	align-items: center;
	justify-content: var(--foxco-ah-distribute, space-between);
	width: 100%;
	height: 100%;
	gap: var(--foxco-ah-gap, 16px);
}

/* ==========================================================================
   Position rules - mobile first, then tablet, then desktop.
   Data attributes set per-breakpoint position; each @media layer overrides.
   ========================================================================== */

/* ---- Mobile (default, no media query) ---- */

.foxco-ah[data-pos-mobile="left"],
.foxco-ah[data-pos-mobile="right"] {
	top: 0;
	bottom: 0;
	width: var(--foxco-ah-size-mobile);
	height: auto;
	flex-direction: column;
	padding: var(--foxco-ah-rail-padding-mobile, 16px 8px);
}
.foxco-ah[data-pos-mobile="left"] { left: 0; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }
.foxco-ah[data-pos-mobile="right"] { right: 0; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }

.foxco-ah[data-pos-mobile="top"],
.foxco-ah[data-pos-mobile="bottom"] {
	left: 0;
	right: 0;
	width: auto;
	height: var(--foxco-ah-size-mobile);
	flex-direction: row;
	padding: var(--foxco-ah-rail-padding-mobile, 0 16px);
}
.foxco-ah[data-pos-mobile="top"] { top: 0; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }
.foxco-ah[data-pos-mobile="bottom"] { bottom: 0; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); }

.foxco-ah[data-pos-mobile="left"] .foxco-ah__inner,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__inner { flex-direction: column; }

.foxco-ah[data-pos-mobile="top"] .foxco-ah__inner,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__inner { flex-direction: row; }

/* ---- Tablet (768px and up) ---- */

@media (min-width: 768px) {
	.foxco-ah[data-pos-tablet="left"],
	.foxco-ah[data-pos-tablet="right"] {
		top: 0;
		bottom: 0;
		width: var(--foxco-ah-size-tablet);
		height: auto;
		flex-direction: column;
		padding: var(--foxco-ah-rail-padding-tablet, 20px 10px);
	}
	.foxco-ah[data-pos-tablet="left"] { left: 0; right: auto; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-left: 0; border-top: 0; border-bottom: 0; }
	.foxco-ah[data-pos-tablet="right"] { right: 0; left: auto; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-right: 0; border-top: 0; border-bottom: 0; }

	.foxco-ah[data-pos-tablet="top"],
	.foxco-ah[data-pos-tablet="bottom"] {
		left: 0;
		right: 0;
		width: auto;
		height: var(--foxco-ah-size-tablet);
		flex-direction: row;
		padding: var(--foxco-ah-rail-padding-tablet, 0 20px);
	}
	.foxco-ah[data-pos-tablet="top"] { top: 0; bottom: auto; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-top: 0; border-left: 0; border-right: 0; }
	.foxco-ah[data-pos-tablet="bottom"] { bottom: 0; top: auto; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-bottom: 0; border-left: 0; border-right: 0; }

	.foxco-ah[data-pos-tablet="left"] .foxco-ah__inner,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__inner { flex-direction: column; }

	.foxco-ah[data-pos-tablet="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__inner { flex-direction: row; }
}

/* ---- Desktop (1025px and up) ---- */

@media (min-width: 1025px) {
	.foxco-ah[data-pos-desktop="left"],
	.foxco-ah[data-pos-desktop="right"] {
		top: 0;
		bottom: 0;
		width: var(--foxco-ah-size-desktop);
		height: auto;
		flex-direction: column;
		padding: var(--foxco-ah-rail-padding-desktop, 24px 12px);
	}
	.foxco-ah[data-pos-desktop="left"] { left: 0; right: auto; border-right: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-left: 0; border-top: 0; border-bottom: 0; }
	.foxco-ah[data-pos-desktop="right"] { right: 0; left: auto; border-left: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-right: 0; border-top: 0; border-bottom: 0; }

	.foxco-ah[data-pos-desktop="top"],
	.foxco-ah[data-pos-desktop="bottom"] {
		left: 0;
		right: 0;
		width: auto;
		height: var(--foxco-ah-size-desktop);
		flex-direction: row;
		padding: var(--foxco-ah-rail-padding-desktop, 0 24px);
	}
	.foxco-ah[data-pos-desktop="top"] { top: 0; bottom: auto; border-bottom: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-top: 0; border-left: 0; border-right: 0; }
	.foxco-ah[data-pos-desktop="bottom"] { bottom: 0; top: auto; border-top: var(--foxco-ah-border-width, 1px) solid var(--foxco-ah-border); border-bottom: 0; border-left: 0; border-right: 0; }

	.foxco-ah[data-pos-desktop="left"] .foxco-ah__inner,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__inner { flex-direction: column; }

	.foxco-ah[data-pos-desktop="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__inner { flex-direction: row; }
}

/* ==========================================================================
   Inner elements
   ========================================================================== */

.foxco-ah__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.foxco-ah__logo img {
	display: block;
	max-width: var(--foxco-ah-logo-size);
	max-height: var(--foxco-ah-logo-size);
	width: auto;
	height: auto;
	object-fit: contain;
}

.foxco-ah__btn,
.foxco-ah__btn:hover,
.foxco-ah__btn:focus,
.foxco-ah__btn:focus-visible,
.foxco-ah__btn:active {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	margin: 0;
	padding: var(--foxco-ah-icon-padding, 10px);
	cursor: pointer;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease, opacity var(--foxco-ah-speed) ease;
}

.foxco-ah__btn { color: var(--foxco-ah-icon); }

/* Explicit sizes - these always win over the armored rule (no font-size in armor) */
.foxco-ah__toggle { font-size: var(--foxco-ah-toggle-size, 24px) !important; flex: 0 0 auto; }
.foxco-ah-drawer__close { font-size: var(--foxco-ah-close-size, 28px) !important; }

.foxco-ah__btn:hover,
.foxco-ah__btn:focus-visible {
	color: var(--foxco-ah-icon-hover) !important;
	outline: none;
}
.foxco-ah__btn:focus-visible { box-shadow: 0 0 0 2px var(--foxco-ah-icon-hover) !important; border-radius: 4px; }

.foxco-ah__btn i,
.foxco-ah__btn svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

.foxco-ah__title-wrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.foxco-ah__title {
	color: var(--foxco-ah-title);
	font-size: var(--foxco-ah-title-size);
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ==========================================================================
   Per-item alignment & order (mobile-first, per-breakpoint)
   --foxco-ah-order-{bp}   numeric flex order (1-3)
   --foxco-ah-align-{bp}   align-self for cross axis + justify-self-ish for main
   Visibility is controlled by .foxco-ah__item--hide-{bp} classes below.
   ========================================================================== */

/* Mobile (default scope - no media query) */
.foxco-ah__item {
	order: var(--foxco-ah-order-mobile, var(--foxco-ah-order-tablet, var(--foxco-ah-order-desktop, 0)));
	align-self: var(--foxco-ah-align-mobile, var(--foxco-ah-align-tablet, var(--foxco-ah-align-desktop, auto)));
}

/* On horizontal bars (top/bottom), alignment controls horizontal position via margin */
.foxco-ah[data-pos-mobile="top"] .foxco-ah__item,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__item {
	--foxco-ah-axis: horizontal;
}
.foxco-ah[data-pos-mobile="left"] .foxco-ah__item,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__item {
	--foxco-ah-axis: vertical;
}

/* Visibility per breakpoint - mobile first */
.foxco-ah__item--hide-mobile { display: none !important; }

@media (min-width: 768px) {
	.foxco-ah__item--hide-mobile { display: flex !important; }
	.foxco-ah__item--hide-tablet { display: none !important; }
	.foxco-ah__item {
		order: var(--foxco-ah-order-tablet, var(--foxco-ah-order-desktop, var(--foxco-ah-order-mobile, 0)));
		align-self: var(--foxco-ah-align-tablet, var(--foxco-ah-align-desktop, var(--foxco-ah-align-mobile, auto)));
	}
	.foxco-ah[data-pos-tablet="top"] .foxco-ah__item,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__item {
		--foxco-ah-axis: horizontal;
	}
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__item,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__item {
		--foxco-ah-axis: vertical;
	}
}

@media (min-width: 1025px) {
	.foxco-ah__item--hide-tablet { display: flex !important; }
	.foxco-ah__item--hide-desktop { display: none !important; }
	.foxco-ah__item {
		order: var(--foxco-ah-order-desktop, var(--foxco-ah-order-tablet, var(--foxco-ah-order-mobile, 0)));
		align-self: var(--foxco-ah-align-desktop, var(--foxco-ah-align-tablet, var(--foxco-ah-align-mobile, auto)));
	}
	.foxco-ah[data-pos-desktop="top"] .foxco-ah__item,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__item {
		--foxco-ah-axis: horizontal;
	}
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__item,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__item {
		--foxco-ah-axis: vertical;
	}
}

/* ==========================================================================
   Mobile top bar improvements
   When position is top or bottom AND on mobile breakpoint, the title-wrap
   should not stretch and steal space from the logo/hamburger. Also title
   font sizes down so it fits comfortably next to logo + hamburger.
   ========================================================================== */

.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap {
	flex: 0 1 auto;
	padding: 0 12px;
}

.foxco-ah[data-pos-mobile="top"] .foxco-ah__title,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title {
	font-size: calc(var(--foxco-ah-title-size, 14px) * 0.92);
	letter-spacing: 0.04em;
}

/* Give mobile top bars a bit of breathing room around each element */
.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo {
	flex: 0 0 auto;
}

.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo img,
.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo img {
	/* Keep the logo proportional to the mobile bar height */
	max-height: calc(var(--foxco-ah-size-mobile) - 20px);
	max-width: min(var(--foxco-ah-logo-size), 40vw);
}

/* If user hasn't set an explicit mobile logo size via max-height, give a sensible cap */
@media (max-width: 767px) {
	.foxco-ah[data-pos-mobile="top"],
	.foxco-ah[data-pos-mobile="bottom"] {
		/* tighter horizontal padding than default 0 16px */
		padding: var(--foxco-ah-rail-padding-mobile, 0 14px);
	}
}

/* ==========================================================================
   Classic mobile defaults for top/bottom bars:
   Logo first (left), Title centered, Hamburger last (right).
   Only applies on mobile when user has NOT set an Order override.
   CSS var fallback chain in .foxco-ah__item already returns 0 for unset
   orders, so we reassign via inherent DOM-order class targets instead.
   ========================================================================== */

@media (max-width: 767px) {
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__logo,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__logo {
		order: var(--foxco-ah-order-mobile, 1);
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap {
		order: var(--foxco-ah-order-mobile, 2);
		/* Absolute center trick so the title is optically centered even when
		   logo + hamburger are different widths. */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap .foxco-ah__title,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap .foxco-ah__title {
		pointer-events: auto;
	}
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__toggle,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__toggle {
		order: var(--foxco-ah-order-mobile, 3);
		margin-left: auto;
	}
	/* When user explicitly orders the title, restore flex flow */
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__title-wrap[style*="--foxco-ah-order-mobile"],
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__title-wrap[style*="--foxco-ah-order-mobile"] {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		pointer-events: auto;
	}
	/* Parent needs position:relative for absolute title centering */
	.foxco-ah[data-pos-mobile="top"] .foxco-ah__inner,
	.foxco-ah[data-pos-mobile="bottom"] .foxco-ah__inner {
		position: relative;
	}
}

/* Vertical title orientation for left/right rails */
.foxco-ah[data-pos-mobile="left"] .foxco-ah__title,
.foxco-ah[data-pos-mobile="right"] .foxco-ah__title { writing-mode: vertical-rl; }
.foxco-ah[data-pos-mobile="left"] .foxco-ah__title { transform: rotate(180deg); }

@media (min-width: 768px) {
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__title,
	.foxco-ah[data-pos-tablet="right"] .foxco-ah__title { writing-mode: vertical-rl; transform: none; }
	.foxco-ah[data-pos-tablet="left"] .foxco-ah__title { transform: rotate(180deg); }
	.foxco-ah[data-pos-tablet="top"] .foxco-ah__title,
	.foxco-ah[data-pos-tablet="bottom"] .foxco-ah__title { writing-mode: horizontal-tb; transform: none; }
}

@media (min-width: 1025px) {
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__title,
	.foxco-ah[data-pos-desktop="right"] .foxco-ah__title { writing-mode: vertical-rl; transform: none; }
	.foxco-ah[data-pos-desktop="left"] .foxco-ah__title { transform: rotate(180deg); }
	.foxco-ah[data-pos-desktop="top"] .foxco-ah__title,
	.foxco-ah[data-pos-desktop="bottom"] .foxco-ah__title { writing-mode: horizontal-tb; transform: none; }
}

/* ==========================================================================
   Presets
   ========================================================================== */

/* ==========================================================================
   Presets - mobile-first, then overrides per breakpoint.
   The widget and drawer carry data-preset-{desktop,tablet,mobile} attributes.
   Rules in the default scope respond to -mobile; @media (min-width: 768px)
   switches to -tablet; @media (min-width: 1025px) switches to -desktop.
   All presets work via CSS custom properties, so changing the active preset
   at a breakpoint simply swaps the variables - no rules need to be undone.
   ========================================================================== */

/* ---- Mobile (default scope, no media query) ---- */

.foxco-ah[data-preset-mobile="foxco"],
.foxco-ah-drawer[data-preset-mobile="foxco"] {
	--foxco-ah-rail-bg: #1a1a2e;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-drawer-bg: #1a1a2e;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.08);
}

.foxco-ah[data-preset-mobile="transparent"] {
	--foxco-ah-rail-bg: transparent;
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-border: transparent;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.foxco-ah[data-preset-mobile="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.foxco-ah-drawer[data-preset-mobile="transparent"] {
	--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
}

.foxco-ah[data-preset-mobile="midnight"],
.foxco-ah-drawer[data-preset-mobile="midnight"] {
	--foxco-ah-rail-bg: #000000;
	--foxco-ah-icon: #e5e5e5;
	--foxco-ah-icon-hover: #ffffff;
	--foxco-ah-title: #ffffff;
	--foxco-ah-drawer-bg: #000000;
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #9ca3af;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.06);
}

.foxco-ah[data-preset-mobile="daylight"],
.foxco-ah-drawer[data-preset-mobile="daylight"] {
	--foxco-ah-rail-bg: #ffffff;
	--foxco-ah-icon: #1a1a2e;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #1a1a2e;
	--foxco-ah-drawer-bg: #ffffff;
	--foxco-ah-drawer-heading: #1a1a2e;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #1a1a2e;
	--foxco-ah-border: rgba(0, 0, 0, 0.08);
}
.foxco-ah[data-preset-mobile="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

.foxco-ah[data-preset-mobile="glass"] {
	--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
	--foxco-ah-icon: #ffffff;
	--foxco-ah-icon-hover: #df6737;
	--foxco-ah-title: #ffffff;
	--foxco-ah-border: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.foxco-ah-drawer[data-preset-mobile="glass"] {
	--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
	--foxco-ah-drawer-heading: #ffffff;
	--foxco-ah-drawer-link: #df6737;
	--foxco-ah-drawer-link-hover: #ffffff;
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.foxco-ah[data-preset-mobile="terminal"],
.foxco-ah-drawer[data-preset-mobile="terminal"] {
	--foxco-ah-rail-bg: #000000;
	--foxco-ah-icon: #00ff66;
	--foxco-ah-icon-hover: #ffffff;
	--foxco-ah-title: #00ff66;
	--foxco-ah-drawer-bg: #050505;
	--foxco-ah-drawer-heading: #00ff66;
	--foxco-ah-drawer-link: #00ff66;
	--foxco-ah-drawer-link-hover: #ffffff;
	--foxco-ah-border: #00ff66;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.foxco-ah[data-preset-mobile="terminal"] .foxco-ah__title,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__heading,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__links a,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__menu a,
.foxco-ah-drawer[data-preset-mobile="terminal"] .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	font-family: inherit;
	letter-spacing: 0.05em;
}
.foxco-ah[data-preset-mobile="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }

/* "custom" preset: emits no preset-level vars, so color controls fully govern. */

/* ---- Tablet overrides ---- */
@media (min-width: 768px) {
	.foxco-ah[data-preset-tablet="foxco"],
	.foxco-ah-drawer[data-preset-tablet="foxco"] {
		--foxco-ah-rail-bg: #1a1a2e;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #1a1a2e;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.08);
	}

	.foxco-ah[data-preset-tablet="transparent"] {
		--foxco-ah-rail-bg: transparent;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: transparent;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	}
	.foxco-ah[data-preset-tablet="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
	.foxco-ah-drawer[data-preset-tablet="transparent"] {
		--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
	}

	.foxco-ah[data-preset-tablet="midnight"],
	.foxco-ah-drawer[data-preset-tablet="midnight"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #e5e5e5;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #000000;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #9ca3af;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.06);
	}

	.foxco-ah[data-preset-tablet="daylight"],
	.foxco-ah-drawer[data-preset-tablet="daylight"] {
		--foxco-ah-rail-bg: #ffffff;
		--foxco-ah-icon: #1a1a2e;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #1a1a2e;
		--foxco-ah-drawer-bg: #ffffff;
		--foxco-ah-drawer-heading: #1a1a2e;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #1a1a2e;
		--foxco-ah-border: rgba(0, 0, 0, 0.08);
	}
	.foxco-ah[data-preset-tablet="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

	.foxco-ah[data-preset-tablet="glass"] {
		--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(14px) saturate(1.3);
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
	}
	.foxco-ah-drawer[data-preset-tablet="glass"] {
		--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		backdrop-filter: blur(18px) saturate(1.3);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
	}

	.foxco-ah[data-preset-tablet="terminal"],
	.foxco-ah-drawer[data-preset-tablet="terminal"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #00ff66;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #00ff66;
		--foxco-ah-drawer-bg: #050505;
		--foxco-ah-drawer-heading: #00ff66;
		--foxco-ah-drawer-link: #00ff66;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: #00ff66;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	}
	.foxco-ah[data-preset-tablet="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }
}

/* ---- Desktop overrides ---- */
@media (min-width: 1025px) {
	.foxco-ah[data-preset-desktop="foxco"],
	.foxco-ah-drawer[data-preset-desktop="foxco"] {
		--foxco-ah-rail-bg: #1a1a2e;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #1a1a2e;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.08);
	}

	.foxco-ah[data-preset-desktop="transparent"] {
		--foxco-ah-rail-bg: transparent;
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: transparent;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	}
	.foxco-ah[data-preset-desktop="transparent"] .foxco-ah__btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
	.foxco-ah-drawer[data-preset-desktop="transparent"] {
		--foxco-ah-drawer-bg: rgba(10, 10, 20, 0.92);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
	}

	.foxco-ah[data-preset-desktop="midnight"],
	.foxco-ah-drawer[data-preset-desktop="midnight"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #e5e5e5;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #ffffff;
		--foxco-ah-drawer-bg: #000000;
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #9ca3af;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.06);
	}

	.foxco-ah[data-preset-desktop="daylight"],
	.foxco-ah-drawer[data-preset-desktop="daylight"] {
		--foxco-ah-rail-bg: #ffffff;
		--foxco-ah-icon: #1a1a2e;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #1a1a2e;
		--foxco-ah-drawer-bg: #ffffff;
		--foxco-ah-drawer-heading: #1a1a2e;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #1a1a2e;
		--foxco-ah-border: rgba(0, 0, 0, 0.08);
	}
	.foxco-ah[data-preset-desktop="daylight"] { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

	.foxco-ah[data-preset-desktop="glass"] {
		--foxco-ah-rail-bg: rgba(255, 255, 255, 0.08);
		--foxco-ah-icon: #ffffff;
		--foxco-ah-icon-hover: #df6737;
		--foxco-ah-title: #ffffff;
		--foxco-ah-border: rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(14px) saturate(1.3);
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
	}
	.foxco-ah-drawer[data-preset-desktop="glass"] {
		--foxco-ah-drawer-bg: rgba(20, 20, 35, 0.72);
		--foxco-ah-drawer-heading: #ffffff;
		--foxco-ah-drawer-link: #df6737;
		--foxco-ah-drawer-link-hover: #ffffff;
		backdrop-filter: blur(18px) saturate(1.3);
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
	}

	.foxco-ah[data-preset-desktop="terminal"],
	.foxco-ah-drawer[data-preset-desktop="terminal"] {
		--foxco-ah-rail-bg: #000000;
		--foxco-ah-icon: #00ff66;
		--foxco-ah-icon-hover: #ffffff;
		--foxco-ah-title: #00ff66;
		--foxco-ah-drawer-bg: #050505;
		--foxco-ah-drawer-heading: #00ff66;
		--foxco-ah-drawer-link: #00ff66;
		--foxco-ah-drawer-link-hover: #ffffff;
		--foxco-ah-border: #00ff66;
		font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	}
	.foxco-ah[data-preset-desktop="terminal"] { box-shadow: inset 0 0 0 1px #00ff66; }
}

/* ==========================================================================
   Drawer
   ========================================================================== */

/* ==========================================================================
   Drawer root = backdrop layer (dimmed/blurred page behind).
   Drawer panel = the actual content container (sized per drawer_size mode).
   For fullscreen mode (default), panel is inset:0 so it looks identical
   to pre-v1.6.0 output. Non-fullscreen sizes center the panel and reveal
   the backdrop around it.
   ========================================================================== */

.foxco-ah-drawer {
	position: fixed;
	inset: 0;
	color: var(--foxco-ah-drawer-heading);
	z-index: var(--foxco-ah-drawer-z, 9999);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--foxco-ah-speed) ease, visibility var(--foxco-ah-speed) ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Fullscreen mode: no backdrop layer needed, panel fills everything */
.foxco-ah-drawer[data-size-mobile="full"] {
	background: var(--foxco-ah-drawer-bg);
}

/* Sized modes: apply backdrop + blur to the drawer root */
.foxco-ah-drawer:not([data-size-mobile="full"]) {
	background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
	backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
}

.foxco-ah-drawer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ---- Drawer panel ---- */

.foxco-ah-drawer__panel {
	position: relative;
	background: var(--foxco-ah-drawer-bg);
	color: var(--foxco-ah-drawer-heading);
	overflow-y: auto;
	overflow-x: hidden;
	transition: transform var(--foxco-ah-speed) ease, opacity var(--foxco-ah-speed) ease;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ---- Size: Fullscreen (default, mobile-first) ---- */
.foxco-ah-drawer[data-size-mobile="full"] .foxco-ah-drawer__panel {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* ---- Shape presets (all centered, ignore rail position) ---- */
/* Mobile: scale down dimensions so they fit narrow phones.
   Every preset uses min() to cap against viewport so nothing ever overflows. */
.foxco-ah-drawer[data-size-mobile="wide"] .foxco-ah-drawer__panel {
	width: min(85vw, 720px);
	height: min(70vh, 560px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="landscape"] .foxco-ah-drawer__panel {
	width: min(92vw, 640px);
	height: min(60vh, 420px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="square"] .foxco-ah-drawer__panel {
	width: min(88vw, 480px);
	height: min(70vh, 480px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="portrait"] .foxco-ah-drawer__panel {
	width: min(88vw, 420px);
	height: min(80vh, 620px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}
.foxco-ah-drawer[data-size-mobile="narrow"] .foxco-ah-drawer__panel {
	width: min(88vw, 340px);
	height: min(70vh, 520px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}

/* ---- Size: Auto (fit to content) ----
   Panel sizes itself to whatever the content needs, with sensible caps.
*/
.foxco-ah-drawer[data-size-mobile="auto"] .foxco-ah-drawer__panel {
	width: auto;
	height: auto;
	max-width: min(92vw, 900px);
	max-height: min(90vh, 720px);
	border-radius: var(--foxco-ah-panel-radius, 12px);
}

/* ---- Panel border (pinline around perimeter) ---- */
.foxco-ah-drawer .foxco-ah-drawer__panel {
	border: var(--foxco-ah-panel-border, 0 none);
	box-shadow: var(--foxco-ah-panel-shadow, none);
}

/* Fullscreen mode: suppress panel-level border + shadow so it looks seamless */
.foxco-ah-drawer[data-size-mobile="full"] .foxco-ah-drawer__panel { border: 0; box-shadow: none; }

/* ---- Column divider (vertical line between drawer columns) ---- */
.foxco-ah-drawer--divider .foxco-ah-drawer__grid > .foxco-ah-drawer__col:not(:last-child) {
	border-right: 1px solid var(--foxco-ah-divider, rgba(255, 255, 255, 0.12));
	padding-right: clamp(16px, 3vw, 40px);
}

@media (max-width: 639px) {
	.foxco-ah-drawer--divider .foxco-ah-drawer__grid > .foxco-ah-drawer__col:not(:last-child) {
		border-right: 0;
		padding-right: 0;
		border-bottom: 1px solid var(--foxco-ah-divider, rgba(255, 255, 255, 0.12));
		padding-bottom: clamp(16px, 3vw, 32px);
	}
}

/* ---- Tablet overrides ---- */
@media (min-width: 768px) {
	.foxco-ah-drawer[data-size-tablet="full"] { background: var(--foxco-ah-drawer-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.foxco-ah-drawer[data-size-tablet]:not([data-size-tablet="full"]) {
		background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
		backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
		-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	}

	.foxco-ah-drawer[data-size-tablet="full"] .foxco-ah-drawer__panel { width: 100%; height: 100%; border-radius: 0; }

	.foxco-ah-drawer[data-size-tablet="wide"] .foxco-ah-drawer__panel {
		width: min(85vw, 960px); height: min(70vh, 640px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="landscape"] .foxco-ah-drawer__panel {
		width: min(90vw, 800px); height: min(60vh, 500px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="square"] .foxco-ah-drawer__panel {
		width: min(70vw, 560px); height: min(75vh, 560px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="portrait"] .foxco-ah-drawer__panel {
		width: min(60vw, 500px); height: min(80vh, 680px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="narrow"] .foxco-ah-drawer__panel {
		width: min(50vw, 380px); height: min(70vh, 580px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-tablet="auto"] .foxco-ah-drawer__panel {
		width: auto; height: auto;
		max-width: min(90vw, 960px); max-height: min(90vh, 760px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
}

/* ---- Desktop overrides ---- */
@media (min-width: 1025px) {
	.foxco-ah-drawer[data-size-desktop="full"] { background: var(--foxco-ah-drawer-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.foxco-ah-drawer[data-size-desktop]:not([data-size-desktop="full"]) {
		background: var(--foxco-ah-backdrop, rgba(0, 0, 0, 0.6));
		backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
		-webkit-backdrop-filter: blur(var(--foxco-ah-backdrop-blur, 6px));
	}

	.foxco-ah-drawer[data-size-desktop="full"] .foxco-ah-drawer__panel { width: 100%; height: 100%; border-radius: 0; }

	.foxco-ah-drawer[data-size-desktop="wide"] .foxco-ah-drawer__panel {
		width: min(85vw, 1280px); height: min(70vh, 720px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="landscape"] .foxco-ah-drawer__panel {
		width: min(85vw, 960px); height: min(65vh, 560px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="square"] .foxco-ah-drawer__panel {
		width: min(50vw, 620px); height: min(80vh, 620px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="portrait"] .foxco-ah-drawer__panel {
		width: min(40vw, 560px); height: min(80vh, 720px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="narrow"] .foxco-ah-drawer__panel {
		width: min(30vw, 420px); height: min(70vh, 640px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
	.foxco-ah-drawer[data-size-desktop="auto"] .foxco-ah-drawer__panel {
		width: auto; height: auto;
		max-width: min(85vw, 1100px); max-height: min(90vh, 820px);
		border-radius: var(--foxco-ah-panel-radius, 12px);
	}
}

/* ---- Animations now apply to the panel, not the backdrop ---- */
.foxco-ah-drawer--anim-fade .foxco-ah-drawer__panel { transform: none; }
.foxco-ah-drawer--anim-slide-down .foxco-ah-drawer__panel { transform: translateY(-100%); }
.foxco-ah-drawer--anim-slide-up .foxco-ah-drawer__panel { transform: translateY(100%); }
.foxco-ah-drawer--anim-slide-left .foxco-ah-drawer__panel { transform: translateX(-100%); }
.foxco-ah-drawer--anim-slide-right .foxco-ah-drawer__panel { transform: translateX(100%); }
.foxco-ah-drawer--anim-zoom .foxco-ah-drawer__panel { transform: scale(0.9); opacity: 0; }
.foxco-ah-drawer--anim-none .foxco-ah-drawer,
.foxco-ah-drawer--anim-none .foxco-ah-drawer__panel { transition: none; }

.foxco-ah-drawer.is-open .foxco-ah-drawer__panel {
	transform: none !important;
	opacity: 1 !important;
}

/* Close button */
.foxco-ah-drawer__close {
	position: absolute;
	color: var(--foxco-ah-drawer-heading);
	padding: 12px;
	z-index: 2;
}
.foxco-ah-drawer--close-top-right .foxco-ah-drawer__close { top: 16px; right: 16px; }
.foxco-ah-drawer--close-top-left .foxco-ah-drawer__close { top: 16px; left: 16px; }
.foxco-ah-drawer--close-bottom-right .foxco-ah-drawer__close { bottom: 16px; right: 16px; }
.foxco-ah-drawer--close-bottom-left .foxco-ah-drawer__close { bottom: 16px; left: 16px; }

/* ---------- Mirror mode ----------
   The close button sits in the same screen region as the rail's hamburger.
   Positioning is driven by the drawer's data-pos-{bp} attribute so it
   tracks the rail's position per breakpoint automatically.
*/

/* Mobile (default scope) */
.foxco-ah-drawer--close-mirror[data-pos-mobile="left"] .foxco-ah-drawer__close {
	top: 0;
	left: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="right"] .foxco-ah-drawer__close {
	top: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="top"] .foxco-ah-drawer__close {
	top: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.foxco-ah-drawer--close-mirror[data-pos-mobile="bottom"] .foxco-ah-drawer__close {
	bottom: 0;
	right: 0;
	width: var(--foxco-ah-size-mobile);
	height: var(--foxco-ah-size-mobile);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.foxco-ah-drawer--close-mirror[data-pos-tablet="left"] .foxco-ah-drawer__close {
		top: 0; left: 0; right: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="right"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="top"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
	.foxco-ah-drawer--close-mirror[data-pos-tablet="bottom"] .foxco-ah-drawer__close {
		bottom: 0; right: 0; top: auto; left: auto;
		width: var(--foxco-ah-size-tablet);
		height: var(--foxco-ah-size-tablet);
	}
}

@media (min-width: 1025px) {
	.foxco-ah-drawer--close-mirror[data-pos-desktop="left"] .foxco-ah-drawer__close {
		top: 0; left: 0; right: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="right"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="top"] .foxco-ah-drawer__close {
		top: 0; right: 0; left: auto; bottom: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
	.foxco-ah-drawer--close-mirror[data-pos-desktop="bottom"] .foxco-ah-drawer__close {
		bottom: 0; right: 0; top: auto; left: auto;
		width: var(--foxco-ah-size-desktop);
		height: var(--foxco-ah-size-desktop);
	}
}

.foxco-ah-drawer--close-mirror .foxco-ah-drawer__close {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.foxco-ah-drawer__close:hover,
.foxco-ah-drawer__close:focus-visible { color: var(--foxco-ah-icon-hover); }

/* Drawer layout */
.foxco-ah-drawer__inner {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px);
}
@media (min-width: 768px) {
	.foxco-ah-drawer__inner { padding: var(--foxco-ah-drawer-padding-tablet, var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px)); }
}
@media (min-width: 1025px) {
	.foxco-ah-drawer__inner { padding: var(--foxco-ah-drawer-padding-desktop, var(--foxco-ah-drawer-padding-tablet, var(--foxco-ah-drawer-padding-mobile, 80px 24px 40px))); }
}

.foxco-ah-drawer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	width: 100%;
	max-width: 1200px;
}

@media (min-width: 640px) {
	.foxco-ah-drawer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (min-width: 1024px) {
	.foxco-ah-drawer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 56px; }
}

.foxco-ah-drawer__heading {
	color: var(--foxco-ah-drawer-heading);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.foxco-ah-drawer__links,
.foxco-ah-drawer__menu,
.foxco-ah-drawer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.foxco-ah-drawer__links li,
.foxco-ah-drawer__menu li { margin: 0 0 10px; }

.foxco-ah-drawer__links a,
.foxco-ah-drawer__menu a,
.foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	color: var(--foxco-ah-drawer-link);
	text-decoration: none;
	display: inline-block;
	transition: color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease, text-decoration-color var(--foxco-ah-speed) ease;
}

.foxco-ah-drawer__links a:hover,
.foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	color: var(--foxco-ah-drawer-link-hover);
	outline: none;
}

/* Hover effect variants */
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-slide .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	transform: translateX(6px);
}

.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a) {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-underline .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	text-decoration-color: currentColor;
}

.foxco-ah-drawer--hover-scale .foxco-ah-drawer__links a:hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__menu a:hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):hover,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__links a:focus-visible,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__menu a:focus-visible,
.foxco-ah-drawer--hover-scale .foxco-ah-drawer__col a:not(.foxco-ah-drawer__social a):focus-visible {
	transform: scale(1.08);
	transform-origin: left center;
}

/* hover-none: no transform, only color change (already applied above) */

.foxco-ah-drawer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--foxco-ah-social-gap, 16px);
}

/* Circled style (default) */
.foxco-ah-drawer__social a {
	color: var(--foxco-ah-social-color, var(--foxco-ah-drawer-link));
	font-size: var(--foxco-ah-social-size, 24px);
	width: calc(var(--foxco-ah-social-size, 24px) + 20px);
	height: calc(var(--foxco-ah-social-size, 24px) + 20px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--foxco-ah-border);
	transition: color var(--foxco-ah-speed) ease, border-color var(--foxco-ah-speed) ease, transform var(--foxco-ah-speed) ease;
}

.foxco-ah-drawer__social a:hover,
.foxco-ah-drawer__social a:focus-visible {
	color: var(--foxco-ah-social-hover, var(--foxco-ah-drawer-link-hover));
	border-color: var(--foxco-ah-social-hover, var(--foxco-ah-drawer-link-hover));
	transform: translateY(-2px);
	outline: none;
}

/* Flat style - no border, no circle, just the icon */
.foxco-ah-drawer__social[data-style="flat"] a {
	width: auto;
	height: auto;
	padding: 6px;
	border: 0;
	border-radius: 0;
}

.foxco-ah-drawer__social[data-style="flat"] a:hover,
.foxco-ah-drawer__social[data-style="flat"] a:focus-visible {
	border: 0;
	transform: translateY(-2px);
}

/* Custom SVG icon containers */
.foxco-ah-drawer__social .foxco-ah-svg-icon,
.foxco-ah-drawer__social .foxco-ah-svg-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: inherit;
}

.foxco-ah-drawer__social .foxco-ah-svg-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.foxco-ah-drawer__social .foxco-ah-svg-img {
	width: var(--foxco-ah-social-size, 24px);
	height: var(--foxco-ah-social-size, 24px);
	object-fit: contain;
}

/* Also make toggle/close buttons scale uploaded SVGs nicely */
.foxco-ah__btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.foxco-ah-drawer__html { color: var(--foxco-ah-drawer-heading); font-size: 16px; line-height: 1.6; }
.foxco-ah-drawer__html a { color: var(--foxco-ah-drawer-link); }
.foxco-ah-drawer__html a:hover { color: var(--foxco-ah-drawer-link-hover); }

/* ==========================================================================
   Body lock when drawer is open
   ========================================================================== */

body.foxco-ah-locked { overflow: hidden; }

/* ==========================================================================
   Utilities & reduced motion
   ========================================================================== */

.foxco-ah-sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.foxco-ah, .foxco-ah *, .foxco-ah-drawer, .foxco-ah-drawer * {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   Elementor editor - show drawer inline for preview when toggle is clicked
   (no behavioral change; JS handles it everywhere)
   ========================================================================== */

.elementor-editor-active .foxco-ah { /* keep normal behavior */ }