/* ==========================================================================
   Just Name IT theme: page sections and preset block styles (F-0007)
   --------------------------------------------------------------------------
   The section patterns (patterns/section-*.php) and the only colour and
   button choices an admin has: the block style variations registered in
   inc/editing.php. Ported from design/system/components.css (.section,
   .hero-photo, .services, .quote, .button) on the tokens-alias.css names.
   Loaded on the site and in the editor (add_editor_style), so the editor
   shows what the visitor sees.

   F-0011 adds the general design-system classes every page uses (container,
   section surface and head, arrow and back links, type label, meta, the
   check list) and the shared page sections: page head, hero with back link,
   check list, "Läs mer från oss" and points. F-0010 adds the highlight
   ("Markering"), p.link-arrow and the switchboard card. Page features put
   their own rules in assets/css/pages/{name}.css (inc/assets.php).

   Colour rules (design/system/README.md):
   - brand blue is the only interactive colour;
   - complement colours carry brand-blue text, never white;
   - a page has at most one complement surface (checked by a test).
   Every transition is inside the Motion block at the end (F-0005 AC6).
   ========================================================================== */

/* ---------- Sections ---------- */
.section {
	padding-block: var(--space-80);
}
/* Sections sit edge to edge; their own padding makes the space. */
.is-layout-constrained > .section,
.is-layout-flow > .section {
	margin-block: 0;
}
/* A page that starts with a section starts it right under the header. The
   404 template puts its sections straight in main (F-0051 C4). */
.wp-site-blocks > .site-main:has(> .wp-block-post-content > .section:first-child),
.wp-site-blocks > .site-main:has(> .section:first-child) {
	padding-block-start: 0;
}
/* One left edge (Orchestrator rule 2026-10-01, after the Director's review
   of Jobba hos oss; theme.md, Pages). Core's constrained layout centres
   every child that is not wide or full in a content-width column, so a
   section heading started further in than its own wide cards and the left
   edge jumped from section to section. Every such child keeps the content
   width (the reading width) but starts at the wide container's left edge,
   the edge of an alignwide child and of the header: the margin is the space
   core gives an alignwide child, (container - wide width) / 2, never below
   0. Core sets these margins with !important, so this rule has to as well;
   it wins on specificity. */
.section.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignwide, .alignfull)) {
	margin-inline-start: max(0px, (100% - var(--wide-width)) / 2) !important;
	margin-inline-end: auto !important;
}
.section > :first-child { margin-block-start: 0; }
.section > :last-child { margin-block-end: 0; }
@media (min-width: 64em) {
	.section { padding-block: var(--space-90); }
}
/* Section spacing follows the home page (the Director, 2026-10-01: "luften
   på startsidan var perfekt som den var. det var på andra ställen det var
   helt fel och inte följde hur startsidan var utformad"; theme.md, Pages).
   Home's plain sections carry --space-70 on both sides (home.css), so two
   of them stand 6rem apart at every width. Every other page now does the
   same at each boundary between two sections without a surface colour.
   The first section's top, the last one's bottom and every side that
   meets a band keep the shared .section padding above, as on Home. A
   wrapper section without padding (Lediga tjänster, Läs mer från oss)
   takes the boundary itself, so the news-cards section inside it adds
   nothing there. Home is left out, so it stays exactly as designed. The
   sections are a page's content, or main's own in the 404 template. */
:is(.wp-block-post-content, .site-main):not(:has(> .section-hero-home)) > .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface):has(+ .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface)) {
	padding-block-end: var(--space-70);
}
:is(.wp-block-post-content, .site-main):not(:has(> .section-hero-home)) > .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface) + .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface) {
	padding-block-start: var(--space-70);
}
:is(.wp-block-post-content, .site-main):not(:has(> .section-hero-home)) > .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface):has(+ .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface)) > .section:last-child {
	padding-block-end: 0;
}
:is(.wp-block-post-content, .site-main):not(:has(> .section-hero-home)) > .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface) + .section:not(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple, .section--surface) > .section:first-child {
	padding-block-start: 0;
}

/* The service tab row (below, F-0069) sits between the hero and the body: the
   two plain sections around it are spaced as if they met, --space-70 on each
   side of the bar. */
.wp-block-post-content > .section-hero--service:has(+ .service-tabs) { padding-block-end: var(--space-70); }
.wp-block-post-content > .service-tabs + .section { padding-block-start: var(--space-70); }
.wp-block-post-content > .service-tabs + .section > .section:first-child { padding-block-start: 0; }

/* ---------- Group surfaces (block style variations) ---------- */
.wp-block-group.is-style-surface { background: var(--color-surface); color: var(--color-contrast); }
.wp-block-group.is-style-primary-soft { background: var(--color-primary-soft); color: var(--color-contrast); }

