/* ==========================================================================
   Just Name IT, ny design: the page heads (F-0092, F-0093, F-0094)
   --------------------------------------------------------------------------
   Erbjudande, Nyheter, Jobba hos oss, Support, Kontakt, Om oss, Logotyper,
   Integritetspolicy, In English and the 404 page (inc/heads.php puts the body
   class ny-heads on them). Director 2026-10-28: the head takes Home's hero
   background ("Samma som heron"), and "vi kommer köra med den mörkblå": deep
   blue is the only look (--color-primary), so these are the plain rules. Same
   padding as Home's hero (pages/home.css). On deep blue the same pairs as
   Home's hero (ny-pages/home.css): light text, the keyword/muted text in
   --color-inverse-muted, the highlight in white text on a green
   bar with a page-blue halo (static), white buttons with blue text, the
   inverse focus ring.
   Kontakt's "Våra kontor" is
   light blue (Director 2026-10-28). The white and light blue heads are in
   the tag design-switch-final (docs/architecture/design-archive.md).
   Heads: .section-page-head (Erbjudande, Support, Om oss, Logotyper,
   Integritetspolicy, In English, 404), .section-hero (Jobba hos oss, Kontakt)
   and .section-news-head (Nyheter's header, which sits in a container: its
   band is carried out to the window's edges by a shadow).

   F-0093: one height ("alla sidor (förutom startsidan och In English som ska
   vara större) har olika höjd på det blå bandet. Vi behöver se till att alla
   har samma höjd"). See "One height" at the end.
   ========================================================================== */

/* ---------- Padding as Home's hero ---------- */

.ny-heads .section.section-page-head,
.ny-heads .section.section-hero {
	padding-block: var(--space-70) var(--space-80);
}

.ny-heads .page-head.section-news-head {
	padding-block: var(--space-70) var(--space-80);
}

@media (min-width: 64em) {

	.ny-heads .section.section-page-head,
	.ny-heads .section.section-hero {
		padding-block: var(--space-80) var(--space-100);
	}

	.ny-heads .page-head.section-news-head {
		padding-block: var(--space-80) var(--space-100);
	}
}

/* ---------- Deep blue: the look of every head ---------- */

.ny-heads .section-page-head,
.ny-heads .section-hero {
	background: var(--color-primary);
	color: var(--color-inverse);
}

.ny-heads .section-news-head {
	background: var(--color-primary);
	box-shadow: 0 0 0 100vmax var(--color-primary);
	clip-path: inset(0 -100vmax);
	color: var(--color-inverse);
}

.ny-heads .section-page-head h1,
.ny-heads .section-page-head .lead,
.ny-heads .section-page-head .alignwide p,
.ny-heads .section-page-head .alignwide p:not(.lead),
.ny-heads .section-hero h1,
.ny-heads .section-hero .lead,
.ny-heads .section-hero .section-hero__text p,
.ny-heads .section-news-head h1,
.ny-heads .section-news-head .page-head__intro {
	color: var(--color-inverse);
}

.ny-heads .section-page-head a:not(.wp-block-button__link),
.ny-heads .section-hero__text a:not(.wp-block-button__link) {
	color: var(--color-inverse);
}

/* The halo: the page is a solid --color-primary, so these shadows in the
   same blue are invisible, except where they cut the green bar under
   descenders (g, j, y, p): that makes the gaps. X in steps of 0.015em keeps
   the gap's ends smooth. Y reaches at most 0.05em down, so the bar's top is
   not cut by letters on the baseline, and up to 0.12em up, so the pocket
   inside the g's tail is covered too (Director 2026-11-01: "i dont want the
   green to show inside the G"). */
