@charset "UTF-8";
/*
Nirotech theme stylesheet.

Root file compiled at runtime by the parent theme's ScssParser and injected
inline. Authored mobile first. Order matters: tokens and mixins first, then
element defaults, then page scaffolding, then components.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Lato, self-hosted.

The Joomla site used Lato for everything — body, headings, buttons, navigation —
in exactly two weights: Regular and Black, each upright and italic. Its other
two families were dead weight (Secular One appeared on no page at all, Karla
only in search fields and a blockquote footer that this build does not have), so
they are not carried over.

The files are served from the theme, never from a font CDN: such a request
transmits the visitor's IP address to a third country before any consent has
been given.

$niro-fonts-uri is injected by inc/styles.php, root-relative and without a host.
It has to start at the root: the compiled CSS is served either as a file below
uploads/ or inlined in the document head, and a path relative to neither of those
two would point somewhere different in each case. Without a host it survives a
move between test, staging and live without a search and replace.
*/
/* woff2 first: every current browser takes it, woff only serves as a fallback. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-400.woff2") format("woff2"), url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-400.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-400-italic.woff2") format("woff2"), url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-400-italic.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-900.woff2") format("woff2"), url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-900.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-900-italic.woff2") format("woff2"), url("/wp-content/themes/OmanBros-Theme-child/assets/fonts/lato-900-italic.woff") format("woff");
}
/*
Element defaults.

Sets the typographic baseline and the site-wide focus and motion behaviour.
Component partials build on these; they do not restate font sizes or focus
rules.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  color: #231f20;
  font-family: "Lato", "Helvetica Neue", arial, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  margin-block: 0 1rem;
  color: #005e85;
  font-family: "Lato", "Helvetica Neue", arial, sans-serif;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
}

h3 {
  font-size: clamp(1.3125rem, 1.19rem + 0.6vw, 1.75rem);
}

h4 {
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
}

p,
ul,
ol {
  margin-block: 0 1rem;
}

p {
  max-width: 70ch;
}

a {
  color: #005e85;
  text-underline-offset: 0.15em;
}
a:hover {
  color: #00435f;
}

/*
 * Links inside running text are underlined: colour alone is not a distinction
 * (WCAG 1.4.1). Navigation, cards and buttons carry their own shape and are
 * excluded, which is why the rule sits on the prose containers rather than on
 * every anchor.
 */
.entry-content a:not(.niro-button),
.niro-job-section a:not(.niro-button),
.site-footer__contact a:not(.niro-button) {
  text-decoration: underline;
}

/* One focus style for every interactive element, never removed. */
:focus-visible {
  outline: 3px solid #a05306;
  outline-offset: 2px;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Wide content scrolls inside its own box instead of the page. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The parent theme's skip link becomes visible once focused. */
.skip-link:focus {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  clip-path: none;
  background: #ffffff;
  color: #005e85;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/*
Page scaffolding.

Provides the content container, section rhythm and the header/footer bands.
Layout changes should happen here or in the tokens — component partials stay
unaware of page width and gutters.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/*
The parent theme caps .site-main, .site-header, .site-footer and the page title
at 500/600/800/1140px across its breakpoints. Header and footer carry the
theme's own escape classes; .site-main has none, so it is released here.

Selector specificity deliberately matches the parent rule
(`body:not([class*=elementor-page-]) .site-main`) — the child stylesheet is
printed later, so an equal-specificity rule wins without !important.

No container here either: the header band, the slider and the front page
sections run the full width. The container is applied by the blocks that need
it, so text never reaches the window edge.
*/
body:not(.nirotech-boxed) .site-main {
  max-width: none;
  padding-block-end: clamp(2.5rem, 6vw, 6rem);
  /*
  Below 576px the parent adds 10px of its own here, and everything inside
  inherits the inset — the header band, the slider and every page image stopped
  short of the edge on a phone while running edge to edge everywhere else. The
  gutter belongs to the blocks that carry text, not to the main element.
  */
  padding-inline: 0;
}

/*
The same 10px land on the header and the footer below 576px. There it does not
cut off a background — those run to the edge either way — but it pushed their
contents to 26px while the page text sat at 16px, so the logo no longer lined up
with the column beneath it. The theme's own full-width classes carry the same
weight as the parent rule and are printed later.
*/
.site-header.header-full-width,
.site-footer.footer-full-width {
  padding-inline: 0;
}

.page-header .entry-title {
  max-width: none;
}

/*
Sections stay full width so their background runs edge to edge; the container
sits on the inner wrapper. A section without one gets it directly.
*/
.niro-section:not(:has(> .niro-section__inner)),
.page-header:not(.page-header--band) {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 48rem) {
  .niro-section:not(:has(> .niro-section__inner)),
  .page-header:not(.page-header--band) {
    padding-inline: 1.5rem;
  }
}

.page-header:not(.page-header--band) {
  padding-block-start: 2.5rem;
}

/* === SECTIONS === */
.niro-section {
  padding-block: clamp(2.5rem, 6vw, 6rem);
}
.niro-section + .niro-section {
  border-block-start: 1px solid #c4d3df;
}

.niro-section--tinted {
  background: #f3f6f8;
}

.niro-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.niro-lead {
  max-width: 60ch;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
}

/*
Navigation.

Mobile first: the burger toggle and its dropdown carry the navigation on small
screens, the horizontal bar takes over from the medium breakpoint. Both share
one menu, so nothing is duplicated in the outline for screen readers — the
dropdown is inert while collapsed.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
.site-header__bar {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
@media (min-width: 48rem) {
  .site-header__bar {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 48rem) {
  .site-header__bar {
    flex-wrap: nowrap;
  }
}

/*
Sized like the Joomla header: 32px tall on phones, 57px from the medium
breakpoint. Width follows the 266:57 aspect ratio of nirotech.svg.
*/
.custom-logo-link img,
.custom-logo {
  display: block;
  width: auto;
  height: 2rem;
}
@media (min-width: 48rem) {
  .custom-logo-link img,
  .custom-logo {
    height: 3.5rem;
  }
}

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.site-title {
  margin: 0;
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
}
.site-title a {
  text-decoration: none;
}

/* === HORIZONTAL BAR (from xl) === */
/*
The bar needs about 1100px for logo, six entries and the language switcher, so it
only appears from the extra-large breakpoint. Up to there the burger takes over —
at tablet width the six entries used to wrap onto a second line.

Note the selector on the list: the parent theme styles ".site-navigation ul.menu",
one class more than a plain "ul", so a rule written here without the class never
took effect. That is why the menu wrapped despite "flex-wrap: nowrap".
*/
.site-navigation {
  display: none;
  /* Submenus open on hover and on keyboard focus alike. */
}
@media (min-width: 80rem) {
  .site-navigation {
    display: block;
  }
}
.site-navigation ul.menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.site-navigation li {
  position: relative;
}
.site-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 900;
  text-decoration: none;
  /* Current page is marked by more than colour. */
}
.site-navigation a:hover {
  text-decoration: underline;
}
.site-navigation a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}
.site-navigation .sub-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  display: none;
  min-width: 12rem;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
  border: 1px solid #c4d3df;
  background: #ffffff;
}
.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  display: flex;
}
.site-navigation .sub-menu {
  white-space: normal;
}
.site-navigation .sub-menu a {
  width: 100%;
  padding-inline: 1rem;
  font-weight: 400;
}

