/**
 * JAK chrome – sajtens header/nav (Fas 5: Dante-avveckling).
 *
 * Nya jakompetens-temats underscores-markup (#masthead/.main-navigation/.menu-toggle),
 * men legacy:s ljusa look (vit header, mörk nav-text, teal hover/aktiv) för visuell
 * kontinuitet. Token-driven (var(--jak-*)). Laddas EFTER Dante; ersätter Dantes
 * header-styling stegvis – Dantes #header-section-regler matchar inte längre nya
 * markupen (ofarliga). När hela chrome är migrerad dequeue:as Dante.
 *
 * Mobil-toggle: assets/js/navigation.js (lägger .toggled på #site-navigation).
 */

/* ---- Header bar ---- */
#masthead.site-header {
	background: #fff;
	border-bottom: 1px solid var(--jak-border-soft, #e3e7ec);
	position: relative;
	z-index: 30;
	width: 100%;
}
#masthead.site-header > .container {
	/* Samma bredd som sajtens innehåll (1170px). Kundkonto/Logga ut lyfts till en
	   andra rad nere-höger (.header-account, absolut) så nav-raden ryms inom 1170. */
	/* EXAKT samma box som sidans innehåll (.wp-block-columns max-width:1140px,
	   centrerad, ingen sido-padding) → header och innehåll linjerar automatiskt
	   på alla bredder. Account-länkarna är utflyttade (absolut) så nav-raden
	   ryms i 1140. */
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 92px;
	padding: 0;
	padding-bottom: 22px;
	box-sizing: border-box;
}
/* Bootstrap-.container har ::before/::after (clearfix, display:table). I en
   flex-container blir de FANTOM-FLEX-ITEMS som space-between fördelar utrymme
   kring → trycker in loggan från vänsterkanten. Nolla dem i headern. */
#masthead.site-header > .container::before,
#masthead.site-header > .container::after {
	display: none;
}
/* Account-rad (Kundkonto/Logga ut) – andra raden, nere-höger (som Dante hade). */
#masthead .header-account {
	position: absolute;
	right: 0;
	bottom: 7px;
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#masthead .header-account li {
	margin: 0;
}
#masthead .header-account a {
	color: var(--jak-text-soft, #475467);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s ease;
}
#masthead .header-account a:hover {
	color: var(--jak-accent, #027da3);
}
#masthead .header-account .util-viewing-as {
	font-size: 13px;
	color: var(--jak-text-muted, #667085);
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

/* ---- Branding / logo ---- */
#masthead .site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
#masthead .logo {
	padding: 0;
}
#masthead .logo a {
	display: block;
	height: 44px;
}
#masthead .logo img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
}
#masthead .site-branding .site-title,
#masthead .site-branding .site-description {
	display: none;
}

/* ---- Navigation (desktop) ---- */
#masthead .main-navigation {
	display: flex;
	align-items: center;
	gap: 14px;
}
/* Wrapper kring meny + utility (för en samlad mobil-dropdown). Desktop: flex-rad. */
#masthead .nav-collapse {
	display: flex;
	align-items: center;
	gap: 14px;
}
#masthead .main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}
#masthead .main-navigation li {
	margin: 0;
	position: relative;
}
#masthead .main-navigation a {
	display: block;
	padding: 8px 12px;
	color: var(--jak-text, #23282d);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	border-radius: 6px;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}
#masthead .main-navigation a:hover,
#masthead .main-navigation a:focus {
	color: var(--jak-accent, #027da3);
	background: #f6fafb;
}
#masthead .main-navigation .current-menu-item > a,
#masthead .main-navigation .current_page_item > a,
#masthead .main-navigation .current-menu-ancestor > a {
	color: var(--jak-accent, #027da3);
	font-weight: 600;
}

/* Submenus */
#masthead .main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border: 1px solid var(--jak-border-soft, #e3e7ec);
	border-radius: 10px;
	box-shadow: var(--jak-shadow-card, 0 1px 3px rgba(16, 24, 40, 0.06));
	padding: 6px;
	display: none;
	z-index: 50;
}
#masthead .main-navigation li:hover > ul,
#masthead .main-navigation li.focus > ul {
	display: flex;
}

/* ---- Utility (sök + konto) ---- */
#masthead .header-utility {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0 0 0 6px;
	padding: 0;
}
#masthead .header-utility li {
	margin: 0;
}
#masthead .header-utility a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: var(--jak-text-soft, #475467);
	text-decoration: none;
	font-size: 14px;
	border-radius: 6px;
	transition: color 0.15s ease;
}
#masthead .header-utility a:hover {
	color: var(--jak-accent, #027da3);
}
#masthead .header-utility .menu-search a {
	font-size: 18px;
	padding: 8px 10px;
}
/* Sök-ikonen i headern = jak_icon('search') inline-SVG (Lucide). */
#masthead .header-utility .menu-search a svg {
	display: block;
}
#masthead .header-utility .util-viewing-as {
	font-size: 13px;
	color: var(--jak-text-muted, #667085);
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

/* ---- Hamburger (menu-toggle) – dold på desktop ---- */
#masthead .menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	order: 2;
}
/* Tre linjer (26×3px, 8px isär) = exakt som live (Dantes .ss-rows): mittlinje via
   ::before, topp/botten via box-shadow på ±8px. Högerställd (right:9) + container-
   padding nedan ger linjernas högerkant ~19px från skärmkanten (mätt på live). */
