/**
 * Surf Shack — mobile bottom tab bar.
 *
 * Everything here is scoped to max-width 1024px, which is the breakpoint the header
 * already thinks in (Elementor's tablet tier, and where the hamburger used to appear).
 * Above it the desktop header in ss-header.css is untouched.
 *
 * PALETTE. Light scheme, per Nick 16 Aug. White ground with a #D8E6E6 hairline top edge
 * and hairline tab dividers — the same boundary token the product side uses. Inactive
 * ink #5A7482 measures 4.75:1 on white and active ink #1F3E4A measures 10.8:1, so the
 * 11px labels clear WCAG AA for normal text in both states. Book keeps the #C25700
 * accent: filled mark with a white glyph, and a #C25700 label at 4.65:1.
 *
 * The bar carries a soft top shadow rather than relying on the border alone, because on
 * a white bar over white page content a 1px line is not enough to say "this floats".
 *
 * @package SurfShack\Core
 */

/* Never below 1025 — the desktop header handles itself. */
@media (min-width: 1025px) {

	.ssm-tabbar,
	.ssm-sheet {
		display: none !important;
	}
}

/* The control renders hidden and is unhidden by script only once it has confirmed an
   Elementor header. `hidden` is only `[hidden] { display: none }` in the UA sheet, so
   the author display rules below would outrank it, the same trap that put a stray
   account control across every app page. Guard it explicitly. */
.ssm-tabbar[hidden],
.ssm-sheet[hidden] {
	display: none !important;
}

