/*
 * Layout grid — divi-child theme, enqueued after Divi's own styles (functions.php).
 *
 * One grid for header, hero, content and footer: 90% wide (a 5% gutter each side), capped at
 * 1200px. The cap itself is Divi's own "Website content width" (theme_mod content_width = 1200);
 * this file only moves Divi's default row width from 80% to 90%.
 *
 * Rows with a width of their own (the 40% contact form, the 45–60% testimonial insets) keep it:
 * Divi's per-module CSS is more specific than these rules.
 */
body .et_pb_row:not(.et_pb_row_fullwidth) {
	width: 90%;
}

/*
 * Full-bleed heroes (a row at 100% with a photo column and a text column): background and photo
 * stay edge to edge, the OUTER padding of each column becomes the grid gutter so the text lines up
 * with the logo above and the content below. Padding % is relative to the row, i.e. the viewport:
 * 5% below 1333px wide, (100% − 1200px) / 2 above it.
 */
body .et_pb_row_fullwidth > .et_pb_column:first-child {
	padding-left: max(5%, calc((100% - 1200px) / 2)) !important;
}
body .et_pb_row_fullwidth > .et_pb_column:last-child {
	padding-right: max(5%, calc((100% - 1200px) / 2)) !important;
}

/* Stacked on tablet/phone: the same 5% on both sides. */
@media (max-width: 980px) {
	body .et_pb_row_fullwidth > .et_pb_column {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
}

/*
 * Header menu flush right on the grid edge.
 * The menu module uses Divi's "centered" style, which centres everything in its column.
 * (Switching the module to "left_aligned" does NOT help — it left-aligns them.)
 * Desktop: Divi already offsets the item list by -11px, so the last item's TEXT meets the edge.
 */
.et-l--header .et_pb_menu .et_pb_menu__wrap,
.et-l--header .et_pb_menu .et-menu {
	justify-content: flex-end;
}

/*
 * Tablet/phone dropdown: span the full screen wherever the hamburger sits.
 * The site's Additional CSS had `.et_mobile_menu { min-width: 100vw; margin-left: -82vw }` — an
 * offset hand-tuned to a hamburger at ~82% of the screen. It roughly held on phones and threw the
 * panel off-screen on tablets (live, before this change: 253px off the left edge at 768px).
 * Instead, drop the positioning context down to the header SECTION (full width, left 0) and pin the
 * panel to it. The section stays positioned when Divi makes it sticky, so this holds while scrolled.
 */
@media (max-width: 980px) {
	.et-l--header .et_pb_row,
	.et-l--header .et_pb_column,
	.et-l--header .et_pb_menu,
	.et-l--header .et_pb_menu_inner_container {
		position: static;
	}
	.et-l--header .et_pb_menu .et_mobile_menu {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		margin-left: 0;
	}
	/*
	 * The "MENU" label (Additional CSS: `.et_mobile_nav_menu:before { position: absolute; right: 40px }`)
	 * was measured from the small container around the hamburger. That container is now static, so
	 * it measures from the section — add the 5% grid gutter to keep it left of the hamburger.
	 */
	.et-l--header .et_mobile_nav_menu:before {
		right: calc(5% + 40px);
	}
}