.wp-block-group.is-style-primary { background: var(--color-primary); color: var(--color-inverse); }
.wp-block-group.is-style-primary :is(h1, h2, h3, h4, .eyebrow) { color: var(--color-inverse); }
.wp-block-group.is-style-primary a:where(:not(.wp-block-button__link)) { color: var(--color-inverse); }
.wp-block-group.is-style-primary a:where(:not(.wp-block-button__link)):hover { color: var(--color-yellow); }
.wp-block-group.is-style-primary :focus-visible { outline-color: var(--color-focus-inverse); }

/* Complement surfaces: all text is brand blue (the listed contrast pairs). */
.wp-block-group.is-style-yellow { background: var(--color-yellow); }
.wp-block-group.is-style-green { background: var(--color-green); }
.wp-block-group.is-style-sky { background: var(--color-sky); }
.wp-block-group.is-style-apricot { background: var(--color-apricot); }
.wp-block-group.is-style-purple { background: var(--color-purple); }
.wp-block-group:is(.is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple),
.wp-block-group:is(.is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple) :is(p, li, cite, summary, a:where(:not(.wp-block-button__link))) {
	color: var(--color-primary);
}

/* A surface on a Group that is not a whole section gets room around its text. */
.wp-block-group:not(.section):is(.is-style-surface, .is-style-primary-soft, .is-style-primary, .is-style-yellow, .is-style-green, .is-style-sky, .is-style-apricot, .is-style-purple) {
	padding: var(--space-60);
	border-radius: var(--radius-m);
}

/* ---------- Buttons (block style variations) ---------- */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-20);
	min-height: 3rem;
	padding: var(--space-30) var(--space-50);
	font: inherit;
	font-weight: var(--font-weight-semibold);
	font-size: var(--fs-base);
	line-height: 1.2;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-m);
	background: var(--color-primary);
	color: var(--color-base);
	text-decoration: none;
}
/* The arrow is decoration: "/ ''" keeps it out of the button's accessible name (F-0011). */
.wp-block-button .wp-block-button__link::after { content: "→"; content: "→" / ""; display: inline-block; }
.wp-block-button .wp-block-button__link:hover {
	background: var(--color-primary-strong);
	border-color: var(--color-primary-strong);
	color: var(--color-base);
}
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--color-primary);
}
.wp-block-button.is-style-secondary .wp-block-button__link::after { content: none; }
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--color-primary-soft);
	border-color: var(--color-primary);
	color: var(--color-primary);
}
/* On a brand-blue surface: white button with blue text. A primary button
   inside a blue section gets the same look, so it never disappears. */
.wp-block-button.is-style-on-blue .wp-block-button__link,
.wp-block-group.is-style-primary .wp-block-button:not(.is-style-secondary) .wp-block-button__link {
	background: var(--color-base);
	border-color: var(--color-base);
	color: var(--color-primary);
}
.wp-block-button.is-style-on-blue .wp-block-button__link:hover,
.wp-block-group.is-style-primary .wp-block-button:not(.is-style-secondary) .wp-block-button__link:hover {
	background: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	color: var(--color-primary);
}
.wp-block-group.is-style-primary .wp-block-button.is-style-secondary .wp-block-button__link {
	border-color: var(--color-base);
	color: var(--color-base);
}
.wp-block-group.is-style-primary .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--color-primary-strong);
	color: var(--color-base);
}
.wp-block-buttons { gap: var(--space-30); }

/* ---------- General classes (F-0011; design/system/components.css) ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--wide-width)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--content-width)); margin-inline: auto; }
.section--surface { background: var(--color-surface); }
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-30) var(--space-50);
	margin-bottom: var(--space-60);
	padding-bottom: var(--space-40);
	border-bottom: 1px solid var(--color-primary);
}
.section-head > :is(h2, h3) { margin: 0; }
/* A section head as blocks (F-0010): a heading and a p.link-arrow. */
.section-head > p { margin: 0; }

/* ---------- Arrow links ---------- */
/* The arrows are decoration: the "/ ''" alternative text keeps them out of
   the link's accessible name where the browser supports it. */
.link-arrow,
.link-back,
p.link-back > a {
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}
.link-arrow::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.3em; }
.link-back::before { content: "←"; content: "←" / ""; display: inline-block; margin-right: 0.3em; }
/* As a block (a paragraph with the class, holding the link), the arrow sits
   before the link, so it is not part of the link's name. */