@media (max-width: 1024px) {

	/* --------------------------------------------------------------------- *
	 * 1. Retire the old mobile chrome.
	 *
	 * The wrapped seven-item inline menu (82px, two lines) and the orange BOOK NOW row
	 * (48px) are both replaced by the bar. What is left at the top is the socials strip
	 * and a compact row carrying the wordmark and the account control.
	 * --------------------------------------------------------------------- */

	.elementor-location-header .elementor-element-379962a,
	.elementor-location-header .elementor-element-1022e5b {
		display: none !important;
	}

	/*
	 * [Ivywild 2026-08-18, Nick] "hide header hamburger nav if bottom fixed nav tabs are visible."
	 *
	 * The two element ids above are STAGING's. Prod's header was rebuilt (elementor-id 6243) with
	 * different ids, so on prod they matched nothing and the old chrome never retired -- which is
	 * why the hamburger is still sitting next to the wordmark with the tab bar already on screen.
	 * Exactly the failure the nav icons had this morning, one stylesheet over: a selector keyed to
	 * a number that belongs to one environment.
	 *
	 * These are structural. Elementor names its toggle and its dropdown panel the same way in
	 * every header it builds, so this holds on both hosts and survives the next rebuild. It sits
	 * inside the same max-width:1024px block that shows the tab bar, so the two can never disagree
	 * about which navigation is on duty.
	 */
	.elementor-location-header .elementor-menu-toggle,
	.elementor-location-header .elementor-nav-menu--dropdown,
	.elementor-location-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		display: none !important;
	}

	.elementor-location-header .elementor-element-1d1f5d2f {
		min-height: 52px;
	}

	.elementor-location-header .elementor-element-1bb6100 {
		flex: 1 1 auto;
	}

	/* --------------------------------------------------------------------- *
	 * 2. The bar.
	 * --------------------------------------------------------------------- */

	.ssm-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		align-items: stretch;
		background: #FFFFFF;
		border-top: 1px solid #D8E6E6;
		box-shadow: 0 -4px 14px rgba(2, 21, 31, .07);
		/* The inset keeps the labels off the iPhone home indicator. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.ssm-tab {
		flex: 1 1 0;
		min-width: 0;
		/* Explicit, because the theme does not set it globally on these and the padding
		   was landing OUTSIDE min-height, a 56px tab measured 68 and the bar 69. */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 56px of bar plus the 3px gap clears the 44px minimum tap target comfortably. */
		min-height: 56px;
		padding: 6px 2px;
		background: none;
		border: 0;
		text-decoration: none;
		color: #5A7482;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Hairline between tabs. Same #D8E6E6 as the bar's top edge, so the bar reads as one
	   ruled strip rather than five loose targets. */
	.ssm-tab + .ssm-tab {
		border-left: 1px solid #D8E6E6;
	}

	.ssm-tab-ico {
		width: 23px;
		height: 23px;
		flex: none;
	}

	.ssm-tab-lbl {
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .01em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.ssm-tab.is-current {
		color: #1F3E4A;
	}

	.ssm-tab:focus-visible {
		outline: 3px solid #3D8D90;
		outline-offset: -3px;
		border-radius: 4px;
	}

	/* The mark wrapper exists so the Book tab can carry a filled shape without changing
	   the height or rhythm of its neighbours. */
	.ssm-tab-mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* --------------------------------------------------------------------- *
	 * 3. Book — the one accent.
	 * --------------------------------------------------------------------- */

	.ssm-tab--cta .ssm-tab-mark {
		width: 46px;
		height: 30px;
		border-radius: 4px;
		background: #C25700;
		color: #FFFFFF;
	}

	.ssm-tab--cta {
		color: #C25700;
	}

	.ssm-tab--cta:active .ssm-tab-mark {
		background: #B35000;
	}

	/* --------------------------------------------------------------------- *
	 * 4. Page content has to clear a fixed bar.
	 *
	 * Without this the footer's last row sits under the tab bar and cannot be read or
	 * tapped. Applied to body rather than a wrapper because the sticky-footer rule in
	 * ss-layout-fixes.css already makes body the column that owns page height.
	 * --------------------------------------------------------------------- */

	/* Measured by the script and published on <html>, not hard-coded: the first version
	   assumed 56px against a bar that rendered 69, and the last 13px of the footer sat
	   under the bar where it could not be read or tapped. The bar's own box already
	   carries the safe-area inset, so its offsetHeight is the whole clearance needed. */
	html.ssm-has-tabbar body,
	html.ssm-app body {
		padding-bottom: var(--ssm-tabbar-h, 57px);
	}

	/* --------------------------------------------------------------------- *
	 * 5. The More sheet.
	 * --------------------------------------------------------------------- */

	/* Stops ABOVE the tab bar rather than covering it. Nick, 16 Aug: "make menu appear
	   above the nav bar bottom mobile". The bar is the app's spine, it should stay put
	   and stay usable while you are browsing the menu, so Home/Ride/Book/Passes remain
	   one tap away and More reads as a panel hanging off the bar rather than a takeover.

	   z-index above the admin bar, not below it. At 1001 the sheet sat UNDER
	   #wpadminbar (z-index 100000, 46px tall on a phone), which landed squarely on the
	   close button: a hit test at the centre of the X returned "wpadminbar" and
	   closeReachable was false. That is Nick's "doesnt allow close", and it only bit
	   logged-in users, which is why it survived the logged-out checks. A modal belongs
	   above the chrome it covers. */
	.ssm-sheet {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: var(--ssm-tabbar-h, 57px);
		z-index: 100001;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0 -8px 28px rgba(2, 21, 31, .28);
		font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		overscroll-behavior: contain;
	}

	/* While the sheet is open, More is the active tab. */
	.ssm-tab--more[aria-expanded="true"] {
		color: #1F3E4A;
	}

	.ssm-sheet-head {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 0 8px 0 20px;
		min-height: 56px;
		background: #02151F;
		color: #FFFFFF;
	}

	.ssm-sheet-title {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .01em;
	}

	.ssm-sheet-x {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		color: #FFFFFF;
		cursor: pointer;
	}

	.ssm-sheet-x .ssm-tab-ico {
		width: 22px;
		height: 22px;
	}

	.ssm-sheet-x:focus-visible {
		outline: 3px solid #FFFFFF;
		outline-offset: -3px;
		border-radius: 4px;
	}

	.ssm-sheet-body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* No safe-area inset here: the sheet now stops above the tab bar, and the bar's
		   own box already carries it. Adding it again just wasted 34px on an iPhone. */
		padding: 16px 20px 24px;
	}

	/* Book Now leads the sheet. Nick, 16 Aug: someone who misses the orange tab will
	   come looking for it in the menu, and it has to be the first thing there. */
	.ssm-sheet-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		margin-bottom: 20px;
		border-radius: 4px;
		background: #C25700;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.ssm-sheet-cta:active {
		background: #B35000;
	}

	.ssm-sheet-cta:focus-visible {
		outline: 3px solid #02151F;
		outline-offset: 2px;
	}

	.ssm-sheet-menu,
	.ssm-sheet-menu .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ssm-sheet-menu a {
		display: flex;
		align-items: center;
		min-height: 52px;
		border-bottom: 1px solid #D8E6E6;
		color: #1F3E4A;
		font-size: 17px;
		font-weight: 600;
		text-decoration: none;
	}

	.ssm-sheet-menu a:active {
		color: #357B7D;
	}

	/* The header's icons, in the accent. Masked rather than drawn so one SVG serves both
	   places and the colour is a single declaration. The class is added by the script
	   only when it actually resolved an icon, so links without one keep a flush left
	   edge instead of reserving empty space. */
	/* The account nav's own SVGs, cloned in and re-coloured. They ship with
	   stroke="currentColor", so a colour on the glyph is all it takes. */
	.ssm-sheet-svg {
		flex: none;
		width: 20px;
		height: 20px;
		margin-right: 12px;
		color: #C25700;
	}

	.ssm-sheet-menu a.ssm-has-ico::before {
		content: "";
		flex: none;
		width: 20px;
		height: 20px;
		margin-right: 12px;
		background-color: #C25700;
		-webkit-mask: var(--ss-ico) center / contain no-repeat;
		mask: var(--ss-ico) center / contain no-repeat;
	}

	.ssm-sheet-menu a:focus-visible {
		outline: 3px solid #3D8D90;
		outline-offset: -3px;
	}

	/* Second level stays collapsed until its parent is tapped, so the sheet opens as a
	   short scannable list rather than eleven undifferentiated rows. */
	.ssm-sheet-menu .sub-menu {
		display: none;
	}

	.ssm-sheet-menu .is-open > .sub-menu {
		display: block;
	}

	.ssm-sheet-menu .sub-menu a {
		min-height: 46px;
		padding-left: 18px;
		font-size: 15px;
		font-weight: 500;
		color: #5A7482;
	}

	/* A parent that expands rather than navigates needs to say so. */
	.ssm-sheet-menu .menu-item-has-children > a::after {
		content: "";
		margin-left: auto;
		width: 9px;
		height: 9px;
		border-right: 2px solid #5A7482;
		border-bottom: 2px solid #5A7482;
		transform: rotate(45deg);
		transition: transform 160ms cubic-bezier(.22, .61, .36, 1);
	}

	.ssm-sheet-menu .is-open > a::after {
		transform: rotate(-135deg);
	}

	@media (prefers-reduced-motion: reduce) {

		.ssm-sheet-menu .menu-item-has-children > a::after {
			transition: none;
		}
	}

	/* The page behind the sheet must not scroll with it. */
	html.ssm-sheet-open,
	html.ssm-sheet-open body {
		overflow: hidden;
	}
}

