/**
 * Surf Shack — marketing header: smart sticky, and the socials bar at every width.
 *
 * THE PROBLEM. The header is a 96px stack — a 40px topbar (#01060A: email, address,
 * three social icons) over a 56px nav row (#02151F: logo, seven nav items, BOOK NOW,
 * the account control). Nick, 16 Aug: "header seems clunky and unbalanced". Ninety-six
 * pixels of permanent chrome is a big part of that, but the owner specifically asked for
 * the socials to stay in the header, so the answer is not to delete a row — it is to
 * make the stack earn its height only when you are actually looking at it.
 *
 * THE BEHAVIOUR (agreed with Nick, 16 Aug)
 *
 *   at the top of the page   full 96px stack — socials, address, everything
 *   scrolling down           the whole header slides up and out of the way
 *   scrolling up             the 56px nav row slides back in, without the topbar
 *   back at the top          the full stack restores
 *
 * WHY position:sticky AND NOT position:fixed. Sticky keeps the header in normal flow, so
 * its space is always reserved and no page content ever jumps or hides underneath it. A
 * fixed header would need a spacer sized to the header on every template, and would get
 * that wrong the moment a row's height changed. The hide/reveal is done with `transform`
 * on top of the sticky, which is compositor-only — it does not touch layout.
 *
 * WHY WE STAND ELEMENTOR'S OWN STICKY DOWN. The nav row has Elementor Pro's sticky
 * configured on it (it reports `elementor-sticky--active` at mobile widths). Two sticky
 * systems on nested elements fight: theirs goes position:fixed, injects a spacer and
 * writes inline top/width, which would double the header's height and leave our transform
 * animating an element that is no longer where we think it is. Section 1 neutralises it.
 * Their settings are untouched in the database — if this file is ever removed, their
 * sticky simply resumes.
 *
 * NO-JS FALLBACK. The transforms are keyed to a `data-ssh` attribute that only the
 * companion script sets. If the script never runs, nothing matches and the header is a
 * plain always-visible sticky bar. Nobody loses the navigation because a script failed.
 *
 * @package SurfShack\Core
 */

/* ------------------------------------------------------------------------- *
 * 1. Stand Elementor Pro's own sticky down.
 *
 * The spacer is only meaningful when their sticky has gone fixed; since we force the
 * row to stay in flow, the spacer would be pure extra height.
 * ------------------------------------------------------------------------- */

.elementor-location-header .elementor-sticky__spacer {
	display: none !important;
}

/* `width: auto` was wrong here and shipped a visible bug. When their sticky activates it
   writes `position: fixed; width: 979px` inline. Forcing the row back to
   position:relative is right, but `width: auto` on a FLEX ITEM means "size to your
   content", not "fill the parent", so the row shrink-wrapped to 573px and centred
   itself, leaving the page background showing down both edges. Measured at 979px and
   1000px logged in and scrolled; reported by Nick, 16 Aug as "weird width on medium
   screen". It only appeared once their sticky went active, which is why it was invisible
   at rest. Fill the parent explicitly.

   The z-index also has to be restored rather than cleared: `z-index: auto` dropped the
   row's authored z-index of 50, and because the header rows are ordered with flex
   `order`, paint order follows order-modified document order, which puts the orange
   BOOK NOW row ON TOP of the nav row's open dropdown. See section 5. */
.elementor-location-header .e-con.elementor-sticky--active {
	position: relative !important;
	inset: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
	z-index: 60 !important;
	transition: none !important;
}

/* Their "scroll effects" class animates a shrink we are not asking for. */
.elementor-location-header .e-con.elementor-sticky--effects {
	transition: none !important;
}

/* ------------------------------------------------------------------------- *
 * 2. The header sticks and slides as one piece.
 *
 * --ssh-topbar and --ssh-nav are measured and written onto <html> by the companion
 * script, so the translate distances stay correct when the topbar changes height
 * between breakpoints. The values below are fallbacks for the pre-script frame.
 * ------------------------------------------------------------------------- */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition:
		transform 220ms cubic-bezier(.4, 0, .2, 1),
		box-shadow 220ms cubic-bezier(.4, 0, .2, 1);
}

/* Clear the WP admin bar, which is fixed at desktop and static at phone widths. */
body.admin-bar .elementor-location-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .elementor-location-header {
		top: 0;
	}
}

.elementor-location-header[data-ssh="top"] {
	transform: none;
	box-shadow: none;
}

/* Minimised: the topbar rides up out of frame, the nav row lands flush at the top.
   The shadow is what tells you this bar is floating over the page rather than sitting
   in it, at rest, sitting in the page, there is no shadow. */
