/*
 * aSS — custom header branding
 *
 * Desktop: [aSS_handmadedesktop.svg]  + "lingerie & beachwear since 2002" below
 * Mobile:  [aSS_handmademobile.svg] + subtitle below
 * < 420px: logo only, subtitle hidden
 *
 * Wave animation: a ::before pseudo-element carries an animated gradient that
 * is masked to the SVG path shapes via mask-image. The inline SVG defines the
 * layout dimensions; its own fill is hidden so only the overlay shows.
 *
 * Colours are always the Customizer primary/secondary — no JS override.
 */

/* ── Brand link ───────────────────────────────────────────────────────────── */
.ass-brand-link {
	display:         block;
	line-height:     1;
	text-decoration: none;
}

.ass-brand-link:hover,
.ass-brand-link:focus {
	text-decoration: none;
	outline:         none;
}

/* ── Flex column: [logo] / [subtitle indented to aSS mark] ───────────────── */
.ass-brand {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            0;
}

/* ── SVG logo wrappers ────────────────────────────────────────────────────── */
.ass-brand__logo,
.ass-brand__logo-mobile {
	flex-shrink: 0;
	line-height: 0; /* collapse whitespace around inline SVG */
	position:    relative; /* anchor the ::before wave overlay */
}

/* Desktop: full-width SVG — scale by height to fit the header */
.ass-brand__logo {
	height:  clamp(32px, 4.5vw, 52px);
	width:   auto;
	display: block;
}

/* Mobile: compact SVG — hidden on desktop */
.ass-brand__logo-mobile {
	height:  clamp(30px, 7vw, 46px);
	width:   auto;
	display: none;
}

.ass-brand__logo svg,
.ass-brand__logo-mobile svg {
	height:  100%;
	width:   auto;
	display: block;
	opacity: 0; /* layout box only — ::before overlay provides colour */
}

/* ── Wave keyframes ───────────────────────────────────────────────────────── */
/*
 * background-size: 300% places the wave peak (at 50% = 1.5×W) just off-screen
 * at both extremes. animation-direction: alternate makes it flow back and forth
 * naturally instead of snapping back to the start each cycle.
 *   at 90%: offset = -1.8W → wave at 1.5W - 1.8W = -0.3W (just off left)
 *   at 10%: offset = -0.2W → wave at 1.5W - 0.2W = +1.3W (just off right)
 */
@keyframes ass-logo-wave {
	from { background-position: 90% center; }
	to   { background-position: 10% center; }
}

/* ── Animated gradient overlay, masked to SVG path shapes ────────────────── */
.ass-brand__logo::before,
.ass-brand__logo-mobile::before {
	content:         '';
	position:        absolute;
	inset:           0;
	pointer-events:  none;
	background:      linear-gradient(
		90deg,
		var(--color-primary,   #cc3366)  0%,
		var(--color-primary,   #cc3366) 38%,
		var(--color-secondary, #9966cc) 50%,
		var(--color-primary,   #cc3366) 62%,
		var(--color-primary,   #cc3366) 100%
	);
	background-size: 300% 100%;
	/* alternate: wave flows back and forth — no hard reset each cycle */
	animation:       ass-logo-wave 5s ease-in-out infinite alternate;
}

/* Each variant uses its own SVG file as the mask shape */
.ass-brand__logo::before {
	-webkit-mask: url('../../images/aSS_handmadedesktop.svg') no-repeat center / 100% 100%;
	        mask: url('../../images/aSS_handmadedesktop.svg') no-repeat center / 100% 100%;
}

.ass-brand__logo-mobile::before {
	-webkit-mask: url('../../images/aSS_handmademobile.svg') no-repeat center / 100% 100%;
	        mask: url('../../images/aSS_handmademobile.svg') no-repeat center / 100% 100%;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */
.ass-brand__sub {
	display:        block;
	font-family:    Arial, Helvetica, sans-serif;
	font-size:      clamp(0.55rem, 0.9vw, 0.7rem);
	line-height:    1.45;
	letter-spacing: 0.13em;
	text-transform: lowercase;
	white-space:    nowrap;
	color:          var(--color-primary, #cc3366);
	margin-top:     -1.4em;
	/* indent to align with calligraphy start — aSS mark ends at ~36.3% of desktop SVG width */
	padding-left:   clamp(100px, 14vw, 167px);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.ass-brand__logo        { display: none;  }
	.ass-brand__logo-mobile { display: block; }
	.ass-brand__sub         { display: none;  } /* more room on mobile — logo only */
}

/* ── High-contrast overrides ─────────────────────────────────────────────── */
body.high-contrast .ass-brand__sub {
	color: #000 !important; /* !important: overrides --color-primary */
}

body.high-contrast .ass-brand__logo::before,
body.high-contrast .ass-brand__logo-mobile::before {
	background: #000 !important; /* !important: defeats gradient */
	animation:  none !important;
}

/* ── Reduced-motion overrides ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ass-brand__logo::before,
	.ass-brand__logo-mobile::before {
		animation:            none;
		background:           var(--color-primary, #cc3366);
	}
}