p.link-back { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
/* The same for the forward arrow (F-0010: "Hela erbjudandet", "Läs mer om oss"):
   the arrow comes after the link, outside its name. */
p.link-arrow { color: var(--color-primary); }
p.link-arrow > a { text-decoration: none; }
p.link-arrow:hover { text-decoration: none; }
.link-arrow:hover,
a.link-back:hover,
p.link-back > a:hover,
p.link-arrow > a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Type label and meta ---------- */
/* Ink text plus a small shape marker in the type's complement colour. The
   word carries the meaning; the shape is decoration. Nyhet, and any type an
   administrator adds, has the base marker (green triangle). */
.label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-contrast);
}
.label::before {
	content: "";
	width: 0.75em;
	height: 0.75em;
	flex: none;
	background: var(--color-green);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.label--insikt::before { background: var(--color-yellow); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.label--jobb::before { background: var(--color-purple); clip-path: none; }
.label--evenemang::before { background: var(--color-apricot); clip-path: none; border-radius: 50%; }
.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-20) var(--space-40);
	margin: 0;
	font-size: var(--fs-small);
	color: var(--color-muted);
}

/* ---------- Check list (a core List with the class check-list) ---------- */
/* Drawn check marks in brand blue: decoration, the list itself is the meaning. */
.check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.check-list > li {
	position: relative;
	margin: 0;
	padding: var(--space-30) 0 var(--space-30) 2rem;
	border-top: 1px solid var(--color-border);
}
.check-list > li:last-child { border-bottom: 1px solid var(--color-border); }
.check-list > li::before {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: calc(var(--space-30) + 0.2em);
	width: 0.45em;
	height: 0.85em;
	border: solid var(--color-primary);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
@media (min-width: 48em) {
	.check-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-60);
	}
	/* Two columns: the last two items close both columns. */
	.check-list > li:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
}

/* ---------- Labels and lead text ---------- */
.eyebrow {
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-block-end: var(--space-40);
}
.lead {
	font-size: var(--fs-medium);
	max-width: 38ch;
}

/* ---------- Highlight ("Markering", F-0010) ---------- */
/* The green marker bar under a few words (<mark class="highlight">, the
   rich-text format in assets/js/formats.js). Blue text stays on white or
   green. Home's entrance sweep is in pages/home.css. */
mark.highlight {
	background: linear-gradient(var(--color-green), var(--color-green)) no-repeat 0 88% / 100% 0.3em;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.04em;
}

/* ---------- Hero with image (.hero-photo) ---------- */
/* One page-head rule (F-0058; Director 2026-10-04, Q6 "A: Rubriken är
   sidans namn"; theme.md *The page head*): a hero starts like a page head,
   --space-70 under the header, with its text at the top next to the
   photo's top, so the H1 starts at the same height on every top-level
   page. The bottom keeps the section rules. */
.section.section-hero { padding-block-start: var(--space-70); }
.section-hero .section-hero__grid {
	gap: var(--space-60);
	align-items: flex-start;
	margin-block: 0;
}
.section-hero h1 {
	font-size: var(--fs-xx-large);
	font-weight: var(--font-weight-regular);
	letter-spacing: -0.03em;
	margin-block: 0 var(--space-50);
}
/* H1 size by level (F-0058): a top-level page's hero (Kontakt, Jobba hos
   oss) has the page head's `display` H1, photo or not; a service page's
   hero (a sub-page) keeps `xx-large`. */
.section-hero:not(.section-hero--service) h1 {
	font-size: var(--fs-display);
	letter-spacing: var(--letter-spacing-display);
	line-height: var(--line-height-display);
	overflow-wrap: break-word;
}
.section-hero .section-hero__text > * { margin-block: 0; }
.section-hero .section-hero__text > * + * { margin-block-start: var(--space-40); }
/* Page title to what follows it: space-50, the design system's .hero__title
   and the article title before its ingress (theme.md, Pages). */
.section-hero .section-hero__text > h1 + * { margin-block-start: var(--space-50); }
/* The photo with its leaf curve and a thin outline in the page's colour,
   offset up and to the left like the outlines of the motif's shapes (whose
   fill sits down and to the right of the line). No coloured backdrop on any
   page (the Director, 2026-10-01: "ta bort bakgrunden i hero och jobba hos oss. det såg bättre ut utan accentfärg", "ta bort på tjänstesidorna med. alternativt lägg till en tunn linje med färgen som vi gjort på symbolerna", "gör likadant på jobba hos oss och kontakt"). The colour: a service page's service
   (service--{key}), otherwise hero-accent--{colour} (Kontakt sky, Jobba hos
   oss purple). The line is 1.5px, as on the shapes; the offset is
   --space-20. theme.md, Pages. */
.section-hero .section-hero__media .wp-block-image {
	position: relative;
	aspect-ratio: var(--ratio-hero);
	margin: 0;
}
.section-hero .section-hero__media .wp-block-image img {
	position: absolute;
	inset: var(--space-20) 0 0 var(--space-20);
	width: calc(100% - var(--space-20));
	height: calc(100% - var(--space-20));
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--radius-leaf-xl);
}
.section-hero .section-hero__media .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0 var(--space-20) var(--space-20) 0;
	border: 1.5px solid var(--service-accent, var(--hero-accent, transparent));
	border-radius: var(--radius-leaf-xl);
	pointer-events: none;
}
@media (min-width: 64em) {
	.section-hero .section-hero__grid { gap: var(--space-90); }
	.section-hero .section-hero__text { flex-basis: 45%; }
	.section-hero .section-hero__media { flex-basis: 55%; }
}

