/* WorkScout Platform — site-wide styles: design tokens, header and footer.
   Loaded on every front-end page. Restyles the WorkScout theme's own header
   and footer markup; menus, login and the mobile menu keep working as before. */

:root {
	--wsp-brand: #0389e2;
	--wsp-action: #0270bb;
	--wsp-action-dark: #015a96;
	--wsp-ink: #091d2e;
	--wsp-text: #3c434a;
	--wsp-muted: #5b6470;
	--wsp-sky: #eaf5fd;
	--wsp-cream: #fdf8ee;
	--wsp-line: #e3e6ea;
	--wsp-radius: 16px;
}

/* Screen-reader text (the theme does not define it everywhere). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ================================================================== */
/* Header                                                             */
/* ================================================================== */

/* Layout by width:
   - 1366px and wider: logo left, menu centred on the page, account menu right.
   - below 1366px: the menu button opens the menu panel. The full menu does
     not fit in one centred row below that width.
   Menu labels are written in sentence case in Appearance → Menus, so no
   text-transform is applied. "#header-container #header" outranks the
   theme's ".new-header #header" rules. */

#header {
	background: #fff;
	border-bottom: 1px solid var(--wsp-line);
	box-shadow: none;
}

#header-container.cloned #header,
#header-container.sticky #header { box-shadow: 0 6px 24px rgba(9, 29, 46, 0.08); }

#header #logo_nh { margin-right: 0; padding-right: 0; border-right: 0; }
#header #logo_nh a { display: flex; align-items: center; height: 100%; }
#header #logo_nh img { width: auto; height: 44px; max-height: none; top: auto; transform: none; }

/* Right side: account menu (signed-in team only); no divider */
#header .right-side,
#header .right-side .header-widget,
#header .header-notifications { border-left: 0; }
#header .header-notifications-trigger a { color: var(--wsp-ink); font-weight: 500; }

/* Menu button (the theme's grey square becomes a soft blue tile, with the
   three lines centred in it) */
#header .right-side .header-widget { border-right: 0; }
#header .mmenu-trigger {
	width: 44px;
	height: 44px;
	border-left: 0;
	border-radius: 12px;
	background-color: var(--wsp-sky);
}
#header .mmenu-trigger:hover { background-color: #d6ebfb; }
#header .mmenu-trigger .hamburger {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 22px;
	margin: 0;
	transform: translate(-50%, -50%);
}
#header .mmenu-trigger .hamburger-box { display: block; width: 24px; height: 22px; }
#header .mmenu-trigger .hamburger-inner,
#header .mmenu-trigger .hamburger-inner::before,
#header .mmenu-trigger .hamburger-inner::after {
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--wsp-ink);
}

@media (max-width: 1365px) {
	#header-container #header #navigation { display: none; }
	#header-container #header .mmenu-trigger {
		display: block;
		top: 50%;
		margin: 0 0 0 12px;
		transform: translateY(-50%);
	}
}

