/*
Theme Name: straight solutions
Theme URI: https://straight-solutions.com
Template: pediment
Author: Bergert Digital
Description: straight solutions GmbH website — a Pediment child theme.
# x-release-please-start-version
Version: 0.5.1
# x-release-please-end-version
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: straight-solutions
*/

/* --- straight solutions polish layer --- */

/* Brand-consistency: override parent custom props for black-band contexts */
:root {
  --wp--custom--color--text-on-dark: #FFFFFF;
  --wp--custom--color--text-on-dark-soft: #D6D6D6;
  /* muted body text on the dark CTA band — must be light, not black */
  --wp--custom--color--text-on-accent-muted: #D6D6D6;
  --wp--preset--shadow--focus: 0 0 0 3px rgba(0,0,0,0.45);
}

/* Feature card hover/lift */
.starter-feature {
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .starter-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--lifted);
  }
}

/* Scroll-reveal classes — hidden state scoped to .ss-js so content is
   always visible without JS (no-JS, print, SEO render, observer failure). */
.ss-js .ss-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .7s cubic-bezier(.16, .8, .3, 1), transform .7s cubic-bezier(.16, .8, .3, 1);
  will-change: opacity, transform;
}
.ss-js .ss-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ss-js .ss-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Visible, on-brand focus ring */
:where(a,button,.wp-block-button__link,input,textarea,select):focus-visible {
  outline: none;
  box-shadow: var(--wp--preset--shadow--focus);
  border-radius: .375rem;
}

/* Nav: lighter weight, links stay black; an understated accent underline
   slides in on hover/current (replaces the chunky static underline). */
.site-header .wp-block-navigation { font-weight: 400; }
.site-header .wp-block-navigation a.wp-block-navigation-item__content {
  position: relative;
  text-decoration: none;
}
.site-header .wp-block-navigation a.wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation a.wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content,
.site-header .wp-block-navigation a[aria-current="page"].wp-block-navigation-item__content {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}
.site-header .wp-block-navigation a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .wp-block-navigation a.wp-block-navigation-item__content::after { transition: none; }
}
.site-header .wp-block-navigation a.wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation a.wp-block-navigation-item__content:focus-visible::after,
.site-header .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content::after,
.site-header .wp-block-navigation a[aria-current="page"].wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Mobile nav overlay: let the open menu fill the whole viewport.
   The parent theme gives `.site-header` a frosted-glass `backdrop-filter`,
   which makes the header a containing block for `position: fixed` descendants.
   That traps WordPress's mobile navigation overlay inside the (short) header
   instead of covering the screen. Drop the filter only while the menu is open
   so the fixed overlay escapes to the viewport again. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Design pass: core ships a bare top-left list. Make the open panel feel
   intentional and on-brand — a vertically-centred stack of large, tappable
   links, a thin yellow brand rule across the top (the header "immer einfacher"
   motif), and a clearer close control. The overlay just shows/hides (no
   animation). Scoped to the open overlay; the desktop nav is untouched. */
/* Make the dialog fill the viewport so the logo pins to the top, the links
   centre in the space below, and everything is constrained to the panel width
   (column flex + min-width:0) so long labels wrap instead of overflowing. */
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  background: var(--wp--preset--color--surface);
  border-top: 3px solid var(--wp--preset--color--accent);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;   /* centre the menu block vertically */
  min-width: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: 0;            /* drop core's fixed top padding so centring is true */
  gap: clamp(1.25rem, 4vh, 2.5rem);
  min-width: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: clamp(1.25rem, 4vh, 2.5rem);
  min-width: 0;
  max-width: 100%;
}
/* Large, comfortably-tappable links (≈48px targets) that wrap rather than
   overflow when a label is long. */
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-size: clamp(1.6rem, 7vw, 2.5rem);
  line-height: 1.1;
  padding-block: 0.15em;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  max-width: 100%;
}
/* Cloned site logo: pinned to the top, its left edge aligned with the menu
   items (the dialog already sits inside the container's padding, so left:0
   lines it up). Only shown inside the open overlay — the dialog is displayed
   inline in the desktop nav, so hide the clone everywhere else. */
