/* Atomik header + menu (Cinematic). Loaded only when the design is on (option ac_design_home_live or ?ac_preview=1).
 * Markup is Astra's own header builder; this file only restyles it. All rules start with body.ac-d-header. */

body.ac-d-header {
	--acd-bg: #0b0a10;
	--acd-surface: #16141f;
	--acd-text: #fff;
	--acd-muted: #bdb8cc;
	--acd-accent: #FB5FAB;
	--acd-accent-ink: #14060d;
	--acd-border: rgba(255, 255, 255, .14);
}

/* Bar: soft dark gradient so the logo and menu stay legible over any hero. */
body.ac-d-header #masthead { z-index: 20; }
body.ac-d-header.ast-theme-transparent-header #masthead .main-header-bar,
body.ac-d-header.ast-theme-transparent-header #masthead .ast-primary-header-bar {
	background: linear-gradient(180deg, rgba(11, 10, 16, .78) 0%, rgba(11, 10, 16, .38) 62%, rgba(11, 10, 16, 0) 100%);
	border-bottom: 0;
}
body.ac-d-header:not(.ast-theme-transparent-header) #masthead .main-header-bar { background: var(--acd-bg); border-bottom: 1px solid var(--acd-border); }

/* Focus ring (keyboard) */
body.ac-d-header #masthead a:focus-visible,
body.ac-d-header #masthead button:focus-visible { outline: 2px solid var(--acd-accent) !important; outline-offset: 3px; border-radius: 999px; }

/* ---------- Desktop menu ---------- */
@media (min-width: 922px) {
	body.ac-d-header #ast-desktop-header .main-header-menu { align-items: center; gap: 2px; flex-wrap: nowrap; }
	body.ac-d-header #ast-desktop-header .main-header-menu > li > .menu-link { white-space: nowrap; }
	body.ac-d-header #ast-desktop-header .main-header-menu > li { margin: 0; }
	body.ac-d-header #ast-desktop-header .main-header-menu > li > .menu-link {
		display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
		font-family: Manrope, Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em;
		color: var(--acd-text); line-height: 1; position: relative;
		transition: color .15s ease, background-color .15s ease;
	}
	body.ac-d-header #ast-desktop-header .main-header-menu > li:not(.ac-menu-cta) > .menu-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
	/* Active page: pink dot under the label. */
	body.ac-d-header #ast-desktop-header .main-header-menu > li.current-menu-item:not(.ac-menu-cta) > .menu-link,
	body.ac-d-header #ast-desktop-header .main-header-menu > li.current-menu-ancestor > .menu-link { color: var(--acd-accent); }
	body.ac-d-header #ast-desktop-header .main-header-menu > li.current-menu-item:not(.ac-menu-cta) > .menu-link::after,
	body.ac-d-header #ast-desktop-header .main-header-menu > li.current-menu-ancestor > .menu-link::after {
		content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--acd-accent);
		box-shadow: 0 0 10px var(--acd-accent);
	}
	/* Mobile-only "Sign Up" stays hidden on desktop (Astra does it); CTA button: Listen. */
	body.ac-d-header #ast-desktop-header .main-header-menu > li.ac-menu-cta { margin-left: 10px; }
	body.ac-d-header #ast-desktop-header .main-header-menu > li.ac-menu-cta > .menu-link {
		gap: 8px; padding: 0 20px; background: var(--acd-accent); color: var(--acd-accent-ink); letter-spacing: .06em;
		box-shadow: 0 0 0 0 rgba(251, 95, 171, .5);
		transition: filter .15s ease, transform .15s ease, box-shadow .2s ease;
	}
	body.ac-d-header #ast-desktop-header .main-header-menu > li.ac-menu-cta > .menu-link:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(251, 95, 171, .45); color: var(--acd-accent-ink); }
	body.ac-d-header .ac-menu-cta svg { width: 16px; height: 16px; flex: none; display: block; }
	body.ac-d-header .ac-menu-cta > .menu-link span { display: inline; }

	/* Social icons: monochrome, 44px targets, pink on hover (replaces the five brand colors). */
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap { margin-left: 8px; }
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap { flex: none; min-width: 0; }
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap .header-social-inner-wrap { gap: 0; flex-wrap: nowrap; }
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap .header-social-item {
		display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 44px; margin: 0 !important; padding: 0;
		color: var(--acd-muted) !important; background: transparent !important; border-radius: 999px; transition: color .15s ease;
	}
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap .header-social-item:hover { color: var(--acd-accent) !important; }
	body.ac-d-header #ast-desktop-header .ast-header-social-wrap .header-social-item svg { fill: currentColor !important; width: 18px; height: 18px; }
}
/* Narrow desktop (922-1279px): the extra button needs room, so tighten and drop the social row (still in the footer + home). */
@media (min-width: 922px) and (max-width: 1279px) {
	body.ac-d-header #ast-desktop-header .main-header-menu > li > .menu-link { padding: 0 9px; letter-spacing: .05em; }
	body.ac-d-header #ast-desktop-header .main-header-menu > li.ac-menu-cta > .menu-link { padding: 0 14px; }
	body.ac-d-header #ast-desktop-header .ast-header-social-1-wrap { display: none; }
}