.ny-heads .section-page-head h1 mark.highlight,
.ny-heads .section-hero h1 mark.highlight {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--color-green), var(--color-green)) no-repeat 0 calc(100% - 0.025em) / 100% 0.14em;
	text-shadow:
		0.12em 0.05em var(--color-primary),
		0.12em 0.025em var(--color-primary),
		0.12em 0 var(--color-primary),
		0.12em -0.06em var(--color-primary),
		0.12em -0.12em var(--color-primary),
		0.105em 0.05em var(--color-primary),
		0.105em 0.025em var(--color-primary),
		0.105em 0 var(--color-primary),
		0.105em -0.06em var(--color-primary),
		0.105em -0.12em var(--color-primary),
		0.09em 0.05em var(--color-primary),
		0.09em 0.025em var(--color-primary),
		0.09em 0 var(--color-primary),
		0.09em -0.06em var(--color-primary),
		0.09em -0.12em var(--color-primary),
		0.075em 0.05em var(--color-primary),
		0.075em 0.025em var(--color-primary),
		0.075em 0 var(--color-primary),
		0.075em -0.06em var(--color-primary),
		0.075em -0.12em var(--color-primary),
		0.06em 0.05em var(--color-primary),
		0.06em 0.025em var(--color-primary),
		0.06em 0 var(--color-primary),
		0.06em -0.06em var(--color-primary),
		0.06em -0.12em var(--color-primary),
		0.045em 0.05em var(--color-primary),
		0.045em 0.025em var(--color-primary),
		0.045em 0 var(--color-primary),
		0.045em -0.06em var(--color-primary),
		0.045em -0.12em var(--color-primary),
		0.03em 0.05em var(--color-primary),
		0.03em 0.025em var(--color-primary),
		0.03em 0 var(--color-primary),
		0.03em -0.06em var(--color-primary),
		0.03em -0.12em var(--color-primary),
		0.015em 0.05em var(--color-primary),
		0.015em 0.025em var(--color-primary),
		0.015em 0 var(--color-primary),
		0.015em -0.06em var(--color-primary),
		0.015em -0.12em var(--color-primary),
		0 0.05em var(--color-primary),
		0 0.025em var(--color-primary),
		0 -0.06em var(--color-primary),
		0 -0.12em var(--color-primary),
		-0.015em 0.05em var(--color-primary),
		-0.015em 0.025em var(--color-primary),
		-0.015em 0 var(--color-primary),
		-0.015em -0.06em var(--color-primary),
		-0.015em -0.12em var(--color-primary),
		-0.03em 0.05em var(--color-primary),
		-0.03em 0.025em var(--color-primary),
		-0.03em 0 var(--color-primary),
		-0.03em -0.06em var(--color-primary),
		-0.03em -0.12em var(--color-primary),
		-0.045em 0.05em var(--color-primary),
		-0.045em 0.025em var(--color-primary),
		-0.045em 0 var(--color-primary),
		-0.045em -0.06em var(--color-primary),
		-0.045em -0.12em var(--color-primary),
		-0.06em 0.05em var(--color-primary),
		-0.06em 0.025em var(--color-primary),
		-0.06em 0 var(--color-primary),
		-0.06em -0.06em var(--color-primary),
		-0.06em -0.12em var(--color-primary),
		-0.075em 0.05em var(--color-primary),
		-0.075em 0.025em var(--color-primary),
		-0.075em 0 var(--color-primary),
		-0.075em -0.06em var(--color-primary),
		-0.075em -0.12em var(--color-primary),
		-0.09em 0.05em var(--color-primary),
		-0.09em 0.025em var(--color-primary),
		-0.09em 0 var(--color-primary),
		-0.09em -0.06em var(--color-primary),
		-0.09em -0.12em var(--color-primary),
		-0.105em 0.05em var(--color-primary),
		-0.105em 0.025em var(--color-primary),
		-0.105em 0 var(--color-primary),
		-0.105em -0.06em var(--color-primary),
		-0.105em -0.12em var(--color-primary),
		-0.12em 0.05em var(--color-primary),
		-0.12em 0.025em var(--color-primary),
		-0.12em 0 var(--color-primary),
		-0.12em -0.06em var(--color-primary),
		-0.12em -0.12em var(--color-primary);
}

/* Static here: the parent sweeps only on Home. */
@media (prefers-reduced-motion: no-preference) {

	.ny-heads .section-page-head h1 mark.highlight,
	.ny-heads .section-hero h1 mark.highlight {
		animation: none;
	}
}

