/* =============================================================================
   asc-header.css: announcement marquee, header icon cluster, hamburger drawer.

   Printed at wp_head 111, i.e. after asc-ui.css (110) and after the Customizer
   blob (101), so equal-specificity ties come to us and !important is only used
   where the thing being beaten already used it. Everything is scoped under
   .asc-ui for the (0,2,0) specificity lever, same as asc-ui.css.

   SCOPE NOTE: colours for .header-counter / .header-cart__counter are owned by
   asc-ui.css (gold fill, black ink, measured 9.7:1). Nothing here touches them,
   only the geometry of the badge.

   HARD RULE OBSERVED: no substring class selectors anywhere in this file.
   [class*="..."] once matched the product grid <ul> and blanked the catalogue.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Announcement marquee

   Structure and icon geometry ported from Evo Aminoz's .anno bar. Evo used a
   solid brand-blue band specifically so the bar could never blend into the black
   header; Ascension's equivalent brand surface is the gold, so the band is gold
   with black ink. Contrast is the same pairing asc-ui.css already measured on
   the gold button system: 8.24:1 at the lightest stop, 6.12:1 at the darkest.

   The gradient is re-declared at 90deg rather than reusing --asc-gold-grad
   (135deg). Across a ~1400x36 band a 135deg ramp resolves almost vertically and
   reads as a muddy horizontal seam; 90deg keeps the same three stops travelling
   along the bar instead of across it.
   -------------------------------------------------------------------------- */
.asc-ui .asc-anno {
	background: linear-gradient(90deg, var(--asc-gold-1) 0%, var(--asc-gold-2) 50%, var(--asc-gold-3) 100%);
	border-bottom: 1px solid rgba(0, 0, 0, .30);
	position: relative;
	overflow: hidden;
	width: 100%;
	line-height: 1;
}

.asc-ui .asc-anno-marquee {
	overflow: hidden;
	width: 100%;
}

.asc-ui .asc-anno-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: asc-anno-scroll 55s linear infinite;
}

/* Pause on hover so a claim can actually be read. */
.asc-ui .asc-anno:hover .asc-anno-track {
	animation-play-state: paused;
}

.asc-ui .asc-anno-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.asc-ui .asc-anno-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 0;
	color: var(--asc-gold-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.asc-ui .asc-anno-item svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--asc-gold-ink);
}

.asc-ui .asc-anno-item b {
	font-weight: 800;
}

.asc-ui .asc-anno-dot {
	display: inline-flex;
	align-items: center;
	color: rgba(0, 0, 0, .42);
	font-size: 11px;
	padding: 0 clamp(20px, 2.4vw, 34px);
}

@keyframes asc-anno-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: hold still and centre the first group; the duplicate exists
   only to make the loop seamless, so it is removed rather than left clipped. */