/* === TOGGLE (below xl) === */
/*
The bar spreads its children apart, which would leave the button hanging in the
middle of the empty space. The automatic start margin swallows that space instead,
so the button ends up next to the language switcher and the two read as one group
on the right. The horizontal menu keeps the middle for itself, because it replaces
the button rather than joining it.
*/
.site-navigation-toggle-holder {
  margin-inline-start: auto;
}
@media (min-width: 80rem) {
  .site-navigation-toggle-holder {
    display: none;
  }
}

.site-navigation-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.75rem;
}

/*
On the narrowest phones the word would push the bar past its own width and the
logo would be squeezed: wordmark 149px, language switcher 96px, button 87px and
the gaps come to 364px inside 343px. The icon carries the meaning there, and the
word stays available to screen readers as the button's name.
*/
.site-navigation-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 30rem) {
  .site-navigation-toggle__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* Three bars, drawn without an icon font or image request. */
.site-navigation-toggle__icon {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentcolor;
}
.site-navigation-toggle__icon::before, .site-navigation-toggle__icon::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentcolor;
  content: "";
}
.site-navigation-toggle__icon::before {
  top: -6px;
}
.site-navigation-toggle__icon::after {
  top: 6px;
}

/* === DROPDOWN (below md) === */
.site-navigation-dropdown {
  display: none;
  border-block-start: 1px solid #c4d3df;
  background: #ffffff;
  /*
  The gutter sits on the link, not on the list. The parent pins the list to
  "padding: 0" with a selector this cannot outweigh, and a highlight has to run
  the full width anyway — with the indent on the list, the submenu's background
  would start a step inside and look like a mistake.

  The parent also draws a line under every single link. Together with the
  separators below that produced two lines under the last submenu entry. All of it
  is undone at the shape the parent uses; anything shorter carries less weight.

  Separation stays with "li + li": between entries only, never after the last, so
  no line can ever meet the one belonging to the next top-level entry.
  */
  /* The step is added to the text, so the background still starts at the edge. */
  /*
  Only the entry the visitor is actually on. The parent marks it with a descendant
  selector, so on the job portal it painted the submenu below it as well; the
  child combinator keeps the colour on the one entry.
  */
  /*
  The parent's rule still reaches every link below the current entry, so on the
  job portal it painted "Wir suchen" as well. Taken back inside the submenu, at a
  weight the parent cannot match.
  */
  /* An ancestor of the current page is not the current page. */
  /*
  The parent theme folds every nested entry to zero height and reopens it only
  when Elementor's script adds "elementor-active" — a script that never loads
  here, so the submenu sat in the markup and was never seen. It carries a single
  entry per language ("Wir suchen" under "Jobportal"), so there is nothing worth
  folding: it is simply shown.

  The selector repeats the parent's shape on purpose. Anything shorter carries
  less weight than its rule and would lose.
  */
}
@media (min-width: 80rem) {
  .site-navigation-dropdown {
    display: none !important;
  }
}
.site-navigation-dropdown ul {
  margin: 0;
  list-style: none;
}
.site-navigation-dropdown > ul {
  padding-block: 0.5rem;
}
.site-navigation-dropdown li + li {
  border-block-start: 1px solid #c4d3df;
}
.site-navigation-dropdown a {
  display: block;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  font-weight: 900;
  text-decoration: none;
}
.site-navigation-dropdown ul.menu li a {
  padding: 0.5rem 1rem;
  background: none;
  box-shadow: none;
  color: #005e85;
}
@media (min-width: 48rem) {
  .site-navigation-dropdown ul.menu li a {
    padding-inline: 1.5rem;
  }
}
.site-navigation-dropdown ul.menu .sub-menu a {
  padding-inline-start: 2rem;
}
@media (min-width: 48rem) {
  .site-navigation-dropdown ul.menu .sub-menu a {
    padding-inline-start: 2.5rem;
  }
}
.site-navigation-dropdown ul.menu li.current-menu-item > a {
  background: #005e85;
  color: #ffffff;
}
.site-navigation-dropdown ul.menu li.current-menu-item .sub-menu a {
  background: none;
  color: #005e85;
}
.site-navigation-dropdown ul.menu li.current-menu-ancestor > a,
.site-navigation-dropdown ul.menu li.current-menu-parent > a {
  background: none;
  color: #005e85;
}
.site-navigation-dropdown ul.menu > li li {
  max-height: none;
  transform: none;
}

