/* L44 Header — pinned, opaque, and still.
 * -------------------------------------------------------------------------
 * The theme already fixes the header to the top. What it also does, and what
 * this file undoes, is move it: it slides the whole header away on scroll and
 * tightens its top padding once you leave the top of the page. Nothing here
 * touches markup, so deactivating the plugin restores the theme's behaviour
 * exactly.
 */

.header {
	/* Was 2 — above ordinary content, but not above everything the plugins
	   draw. Kept well below the calendar's popups (99999) so those still
	   cover the header. */
	z-index: 100;

	/* The theme animates the header with `transition: all .3s linear`, which
	   is what made the movement visible rather than instant. With nothing left
	   to animate this is belt and braces, and it also stops any future theme
	   change from sliding it around. */
	transition: none !important;
}

/* ---- 1. Stay put ----
   The theme's script adds .move-up on scroll and slides the header off the
   top. Only the transform is overridden, not the class: the script can keep
   adding and removing it with no effect. */
.header.move-up {
	transform: none !important;
}

/* ---- 2. Don't resize ----
   .header.scrolled tightens the top padding, which lifts the logo by a few
   pixels partway down the page. These are the theme's own resting values —
   16px, and 36px from its 1152px breakpoint — so the header simply keeps the
   height it starts with. */
.header.scrolled {
	padding-top: 16px !important;
}

@media (min-width: 1152px) {
	.header.scrolled {
		padding-top: 36px !important;
	}
}

/* ---- 3. Opaque, ending at the logo ----
   The background is drawn on the header's inner container rather than on the
   header itself, because the container's bottom edge IS the bottom of the
   logo — the header adds 10px of padding below it. Anchoring to the container
   means the cut lands on the logo automatically, whatever that padding is.

   It is stretched to the full viewport width (the container is centred and
   capped at 1470px) and extends a viewport upwards, so no strip is left
   uncovered above the header at any offset — the theme sets its top from the
   admin bar, so that gap is 32px for a logged-in editor and 0 for everyone
   else. */
.header,
.header.scrolled {
	/* The theme fills the whole header once you scroll; that would reach 10px
	   past the logo. */
	background-color: transparent !important;
}

.header .header__container {
	position: relative;
}

.header .header__container::before {
	content: "";
	position: absolute;
	top: -100vh;
	/* The container's bottom edge IS the logo's, so this offset is measured
	   straight from the logo: 20px past it on desktop. */
	bottom: -20px;
	left: 50%;
	margin-left: -50vw;
	width: 100vw;
	background: var( --l44hdr-bg, #dcdcdc );   /* the page background */
	z-index: -1;
	pointer-events: none;
}

/* On the mobile header the background runs 5px past the logo instead of
   stopping level with it. 1152px is the theme's own header breakpoint — below
   it the hamburger appears and the header drops to its compact padding — so
   the two switch together rather than at some separate width of ours.

   Negative bottom rather than extra height: the background is anchored to the
   container's bottom edge, so this simply pushes that edge down and leaves the
   top, and the desktop case, untouched. */
@media (max-width: 1151.98px) {
	.header .header__container::before {
		bottom: -5px;
	}
}

/* ---- Home page marquee ----
   Two problems with one cause. Its items are anchors pointing at "#", so a
   click jumps the page to the top and does nothing else; and the scroll is
   driven by a script that pauses it on mouseenter, so resting the pointer over
   it stopped the movement.

   pointer-events on the whole section, not just on the anchors: the pause is
   bound above the links, so disabling only those would have killed the click
   and left the stall. Taking the section out of hit testing entirely means no
   mouse event reaches it at all — nothing to click, nothing to pause. The
   movement itself is untouched, since the script animates a transform rather
   than responding to the pointer.

   Not a header rule, strictly. It lives here because this plugin is where the
   theme's CSS gets overridden site-wide; if more of these accumulate they are
   worth splitting into a tweaks plugin of their own. */
.section-marquee {
	pointer-events: none;
}

/* ---- the little arrow beside a menu item ----
   The theme gives every main-nav link a 13px arrow as an ::after, hidden until
   the pointer is on it, and then runs it in from whichever side the item's own
   shape comes from — .nav-main ul li a.polygon-gallery:hover::after and five
   more like it, one per section.

   The shapes stay; this goes. content: none rather than display or opacity,
   because a pseudo-element with no content is never built at all: there is
   nothing left to animate, nothing to lay out, and no request for arrow.svg.
   Hiding it would have left all three still happening, invisibly. */
.nav-main ul li a::after {
	content: none !important;
}