/* =====================================================================
   DigiDollar — Header / Navigation redesign            (dd-header.css)
   ---------------------------------------------------------------------
   • Desktop (>=1201px): a single floating glass "capsule" navbar —
     translucent, backdrop-blurred, gold hairline, pill links, ghost
     LOGIN + gold-gradient SIGN-UP CTA. Re-glasses on sticky/pinned.
   • Mobile  (<=1200px): glass hamburger button, blurred scrim, and a
     premium frosted side-drawer that slides in from the RTL start edge
     (right), with a gold top ribbon, staggered link reveal, leading
     gold accent bars, and full-width auth buttons.
   Additive + reversible. Consumes the site's --dd-* tokens
   (dd-widgets.css) with safe fallbacks. RTL-first. Auto dark-mode via
   html[data-dracula-scheme="dark"]. Breakpoints match the wavy theme.
   ===================================================================== */

:root {
	--ddh-bar-bg:      rgba(255, 255, 255, 0.72);
	--ddh-bar-brd:     rgba(224, 190, 0, 0.30);
	--ddh-bar-shadow:  0 18px 50px -24px rgba(25, 22, 50, 0.30);
	/* Self-contained ink/muted — NOT var(--dd-ink): that token gets flipped to a
	   dark-mode value by a prefers-color-scheme path while the drawer background
	   stays light, so text + bg disagreed. Key these on data-dracula-scheme only
	   (same trigger as --ddh-drawer-bg) → text always matches the panel. */
	--ddh-ink:         #1c1c22;
	--ddh-muted:       #6a6a76;
	--ddh-gold:        var(--dd-gold, #e0be00);
	--ddh-gold-deep:   var(--dd-gold-deep, #9a7d00);
	--ddh-grad:        var(--dd-grad, linear-gradient(135deg, #fdb837 0%, #ffbf2f 45%, #e0be00 100%));
	--ddh-tint:        rgba(224, 190, 0, 0.12);
	--ddh-tint-2:      rgba(224, 190, 0, 0.18);
	--ddh-cta-ink:     #3a2c00;
	--ddh-drawer-bg:   rgba(255, 255, 255, 0.92);
	/* sparkle glyph for the SIGN-UP CTA (inline data-URI → zero extra requests) */
	--ddh-spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%203C12.7%208%2016%2011.3%2021%2012C16%2012.7%2012.7%2016%2012%2021C11.3%2016%208%2012.7%203%2012C8%2011.3%2011.3%208%2012%203Z'/%3E%3C/svg%3E");
	/* mobile drawer row glyphs (alpha-masked → tinted via background-color) */
	--ddh-ico-buy:     url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M8.5%203a5.5%205.5%200%20100%2011%205.5%205.5%200%20000-11zm6%204a5.5%205.5%200%2000-1.7.27%207%207%200%20010%209.46A5.5%205.5%200%201014.5%207z'/%3E%3C/svg%3E");
	--ddh-ico-mag:     url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6%202h12a1%201%200%20011%201v18.2a.8.8%200%2001-1.2.7L12%2019l-5.8%202.9A.8.8%200%20015%2021.2V3a1%201%200%20011-1z'/%3E%3C/svg%3E");
	--ddh-ico-contact: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6.6%2010.8c1.4%202.8%203.8%205.2%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6a1%201%200%20011%201V20a1%201%200%2001-1%201A17%2017%200%20013%204a1%201%200%20011-1h3.5a1%201%200%20011%201c0%201.3.2%202.5.6%203.6.1.4%200%20.8-.3%201.1l-2.2%202.1z'/%3E%3C/svg%3E");
	--ddh-ico-default: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M5%205h6v6H5zM13%205h6v6h-6zM5%2013h6v6H5zM13%2013h6v6h-6z'/%3E%3C/svg%3E");
	--ddh-chevron:     url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M14.7%205.3a1%201%200%20010%201.4L9.4%2012l5.3%205.3a1%201%200%2001-1.4%201.4l-6-6a1%201%200%20010-1.4l6-6a1%201%200%20011.4%200z'/%3E%3C/svg%3E");
}

html[data-dracula-scheme="dark"] {
	--ddh-bar-bg:     rgba(26, 26, 32, 0.60);
	--ddh-bar-brd:    rgba(255, 191, 47, 0.28);
	--ddh-bar-shadow: 0 22px 60px -26px rgba(0, 0, 0, 0.72);
	--ddh-ink:        #f4f1e8;
	--ddh-muted:      #a0a0ae;
	--ddh-gold-deep:  #ffbf2f;
	--ddh-tint:       rgba(255, 191, 47, 0.13);
	--ddh-tint-2:     rgba(255, 191, 47, 0.20);
	--ddh-drawer-bg:  rgba(20, 20, 26, 0.93);
}

/* Neutralise the theme's cyan (#AEF3FF) underline-effect inside the header
   so our gold pill / accent styling reads clean in both nav contexts. */
#header .underline-effect a:not(.epcl-button),
#header .main-nav ul.menu li a,
nav.mobile.main-nav ul.menu li a {
	background-image: none !important;
}

/* =====================================================================
   DESKTOP  —  floating glass capsule  (>= 1201px)
   ===================================================================== */
@media screen and (min-width: 1201px) {

	/* float the bar just below the top edge, with side breathing room */
	#header.minimalist .grid-container { padding: 20px 16px 0 !important; }

	/* ---- the capsule shell ---- */
	#header .epcl-flex {
		display: flex !important;
		align-items: center;
		gap: clamp(6px, 1.2vw, 16px);
		padding: 9px 12px 9px 14px;
		border-radius: 999px;
		background: var(--ddh-bar-bg);
		-webkit-backdrop-filter: blur(18px) saturate(150%);
		backdrop-filter: blur(18px) saturate(150%);
		border: 1px solid var(--ddh-bar-brd);
		box-shadow: var(--ddh-bar-shadow);
		position: relative;
		transition: box-shadow .35s ease, background .35s ease;
	}
	/* soft top-rim sheen */
	#header .epcl-flex::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		        mask-composite: exclude;
		pointer-events: none;
		opacity: .7;
	}
	#header .epcl-flex > .clear { display: none; }

	/* ---- logo (RTL start = right) ---- */
	#header .logo { margin: 0 !important; padding: 0 6px !important; flex: 0 0 auto; line-height: 0; }
	#header .logo a { margin: 0 !important; display: inline-flex; transition: transform .3s ease; }
	#header .logo img {
		width: auto; height: 46px; border-radius: 50%;
		transition: box-shadow .3s ease, transform .3s ease;
	}
	#header .logo a:hover { transform: translateY(-1px); }
	#header .logo a:hover img { box-shadow: 0 0 0 3px var(--ddh-tint), 0 10px 22px -10px var(--ddh-gold); }

	/* ---- nav row ---- */
	#header nav.main-nav { flex: 1 1 auto; margin: 0 !important; text-align: inherit; }
	#header nav.main-nav ul.menu {
		display: flex !important;
		align-items: center;
		gap: 4px;
		width: 100%;
		margin: 0;
		padding: 0 !important;
		font-size: initial !important;
	}
	#header nav.main-nav ul.menu > li {
		display: flex;
		align-items: center;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
	}
	/* tidy any future dropdown caret inside the flex row */
	#header nav.main-nav ul.menu > li.menu-item-has-children { margin: 0 !important; padding-inline-end: 0 !important; }
	#header nav.main-nav ul.menu > li.menu-item-has-children::after {
		position: static; transform: none; margin-inline-start: -4px; opacity: .55;
	}

	/* plain links → pill */
	#header nav.main-nav ul.menu > li > a {
		display: inline-flex;
		align-items: center;
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		color: var(--ddh-ink) !important;
		padding: 10px 16px;
		border-radius: 999px;
		white-space: nowrap;
		transition: color .25s ease, background .25s ease, transform .2s ease;
	}
	#header nav.main-nav ul.menu > li > a:hover {
		color: var(--ddh-gold-deep) !important;
		background: var(--ddh-tint);
	}
	#header nav.main-nav ul.menu > li.current-menu-item > a {
		color: var(--ddh-gold-deep) !important;
		background: var(--ddh-tint);
	}

	/* push the two auth items to the far (inline-end / left in RTL) edge */
	#header nav.main-nav ul.menu > li:nth-last-child(2) { margin-inline-start: auto !important; }
	#header nav.main-nav ul.menu > li:nth-last-child(1) { margin-inline-start: 6px !important; }

	/* ---------- LOGIN — gradient-outline "ghost" pill ---------- */
	#header nav.main-nav ul.menu a[href*="/login"] {
		position: relative;
		isolation: isolate;
		color: var(--ddh-gold-deep) !important;
		background: transparent !important;
		border: 0 !important;
		padding: 10px 22px;
		transition: color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
	}
	/* gold gradient border (masked ring → crisp on the pill radius) */
	#header nav.main-nav ul.menu a[href*="/login"]::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1.6px;
		background: var(--ddh-grad);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		        mask-composite: exclude;
		opacity: .8;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	/* soft gold tint that fades in behind the label on hover */
	#header nav.main-nav ul.menu a[href*="/login"]::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--ddh-tint);
		opacity: 0;
		z-index: -1;
		transition: opacity .25s ease;
	}
	#header nav.main-nav ul.menu a[href*="/login"]:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 26px -14px var(--ddh-gold);
	}
	#header nav.main-nav ul.menu a[href*="/login"]:hover::before { opacity: 1; }
	#header nav.main-nav ul.menu a[href*="/login"]:hover::after  { opacity: 1; }
	#header nav.main-nav ul.menu a[href*="/login"]:active { transform: translateY(0) scale(.97); }

	/* ---------- SIGN-UP — living gold CTA (shimmer + sparkle + sheen) ---------- */
	#header nav.main-nav ul.menu a[href*="/register"] {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--ddh-cta-ink) !important;
		font-weight: 700;
		padding: 10px 22px;
		background: linear-gradient(110deg, #fdb837 0%, #ffd25c 26%, #ffbf2f 50%, #e0a300 76%, #fdb837 100%) !important;
		background-size: 220% 100%;
		box-shadow: 0 10px 24px -10px rgba(224, 190, 0, .75);
		animation: ddhGoldFlow 6s linear infinite;
		transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
	}
	/* leading sparkle that gently twinkles */
	#header nav.main-nav ul.menu a[href*="/register"]::before {
		content: "";
		flex: 0 0 auto;
		width: 15px;
		height: 15px;
		background-color: var(--ddh-cta-ink);
		-webkit-mask: var(--ddh-spark) center / contain no-repeat;
		        mask: var(--ddh-spark) center / contain no-repeat;
		animation: ddhTwinkle 2.6s ease-in-out infinite;
	}
	/* diagonal light sheen that sweeps across on hover */
	#header nav.main-nav ul.menu a[href*="/register"]::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -65%;
		width: 55%;
		background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
		transform: skewX(-18deg);
		opacity: 0;
		z-index: 2;
		pointer-events: none;
	}
	#header nav.main-nav ul.menu a[href*="/register"]:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 34px -10px rgba(224, 190, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .28);
	}
	#header nav.main-nav ul.menu a[href*="/register"]:hover::after { animation: ddhSheen .9s ease; }
	#header nav.main-nav ul.menu a[href*="/register"]:active { transform: translateY(0) scale(.97); }

	/* ---- pinned / sticky: keep the capsule, drop the white wrapper ---- */
	#header[data-stuck] .menu-wrapper {
		background: transparent !important;
		box-shadow: none !important;
		padding: 10px 0 !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	#header[data-stuck] .grid-container { padding: 0 16px !important; }
	#header[data-stuck] .epcl-flex {
		background: var(--ddh-bar-bg);
		box-shadow: var(--ddh-bar-shadow), 0 0 0 1px var(--ddh-bar-brd);
		animation: ddhPinDown .45s cubic-bezier(.2, .7, .2, 1) both;
	}
	@keyframes ddhPinDown {
		from { transform: translateY(-8px); opacity: .55; }
		to   { transform: none; opacity: 1; }
	}
}

