/* ==========================================================================
   Just Name IT, ny design: the service icons outside Home (F-0089)
   --------------------------------------------------------------------------
   Loaded on any page but Home where the server put a service's rendered
   form in its flat icon's place (inc/services.php): the service cards on
   Erbjudande, Jobba hos oss and In English, and the icon above a service
   page's H1. Home's cards are ny-pages/home.css's, with the same rules.

   The box is today's icon (sections.css: 3rem square on a card, 4rem above
   a service page's H1), so every card and heading keeps its size and place
   (AC1). The render carries its shadow to the right, so it is sized by
   height and runs out of the box to the right, with nothing behind it (no
   tile, no box: Director 2026-10-26, "Not wrapped in a box here").

   Every selector names a section (check_design.py, page stylesheets).
   ========================================================================== */

/* ---------- A service card ---------- */

/* 4.3rem, today's 3rem made larger twice by 20 percent (Director 2026-10-28,
   "ikonerna kan vara lite större", then "add another 20%"): the cards' text
   sits 1.3rem lower, the layout is kept. */
.section-services .service > .service-shape.ny-icon {
	width: 4.3rem;
	height: 4.3rem;
}

/* ---------- Above a service page's H1 ---------- */
.section-hero--service .section-hero__text > .service-shape.ny-icon {
	width: 4rem;
	height: 4rem;
}

/* ---------- The picture in either box ---------- */
.section-services .service-shape.ny-icon .ny-form,
.section-hero--service .service-shape.ny-icon .ny-form {
	display: block;
	height: 100%;
}

.section-services .service-shape.ny-icon img,
.section-hero--service .service-shape.ny-icon img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
}

/* ==========================================================================
   The service pages' hero in deep blue (F-0097, a trial)
   --------------------------------------------------------------------------
   Director 2026-10-29: "kan vi prova med blå bakgrund även på tjänstesidorna
   i heron?" The same tokens as the other deep blue heads (ny-pages/heads.css):
   --color-primary behind, --color-inverse text, the inverse focus ring. The
   back link is inverse too. The photo's thin outline keeps the service's
   colour (--service-accent) on the blue. The service's small shape is the
   `-morkbla` render (deep studio, dark shadow). The blue ends where the
   hero section ends; the tab row and the sections below are unchanged.
   ========================================================================== */
.section-hero--service {
	background: var(--color-primary);
	color: var(--color-inverse);
}

.section-hero--service h1,
.section-hero--service .lead,
.section-hero--service .section-hero__text p,
.section-hero--service p.link-back,
.section-hero--service p.link-back > a {
	color: var(--color-inverse);
}

.section-hero--service :focus-visible {
	outline-color: var(--color-focus-inverse);
}