/*
 * Sodium Sulphate Facts – front-end helpers for the Elementor V4 build.
 *
 * Hooks set in Elementor (element Settings → ID):
 *   ssf-header   Header root (nav menu + search styling)
 *   ssf-toc      "On this page" box; links are #anchors to section IDs
 *   ssf-filter   Key-issues wrapper; chip links are #all, #chemistry …; cards carry data-ssf-topics="chemistry safety"
 */

:root {
	--ssf-sticky-top: 24px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[id] {
	scroll-margin-top: var(--ssf-sticky-top);
}

body.admin-bar [id] {
	scroll-margin-top: calc(var(--ssf-sticky-top) + 32px);
}

/* ---------- Header: Nav Menu (Pro, V3 widget) ---------- */

#ssf-header .elementor-nav-menu--main .elementor-nav-menu {
	gap: 20px;
}

#ssf-header .elementor-nav-menu--main .elementor-item {
	padding: 0;
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #000;
}

#ssf-header .elementor-nav-menu--main .elementor-item:hover,
#ssf-header .elementor-nav-menu--main .elementor-item:focus {
	color: var(--ssf-blue, #1b77c2);
}

#ssf-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--ssf-blue, #1b77c2);
	font-weight: 700;
}

/* Atomic nav links: the current page is marked from the body class. */
body.home #ssf-header .ssf-nav-home,
body.page-id-11 #ssf-header .ssf-nav-home,
body.page-id-12 #ssf-header .ssf-nav-pathways,
body.page-id-13 #ssf-header .ssf-nav-food,
body.page-id-14 #ssf-header .ssf-nav-questions {
	color: var(--ssf-blue, #1b77c2);
	font-weight: 700;
}

#ssf-header .elementor-menu-toggle {
	color: var(--ssf-navy, #173f63);
	background: transparent;
	font-size: 24px;
}

#ssf-header .elementor-nav-menu--dropdown {
	background: #fff;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 12px 24px rgba(23, 63, 99, 0.12);
}

#ssf-header .elementor-nav-menu--dropdown a {
	padding: 14px 24px;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #000;
	background: transparent;
}

#ssf-header .elementor-nav-menu--dropdown a.elementor-item-active,
#ssf-header .elementor-nav-menu--dropdown a:hover {
	color: var(--ssf-blue, #1b77c2);
	background: var(--ssf-page, #f9fafb);
}

/* ---------- Header: search field ([ssf_search]) ---------- */

.ssf-search {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 183px;
	height: 34px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--ssf-line, #e5e5e5);
	border-radius: 8px;
	background: #fff;
	color: var(--ssf-muted, #686868);
	transition: border-color 0.15s ease;
}

.ssf-search:focus-within {
	border-color: var(--ssf-blue, #1b77c2);
}

.ssf-search__icon {
	flex: 0 0 14px;
}

.ssf-search__input,
.ssf-search__input[type="search"] {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: var(--ssf-ink, #0b1320);
	-webkit-appearance: none;
	appearance: none;
}

.ssf-search__input::placeholder {
	color: var(--ssf-muted, #686868);
	opacity: 1;
}

.ssf-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ---------- "On this page" ---------- */

#ssf-toc a {
	transition: color 0.15s ease;
}

#ssf-toc a:hover,
#ssf-toc a.is-active {
	color: var(--ssf-blue, #1b77c2);
}

#ssf-toc a.is-active,
#ssf-toc a.is-active * {
	font-weight: 700;
}

/* ---------- Key-issues filter ---------- */

#ssf-filter a.is-active,
#ssf-filter a.ssf-chip-active,
#ssf-filter a.is-active .ssf-btn-label,
#ssf-filter a.ssf-chip-active .ssf-btn-label {
	background-color: var(--ssf-navy, #173f63);
	border-color: var(--ssf-navy, #173f63);
	color: #fff;
}

#ssf-filter [data-ssf-topics].is-hidden,
#ssf-filter .is-hidden {
	display: none !important;
}

/* ---------- Accessibility ---------- */

.elementor a:focus-visible,
.elementor summary:focus-visible,
.elementor button:focus-visible {
	outline: 2px solid var(--ssf-blue, #1b77c2);
	outline-offset: 2px;
}