/* Driven by the state the toggle script writes, not by a class. */
.site-navigation-dropdown[aria-hidden=false] {
  display: block;
}

/* === LANGUAGE SWITCHER === */
.niro-language ul {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.niro-language a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  font-weight: 900;
  text-decoration: none;
}
.niro-language a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

/* Inside the dropdown the switcher sits below the menu, not beside it. */
/* === CALL TO ACTION ABOVE THE FOOTER === */
.niro-cta {
  background: #f3f6f8;
  text-align: center;
}

.niro-cta__inner {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 2.5rem;
}
@media (min-width: 48rem) {
  .niro-cta__inner {
    padding-inline: 1.5rem;
  }
}

.niro-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2.5rem;
  border-radius: 3px;
  background: #005e85;
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}
.niro-button:hover {
  background: #00435f;
  color: #ffffff;
}

/* === FOOTER === */
/*
The band spans the full width; only its content is held in the container, so
the background photo runs edge to edge.
*/
.site-footer {
  position: relative;
  background: #005e85;
  background-image: var(--niro-footer-image, none);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  /*
  The photo sits under an almost opaque tint, so a wide screen is the only
  place where its resolution is visible at all. Anything narrower loads the
  1024px file instead of the 2500px original - 88 kB rather than 702 kB.
  */
  /* Tint over the photo so the text keeps its AA contrast. */
  /*
  Links carry the same colour as the surrounding text, so the underline is
  the only thing that marks them — WCAG 2.1 SC 1.4.1 forbids colour alone.
  Hover and focus thicken it instead of merely tinting it, which keeps the
  change perceivable without relying on colour either.
  */
}
@media (min-width: 64rem) {
  .site-footer {
    background-image: var(--niro-footer-image-wide, var(--niro-footer-image, none));
  }
}
.site-footer::before {
  position: absolute;
  inset: 0;
  background: rgba(0, 94, 133, 0.88);
  content: "";
}
.site-footer > * {
  position: relative;
}
.site-footer a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer a:hover, .site-footer a:focus-visible {
  text-decoration-thickness: 3px;
}
.site-footer h2 {
  margin-block-end: 0.5rem;
  color: #ffffff;
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
}
.site-footer p {
  max-width: 40ch;
}
.site-footer :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/*
Three proportional tracks, verified in the browser.

Every track is minmax(0, …): an `fr` track otherwise refuses to shrink below its
own min-content, which grew the row past the container and pushed the logo out
of view. The zero minimum lets all three give way together, so the logo column
stays inside the band at any desktop width.
*/
.site-footer__columns {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
}
@media (min-width: 48rem) {
  .site-footer__columns {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 48rem) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
}

.site-footer__column {
  min-width: 0;
}

.site-footer__column--logo {
  text-align: right;
  /* The link wraps an image, so an underline would only be an artefact. */
}
.site-footer__column--logo a {
  text-decoration: none;
}

/*
No colour filter: the preferred file is drawn entirely in #FFFFFF on a
transparent canvas and needs none. A brightness/invert filter would also
flatten the fallback's plate and lettering into one blank white rectangle.
*/
/*
The width attribute in the markup (135, taken from the SVG) is only a
presentational hint and loses against any CSS rule, so setting it here is
enough — no need to touch the template. height stays auto so the aspect ratio
follows.
*/
.site-footer__logo {
  width: 150px;
  height: auto;
}