.site-header .ss-menu-logo {
  display: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-logo img {
  display: block;
  width: clamp(130px, 40vw, 160px);
  height: auto;
}
/* Replace core's hard-to-reach top-right "×" with the "Zurück" button below. */
.site-header .wp-block-navigation__responsive-container-close {
  display: none;
}
/* "Zurück" back button: sits above the menu items, left-aligned with them,
   within thumb reach. Hidden outside the open overlay (the content renders
   inline in the desktop nav). */
.site-header .ss-menu-back {
  display: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 clamp(1.25rem, 5vh, 2.5rem);
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--foreground);
  font-family: inherit;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-back svg {
  width: 1.15em;
  height: 1.15em;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-back:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .ss-menu-back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
}

/* Full-bleed overlay layout (no animation — the menu just shows/hides). The
   inset lives on the panel so the white surface covers the viewport edge to
   edge, and core's own fade/translateY entrance animation is dropped so there's
   nothing moving. Scoped to the overlay breakpoint (<600px) so the inline
   desktop nav is unaffected. */
@media (max-width: 599.98px) {
  .site-header .wp-block-navigation__responsive-container {
    padding: 0;
    overflow-y: auto;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    animation: none; /* drop core's fade/translateY entrance — show plainly */
  }
  .site-header .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-close {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    padding: clamp(1.25rem, 6vw, 2rem);
    background: var(--wp--preset--color--surface);
    border-top: 3px solid var(--wp--preset--color--accent);
  }
  .site-header .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-dialog {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
}

/* Brand top bar: thin yellow rule across the very top, tagline at the right.
   (Reproduces the straight-solutions.com "immer einfacher" brand line.) */
.ss-topbar {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 0;
}
/* Center the logo/nav row vertically in the band below the yellow line */
.site-header > .alignwide:not(.ss-topbar) {
  align-items: center;
  min-height: clamp(52px, 4.5vw, 64px);
}
.ss-topbar::before {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  background: var(--wp--preset--color--accent);
}
.ss-topbar .ss-topbar__tag {
  margin: 0;
  flex: 0 0 auto;
  font-size: var(--wp--preset--font-size--xs, .8rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--wp--preset--color--foreground);
  white-space: nowrap;
}
.ss-topbar::after {
  content: "";
  flex: 0 0 22px;
  height: 3px;
  background: var(--wp--preset--color--accent);
}

/* --- Footer (mirrors straight-solutions.com) --- */
/* Microsoft Solutions Partner badge — background URL is relative to style.css
   (theme root), so it resolves in any theme dir (edinburgh dev / straight-solutions prod). */
.ss-ms-badge {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 768 / 404;
  background-image: url(assets/img/ms-solutions-partner-modern-work.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
/* Right-hand contact column: social icons sit below the address */
.ss-footer-contact .wp-block-social-links {
  margin-top: var(--wp--preset--spacing--40, 1.5rem);
  justify-content: flex-end;
}
/* LinkedIn / XING as solid black squares with white glyphs (contact page, light bg) */
.ss-social-black .wp-social-link {
  background-color: #000;
  color: #fff;
  border-radius: 4px;
}
.ss-social-black .wp-social-link a,
.ss-social-black .wp-social-link svg { color: #fff; fill: #fff; }

/* Contact-page Google Map embed */
.ss-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: .5rem;
  overflow: hidden;
}
.ss-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===== Dark brand footer — bookends the dark hero ===== */
.site-footer {
  background: #1B2228;
  color: var(--wp--preset--color--surface);
  border-top: 3px solid var(--wp--preset--color--accent);
  padding-block: clamp(48px, 5vw, 72px) 26px;
}
.ss-foot-wordmark {
  margin: 0;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--wp--preset--color--surface);
}
.ss-foot-tag {
  margin: 16px 0 0;
  max-width: 34ch;
  line-height: 1.55;
  color: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
}
.ss-foot-colh {
  margin: 0 0 16px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.ss-foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ss-foot-links a {
  position: relative;
  width: max-content;
  text-decoration: none;
  color: color-mix(in srgb, var(--wp--preset--color--surface) 86%, transparent);
}
.ss-foot-links a:hover { color: var(--wp--preset--color--surface); }
.ss-foot-links a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--wp--preset--color--accent);
}
.ss-foot-contact {
  line-height: 1.7;
  color: color-mix(in srgb, var(--wp--preset--color--surface) 78%, transparent);
}
.ss-foot-contact a { color: inherit; text-decoration: none; }
.ss-foot-contact a:hover { color: var(--wp--preset--color--accent); }
/* MS badge on a white chip so the logo colours stay correct on dark */
.site-footer .ss-ms-badge {
  width: 268px;
  margin-top: 26px;
  padding: 14px 18px;
  background-color: #fff;
  border-radius: 10px;
}
/* Social: custom outline squares with brand SVGs (LinkedIn + XING — WP core
   ships no XING icon), yellow fill on hover. */
.site-footer .ss-footer-social {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.ss-footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface) 24%, transparent);
  border-radius: 6px;
  color: var(--wp--preset--color--surface);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ss-footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.ss-footer-social a:hover {
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: #000;
}
/* Legal bar */
.ss-footer-legal {
  margin-top: clamp(36px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--surface) 12%, transparent);
}
.ss-footer-legal p { margin: 0; color: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent); }
.site-footer .ss-footer-legal a { color: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent); }
.site-footer .ss-footer-legal a:hover { color: var(--wp--preset--color--surface); }
.ss-footer-legal .ss-foot-ein {
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* Yellow CTA band (home closing CTA) — compact full-bleed accent band with
   the heading on the left and the button on the right (matches the live site). */
.ss-cta-yellow {
  background: var(--wp--preset--color--accent);
}
.ss-cta-yellow .ss-cta-title {
  color: var(--wp--preset--color--foreground);
  margin: 0;
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.2;
  flex: 1 1 auto;
}
.ss-cta-yellow .wp-block-buttons { flex: 0 0 auto; }
/* Buttons (link-style): a static 2px resting underline (::after) plus a 1px line
   (::before) that slides in flush above it on hover — same motion as the nav, so
   the underline thickens to 3px. No border, so nothing stacks or lingers. */
.wp-element-button {
  position: relative;
  background: transparent;
}
.wp-element-button::after {           /* resting underline */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
}
.wp-element-button::before {          /* +1px that slides in on hover, flush above */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.wp-element-button:hover::before,
.wp-element-button:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .wp-element-button::before { transition: none; }
}

/* Secondary buttons (is-style-outline, e.g. "PDF ansehen"): muted; a simple
   thicken + recolour on hover, no slide. */
.wp-block-button.is-style-outline > .wp-element-button {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--foreground-muted);
}
.wp-block-button.is-style-outline > .wp-element-button::after {
  height: 1px;
  background: var(--wp--preset--color--border-strong);
  transition: height .2s ease, background-color .2s ease;
}
.wp-block-button.is-style-outline > .wp-element-button::before { display: none; }
.wp-block-button.is-style-outline > .wp-element-button:hover::after,
.wp-block-button.is-style-outline > .wp-element-button:focus-visible::after {
  height: 2px;
  background: var(--wp--preset--color--accent);
}

