/* BYS studio mobile menu (2026-09-25, standing). Installed on every studio site's child theme as
   custom/css/mobile-menu.css by exports/install-mobile-menu-css.py; checked by gate 9, exports/check-mobile-menu.py.

   Divi opens the mobile menu at 100% of the MENU MODULE's width. The studio's headers centre the logo, menu, cart and
   button in one flex row, so the menu module is only as wide as its hamburger and the menu opened 44px wide, every
   word broken a letter at a time. Below 981px the menu module, its wrappers, any
   group and its column stop being the positioning box, so the menu hangs from the header's content ROW: the full
   width of the page's content grid, directly under the header row, scrolling inside itself when it is taller than
   the screen. Geometry only: colours and fonts stay each build's brand layer (the menu module's mobile-menu settings
   or the site's own sheet). */
@media (max-width: 980px) {
	.et-l--header .et_pb_column:has(.et_mobile_menu),
	.et-l--header .et_pb_group:has(.et_mobile_menu),
	.et-l--header .et_pb_menu:has(.et_mobile_menu),
	.et-l--header .et_pb_menu .et_pb_menu_inner_container,
	.et-l--header .et_pb_menu .et_pb_menu__wrap,
	.et-l--header .et_pb_menu .et_mobile_nav_menu,
	.et-l--header .et_pb_menu .mobile_nav { position: static !important; }
	.et-l--header .et_pb_row:has(.et_mobile_menu) { position: relative; }
	.et-l--header .et_pb_menu .et_mobile_menu {
		left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; top: 100% !important;
		max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain;
	}
	.et-l--header .et_pb_menu .et_mobile_menu li a {
		padding-top: 12px !important; padding-bottom: 12px !important; line-height: 1.35; overflow-wrap: normal; word-break: normal;
	}
}

/* BRANDED MOBILE HEADER (2026-10-15, a studio standard: the logo enlarged and centred, optionally hanging slightly into the hero;
   a larger hamburger with the word MENU above it). OPT-IN per site: the BYS
   MOBILE MENU block in functions.php turns the site option bys_mobile_header (words: plain or button, plus center and hang) into
   body classes; set it with exports/install-mobile-menu-css.py --header "<words>" <site>. Below 981px:
     bys-mobile-header            every site that opts in: a larger hamburger in the brand ink with a MENU label above it, pinned to
                                  the header row's right edge; the open menu stays above the logo
     bys-mobile-header--button    the icon on a filled ink tile instead
     bys-mobile-header--center    on PHONES the logo centred in the header row at --bys-mh-logo wide (the row keeps --bys-mh-row of
                                  height); tablets keep the header's own layout, where buttons and carts show
     bys-mobile-header--hang      with center, phones and tablets: the logo hangs into the section below with a soft shadow and the optional
                                  --bys-mh-outline, and the page's first section is padded to clear the overhang (badge logos)
   The logo is the menu module's own logo or, for headers that place it as an image module, the image in the first column of the
   row that holds the menu. The site's own sheet sets --bys-mh-ink (brand ink) and, for center, --bys-mh-logo and --bys-mh-row.
   Gate 9 still taps the hamburger. */