.site-footer__meta ul {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

/*
inline-block, not inline-flex: text-decoration does not propagate into a flex
container, so the underline that marks the link would disappear. The vertical
padding keeps the target comfortably large.
*/
.site-footer__meta a {
  display: inline-block;
  padding-block: 0.25rem;
}

.site-footer__contact {
  display: grid;
  gap: 0.25rem 1rem;
  margin: 0;
}
@media (min-width: 30rem) {
  .site-footer__contact {
    grid-template-columns: auto 1fr;
  }
}
.site-footer__contact dt {
  font-weight: 900;
}
.site-footer__contact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* === CLOSING BAR === */
.site-footer__bar {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.25);
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
}
@media (min-width: 48rem) {
  .site-footer__bar {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 30rem) {
  .site-footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.site-footer__bar p {
  max-width: none;
  margin: 0;
}

/*
Scroll-driven chrome: the back-to-top button and the header that returns on the
way up.

Both are conveniences. Without JavaScript the header stays where it is and the
button stays hidden — nothing on the page depends on either.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* === SPRÜNGE INNERHALB DER SEITE === */
/*
Every jump inside the current page glides instead of cutting: the button back to
the top, the "Services" entry pointing at a section of the front page, the skip
link. A cut leaves the reader guessing whether the page moved or was replaced.

The property is not inherited, so this reaches the document only — the slider
keeps deciding for itself how its track moves.

Nobody who asked for less movement gets any: the reduced-motion block in
_base.scss overrides this with "auto !important".
*/
html {
  scroll-behavior: smooth;
}

/* === HEADER, EINGEZOGEN BEIM ABWÄRTSSCROLLEN === */
/*
The header stays in the flow as a sticky element and is merely pushed out of
sight, so nothing below it jumps when it leaves or returns. Pulling it out of the
flow instead would shift the whole page by its height.

The white ground is what the header carries anyway; it is repeated here because a
sticky bar travels over arbitrary content and must stay readable.
*/
.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: #ffffff;
  transition: transform 0.25s ease;
}

.site-header.is-tucked {
  transform: translateY(-100%);
}

/*
Every jump target keeps the height of the header free above it, otherwise the
skip link, the anchor to the application form and the "Services" entry all land
underneath the bar. The script measures the header; the fallback covers the
moment before it runs and the case where it never does.
*/
[id] {
  scroll-margin-block-start: calc(var(--niro-header-height, 5rem) + 0.5rem);
}

/*
At the top of the page the header sits in its own place and needs no edge. Only
once it floats over content does it set itself apart, so the line comes with the
"is-stuck" state, not with the sticky position.
*/
.site-header.is-stuck {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* === ZURÜCK NACH OBEN === */
/*
Deliberately the same object as the slider arrows: a dark translucent circle with
a drawn chevron. At 0.55 opacity the white glyph measures 4.74:1 against a white
page, which clears the 3:1 that SC 1.4.11 asks of a control; hover and focus
deepen the circle and add a ring, exactly as on the slider.

Hidden by default and revealed by the script. visibility takes it out of the tab
order while it is away, so nobody can focus a button they cannot see.
*/
.niro-to-top {
  min-width: 3rem;
  min-height: 3rem;
  position: fixed;
  z-index: 30;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  visibility: hidden;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
  /*
  The colour is restated here on purpose. This control is a link, and "a:hover"
  carries one element more than the class does, so the general link colour would
  win and take the chevron with it — it is drawn in currentcolor and would go
  dark on a dark circle.
  */
  /* Pressed: the same brand orange ring the slider arrows use. */
  /*
  Drawn rather than typed, for the same reason as on the slider: the chevron
  glyphs carry asymmetric side bearings, so centring their box leaves the
  visible mark off-centre.
  */
}
@media (min-width: 48rem) {
  .niro-to-top {
    right: 1rem;
    bottom: 1rem;
  }
}
.niro-to-top:hover, .niro-to-top:focus-visible {
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}
.niro-to-top:active {
  border-color: #e48820;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}
.niro-to-top::before {
  width: 0.55rem;
  height: 0.55rem;
  /* The mark's mass sits towards its tip, so it is nudged down to sit optically centred. */
  transform: translateY(17%) rotate(-45deg);
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  content: "";
}

.niro-to-top.is-visible {
  visibility: visible;
  opacity: 1;
}

/*
Public form styling.

Covers the markup emitted by the parent theme's Form model: field wrappers,
fieldsets, the required marker, the spam honeypot and the status notices shown
after a submission.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/*
The parent theme ships no styling for its spam trap, so an unstyled form shows
an empty, unlabelled input that visitors fill in — discarding their submission
as spam.

Two selectors on purpose: since 8.2.0 the theme rewrites the field type to
"text" and marks the wrapper "passive", so the type-based class never appears.
The older one stays for a theme that predates that change.
*/
.form-field.passive,
.form-field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* A hidden control has no row of its own; its wrapper must not take space. */
.form-field-hidden {
  display: none;
}

/* === FIELDS === */
.form-field {
  margin-block-end: 1.5rem;
  /* Consent and option labels read as a sentence, not as a heading. */
}
.form-field label {
  display: block;
  margin-block-end: 0.25rem;
  font-weight: 900;
}
.form-field input:not([type=checkbox]):not([type=radio]),
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #c4d3df;
  border-radius: 3px;
  background: #ffffff;
  color: #231f20;
  font: inherit;
}
.form-field textarea {
  resize: vertical;
}
.form-field input[type=checkbox],
.form-field input[type=radio] {
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin-inline-end: 0.5rem;
}
.form-field:has(input[type=checkbox]) label, .form-field:has(input[type=radio]) label {
  font-weight: 400;
}
.form-field .description {
  display: block;
  margin-block-start: 0.25rem;
  color: #5b5658;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
}

.required {
  color: #97250f;
}

/* === FIELDSETS === */
fieldset {
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border: 1px solid #c4d3df;
  border-radius: 4px;
  background: #f3f6f8;
}
fieldset legend {
  padding-inline: 0.5rem;
  color: #005e85;
  font-weight: 900;
}

/* Two columns once there is room; single column stays the mobile default. */
@media (min-width: 48rem) {
  .form-field-group {
    display: grid;
    gap: 0 1.5rem;
    grid-template-columns: 1fr 1fr;
  }
}

/* === BUTTONS === */
button,
.form-field button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: 3px;
  background: #005e85;
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  /*
  ":focus" is listed on purpose. The parent theme's reset paints every button
  Elementor pink in that state, and a mouse click reaches it — ":focus-visible"
  does not, which is why the keyboard always looked right and the mouse did not.
  Every component button below repeats the same trick at its own specificity.
  */
  /* Pressed: the brand orange, held only as long as the button is down. */
}
button:hover, button:focus,
.form-field button:hover,
.form-field button:focus {
  background: #00435f;
}
button:active,
.form-field button:active {
  background: #e48820;
  color: #231f20;
}

/* === STATUS NOTICES === */
.nirotech-form-notice {
  margin-block-end: 1.5rem;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid;
  border-radius: 3px;
}

.nirotech-form-notice--ok {
  border-color: #1d6134;
  background: rgba(29, 97, 52, 0.08);
  color: #1d6134;
}

.nirotech-form-notice--error {
  border-color: #97250f;
  background: rgba(151, 37, 15, 0.08);
  color: #97250f;
}

/*
Job listing components.

Card grid for the overview, region filter, and the detail layout of a single
position. The card is a self-contained component: it carries no assumptions
about the width it is placed in, so the surrounding grid can change freely.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* === FILTER === */
.niro-filter {
  margin-block-end: 2.5rem;
  padding: 1.5rem;
  border: 1px solid #c4d3df;
  border-radius: 4px;
  background: #f3f6f8;
}

/*
The button that folds the facets away on a phone. It is delivered hidden and the
script decides — from the medium breakpoint there is room for everything and it
disappears again.
*/
.niro-filter__summary {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #c4d3df;
  border-radius: 4px;
  background: #ffffff;
  color: #231f20;
  font-weight: 900;
  text-align: start;
  /*
  The ink is restated in every state. The parent reset hands "button:hover" and
  "button:focus" white text, and that selector carries one element more than this
  class — without repeating the colour the word "Filter" turned white on white and
  vanished the moment the pointer arrived.
  */
  /* Pressed: the brand orange, as on every other button of the site. */
}
.niro-filter__summary:hover, .niro-filter__summary:focus {
  border-color: #005e85;
  background: #ffffff;
  color: #231f20;
}
.niro-filter__summary:active {
  border-color: #e48820;
  background: #e48820;
  color: #231f20;
}
@media (min-width: 48rem) {
  .niro-filter__summary {
    display: none;
  }
}

/*
Author styles beat the browser's own, so "display: flex" above would show the
button even while it carries the hidden attribute — which is exactly the state it
ships in when no script runs.
*/
.niro-filter__summary[hidden] {
  display: none;
}

.niro-filter__summary-label {
  margin-inline-end: auto;
}

.niro-filter__summary-count {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #005e85;
  color: #ffffff;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
}

/* Drawn like the slider arrows, pointing down when closed and up when open. */
.niro-filter__summary-mark {
  width: 0.5rem;
  height: 0.5rem;
  transform: translateY(-25%) rotate(135deg);
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
}

.niro-filter__summary[aria-expanded=true] .niro-filter__summary-mark {
  transform: translateY(25%) rotate(-45deg);
}

.niro-filter__body + .niro-filter__status,
.niro-filter__summary + .niro-filter__body {
  margin-block-start: 1.5rem;
}

.niro-filter__facet + .niro-filter__facet {
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid #c4d3df;
}

.niro-filter__legend {
  margin: 0 0 0.5rem;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b5658;
}

.niro-filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
Groups stack their subgroups beneath the group itself, so the two levels stay
readable side by side without a second component.
*/
.niro-filter__options--groups {
  gap: 1.5rem;
}

.niro-filter__group > .niro-filter__options {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.niro-filter__toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid #c4d3df;
  border-radius: 999px;
  background: #ffffff;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  line-height: 1.2;
  text-decoration: none;
  color: #231f20;
}

a.niro-filter__toggle:hover {
  border-color: #005e85;
}

.niro-filter__option--child .niro-filter__toggle {
  margin-inline-start: 1rem;
  border-style: dashed;
}

.niro-filter__option.is-selected .niro-filter__toggle {
  border-color: #005e85;
  border-style: solid;
  background: #005e85;
  color: #ffffff;
}

/*
Unavailable options keep their place instead of disappearing, so the list does
not shift under the pointer. The dimmed look is paired with the "–" count, never
colour alone (WCAG 1.4.1).
*/
.niro-filter__option.is-unavailable .niro-filter__toggle {
  border-style: dotted;
  background: transparent;
  color: #5b5658;
  cursor: default;
}

.niro-filter__count {
  min-width: 1.5em;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: #e8edf1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #231f20;
}

.is-selected .niro-filter__count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.is-unavailable .niro-filter__count {
  background: transparent;
}

.niro-filter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid #c4d3df;
}