.elementor-location-header[data-ssh="min"] {
	transform: translateY(calc(-1 * var(--ssh-topbar, 40px)));
	box-shadow: 0 6px 20px rgba(2, 21, 31, .22);
}

.elementor-location-header[data-ssh="hide"] {
	transform: translateY(-100%);
	box-shadow: none;
}

/* With the admin bar the header sticks at top:32px, so -100% leaves a 32px band of the
   nav row still on screen. Hiding means clearing the sticky offset as well as the
   header's own height. Measured logged in at 1677px: -100% alone left hdrBottom at 32.
   Below 782px the admin bar is static and top is already 0, so -100% is correct there. */
body.admin-bar .elementor-location-header[data-ssh="hide"] {
	transform: translateY(calc(-100% - 32px));
}

@media screen and (max-width: 782px) {
	body.admin-bar .elementor-location-header[data-ssh="hide"] {
		transform: translateY(-100%);
	}
}

/* A header that slid away while its own dropdown was open would take the open menu
   with it. account-menu.php flags the open state on <html>. */
html.ssm-acct-open .elementor-location-header[data-ssh="hide"] {
	transform: translateY(calc(-1 * var(--ssh-topbar, 40px)));
	box-shadow: 0 6px 20px rgba(2, 21, 31, .22);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header {
		transition: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 3. In-page anchors have to clear the minimised bar.
 *
 * The theme already sets scroll-behavior:smooth but left scroll-padding-top at auto,
 * so an anchor target landed underneath the sticky header. Nav height plus a 16px
 * breath. :has() rather than a class on <html> because the admin-bar class is on body.
 * ------------------------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--ssh-nav, 56px) + 16px);
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--ssh-nav, 56px) + 48px);
}

/* ------------------------------------------------------------------------- *
 * 4. The socials bar, at every width.
 *
 * The topbar ships with `elementor-hidden-mobile elementor-hidden-tablet`, so below
 * 1025px the socials the owner asked for were not in the header at all — they were
 * desktop-only, on the devices where most people browse. Nick, 16 Aug: show them at
 * all sizes, drop the street address, keep email plus the three icons.
 *
 * Elementor's hide rules are `.elementor-hidden-tablet { display:none !important }` at
 * (0,1,0). The doubled class here is (0,4,0) and also carries !important, so it wins
 * on specificity rather than on source order.
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.elementor-location-header .elementor-element.topbar.topbar {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: 14px;
		min-height: 32px;
		padding: 0 12px !important;
	}

	.elementor-location-header .topbar > .elementor-element,
	.elementor-location-header .topbar > .elementor-widget {
		display: block !important;
		width: auto !important;
	}

	.elementor-location-header .topbar .elementor-widget-icon-list .elementor-icon-list-items {
		display: flex;
		align-items: center;
		gap: 14px;
		margin: 0;
		padding: 0;
	}

	/* The icon list is [email, street address]. Only the email earns the space on a
	   phone, the address is a footer job, and it is in the footer. Positional rather
	   than semantic because CSS cannot match on content; if the list is ever reordered
	   the worst case is the address reappearing, not the bar breaking. */
	.elementor-location-header .topbar .elementor-widget-icon-list .elementor-icon-list-item:nth-child(n+2) {
		display: none !important;
	}

	.elementor-location-header .topbar .elementor-widget-icon-list .elementor-icon-list-item,
	.elementor-location-header .topbar .elementor-widget-icon-list .elementor-icon-list-text,
	.elementor-location-header .topbar .elementor-widget-icon-list a {
		font-size: 12px !important;
		line-height: 1.2 !important;
		margin: 0 !important;
	}

	.elementor-location-header .topbar .elementor-social-icons-wrapper {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0;
	}

	.elementor-location-header .topbar .elementor-social-icon {
		width: 22px !important;
		height: 22px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.elementor-location-header .topbar .elementor-social-icon i,
	.elementor-location-header .topbar .elementor-social-icon svg {
		font-size: 12px !important;
		width: 12px !important;
		height: 12px !important;
	}
}

/* ------------------------------------------------------------------------- *
 * 5. Stacking: the open dropdown has to clear the orange BOOK NOW row.
 *
 * The header's three rows are laid out with flex `order`, not document order — the
 * orange phone-only BOOK NOW row is DOM-earlier than the nav row but is ordered to sit
 * below it. Paint order for z-index:auto elements follows ORDER-modified document
 * order, so the orange row painted last and covered the first item of the mobile menu.
 * "FlowRider" was hidden under it — exactly the 48px of the orange bar. Nick, 16 Aug.
 * Explicit z-index on both rows takes the guesswork out of it.
 * ------------------------------------------------------------------------- */