#masthead .menu-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 9px;
	width: 26px;
	height: 3px;
	border-radius: 3px;
	background: var(--jak-accent, #027da3);
	transform: translateY(-50%);
	box-shadow: 0 -8px 0 var(--jak-accent, #027da3), 0 8px 0 var(--jak-accent, #027da3);
}
#masthead .menu-toggle .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Mobil (≤991px) ---- */
@media only screen and (max-width: 991px) {
	#masthead .menu-toggle {
		display: block;
	}
	#masthead .main-navigation {
		gap: 0;
	}
	/* Samlad dropdown-panel (meny + utility stackar i en panel, ingen överlappning) */
	#masthead .nav-collapse {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		background: #fff;
		border-top: 1px solid var(--jak-border-soft, #e3e7ec);
		box-shadow: 0 10px 18px rgba(16, 24, 40, 0.08);
		margin: 0;
		padding: 8px;
		gap: 4px;
		z-index: 40;
	}
	#masthead .main-navigation.toggled .nav-collapse {
		display: flex;
	}
	#masthead .nav-collapse #primary-menu,
	#masthead .nav-collapse .header-utility,
	#masthead .nav-collapse .header-account {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 2px;
		margin: 0;
	}
	#masthead .header-utility {
		border-top: 1px solid var(--jak-border-soft, #e3e7ec);
		margin-top: 4px;
		padding-top: 4px;
	}
	/* På mobil ligger account-länkarna i dropdownen (ej absolut nere-höger). */
	#masthead .header-account {
		position: static;
		border-top: 1px solid var(--jak-border-soft, #e3e7ec);
		margin-top: 4px;
		padding-top: 4px;
	}
	#masthead .header-account a {
		display: block;
		padding: 12px 14px;
		font-size: 16px;
	}
	/* Ingen andra-rad-höjd på mobil (account är i dropdownen). Sidopaddingen
	   matchar sidans innehåll på smala bredder (clamp = root-paddingen ≤781px)
	   så loggan inte sticker ut till vänster om innehållet. */
	#masthead.site-header > .container {
		min-height: 64px;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: clamp(20px, 5.5vw, 40px);
		/* Tightare höger så hamburgaren sitter närmare kanten (som live, linjens
		   högerkant ~19px från skärmkanten vid 360px = .ss-rows på live). !important
		   krävs för att slå site.css @media(≤767px) .container{padding:0 25px!important}.
		   Bara höger – loggans vänster-padding orörd. */
		padding-right: clamp(10px, 2.8vw, 40px) !important;
	}
	#masthead .main-navigation li {
		width: 100%;
	}
	#masthead .main-navigation a {
		padding: 12px 14px;
		font-size: 16px;
	}
	#masthead .main-navigation ul ul {
		position: static;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 14px;
		min-width: 0;
		display: flex;
	}
}

/* ============================================================================
   Footer (Fas 5b/5g). Footern är block-baserad (#footer.wp-block-group +
   wp-block-columns). Den MÖRKA footer-bakgrunden + ljusa texten gavs av
   jak_dante_style (dante/functions.php: #footer{background:#222222;color:#ccc})
   som dequeue:ades – porterad hit (theme.json-presetsen footer-background/
   footer-text är odefinierade). Detta ger även footer-loggan (gjord för mörk
   botten) rätt kontrast i stället för att se beskuren/osynlig ut.
   ========================================================================== */
#footer {
	background: #222222;
	color: #cccccc;
}
#footer p,
#footer a,
#footer a:visited,
#footer li,
#footer h2,
#footer h3,
#footer h4,
#footer h6,
#footer .wp-block-heading,
#footer .wp-block-navigation-item__content {
	color: #cccccc;
}
/* Footer-länkar hover → brand-teal (Dante gav #007da3; tokeniserat). */
#footer a:hover,
#footer a:focus,
#footer .wp-block-navigation-item__content:hover,
#footer .wp-block-navigation-item__content:focus {
	color: var(--jak-accent, #027da3);
}
#footer .wp-block-image img,
#footer .footer-logo img {
	max-width: 255px;
	width: auto;
	height: auto;
}
/* Footer-nav-menyns avskiljarlinjer. Bredden (1px) gavs av dante/style.css
   (.widget_nav_menu ul>li{border-top:1px}) som dequeue:ades; färgen #464646
   finns redan i site.css (.footer-menu li). Återställ bredden. */