.niro-filter__result {
  margin: 0;
  font-weight: 900;
}

.niro-filter__active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.niro-filter__chip,
.niro-filter__reset {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  line-height: 1.2;
}

.niro-filter__chip {
  border: 1px solid #005e85;
  background: #ffffff;
  text-decoration: none;
  color: #005e85;
}

.niro-filter__empty {
  padding: 2.5rem;
  border: 1px dashed #c4d3df;
  border-radius: 4px;
  text-align: center;
}

/* === CARD === */
.niro-job-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid #c4d3df;
  border-radius: 4px;
  border-block-start: 4px solid #e48820;
  background: #ffffff;
  /*
  The whole card is clickable, but only the heading link is in the tab order,
  so keyboard users are not forced through a duplicate target.
  */
}
.niro-job-card h2 {
  margin-block-end: 0;
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
}
.niro-job-card a::after {
  position: absolute;
  inset: 0;
  content: "";
}
.niro-job-card:focus-within {
  outline: 3px solid #a05306;
  outline-offset: 2px;
}

.niro-job-card {
  position: relative;
}

.niro-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: #5b5658;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  list-style: none;
  padding: 0;
}

.niro-job-card__regions {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  color: #5b5658;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
}

/* === DETAIL === */
.niro-job-facts {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin-block-end: 2.5rem;
  padding: 1.5rem;
  border-radius: 4px;
  background: #f3f6f8;
}
@media (min-width: 30rem) {
  .niro-job-facts {
    grid-template-columns: auto 1fr;
  }
}
.niro-job-facts dt {
  font-weight: 900;
}
.niro-job-facts dd {
  margin: 0;
}

