/**
 * SAA mobile portal-header fix — logo left, hamburger right, single row.
 *
 * The site-wide header is an Elementor Theme-Builder template (post 368). On mobile
 * (<=767px) both of its columns carry Elementor's width_mobile:100%, so the menu
 * column wraps to a full-width SECOND row while the section's un-overridden
 * justify-content:center leaves the logo CENTERED on row one. Figma's mobile header
 * (file dhdaUlzpYTLtKPzXdKkepP, node 172:510) is a SINGLE row: logo left, hamburger
 * right, no inline account buttons.
 *
 * Cascade (rule 15): the owning layer is Elementor's generated post-368.css
 * (.elementor-368 .elementor-element.elementor-element-XXXX = 0,3,0). We win by
 * scoping to [data-elementor-id="368"] + the element-id class (also 0,3,0) and
 * loading this stylesheet AFTER post-368.css (enqueued at priority 100 in
 * functions.php) so source order decides. No !important required. Verified on the
 * real staging DOM (logo x18/16px inset, hamburger 16px from right, one 81px row).
 *
 * FRAGILE: the .elementor-element-XXXX hashes below are the header template's
 * element ids on STAGING/LIVE (3ae75d14 = mobile section, 80c37ce = logo column,
 * 4efbae7 = menu column). Elementor element-ids are ENVIRONMENT-DIVERGENT (rule 15
 * §4) — the localhost DB snapshot carries different hashes. If the mobile header
 * ever renders two-rows/centered again after an Elementor re-save or on a fresh
 * environment, re-read the ids from the real DOM and update them here. The inline
 * SIGN OUT + Accreditation Portal buttons are hidden by widget TYPE
 * (.elementor-widget-button, hash-free) so that part survives id drift.
 */
@media ( max-width: 767px ) {

	/* Single row, logo-left / menu-right — beats 3ae75d14's base
	   --justify-content:center + --flex-wrap-mobile:wrap (both 0,3,0; ours loads later). */
	[data-elementor-id="368"] .elementor-element.elementor-element-3ae75d14 {
		--justify-content: space-between;
		--flex-wrap-mobile: nowrap;
		flex-wrap: nowrap;
		align-items: center;
		padding-top: 13px;
		padding-bottom: 13px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Undo Elementor's width_mobile:100% on both columns so they shrink to content
	   (that full-width menu column is what wrapped to a second row). */
	[data-elementor-id="368"] .elementor-element.elementor-element-80c37ce,
	[data-elementor-id="368"] .elementor-element.elementor-element-4efbae7 {
		--width: auto;
		width: auto;
		flex: 0 0 auto;
	}

	/* Pin the hamburger group to the header's right edge. */
	[data-elementor-id="368"] .elementor-element.elementor-element-4efbae7 {
		--justify-content: flex-end;
		margin-left: auto;
	}

	/* Figma collapsed header shows ONLY logo + hamburger. Hide the inline SIGN OUT +
	   Accreditation Portal buttons on mobile; they move into the hamburger menu (the
	   WP nav menu the header's nav-menu widget renders). Hidden by widget type so this
	   survives element-id drift. */
	[data-elementor-id="368"] .elementor-widget-button {
		display: none;
	}

	/* Admin/logged-in view: the wp-admin bar account avatar (#wp-admin-bar-my-account)
	   renders at the top-right and, now that the hamburger lives in that corner, sat ON
	   TOP of it. Nudge the avatar left so it sits beside (left of) the hamburger. Only
	   affects users who see the admin bar (staff/admins) — real installers don't. */
	#wpadminbar #wp-admin-bar-my-account {
		margin-right: 50px;
	}
}

/* Portal auth links (functions.php saa_header_auth_menu_items) are appended to the
   header "Main menu": logged-in -> Accreditation Portal + Sign Out; logged-out ->
   Portal Login. They belong ONLY in the mobile hamburger (<=767px), where the inline
   header buttons are hidden. Hide them at >=768px so the desktop/tablet nav keeps its
   own inline buttons (no duplication). */
@media ( min-width: 768px ) {

	.saa-header-auth-item {
		display: none !important;
	}
}