/* ==========================================================================
   Just Name IT theme: the page shell (F-0006)
   --------------------------------------------------------------------------
   Base, skip link, header, main menu, footer and the 404 page, ported from
   design/system/components.css. The --color-*, --fs-*, --space-* ... names
   come from tokens-alias.css (generated from design/system/tokens.json), so
   the rules read like the design system's.

   Selectors are a little longer than in components.css where core's block
   CSS (Navigation, Group) would otherwise win; the values are the same.
   Every transition is inside the Motion block at the end (F-0005 AC6).
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* A word longer than the line breaks instead of pushing the page sideways
   (WCAG 1.4.10 and 1.4.12, F-0018). No effect on text that fits. */
body {
	overflow-wrap: break-word;
}

[hidden] { display: none !important; }
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-s);
}
h1, h2, h3, h4 { text-wrap: balance; }
/* Headings never hyphenate automatically (Director, 2026-10-01: "rubrikerna
   har jättemärklig avstavning"; F-0052). A soft hyphen typed in a title
   still works; overflow-wrap breaks a word longer than the line. */
h1, h2, h3, h4, h5, h6 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
strong, b { font-weight: var(--font-weight-bold); }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The page: header, main, footer; the footer stays at the bottom of short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > .site-main {
	flex: 1 0 auto;
	margin-block-start: 0;
	padding-block: var(--space-70) var(--space-90);
}
.wp-site-blocks > .site-footer { margin-block-start: 0; }

/* ---------- Skip link (core prints it; this is the design system's look) ---------- */
body .skip-link.screen-reader-text:focus {
	left: var(--space-40);
	top: var(--space-40);
	padding: var(--space-30) var(--space-50);
	background: var(--color-primary);
	color: var(--color-base);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	text-decoration: none;
}

/* ---------- Header ---------- */
/* The layout switches on the header's own width (container query) at the
   nav breakpoint, 56em = 896 px, or earlier when the menu does not fit on one
   line (`is-compact`, below). rem, not em: in a container query em is the
   header's own font size (18 px), which would move the switch to 1008 px. */
.site-header {
	container: site-header / inline-size;
	background: var(--color-base);
	border-bottom: 1px solid var(--color-border);
}
.site-header::before {
	content: "";
	display: block;
	height: var(--stripe-height);
	background: var(--stripe-brand);
}
/* A grid, not the style guide's wrapping flex row (F-0006 V1, V1b): row 1
   holds the logo and, below 56em, the "Meny" button; it is at least 5rem high
   whether the menu is open or not. The open menu is a full-width row 2. So
   opening the menu moves nothing, at any width. The button never wraps under
   the logo (in the flex version it did below 324 px): the logo column may
   shrink instead, by at most a few px at 320 px, and the logo scales with it.
   On desktop, row 1 is the logo and the menu. */
.site-header .site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, auto) auto;
	grid-template-rows: minmax(5rem, auto);
	justify-content: space-between;
	align-items: center;
	gap: var(--space-40);
	width: min(100% - 2 * var(--gutter), var(--wide-width));
	margin-inline: auto;
}
.site-header .site-header__inner > * { margin-block: 0; }
.site-header .logo { display: flex; align-items: center; padding-block: var(--space-20); }
.site-header .logo img { display: block; width: 10.625rem; max-width: 100%; height: auto; }

/*
 * F-0018 K1: in forced colours (Windows high contrast) the logo images keep
 * their own blue or white and vanish on the forced background. The image
 * itself moves out of its box (the alt text and the box stay) and the box
 * paints the system text colour through the logo's shape as a mask. The
 * mask sits on the img, not the link, so the link's focus ring stays whole.
 */
@media (forced-colors: active) {

	.site-header .logo img,
	.site-footer .footer-logo img {
		forced-color-adjust: none;
		background-color: CanvasText;
		object-position: -100vw 0;
		mask: url(../images/logo-long.svg) center / contain no-repeat;
	}

	.site-footer .footer-logo img {
		mask-image: url(../images/logo-stacked-white.svg);
	}
}

.menu-toggle {
	display: none;
	align-items: center;
	font: inherit;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.04em;
	color: var(--color-primary);
	background: none;
	cursor: pointer;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-m);
	padding: var(--space-20) var(--space-40);
	min-height: 2.75rem;
}
.menu-toggle:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
/* Three bars drawn with gradients, so the pattern needs no inline SVG. */
.menu-toggle__icon {
	display: inline-block;
	width: 1rem;
	height: 0.75rem;
	margin-right: var(--space-20);
	background:
		linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
}
@media (forced-colors: active) {
	.menu-toggle__icon { forced-color-adjust: none; }
}