.niro-job-section {
  margin-block-end: 2.5rem;
}
.niro-job-section h2 {
  font-size: clamp(1.3125rem, 1.19rem + 0.6vw, 1.75rem);
}

.niro-job-apply {
  padding: 1.5rem;
  border-radius: 4px;
  background: #e8edf1;
}

/*
Front page slider.

Scroll-snapping track: one slide fills the viewport on phones, the neighbouring
slide peeks in from the medium breakpoint so the strip reads as scrollable
without an instruction.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
.niro-slider {
  position: relative;
  width: 100%;
}

.niro-slider__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  /* The track is focusable so it can be scrolled by keyboard. */
  /*
  Set by the drag script while a pointer is down. Snapping is suspended so it
  does not fight the drag, and the smooth scroll of the buttons would make a
  drag feel laggy.
  */
}
.niro-slider__track::-webkit-scrollbar {
  display: none;
}
.niro-slider__track:focus-visible {
  outline: 3px solid #a05306;
  outline-offset: 2px;
  outline-offset: -3px;
}
.niro-slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

/*
Slide widths follow the Joomla slider: full width on phones, 4/5 from the
medium breakpoint and 3/5 on large screens, so the next slide is always partly
visible and the strip reads as scrollable without an instruction.
*/
.niro-slider__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 48rem) {
  .niro-slider__slide {
    flex-basis: 80%;
  }
}
@media (min-width: 80rem) {
  .niro-slider__slide {
    flex-basis: 60%;
  }
}

.niro-slider__image {
  display: block;
  width: 100%;
  height: clamp(14rem, 42vw, 28rem);
  object-fit: cover;
}

.niro-slider__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0.5rem 1rem;
  background: #005e85;
  color: #ffffff;
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  font-weight: 900;
}

/* === CONTROLS === */
/*
Placed inside the slider, left and right, over the image.

The circle is semi-transparent rather than fully clear: at 0.55 opacity a white
glyph still measures 4.74:1 against the worst case of a pure white photo, which
clears the 3:1 that SC 1.4.11 requires of a control. A fully transparent
background cannot be guaranteed at all, because the photo behind it is
arbitrary. Hover and focus deepen the circle and add a ring.
*/
.niro-slider__button {
  min-width: 3rem;
  min-height: 3rem;
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  /*
  ":focus" keeps the parent reset's Elementor pink out on a mouse click; the
  keyboard ring still comes from ":focus-visible" alone.
  */
  /*
  Pressed: the brand orange rides the ring, the arrow stays white. Orange may do
  this here where it must not act as a focus indicator — a press is transient
  feedback, not a state anyone has to be able to find. Against the deepened
  circle it measures 7.84:1 either way.
  */
  /*
  Drawn rather than typed. The chevron glyphs U+276E/U+276F carry asymmetric
  side bearings, so centring their box leaves the visible mark off-centre.
  A rotated square with two borders is geometry, not typography, and sits
  exactly where it is put.
  */
}
.niro-slider__button:hover, .niro-slider__button:focus, .niro-slider__button:focus-visible {
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
}
.niro-slider__button:active {
  border-color: #e48820;
  /*
  Restated so this does not depend on ":hover" happening to be there. The
  generic "button:active" carries one element more than the bare class, so
  without this line a keyboard press would flood the circle with orange and
  leave the white arrow at 2.68:1 on it.
  */
  background: rgba(0, 0, 0, 0.75);
}
.niro-slider__button::before {
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  content: "";
}

/*
The chevron's visible mass lies towards its tip, so each one is nudged back by
a sixth of its size to sit optically centred in the circle.
*/
.niro-slider__button--prev {
  left: 0.5rem;
}
@media (min-width: 48rem) {
  .niro-slider__button--prev {
    left: 1rem;
  }
}
.niro-slider__button--prev::before {
  transform: translateX(17%) rotate(-135deg);
}

.niro-slider__button--next {
  right: 0.5rem;
}
@media (min-width: 48rem) {
  .niro-slider__button--next {
    right: 1rem;
  }
}
.niro-slider__button--next::before {
  transform: translateX(-17%) rotate(45deg);
}

/*
Page components.

Hero, page header, service teasers and the reference list. Each block is
self-contained: it reacts to the space it is given rather than assuming a
viewport, so the surrounding layout can change without edits here.
*/
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Shared mixins.