@media (min-width: 1366px) {
	#header-container #header .left-side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		width: 100%;
		float: none;
	}
	#header-container #header .left-side > .clearfix { display: none; }
	#header-container #header #logo_nh { grid-column: 1; justify-self: start; }
	#header-container #header #logo_nh img { height: 56px; }
	#header-container #header #navigation { grid-column: 2; width: auto; margin: 0; }
	#header-container #header #navigation #responsive { display: flex; align-items: center; gap: 2px; width: auto; float: none; }
	#header-container #header #navigation #responsive > li { float: none; }
	#header-container #header .mmenu-trigger { display: none; }

	/* The logo already links to the homepage */
	#header #navigation #responsive > li.wsp-menu-home { display: none; }

	#header #navigation #responsive > li > a {
		padding: 8px 9px;
		border-radius: 999px;
		background: transparent;
		color: var(--wsp-ink);
		font-weight: 500;
		font-size: 13px;
		line-height: 1.3;
		text-transform: none;
		white-space: nowrap;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	#header #navigation #responsive > li > a:hover,
	#header #navigation #responsive > li:hover > a,
	#header #navigation #responsive > li > a:focus-visible,
	#header #navigation #responsive > li.current-menu-item > a,
	#header #navigation #responsive > li.current-menu-ancestor > a,
	#header #navigation #responsive > li.current_page_item > a {
		background: var(--wsp-sky);
		color: var(--wsp-action);
	}

	#header #navigation #responsive > li > a:focus-visible { outline: 3px solid var(--wsp-action); outline-offset: 2px; }

	/* GET HIRED eBook (CSS class wsp-menu-ebook): book icon, warm accent */
	#header #navigation #responsive > li.wsp-menu-ebook > a { display: inline-flex; align-items: center; gap: 6px; color: #8a4b08; font-weight: 600; }
	#header #navigation #responsive > li.wsp-menu-ebook > a::before {
		content: "";
		width: 16px;
		height: 16px;
		flex: none;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	#header #navigation #responsive > li.wsp-menu-ebook > a:hover,
	#header #navigation #responsive > li.wsp-menu-ebook > a:focus-visible { background: var(--wsp-cream); color: #8a4b08; }

	/* "Advertise a job" (CSS class wsp-menu-cta): solid button */
	#header #navigation #responsive > li.wsp-menu-cta { margin-left: 6px; }
	#header #navigation #responsive > li.wsp-menu-cta > a { background: var(--wsp-action); color: #fff; font-weight: 600; }
	#header #navigation #responsive > li.wsp-menu-cta > a:hover,
	#header #navigation #responsive > li.wsp-menu-cta > a:focus-visible,
	#header #navigation #responsive > li.wsp-menu-cta.current-menu-item > a { background: var(--wsp-action-dark); color: #fff; }

	/* Dropdowns: white card instead of the theme's dark panel */
	#header #navigation ul ul {
		padding: 8px;
		border: 1px solid var(--wsp-line);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 12px 32px rgba(9, 29, 46, 0.12);
	}
	#header #navigation ul ul::after { display: none; }
	#header #navigation ul ul li a {
		padding: 9px 12px;
		border-radius: 8px;
		background: transparent;
		color: var(--wsp-text);
		font-size: 14px;
		line-height: 1.4;
		text-transform: none;
	}
	#header #navigation ul ul li a:hover,
	#header #navigation ul ul li a:focus-visible { background: var(--wsp-sky); color: var(--wsp-action); }
}

/* Signed-in team only: avatar without the "Hi, name" text while space is tight */
@media (min-width: 1366px) and (max-width: 1599px) {
	#header .header-notifications-trigger .user-avatar-title { display: none; }
	#header .right-side .header-widget { padding-left: 8px; }
}

/* Large screens: roomier links */
@media (min-width: 1600px) {
	#header #navigation #responsive > li > a { padding: 8px 12px; font-size: 14px; }
}

/* Mobile menu panel: site navy instead of the theme's grey */
.mobile-navigation-wrapper,
.mobile-navigation-wrapper #mobile-nav .sub-menu,
.mobile-navigation-wrapper #mobile-nav .open-submenu > .sub-menu { background: var(--wsp-ink); }
.mobile-navigation-wrapper .mobile-nav-header {
	background: var(--wsp-ink);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-navigation-wrapper .menu-logo a img {
	width: auto;
	height: 44px;
	max-height: none;
	padding: 4px;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
}
.mobile-navigation-wrapper .menu-icon-toggle {
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.mobile-navigation-wrapper #mobile-nav li a {
	color: #e3ebf2;
	font-weight: 500;
	font-size: 16px;
	text-transform: none;
}
.mobile-navigation-wrapper #mobile-nav li a:hover,
.mobile-navigation-wrapper #mobile-nav li a:focus-visible,
.mobile-navigation-wrapper #mobile-nav li.current-menu-item > a { color: #fff; }
.mobile-navigation-wrapper #mobile-nav li.current-menu-item > a { color: #9cc9ef; }
.mobile-navigation-wrapper #mobile-nav .sub-menu-back-btn {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	color: #9cc9ef;
}
.mobile-navigation-wrapper #mobile-nav li.wsp-menu-cta > a {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--wsp-brand);
	color: #fff;
	font-weight: 600;
}
@media (min-width: 600px) {
	.mobile-navigation-wrapper { max-width: 420px; }
}
/* On small screens the eBook appears as a card below the menu (a Custom HTML
   block in Appearance → Widgets → Mobile Menu widget), not as a menu link. */