/* ---------- Text and image ---------- */
.section-text-image .section-text-image__grid {
	gap: var(--space-60);
	align-items: center;
	margin-block: 0;
}
.section-text-image .section-text-image__media .wp-block-image {
	margin: 0;
	aspect-ratio: var(--ratio-media); /* 3 / 2: page photos keep their ratio; only cards are 16:9 (Director 2026-10-01). */
	overflow: hidden;
	border-radius: var(--radius-leaf-l);
	background: var(--color-surface);
}
.section-text-image .section-text-image__media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 64em) {
	.section-text-image .section-text-image__grid { gap: var(--space-90); }
}

/* ---------- Service cards (.services, .service) ---------- */
.section-services .services {
	display: grid;
	gap: var(--space-60) var(--space-50);
	counter-reset: service;
	margin-block-start: var(--space-60);
}
@media (min-width: 48em) {
	.section-services .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.section-services .services { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.section-services .service {
	position: relative;
	margin: 0;
	border-top: 3px solid var(--service-accent, var(--color-apricot));
	padding-top: var(--space-40);
	counter-increment: service;
}
/* A card without a service class takes its colour from its place; with
   one, from the service (below), so these carry no specificity. */
:where(.section-services .service:nth-child(5n + 2)) { --service-accent: var(--color-purple); }
:where(.section-services .service:nth-child(5n + 3)) { --service-accent: var(--color-yellow); }
:where(.section-services .service:nth-child(5n + 4)) { --service-accent: var(--color-green); }
:where(.section-services .service:nth-child(5n + 5)) { --service-accent: var(--color-sky); }
/* The number is decoration: the order of the cards already says it. */
.section-services .service::before {
	content: counter(service, decimal-leading-zero);
	display: block;
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted);
	letter-spacing: 0.08em;
}
.section-services .service > * { margin-block: 0; }
.section-services .service__title {
	margin-block: var(--space-30);
	font-size: var(--fs-large);
	font-weight: var(--font-weight-semibold);
}
.section-services .service__title a {
	color: var(--color-primary);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
}
/* The whole card is the link. */
.section-services .service__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.section-services .service:hover .service__title a {
	color: var(--color-primary-strong);
	background-size: 100% 2px;
}
.section-services .service p { color: var(--color-muted); }
.section-services .service:focus-within {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: 6px;
}
.section-services .service a:focus-visible { outline: none; }
/* In the editor the stretched link would cover the text an admin edits. */
.editor-styles-wrapper .section-services .service__title a::after { content: none; }

/* ---------- Quote (.quote) ---------- */
/* The official symbol is a closing quotation mark, so it is the quote mark.
   Drawn from the theme's own file as a mask, so it takes the text colour. */
.section-quote .wp-block-quote {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-50);
	margin: 0;
	padding: var(--space-50) 0 0;
	border: 0;
	border-top: 1px solid currentColor;
	color: var(--color-primary);
}
.section-quote .wp-block-quote::before {
	content: "";
	grid-row: 1 / span 20;
	width: 2rem;
	aspect-ratio: 652.64 / 707.97;
	margin-top: 0.3em;
	background: currentColor;
	-webkit-mask: url("../images/symbol-blue.svg") no-repeat center / contain;
	mask: url("../images/symbol-blue.svg") no-repeat center / contain;
}
.section-quote .wp-block-quote p {
	font-size: var(--fs-x-large);
	font-weight: var(--font-weight-regular);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: inherit;
	margin: 0 0 var(--space-40);
}
/* The signature after the quote, as in the article (news.css): small, muted,
   right-aligned (Director 2026-10-01: "signatur efter bör vara högerställd"). */
.section-quote .wp-block-quote cite {
	display: block;
	font-size: var(--fs-small);
	font-style: normal;
	font-weight: var(--font-weight-regular);
	color: var(--color-muted);
	text-align: right;
}
/* The quote's lead, small and muted before the quote text (Director 2026-10-01; as in news.css). */
.section-quote .wp-block-quote p.quote__lead {
	margin: 0 0 var(--space-30);
	font-size: var(--fs-small);
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--color-muted);
}
/* On the blue surface, muted would be too faint: white, as the quote text. */
.wp-block-group.is-style-primary.section-quote .wp-block-quote :is(cite, p.quote__lead) { color: var(--color-inverse); }

/* ---------- Contact us (brand-blue band) ---------- */
.section-cta > .wp-block-buttons { margin-block-start: var(--space-50); }