Anything a second partial might need belongs here rather than being repeated.
Component partials import this file and call the mixins; they do not restate
the underlying values.
*/
/*
Breakpoints and the media query mixin.

The stylesheet is authored mobile first: base rules describe the narrowest
viewport and every query widens from there. There are deliberately no
max-width queries — a new layout stage is added by introducing a breakpoint,
never by carving an exception out of a wide default.
*/
/* Opens a min-width query for a named breakpoint. */
/*
Nirotech CI colours, grouped by role.

Primary blue comes from the company logo, the orange range from the background
graphic of the existing site. Every value carrying text or acting as a focus
indicator is checked against WCAG 2.1 AA; the measured ratio on white is noted
beside it. Change a value here and re-check the ratio — do not introduce
one-off colours in component partials.
*/
/* === BRAND === */
/* 7.14:1 on white */
/*
The brand orange is decorative ONLY: 2.68:1 on white fails AA for text and
falls short of the 3:1 required for focus indicators. Use it for fills and
graphic accents behind which no text sits.
*/
/* Text- and focus-capable accent, 5.62:1 on white. */
/* 7.94:1 on white */
/* === TEXT & SURFACES === */
/* 16.30:1 on white */
/* 7.20:1 on white */
/* === STATUS === */
/* 8.12:1 on white */
/* 7.47:1 on white */
/* === ROLES === */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* Constrains content width and keeps a gutter that grows with the viewport. */
/*
Focus indicator meeting WCAG 2.1 SC 1.4.11 (3:1 against the adjacent colour).
Always paired with an offset so the ring stays visible on filled controls.
*/
/* Hides an element visually while leaving it available to screen readers. */
/*
Removes an element from view without display:none, so that automated form
submitters still find and fill it.
*/
/* Auto-fitting card grid; the minimum column width decides when it wraps. */
/* Guarantees the 44x44px minimum target size recommended by WCAG 2.1. */
/*
Type scale and spacing steps.

Sizes are fluid via clamp(), so they need no breakpoint of their own: the
minimum applies on the narrowest phone, the maximum from roughly 80rem
upwards. Body text never drops below 1rem so that the browser's own font-size
setting stays meaningful.
*/
/*
Lato with a system fallback, matching the Joomla site. Only two weights exist:
Regular and Black — the original shipped no semibold or bold cut. Use the
tokens rather than raw numbers, so a later addition of a 700 face changes one
line instead of a dozen.
*/
/* Joomla ran 16.5px at line-height 1.7; this starts a touch above that. */
/* === SPACING === */
/* Vertical rhythm of a page section, growing with the viewport. */
/* === CLAIM === */
/*
Sits above the slider, never over it: an overlay would swallow the pointer and
keyboard events the slider needs.
*/
.niro-claim {
  background: #005e85;
  color: #ffffff;
}

.niro-claim__text {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 2.5rem;
}
@media (min-width: 48rem) {
  .niro-claim__text {
    padding-inline: 1.5rem;
  }
}
.niro-claim__text h1 {
  max-width: 22ch;
  margin-block-end: 0.5rem;
  color: #ffffff;
}
.niro-claim__text .niro-lead {
  margin-block-end: 0;
}

.niro-claim__image {
  width: 100%;
  height: clamp(14rem, 42vw, 28rem);
  object-fit: cover;
}

/* === PAGE HEADER === */
.page-header {
  margin-block-end: 2.5rem;
}

/*
Without an image the header is a bare heading and needs the gutter of its own —
it used to borrow the 10px the parent put on the main element below 576px, which
is now gone.
*/
.page-header:not(.page-header--band) {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 48rem) {
  .page-header:not(.page-header--band) {
    padding-inline: 1.5rem;
  }
}

/* The parent pads the title itself below 576px; the container above does that. */
.page-header .entry-title {
  padding-inline: 0;
}

/*
Full-width image band with the title laid over it, mirroring the "Header 500"
sections of the Joomla site. The band breaks out of the content container, so
the page template need not know about it.
*/
/*
Narrow screens put the picture above the title instead of behind it. Laying them
over each other only works while the image is the taller of the two, and it is
not: the image height is fixed, the text grows with the wording. A three-line job
title with its lead needs 291px where the image offers 144px, and the scrim then
swallows the picture whole.

From the large breakpoint the image measures 266px against at most ~215px of
text, so there the two go back to being one band.
*/
.page-header--band {
  position: relative;
  display: grid;
  margin-block-end: 4rem;
  background: #005e85;
}

.page-header__image {
  width: 100%;
  height: clamp(9rem, 26vw, 18rem);
  object-fit: cover;
}

.page-header--band .page-header__text {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem;
  background: #005e85;
}
@media (min-width: 48rem) {
  .page-header--band .page-header__text {
    padding-inline: 1.5rem;
  }
}
.page-header--band .page-header__text .entry-title,
.page-header--band .page-header__text .niro-lead {
  color: #ffffff;
}
.page-header--band .page-header__text .niro-lead {
  margin-block-end: 0;
}