@media (max-width: 980px) {
	body.bys-mobile-header {
		--bys-mh-logo: 116px;        /* logo width (center) */
		--bys-mh-top: 10px;          /* logo top inside the header row (hang) */
		--bys-mh-row: 92px;          /* the header row's height (center) */
		--bys-mh-icon: 44px;         /* hamburger icon size */
		--bys-mh-ink: #1F2933;       /* icon and label colour; the site sheet sets its brand ink */
		--bys-mh-on-ink: #FFFFFF;    /* icon colour on the filled tile (button) */
		--bys-mh-shadow: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
		/* --bys-mh-outline (optional, hang): e.g. four 2px white drop-shadows, which trace the logo's own shape, not its square
		   box; unset = no outline */
		--bys-mh-overlap: calc(var(--bys-mh-top) + var(--bys-mh-logo) - var(--bys-mh-row));
	}
	body.bys-mobile-header .et-l--header { position: relative; z-index: 30; }
	/* the hamburger: pinned to the header row's right edge (the row is the positioning box, see above); only the button moves,
	   so the dropdown still hangs full width from the row */
	body.bys-mobile-header .et-l--header .et_pb_menu .mobile_menu_bar {
		display: flex !important; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; line-height: 1 !important; cursor: pointer;
		position: absolute !important; right: var(--bys-mh-edge, 5%); top: 50%; transform: translateY(-50%); z-index: 3;
	}
	body.bys-mobile-header .et-l--header .et_pb_menu .mobile_menu_bar::before {
		font-size: var(--bys-mh-icon) !important; line-height: 1 !important; color: var(--bys-mh-ink) !important; position: static !important; top: auto !important;
	}
	body.bys-mobile-header .et-l--header .et_pb_menu .mobile_menu_bar::after {
		content: "MENU"; order: -1; font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 1; color: var(--bys-mh-ink); font-family: inherit;
	}
	body.bys-mobile-header--button .et-l--header .et_pb_menu .mobile_menu_bar::before {
		background: var(--bys-mh-ink); color: var(--bys-mh-on-ink) !important; border-radius: 8px; padding: 4px 7px;
		font-size: calc(var(--bys-mh-icon) - 8px) !important;
	}
	body.bys-mobile-header .et-l--header .et_pb_menu .et_pb_menu__wrap { justify-content: flex-end !important; margin-left: auto; }
	body.bys-mobile-header .et-l--header .et_pb_menu .et_mobile_menu { z-index: 40 !important; }

	/* room for the pinned hamburger: any other visible column after the logo (a call or shop button, a cart) keeps clear of it */
	body.bys-mobile-header .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:not(:first-child):not(:has(.mobile_menu_bar)) { margin-right: var(--bys-mh-room, 76px) !important; }

	/* hang: the logo drops into the section below (badge logos) */
	body.bys-mobile-header--hang .et-l--header,
	body.bys-mobile-header--hang .et-l--header .et_pb_section:has(.mobile_menu_bar),
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) { overflow: visible !important; }
	/* room under the hanging logo: the page's first section starts its content below the overhang (Divi's phone padding is
	   about 30 to 45px, which the logo would cover); a site sheet can override --bys-mh-gap or this rule for a special hero */
	body.bys-mobile-header--hang .et-l--post .et_builder_inner_content > .et_pb_section:first-child,
	body.bys-mobile-header--hang .et-l--body .et_builder_inner_content > .et_pb_section:first-child {
		padding-top: calc(var(--bys-mh-overlap) + var(--bys-mh-gap, 28px)) !important;
	}
}
/* centre: phones for "center" (tablets keep each header's own layout, where buttons and carts show); phones and tablets for "hang" */
@media (max-width: 767px) {
	/* center: the logo in the middle of the header row */
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) { min-height: var(--bys-mh-row); display: flex; align-items: center; }
	/* an image-module logo centres on the ROW: its column and any group around it stop being the positioning box */
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child,
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_group:has(.et_pb_image) { position: static !important; }
	body.bys-mobile-header--center .et-l--header .et_pb_menu .et_pb_menu__logo-wrap,
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image {
		position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
		width: var(--bys-mh-logo) !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
	}
	body.bys-mobile-header--center .et-l--header .et_pb_menu .et_pb_menu__logo,
	body.bys-mobile-header--center .et-l--header .et_pb_menu .et_pb_menu__logo a,
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image .et_pb_image_wrap {
		display: block; width: var(--bys-mh-logo) !important; max-width: none !important; flex: none !important; overflow: visible !important;   /* Divi sizes the logo box (86px, overflow hidden) */
	}
	body.bys-mobile-header--center .et-l--header .et_pb_menu .et_pb_menu__logo img,
	body.bys-mobile-header--center .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image img {
		width: var(--bys-mh-logo) !important; height: auto !important; max-height: none !important; max-width: none !important;
	}

}
@media (max-width: 980px) {
	/* center: the logo in the middle of the header row */
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) { min-height: var(--bys-mh-row); display: flex; align-items: center; }
	/* an image-module logo centres on the ROW: its column and any group around it stop being the positioning box */
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_group:has(.et_pb_image) { position: static !important; }
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo-wrap,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image {
		position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
		width: var(--bys-mh-logo) !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
	}
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo,
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo a,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image .et_pb_image_wrap {
		display: block; width: var(--bys-mh-logo) !important; max-width: none !important; flex: none !important; overflow: visible !important;   /* Divi sizes the logo box (86px, overflow hidden) */
	}
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo img,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image img {
		width: var(--bys-mh-logo) !important; height: auto !important; max-height: none !important; max-width: none !important;
	}

}
/* hang: the logo drops from near the top of the row instead of its middle (after the centring above, so it wins) */
@media (max-width: 980px) {
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo-wrap,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image { top: var(--bys-mh-top); transform: translateX(-50%); }
	body.bys-mobile-header--hang .et-l--header .et_pb_menu .et_pb_menu__logo img,
	body.bys-mobile-header--hang .et-l--header .et_pb_row:has(.mobile_menu_bar) > .et_pb_column:first-child .et_pb_image img { filter: var(--bys-mh-outline,) var(--bys-mh-shadow); }
}
@media (min-width: 768px) and (max-width: 980px) {
	body.bys-mobile-header--hang { --bys-mh-logo: 140px; --bys-mh-row: 104px; }
}