@media (prefers-reduced-motion: reduce) {
	.asc-ui .asc-anno-track {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.asc-ui .asc-anno-group:nth-child(2) { display: none; }
	.asc-ui .asc-anno-group { flex-wrap: wrap; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   2. Header icon cluster

   Measured before: search 40x40, cart 40x40, hamburger 42x25 with an asymmetric
   padding of 2px 20px 0 0. The hamburger was therefore both the odd one out and
   the only control in the cluster under 40px tall. Normalised to the 40x40 the
   other two already measure, so the cluster is uniform and the tap target is a
   real box rather than a 25px sliver.
   -------------------------------------------------------------------------- */
.asc-ui .site-header__mobile .header-hamburger,
.asc-ui .site-header__mobile .header-search__icon,
.asc-ui .site-header__mobile .header-account__icon,
.asc-ui .site-header__mobile .header-cart {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--asc-text);
	background-color: transparent;
	transition: color .16s ease;
}

/* Hover is a COLOUR SHIFT ONLY, no tinted plate behind the glyph.
   An earlier pass washed a gold panel in on hover and rounded the corners,
   which read as a button appearing out of nowhere under the icon. The
   reference does not do that: .icon-btn is background:none with
   .icon-btn:hover { color:#fff } and nothing else.

   glozin's base.min.css carries blanket .gz-button:hover and a:hover colour
   rules. These selectors are ID-free but carry four classes plus the .asc-ui
   lever, so they win on specificity without !important. */
.asc-ui .site-header__mobile .header-hamburger:hover,
.asc-ui .site-header__mobile .header-search__icon:hover,
.asc-ui .site-header__mobile .header-account__icon:hover,
.asc-ui .site-header__mobile .header-cart:hover {
	color: var(--asc-gold);
	background-color: transparent;
}

/* NO OUTLINE BOX ON THESE ICONS, EVER.
   A 2px gold ring at 2px offset used to sit here for keyboard focus, and it was
   showing as a square outline after an ordinary mouse click on the hamburger.
   Focus is indicated with the same gold the icons take on hover, so there is
   still a visible focus state and never a stray box. */
.asc-ui .site-header__mobile .header-hamburger:focus,
.asc-ui .site-header__mobile .header-search__icon:focus,
.asc-ui .site-header__mobile .header-account__icon:focus,
.asc-ui .site-header__mobile .header-cart:focus,
.asc-ui .site-header__mobile .header-hamburger:focus-visible,
.asc-ui .site-header__mobile .header-search__icon:focus-visible,
.asc-ui .site-header__mobile .header-account__icon:focus-visible,
.asc-ui .site-header__mobile .header-cart:focus-visible {
	outline: none;
	box-shadow: none;
}

.asc-ui .site-header__mobile .header-hamburger:focus-visible,
.asc-ui .site-header__mobile .header-search__icon:focus-visible,
.asc-ui .site-header__mobile .header-account__icon:focus-visible,
.asc-ui .site-header__mobile .header-cart:focus-visible {
	color: var(--asc-gold);
}

/* The account anchor is wrapped in a .header-account div that also carries the
   .header-account class; the wrapper must not inherit the 40x40 box. */
.asc-ui .site-header__mobile div.header-account {
	width: auto;
	height: auto;
}

/* Evo's cart glyph, rendered inline by template-parts/header/cart.php. glozin's
   .glozin-svg-icon sizing was shrinking it to 20px; the reference draws it at
   22x22, so it is pinned to that. */
.asc-ui .site-header__mobile .header-cart .asc-cart-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* THE GLYPH IS AN OUTLINE, NOT A SOLID.
   glozin paints its sprite icons with a `fill: currentColor` rule on
   .glozin-svg-icon svg, and a CSS fill beats the fill="none" presentation
   attribute on the markup, so the reference's outline cart was rendering as a
   filled black blob. Restated here on the svg and on its children, since the
   circles and path inherit the fill too. */
.asc-ui .site-header__mobile .header-cart .asc-cart-icon svg,
.asc-ui .site-header__mobile .header-cart .asc-cart-icon svg path,
.asc-ui .site-header__mobile .header-cart .asc-cart-icon svg circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* An empty cart showed a gold badge reading "0". The class below is written by
   asc-header.js from the number actually rendered, NOT glozin's .empty-counter,
   which asc-ui.js never clears. Hiding on that class would hide the badge for
   good after the first add-to-cart. */
.asc-ui .site-header__mobile .header-cart__counter.asc-cart-empty {
	display: none;
}

/* Cart badge geometry, matched to the reference's .cart-count. Fill and ink
   stay with asc-ui.css.

   Reference, measured: min-width 16, height 16, padding 0 4, 10px/700,
   top -4 / right -6 against a 34x34 button holding a 22x22 glyph, which lands
   the badge +12 right and -10 above the glyph's own corner. glozin's counter
   wraps the glyph directly rather than a padded button, so the offsets are
   restated against the glyph to reach the same place. Was 18x18 sitting at
   top 5 / right 0, which read as a fat disc pushed down into the cart. */
.asc-ui .site-header__mobile .header-cart__counter {
	position: absolute;
	/* Measured, not guessed: glozin's .header-counter-content extends 9px past
	   the glyph on each side, so the reference's -4/-6 (which it sets against a
	   padded button) resolve to -1/-3 here to land the badge in the same place,
	   +12 right and -10 above the glyph corner. */
	top: -1px;
	right: -3px;
	min-width: 16px;
	width: auto;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--asc-r-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 10px;
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   3. Navigation drawer

   Replicated from Evo Aminoz, against values MEASURED off the live reference
   with the drawer open, not read off a screenshot:

     .main-nav    absolute, top:100%, bg #08090c, padding 6px 0,
                  border-bottom 1px rgba(255,255,255,.1),
                  translateY(-8px) -> 0, opacity 0 -> 1, .2s ease,
                  max-height calc(100vh - 108px), overflow-y auto
     .main-nav a  block, padding 18px 24px, 15px / 600 / .04em, uppercase,
                  #fff, measured row height 59px
     underline    2px bar, inset left:24px width:calc(100% - 48px) bottom:6px,
                  scaleX(0) -> scaleX(1), .22s cubic-bezier(.4,0,.2,1)

   TWO DELIBERATE SUBSTITUTIONS, because this drawer has to live on Ascension
   and not on Evo:
     - the underline bar is Ascension gold, where the reference is Evo blue.
     - the family is the site's own Instrument Sans, where the reference is
       Space Grotesk. Every metric above (size, weight, tracking, case, padding,
       row height) is the reference's exactly.
   -------------------------------------------------------------------------- */
/* THE HEADER HAS TO OUTRANK PAGE CONTENT, or the drawer is unusable.
   #site-header ships at z-index 11 and is position:relative, so it opens a
   stacking context: any z-index on the drawer inside it is capped at 11 against
   the rest of the page. Measured competitors that were painting straight through
   the open drawer on /affiliate-page/: .asc-hvial--hero at 20 and
   .asc-hvial--mid at 15.

   60 is the reference's own .site-header value, and it lands in the right slot
   in this site's existing stack: above page content, still below the search
   overlay (130) and the cart drawer (140), which are meant to cover the header.
   Set on the sticky child too, because headroom promotes that node to fixed on
   scroll and it would otherwise open a stacking context of its own. */
.asc-ui #site-header,
.asc-ui .site-header__mobile {
	z-index: 60;
}

.asc-ui .asc-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	/* The reference paints this #08090c, one step off its #050505 header. This
	   header is pure black, so #08090c read as a visibly lighter slab hanging
	   off it: two shades of black stacked. Matched to the header instead, and
	   the panel is separated by its hairline edges, not by a fill difference. */
	background: var(--asc-black);
	border-bottom: 1px solid var(--asc-line);
	padding: 6px 0;
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
}

.asc-ui.asc-nav-open .asc-nav {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.asc-ui .asc-nav ul {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asc-ui .asc-nav li {
	margin: 0;
	border: 0;
	background: none;
}

.asc-ui .asc-nav a {
	display: block;
	position: relative;
	padding: 18px 24px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	/* 23px line box, measured. With 18px padding top and bottom that is the
	   reference's 59px row exactly. Left to inherit it would be 26px here
	   (Ascension's body line-height is 1.714) and the rows would run tall. */
	line-height: 23px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

/* The reference's animated underline, inset under the text. It fires on :active
   and :focus as well as :hover so it still reads on a touch screen. */
.asc-ui .asc-nav a::before {
	content: "";
	position: absolute;
	display: block;
	left: 24px;
	right: auto;
	width: calc(100% - 48px);
	bottom: 6px;
	height: 2px;
	background: var(--asc-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.asc-ui .asc-nav a:hover,
.asc-ui .asc-nav a:active {
	color: #fff;
}

.asc-ui .asc-nav a:hover::before,
.asc-ui .asc-nav a:active::before,
.asc-ui .asc-nav a:focus::before,
.asc-ui .asc-nav .current-menu-item > a::before,
.asc-ui .asc-nav .current_page_item > a::before {
	transform: scaleX(1);
}

/* Submenu accordion. The "+" and the collapse only exist when the WP menu
   actually has children, exactly as on the reference, so nothing is invented
   for menus that are flat. */
.asc-ui .asc-nav .menu-item-has-children > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.asc-ui .asc-nav .menu-item-has-children > a::after {
	content: "+";
	margin-left: 0;
	font-size: 18px;
	opacity: .85;
	transition: transform .2s ease;
}

.asc-ui .asc-nav .menu-item-has-children.asc-open > a::after {
	transform: rotate(45deg);
}

.asc-ui .asc-nav .sub-menu {
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	border: 0;
	background: rgba(255, 255, 255, .02);
	min-width: 0;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 20px;
	transition: max-height .3s ease;
}

.asc-ui .asc-nav .menu-item-has-children.asc-open > .sub-menu {
	max-height: 520px;
}

.asc-ui .asc-nav .sub-menu a {
	padding: 12px 24px;
}

.asc-ui .asc-nav .sub-menu a::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.asc-ui .asc-nav { transition: opacity .01s; }
	.asc-ui .asc-nav a::before { transition: none; }
}

/* ==========================================================================
   Announcement bar, round 3: the Neuro Labs treatment
   Neuro Labs reads clean because their PAGE is light, so a dark saturated bar
   separates from it. Ascension's page is black, so my round-1 dark bar
   vanished, and the bright gold + black ink of round 2 was heavy.

   Answer: a deep BRONZE gold. Still the brand colour, clearly not the page,
   and dark enough to carry white text like Neuro Labs does.
   White on #8a6d22 measures 4.90:1 (AA). White on the light gold #c9a449 was
   2.55:1, which is why white was impossible before.

   Type follows Neuro Labs: 13px, weight 600, and the key phrase in each item
   at 800 so the eye lands on the claim rather than the whole line shouting.
   ========================================================================== */
.asc-ui .asc-anno {
	background: linear-gradient(90deg, #7a5f1c 0%, #8a6d22 50%, #7a5f1c 100%) !important;
	border-top: 1px solid rgba(224,192,112,.45) !important;
	border-bottom: 1px solid rgba(0,0,0,.5) !important;
	box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.asc-ui .asc-anno-item {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	padding: 11px 0 !important;
}
.asc-ui .asc-anno-item b {
	color: #ffffff !important;
	font-weight: 800 !important;
}
.asc-ui .asc-anno-item svg {
	color: rgba(255,255,255,.92) !important;
	width: 16px !important;
	height: 16px !important;
	stroke-width: 1.8 !important;
}

/* Separators: a real 5px dot, not an 11px bullet character. */
.asc-ui .asc-anno-dot {
	color: transparent !important;
	font-size: 0 !important;
	position: relative;
	padding: 0 clamp(22px, 2.6vw, 34px) !important;
}
.asc-ui .asc-anno-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
}

/* It scrolled at 55s, which reads as barely moving. 26s is close to the pace
   Neuro Labs and Evo run at. */
.asc-ui .asc-anno-track { animation-duration: 26s !important; }

/* -----------------------------------------------------------------------------
   3b. There is no desktop variant, on purpose.

   An earlier pass docked the drawer as a 430px right-hand panel with a MENU
   title bar and a page scrim from 1200px up, reasoning that the reference only
   ever shows the slide-down below 1200px (above that it has a real horizontal
   nav, which this site's Customizer hides outright).

   Hamza saw that panel and asked for the reference copied exactly instead, so
   the slide-down is now the only behaviour at every width. The title bar, the
   close button and the scrim are gone with it: the reference has none of them,
   and the hamburger that opened the drawer is directly above it and closes it.
   -------------------------------------------------------------------------- */