#footer .footer-menu .wp-block-navigation-item,
#footer .widget_nav_menu li {
	border-top: 1px solid #464646;
}
#footer .footer-menu .wp-block-navigation-item:first-child,
#footer .widget_nav_menu li:first-child {
	border-top: 0;
}
#footer .wp-block-image,
#footer .footer-logo {
	overflow: visible;
}

/* ============================================================================
   Dante-rester från jak_after_body (functions.php): gammal mobilmeny-drawer
   (#mobile-menu-wrap) + sök-overlay (#header-search). Nya headern har egen
   mobil-toggle (navigation.js) så drawern är överflödig. Döljs så de inte
   dyker upp ostylade när Dantes CSS dequeue:as (slutsteget). #header-search
   öppnas nu av jak-search.js (vanilla) via klassen .is-open – ej Dantes JS.
   ========================================================================== */
#mobile-menu-wrap {
	display: none !important;
}
/* Sök-overlay döljs default (osynlig + ej interaktiv) och fadas in med .is-open.
   Ersätter Dantes opacity-animate; se assets/js/jak-search.js. */
#header-search {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
#header-search.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ============================================================================
   Dequeue-essentials (Fas 5c): det fåtal Dante-style.css-regler som site.scss
   INTE redan täcker och som behövs när dante/style.css dequeue:as. Porterade
   verbatim från dante/style.css. (Hjälte-/cover-banden = .fw-row/.spb_/.asset-bg
   är page-builder-content och porteras separat i sista dequeue-steget.)
   ========================================================================== */

/* Clearfix-utility (används brett i markup) */
.clearfix {
	clear: none !important;
}

/* Footer-widget-listor (#footer block-grid + ev. widget-area-fallback) */
.widget ul {
	margin: 0;
	list-style: none;
}
.widget ul li {
	margin-bottom: 0;
	line-height: 16px;
}
.widget ul li > a {
	padding: 10px 0;
	display: block;
}
.widget a {
	text-decoration: none;
}
.widget a:hover {
	text-decoration: underline;
}
#footer h6 {
	margin-bottom: 20px;
	font-weight: bold;
}
#footer a,
#footer a:hover {
	text-decoration: none;
}

/* Sök-overlay (#header-search, öppnas av dante/js/functions.js). Positionering
   så den fungerar även när dante/style.css dequeue:as. Döljd tills JS visar den. */
#header-search {
	padding-top: 40px;
	padding-bottom: 40px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 60;
	background: #fff;
	box-shadow: 0 6px 14px rgba(16, 24, 40, 0.1);
}
#header-search form {
	float: left;
	width: 80%;
}
/* Sök-glaset i overlayn = jak_icon('search') inline-SVG (Lucide), ej ikonfont. */
#header-search .header-search-glass {
	float: left;
	margin-top: 3px;
	margin-right: 8px;
	color: var(--jak-text, #23282d);
}
#header-search input {
	background: transparent;
	border: 0;
	font-size: 24px;
	padding: 0 15px;
	margin: 0;
	width: 100%;
	line-height: 31px;
}
#header-search-close {
	float: right;
	padding: 10px;
	display: block;
	cursor: pointer;
	color: var(--jak-text, #23282d);
}
#header-search-close:hover {
	color: var(--jak-accent, #027da3);
}

/* ============================================================================
   Bokningsformuläret som query-container (Fas 5d-fix). Tidigare gav Dante
   bokningsradernas layout i smala behållare; nu reflowas raderna på formulärets
   EGEN bredd via @container (max-width:620px) i functions.php – så de funkar i
   både kurssidans smala sidokolumn och på mobil, inte bara på viewport-bredd.
   ========================================================================== */
.booking-form {
	container-type: inline-size;
	container-name: booking;
}

/* ============================================================================
   Sid-hjälte (jak-cover-title-blocket) – core/cover-markup (.wp-block-cover),
   migrerad från Dantes .fw-row/.spb_parallax_asset (Fas 5, Lager 2). WP:s
   cover-blockstil sköter positionering/overlay/bild; detta sätter höjd, vit text
   och titel-spacing så den matchar tidigare hjälte. ========================== */
.jak-page-cover {
	min-height: 300px;
	margin-top: 0;
	margin-bottom: 0;
	color: #fff;
}
.jak-page-cover .wp-block-cover__inner-container {
	width: 100%;
}
.jak-page-cover h1 {
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 1.2em 0;
}
.jak-page-cover__subtitle {
	color: #fff;
	margin: 0;
	padding-bottom: 1.4em;
}
/* Konto-hjälten: luft mellan hjälten och kontoinnehållet (sidomeny). Gamla Dante-
   hjälten hade margin-bottom; cover satte 0 → innehållet låg för nära. Bara --account. */
.jak-page-cover--account {
	min-height: 220px;
	margin-bottom: 44px;
}
.jak-page-cover--account h1 {
	padding-bottom: 0.3em;
}
.jak-page-cover--narrow .wp-block-cover__inner-container {
	padding-left: 15%;
	padding-right: 15%;
}