/* shared CTA motion — used by the desktop capsule + the mobile drawer.
   All transform/opacity/background-position only → GPU-friendly, no layout. */
@keyframes ddhGoldFlow { 0% { background-position: 0% 50%; }   100% { background-position: -220% 50%; } }
@keyframes ddhTwinkle  { 0%, 100% { opacity: .6; transform: scale(.82) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes ddhSheen    { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(320%); } }

/* =====================================================================
   MOBILE / TABLET  —  glass drawer  (<= 1200px)
   ===================================================================== */
@media screen and (max-width: 1200px) {

	/* ---- top-bar logo: keep the natural 1:1 ratio on mobile too ----
	   The desktop rule (min-width:1201px) sets height/width:auto; without a
	   mobile counterpart the bar logo fell back to its raw width=50 height=140
	   HTML attributes and rendered squished (Lighthouse: wrong aspect ratio).
	   width:auto lets the browser derive width from the real 140x140 image. */
	#header .logo img {
		width: auto !important;
		height: 40px;
		border-radius: 50%;
	}

	/* ---- hamburger → glass button ---- */
	#header .menu-mobile {
		width: 46px; height: 46px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		background: var(--ddh-bar-bg);
		-webkit-backdrop-filter: blur(12px) saturate(150%);
		backdrop-filter: blur(12px) saturate(150%);
		border: 1px solid var(--ddh-bar-brd);
		box-shadow: var(--ddh-bar-shadow);
		transition: transform .25s ease, box-shadow .25s ease;
	}
	#header .menu-mobile:active { transform: scale(.93); }
	#header .menu-mobile svg {
		width: 24px !important; height: 24px !important;
		fill: var(--ddh-gold-deep) !important;
		filter: none !important;
	}

	/* ---- overlay → blurred scrim ---- */
	div.menu-overlay {
		background: rgba(8, 8, 16, .50) !important;
		-webkit-backdrop-filter: blur(7px) saturate(120%);
		backdrop-filter: blur(7px) saturate(120%);
		z-index: 2147483640 !important;
	}
	body.menu-open div.menu-overlay { opacity: 1 !important; }
	body.menu-open { overflow: hidden; }

	/* While the drawer is open, get the floating CTAs out of the way — the panel
	   FAB (#dd-panel-fab, z 9990), the occasion badge (#ddcel-badge) and the
	   dark-mode toggle (.dracula-toggle-wrap, z 9999999999) otherwise punch
	   through and cover the drawer's account buttons. Hide + de-pointer them. */
	body.menu-open #dd-panel-fab,
	body.menu-open #ddcel-badge,
	body.menu-open .dracula-toggle-wrap {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: opacity .2s ease, visibility .2s ease;
	}

	/* ---- drawer panel (slides from the RTL start edge = right) ---- */
	nav.mobile.main-nav {
		left: auto !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		height: 100% !important;
		width: min(86vw, 360px) !important;
		padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
		box-sizing: border-box;
		background: var(--ddh-drawer-bg) !important;
		-webkit-backdrop-filter: blur(26px) saturate(160%);
		backdrop-filter: blur(26px) saturate(160%);
		border-inline-start: 1px solid var(--ddh-bar-brd);
		border-radius: 26px 0 0 26px;
		box-shadow: -30px 0 60px -30px rgba(8, 8, 20, .5);
		transform: translateX(110%) !important;
		transition: transform .42s cubic-bezier(.22, .8, .26, 1), opacity .3s ease !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		text-align: right !important;
		display: flex !important;
		flex-direction: column;
		z-index: 2147483646 !important;
	}
	body.menu-open nav.mobile.main-nav {
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	/* gold ribbon across the drawer top */
	nav.mobile.main-nav::before {
		content: "";
		position: absolute;
		inset-inline: 0; top: 0;
		height: 4px;
		background: var(--ddh-grad);
	}

	/* ---- drawer header: logo + brand lockup ---- */
	nav.mobile.main-nav .logo {
		flex: 0 0 auto;
		text-align: right !important;
		margin: 0 !important;
		padding: 2px 4px 16px !important;
		border-bottom: 1px solid var(--ddh-bar-brd);
	}
	nav.mobile.main-nav .logo a {
		display: inline-flex !important;
		align-items: center;
		gap: 12px;
		text-decoration: none;
	}
	/* logo image removed from the open drawer (user request) — keep the brand
	   wordmark as a clean text header. */
	nav.mobile.main-nav .logo img { display: none !important; }
	nav.mobile.main-nav .logo a::after {
		content: "دیجی دلار";
		font-size: 20px;
		font-weight: 800;
		line-height: 1.1;
		color: var(--ddh-ink);
		letter-spacing: .2px;
	}

	/* ---- link list: structured icon rows ---- */
	nav.mobile.main-nav ul.menu {
		flex: 1 1 auto;
		display: flex !important;
		flex-direction: column;
		margin: 16px 0 0;
		padding: 0;
		font-size: initial !important;
	}
	nav.mobile.main-nav ul.menu > li {
		display: block !important;
		margin: 3px 0 !important;
		padding: 0 !important;
		/* slide-only entrance (NO opacity fade — the fade caught later rows
		   mid-animation and made their dark text read as faint gray). */
		transform: translateX(14px);
		transition: transform .42s cubic-bezier(.22, .8, .26, 1);
	}
	body.menu-open nav.mobile.main-nav ul.menu > li { transform: none; }
	/* staggered reveal */
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(1) { transition-delay: .05s; }
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(2) { transition-delay: .10s; }
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(3) { transition-delay: .15s; }
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(4) { transition-delay: .20s; }
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(5) { transition-delay: .25s; }
	body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(6) { transition-delay: .30s; }

	nav.mobile.main-nav ul.menu > li > a {
		display: flex;
		align-items: center;
		gap: 14px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.25;
		color: var(--ddh-ink) !important;
		padding: 12px 14px;
		border-radius: 15px;
		transition: background .2s ease, color .2s ease, box-shadow .2s ease;
	}
	/* leading row icon (per-item glyph; falls back to an apps grid) */
	nav.mobile.main-nav ul.menu > li > a::before {
		content: "";
		flex: 0 0 auto;
		width: 23px; height: 23px;
		background-color: var(--ddh-gold-deep);
		-webkit-mask: var(--ddh-ico, var(--ddh-ico-default)) center / contain no-repeat;
		        mask: var(--ddh-ico, var(--ddh-ico-default)) center / contain no-repeat;
		opacity: .9;
		transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
	}
	/* trailing chevron → affordance (points to RTL "forward" = left) */
	nav.mobile.main-nav ul.menu > li > a::after {
		content: "";
		flex: 0 0 auto;
		margin-inline-start: auto;
		width: 15px; height: 15px;
		background-color: var(--ddh-muted);
		-webkit-mask: var(--ddh-chevron) center / contain no-repeat;
		        mask: var(--ddh-chevron) center / contain no-repeat;
		opacity: .42;
		transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
	}
	/* per-item icon assignment (graceful: no match → apps-grid default) */
	nav.mobile.main-nav ul.menu > li.menu-item-home > a { --ddh-ico: var(--ddh-ico-buy); }
	nav.mobile.main-nav ul.menu > li > a[href*="/mag"]     { --ddh-ico: var(--ddh-ico-mag); }
	nav.mobile.main-nav ul.menu > li > a[href*="/contact"] { --ddh-ico: var(--ddh-ico-contact); }

	nav.mobile.main-nav ul.menu > li > a:hover,
	nav.mobile.main-nav ul.menu > li.current-menu-item > a {
		background: var(--ddh-tint);
		color: var(--ddh-gold-deep) !important;
		box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
	}
	nav.mobile.main-nav ul.menu > li > a:hover::before,
	nav.mobile.main-nav ul.menu > li.current-menu-item > a::before { opacity: 1; transform: scale(1.06); }
	nav.mobile.main-nav ul.menu > li > a:hover::after,
	nav.mobile.main-nav ul.menu > li.current-menu-item > a::after { opacity: .85; background-color: var(--ddh-gold-deep); transform: translateX(-3px); }

	/* ---- account actions → pinned to the drawer bottom, divided from links ---- */
	nav.mobile.main-nav ul.menu > li:nth-last-child(2) {
		margin-top: auto !important;
		padding-top: 20px !important;
		border-top: 1px solid var(--ddh-bar-brd);
	}
	nav.mobile.main-nav ul.menu > li:nth-last-child(1) { margin-top: 11px !important; }
	nav.mobile.main-nav ul.menu a[href*="/login"],
	nav.mobile.main-nav ul.menu a[href*="/register"] {
		justify-content: center;
		text-align: center;
		padding: 15px 18px !important;
		font-weight: 700;
		font-size: 16px;
	}
	nav.mobile.main-nav ul.menu a[href*="/login"]::before { display: none; }
	/* login button: no leading icon, no trailing chevron */
	nav.mobile.main-nav ul.menu a[href*="/login"]::after  { display: none; }
	nav.mobile.main-nav ul.menu a[href*="/register"]::after { margin-inline-start: 0; }
	nav.mobile.main-nav ul.menu a[href*="/login"] {
		border: 1.5px solid var(--ddh-bar-brd);
		color: var(--ddh-gold-deep) !important;
		background: transparent !important;
		transition: transform .2s ease, border-color .2s ease, background .2s ease;
	}
	nav.mobile.main-nav ul.menu a[href*="/login"]:active {
		transform: scale(.98);
		border-color: var(--ddh-gold);
		background: var(--ddh-tint) !important;
	}
	/* SIGN-UP CTA — same living gold treatment, drawer-sized */
	nav.mobile.main-nav ul.menu a[href*="/register"] {
		position: relative;
		overflow: hidden;
		gap: 9px;
		color: var(--ddh-cta-ink) !important;
		background: linear-gradient(110deg, #fdb837 0%, #ffd25c 26%, #ffbf2f 50%, #e0a300 76%, #fdb837 100%) !important;
		background-size: 220% 100%;
		box-shadow: 0 12px 26px -12px rgba(224, 190, 0, .8);
		animation: ddhGoldFlow 6s linear infinite;
		transition: transform .2s ease, box-shadow .2s ease;
	}
	/* re-enable the (otherwise hidden) ::before as the twinkling sparkle */
	nav.mobile.main-nav ul.menu a[href*="/register"]::before {
		display: block;
		content: "";
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		background: var(--ddh-cta-ink);
		-webkit-mask: var(--ddh-spark) center / contain no-repeat;
		        mask: var(--ddh-spark) center / contain no-repeat;
		transform: none;
		animation: ddhTwinkle 2.6s ease-in-out infinite;
	}
	nav.mobile.main-nav ul.menu a[href*="/register"]::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -65%;
		width: 55%;
		background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
		-webkit-mask: none;
		        mask: none;
		transform: skewX(-18deg);
		opacity: 0;
		pointer-events: none;
	}
	nav.mobile.main-nav ul.menu a[href*="/register"]:active { transform: scale(.98); }
	nav.mobile.main-nav ul.menu a[href*="/register"]:active::after { animation: ddhSheen .9s ease; }

	/* THE white-text fix. The theme ships `nav.mobile.main-nav ul.menu li a{
	   color:#fff!important}` — identical specificity to ours, so it won on source
	   order and painted the inactive labels white. An `html` prefix raises our
	   specificity above it, so the drawer's ink/gold colours always win. */
	html nav.mobile.main-nav ul.menu > li > a { color: var(--ddh-ink) !important; }
	html nav.mobile.main-nav ul.menu > li > a:hover,
	html nav.mobile.main-nav ul.menu > li.current-menu-item > a { color: var(--ddh-gold-deep) !important; }
	html nav.mobile.main-nav ul.menu a[href*="/login"]    { color: var(--ddh-gold-deep) !important; }
	html nav.mobile.main-nav ul.menu a[href*="/register"] { color: var(--ddh-cta-ink) !important; }
}

