/*
 Theme Name:   Divi Child (Unicorn)
 Theme URI:    https://unicorn.test
 Description:  Divi child theme for the Unicorn project (Framer -> WordPress migration)
 Author:       Unicorn
 Template:     Divi
 Version:      1.0.0
*/

/*
 * Divi 5 (public beta) ships --content-width/--content-max-width as hardcoded values in a
 * static vendor file (includes/builder/feature/dynamic-assets/assets/css/flex_grid.css), not
 * driven by any theme option — the classic "Website Content Width" Customizer field is read
 * into the builder's JS settings but never reaches this CSS variable. Verified with a full
 * cache clear across et-cache + postmeta and a fresh option write; value never changed.
 * Overriding here since no native admin control reaches it.
 *
 * !important is required: this stylesheet is enqueued (and thus appears in the DOM) BEFORE
 * Divi's own dynamic/critical CSS, which prints its own `:root{--content-width:80%...}` rule
 * later in the page — without !important the later, non-important Divi rule would win the
 * cascade despite our override being present.
 */
:root {
	--content-width: calc(100% - 32px) !important;
}

/*
 * Mobile hamburger menu (divi/menu module, our Theme Builder header) opens as a small
 * absolutely-positioned dropdown by default (position:absolute, height auto-sized to content)
 * with no body scroll lock — confirmed via getComputedStyle there is no native Divi option on
 * this module for "fullscreen mobile menu" or "lock body scroll" (checked module.json fully).
 * Extensively tested switching to Divi's classic "Fullscreen" header format instead: it does
 * provide both natively, but only by replacing the ENTIRE desktop nav with a hamburger too
 * (that's inherent to the format, not a config gap) — unacceptable, so reverted back to our
 * custom header and doing the minimal scoped fix here instead, mobile-breakpoint only.
 *
 * Divi's own JS already toggles the `.mobile_nav.opened` class on click — no custom JS needed,
 * just style off that existing class.
 */
@media (max-width: 980px) {
	.mobile_nav.opened .et_mobile_menu {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 100vh;
		height: 100vh;
		margin: 0 !important;
		padding: 100px 20px 20px !important;
		overflow-y: auto;
		z-index: 999999;
	}

	/* Divi's native 3px accent-blue top border (border-top:3px solid #2ea3f2) is meant to
	   visually connect a small dropdown to its trigger button — stretched across a full
	   viewport-width fullscreen overlay it just reads as a stray blue bar. Applied
	   unconditionally (not scoped to .opened): Divi's JS flips the wrapper's class from
	   "opened" to "closed" immediately on close, but the element itself stays visible
	   (display:block) for ~400ms after via a fade-out — during that window a .opened-scoped
	   rule no longer matches and the native border flashes back in. */
	.et_mobile_menu {
		border-top: none !important;
	}

	/* the menu links carry their own ~17.5px left/right padding (Divi's default, percentage-
	   based) on top of the 20px container padding above, doubling the edge inset — zero it out
	   so the link text lines up with the container's own 20px. */
	.mobile_nav.opened .et_mobile_menu li > a {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* the toggle button must stay above the fixed overlay it just opened, or it becomes
	   unclickable (covered by the overlay) and the menu can't be closed again */
	.mobile_nav.opened .mobile_menu_bar {
		position: relative;
		z-index: 1000000;
	}

	/* divi/menu (the D5 Theme Builder module) never swaps the hamburger glyph for a close (X)
	   icon on open — confirmed no such rule exists anywhere in Divi's generated CSS for this
	   module (only the legacy classic-header markup, which uses a different class we don't
	   have, gets that swap natively). "M" is Divi's icon-font glyph for the X/close icon, same
	   one already used for the classic header's fullscreen-menu close button. */
	.mobile_nav.opened .mobile_menu_bar:before {
		content: "\4d";
	}

	/* same for the logo — otherwise the fullscreen overlay paints over it too. Applied
	   unconditionally (not scoped to .opened) since position:relative + z-index here has no
	   effect while the overlay isn't present. */
	.et_pb_menu__logo-wrap {
		position: relative;
		z-index: 1000000;
	}
}

body:has(.mobile_nav.opened) {
	overflow: hidden;
}

/*
 * Contact page submit button: Divi's own contact-form module hardcodes
 * .et_contact_bottom_container{text-align:right;display:flex;margin-left:auto;margin-right:0}
 * to right-align the submit button — this isn't attribute-driven (the button element's
 * "styleProps.button.disableAlignmentStyles" is explicitly true in module.json, so there's no
 * native per-breakpoint alignment control for it). Tried the module's general
 * advanced.text.orientation field first, but that cascades to field labels/other text too
 * (confirmed: centered everything except the button, the one thing that needed it, since the
 * button is the one element deliberately excluded from that cascade).
 *
 * margin-left/right:auto on the container itself turned out to be a no-op — the container is
 * already exactly as wide as its own parent (both measured 310px), so there's no extra space
 * for auto margins to redistribute. The container is a flex row and the button-wrapper is its
 * child, so justify-content on the container is the correct axis to control here, not the
 * container's own external margin.
 */
@media (max-width: 767px) {
	.et_contact_bottom_container {
		justify-content: center !important;
	}
}