/* ---------- Offices and contact ---------- */
/* The office cards also sit in the body of the article section on Om oss
   (F-0012), so the card rules name both sections. */
:is(.section-offices, .section-article) .jni-company__offices {
	display: grid;
	gap: var(--space-60) var(--space-50);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 48em) {
	:is(.section-offices, .section-article) .jni-company__offices { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
:is(.section-offices, .section-article) .jni-company__office {
	margin: 0;
	border-left: 2px solid var(--color-primary);
	padding-left: var(--space-50);
}
:is(.section-offices, .section-article) .jni-company__office-name {
	font-size: var(--fs-base);
	font-weight: var(--font-weight-semibold);
	margin-block: 0 var(--space-20);
}
:is(.section-offices, .section-article) address {
	font-style: normal;
	color: var(--color-muted);
}
.section-offices .jni-company--contact { margin-block-start: var(--space-60); }
.section-offices .jni-company--contact a[href^="tel:"] {
	font-size: var(--fs-large);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
}
.section-offices .jni-company--contact a[href^="tel:"]:hover { text-decoration: underline; }
/* The office cards use the wide width, as the section head above them (F-0010). */
.section-offices > .wp-block-jni-company-info { max-width: var(--wide-width); }
/* The switchboard as a card after the offices (extra: phone; Home, F-0010). */
.section-offices .jni-company__phone { margin: 0; }
.section-offices .jni-company__phone a {
	font-size: var(--fs-large);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.section-offices .jni-company__phone a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Frequently asked questions (core Details) ---------- */
.section-faq .faq { margin-block-start: var(--space-50); }
.section-faq .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}
.section-faq .wp-block-details:first-child { border-top: 1px solid var(--color-border); }
.section-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-40);
	padding-block: var(--space-40);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	cursor: pointer;
	list-style: none;
}
.section-faq .wp-block-details summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus; drawn, so screen readers read nothing. */
.section-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.section-faq .wp-block-details[open] summary::after { background-size: 100% 2px, 0 0; }
.section-faq .wp-block-details > :not(summary) { margin-block: 0 var(--space-40); }

/* ---------- Page head (justnameit/page-head, F-0011) ---------- */
/* The head of Nyheter as a section: the H1 at display size and the ingress,
   lined up on the left with the wide sections below. */
.section.section-page-head { padding-block: var(--space-70) var(--space-50); }
.section-page-head > .alignwide > * { margin-block: 0; }
/* Page title to its ingress: space-50, as in the hero above. The rule above
   took this margin away before (0,2,0 beat 0,1,1), so the H1 sat right on
   the ingress (the Director on Erbjudande, 2026-10-01). */
.section-page-head > .alignwide > h1 { margin-block-end: var(--space-50); }
.section-page-head h1 {
	font-size: var(--fs-display);
	letter-spacing: var(--letter-spacing-display);
	line-height: var(--line-height-display);
	overflow-wrap: break-word;
}
/* The intro (.lead) is ink, as on Home; only a second paragraph
   (Erbjudande) is muted (F-0058 AC4, AC9). No eyebrow in a page head
   (theme.md *The page head*), so the paragraph rules need no exception for
   one, and the muted colour no longer outranks the intro's ink. */
.section-page-head .alignwide p { max-width: 44ch; font-size: var(--fs-medium); }
.section-page-head .alignwide p + p { margin-block-start: var(--space-40); }
.section-page-head .alignwide p:not(.lead) { color: var(--color-muted); }
.section-page-head .lead { color: var(--color-contrast); }

/* ---------- Hero with back link (justnameit/hero-service, F-0011) ---------- */
.section-hero--service .link-back { margin-block-end: var(--space-50); font-size: var(--fs-small); }

/* ---------- List with check marks (justnameit/checklist, F-0011) ---------- */
.section-checklist .checklist { margin-block-start: var(--space-50); }

/* ---------- Text sections with more than one heading ---------- */
/* A body that continues with its own H2 (Övriga tjänster, F-0011; the
   policy, F-0051 C3) or H3 gets room above the new heading. Body headings
   are spaced like the article's (theme.md, Composition rules, Heading
   rhythm; F-0051 P2): H2 --space-70 / --space-40, H3 --space-60 / --space-30. */
.section-text .section__body > h2 { margin-block: var(--space-70) var(--space-40); }
.section-text .section__body > h3 { margin-block: var(--space-60) var(--space-30); }
.section-text .section__body > :is(h2, h3):first-child { margin-block-start: 0; }

/* ---------- Content that belongs together, side by side (section-pair) ---------- */
/* The Director, 2026-10-01: "Ring eller maila supporten och Skriv till
   supporten hör ihop", "fjärrsupport och så går det till hör ihop" and
   "samma upplägg på kontakt". One section, two columns in the wide
   container from 64em; below that one column in reading order. No lone
   narrow column with empty space beside it. --contact: the form in the
   wide left column, the direct contact in a 22rem right column; --even: two
   equal columns.
   service-body (below) is the service pages' variant. theme.md, Pages. */