/* 1d1f5d2f is the ONE element id in this file that exists on both hosts (verified against the
   rendered home page, 18 Aug). It is the nav row. Kept rather than replaced because :has() on a
   parent container is the alternative and this rule only needs a stacking context. */
.elementor-location-header .elementor-element-1d1f5d2f {
	position: relative;
	z-index: 60;
}

.elementor-location-header .topbar {
	position: relative;
	z-index: 1;
}

/* The dropdown itself sits above everything in the header. */
.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	z-index: 70;
}

/* ------------------------------------------------------------------------- *
 * 6. Balance: two masses, not three drifting ones.
 *
 * The row was `justify-content: normal` with the brand+nav group stretching to fill,
 * and the nav widget inside it stretching too. The nav UL therefore measured 938px at
 * 1366 and its items floated to the right of that box — which is what opened the dead
 * gap between the wordmark and the first item, and why the header read as "brand …
 * nothing … stuff". Measured at 1677px: logo ended at x=165, FlowRider began at x=540.
 *
 * The fix is to stop the nav widget stretching and let the brand+nav group hug the left
 * as one unit, with the actions pinned right. Gap scale throughout: 40 between brand and
 * nav, 32 between nav and the actions, 20 between the two actions.
 * ------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.elementor-location-header .elementor-element-1d1f5d2f.elementor-element-1d1f5d2f {
		justify-content: space-between;
		gap: 0;
	}

	/* The brand+nav group. Was keyed on `1bb6100`, a STAGING id, so this has never applied on
	   production: it is the container that holds the nav widget, named as such. */
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) {
		flex: 1 1 auto;
		justify-content: flex-start;
		gap: 40px;
		padding-right: 0;
	}

	/* This is the line that closes the dead gap: the nav widget stops stretching. Was `379962a`,
	   also staging-only. Elementor names every nav-menu widget this way, in every template. */
	.elementor-location-header .elementor-widget-nav-menu {
		flex: 0 1 auto;
	}

	/* THIS is the dead gap. The nav widget carries Elementor's
	   `elementor-nav-menu__align-end`, which right-aligns the list by putting
	   `margin-left: auto` on the UL. An auto margin absorbs ALL the free space, so the
	   gap after the wordmark grew with the window: measured 110px at 1025, 351px at
	   1366, 616px at 1677. justify-content cannot override it, the UL was already
	   flex-start; the margin was doing the pushing. Hand the auto margin to the other
	   side so the list hugs the wordmark and the free space collects on the right,
	   where the actions are pinned. */
	.elementor-location-header .elementor-nav-menu__align-end .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
		justify-content: flex-start;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/*
	 * [Ivywild 2026-08-18, Nick] "fix this spacing. too cramped" / "button font size is too big".
	 *
	 * The two rules that used to live here were keyed on `elementor-element-1de5b28` and
	 * `-944f5d9` -- STAGING ids. Prod's header was rebuilt (elementor-id 6243) with different
	 * ones, so on prod neither the 32px before the CTA, the 20px before the account control, nor
	 * the hairline between them has ever applied. That is the cramped right-hand cluster in Nick's
	 * screenshot: three controls with no separation because the rules separating them address
	 * elements that do not exist here. Third instance of this pattern today, after the nav icons
	 * and the mobile hamburger.
	 *
	 * Rewritten structurally. `.ssm-acct-host` is a class account-menu.php puts on the widget it
	 * moves the account control into, so it names the thing rather than an id that belongs to one
	 * environment; the CTA is matched on Elementor's own button widget class.
	 */
	.elementor-location-header .elementor-widget-button {
		flex: 0 0 auto;
		margin-left: 28px;
	}

	.elementor-location-header .ssm-acct-host {
		flex: 0 0 auto;
		margin-left: 22px;
		position: relative;
	}

	/* A hairline so the filled CTA and the account control stop reading as one
	   two-tone blob. 24px tall, centred on the row. */
	.elementor-location-header .ssm-acct-host::before {
		content: "";
		position: absolute;
		left: -12px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 24px;
		background: rgba(255, 255, 255, .18);
	}

	/*
	 * The CTA was set from Elementor's own typography and read a full step larger than the 15px
	 * nav beside it -- so the loudest thing in the row was also the biggest, which is one emphasis
	 * too many. Down to 14px with the caps tracking opened slightly, and the padding tightened to
	 * match, so it still reads as the button without shouting over seven labels.
	 */
	.elementor-location-header .elementor-widget-button .elementor-button,
	.elementor-location-header .elementor-widget-button .elementor-button-text {
		font-size: 14px !important;
		letter-spacing: .04em !important;
		line-height: 1.2 !important;
	}

	.elementor-location-header .elementor-widget-button .elementor-button {
		padding: 12px 20px !important;
	}

	/* The basket is the last thing before the viewport edge; it needs air on both sides of it
	   rather than only the left, or the count sits on the edge of the screen. */
	.elementor-location-header .ssm-hbasket {
		margin-left: 14px;
		margin-right: 6px;
	}
}