/* Existing "Sign Up" header button becomes the secondary (outline) action next to the pink Listen button. */
@media (min-width: 922px) {
	body.ac-d-header #ast-desktop-header .ast-header-button-1 .ast-custom-button {
		display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; white-space: nowrap;
		background: transparent; color: #fff; border: 2px solid var(--acd-border); border-radius: 999px;
		font-family: Manrope, Inter, system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
		transition: border-color .15s ease, color .15s ease, background-color .15s ease;
	}
	body.ac-d-header #ast-desktop-header .ast-header-button-1 .ast-custom-button:hover { background: rgba(255, 255, 255, .08); border-color: var(--acd-accent); color: #fff; }
}
@media (min-width: 922px) and (max-width: 1279px) {
	body.ac-d-header #ast-desktop-header .ast-header-button-1 .ast-custom-button { padding: 0 14px; }
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 921px) {
	body.ac-d-header #masthead .menu-toggle {
		min-width: 48px; min-height: 48px; border-radius: 14px; border: 1px solid var(--acd-border) !important;
		background: rgba(22, 20, 31, .7) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center;
	}
	body.ac-d-header #masthead .menu-toggle svg { fill: currentColor; }
	body.ac-d-header .ast-mobile-header-content {
		background: var(--acd-bg); border-top: 1px solid var(--acd-border); padding: 8px 16px 20px;
		box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
	}
	body.ac-d-header #ast-hf-mobile-menu { display: flex; flex-direction: column; background: transparent !important; }
	body.ac-d-header #ast-hf-mobile-menu > li { order: 0; }
	body.ac-d-header #ast-hf-mobile-menu > li.ac-menu-cta { order: 98; }
	body.ac-d-header #ast-hf-mobile-menu > li.mobile-only { order: 99; }
	body.ac-d-header #ast-hf-mobile-menu > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	body.ac-d-header #ast-hf-mobile-menu > li > .menu-link {
		display: flex; align-items: center; min-height: 56px; padding: 0 4px; border: 0;
		font-family: Manrope, Inter, system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #fff; background: transparent;
	}
	body.ac-d-header #ast-hf-mobile-menu > li > .menu-link:hover,
	body.ac-d-header #ast-hf-mobile-menu > li > .menu-link:active { color: var(--acd-accent); background: transparent; }
	body.ac-d-header #ast-hf-mobile-menu > li.current-menu-item:not(.ac-menu-cta) > .menu-link { color: var(--acd-accent); }
	body.ac-d-header #ast-hf-mobile-menu > li.current-menu-item:not(.ac-menu-cta) > .menu-link::before {
		content: ""; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--acd-accent); box-shadow: 0 0 10px var(--acd-accent);
	}
	/* Sign Up (existing mobile-only item): secondary outline button. Listen: primary button. Both full width. */
	body.ac-d-header #ast-hf-mobile-menu > li.mobile-only,
	body.ac-d-header #ast-hf-mobile-menu > li.ac-menu-cta { border-bottom: 0; padding-top: 14px; }
	body.ac-d-header #ast-hf-mobile-menu > li.mobile-only > .menu-link,
	body.ac-d-header #ast-hf-mobile-menu > li.ac-menu-cta > .menu-link {
		justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; padding: 0 20px; letter-spacing: .04em;
	}
	body.ac-d-header #ast-hf-mobile-menu > li.mobile-only > .menu-link { border: 2px solid var(--acd-border); color: #fff; }
	body.ac-d-header #ast-hf-mobile-menu > li.ac-menu-cta > .menu-link { background: var(--acd-accent); color: var(--acd-accent-ink); border: 2px solid var(--acd-accent); }
	body.ac-d-header #ast-hf-mobile-menu > li.ac-menu-cta > .menu-link:hover { color: var(--acd-accent-ink); background: var(--acd-accent); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	body.ac-d-header #masthead * { transition: none !important; }
}