.section-pair .section-pair__grid {
	display: grid;
	gap: var(--space-70);
	align-items: start;
	margin-block: 0;
}
.section-pair .section-pair__grid > * { min-width: 0; margin-block: 0; }
.section-pair .section-pair__grid > * > :first-child { margin-block-start: 0; }
.section-pair .section-pair__grid > * > :last-child { margin-block-end: 0; }
@media (min-width: 64em) {
	/* The form left, "Ring eller mejla" right (the Director: "skifta plats på ring eller maila och formuläret på båda sidorna"); in the
	   markup "Ring eller mejla" comes first, so it is first on a phone. */
	.section-pair--contact .section-pair__grid { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--space-90); }
	.section-pair--contact .section-pair__wide { grid-column: 1; grid-row: 1; }
	.section-pair--contact .section-pair__narrow { grid-column: 2; grid-row: 1; }
	.section-pair--even .section-pair__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-90); }
}

/* ---------- Service page content (justnameit/service-body) ---------- */
/* The Director, 2026-10-01: "mycket bättre på erbjudande med din mockup".
   "Det här ingår" comes first in the markup, so below 64em it is first,
   right under the hero. From 64em: the text on the left at reading width,
   the list in a narrow right column (one list, a smaller heading) that
   stays in view while the text scrolls. theme.md, Pages. */
.section-service-body .section-service-body__grid {
	display: grid;
	gap: var(--space-70);
	align-items: start;
	margin-block: 0;
}
.section-service-body .section-service-body__grid > * { min-width: 0; margin-block: 0; }
.section-service-body .section-service-body__aside > * { margin-block: 0; }
.section-service-body .section-service-body__aside .checklist { margin-block-start: var(--space-50); }
.section-service-body .section-service-body__main { max-width: 46rem; }
.section-service-body .section__body > * { margin-block: 0 var(--space-40); }
.section-service-body .section__body > :last-child { margin-block-end: 0; }
.section-service-body .section__body > h2 { margin-block: var(--space-70) var(--space-40); }
.section-service-body .section__body > h3 { margin-block: var(--space-60) var(--space-30); }
.section-service-body .section__body > :is(h2, h3):first-child { margin-block-start: 0; }
@media (min-width: 64em) {
	.section-service-body .section-service-body__grid {
		grid-template-columns: minmax(0, 1fr) 22rem;
		column-gap: var(--space-90);
	}
	.section-service-body .section-service-body__main { grid-column: 1; grid-row: 1; }
	.section-service-body .section-service-body__aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--space-60);
	}
	.section-service-body .section-service-body__aside h2 { font-size: var(--fs-x-large); }
	/* One list in the narrow column, not the two columns of a wide page. */
	.section-service-body .section-service-body__aside .check-list { display: block; }
	.section-service-body .section-service-body__aside .check-list > li:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- Contact us: a line after the button ---------- */
.section-cta > .wp-block-buttons + p { margin-block-start: var(--space-50); }

/* ---------- Läs mer från oss (justnameit/related-insights, F-0011) ---------- */
/* The news-cards block inside is a section with its own padding and
   container; the group adds none. Without items both render nothing. */
.section.section-related { padding-block: 0; }

/* ---------- Service card link text (the design system's .service__more) ---------- */
/* A card may end with a visible link text ("Läs mer om systemutveckling").
   It is then the card's one link, stretched over the card, and the title
   is plain text. */
.section-services .service__more {
	margin-block-start: var(--space-30);
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
}
.section-services .service__more a { color: var(--color-primary); text-decoration: none; }
.section-services .service__more a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.section-services .service__more::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.3em; color: var(--color-primary); }
.section-services .service:hover .service__more a { color: var(--color-primary-strong); text-decoration: underline; text-decoration-thickness: 2px; }
.editor-styles-wrapper .section-services .service__more a::after { content: none; }