/* On the yellow CTA band the yellow underline would vanish — use black. */
.ss-cta-yellow .wp-element-button::after,
.ss-cta-yellow .wp-element-button::before { background: var(--wp--preset--color--foreground); }
.ss-cta-yellow .ss-cta-btn .wp-block-button__link,
.ss-cta-yellow .ss-cta-btn .wp-block-button__link:hover,
.ss-cta-yellow .ss-cta-btn .wp-block-button__link:focus-visible {
  background: transparent;
  color: var(--wp--preset--color--foreground);
  border-radius: 0;
  padding: .45rem 0;
}

/* Keep the closing yellow CTA band flush with the footer on short pages.
   `.wp-site-blocks` is a 100vh flex column whose main content group grows to fill
   the viewport (sticky footer). On a short page (e.g. Kontakt) that slack lands
   *below* the last block, leaving a visible gap between the accent CTA band and the
   dark footer. Make the content area a flex column and let the closing band absorb
   the slack above it — within the light content area, where it's invisible — so the
   band hugs the footer. Long pages overflow the viewport, so `margin-top` resolves
   to 0 and nothing changes. Surface-bg closing bands (Impressum/Datenschutz) blend
   into the slack already, so only the yellow band is pinned. */
.wp-site-blocks > .wp-block-group:has(> .wp-block-post-content) {
  display: flex;
  flex-direction: column;
}
.wp-site-blocks > .wp-block-group > .wp-block-post-content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.wp-site-blocks > .wp-block-group > .wp-block-post-content > .ss-cta-yellow:last-child {
  margin-top: auto !important; /* !important beats the band's inline margin-top:0 from the pattern */
}