/* Main menu: core Navigation block (wp_navigation "huvudmeny"). */
.site-header .site-nav .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10) var(--space-50);
}
.site-header .site-nav .wp-block-navigation-item { margin: 0; }
.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	padding: var(--space-20) 0;
	color: var(--color-contrast);
	text-decoration: none;
	background: linear-gradient(var(--color-primary), var(--color-primary)) no-repeat 0 100% / 0 2px;
}
.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--color-primary);
	background-size: 100% 2px;
}
/* The current page (aria-current, from core) and its section (sub-pages,
   articles: is-current-section, visual only). */
.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current],
.site-header .site-nav .is-current-section > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	background-size: 100% 2px;
}

/* "Redaktionen" for logged-in staff (F-0048): after the menu, set apart by a
   thin rule, smaller and muted, so it reads as a tool, not a page. Only in the
   markup for logged-in users with the newsroom capability. */
.site-header .site-nav--staff { display: flex; align-items: center; gap: var(--space-50); }
.site-header .site-nav__staff {
	margin: 0;
	padding-left: var(--space-50);
	border-left: 1px solid var(--color-border);
	font-size: var(--fs-small);
}
.site-header .site-nav__staff a {
	display: block;
	padding: var(--space-20) 0;
	color: var(--color-muted);
	text-underline-offset: 0.2em;
}
.site-header .site-nav__staff a:hover { color: var(--color-primary); }

@container site-header (max-width: 55.99rem) {
	.site-header .site-nav--staff { display: block; }
	.site-header .site-nav__staff { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
	.site-header .site-nav__staff a { padding: var(--space-30) 0; }
	.js .site-header .menu-toggle { display: inline-flex; justify-self: end; }
	.site-header .site-nav { grid-column: 1 / -1; }
	.js .site-header .site-nav { display: none; padding-bottom: var(--space-50); }
	.js .site-header .site-nav.is-open { display: block; }
	.site-header .site-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; }
	.site-header .site-nav .wp-block-navigation-item { border-top: 1px solid var(--color-border); }
	.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		flex: 1;
		padding: var(--space-30) 0;
		font-size: var(--fs-medium);
		overflow-wrap: anywhere;
		background: none;
	}
	.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current],
	.site-header .site-nav .is-current-section > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		box-shadow: inset 3px 0 0 var(--color-primary);
		padding-left: var(--space-40);
	}
}

/* The same compact layout when the desktop row would not fit on one line at
   a wider header: the "Redaktionen" link for staff (F-0048), a longer menu or
   a wider font. assets/js/header-fit.js sets `is-compact` before the first
   paint; it only ever comes with JavaScript. Keep this list in step with the
   container query above. */
.site-header.is-compact .site-nav--staff {
	display: block;
}

.site-header.is-compact .site-nav__staff {
	padding-left: 0;
	border-left: 0;
	border-top: 1px solid var(--color-border);
}

.site-header.is-compact .site-nav__staff a {
	padding: var(--space-30) 0;
}

.js .site-header.is-compact .menu-toggle {
	display: inline-flex;
	justify-self: end;
}

.site-header.is-compact .site-nav {
	grid-column: 1 / -1;
}

.js .site-header.is-compact .site-nav {
	display: none;
	padding-bottom: var(--space-50);
}

.js .site-header.is-compact .site-nav.is-open {
	display: block;
}

.site-header.is-compact .site-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-header.is-compact .site-nav .wp-block-navigation-item {
	border-top: 1px solid var(--color-border);
}

.site-header.is-compact .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	flex: 1;
	padding: var(--space-30) 0;
	font-size: var(--fs-medium);
	overflow-wrap: anywhere;
	background: none;
}

.site-header.is-compact .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current],
.site-header.is-compact .site-nav .is-current-section > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	box-shadow: inset 3px 0 0 var(--color-primary);
	padding-left: var(--space-40);
}