/* ---------- Points (justnameit/points and points-image, F-0011) ---------- */
/* The points grid uses the whole wide container, like the service cards. */
.section-points .points {
	max-width: var(--wide-width);
	display: grid;
	gap: var(--space-60) var(--space-50);
	margin-block-start: var(--space-60);
}
.section-points .point {
	margin: 0;
	padding-top: var(--space-40);
	border-top: 2px solid var(--color-primary);
}
.section-points .point > * { margin-block: 0; }
.section-points .point h3 { margin-block-end: var(--space-20); }
.section-points .point p { color: var(--color-muted); }
@media (min-width: 48em) {
	.section-points:not(.section-points--image) .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
	.section-points:not(.section-points--image) .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.section-points .section-points__grid {
	gap: var(--space-60);
	align-items: start;
	margin-block: 0;
}
.section-points .section-points__text > :first-child { margin-block-start: 0; }
.section-points .section-points__media .wp-block-image {
	margin: 0;
	aspect-ratio: var(--ratio-portrait);
	overflow: hidden;
	border-radius: var(--radius-leaf-l);
	background: var(--color-surface);
}
.section-points .section-points__media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
@media (min-width: 64em) {
	.section-points .section-points__grid { gap: var(--space-90); }
	.section-points .section-points__text { flex-basis: 58%; }
	.section-points .section-points__media { flex-basis: 42%; }
}

/* ---------- The news-cards picker (editor only, F-0011) ---------- */
.news-cards-picker {
	display: grid;
	gap: var(--space-30);
	max-width: 32rem;
	margin-inline: auto;
	padding: var(--space-50);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-m);
}
.news-cards-picker > p { margin: 0; }
.news-cards-picker__empty { margin: var(--space-40) auto 0; max-width: 32rem; color: var(--color-muted); }

/* ---------- The brand motif and the service shapes (Director 2026-10-01) ---------- */
/* The motif's four shapes each belong to one service (the old site's pairs,
   Home\Motif::SERVICES). The class service--{key} on a service card or a
   service page's hero section sets the one colour token, --service-accent,
   that the card's line, the shape's fill and the line around the hero
   photo all use, so they cannot drift apart. The server adds the shape
   (inc/sections.php) and, in a page head, the whole motif (inc/home.php);
   both are aria-hidden decoration. theme.md, Pages. */
