/*
 * Stylized hover/focus/active treatment for Kedyn's own brand wordmark.
 * Targets .logo_wrapper, shared by both #logo_normal and #logo_transparent
 * in header.php and templates/template-topmenu.php - one ruleset covers
 * both header color states and both menu layouts.
 *
 * Raster-safe only (this logo is a PNG, not an SVG): filter/transform/
 * pseudo-element/mask techniques, no stroke-draw or path-morph.
 *
 * :active is included everywhere :hover/:focus-visible are, so touch
 * visitors get the same feedback on tap - no hover-only core effect.
 */

.logo_wrapper {
	position: relative;
	display: inline-block;
	overflow: hidden; /* contains the color-trace sweep below */
}

/* No drop-shadow glow on this element: a drop-shadow traces a raster PNG's
 * alpha channel loosely enough that the soft halo bleeds past the lettering
 * and reveals the image's rectangular transparent padding as a faint lit
 * box. The colour-trace sweep below avoids that failure mode - it is
 * genuinely mask-shaped, so it cannot produce that artifact. */

/* Color-trace sweep: a solid fill masked to the logo PNG's own alpha
 * channel (via the --logo-src custom property set inline in
 * template-topmenu.php/header.php, since this static CSS file has no way
 * to reference the wp-admin-uploaded logo URL directly), so the color
 * genuinely traces the lettering and the weasel mark above it instead of
 * filling a generic box. Sweeps left-to-right via an animated clip-path on
 * hover/focus/tap, then snaps away on exit - a slight colour trace of the
 * letters themselves, not a generic fade or scale.
 *
 * Fill color (set below, on .logo_wrapper::after's background-color) is a
 * solid #ffad88 (orange) - deliberately not this theme's sitewide accent
 * color (exposed as the `--color-accent` custom property, screen.css,
 * #efc337 warm gold under the hood, used for button/CTA background+border
 * everywhere else). A hue shift is what makes the trace read against both
 * real header states this logo renders in (dark-on-dark on a solid header,
 * weak-on-dark on a transparent hero header), so a near-black fill isn't an
 * option here; within that constraint, this orange is a deliberate choice
 * for this element specifically, not a mismatch to fix. If accent
 * unification is ever revisited, the conversation is whether the sitewide
 * accent itself should move toward this orange, not whether to quietly
 * revert the logo to gold.
 *
 * mask-mode is explicit (alpha) rather than left to match-source's default,
 * since luminance-vs-alpha masking of a raster PNG is one of the few things
 * that still varies across browsers and this hasn't been checked in a real
 * one.
 */
.logo_wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Solid fill, not translucent: a translucent fill lets the underlying
	 * wordmark ghost through the trace, visible as a boxed outline of its own
	 * opacity. Full opacity keeps the sweep reading as a clean colour trace
	 * of the lettering. See the comment above this rule for why the color
	 * itself is an intentional orange rather than the theme's sitewide
	 * accent gold. */
	background-color: #ffad88;
	-webkit-mask-image: var(--logo-src);
	mask-image: var(--logo-src);
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	clip-path: inset(0 100% 0 0);
	pointer-events: none;
}
.logo_wrapper:hover::after,
.logo_wrapper:focus-visible::after,
.logo_wrapper:active::after {
	animation: logoColorTrace 0.6s var(--ease-signature, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes logoColorTrace {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

/* Signature-flourish underline - reinforces the hand-lettered feel without
   needing vector paths on the raster asset itself. A distinct accent from
   the colour-trace sweep above, not a duplicate of it.

   Colour is set per logo element below rather than as one fixed value: a
   single fixed colour can't work here, since the default header background
   (`.top_bar`, effectively white) and the transparent/hero header are close
   to opposite in tone, so whichever fixed colour is picked reads fine
   against one and disappears against the other.

   Resolved per logo element rather than by sniffing the backdrop, because
   the theme already renders two separate, mutually-exclusive logo anchors
   (template-topmenu.php): `#custom_logo` inside `#logo_normal` for the solid
   white header, and `#custom_logo_transparent` inside `#logo_transparent`
   for the transparent/hero header, each toggled `default`/`hidden` from
   `$page_menu_transparent`. Keying off which one is rendering is exact - it
   can't drift out of sync with the header state the way a fixed colour
   independent of context can, and it stays correct if the parent theme's
   sticky-header JS swaps which logo is showing mid-scroll, since the swap
   changes the element and therefore the colour with it.

   Deliberately NOT `mix-blend-mode: difference`, which is the tempting
   one-liner for "understands what background it's in": difference inverts
   correctly against pure white and pure black, but against a MIDTONE it
   returns a value close to that same midtone - i.e. the line would vanish
   again over a mid-grey hero photo, which is exactly the failure being
   avoided. Two explicit values are less clever and can't fail that way.

   Not visually verified - no browser available to confirm either header
   state, especially over a light hero photo. */
.logo_wrapper::before {
	content: '';
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 2px;
	height: 1.5px;
	/* Near-black rather than pure #000 - matches the theme's own text colour
	   weight instead of introducing a harder black than anything else in the
	   header. Single knob: only --logo-line-color changes between states. */
	background: var(--logo-line-color, #1a1a1a);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ease-signature, cubic-bezier(0.22, 1, 0.36, 1));
	pointer-events: none;
}
/* Transparent/hero header: dark gradient scrim over the photo
   (`.top_bar.hasbg` sets linear-gradient(rgba(0,0,0,0.4) ...)), so white is
   the readable choice here. Both selectors on purpose - the element ID is
   the precise signal, the `.hasbg` ancestor is a safety net in case a page
   renders the normal logo inside a transparent header. */
#custom_logo_transparent::before,
.top_bar.hasbg .logo_wrapper::before {
	--logo-line-color: #fff;
}
.logo_wrapper:hover::before,
.logo_wrapper:focus-visible::before,
.logo_wrapper:active::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.logo_wrapper::after { display: none; }
	.logo_wrapper::before { transition: none; }
}

/* Cancels the parent theme's own mobile-only rule (grid.css:643,
 * `@media only screen and (max-width: 767px) { .logo_wrapper img {
 * margin-top: -10px; } }`) - a small upward nudge for visual centering that
 * is harmless against the parent's own .logo_wrapper, which has no
 * overflow:hidden and simply lets the shifted image spill a few px above
 * its own box with nothing to clip it. This file's own overflow:hidden
 * (needed to contain the ::after color-trace sweep above) turns that same
 * nudge into a real, visible crop of the top of the logo - cutting off the
 * weasel mascot perched on the "Y" specifically, since the source PNG has
 * zero spare margin above it. Confirmed via getBoundingClientRect() that
 * the <img>'s own top edge sits exactly 10px above its wrapper's, an exact
 * match for the parent's -10px value, and that canceling it here lets the
 * wrapper's auto-height grow to fully contain the image with zero clipping.
 * Scoped to the same breakpoint as the rule it's countering, not a global
 * override. !important because this is a tied-specificity same-selector
 * override (`.logo_wrapper img` both sides) - a plain override alone does
 * not win the cascade-order tie against the parent's grid.css. */
@media (max-width: 767px) {
	.logo_wrapper img {
		margin-top: 0 !important;
	}
}