.mobile-navigation-wrapper #mobile-nav li.wsp-menu-ebook { display: none; }

.mobile-navigation-wrapper .mobile-nav-widgets { padding: 0 20px 32px; }
.wsp-ebook-card {
	padding: 18px;
	border-radius: 16px;
	background: var(--wsp-cream);
	color: var(--wsp-ink);
}
.wsp-ebook-card .wsp-ebook-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	color: #8a4b08;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: none;
}
.wsp-ebook-card .wsp-ebook-card__title {
	margin: 0 0 12px;
	color: var(--wsp-ink);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
}
.wsp-ebook-card .wsp-ebook-card__list { margin: 0 0 16px; padding: 0; list-style: none; }
.wsp-ebook-card .wsp-ebook-card__list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 26px;
	color: var(--wsp-text);
	font-size: 14.5px;
	line-height: 1.45;
}
.wsp-ebook-card .wsp-ebook-card__list li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.mobile-navigation-wrapper .wsp-ebook-card .wsp-ebook-card__btn {
	display: block;
	padding: 14px 18px;
	border-radius: 999px;
	background: var(--wsp-action);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}
.mobile-navigation-wrapper .wsp-ebook-card .wsp-ebook-card__btn:hover,
.mobile-navigation-wrapper .wsp-ebook-card .wsp-ebook-card__btn:focus-visible { background: var(--wsp-action-dark); color: #fff; }
.wsp-ebook-card .wsp-ebook-card__note { margin: 10px 0 0; color: var(--wsp-muted); font-size: 12.5px; text-align: center; }

/* Sign-up closed: hide the login pop-up's "Don't have an account? Sign up now" line. */
.wsp-no-signup p:has(> .modal-register-link),
.wsp-no-signup .modal-register-link { display: none; }

/* ================================================================== */
/* Footer                                                             */
/* ================================================================== */

#footer-new {
	background: var(--wsp-ink);
	color: #c5d3e0;
}

#footer-new .footer-new-top-section {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Line the footer up with the page content (1232px). */
#footer-new > div > .container { max-width: 1232px; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
#footer-new > div > .container > .row,
#footer-new > div > .container > .footer-row { margin-left: 0; margin-right: 0; }
#footer-new > div > .container .sixteen.columns { width: 100%; margin-left: 0; margin-right: 0; }

#footer-new .footer-new-rows-left,
#footer-new .footer-new-rows-left .footer-new-row,
#footer-new .footer-new-logo { width: auto; max-width: none; flex: none; }

#footer-new .footer-new-logo img {
	width: auto;
	max-width: none;
	height: 64px;
	max-height: none;
	padding: 4px;
	border-radius: 14px;
	background: #fff;
	box-sizing: border-box;
}

#footer-new .footer-new-middle-section { padding-top: 48px; padding-bottom: 32px; }

#footer-new .footer-widget h4,
#footer-new .footer-widget .widget-title {
	margin-bottom: 14px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
}

#footer-new .footer-widget ul { margin: 0; padding: 0; list-style: none; }
#footer-new .footer-widget li { margin: 0 0 6px; padding: 0; list-style: none; }

#footer-new .footer-widget a {
	color: #c5d3e0;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	transition: color 0.15s ease;
}

#footer-new .footer-widget a:hover,
#footer-new .footer-widget a:focus-visible { color: #fff; text-decoration: underline; }

#footer-new .footer-new-bottom-section { border-top: 1px solid rgba(255, 255, 255, 0.1); }
#footer-new .footer-new-bottom-left { color: #9fb2c4; font-size: 13px; }
#footer-new .footer-new-bottom-left a { color: #c5d3e0; }

#footer-new .new-footer-social-icons li a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background-color 0.15s ease;
}

#footer-new .new-footer-social-icons li a:hover { background: var(--wsp-action); color: #fff; }
#footer-new .new-footer-social-icons li a i { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	#header #navigation #responsive > li > a,
	#footer-new .footer-widget a,
	#footer-new .new-footer-social-icons li a { transition: none; }
}