.hero-accent--sky { --hero-accent: var(--color-sky); }
.hero-accent--purple { --hero-accent: var(--color-purple); }
.hero-accent--green { --hero-accent: var(--color-green); }
.hero-accent--yellow { --hero-accent: var(--color-yellow); }
.hero-accent--apricot { --hero-accent: var(--color-apricot); }
.service--systemutveckling { --service-accent: var(--color-purple); }
.service--integrationer { --service-accent: var(--color-green); }
.service--drift { --service-accent: var(--color-apricot); }
.service--ovriga { --service-accent: var(--color-yellow); }
/* The motif's thin brand-blue outline, shared with Home's hero; the entrance is below. */
.motif__line {
	fill: none;
	stroke: var(--color-primary);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
/* Motif entrance (F-0059; Director 2026-10-06, "Ja, varje sidhuvud"): the
   Home hero's line entrance plays once per page load in every page head
   with a motif, and in a service page's hero on its shape. About 1.4 s, no
   loop, only without "reduce motion" and with JavaScript (the `js` class,
   as on Home). At most one per page: a service card's shape and a
   motif outside a head stay still. Decorative; the lines are drawn in
   place, so nothing moves or shifts. */
@media (prefers-reduced-motion: no-preference) {
	.js .section-hero-home .motif__line,
	.js .section-page-head .motif__line,
	.js .page-head .motif__line,
	.js .section-hero .section-hero__text > .service-shape .motif__line {
		stroke-dasharray: 1;
		animation: jni-motif-draw var(--duration-entrance) var(--ease-out) both;
	}
	.js .section-hero-home .motif__line--2,
	.js .section-page-head .motif__line--2,
	.js .page-head .motif__line--2 { animation-delay: 0.1s; }
	.js .section-hero-home .motif__line--3,
	.js .section-page-head .motif__line--3,
	.js .page-head .motif__line--3 { animation-delay: 0.2s; }
	.js .section-hero-home .motif__line--4,
	.js .section-page-head .motif__line--4,
	.js .page-head .motif__line--4 { animation-delay: 0.3s; }
	@keyframes jni-motif-draw {
		from { stroke-dashoffset: 1; }
		to { stroke-dashoffset: 0; }
	}
}
.service-shape {
	display: block;
	height: auto;
	overflow: visible;
}
.service-shape .service-shape__fill { fill: var(--service-accent, currentColor); }
/* On a card: the shape first, above the number. */
.section-services .service:has(> .service-shape) {
	display: flex;
	flex-direction: column;
}
.section-services .service > .service-shape {
	order: -1;
	width: 3rem;
	margin-block-end: var(--space-40);
}
/* In a service page's hero: the shape right above the H1. */
.section-hero .section-hero__text > .service-shape { width: 4rem; }
/* In a page head: the motif in the right half, as in Home's hero; below
   the text on a phone. Nyheter's head (.page-head, News_List::head(),
   news.css) takes the same place and size from 48em (F-0059).
   A page's own motif (.motif--page: Erbjudande, Nyheter, Support;
   Home\Motif::PAGE_HEADS) is not shown on a phone, so the content starts
   under the intro (the Director, 2026-10-04: "dölj motivet på mobil för
   nyheter support och erbjudande"). Logotyper's everyday motif keeps its
   place under the text.
   Nyheter's head reserves no height for its motif (the Director,
   2026-10-05: "mindre luft på Nyheter"): the motif is as tall as the H1
   and the intro, between 8rem and the usual 12rem/14rem, so the filter row
   follows at the head's own --space-70 and the H1 stays where it is on
   every page head. */
.motif--page {
	display: none;
}
.section-page-head > .alignwide:has(> .motif) {
	display: flex;
	flex-direction: column;
}
.section-page-head > .alignwide > .motif {
	order: 1;
	width: 9rem;
	height: auto;
	margin-block-start: var(--space-60);
	overflow: visible;
}
@media (min-width: 48em) {
	.motif--page {
		display: block;
	}
	.section-page-head > .alignwide:has(> .motif),
	.page-head:has(> .motif) {
		display: block;
		position: relative;
		padding-inline-end: calc(12rem + var(--space-70));
	}
	.section-page-head > .alignwide:has(> .motif) {
		min-height: 12rem;
	}
	.section-page-head > .alignwide > .motif,
	.page-head > .motif {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 0;
		width: 12rem;
		height: auto;
		margin: 0;
		overflow: visible;
		transform: translateY(-50%);
	}
	/* Nyheter: the height of the text block (the head's padding box less
	   its padding), square, at least 8rem and at most 12rem. */
	.page-head > .motif {
		width: auto;
		height: calc(100% - 2 * var(--space-70));
		min-height: 8rem;
		max-height: 12rem;
		aspect-ratio: 1;
	}
}
@media (min-width: 64em) {
	.section-page-head > .alignwide:has(> .motif),
	.page-head:has(> .motif) {
		padding-inline-end: calc(14rem + var(--space-90));
	}
	.section-page-head > .alignwide:has(> .motif) {
		min-height: 14rem;
	}
	.section-page-head > .alignwide > .motif { width: 14rem; }
	.page-head > .motif {
		max-height: 14rem;
	}
}

/* ---------- Service tabs (inc/service-tabs.php, F-0069) ---------- */
/* The four services as a tab row under the hero of each service page. It
   stays where it is (not sticky; Director, 2026-10-06: "flikraden ska inte
   flyta med den får ligga fast"). On a phone the four tabs do not fit, so
   the row is one line you swipe sideways inside itself (Director: "vi kör
   svep i sidled på mobil"); the page does not scroll sideways. The hint that
   more tabs exist is a soft shadow at the edge where the row continues: the
   classic CSS-only "scroll shadows" (white covers that scroll with the
   content, over shadows fixed to the edges), so a shadow shows only on a side
   with more to see, goes away at the end and needs no script or motion. */
.service-tabs {
	background: var(--color-base);
	border-bottom: 1px solid var(--color-border);
}
.service-tabs .service-tabs__list {
	display: flex;
	gap: var(--space-50);
	margin: 0;
	padding: 0 max(var(--gutter), (100% - var(--wide-width)) / 2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	background:
		linear-gradient(to right, var(--color-base), var(--color-base)) left center / var(--space-60) 100% no-repeat local,
		linear-gradient(to left, var(--color-base), var(--color-base)) right center / var(--space-60) 100% no-repeat local,
		linear-gradient(to right, color-mix(in srgb, var(--color-contrast) 28%, transparent), transparent) left center / var(--space-40) 100% no-repeat scroll,
		linear-gradient(to left, color-mix(in srgb, var(--color-contrast) 28%, transparent), transparent) right center / var(--space-40) 100% no-repeat scroll;
}
.service-tabs .service-tabs__list::-webkit-scrollbar { display: none; }
.service-tabs .service-tabs__item { flex: 0 0 auto; margin: 0; }
.service-tabs .service-tabs__link {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	border-bottom: 3px solid transparent;
	color: var(--color-contrast);
	font-size: var(--fs-small);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}
.service-tabs .service-tabs__link:hover { color: var(--color-primary); }
.service-tabs .service-tabs__link[aria-current] {
	border-bottom-color: var(--color-primary);
	color: var(--color-primary);
}
/* The row scrolls, so a ring outside the link would be cut off: draw it inside. */
.service-tabs .service-tabs__link:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
@media print {
	.service-tabs { display: none; }
}

/* ---------- Motion (F-0005 AC6) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button .wp-block-button__link {
		transition: background-color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
	}
	.wp-block-button .wp-block-button__link::after { transition: transform var(--duration-fast) var(--ease-out); }
	.wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }
	.section-services .service__title a {
		transition: background-size var(--duration-fast) var(--ease-out), color var(--duration-fast) ease-out;
	}
	.link-arrow::after,
	.link-back::before,
	.section-services .service__more::after { transition: transform var(--duration-fast) var(--ease-out); }
	.link-arrow:hover::after,
	.section-services .service:hover .service__more::after { transform: translateX(3px); }
	.link-back:hover::before,
	p.link-back:hover::before { transform: translateX(-3px); }
}