/* ------------------------------------------------------------------------- *
 * 6. The accessibility widget has to move up, not the bar down.
 *
 * AllAccessible pins #accessibility-button to bottom:0 right:0 at z-index 99998 — a
 * 55px disc that landed squarely on top of the More tab. Measured at 390px: the button
 * occupied 325,779 55x55 and More sat at 312,788 78x56, and a hit test at the centre of
 * More returned the widget's SVG. The tab was not merely obscured, it was unclickable.
 *
 * The bar is the primary navigation and belongs on the bottom edge, so the floating
 * widget is what gives way. Offset by the bar's own measured height plus a 10px breath,
 * and only while the bar is actually present.
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	html.ssm-has-tabbar #accessibility-button,
	html.ssm-app #accessibility-button,
	html.ssm-has-tabbar .accessibility-trigger-button,
	html.ssm-app .accessibility-trigger-button {
		bottom: calc(var(--ssm-tabbar-h, 57px) + 10px) !important;
	}
}

/* ------------------------------------------------------------------------- *
 * 7. Stand the account app's own mobile menu down.
 *
 * The account app collapses its nav into a `button.ssr-acct-burger` below its own
 * breakpoint, opening `.ssr-acct-links` as a dropdown — Dashboard, Passes, Bookings,
 * Riders, Waivers, Orders, Cards, My QR, Settings. Every one of those is now in the
 * More sheet, so on a phone the page carried two menus with identical contents and a
 * hamburger competing with the bar for the same job. Nick, 16 Aug: "hide this menu on
 * mobile".
 *
 * This is an override, not an edit — the account app's markup and CSS belong to another
 * agent and are untouched. Gated on .ssm-app, which PHP writes into the opening <html>
 * tag for account and order paths. It used to be gated on the script-set .ssm-has-tabbar,
 * which meant the hamburger and nav painted for about 1.5s before vanishing — the inline
 * script is printed in the footer and runs after every other enqueued script. The bar
 * itself is server-rendered on these paths too, so nothing here depends on JS arriving.
 *
 * Hiding it does NOT break the sheet: the More list is built by cloning these same
 * links, and querySelectorAll reads the DOM regardless of display.
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	html.ssm-app .ssr-acct-burger,
	html.ssm-app .ssr-acct-nav {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------- *
 * 8. /order/ — one sticky header, not two.
 *
 * Nick, 16 Aug: "two headers here, kind of confusing".
 *
 * MEASURED. Both strips are position:sticky with top:0 — .ssr-funnelbar (55px, z 50)
 * and .ssrfb-head (128px, z 20). Same anchor, so the lower-stacked one slides straight
 * underneath the other and its first row is half-eaten: "Hi, Nicholas" peeking out from
 * behind the funnel bar is exactly that collision.
 *
 * The F&B head is two clean children — .ssrfb-head-in (78px: wordmark, "Food & Drink",
 * points, greeting) and .ssrfb-tabs (49px: the category rail). Only the second earns a
 * permanent place on screen; the first is a page title, and a page title that follows
 * you down the page is just chrome.
 *
 * THE OFFSET. A sticky element taller than the space it is given can be pulled up by a
 * negative top so only its bottom edge pins — so the head sticks at
 * (funnel bar height - branding height) = 55 - 78 = -23px. The branding rides up out of
 * view under the funnel bar, the category rail lands flush beneath it, and the page
 * keeps ONE header. Sticking .ssrfb-tabs directly would not work: it would unpin the
 * moment its 128px parent scrolled past.
 *
 * Both numbers are the app's, not ours, so they are stated here rather than guessed.
 * If either changes, this offset is the one line to update.
 * ------------------------------------------------------------------------- */

