/**
 * DriveSafest — site-wide tweaks
 * Blue logged-in bar (Site Header mega-menu, element 466da18):
 * always a row of links (breakpoint disabled at the widget level); below phone
 * widths the row is allowed to wrap and slim down so it stays usable — and the
 * page never scrolls sideways — all the way to 320px (WCAG 1.4.10 reflow).
 */

/* the row may wrap onto a second line instead of overflowing */
.elementor-element-466da18 .e-n-menu-heading {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 2px;
}

/* belt-and-suspenders: if any stale cache still renders the toggle, never show it */
.elementor-element-466da18 .e-n-menu-toggle {
	display: none !important;
}
.elementor-element-466da18 .e-n-menu-wrapper {
	max-width: 100%;
}

/* phone widths: slim the links, keep touch targets honest (≥24px, WCAG 2.5.8) */
@media (max-width: 600px) {
	.elementor-element-466da18 .e-n-menu-title {
		padding-block: 6px;
	}
	.elementor-element-466da18 .e-n-menu-title-text,
	.elementor-element-466da18 .e-n-menu-title a {
		font-size: 14px;
		line-height: 1.6;
	}
}

@media (max-width: 380px) {
	.elementor-element-466da18 .e-n-menu-title-text,
	.elementor-element-466da18 .e-n-menu-title a {
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------------------
 * Header actions: Organization Login sits beside Purchase Course on desktop and
 * stacks above it when the header runs out of room.
 * ------------------------------------------------------------------------ */
/*
 * Elementor drives container layout through custom properties, so setting
 * `flex-direction` directly is ignored — the value has to go into --flex-direction
 * for the container's own rule to pick it up.
 */
body .elementor-location-header .elementor-element.elementor-element-5ff56f9 {
	/* Elementor ships this column as `--flex-direction: column` at `--width: 25%`, which
	   both stacks the buttons and leaves no room for two. Qualifying with the header
	   location beats its single-class rule. */
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: flex-end;
	--align-items: center;
	--gap: 10px 10px;
	--row-gap: 10px;
	--column-gap: 10px;
	--container-widget-width: auto;
	--container-widget-flex-grow: 0;
	--width: 34%;
}

/* Trim the horizontal padding just enough for both to sit on one line. */
body .elementor-location-header .elementor-element.elementor-element-5ff56f9 .elementor-button {
	padding-left: 20px;
	padding-right: 20px;
}

.elementor-element-5ff56f9 > .elementor-widget-button { width: auto; }

.elementor-element-5ff56f9 .elementor-button { white-space: nowrap; }

/* The outline button needs a hover state that reads on the white header. */
.ds-org-login .elementor-button {
	background-color: transparent;
	transition: background-color .18s ease, color .18s ease;
}

.ds-org-login .elementor-button:hover,
.ds-org-login .elementor-button:focus {
	background-color: var(--e-global-color-primary, #006ACB);
	border-color: var(--e-global-color-primary, #006ACB);
	color: #fff;
}

/* Below the header's breakpoint the two actions stack full width and stay tappable. */
@media (max-width: 767px) {
	body .elementor-location-header .elementor-element.elementor-element-5ff56f9 {
		--width: 100%;
		--flex-direction: column;
		--justify-content: center;
		--container-widget-width: 100%;
	}

	/* The widget wrapper has to go full width too, or the button's own 100% just
	   fills a shrink-to-fit box and the two actions come out different widths. */
	body .elementor-location-header .elementor-element.elementor-element-5ff56f9 > .elementor-widget-button {
		width: 100%;
	}

	/*
	 * Phone sizing. Elementor serves the desktop type ramp here (20.8px with 20px of
	 * vertical padding), which on a stacked pair costs ~40px of a screen that is only
	 * 568px tall on an iPhone SE. 16px/12px keeps the buttons comfortably above the
	 * 44px touch-target floor while giving that height back to the page.
	 */
	body .elementor-location-header .elementor-element.elementor-element-5ff56f9 .elementor-button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
		font-size: 16px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-org-login .elementor-button { transition: none; }
}

/* ---------- code learner's blue bar (Begin / Resume / Log Out) ---------- */
.ds-learnernav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 10px;
	padding: 4px 0;
}

.ds-learnernav__link {
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	padding: 8px 6px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.ds-learnernav__link:hover,
.ds-learnernav__link:focus { color: #FFE23E; }
.ds-learnernav__sep { color: rgba(255, 255, 255, .55); }

@media (max-width: 380px) {
	.ds-learnernav__link { font-size: 0.9rem; padding: 8px 4px; }
}