/* Hero CTA over the dark media-bg hero: white text, yellow thickening underline */
.starter-hero.is-variant-media-bg .starter-hero__cta {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .4rem 0;
  color: #fff;
  font-weight: 400;
}
.starter-hero.is-variant-media-bg .starter-hero__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
}
.starter-hero.is-variant-media-bg .starter-hero__cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.starter-hero.is-variant-media-bg .starter-hero__cta:hover::before { transform: scaleX(1); }
/* The parent hero adds a translateY lift on hover — keep the button still. */
.starter-hero.is-variant-media-bg .starter-hero__cta:hover,
.starter-hero.is-variant-media-bg .starter-hero__cta:focus-visible {
  transform: none;
  background: transparent;
  color: #fff;
}

/* Match the original's light (SimplonBP 300) heading weight. The parent block
   styles hardcode 700–800 on these headline classes, so override them here. */
.starter-hero__headline,
.starter-section-head__headline,
.starter-cta__title { font-weight: 300; }

/* Section-head eyebrow: match the yellow-stroke eyebrow language site-wide */
.starter-section-head__eyebrow {
  position: relative;
  padding-top: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--wp--preset--color--foreground);
}
.starter-section-head__eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--wp--preset--color--accent);
}

/* Career value pillars — a mini yellow stroke above each pillar title */
.ss-pillars .wp-block-column h3 { position: relative; padding-top: 18px; }
.ss-pillars .wp-block-column h3::before {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px;
  background: var(--wp--preset--color--accent);
}

/* Career sliders: mirror the original page's one-slide-at-a-time image/text
   carousel, while keeping the sharper straight-solutions visual language. */
.ss-career-slider {
  margin-top: var(--wp--preset--spacing--40);
  margin-bottom: 0;
}
.ss-career-slider .starter-slider__track {
  border-radius: 0;
}
.ss-career-slider .starter-slide {
  min-height: clamp(360px, 42vw, 520px);
}
.ss-career-slider .starter-slide__panel {
  padding: clamp(32px, 5vw, 64px);
}
.ss-career-slider .starter-slide__heading {
  font-weight: 300;
  line-height: 1.12;
}
.ss-career-slider .starter-slide__body {
  max-width: 64ch;
}
.ss-employee-slider .starter-slide__heading {
  order: 1;
  font-size: clamp(2rem, 3.1vw, 3.6rem);
}
.ss-employee-slider .starter-slide__eyebrow {
  order: 2;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ss-employee-slider .starter-slide__body {
  order: 3;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.5;
}
.ss-employee-slider .starter-slide__panel {
  padding: clamp(28px, 4vw, 52px);
}
.ss-employee-section .starter-section-head {
  padding-bottom: 0;
}
.ss-employee-intro {
  max-width: 820px;
  margin-top: 1rem !important;
  margin-bottom: 0;
  color: var(--wp--preset--color--foreground-muted);
}
.ss-employee-intro + .ss-employee-slider {
  margin-top: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) {
  .ss-career-slider .starter-slide {
    min-height: 0;
  }
}

/* Career hero bridge — gives the post-hero intro a clear home */
.ss-career-bridge.starter-band {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4rem, -5vw, -2.5rem) !important;
  padding-top: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: transparent;
}
.ss-career-bridge__inner {
  margin-top: 0 !important;
  padding: clamp(2rem, 4vw, 3.375rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--wp--preset--color--surface);
  align-items: flex-start !important;
}
.ss-career-bridge .starter-section-head {
  padding-bottom: 0;
}
.ss-career-bridge__text {
  max-width: 780px;
  margin: 0;
  color: var(--wp--preset--color--foreground);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
}
@media (max-width: 781px) {
  .ss-career-bridge.starter-band {
    margin-top: 0 !important;
    padding-top: var(--wp--preset--spacing--50);
  }
  .ss-career-bridge__inner {
    padding: 0;
    background: transparent;
  }
  .ss-career-bridge__text {
    margin-top: var(--wp--preset--spacing--30);
  }
}