/* =====================================================================
   A11y + motion
   ===================================================================== */
#header .menu-mobile:focus-visible,
#header nav.main-nav ul.menu a:focus-visible,
nav.mobile.main-nav ul.menu a:focus-visible {
	outline: 2px solid var(--ddh-gold);
	outline-offset: 2px;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	#header .epcl-flex,
	#header[data-stuck] .epcl-flex,
	nav.mobile.main-nav,
	nav.mobile.main-nav ul.menu > li,
	nav.mobile.main-nav ul.menu > li > a::before,
	#header nav.main-nav ul.menu a[href*="/register"],
	#header nav.main-nav ul.menu a[href*="/register"]::before,
	#header nav.main-nav ul.menu a[href*="/register"]::after,
	nav.mobile.main-nav ul.menu a[href*="/register"],
	nav.mobile.main-nav ul.menu a[href*="/register"]::before,
	nav.mobile.main-nav ul.menu a[href*="/register"]::after {
		animation: none !important;
		transition: none !important;
	}
	/* hold the shimmer on a flattering frame + show the static sparkle */
	#header nav.main-nav ul.menu a[href*="/register"],
	nav.mobile.main-nav ul.menu a[href*="/register"] { background-position: 30% 50% !important; }
	#header nav.main-nav ul.menu a[href*="/register"]::before,
	nav.mobile.main-nav ul.menu a[href*="/register"]::before { opacity: 1; transform: none; }
	nav.mobile.main-nav ul.menu > li { opacity: 1; transform: none; }
}