/* ------------------------------------------------------------------------- *
 * 7. Let the type carry the nav, not the icons.
 *
 * Seven labels, each with a 17px icon, is fourteen discrete marks in one line — the
 * main source of the header's busy texture. The icons were already conditional (they
 * were switched off between 1025 and 1169 to stop the row wrapping), which is the
 * design admitting they are the enhancement rather than the content. Dropping them
 * everywhere frees ~120px.
 *
 * THE LABEL SIZE IS 15px, and this block no longer sets it (Nick, 18 Aug 2026).
 *
 * It used to raise it to 16px here, on the argument that the freed space bought the size
 * back toward the Creative system's 17px floor. Nick wants 15. The base rule in
 * ss-layout-fixes.css (~line 253) already says 15px !important with an identical selector;
 * this file simply loads second and won above 1025px, which is why the header read 16 on a
 * fresh load and 15 on any tab still holding the older stylesheet. Deleting the override
 * here leaves one rule stating the size at every width, rather than two disagreeing.
 *
 * Padding is tiered because the row still has to hold seven labels: 14px each side
 * above 1280, 10px between 1025 and 1280 where the budget is tighter. Both numbers were
 * tuned against the 16px label, so they are now slightly generous rather than tight --
 * left alone deliberately, because the failure mode that matters is the row wrapping, and
 * shrinking the type only moves it further from that. Measure before reclaiming the slack.
 * ------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::before {
		display: none !important;
	}

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
		gap: 0 !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (min-width: 1280px) {

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* ------------------------------------------------------------------------- *
 * 8. One accent in the right cluster.
 *
 * The filled orange CTA and the filled teal disc sat adjacent, two saturated shapes
 * competing, so the CTA stopped reading as THE call to action. The Creative system
 * wants #C25700 to be the accent; the disc only needs to be recognisable, not loud.
 * Outlined disc, white initial — same mark, a third of the weight.
 * ------------------------------------------------------------------------- */

.elementor-location-header .ssm-acct-disc {
	width: 28px;
	height: 28px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .38);
	color: #FFFFFF;
}


/* =========================================================================
 * 9. The header sits on the same grid as the page.
 *
 * [Ivywild 2026-08-18, Nick] The header row ran edge to edge while every other band on the
 * site is constrained. Measured: the outer container is 100% and its inner is `width: 90%`,
 * so the row was 1032px at 1265 and about 1700px at 1920 -- it grew with the window. The body
 * does not: ss-marketing.css sets `--grid: 1200px` with `--gutter: clamp(20px, 5vw, 48px)` and
 * `.ssm-in { max-width: var(--grid) }`. On a wide monitor the logo started ~18px in while the
 * hero eyebrow started ~395px in, and nothing lined up with anything.
 *
 * TWO LEVELS, AND THE ORDER MATTERS. The OUTER container keeps its full width so the header's
 * background still spans the viewport; only the INNER row is constrained. Putting the max-width
 * on the outer container instead would inset the background and, worse, would collide with the
 * sticky rule in section 1 -- Elementor writes an inline `width: 979px` the moment its sticky
 * activates, which is why `.e-con.elementor-sticky--active` forces `width: 100% !important`.
 * That rule must keep addressing the outer element. These two are deliberately kept apart.
 *
 * Tokens, not numbers: --grid and --gutter are declared in ss-marketing.css and inherited here,
 * so the header follows the body the day either changes. The fallbacks only matter on a page
 * that somehow loads this file without that one.
 * ========================================================================= */
.elementor-location-header .topbar > .e-con-inner,
.elementor-location-header .elementor-element-1d1f5d2f > .e-con-inner,
.elementor-location-header > .e-con > .e-con-inner {
	width: 100%;
	max-width: var(--grid, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter, clamp(20px, 5vw, 48px));
	padding-right: var(--gutter, clamp(20px, 5vw, 48px));
	box-sizing: border-box;
}

/* The background stays full-bleed. Restated because the selector above is a child of this one
   and it would be easy to "tidy" the two into a single rule and lose the distinction. */
.elementor-location-header > .e-con,
.elementor-location-header .topbar {
	width: 100%;
	max-width: 100%;
}