.ssrfb-head {
	top: -23px !important;
}

/* No admin-bar variant. The first version added 32px for it and put the branding back
   on screen. Measured while logged in at 1649px: the funnel bar sticks at top 0 and the
   admin bar sits OVER it, so the funnel bar's bottom edge is 55 whether or not the admin
   bar is present. The offset is relative to that edge, so it does not change.
   (That the admin bar covers the top 32px of the funnel bar is the account app's own
   collision, not this one, flagged, not patched over.) */

/* The rail needs its own ground once the branding has slid behind it, or menu items
   show through as they scroll under.

   Padding was 4px 18px 12px, 4 above the pills against 12 below, so the row sat hard up
   under the funnel bar and read as crowded rather than as its own band. Matching the top
   to the bottom centres the pills in their rail. Nick, 16 Aug: "just add some space above
   the pills nav so its evenly spaced".

   The shadow is the same idiom as the bottom tab bar's, pointed the other way: a 1px line
   is not enough to say "content is scrolling underneath this", and the rail is now the
   only visible edge of the sticky block once the branding has ridden up behind the bar.

   Rail height goes 49 -> 57, so the sticky stack is 112px. The head's -23px offset is
   derived from the BRANDING height, not this one, so it is unaffected. */
.ssrfb-tabs {
	background: #FFFFFF;
	padding-top: 12px !important;
	box-shadow: 0 4px 12px rgba(2, 21, 31, .08);

	/* Full-bleed background, contents still in the column. Nick's standing rule, 15 Aug:
	   "if there is a full-page background, extend it FULL WIDTH, and put the contents in
	   an inner column. i never want to see white edges where a background just ends."

	   The rail shipped as max-width:1040px, centred, with a white fill, so on a desktop
	   it was a white island with #F4F9F8 showing down both sides. Measured at 1664px: rail
	   1040 wide at x=305, page 1649. It is both the background carrier AND the content
	   container with no inner wrapper, so the column is rebuilt out of padding rather than
	   markup: half the viewport minus half the column, with the original 18px as the floor.
	   max() means the same rule serves phones, where the term goes negative.
	   !important throughout: the F&B app's CSS is inline in the body and prints after this
	   stylesheet, so at equal specificity it wins. background and box-shadow above took
	   without it only because the app never declares those two. */
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* 502 = half the 1040 column minus the column's own 18px inset, so the pills sit on
	   the same left edge as "Food & Drink" above them rather than 18px outside it. */
	padding-left: max(18px, calc(50% - 502px)) !important;
	padding-right: max(18px, calc(50% - 502px)) !important;
}