/* Career "kundenzentriert" examples — a mini yellow stroke above each column */
.ss-examples .wp-block-column { position: relative; padding-top: 22px; }
.ss-examples .wp-block-column::before {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 3px;
  background: var(--wp--preset--color--accent);
}

/* Career job cards — yellow left edge, uppercase mini-labels, branded bullets */
.ss-job.has-border-color {
  color: var(--wp--preset--color--foreground);
  box-shadow: inset 4px 0 0 0 var(--wp--preset--color--accent);
}
.ss-job h3 {
  color: var(--wp--preset--color--foreground);
}
.ss-job :where(p, li) {
  color: var(--wp--preset--color--foreground-muted);
}
.ss-job__details {
  margin-top: var(--wp--preset--spacing--30);
}
.ss-job__summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  color: var(--wp--preset--color--foreground);
}
.ss-job__summary::-webkit-details-marker {
  display: none;
}
.ss-job__summary::marker {
  content: "";
}
.ss-job__summary-close,
.ss-job__details[open] .ss-job__summary-open {
  display: none;
}
.ss-job__details[open] .ss-job__summary-close {
  display: inline;
}
.ss-job__details[open] .ss-job__summary {
  margin-bottom: var(--wp--preset--spacing--30);
}
.ss-job h4 {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--foreground);
}
.ss-job ul.wp-block-list { list-style: none; padding-left: 0; }
.ss-job ul.wp-block-list li { position: relative; padding-left: 1.4rem; }
.ss-job ul.wp-block-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  background: var(--wp--preset--color--accent);
}

/* Career benefits — section copy left, benefit list right */
.ss-benefits-layout {
  align-items: flex-start;
}
.ss-benefits {
  margin-top: 0;
}
.ss-benefits__list {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  max-width: 820px;
  margin: 0 auto 0 0 !important;
  padding: 0;
  list-style: none;
}
.ss-benefits__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--wp--preset--color--foreground);
  line-height: 1.55;
}
.ss-benefits__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  background: var(--wp--preset--color--accent);
}
@media (max-width: 781px) {
  .ss-benefits {
    margin-top: var(--wp--preset--spacing--30);
  }
}

/* Career testimonial photos — thin yellow edge to match the service photos */
.ss-quote-photo img { box-shadow: -5px 0 0 0 var(--wp--preset--color--accent); }

/* "Elevated" bands now read as dark slate with a soft directional lift (echoes
   the hero), replacing the old grey vertical fade. Content within flips to light
   via the rules below. */
.starter-band.is-style-band-elevated {
  position: relative;
  isolation: isolate;
  background: #2F3A42;
}
.starter-band.is-style-band-elevated::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(0, 0, 0, .26), transparent 75%);
}

/* Light-on-dark content for the slate bands. Scoped to the known content
   wrappers so a slider's own coloured panel (e.g. the yellow teamwork slider)
   keeps its black-on-yellow text. */
.is-style-band-elevated .ss-kicker,
.is-style-band-elevated .starter-section-head__eyebrow,
.is-style-band-elevated .starter-section-head__headline,
.is-style-band-elevated .starter-media-text__body,
.is-style-band-elevated .starter-media-text__body :is(h2, h3, p, li, strong),
.is-style-band-elevated .wp-block-columns :is(h2, h3, p, li),
.is-style-band-elevated .wp-element-button,
.is-style-band-elevated .wp-element-button:hover {
  color: var(--wp--preset--color--surface);
}
/* Supporting lines stay subdued — just lighter, not muted-grey. */
.is-style-band-elevated .starter-media-text__body h3,
.is-style-band-elevated .starter-section-head__lead {
  color: color-mix(in srgb, var(--wp--preset--color--surface) 66%, transparent);
}
/* Black line-art (e.g. the hand-drawn "Das ist ja einfach!" bubble) inverts to
   white so it reads on the dark band. Only for art flagged ss-art-on-dark —
   never photos. */