/* ---------- Footer (brand-blue surface, white logo) ---------- */
.site-footer {
	background: var(--color-primary);
	color: var(--color-inverse);
	padding-block: var(--space-80) var(--space-60);
	font-size: var(--fs-small);
}
.site-footer .site-footer__inner {
	width: min(100% - 2 * var(--gutter), var(--wide-width));
	margin-inline: auto;
}
.site-footer .wp-block-group > * { margin-block: 0; }
.site-footer a { color: var(--color-inverse); }
.site-footer a:hover { color: var(--color-yellow); }
.site-footer :focus-visible { outline-color: var(--color-focus-inverse); }
.site-footer .site-footer__heading {
	margin: 0 0 var(--space-30);
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-inverse-muted);
}
.site-footer p { margin: 0 0 var(--space-40); }
.site-footer address { font-style: normal; margin: 0; }
.site-footer address + address { margin-top: var(--space-40); }
/* Postadress: a line's gap before "Org.nr" (Director, 2026-10-01). */
.site-footer address + .jni-company__org-nr { margin-top: var(--space-40); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-10); }
.site-footer .footer-grid {
	display: grid;
	gap: var(--space-60);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.site-footer .footer-logo img { display: block; width: 7.5rem; height: auto; }
.site-footer .jni-company__phone-link {
	font-size: var(--fs-large);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}
.site-footer .jni-company__phone-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-footer .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20) var(--space-50);
	justify-content: space-between;
	margin-top: var(--space-70);
	padding-top: var(--space-50);
	border-top: 1px solid var(--color-inverse-muted);
	color: var(--color-inverse-muted);
}
.site-footer .footer-bottom p { margin: 0; }
/* Logotyper (F-0053) sits with the privacy link, on the right of the row. */
.site-footer .footer-bottom .footer-logos { margin-inline-start: auto; }
.site-footer .footer-bottom a { color: var(--color-inverse-muted); }
.site-footer .footer-bottom a:hover { color: var(--color-yellow); }

/* ---------- Back-to-top button (inc/back-to-top.php, F-0069) ---------- */
/* A round arrow in brand blue, fixed bottom right on every page. Hidden until
   back-to-top.js adds `is-visible` (so without JavaScript it stays hidden and
   the anchor is still there); `visibility` keeps it out of the tab order while
   hidden. Fixed, so it takes no space and moves nothing. The white ring keeps
   it visible on the blue footer; the footer has room under its last row so
   the button never covers a link (below). Director, 2026-10-06: "Rund pil,
   nere till höger". */
.back-to-top {
	position: fixed;
	right: var(--space-40);
	bottom: var(--space-40);
	z-index: var(--z-index-floating);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--color-base);
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-base);
	text-decoration: none;
	visibility: hidden;
	opacity: 0;
}
.back-to-top.is-visible { visibility: visible; opacity: 1; }
/* Hover: inverted, white with a brand-blue arrow (Director, 2026-10-06:
   "Inverterad: vit med blå pil"). The colour is set here, so no global link
   hover rule recolours the icon (it draws with currentColor); the blue border
   keeps the circle visible on a white page. */
.back-to-top:hover { border-color: var(--color-primary); background: var(--color-base); color: var(--color-primary); }
/* A halo as wide as the focus offset keeps the ring readable on the blue footer too. */
.back-to-top:focus-visible {
	border-radius: var(--radius-pill);
	box-shadow: 0 0 0 var(--focus-offset) var(--color-base);
}
.back-to-top__icon { display: block; }
/* The landing point after "Till toppen" is not a control: no ring around all of main. */
main[tabindex="-1"]:focus-visible { outline: none; }
@media (forced-colors: active) {
	.back-to-top { border-color: ButtonText; }
}
@media print {
	.back-to-top { display: none; }
}
/* Room under the footer's last row for the button. */
.site-footer { padding-block-end: calc(var(--space-60) + var(--space-60) + var(--space-20)); }

/* ---------- 404, the page template and the fallback list ---------- */
/* The page template's title, a fallback (every public page uses
   page-no-title with a page head or a hero), starts at the shared left
   edge like the sections' text, not in core's centred content column
   (theme.md, Composition rules, The page head; F-0051 C4). Core sets these
   margins with !important, as for the sections in sections.css. */
.wp-site-blocks > .site-main.is-layout-constrained > .wp-block-post-title {
	margin-inline-start: max(0px, (100% - var(--wide-width)) / 2) !important;
	margin-inline-end: auto !important;
}
.not-found-links { list-style: none; padding: 0; }
.not-found-links li + li { margin-top: var(--space-20); }
.not-found-links a { font-weight: var(--font-weight-semibold); text-decoration: none; }
.not-found-links a::after { content: "→"; display: inline-block; margin-left: 0.3em; }
.not-found-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-list .wp-block-post-title {
	font-size: var(--fs-large);
	font-weight: var(--font-weight-semibold);
	margin-block-start: var(--space-60);
}
.site-list .wp-block-post-title a { text-decoration: none; }
.site-list .wp-block-post-title a:hover { text-decoration: underline; }
.site-list .wp-block-post-date { font-size: var(--fs-small); color: var(--color-muted); }

/* ---------- Motion (F-0005 AC6) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		transition: background-size var(--duration-fast) var(--ease-out), color var(--duration-fast) ease-out;
	}
	.menu-toggle {
		transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
	}
	.back-to-top { transition: opacity var(--duration-fast) ease-out, visibility var(--duration-fast) ease-out, background-color var(--duration-fast) ease-out; }
	.not-found-links a::after { transition: transform var(--duration-fast) var(--ease-out); }
	.not-found-links a:hover::after { transform: translateX(3px); }
}