/* ==========================================================================
   Header cleanup - generalized to every copy of this header, not just the
   shared ElementsKit template (post 49911).

   The site has 4 independent copies of the same header design: the shared
   template (used by most pages) plus 3 more baked directly into old
   Elementor Theme Builder templates left over from the theme's original
   demo import (job listings archive, blog archive, and all individual blog
   posts - these bypass the theme's header.php entirely, so they never got
   the shared template's fixes). All 4 have the exact same widget structure
   (image+heading, phone-icon+nav, nav+nav, button, button in that order)
   and are all marked with `she-header-yes`, a class a third-party plugin
   (Sticky Header Effects for Elementor) adds automatically at render time -
   present on every copy even though it isn't stored in any of their saved
   content. Targeting that structure instead of any one copy's random
   per-instance element IDs means this fixes all 4 at once.

   The underlying problem on all of them: fixed percentage-width columns
   sized for a shorter menu. With 7-8 nav items the nav wraps to two lines
   and the CTA/icon/phone cluster gets squeezed.
   ========================================================================== */

/* Header band (desktop + mobile/tablet variant): darken so white/red text
   is legible over the photo instead of relying on the busy image alone */
.she-header-yes {
	position: relative !important;
}
.she-header-yes::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 18, 0.82);
	z-index: 0;
	pointer-events: none;
}
.she-header-yes > * {
	position: relative;
	z-index: 1;
}

/* Everything below is desktop-only - identified by `elementor-hidden-tablet`,
   which only the desktop-visible copy of each header carries (the mobile/
   tablet copy carries `elementor-hidden-desktop` instead and is left as-is,
   since it already collapses to a single hamburger button). */

/* Row: grid instead of a flat flex row. Logo and nav each span both rows;
   the CTA button and phone number stack into the same column (was two
   side-by-side ~150px items, now one ~150px column) with the login icon
   as its own narrow column. That plus the ESPACES menu merge frees up
   roughly 350px, so the nav no longer needs extreme compression. */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con {
	display: grid !important;
	grid-template-columns: auto 1fr auto auto !important;
	grid-template-rows: auto auto !important;
	align-items: center !important;
	column-gap: 10px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Logo: fixed compact width instead of a fluid % of the row (1st of the 5
   widget containers) */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(1) {
	grid-column: 1 !important;
	grid-row: 1 / 3 !important;
	width: auto !important;
	max-width: 125px !important;
}

/* Primary nav: take all the remaining space so items fit on one line (2nd
   container - also holds a mobile-only click-to-call icon, hidden on
   desktop already, so it doesn't affect this layout).
   Note: deliberately NOT using overflow-x:auto here as a "just in case it
   doesn't fit" fallback - CSS forces overflow-y to also become clipped
   whenever overflow-x isn't visible, which hides the ARTUS MAROC/ESPACES
   dropdown submenus (they render below this container). The ESPACES merge
   and button stacking already make everything fit at 1280px+, so no
   fallback is needed; if it doesn't fit at some width, items overflow
   visibly rather than the dropdowns silently breaking. */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(2) {
	grid-column: 2 !important;
	grid-row: 1 / 3 !important;
	width: auto !important;
	min-width: 0 !important;
}
.she-header-yes.elementor-hidden-tablet .elementskit-navbar-nav {
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
}
.she-header-yes.elementor-hidden-tablet .elementskit-navbar-nav > li > a {
	padding: 7px 7px !important;
	font-size: 12.5px !important;
	white-space: nowrap !important;
}

/* CTA button (top, 3rd container) and phone number (bottom, 5th container)
   share one column */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(3) {
	grid-column: 3 !important;
	grid-row: 1 !important;
	width: auto !important;
	align-self: end !important;
	justify-self: stretch !important;
}
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(5) {
	grid-column: 3 !important;
	grid-row: 2 !important;
	width: auto !important;
	align-self: start !important;
	justify-self: stretch !important;
}
/* Login icon: its own narrow column, vertically centered across both rows
   (4th container) */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(4) {
	grid-column: 4 !important;
	grid-row: 1 / 3 !important;
	width: auto !important;
	display: flex !important;
	align-items: center !important;
}

/* "Créer mon compte": render as a proper button, matching the brand red
   used elsewhere on the site, instead of a plain menu link */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(3) .ekit-menu-nav-link {
	background-color: #ED1C24 !important;
	color: #FFFFFF !important;
	padding: 5px 12px !important;
	border-radius: 4px 4px 0 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(3) .ekit-menu-nav-link:hover {
	background-color: #FFFFFF !important;
	color: #000000 !important;
}

/* Phone number: bottom half of the stack, rounded on the bottom only so
   the pair reads as one joined block */
.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(5) .elementor-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 5px 10px !important;
	box-sizing: border-box !important;
	font-size: 12px !important;
	border-radius: 0 0 4px 4px !important;
	width: 100% !important;
}

.she-header-yes.elementor-hidden-tablet > .e-con > .e-con > .e-con:nth-child(4) .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	padding: 9px 10px !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   Footer logo (Elementor image widget f397b7f)
   Elementor's own generated CSS forces `width:100%; height:55px` on this
   image, ignoring its real 1250x522 aspect ratio - stretching a compact
   logo across the whole footer column. Swap to a fixed height with auto
   width so it scales proportionally instead of distorting.
   ========================================================================== */
.elementor-element-f397b7f img {
	width: auto !important;
	height: 55px !important;
	max-width: 100% !important;
}

/* ==========================================================================
   Contact page: hover-state contrast on the address/phone/email list
   (widget f11972a, "Casablanca Siège" card and its sibling location cards).
   Resting state is white text (#FFF1F1) on the dark grey card - good
   contrast. On hover it switches to brand red (#ED1C24) on that same dark
   grey (#4D4D4F), which is low-contrast and hard to read. Keep the hover
   affordance but on the icon instead of the text, since the icon already
   turns white->stays white; use a lighter tint for the text on hover so it
   still signals "interactive" without dropping to red-on-grey.
   ========================================================================== */
.elementor-icon-list-item:hover .elementor-icon-list-text {
	color: #FFEEEE !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   Homepage "Nos Agences" tabs widget (1b6b050): the address/phone/email
   are plain <a> tags with no widget-specific styling, so they fall through
   to the theme's generic `a:hover { color: #606E75 }` rule. On this
   widget's dark grey card background (#4D4D4F), red-at-rest (#ED1C24)
   dropping to that grey on hover is nearly illegible - same problem as
   the Contact page cards above, different widget the earlier fix didn't
   reach. Same fix direction: lighter, underlined tint on hover instead
   of grey.
   ========================================================================== */
.elementor-element-1b6b050 a:hover {
	color: #FFEEEE !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   Header: "Créer mon compte" doubling up with "Mon espace" when logged in.

   "Mon espace" (menu item, dropdown toggle class `ekit-menu-dropdown-toggle`)
   was added as a logged-in-only item in the same nav menu as "Créer mon
   compte" (menu-item-57470, links to /soumettre-mon-cv/). "Mon espace" is
   correctly restricted to logged-in users, but "Créer mon compte" was never
   restricted to logged-out users, so both render side by side once a user
   (admin, candidate, or company) is logged in - the extra red button seen
   stacked on top of "Mon espace" and the header nav.

   Fix: hide menu-item-57470 whenever WordPress's own `logged-in` body class
   is present, instead of editing the menu's visibility settings in wp-admin.
   Targets the id directly so it also covers the mobile/tablet copy of the
   same menu, which renders the same WP menu item with the same id.
   ========================================================================== */
body.logged-in #menu-item-57470 {
	display: none !important;
}