.is-style-band-elevated .ss-art-on-dark img {
  filter: invert(1);
}

/* Section eyebrow / kicker (e.g. "straight solutions als") — with a short yellow
   accent stroke above it (echoes the underline motif). */
.ss-kicker {
  position: relative;
  padding-top: 18px;
  font-size: var(--wp--preset--font-size--sm, .9rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--foreground);
  margin-bottom: .4rem;
}
.ss-kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 4px;
  background: var(--wp--preset--color--accent);
}

/* Service-row photos: square corners + a thin yellow edge on the inner side
   (facing the text). Static — no hover thickening. */
.starter-media-text__img { border-radius: 0; }
.starter-media-text.is-media-right .starter-media-text__img {
  box-shadow: -5px 0 0 0 var(--wp--preset--color--accent), var(--wp--preset--shadow--medium);
}
.starter-media-text.is-media-left .starter-media-text__img {
  box-shadow: 5px 0 0 0 var(--wp--preset--color--accent), var(--wp--preset--shadow--medium);
}

/* Even spacing in the service-row header stack (eyebrow → title → subtitle) */
.starter-media-text__body h2 { margin-top: .4rem; margin-bottom: .4rem; }
/* Subtitle reads as a supporting standfirst, not a second headline. Matches the
   section-head "lead" style (see parent block) so the subtitle treatment is
   uniform site-wide: muted, lighter weight, subordinate to the h2 title. */
.starter-media-text__body h3 {
  margin-top: 0;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wp--preset--color--foreground-muted);
}

/* Post-hero intro: asymmetric lead (right, 58%) + support (left, 42%) with a
   hairline divider. */
.ss-intro > .wp-block-column:first-child {
  padding-right: clamp(28px, 4vw, 64px);
  border-right: 1px solid #EEF0F1;
}
.ss-intro > .wp-block-column:last-child {
  padding-left: clamp(28px, 4vw, 64px);
}
.ss-intro > .wp-block-column h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); }
@media (max-width: 781px) {
  .ss-intro > .wp-block-column:first-child {
    order: 2;
    padding-right: 0;
    border-right: 0;
    margin-top: 2rem;
  }
  .ss-intro > .wp-block-column:last-child { order: 1; padding-left: 0; }
}

/* Compact header: cap the logo height so the header doesn't grow tall */
.site-header .custom-logo {
  max-height: 52px;
  width: auto;
  height: auto;
}

/* Full-bleed hero: image covers the whole section, no rounded card or margins */
.starter-band:has(.starter-hero.is-variant-media-bg) {
  padding-block: 0;
}
.starter-hero.is-variant-media-bg {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  min-height: clamp(440px, 62vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* children size to content, not full width */
  /* Align hero text to the global content column (same left edge as header/sections),
     with a matching gutter on the right. The first term is the band's breakout
     padding; the second is the alignwide inset. Matches at any width incl. scrollbar. */
  padding-inline: calc(
    clamp(20px, 4vw, 40px) + max(0px, (100% - var(--wp--style--global--wide-size, 1200px)) / 2)
  );
}
/* Hero text: full width on small screens, ~50% of the content column on larger ones */
.starter-hero.is-variant-media-bg > .starter-hero__headline,
.starter-hero.is-variant-media-bg > .starter-hero__subheadline {
  max-width: 100%;
}
@media (min-width: 782px) {
  .starter-hero.is-variant-media-bg > .starter-hero__headline,
  .starter-hero.is-variant-media-bg > .starter-hero__subheadline {
    max-width: calc(var(--wp--style--global--wide-size, 1200px) / 2);
  }
}
.starter-hero.is-variant-media-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.45) 55%, rgba(0,0,0,.30));
}
.starter-hero.is-variant-media-bg,
.starter-hero.is-variant-media-bg :where(h1,h2,h3,p) {
  color: #fff;
}