/* =========================================================================
 * 7. The F&B item sheet has to clear the tab bar too.
 *
 * [Ivywild 2026-08-18, Nick] "add to cart is hidden on mobile." It was: the item
 * sheet is `position:fixed; inset:0` with its panel pinned to `align-items:flex-end`,
 * so the panel's last row — which is the "Add to order" button — sits at the very
 * bottom of the viewport, exactly where the tab bar is. The bar is z-index 1000 and
 * the sheet is 60, so the bar wins and the button is behind it. Nothing looked broken:
 * the button rendered, reported its size, and answered a click test at coordinates no
 * thumb can reach.
 *
 * Same treatment the More sheet already gets, and for the reason Nick gave then —
 * "make menu appear above the nav bar bottom mobile". The sheet stops at the top of the
 * bar rather than under it, so the button is reachable and the bar stays usable.
 *
 * Scoped to the classes the tab-bar script publishes, so any page without the bar
 * (desktop, or the staff app) keeps a full-height sheet. The height comes from the
 * measured custom property rather than a guess, because the bar has already been
 * 69px when the hard-coded number said 56.
 * ========================================================================= */
@media (max-width: 1024px) {

	html.ssm-has-tabbar .ssrfb-sheet,
	html.ssm-app .ssrfb-sheet {
		bottom: var(--ssm-tabbar-h, 57px);
	}

	/* The panel already reserves the safe-area inset. Once the sheet stops above the
	   bar that inset is the bar's, not the panel's, and double-counting it leaves a
	   visible band of dead space under the button. */
	html.ssm-has-tabbar .ssrfb-panel,
	html.ssm-app .ssrfb-panel {
		padding-bottom: 24px;
	}

	/* The sticky "view cart" bar, same fault as the sheet and the same fix. It is
	   `bottom:0; z-index:30` against a bar at 1000, so on a phone the one control that
	   tells a customer they have a basket at all was sitting behind the navigation.
	   Between them these two were the whole ordering funnel on mobile: you could not
	   add an item, and if you had, you could not get to the basket. */
	html.ssm-has-tabbar .ssrfb-bar,
	html.ssm-app .ssrfb-bar {
		bottom: var(--ssm-tabbar-h, 57px);
		padding-bottom: 12px;
	}

	/* Content has to clear BOTH bars, or the last menu item hides behind the cart bar
	   the moment something is in the basket. body already clears the tab bar (rule 4),
	   so this is the cart bar's own height on top of it.
	   Reserved unconditionally rather than only while the cart bar is showing: the bar
	   appears the instant the first item is added, and a menu that reflows under the
	   customer's thumb at that exact moment is worse than a little empty space at the
	   end of a long scroll. */
	html.ssm-has-tabbar .ssrfb-menu,
	html.ssm-app .ssrfb-menu {
		padding-bottom: 88px;
	}
}