.ny-heads .section-page-head .wp-block-button:not(.is-style-secondary) .wp-block-button__link,
.ny-heads .section-hero .wp-block-button:not(.is-style-secondary) .wp-block-button__link {
	border-color: var(--color-base);
	background: var(--color-base);
	color: var(--color-primary);
}

.ny-heads .section-page-head .wp-block-button.is-style-secondary .wp-block-button__link,
.ny-heads .section-hero .wp-block-button.is-style-secondary .wp-block-button__link {
	border-color: var(--color-base);
	color: var(--color-base);
}

.ny-heads .section-page-head :focus-visible,
.ny-heads .section-hero :focus-visible,
.ny-heads .section-news-head :focus-visible {
	outline-color: var(--color-focus-inverse);
}

/* ---------- Kontakt: Våra kontor in light blue ---------- */

.ny-heads .section-offices {
	background: var(--color-primary-soft);
}

/* ---------- One height (F-0093 AC4) ---------- */

/* Every head but In English's (ny-heads--large, Home's size) is at least as tall as
   --ny-head-height from 48em, with the text and the form group centred in it. The text
   and the form are sized to fit, so the least height is the height; the e2e test checks
   that no head is taller (design-heads.spec.ts). Phones (under 48em) grow with their
   text. One value per width band: 1440 px is the desktop's, 768 px the tablet's, where the
   text column is narrow and the tallest head (Jobba hos oss) sets the height. The property
   sits on the heads themselves (a page stylesheet is scoped to sections). */
.ny-heads:not(.ny-heads--large) .section.section-page-head,
.ny-heads:not(.ny-heads--large) .section.section-hero,
.ny-heads:not(.ny-heads--large) .page-head.section-news-head {
	--ny-head-height: 29rem;
}

@media (min-width: 48em) and (max-width: 63.99em) {

	.ny-heads:not(.ny-heads--large) .section.section-page-head,
	.ny-heads:not(.ny-heads--large) .section.section-hero,
	.ny-heads:not(.ny-heads--large) .page-head.section-news-head {
		--ny-head-height: 37rem;
	}

	/* The text column beside a form is narrow on a tablet: one step smaller title, so the longest
	   word (Integritetspolicy) fits it instead of running under the form. */
	.ny-heads .section-page-head:has(> .alignwide > .ny-head-form) h1 {
		font-size: var(--fs-xx-large);
	}

	/* The hero's text and picture stay side by side on a tablet (the columns would stack
	   at 782 px and make Jobba hos oss' and Kontakt's heads far taller than the others). */
	.ny-heads .section-hero .section-hero__grid {
		flex-wrap: nowrap !important; /* core stacks columns below 782px with !important */
		align-items: center;
	}

	.ny-heads .section-hero .section-hero__text {
		flex-basis: 56% !important;
	}

	.ny-heads .section-hero .section-hero__media {
		flex-basis: 44% !important;
	}
}

@media (min-width: 48em) {

	.ny-heads:not(.ny-heads--large) .section.section-page-head,
	.ny-heads:not(.ny-heads--large) .section.section-hero,
	.ny-heads:not(.ny-heads--large) .page-head.section-news-head {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		min-height: var(--ny-head-height);
	}

	/* The hero's picture is centred against its text, as the other heads' forms are. */
	.ny-heads:not(.ny-heads--large) .section-hero .section-hero__media {
		align-self: center;
	}

	.ny-heads:not(.ny-heads--large) .section.section-page-head > .alignwide,
	.ny-heads:not(.ny-heads--large) .section.section-hero > .alignwide {
		width: 100%;
	}
}

/* Erbjudande's row of four forms is 32rem from 64em; between 1024 and 1279 px that leaves the text
   a narrow column and its head taller than the others (530 against 464 px at 1024). A narrower row
   there gives the text its width back. */
@media (min-width: 64em) and (max-width: 79.99em) {

	.ny-heads .section-page-head--motif-erbjudande {
		--ny-row-width: 26rem;
	}
}

/* Om oss: the head names the page, so the article's small label goes
   (Director 2026-10-29). `about_head()` removes it from the markup; this
   also hides it when the stored page has it in another shape. */
.ny-about-head + .section-article .article__head > .meta {
	display: none;
}