@media (min-width: 64rem) {
  .page-header--band > * {
    grid-area: 1/1;
  }
  /* Fills the row, so a long heading can never leave it short again. */
  .page-header--band .page-header__image {
    height: 100%;
    min-height: clamp(9rem, 26vw, 18rem);
  }
  .page-header--band .page-header__text {
    z-index: 1;
    align-self: end;
    /*
    The scrim runs the full width; only the text inside it keeps to the column.
    With the container's max-width on the block itself it stopped 120px short of
    either edge on a wide screen and read as a panel floating on the photo.
    The padding does the centring, so no extra wrapper is needed.
    */
    max-width: none;
    padding-inline: max(1.5rem, 50% - 75rem / 2);
    /*
    Scrim guarantees AA contrast whichever photo is chosen: at 0.84 the weakest
    point still measures 4.95:1 against white text over a fully white photo.
    Never take the lower stop below 0.80 — that is where 4.5:1 breaks.
    */
    background: linear-gradient(to top, rgba(0, 94, 133, 0.96), rgba(0, 94, 133, 0.84));
  }
}
/* === TEASERS === */
.niro-teaser {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 4px;
  border-block-start: 4px solid #e48820;
  background: #ffffff;
}
.niro-teaser h3 {
  margin-block-end: 0;
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
}
.niro-teaser p:last-child {
  margin-block: auto 0;
  padding-block-start: 0.5rem;
  font-weight: 900;
}

/* === FRONT PAGE === */
.site-main--front {
  padding-block-start: 0;
}

.niro-section__inner {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 48rem) {
  .niro-section__inner {
    padding-inline: 1.5rem;
  }
}

/*
Two text columns from the medium breakpoint, mirroring the Joomla layout. The
rule sits on the wrapper so the paragraphs flow across both columns; applied to
a paragraph it would split that paragraph instead.
*/
@media (min-width: 48rem) {
  .niro-columns {
    columns: 2;
    column-gap: 4rem;
    column-fill: balance;
  }
}
.niro-columns p {
  max-width: none;
  break-inside: avoid;
}
.niro-columns > :first-child {
  margin-block-start: 0;
}

/* === CONTENT SURFACE === */
/*
The article sits on a light surface separated from the page ground, so text
blocks no longer float without an edge.
*/
.entry-content {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block-end: 2.5rem;
}
@media (min-width: 48rem) {
  .entry-content {
    padding-inline: 1.5rem;
  }
}
.entry-content blockquote {
  margin-inline: 0;
  padding: 1.5rem;
  border-inline-start: 4px solid #e48820;
  background: #f3f6f8;
}
.entry-content blockquote cite {
  display: block;
  margin-block-start: 0.5rem;
  color: #5b5658;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  font-style: normal;
}
.entry-content ul {
  padding-inline-start: 1.5rem;
}
.entry-content li {
  margin-block-end: 0.25rem;
}

/*
The rule that used to sit here removed the gutter from an element carrying both
classes at once — meant to prevent doubled padding, but on the front page the two
classes are on the same element, so there was nothing to double. Below 1200px the
container fills the viewport and the text ran into the edge; above it, max-width
centres the column and nobody noticed.
*/
/* === TWO COLUMNS IN CONTENT === */
/*
Mirrors the Joomla row that carried references and safety side by side. Each
column brings its own list, so nothing is stitched together in the template.
*/
.niro-duo {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .niro-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.niro-duo__col {
  min-width: 0;
}
.niro-duo__col > :first-child {
  margin-block-start: 0;
}

/* === HIGHLIGHTED BAND IN CONTENT === */
/*
Breaks out of the content container so the tint runs the full width, the way
"Unsere Leistungen" does on the front page. Joomla marked these sections
style=secondary and style=muted respectively.

The 100vw trick would add a horizontal scrollbar of exactly the scrollbar's own
width, so the main element clips instead — `clip` rather than `hidden`, which
would turn it into a scroll container and break sticky positioning.
*/
.niro-band {
  margin-inline: calc(50% - 50vw);
  padding-block: 2.5rem;
  padding-inline: calc(50vw - 50% + 1rem);
  background: #f3f6f8;
}
@media (min-width: 48rem) {
  .niro-band {
    padding-inline: calc(50vw - 50% + 1.5rem);
  }
}
.niro-band > :first-child {
  margin-block-start: 0;
}
.niro-band > :last-child {
  margin-block-end: 0;
}

/*
The strong variant, matching Joomla's style=secondary. White on the brand blue
measures 7.14:1, so headings, body copy and the button label all clear AA
without further adjustment.
*/
.niro-band--accent {
  padding-block: 4rem;
  background: #005e85;
  color: #ffffff;
  /* On the blue ground the filled button needs the inverse treatment. */
}
.niro-band--accent h2,
.niro-band--accent h3 {
  color: #ffffff;
}
.niro-band--accent a:not(.niro-button) {
  color: #ffffff;
}
.niro-band--accent .niro-button {
  background: #ffffff;
  color: #005e85;
}
.niro-band--accent .niro-button:hover {
  background: #e8edf1;
  color: #00435f;
}
.niro-band--accent :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.site-main {
  overflow-x: clip;
}

/* === SUCCESS STORY === */
/*
Two columns from the medium breakpoint, mirroring the Joomla layout: photo on
the left, heading and text on the right. Stacks on phones, photo first.
*/
.niro-story {
  display: grid;
  gap: 1.5rem;
  margin-block-end: 1.5rem;
}
@media (min-width: 48rem) {
  .niro-story {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: start;
  }
}

.niro-story__media {
  margin: 0;
}
.niro-story__media img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.niro-story__media figcaption {
  margin-block-start: 0.25rem;
  color: #5b5658;
  font-size: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  /*
  The parent theme's reset.css sets figcaption in italics. One caption of
  two words then pulled a 24 kB font file on every page - the muted colour
  and the smaller size already set the caption apart.
  */
  font-style: normal;
}

.niro-story__text {
  min-width: 0;
}
.niro-story__text > :first-child {
  margin-block-start: 0;
}