/*
Theme Name:        Skotnes Bygg Theme
Theme URI:         https://skotnes-bygg.no
Author:            Styrk Reklame AS
Author URI:        https://styrkreklame.no
Description:       Skotnes Bygg-spesifikt child theme av Styrk Theme. Token swap (palette + brand) for Skotnes Bygg AS — tømrerbedrift i Stjørdal. Alle blokker arves fra parent.
Template:          styrk-theme
Version:           0.3.0
Text Domain:       skotnes-theme
Requires at least: 6.4
Requires PHP:      8.1
*/

/* ══════════════════════════════════════════════════════════════════════════
   Home page — Tjenester editorial 5-up grid
   Open layout (no card containers), each item is a clickable link with:
   number / custom SVG icon / title / body / Les mer →
   Replaces the legacy skotnes-services-grid (image cards) via PHP filter.
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-services-editorial {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  padding: 48px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--wp--preset--color--primary, #0F1B2D);
}
.skotnes-services-editorial__item {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 8px 4px;
  transition: color 200ms ease, transform 300ms ease;
}
.skotnes-services-editorial__item:hover {
  text-decoration: none !important;
}
.skotnes-services-editorial__num {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  /* Full accent (was at 0.7 opacity → 3.13:1 on surface, fails AA) */
  color: var(--wp--preset--color--accent, #1E5BD8);
  margin-bottom: 14px;
}
.skotnes-services-editorial__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--wp--preset--color--primary, #0F1B2D);
  margin-bottom: 22px;
  transition: color 200ms ease, transform 300ms ease;
}
.skotnes-services-editorial__icon svg {
  width: 60px;
  height: 60px;
}
.skotnes-services-editorial__item:hover .skotnes-services-editorial__icon {
  color: var(--wp--preset--color--accent, #1E5BD8);
  transform: translateY(-2px);
}
.skotnes-services-editorial__title {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--primary, #0F1B2D) !important;
  margin: 0 0 12px !important;
}
.skotnes-services-editorial__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wp--preset--color--primary, #0F1B2D);
  opacity: 0.66;
  margin: 0 !important;
  max-width: 240px;
  /* Grow to fill remaining space inside each card so the "Les mer" CTA
   * always lands on the same baseline regardless of description length. */
  flex: 1 1 auto;
}
.skotnes-services-editorial__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  /* Full accent (was at 0.55 opacity → 2.38:1 on surface, fails AA) */
  color: var(--wp--preset--color--accent, #1E5BD8);
  transition: transform 200ms ease;
  letter-spacing: 0.01em;
}
.skotnes-services-editorial__item:hover .skotnes-services-editorial__cta {
  transform: translateX(3px);
}
@media (max-width: 1100px) {
  .skotnes-services-editorial {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 56px;
  }
}
@media (max-width: 700px) {
  .skotnes-services-editorial {
    grid-template-columns: 1fr 1fr;
    row-gap: 48px;
  }
}
@media (max-width: 460px) {
  .skotnes-services-editorial {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact section — editorial layout from the design pack.
   Server output is built in inject_map_into_contact_section(): a full-width
   Forminator form on top, and a 2-col info row (people + opening hours
   left, embedded map right). The block's outer <section> wrapper is kept
   so global styling (alignfull, surface bg) still applies.
   ══════════════════════════════════════════════════════════════════════════ */
/* The block-contact section is alignfull (full viewport width) so the
 * inner editorial layout has to constrain itself — match the parent
 * plugin's site rail (max-w-site mx-auto px-6 = 1440px with 24px gutters)
 * so the form lines up with sibling sections instead of bursting out. */
.block-contact .sk-contact {
  display: grid;
  /* Form column gets a bit more width than the info column — the form
     is the primary CTA and benefits from breathing room around the
     inputs, the info side is just text + map. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  /* Configurable column gap via CSS var — override on :root to change
     globally, or per-instance with inline style on .sk-contact. */
  gap: var( --sk-contact-gap, 48px );
  /* Stretch so both columns ALWAYS share the taller column's height.
     Inner content scrolls or distributes inside; outer box stays
     symmetric regardless of which side has more content. */
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
/* Stack only on actual mobile/tablet — 768px is the standard handoff so
   any desktop window (even a narrow laptop viewport) keeps the
   side-by-side layout. */
@media (max-width: 768px) {
  .block-contact .sk-contact {
    grid-template-columns: 1fr;
    gap: var( --sk-contact-gap, 32px );
  }
}

/* ── Contact section header (eyebrow + heading + intro) ──────────────────
   Sits ABOVE the form/info grid. The header box matches the .sk-contact
   container width (max 1440px) so left/right alignment lines up with the
   form/info columns underneath. Text children get a 720px max-width for
   readable line length — when the box is left-aligned they hug the left
   edge of the 1440px rail (auto margin-right), when centered they centre
   inside it, when right-aligned they push to the right. */
.block-contact .sk-contact__section-header {
  max-width: 1440px;
  margin: 0 auto clamp(24px, 4vw, 48px);
}
.sk-contact__section-heading,
.sk-contact__section-intro {
  max-width: 720px;
}
.block-contact .sk-contact__section-header.text-left .sk-contact__section-heading,
.block-contact .sk-contact__section-header.text-left .sk-contact__section-intro {
  margin-left:  0;
  margin-right: auto;
}
.block-contact .sk-contact__section-header.text-center .sk-contact__section-heading,
.block-contact .sk-contact__section-header.text-center .sk-contact__section-intro {
  margin-left:  auto;
  margin-right: auto;
}
.block-contact .sk-contact__section-header.text-right .sk-contact__section-heading,
.block-contact .sk-contact__section-header.text-right .sk-contact__section-intro {
  margin-left:  auto;
  margin-right: 0;
}
.sk-contact__section-heading {
  margin-top:    0;
  margin-bottom: 12px;
  color: var(--wp--preset--color--primary, #00486A);
}
.sk-contact__section-intro {
  margin-top:    0;
  margin-bottom: 0;
  color: var(--wp--preset--color--secondary, #475569);
  font-size: 18px;
  line-height: 1.6;
}

.sk-contact__formwrap {
  background: var(--wp--preset--color--surface, #f5f1ec);
  padding: 48px;
  border-top: 4px solid var(--wp--preset--color--accent, #1E5BD8);
}
@media (max-width: 900px) {
  .sk-contact__formwrap {
    padding: 32px 24px;
  }
}
.sk-contact__formhead {
  font-family: var(--wp--preset--font-family--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--wp--preset--color--primary, #0F1B2D);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

/* Forminator overrides — same look, scoped to the new wrapper. */
.sk-contact__formwrap .forminator-ui,
.sk-contact__formwrap .forminator-ui form {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sk-contact__formwrap .forminator-ui .forminator-row {
  margin-bottom: 16px !important;
}
.sk-contact__formwrap .forminator-ui .forminator-label,
.sk-contact__formwrap .forminator-ui label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary, #0F1B2D);
  opacity: 0.72;
  margin-bottom: 8px !important;
}
.sk-contact__formwrap .forminator-ui input[type="text"],
.sk-contact__formwrap .forminator-ui input[type="email"],
.sk-contact__formwrap .forminator-ui input[type="tel"],
.sk-contact__formwrap .forminator-ui input[type="url"],
.sk-contact__formwrap .forminator-ui textarea,
.sk-contact__formwrap .forminator-ui select {
  font-family: var(--wp--preset--font-family--base) !important;
  font-size: 16px !important;
  color: var(--wp--preset--color--primary, #0F1B2D) !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 27, 45, 0.12) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  outline: none !important;
  width: 100% !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}
.sk-contact__formwrap .forminator-ui input:focus,
.sk-contact__formwrap .forminator-ui textarea:focus,
.sk-contact__formwrap .forminator-ui select:focus {
  border-color: var(--wp--preset--color--accent, #1E5BD8) !important;
  box-shadow: 0 0 0 3px rgba(30, 91, 216, 0.15) !important;
}
.sk-contact__formwrap .forminator-ui textarea { min-height: 140px; resize: vertical; }
.sk-contact__formwrap .forminator-ui .forminator-button-submit,
.sk-contact__formwrap .forminator-ui button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--accent, #1E5BD8) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.sk-contact__formwrap .forminator-ui .forminator-button-submit:hover,
.sk-contact__formwrap .forminator-ui button[type="submit"]:hover {
  background: var(--wp--preset--color--secondary, #1746a8) !important;
}
.sk-contact__formwrap .forminator-ui .forminator-checkbox label,
.sk-contact__formwrap .forminator-ui .forminator-radio label {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.8;
}
.sk-contact__formwrap .forminator-ui .forminator-required {
  color: var(--wp--preset--color--accent, #1E5BD8) !important;
}

/* Info column: details (people + company/hours) stack above the map.
   Was a 2-col grid back when the form sat on top in a single column —
   now the outer .sk-contact is itself a 2-col grid (form | info), so
   the info side stacks vertically inside its column. */
.sk-contact__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Matche formwrap sin padding så begge kolonner har samme indre
     puste-rom — uten dette klistrer info-tekst og kart seg til
     boksens kanter. Mobile drops to 32px to match formwrap. */
  padding: 48px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .sk-contact__info {
    padding: 32px 24px;
  }
}
/* People block — matches the editor canvas preview: a boxed card with a
   subtle navy tint, a blue left rule, and a row per person whose info
   stacks on the left (name + role) and contact lines stack on the right
   (phone + email). The structure mirrors the in-editor injector so the
   frontend reads identically to what the author sees in Gutenberg. */
.sk-contact__people {
  margin: 0 0 24px;
  padding: 12px 20px;
  background: rgba(15, 27, 45, 0.04);
  border-left: 3px solid var(--wp--preset--color--secondary, #1E5BD8);
  border-radius: 4px;
}
.sk-contact-person {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
}
.sk-contact-person:last-child { border-bottom: none; }
.sk-contact-person__info { display: flex; flex-direction: column; gap: 2px; }
.sk-contact-person__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--primary, #0F1B2D);
  line-height: 1.3;
}
.sk-contact-person__role {
  font-size: 13px;
  color: rgba(15, 27, 45, 0.65);
  line-height: 1.3;
}
.sk-contact-person__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.sk-contact-person__phone {
  font-size: 14px;
  color: var(--wp--preset--color--primary, #0F1B2D);
  text-decoration: none;
}
.sk-contact-person__phone:hover { text-decoration: underline; }
.sk-contact-person__email {
  font-size: 13px;
  color: var(--wp--preset--color--secondary, #1E5BD8);
  text-decoration: none;
}
.sk-contact-person__email:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .sk-contact-person { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sk-contact-person__lines { text-align: left; }
}
.sk-contact__meta {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  font-size: 14px;
  color: var(--wp--preset--color--primary, #0F1B2D);
  line-height: 1.7;
}
.sk-contact__metablock { opacity: 0.78; }
.sk-contact__metalabel {
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 1.282;
}
.sk-contact__map {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 27, 45, 0.12);
}
.sk-contact__map .skotnes-map-embed {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}
.sk-contact__map iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: grayscale(0.2);
  display: block;
}
@media (max-width: 880px) {
  .sk-contact__info { grid-template-columns: 1fr; gap: 40px; }
  .sk-contact__map { min-height: 320px; }
}
@media (max-width: 560px) {
  .sk-contact__formwrap { padding: 28px; }
  .sk-contact__meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer credits — agency mark next to "Utvikling og design av…"
   Parent plugin sets the mask span to 1.6em × 1em; that renders too
   small next to the credits text. Bump to ~2x with matching baseline.
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer__credits-logo {
  width: 5em !important;
  height: 2.6em !important;
  margin-right: 0.8em !important;
  vertical-align: -0.85em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tjenester feature-cards — numbered editorial layout
   Adds 01–05 numbering via CSS counter, equalises internal row heights so
   icons/numbers/titles/descriptions all sit on the same baselines across
   cards, and pins a "Les mer →" affordance at the bottom of each card.
   ══════════════════════════════════════════════════════════════════════════ */
.cb-block-features ul {
  counter-reset: cb-feature-num;
  align-items: stretch;
}
.cb-feature-card {
  counter-increment: cb-feature-num;
  position: relative;
}
/* Inject a NUMBER element via JS-free CSS — we use real pseudo-elements
 * BUT the parent theme already owns ::before (absolute overlay for the
 * stretched-link). Use the existing icon span as our anchor and stack a
 * separate inline span via content-injection on the icon's first child
 * is fragile — instead, use a counter on a synthesized child via
 * --cb-num-display custom property + a sibling rule below. */
.cb-feature-card .cb-feature-icon {
  position: relative;
}
.cb-feature-card .cb-feature-icon::after {
  content: counter(cb-feature-num, decimal-leading-zero);
  position: absolute;
  top: -28px;
  left: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--accent, #1E5BD8);
  pointer-events: none;
}
/* Push card content down so the absolute number doesn't overlap. */
.cb-feature-card { padding-top: 56px !important; }

/* "Les mer →" pinned to the bottom — use ::after on the inner div
 * (parent owns ::after on the card itself for the stretched-link, so we
 * use the inner content wrapper). */
.cb-feature-card > div::after {
  content: 'Les mer  \2192';
  display: block;
  margin-top: auto;
  padding-top: 16px;
  color: var(--wp--preset--color--accent, #1E5BD8);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Internal row alignment — make the body wrapper a flex column so
 * "Les mer" gets pushed to the bottom regardless of description length,
 * and titles align across cards via min-height. */
.cb-feature-card > div { /* the title+body wrapper */
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.cb-feature-card > div > h3 {
  min-height: 2.4em; /* fits 1–2 lines without shifting siblings */
  margin: 0 !important;
}
.cb-feature-card > div > p {
  flex: 1 1 auto;
  margin: 0 !important;
}
@media (min-width: 1024px) {
  .cb-feature-card { min-height: 340px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes visuelle oppgraderinger
   styrk-blocks plugin er ikke endret; alt skjer via tokens, CSS-overrides
   og en render_block-filter for credentials-banneret.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Slugs som ikke vises i editor-paletten, men som blokkene fortsatt
   refererer til i CSS. Vi injiserer dem her for å holde editor-UX ren
   uten å bryke blokk-CSS som forventer disse variablene. ──────────────── */
:root {
  --wp--preset--color--secondary:  #1E5BD8; /* alias av accent — links/hover */
  --wp--preset--color--light-teal: #6B8FE0; /* myk blå-tone */
  --wp--preset--color--muted:      #E5E8ED; /* hairlines/dividers */
}

/* ══════════════════════════════════════════════════════════════════════════
   Editorial single-project redesign
   The parent theme renders breadcrumbs and the project meta as separate
   FSE template parts above the post content. We override that flow:
     - breadcrumbs are rendered inside the hero (overlay top-left)
     - meta is rebuilt as the left side of an asymmetric info row paired
       with the project's lead photo
     - the original media-grid's first item becomes the lead, the rest
       become a 3-up secondary gallery
   The originals are hidden so we don't render duplicates.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide the original meta — rebuilt as a horizontal strip via the_content
 * filter further down. Breadcrumbs stay (rendered in their natural spot
 * just below the hero) but get re-styled below. */
.cb-project-body__inner > .cb-project-meta {
  display: none !important;
}

/* Breadcrumbs below the hero — sit on the page bg with 16px padding-top
 * so they don't slam into the hero edge. Dark text, low-key. The parent
 * theme's .cb-project-body normally has padding-top:48px; override to
 * 16px so the breadcrumbs sit close to the hero's lower edge. */
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-body { padding-top: 16px !important; }

/* Parent theme sets `main.cb-page-main { padding: 64px 0 96px }`. The
 * top 64px is unwanted because:
 *   - the React header is now sticky in flow at the top of the page,
 *     and pages always lead with a hero (full-bleed, dark) that should
 *     sit FLUSH against the header — no white moat between them.
 *   - the bottom 96px stacked on top of every closing section's own
 *     py-section padding made the last block float in a deep white
 *     moat above the footer.
 * Zero both so sections own all of their own breathing room. */
main.cb-page-main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* When two same-coloured sections stack, each contributes ~104-112px of
 * vertical padding so the visible gap between content groups balloons to
 * 200+px of dead surface. Zero the second section's top padding when it
 * follows a section with the SAME bg (surface). Mismatched bg
 * (e.g. --white → --surface, or --surface → primary) keeps full padding
 * so the colour transition reads as a deliberate beat. List the exact
 * surface-coloured pairs rather than a wide `.skotnes-section +
 * .skotnes-section` selector so a white-bg about-wrapper followed by
 * the surface-bg services section doesn't silently lose its top
 * padding. */
.entry-content > section.skotnes-services-section + section.skotnes-certs-section,
.entry-content > section.skotnes-certs-section + section.cb-cta-section,
.entry-content > section.skotnes-services-section + section.cb-cta-section {
  padding-top: 0 !important;
}
.cb-project-body__inner > .cb-breadcrumbs {
  margin: 0 !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-project-body__inner > .cb-breadcrumbs .cb-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-project-body__inner > .cb-breadcrumbs .cb-breadcrumbs__item { display: inline-flex; align-items: center; }
.cb-project-body__inner > .cb-breadcrumbs a {
  /* Inherit currentColor so breadcrumbs adapt to dark/light containers,
     then dim slightly. Hardcoded navy@70% was invisible after the global
     dark-body shift. */
  color: inherit;
  opacity: 0.72;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.cb-project-body__inner > .cb-breadcrumbs a:hover {
  opacity: 1;
  text-decoration: none;
}
.cb-project-body__inner > .cb-breadcrumbs .cb-breadcrumbs__sep { opacity: 0.4; }
.cb-project-body__inner > .cb-breadcrumbs [aria-current="page"],
.cb-project-body__inner > .cb-breadcrumbs .cb-breadcrumbs__item--current span {
  color: inherit;
  opacity: 1;
  font-weight: 600;
}

/* Bare paragraphs in project body sit left-aligned at the content rail
 * (matching the hero title), keeping the 720px reading-width cap from
 * the parent theme. Other templates keep auto-centering. */
.wp-site-blocks .cb-project-body .wp-block-post-content > p {
  margin-inline: 0;
}
.wp-block-post-content > p {
  margin-inline: auto;
}

/* Strictly-empty bare paragraphs (no children, no text). Truly-empty
 * <p><br></p> paragraphs are stripped server-side by the
 * strip_empty_paragraphs PHP filter — we don't try a CSS rule for those
 * because :has(> br:only-child) would also match <p><br>text…</p>
 * (text-node siblings don't disqualify :only-child). */
.wp-block-post-content > p:empty {
  display: none;
}


/* ── Project meta strip — left-aligned row of project facts under the
 * lead description text. Aligns with the hero title and content rail. */
.cb-project-meta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(24px, 4vw, 64px);
  margin: 48px 0 64px !important;
  padding: 20px 0;
  border-top: 1px solid rgba(15, 27, 45, 0.10);
  border-bottom: 1px solid rgba(15, 27, 45, 0.10);
}
.cb-project-meta-strip__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-project-meta-strip dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0;
}
.cb-project-meta-strip dd {
  font-family: var(--wp--preset--font-family--display);
  font-size: 18px;
  font-weight: 600;
  /* Inherit from the surrounding section's text color. Hardcoded navy
     was invisible after the global dark body shift made project bodies
     render on a navy bg. */
  color: inherit;
  margin: 0;
}

/* ── Project gallery — full content rail width, left-aligned, supportive
 * (not dominant) image strip. 4-up default keeps each image small enough
 * that the page stays content-led. Counts adapt for fewer/more items. */
.cb-project-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 80px !important;
}
.cb-project-gallery--count-1 { grid-template-columns: 1fr; }
.cb-project-gallery--count-2 { grid-template-columns: repeat(2, 1fr); }
.cb-project-gallery--count-3 { grid-template-columns: repeat(3, 1fr); }
.cb-project-gallery--count-5,
.cb-project-gallery--count-6 { grid-template-columns: repeat(3, 1fr); }
.cb-project-gallery--count-7,
.cb-project-gallery--count-8 { grid-template-columns: repeat(4, 1fr); }
.cb-project-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0;
  background: var(--wp--preset--color--primary);
  border-radius: 4px;
}
.cb-project-gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important; /* kill the parent theme's 12px img rounding */
  transition: transform 250ms ease;
}
.cb-project-gallery__item:hover img { transform: scale(1.03); }

/* ── Description eyebrow chip (replaces the H2 "Beskrivelse" treatment) ── */
.wp-site-blocks .cb-project-body .wp-block-post-content > .cb-project-body__eyebrow {
  max-width: 720px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wp--preset--font-family--base);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  line-height: 1;
}
.cb-project-body__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.cb-project-body__eyebrow + p {
  margin-top: 0 !important;
}

/* Description body paragraph — slightly more generous reading typography. */
.wp-site-blocks .cb-project-body .wp-block-post-content > .cb-project-body__eyebrow + p {
  font-size: 18px;
  line-height: 1.7;
}

/* Mobile collapse */
@media (max-width: 768px) {
  .cb-project-meta-strip {
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
  }
  .cb-project-gallery,
  .cb-project-gallery--count-3,
  .cb-project-gallery--count-5,
  .cb-project-gallery--count-6 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cb-project-body__inner > .cb-breadcrumbs .cb-breadcrumbs__list { font-size: 11px; gap: 6px; }
}

/* ── Closing CTA on project pages ──────────────────────────────────────── */
/* Selector matches parent theme's .cb-project-body .wp-block-post-content
 * > * + * specificity so margin-top wins without !important. */
.cb-project-body .wp-block-post-content > .cb-project-cta {
  margin-top: 96px;
}
.cb-project-cta {
  padding: 64px 24px;
  background: var(--wp--preset--color--surface);
  text-align: center;
  border-radius: 4px;
}
.cb-project-cta__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--primary);
  margin: 0 0 12px;
}
.cb-project-cta__body {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(15, 27, 45, 0.78);
}
.cb-project-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cb-project-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}
.cb-project-cta__btn--primary {
  background: var(--wp--preset--color--accent);
  color: #ffffff !important;
}
.cb-project-cta__btn--primary:hover { opacity: 0.92; }
.cb-project-cta__btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--primary) !important;
  border: 1px solid rgba(15, 27, 45, 0.18);
}
.cb-project-cta__btn--ghost:hover { background: rgba(15, 27, 45, 0.04); }

/* ── Header — solid navy, ikke transparent (alle sider, inkl. 404) ─────── */
.cb-site-header,
header.wp-block-template-part,
.site-header-react {
  background: var(--wp--preset--color--primary) !important;
  color: #ffffff !important;
}

/* Header nav links — eksplisitt hvit på navy bakgrunn */
.cb-site-header a,
header.wp-block-template-part a,
.react-header-mount-point a,
.wp-block-navigation-item__content,
.wp-block-navigation-item__label {
  color: #ffffff !important;
  text-decoration: none;
}
/* Hover: behold hvit, men understrek (unngå dårlig kontrast med blå på navy) */
.cb-site-header a:hover,
header.wp-block-template-part a:hover,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Desktop nav submenu panel — parent-theme React hardcodes a teal bg
   inline; override to match the navy header so the dropdown reads as an
   extension of the header, not a foreign color. */
.rh-desktop-nav [role="menu"] > div {
  background: #0f1b2d !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Header icon-knapper (søk + mobilmeny) — overstyr inline color:black ─── */
.cb-site-header button,
header.wp-block-template-part button,
.react-header-mount-point button,
.rh-search-trigger,
.rh-mobile-toggle {
  color: #ffffff !important;
}
.cb-site-header button svg,
header.wp-block-template-part button svg,
.react-header-mount-point button svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}
.cb-site-header button:hover,
.rh-search-trigger:hover,
.rh-mobile-toggle:hover {
  color: #ffffff !important;
  opacity: 0.7;
}

/* Mobile nav layout — group search + hamburger together på høyre side.
   Parent container (rendered by styrk-blocks/react-header) bruker
   justify-content: space-between med fire barn (logo, desktop-nav,
   sk-header-right-cluster med søke-ikon + Ta kontakt-CTA, mobile-toggle).
   Når desktop-nav skjules + CTA-en gjemmes på smal viewport, blir det
   tre synlige elementer som flexbox sprer — som setter søke-ikonet
   midt mellom logo og hamburger. margin-left: auto på cluster
   skyver søke-ikonet bort til høyre, rett ved siden av hamburger. */
@media (max-width: 1023px) {
  .sk-header-right-cluster {
    margin-left: auto !important;
    gap: 4px !important;
  }
  .rh-mobile-toggle {
    margin-left: 4px !important;
  }
}

/* Header logo — cap høyde så den ikke overdøver navet */
.rh-logo,
.cb-site-header img,
header.wp-block-template-part img,
.custom-logo {
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
}

/* ── Accent-rule eyebrow — 32×2 blå bar foran teksten ───────────────────── */
.cb-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  color: var(--wp--preset--color--accent);
}
.cb-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
/* When the eyebrow is rendered as a pill (background-color set inline),
   the dash sits to the LEFT of the text as a flex child. Other eyebrows
   on the site present the dash this way; the pill variant should match.
   No special-case hide — render consistently. */
.cb-eyebrow[style*="background"] { display: inline-flex !important; align-items: center; gap: 12px; }
.cb-eyebrow[style*="background"]::before { display: inline-block; }
/* contact-form__eyebrow is the upstream variant of cb-eyebrow used in
   styrk-blocks/contact-section. Mirror the dash + alignment behavior so
   the KONTAKTSKJEMA pill matches the rest of the site visually. */
.contact-form__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
}
.contact-form__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
/* White hero eyebrow text by default — overridden when an admin picks an
 * explicit eyebrow text colour in the block sidebar. The :not() guard lets
 * the inline style through; without it, the !important here silently
 * blocks every admin pick. Same pattern is used in the CTA body fallback. */
.cb-hero-eyebrow:not([style*="color"]) {
  color: #ffffff !important;
  opacity: 0.95;
}
.cb-hero-eyebrow[style*="color"] {
  opacity: 1;
}
/* Hero eyebrow's accent rule defaults to brand accent, but when an admin
 * sets a custom eyebrow background (the inline style on the span) the
 * fixed accent colour can match that bg and make the line invisible.
 * The :not() guard yields back to the base rule (background: currentColor)
 * whenever a bg pill is in play, so the line stays visible against it. */
.cb-hero-eyebrow:not([style*="background"])::before {
  background: var(--wp--preset--color--accent);
}

/* ── Headings — Inter (display slug peker på Inter), ikke serif ─────────── */
.cb-section-heading,
.cb-block-rich-text h2,
.cb-block-features h2,
.cb-block-stats h2,
.cb-block-split h2,
.cb-cta-section h2 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--wp--preset--color--primary);
}
/* When a block sets its own textColor (renders `has-text-color` on the
   wrapper), the section heading must inherit that instead of forcing the
   navy primary. Without this, e.g. a split-section with textColor=white on
   a dark background renders an invisible navy-on-navy heading. */
.has-text-color .cb-section-heading,
.cb-block-rich-text.has-text-color h2,
.cb-block-features.has-text-color h2,
.cb-block-stats.has-text-color h2,
.cb-block-split.has-text-color h2,
.cb-cta-section.has-text-color h2 {
  color: inherit;
}
/* Same inheritance contract for eyebrows: when the parent block has an
   explicit text-color set, the .cb-eyebrow's default accent (brand blue)
   would render as blue-on-navy on a dark section. Inherit instead so
   eyebrows pick up the block's chosen text color (e.g. white). Authors
   can still override per-instance with an inline style="color:..."
   (eyebrowColor in the block sidebar). */
.has-text-color .cb-eyebrow:not([style*="color"]) {
  color: inherit;
}
/* Blocks that paint their own light background (.cb-process) must define
   their own dark text color, otherwise body's cream inheritance leaves
   them invisible on the light surface. */
.cb-process {
  color: var(--wp--preset--color--primary);
}
/* Testimonial cards are always rendered as white islands inside whatever
   section background, so they must declare their own dark text color
   rather than inheriting from a (potentially dark) parent section. */
.cb-testimonial-card {
  color: var(--wp--preset--color--primary);
}
/* Tailwind `bg-surface` utility paints a light surface background. Any
   section using it must declare a dark default text color, otherwise it
   inherits the page-level cream and becomes invisible. Covers .cb-cta-section,
   .cb-testimonials, and any future block adopting the utility. */
.bg-surface {
  color: var(--wp--preset--color--primary);
}
/* Contact-section heading + subheading shipped with hardcoded navy and
   secondary colors that assume a light backdrop. When the section sits
   on the dark body, these become navy-on-navy / blue-on-navy. Inherit
   from the section's text color (set via the block's textColor attr or
   the body default) instead. */
.contact-form__heading,
.contact-form__subheading {
  color: inherit;
}
.cb-hero h1 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

/* ── Section padding — sjenerøs ────────────────────────────────────────── */
.wp-block-styrk-blocks-rich-text-section,
.wp-block-styrk-blocks-feature-cards,
.wp-block-styrk-blocks-stats-row,
.wp-block-styrk-blocks-split-section,
.wp-block-styrk-blocks-cta-section {
  padding-top: clamp(4.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}

/* ── Section bakgrunnsrytme ────────────────────────────────────────────── */
.wp-block-styrk-blocks-rich-text-section { background: #ffffff; }
.wp-block-styrk-blocks-feature-cards     { background: var(--wp--preset--color--surface); }
.wp-block-styrk-blocks-stats-row         { background: #ffffff; }
/* Split Section: default to inherit bg from the parent surface so a
 * block placed inside a white wrapper renders white, and one placed on
 * the surface rhythm renders surface. The dark navy treatment is now
 * opt-in via the .has-primary-background-color class (the WP-standard
 * effect of choosing "Primær (mørk)" in the block colour picker). */
.wp-block-styrk-blocks-split-section {
  background: transparent;
  position: relative;
  overflow: hidden;
}
.wp-block-styrk-blocks-split-section.has-primary-background-color::before,
.wp-block-styrk-blocks-split-section.has-background:not(.has-white-background-color):not(.has-surface-background-color)::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 60vw; height: 60vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, var(--wp--preset--color--accent), transparent 65%);
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.wp-block-styrk-blocks-split-section > * { position: relative; z-index: 1; }

/* Light-on-dark text colours apply only when the dark bg variant is set.
 * The :not(.cb-split-employee-card *) guard keeps the white-card-on-dark
 * employee variant readable — that card has its own white surface and
 * needs dark text, regardless of the parent Split Section's bg. */
.wp-block-styrk-blocks-split-section.has-primary-background-color h2:not([style*="color"]),
.wp-block-styrk-blocks-split-section.has-primary-background-color h3:not([style*="color"]) { color: #ffffff ; }
.wp-block-styrk-blocks-split-section.has-primary-background-color .cb-eyebrow:not([style*="color"]) {
  color: var(--wp--preset--color--accent) !important;
}
.wp-block-styrk-blocks-split-section.has-primary-background-color p:not([style*="color"]) {
  color: rgba(255,255,255,0.82) ;
}
/* Reset text colours inside the employee card so the white card on a
 * dark Split Section keeps its own dark-on-white treatment. The
 * `h3.cb-split-employee-card__name` form is needed to outrank the
 * `:not([style*="color"]) h3` rule above (matched specificity 0,3,1). */
.wp-block-styrk-blocks-split-section.has-primary-background-color h3.cb-split-employee-card__name {
  color: var(--wp--preset--color--primary, #0F1B2D) ;
}
.wp-block-styrk-blocks-split-section.has-primary-background-color p.cb-split-employee-card__role {
  color: rgba(15, 27, 45, 0.72) ;
}

/* ── Feature cards — kun ÉN hover-effekt: lift + skygge ─────────────────── */
.cb-feature-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 27, 45, 0.06) !important;
  border-radius: 4px !important;
  padding: 2.25rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s !important;
  position: relative;
}
.cb-feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(15, 27, 45, 0.10) !important;
}
.cb-feature-card svg {
  width: 28px !important; height: 28px !important;
  color: var(--wp--preset--color--accent) !important;
  margin-bottom: 0.5rem;
}
.cb-feature-card h3 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--primary) ;
  line-height: 1.2;
}

/* ── Stats — store, branded tall ───────────────────────────────────────── */
.cb-stats-grid dt,
.cb-stats-grid .cb-stat-value,
[class*="stat-value"] {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.75rem, 5vw, 4.25rem) !important;
  color: var(--wp--preset--color--secondary) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
.cb-stats-grid dd {
  color: rgba(15, 27, 45, 0.65);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Employee card (cb-employee-card-compact from styrk-blocks) ─────────
 * Parent plugin pins the card at max-width: 720px and the photo at sm:w-40
 * (160px) which is too cramped for a standalone "lead employee" card on
 * desktop. Override to fill the content rail and give the photo room. */
@media (min-width: 640px) {
  /* Full content-rail width — the inline style="max-width:720px" on the
   * article gets beaten by !important (no !important on the inline). */
  .cb-employee-card-compact {
    max-width: none !important;
    width: 100% !important;
    gap: 40px !important;
    padding: 32px !important;
  }
  /* Center the card in its parent flex wrapper — the parent uses
   * justify-start by default, which leaves a single card pinned left
   * with awkward whitespace on the right. */
  .max-w-site:has(> .cb-employee-card-compact:only-child) {
    justify-content: center !important;
  }
  .cb-employee-compact-photo {
    width: clamp(240px, 28%, 360px) !important;
    aspect-ratio: 4/5 !important;
    height: auto !important;
    align-self: stretch;
  }
  .cb-employee-compact-photo img {
    object-position: center top;
  }
  /* Bigger name + role on a roomier card. */
  .cb-employee-card-compact h3 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .cb-employee-card-compact h3 + p {
    font-size: 17px !important;
  }
  /* Center the right-hand content vertically so the small contact list
   * doesn't sit at the top with empty space below the photo's height. */
  .cb-employee-card-compact > .flex.flex-col {
    justify-content: center !important;
  }
  /* Cap photo height so the card stays a sensible height when content
   * on the right is short — photo retains 4:5 portrait. */
  .cb-employee-compact-photo {
    max-height: 480px !important;
  }
}

/* ── Skotnes credentials band — admin-redigerbar via core/group + headings */
/* Trap the hero's z-10 black overlay inside its own stacking context so
 * it can't paint over the credentials band that overlaps the hero's
 * bottom edge. Without this, .cb-hero (position:relative, z:auto) does
 * NOT create a stacking context, so the overlay's z-10 escapes and
 * wins against the band's z-2. */
.cb-hero { isolation: isolate; }

.skotnes-credentials-band.wp-block-group,
section.skotnes-credentials-band {
  /* Translucent navy + backdrop-blur so the hero photo shows through as
   * a soft wash. Text is rendered as a normal child (not under the
   * filter compositing layer that would dim it), see __cell rules. */
  background: rgba(10, 20, 36, 0.28) !important;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Pull the band up so its BOTTOM exactly meets the hero's bottom edge.
   * Band intrinsic height ≈ 102px; tracking with calc on a CSS var
   * future-proofs against content changes. */
  --band-overlap: 102px;
  margin-top: calc(-1 * var(--band-overlap)) !important;
  margin-bottom: 0 !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.skotnes-credentials-band__inner.wp-block-group {
  max-width: 1440px;
  margin: 0 auto !important;
  padding: 28px clamp(1rem, 3vw, 2rem) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 40px;
  align-items: center;
}
.skotnes-credentials-band__cell.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-left: 2px solid var(--wp--preset--color--accent);
  padding: 0 0 0 16px !important;
  margin: 0 !important;
}
.skotnes-credentials-band__cell h3,
.skotnes-credentials-band__cell .wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #ffffff ;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 !important;
}
.skotnes-credentials-band__cell p {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff ;
  margin: 0 !important;
}

/* ── CTA section ───────────────────────────────────────────────────────── */
.cb-cta-section { text-align: center; }
.cb-cta-section h2 { margin-bottom: 1rem; }
.cb-cta-section p { font-size: 1.1rem; opacity: 0.78; }
/* CTA body text fallback — the plugin's default body color (#0084AF) fails
 * WCAG AA against the near-white surface (4.08 contrast). When the admin
 * has NOT picked an explicit body colour via the block's "Heading & body
 * color" panel, force a Skotnes-on-surface tone (≥ 7:1). The inline-style
 * guard lets an admin-picked colour through, since their pick is opt-in
 * and may be paired with a dark column background where contrast is fine. */
.cb-cta-section .cb-cta-body:not([style*="color"]),
.cb-cta-section p:not([style*="color"]) {
  color: rgba(15, 27, 45, 0.78) ;
  opacity: 1 !important;
}

/* ── Body fallback ─────────────────────────────────────────────────────── */
.cb-block-rich-text .cb-rich-text-body p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(15, 27, 45, 0.78);
  max-width: 56ch;
}

/* ── Buttons — radius 6 (Skotnes), ikke 8 (Viken) ─────────────────────── */
.cb-cta-btn { border-radius: 6px !important; }
/* Hover affordance — links should always indicate hover state. The plugin
   strips the underline by default; restore it on hover. Scope:
   - Multi-CTA card (no cb-has-link wrapper) → only the specific button
     being hovered underlines. Each CTA is independently actionable, so
     the affordance must point at the actual click target.
   - Single-CTA card (cb-has-link present + cb-stretched-link covers the
     whole row) → hovering anywhere on the row underlines the lone CTA,
     since the entire card is the click target.
   - Keyboard focus always underlines (a11y). */
.cb-cta-btn { transition: text-decoration-color 150ms ease; }
.cb-cta-btn:hover,
.cb-cta-btn:focus-visible,
.cb-block-split .cb-has-link:hover .cb-cta-btn,
.cb-block-split .cb-has-link:focus-within .cb-cta-btn {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Kill the image zoom/scale on hover for split-section media side. The
   block layout doesn't need a hover affordance there — the CTAs already
   handle that signal (see above). */
.cb-split-image-wrap:hover .cb-split-image,
.cb-split-image-wrap:hover .cb-split-video,
.cb-block-split .cb-has-link:hover .cb-split-image,
.cb-block-split .cb-has-link:hover .cb-split-video {
  transform: none !important;
}

/* Contact section column gap — author-controlled via the block's
   `columnsGap` attribute. When set, overrides the plugin's hardcoded
   gap:0 (which intentionally collapses the seam between form + info
   columns). Custom property is set inline by the renderer; 0 keeps
   legacy behavior. */
@media (min-width: 768px) {
  .contact-layout__cols[style*="--cb-contact-cols-gap"] {
    gap: var( --cb-contact-cols-gap, 0 ) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   404 / standard sider — gi dem litt vekt
   ══════════════════════════════════════════════════════════════════════════ */
body.error404 main {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
  background: var(--wp--preset--color--surface);
}
body.error404 main h1,
body.error404 main h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  margin: 0 0 1.5rem;
}
body.error404 main p {
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
  color: rgba(15, 27, 45, 0.72);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
body.error404 main a {
  display: inline-block;
  padding: 14px 28px;
  background: var(--wp--preset--color--accent);
  color: #ffffff !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: opacity 0.2s, transform 0.2s;
}
body.error404 main a:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes design-seksjoner — bygd som core/group-mønstre, redigerbare i editor
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Felles wrapper for design-seksjoner ───────────────────────────────── */
.skotnes-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.skotnes-section--surface { background: var(--wp--preset--color--surface); }
.skotnes-section--white   { background: #ffffff; }
/* Default content width matches the theme.json `wideSize` (1440px) so every
 * section on the homepage lines up at the same gutter — the about /
 * services / certs sections used to be 1200 while team + credentials band
 * were 1440, which made the page jump in/out as the user scrolled. */
.skotnes-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* Lower bound bumped from 1rem (16px) to 1.5rem (24px) so headings and
   * body text on mobile aren't cramped against the screen edge. The
   * content inside (employee grid, split sections, etc.) also uses 24px
   * gutters, so this matches the rest of the page rhythm. */
  padding: 0 clamp(1.5rem, 4vw, 2rem);
}
/* `--wide` is now a no-op for back-compat with templates that still set it. */
.skotnes-section__inner--wide { max-width: 1440px; }
/* Opt-in narrow modifier when a section needs the old reading-column width
 * (e.g. a long-form text-only block). Most sections should leave this off. */
.skotnes-section__inner--narrow { max-width: 1200px; }

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes About — split med flytende «20+» pill + verdistripe
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-about__row.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem) !important;
}
@media (max-width: 900px) {
  .skotnes-about__row.wp-block-group { grid-template-columns: 1fr; }
}
.skotnes-about__col h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--wp--preset--color--primary) ;
  margin: 0.5rem 0 1.25rem !important;
}
.skotnes-about__col p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(15, 27, 45, 0.78);
}
.skotnes-about__col p.is-style-lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(15, 27, 45, 0.92);
}
.skotnes-about__image-wrap {
  position: relative;
}
.skotnes-about__image-wrap .wp-block-image {
  margin: 0;
}
.skotnes-about__image-wrap .wp-block-image img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 35%;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: block;
}
.skotnes-about__pill.wp-block-group {
  position: absolute !important;
  bottom: -28px;
  left: -28px;
  background: var(--wp--preset--color--primary) !important;
  color: #ffffff;
  padding: 24px 28px !important;
  max-width: 240px;
  border-left: 4px solid var(--wp--preset--color--accent);
  margin: 0 !important;
}
.skotnes-about__pill h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff ;
  margin: 0 !important;
}
.skotnes-about__pill p {
  font-size: 13px;
  margin: 6px 0 0 !important;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* Verdistripe (Lokal · Tilgjengelig · Kunnskapsrik · Løsningsorientert) */
.skotnes-values.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 !important;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
  margin: 0 !important;
}
.skotnes-value.wp-block-group {
  padding: 36px 24px !important;
  margin: 0 !important;
  border-right: 1px solid rgba(15, 27, 45, 0.08);
}
.skotnes-value.wp-block-group:last-child { border-right: none; }
/* Default text colors — NO !important so admin-set colors via the
 * block editor's color panel can override them per-cell. The parent
 * theme used to pin these with !important which blocked custom blue
 * backgrounds with white text from rendering. */
.skotnes-value h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--primary);
  margin: 0 0 12px !important;
}
.skotnes-value p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15, 27, 45, 0.7);
  margin: 0 !important;
}
/* When a cell has a custom background, force its inherited text colors
 * to use whatever the editor set on the wrapper (so white on blue works). */
.skotnes-value.wp-block-group.has-background h3.wp-block-heading {
  color: inherit;
}
.skotnes-value.wp-block-group.has-background p {
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes Services — image-led, asymmetrisk grid (lead spans 2 cols)
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-services-section { background: var(--wp--preset--color--surface); }
.skotnes-services-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px !important;
  margin: 2rem 0 0 !important;
}
.skotnes-service-card.wp-block-group {
  background: #ffffff !important;
  border: 1px solid rgba(15, 27, 45, 0.06);
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.skotnes-service-card.wp-block-group:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 27, 45, 0.10);
}
.skotnes-service-card--lead.wp-block-group { grid-column: span 2; }
.skotnes-service-card .wp-block-image {
  margin: 0 !important;
}
.skotnes-service-card .wp-block-image img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 35%;
  aspect-ratio: 4/3;
  height: auto;
}
.skotnes-service-card--lead .wp-block-image img {
  aspect-ratio: 21/9;
}
.skotnes-service-card__body.wp-block-group {
  padding: 28px 28px 32px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1;
}
.skotnes-service-card__body p.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--base) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent) ;
  margin: 0 !important;
  line-height: 1;
}
.skotnes-service-card h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--wp--preset--color--primary) ;
  margin: 0 !important;
}
.skotnes-service-card--lead h3.wp-block-heading {
  font-size: 2rem !important;
}
.skotnes-service-card__body p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(15, 27, 45, 0.72);
  margin: 0;
}
@media (max-width: 760px) {
  .skotnes-services-grid.wp-block-group { grid-template-columns: 1fr !important; }
  .skotnes-service-card--lead.wp-block-group { grid-column: span 1 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes Featured Projects — 3 photo tiles 4:5
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-featured-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
  margin: 2rem 0 0 !important;
}
.skotnes-featured-tile.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.skotnes-featured-tile .wp-block-image {
  margin: 0 0 20px !important;
  position: relative;
  overflow: hidden;
}
.skotnes-featured-tile .wp-block-image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 35%;
  height: auto;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.skotnes-featured-tile:hover .wp-block-image img {
  transform: scale(1.04);
}
.skotnes-featured-tile p.is-style-meta {
  font-size: 13px !important;
  color: var(--wp--preset--color--accent) ;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  margin: 0 0 6px !important;
}
.skotnes-featured-tile h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  color: var(--wp--preset--color--primary) ;
  margin: 0 0 8px !important;
}
.skotnes-featured-tile p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 27, 45, 0.7);
  margin: 0;
}
@media (max-width: 900px) {
  .skotnes-featured-grid.wp-block-group { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Skotnes Team — group shot + 3-col team cards
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-team-section { background: var(--wp--preset--color--surface); }
.skotnes-team-groupshot {
  margin: 2rem 0 3rem !important;
  position: relative;
  overflow: hidden;
}
.skotnes-team-groupshot .wp-block-image {
  margin: 0 !important;
}
.skotnes-team-groupshot .wp-block-image img {
  width: 100%;
  aspect-ratio: 21/8;
  object-fit: cover;
  object-position: center 60%;
  height: auto;
  display: block;
}
/* ══════════════════════════════════════════════════════════════════════════
   Skotnes Certifications — 3 horisontale badge-kort
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-certs-section { background: var(--wp--preset--color--surface); }
.skotnes-certs-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px !important;
  margin: 2rem 0 0 !important;
}
.skotnes-cert.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 27, 45, 0.08);
}
.skotnes-cert .wp-block-image {
  margin: 0 !important;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skotnes-cert .wp-block-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
}
.skotnes-cert__body.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.skotnes-cert h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.005em !important;
  color: var(--wp--preset--color--primary) ;
  margin: 0 !important;
  line-height: 1.2;
}
.skotnes-cert p {
  font-size: 13px;
  color: rgba(15, 27, 45, 0.6);
  line-height: 1.45;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Section heading-rad: eyebrow rule + heading + body + side-link
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-section-header.wp-block-group {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem) !important;
  padding: 0 !important;
  align-items: flex-start !important;
}
.skotnes-section-header h2.wp-block-heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  max-width: 720px;
}
/* Default color only when no admin-picked color is present.
   Inline `style="color: …"` or block-supports `has-X-color` win. */
.skotnes-section-header h2.wp-block-heading:not([style*="color"]):not([class*="has-text-color"]) {
  color: var(--wp--preset--color--primary);
}
.skotnes-section-header p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(15, 27, 45, 0.7);
  max-width: 600px;
  margin: 0;
}
.skotnes-section-header p.is-style-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--wp--preset--font-family--base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  line-height: 1;
  color: var(--wp--preset--color--accent) ;
  margin: 0 !important;
}
.skotnes-section-header p.is-style-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* Generell accent-rule eyebrow for alle is-style-eyebrow paragraphs ─────── */
p.is-style-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px !important;
  font-family: var(--wp--preset--font-family--base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  line-height: 1 !important;
  color: var(--wp--preset--color--accent) ;
  margin: 0 0 1rem !important;
}
p.is-style-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
/* Service card eyebrow uses smaller bar inside the card */
.skotnes-service-card__body p.is-style-eyebrow,
.skotnes-featured-tile p.is-style-meta {
  margin: 0 0 0.25rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   skotnes/project-grid — asymmetrisk portfolio-grid
   ══════════════════════════════════════════════════════════════════════════ */
.skotnes-projects {
  background: #ffffff;
  color: var(--wp--preset--color--primary);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.skotnes-projects__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.skotnes-projects__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(15, 27, 45, 0.08);
}
.skotnes-projects__pill {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border: 1px solid rgba(15, 27, 45, 0.15);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--base);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.skotnes-projects__pill:hover {
  border-color: var(--wp--preset--color--primary);
}
.skotnes-projects__pill.is-active {
  background: var(--wp--preset--color--primary);
  color: #ffffff;
  border-color: var(--wp--preset--color--primary);
}
.skotnes-projects__count {
  margin-left: auto;
  align-self: center;
  font-size: 13px;
  color: rgba(15, 27, 45, 0.55);
}
.skotnes-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.skotnes-project {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 27, 45, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.skotnes-project:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 27, 45, 0.10);
  border-color: rgba(15, 27, 45, 0.14);
}
.skotnes-project__photo-wrap {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  aspect-ratio: 4 / 3;
}
.skotnes-project__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.skotnes-project:hover .skotnes-project__photo {
  transform: scale(1.04);
}
.skotnes-project__photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--display);
  font-size: 88px;
  font-weight: 600;
  color: rgba(15, 27, 45, 0.18);
  background: linear-gradient(135deg, #f3f4f1 0%, #e8eae5 100%);
}
.skotnes-project__cat-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--wp--preset--font-family--base);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  border-radius: 4px;
}
.skotnes-project__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
  flex: 1;
}
.skotnes-project__meta {
  font-family: var(--wp--preset--font-family--base);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0;
}
.skotnes-project__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--primary);
  margin: 0;
}
.skotnes-project__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--wp--preset--font-family--base);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--accent);
  transition: gap 0.2s ease;
}
.skotnes-project:hover .skotnes-project__cta { gap: 10px; }
.skotnes-project__cta svg { transition: transform 0.2s ease; }
.skotnes-project:hover .skotnes-project__cta svg { transform: translateX(2px); }

@media (max-width: 980px) {
  .skotnes-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
  .skotnes-projects__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer overrides — pust mellom kontaktlinjer + større, mer klikkbare ikoner
   Parent har 56×56 ikoner; user oppfattet dem som små, så vi løfter dem.
   ══════════════════════════════════════════════════════════════════════════ */
/* Plugin (styrk-blocks) sets `.site-footer__inner { display: flex }` (row),
 * which puts the standalone logo paragraph next to the columns container —
 * causing the logo to overlap the first column. Force a column stack so the
 * logo sits above the columns row, with breathing room below. */
.site-footer__inner.wp-block-group,
.site-footer .site-footer__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  align-items: flex-start;
}

.site-footer__contact-info {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
}
/* Org.nr regulatory line — design pattern is in the bottom bar, not
 * the Kontakt column. Hide the duplicate that [footer_contact] emits,
 * style the standalone [footer_org_number] in the bar. */
.site-footer__cols .site-footer__org-number { display: none !important; }
.site-footer__bar .site-footer__org-number-inline {
  display: inline;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0 12px;
}
.site-footer__bar .site-footer__org-number-inline::before {
  content: "·";
  margin-right: 12px;
  color: rgba(255, 255, 255, 0.3);
}
/* Skjul <br/> som shortcoden bruker mellom linkene — gap håndterer rytmen */
.site-footer__contact-info br { display: none !important; }
.site-footer__contact-info a {
  display: inline-block;
  padding: 4px 0;
  font-size: 17px;
}
.site-footer__address {
  margin-bottom: 14px;
  line-height: 1.6;
}

/* Footer top row — logo only, left-aligned, contained.
 * Certs moved out into their own row below the columns. */
.site-footer .site-footer__top {
  display: block !important;
  margin-bottom: 32px;
}
.site-footer__top p { margin: 0 !important; text-align: left; }
.site-footer__top .site-footer__logo-link { margin: 0; }

/* ── Cert + legal-links row ────────────────────────────────────────────────
 * Sits between the 3-column block and the bottom credits bar. Hairline top
 * border so it reads as its own band. Certs left, legal links right on
 * desktop; both stack on mobile. Logos sit on light pill backgrounds so the
 * original brand colours stay legible against the dark footer surface. */
.site-footer__certs-row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  padding-top: 32px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__certs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
}
.site-footer__cert,
.site-footer__cert.wp-block-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 auto;
  opacity: 0.92;
}
/* Certs are not links — drop the hover affordance so users don't think
 * they're clickable. */
.site-footer__cert,
.site-footer__cert:hover {
  cursor: default;
  transform: none;
}
.site-footer__cert img,
.site-footer__cert .site-footer__cert-img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: none;
  background: transparent;
}
.site-footer__cert {
  max-width: 100%;
  min-width: 0;
}
/* Mester source PNG ships with extra whitespace around the gear icon, so at
   the same height the visible mark reads ~30% smaller than the other certs.
   Scale up so the three badges feel optically equal. Same correction in the
   light card variant under .skotnes-cert below. */
.site-footer__cert img[src*="mester"],
.skotnes-cert .wp-block-image img[src*="mester"] {
  transform: scale(1.25);
  transform-origin: center;
}
.site-footer__certs { gap: clamp(20px, 3vw, 40px) !important; }
@media (max-width: 768px) {
  /* Three certs in one row on mobile, evenly distributed across the row.
     flex:1 1 0 + min-width:0 lets each cell shrink/grow equally; the
     image inside fills the cell and contains itself so aspect ratios
     stay intact. */
  .site-footer__certs {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
  }
  .site-footer__cert {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none;
    height: 64px;
  }
  .site-footer__cert img,
  .site-footer__cert .site-footer__cert-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}
.site-footer__legal a {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer__legal a:hover { color: #fff; }
@media (max-width: 768px) {
  .site-footer__certs-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .site-footer__cert { height: 48px; padding: 6px 12px; }
  .site-footer__cert img { max-width: 100px; }
}

.site-footer__social {
  gap: 14px !important;
  margin-top: 8px;
}
.site-footer__social-link {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.site-footer__social-link:hover {
  background: var(--wp--preset--color--accent) !important;
}
.site-footer__social-link svg {
  width: 32px !important;
  height: 32px !important;
}
@media (max-width: 768px) {
  .site-footer__social-link { width: 56px !important; height: 56px !important; }
  .site-footer__social-link svg { width: 28px !important; height: 28px !important; }

  /* Spread the social icons evenly across the row to mirror the certs
     layout below — three icons distributed full-width instead of
     huddled in a half-column at the left. Force the parent column to
     full width too so the row has the room to spread. */
  .site-footer .wp-block-columns,
  .site-footer .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .site-footer__social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Search modal close button — kontrast-fix
   Modal-bakgrunn er hvit, så X-en må være mørk (ikke arvet hvit fra header).
   .react-header-mount-point .rh-search-close brukes for å matche/utkonkurrere
   parent-regelen `.react-header-mount-point button { color: #fff !important }`.
   ══════════════════════════════════════════════════════════════════════════ */
header.wp-block-template-part .rh-search-close,
header.cb-site-header .rh-search-close,
.rh-search-overlay .rh-search-close {
  color: var(--wp--preset--color--primary) !important;
  background: rgba(15, 27, 45, 0.06) !important;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
header.wp-block-template-part .rh-search-close:hover,
header.cb-site-header .rh-search-close:hover,
.rh-search-overlay .rh-search-close:hover {
  background: var(--wp--preset--color--primary) !important;
  color: #ffffff !important;
}
header.wp-block-template-part .rh-search-close svg,
header.cb-site-header .rh-search-close svg,
.rh-search-overlay .rh-search-close svg {
  stroke: currentColor !important;
  color: currentColor !important;
  width: 20px;
  height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   styrk-blocks/employee-grid — Skotnes overrides
   Match the design reference (design/components/Team.jsx):
   - section header: eyebrow-style optional, prominent h2, body intro
   - card name: 22px display, lighter weight than the plugin default bold
   - card role: 14px muted subtitle (NOT bold) — quiet, lets the name lead
   - card hover: subtle lift + shadow
   ══════════════════════════════════════════════════════════════════════════ */

/* Section header (eyebrow + heading + intro). Each child honours its own
   data-align so the editor's alignment picker maps 1:1 to the frontend.
   Header renders only when one of the three is set (template.php skips
   the <header> otherwise). */
.cb-employee-grid__header {
  max-width: 56rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cb-employee-grid__eyebrow[data-align="left"]   { text-align: left;   align-self: flex-start; }
.cb-employee-grid__eyebrow[data-align="center"] { text-align: center; align-self: center; }
.cb-employee-grid__eyebrow[data-align="right"]  { text-align: right;  align-self: flex-end; }
.cb-employee-grid__heading[data-align="left"]   { text-align: left; }
.cb-employee-grid__heading[data-align="center"] { text-align: center; }
.cb-employee-grid__heading[data-align="right"]  { text-align: right; }
.cb-employee-grid__intro[data-align="left"]     { text-align: left; }
.cb-employee-grid__intro[data-align="center"]   { text-align: center; }
.cb-employee-grid__intro[data-align="right"]    { text-align: right; }
.cb-employee-grid__heading {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--wp--preset--color--primary) !important;
  margin: 0 !important;
}
.cb-employee-grid__intro {
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
  color: rgba(15, 27, 45, 0.78) !important;
  margin: 0 !important;
  max-width: 60ch;
}
.cb-employee-grid__intro[data-align="center"] { margin-left: auto; margin-right: auto; }
.cb-employee-grid__intro[data-align="right"]  { margin-left: auto; }

/* Tighter card padding — plugin uses Tailwind p-6 (24px), too generous
 * given how big the photo aspect-3/4 already makes the card. Drop to
 * 20px and tighten the top section so name+role read as a pair. */
.cb-employee-card .p-6 {
  padding: 20px !important;
}

/* Card name — display font, 24px, weight 600, tighter tracking. */
.cb-employee-card .cb-employee-identity h3 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: var(--wp--preset--color--primary) ;
}

/* Card role — colored eyebrow tag (Skotnes brand decision: surface
   the role as a small uppercase label, accent-tinted, with a thin
   left rule. Pops without competing with the name. Targets the
   `.cb-employee-card__role` class shared by editor + frontend. */
.cb-employee-card .cb-employee-card__role {
  display: inline-block !important;
  align-self: flex-start;
  width: fit-content;
  margin: 8px 0 0 !important;
  padding: 5px 10px 5px 8px;
  font-family: var(--wp--preset--font-family--base) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: var(--wp--preset--color--accent) !important;
  background: rgba(30, 91, 216, 0.08);
  border-left: 2px solid var(--wp--preset--color--accent);
  border-radius: 2px;
}

/* Subtle hover: lift + shadow (matches design's TeamCard) */
.cb-employee-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s !important;
}
.cb-employee-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 27, 45, 0.10);
}

/* Contact box inside the card — plugin renders it on baby-blue
   #f0f8ff which feels playful/SaaS-y, wrong for a contractor brand.
   Strip the bg, drop the inset margins, keep a single top hairline
   to separate from the bio above. */
.cb-employee-card .cb-employee-actions {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 16px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
}
.cb-employee-card .cb-employee-actions .cb-employee-link,
.cb-employee-card .cb-employee-actions a {
  font-size: 16px !important;
  color: rgba(15, 27, 45, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}
.cb-employee-card .cb-employee-actions svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--wp--preset--color--accent) !important;
  flex-shrink: 0;
}
/* Background field inside the card was emitting at 18px — overkill
 * next to a 24px name. Bring to 14px so it reads as supporting text. */
.cb-employee-card .text-lg.line-clamp-2 {
  font-size: 14px !important;
  color: rgba(15, 27, 45, 0.62) !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Call-card description + helper text — bump white opacity from 0.65 to
   0.92 so all body copy on the accent-blue card clears WCAG AA. Targets
   both the rendered <p> and the inline `aria-hidden` "Trykk for å ringe"
   helper that sits below the phone number.
   ══════════════════════════════════════════════════════════════════════════ */
.call-card-wrap p:not(.cb-eyebrow),
.cb-call-card p:not(.cb-eyebrow),
.cb-call-card__description,
.call-card-wrap span[aria-hidden="true"],
.cb-call-card span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.92) ;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header CTA — "Ta kontakt →" appended to the desktop nav by
   skotnes-header-cta.js. Inverts colour over the hero (transparent header,
   white text) and uses the accent fill once the header turns solid.
   ══════════════════════════════════════════════════════════════════════════ */
.sk-header-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--wp--preset--color--accent, #1E5BD8);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border: 1px solid var(--wp--preset--color--accent, #1E5BD8);
  /* Match the rounded-lg radius used by all other site CTAs (Be om
   * befaring, Ring …, etc.) so the header CTA reads as the same family. */
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.sk-header-cta:hover {
  background: var(--wp--preset--color--secondary, #1746a8);
  border-color: var(--wp--preset--color--secondary, #1746a8);
  color: #ffffff !important;
}
.sk-header-cta svg { flex-shrink: 0; }
@media (max-width: 880px) {
  .sk-header-cta { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Single-project CTA — full-bleed escape
   ──────────────────────────────────────────────────────────────────────────
   The single-project template wraps the_content inside `.cb-project-body
   > .cb-project-body__inner` which has max-width: 1440px + 24px gutters.
   That cap prevents alignfull blocks rendered inside the_content from
   actually going full-bleed. Use the standard `100vw` escape technique
   on alignfull blocks rendered through the project CTA filter so the
   surface bg spans the viewport edge-to-edge.
   ══════════════════════════════════════════════════════════════════════════ */
.cb-project-body__inner > .entry-content > .alignfull,
.cb-project-body__inner > .entry-content > section.alignfull {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  /* The styrk-blocks cta-section sets `box-sizing: content-box`, so a
   * 100vw width + 24px padding renders 48px wider than the viewport on
   * mobile and triggers horizontal scroll. Force border-box so padding
   * is INCLUDED in the 100vw width. */
  box-sizing: border-box !important;
}

/* Sticky-header behaviour is now driven by Settings → Header → Position
 * (parent plugin owns the CSS — see styrk-blocks/style.css). */

/* ══════════════════════════════════════════════════════════════════════════
   ALIGNFULL PADDING RESTORATION
   ──────────────────────────────────────────────────────────────────────────
   Parent theme has a rule:
     main.cb-page-main .wp-block-post-content > .alignfull { padding: 0 }
   …which zeroes left/right padding on every alignfull block inside the
   page main. That kills the `.px-6` (24px) gutters on every styrk-blocks
   alignfull section on mobile, leaving content flush to the screen edge.
   Restore the gutters here. Use clamp so desktop gets bigger gutters
   while mobile stays at 24px (touchable + readable).
   ══════════════════════════════════════════════════════════════════════════ */
/* Mobile-only: parent theme zeroes padding on alignfull blocks inside
 * cb-page-main. At desktop the inner `.max-w-site mx-auto` wrapper
 * constrains content correctly so zero padding is fine. On mobile that
 * leaves content flush against the screen edge — restore 24px gutters
 * here. Desktop is left untouched. */
@media (max-width: 768px) {
  main.cb-page-main .wp-block-post-content > section.alignfull.wp-block-styrk-blocks-split-section,
  main.cb-page-main .wp-block-post-content > section.alignfull.wp-block-styrk-blocks-cta-section,
  main.cb-page-main .wp-block-post-content > section.alignfull.wp-block-styrk-blocks-rich-text-section,
  main.cb-page-main .wp-block-post-content > section.alignfull.wp-block-styrk-blocks-employee-grid,
  main.cb-page-main .wp-block-post-content > section.alignfull.cb-block-split,
  main.cb-page-main .wp-block-post-content > section.alignfull.cb-cta-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE CENTERING — editorial services + hero
   ──────────────────────────────────────────────────────────────────────────
   On mobile (≤640px) the editorial cards stack vertically and look
   awkward left-aligned in a narrow column with empty right space.
   Center the content for a balanced read. Hero gets the same treatment
   since multi-line headings and CTAs read better centered on phones.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .skotnes-services-editorial {
    text-align: center;
  }
  .skotnes-services-editorial__item {
    align-items: center;
  }
  .skotnes-services-editorial__icon {
    justify-content: center;
  }
  .skotnes-services-editorial__body {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Hero — center text + CTA on mobile only. Desktop keeps left-align. */
  .cb-hero .cb-hero-content,
  .cb-hero h1,
  .cb-hero h2.cb-hero-title,
  .cb-hero .cb-hero-subtext,
  .cb-hero .cb-hero-eyebrow {
    text-align: center !important;
  }
  .cb-hero .cb-hero-ctas,
  .cb-hero [class*="cta"] {
    justify-content: center !important;
  }
  .cb-hero .cb-eyebrow {
    align-self: center;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Mobile padding reset — 16px outer, no nested padding stacks.
   Without this the parent theme's section wrap (24px) + the block's own
   px-6 (24px) + any linked-card inner (32px) compound to ~80px each side,
   shrinking content to ~215px on a 375px screen and clipping long
   Norwegian compound words like "konkurransedyktig".
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The block-level utility (cb-block-* with px-6) keeps a single 16px
     gutter — that's the one source of horizontal padding on mobile. */
  section.cb-block-split.px-6,
  section.cb-cta-section.px-6,
  section.cb-block-features.px-6,
  section.cb-block-stats.px-6,
  section.cb-rich-text-section.px-6,
  section.cb-block-rich-text.px-6,
  section.wp-block-styrk-blocks-employee-grid,
  section.wp-block-styrk-blocks-split-section,
  section.wp-block-styrk-blocks-cta-section,
  section.wp-block-styrk-blocks-rich-text-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Parent theme outer section wraps — give them 16px so direct children
     (skotnes-* blocks, certs grid, value cards) have a proper gutter. */
  .skotnes-section__inner,
  .wp-block-post-content > section.alignfull,
  .wp-block-post-content > section.alignwide,
  section.skotnes-section,
  section.skotnes-section--white,
  section.skotnes-section--dark {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* When a styrk-blocks block (which has its own px-6) is nested inside
     skotnes-section__inner, the block's own padding compounds with the
     wrapper's 16px. Zero the block's px-6 in that nested case so we end
     up with exactly one 16px gutter. */
  .skotnes-section__inner > section.cb-block-split.px-6,
  .skotnes-section__inner > section.cb-cta-section.px-6,
  .skotnes-section__inner > section.cb-block-features.px-6,
  .skotnes-section__inner > section.cb-block-stats.px-6,
  .skotnes-section__inner > section.cb-rich-text-section.px-6,
  .skotnes-section__inner > section.cb-block-rich-text.px-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Split-section path specifically: strip the outer wrapper padding
     entirely (skotnes-section + skotnes-section__inner + cb-block-split)
     and put the 16px gutter solely on the inner cb-has-link card. One
     source of padding, easy to reason about, and the bleed calc on
     .cb-split-image-wrap lines up cleanly with viewport edges. */
  section.skotnes-section:has(.cb-block-split),
  .skotnes-section--white:has(.cb-block-split),
  .skotnes-section--dark:has(.cb-block-split),
  .skotnes-section__inner:has(> section.cb-block-split),
  section.cb-block-split.px-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .cb-block-split > .max-w-site,
  .cb-block-split > .max-w-site.cb-has-link,
  .cb-block-split > .max-w-site.mx-auto {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Card-style components that have their OWN horizontal padding (the cards
     themselves are inset from the 16px gutter, so internal padding can be
     trimmed). The .wp-block-group suffix matches the desktop rules' own
     specificity (.foo.wp-block-group beats .foo) so this actually wins. */
  .skotnes-value.wp-block-group,
  .skotnes-cert.wp-block-group,
  .skotnes-credentials-band__cell.wp-block-group,
  .skotnes-credentials-band__inner.wp-block-group,
  .cb-split-employee-card__body,
  .site-footer.wp-block-group,
  .site-footer__inner.wp-block-group,
  .site-footer .wp-block-group {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero inner (px-6 utility on a div nested under .cb-hero) — the hero
     itself doesn't have a max-width column on mobile, so the inner
     content rail should also drop to 16px. */
  .cb-hero .max-w-site.px-6,
  section.cb-hero > div.relative.max-w-site,
  section.cb-hero .max-w-site {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* `.alignfull` sections use `width: 100vw + margin: calc(50% - 50vw)` to
     break out of the post content rail. When the section is already inside
     a wrapper that's narrower than the viewport (e.g. our skotnes-section
     with 16px gutter), that calc overshoots by the wrapper's padding and
     pushes the section beyond the viewport — visible as horizontal scroll
     on /tjenester/, /kontakt/, etc. On mobile we don't need the breakout
     trick because the post content rail is full-width anyway. */
  section.alignfull,
  section.alignfull.alignfull,
  .wp-block-post-content > section.alignfull,
  .entry-content > section.alignfull,
  div.alignfull,
  .wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero — keep all hero TEXT BLOCKS left-aligned on mobile so the H1
     doesn't read as a centred outlier above a left-aligned body
     paragraph. Only the OUTER hero flex column gets flex-start; child
     components keep their internal centering (eyebrow dash + text on
     same baseline; CTA buttons text + arrow centered together). */
  .cb-hero,
  .cb-hero h1,
  .cb-hero p {
    text-align: left !important;
  }
  .cb-hero {
    align-items: flex-start !important;
  }
  /* Eyebrow pill anchors LEFT but its inner dash + text keep their
     original vertical centering. */
  .cb-hero .cb-eyebrow {
    align-self: flex-start !important;
  }

  /* Split-section image: bleed to both viewport edges on mobile using
     the standard "alignfull breakout" pattern (width:100vw + symmetric
     negative margin) so the photo reads as a full-width band. */
  .cb-block-split .cb-has-link {
    border-radius: 0 !important;
  }
  .cb-block-split .cb-split-image-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }
  /* Plain photo variant — strip rounded corners so the image truly
     reads as a full-width band, edge to edge. */
  .cb-block-split .cb-split-image-wrap > img,
  .cb-block-split .cb-split-image-wrap > figure img,
  .cb-block-split .cb-split-image,
  .cb-block-split .cb-split-image-wrap > .wp-block-image img {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Employee-card variant (single employee photo + name/role card):
     keep the bleed wrapper but pad it 16px on each side so the rounded
     photo card sits 16px off the viewport edges instead of touching. */
  .cb-block-split .cb-split-image-wrap:has(.cb-employee-card),
  .cb-block-split .cb-split-image-wrap:has(.cb-split-employee-card) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stat badge ("20+ år …") inside the bleed-to-viewport image wrapper:
     the wrapper now starts at viewport-left, so the existing 12px inset
     leaves the digit visually crammed against the edge. Bump to 20px and
     extend the rule to the full 768px mobile breakpoint so phones
     wider than 640px (iPhone Plus / Pro Max etc.) hit it too. */
  .cb-split-stat-badge {
    left: 20px !important;
    bottom: 20px !important;
  }

  /* Call-card phone block ("Ring oss / Ønsker du å prate med oss direkte?")
     The inline styles ship a horizontal layout (icon next to number) plus
     a clamp(40px, 6vw, 56px) font that still doesn't fit "+47 930 04 280"
     on a 414px line, so the number wraps onto two rows. Stack the icon
     above the number on mobile and shrink the font enough to keep the
     full digits on one line. */
  .call-card__phone {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .call-card__phone > span:last-child {
    font-size: clamp(28px, 7vw, 36px) !important;
    white-space: nowrap !important;
  }
  .call-card__phone > span:first-child svg {
    width: 36px !important;
    height: 36px !important;
  }

  /* Rich-text section's inner rail (.max-w-site.w-full.mx-auto.px-6) — drop
     the px-6 (24px) on mobile so the column sits flush with whatever
     gutter the parent provides instead of double-padding. */
  .cb-block-rich-text .max-w-site,
  section.cb-block-rich-text > .max-w-site,
  section.cb-rich-text-section .max-w-site {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Kontakt page — sk-contact__details column gets its own 16px gutter on
     mobile so address/phone/email aren't flush against the screen edge. */
  .sk-contact__details {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Credentials band: on desktop the band overlaps the hero by -102px and
     uses a translucent overlay so the hero photo shows through. On mobile
     the cells stack (3 rows tall, ~260px) — the negative overlap leaves
     half the band hanging below the hero with a translucent overlay over
     the next section's white background, which reads as a muddy gradient.
     Force a solid navy and zero the overlap so the band looks like its
     own clean section. */
  .skotnes-credentials-band.wp-block-group,
  section.skotnes-credentials-band {
    background: #0a1424 !important;
    margin-top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .skotnes-credentials-band__inner.wp-block-group {
    padding: 24px 16px !important;
  }

  /* Drop the linked-card inner padding so content gets the full column.
     Outer 16px is enough breathing room on phones. */
  .cb-block-split .cb-has-link,
  .cb-block-split .max-w-site {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Long Norwegian compound words ("konkurransedyktig", "byggmesterbedrift")
     must be allowed to wrap on narrow columns instead of overflowing. */
  .cb-block-split h1,
  .cb-block-split h2,
  .cb-block-split h3,
  .cb-cta-section h1,
  .cb-cta-section h2,
  .cb-section-header h2 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Project gallery lightbox — click any thumb to open full-size with
   keyboard navigation (←/→ between images, Esc/click-overlay to close).
   The JS that wires this up lives in assets/skotnes-lightbox.js.
   ════════════════════════════════════════════════════════════════════════ */
.cb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}
.cb-lightbox.is-open {
  display: flex;
}
.cb-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.cb-lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 24px;
  line-height: 1;
}
.cb-lightbox__btn:hover,
.cb-lightbox__btn:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}
.cb-lightbox__close { top: 16px; right: 16px; }
.cb-lightbox__prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.cb-lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }
.cb-lightbox__counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Make project gallery thumbs feel clickable. */
.cb-project-gallery__item img {
  cursor: zoom-in;
}
@media (max-width: 640px) {
  .cb-lightbox__btn { width: 40px; height: 40px; font-size: 20px; }
  .cb-lightbox__close { top: 12px; right: 12px; }
  .cb-lightbox__prev  { left: 8px; }
  .cb-lightbox__next  { right: 8px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Radius clamp — all rounded surfaces ≤ 2px

   Client feedback: ingen avrunding av betydning. Cap every border-radius
   site-wide to 2px max, regardless of where it comes from:
     • Tailwind `rounded-*` utilities baked into styrk-blocks build output
     • Direct `border-radius: Npx` rules in theme CSS
     • Block-supports radius set per-instance via the Gutenberg sidebar
     • Inline styles on RichText eyebrows etc.

   Layered LAST so it wins over every preceding rule.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tailwind rounded utilities — all flattened to 2px */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full,
[class*="rounded-t-"],
[class*="rounded-r-"],
[class*="rounded-b-"],
[class*="rounded-l-"],
[class*="rounded-tl-"],
[class*="rounded-tr-"],
[class*="rounded-br-"],
[class*="rounded-bl-"] {
  border-radius: 2px !important;
}

/* Catch-all: any element with a border-radius (block-supports, inline, etc.).
   Uses a high-specificity attribute-style selector so it wins inline styles
   without `!important` battles in markup. */
[style*="border-radius"] {
  border-radius: 2px !important;
}

/* Specific skotnes-theme + styrk-blocks selectors that set radius in CSS */
.cb-project-card,
.cb-feature-card,
.cb-call-card,
.cb-cta-section,
.cb-cta-section .wp-block-button__link,
.cb-cta-section button,
.cb-cta-section a.cb-cta__btn,
.cb-hero__cta,
.cb-hero .wp-block-button__link,
.skotnes-services-editorial__item,
.skotnes-team-card.wp-block-group,
.cb-project-meta-strip,
.cb-project-gallery__item,
.cb-eyebrow,
.cb-hero-eyebrow,
.is-style-eyebrow,
.skotnes-eyebrow,
.cb-featured-projects .cb-project-card__badge,
.skotnes-project__cat-badge,
.skotnes-projects__pill,
.cb-project-card__badge,
.wp-block-button .wp-block-button__link,
.wp-block-button__link,
button,
.btn,
input,
select,
textarea,
img,
.wp-block-image img,
.cb-project-photo,
.cb-project-photo img,
.skotnes-project__photo-wrap,
.skotnes-project__photo,
.cb-contact-section .sk-contact__formwrap,
.cb-contact-section .sk-contact__info,
.sk-contact__formwrap,
.sk-contact__info,
.sk-contact__map iframe,
.skotnes-map-embed,
.skotnes-map-embed iframe,
.sk-header-cta,
.cb-split-stat-badge,
.cb-employee-card,
.cb-split-employee-card,
.max-w-site,
.cb-split-section,
.cb-split-section *,
.site-footer__social-link,
.cb-pill,
.is-style-pill,
.wp-block-image figure,
.wp-block-image .wp-element-caption,
[class*="rounded"] {
  border-radius: 2px !important;
}


/* Page background lives in theme.json (styles.color.background). Per-section
   bg/text live on the block instance via its native color-supports panel. No
   stylesheet overrides force section colors anymore — each block is
   self-contained. */

/* Cards on dark sections stay LIGHT — these are the inner surfaces user
   wants to keep readable. Anything with .cb-feature-card, .cb-project-card,
   .skotnes-services-editorial__item, etc. keeps its existing light bg.
   For .sk-contact__formwrap / .sk-contact__info we drop !important and
   use a :not([style*="background"]) guard so an admin-picked
   formBgColor / infoBgColor inline style ALWAYS wins. */
.cb-feature-card,
.cb-project-card,
.skotnes-services-editorial__item,
.cb-call-card,
.cb-employee-card,
.cb-faq-accordion-item,
.skotnes-team-card.wp-block-group {
  background-color: #FAFAF8 !important;
  color: #0F1B2D !important;
}
.sk-contact__formwrap:not([style*="background"]),
.sk-contact__info:not([style*="background"]) {
  background-color: #FAFAF8;
}
.sk-contact__formwrap:not([style*="color"]),
.sk-contact__info:not([style*="color"]) {
  color: #0F1B2D;
}
.cb-feature-card :is(h1,h2,h3,h4,p,span,a),
.cb-project-card :is(h1,h2,h3,h4,p,span,a),
.skotnes-services-editorial__item :is(h1,h2,h3,h4,p,span,a),
.cb-employee-card :is(h1,h2,h3,h4,p,span,a) {
  color: #0F1B2D ;
}

/* Form fields: white surface on dark page */
.sk-contact__formwrap input,
.sk-contact__formwrap textarea,
.sk-contact__formwrap select,
.forminator-field input,
.forminator-field textarea {
  background-color: #FAFAF8 !important;
  color: #0F1B2D !important;
}

/* Footer is dark already — keep as-is (steel/navy) */

/* Search overlay/panel — colors are now driven by styrk-blocks' Settings →
   Search admin page via :root CSS vars (--cb-search-panel-bg,
   --cb-search-panel-text, --cb-search-icon-color, --cb-search-close-hover-bg,
   etc.). See the .rh-search-overlay block below for the consuming rules.
   The old "force everything cream" block here was a legacy hack from when
   the panel had a dark background — removed in v0.8.0. */

/* Søkeresultater-siden (`/?s=...` med cb_search_results shortcode i
   styrk-blocks). Sitter på den nye mørke body-bakgrunnen og må
   ha lys tekst på alle resultat-elementer. */
.cb-search-page__hero,
.cb-search-page__heading,
.cb-search-page__eyebrow,
.cb-search-page__count,
.cb-search-page__hint,
.cb-search-page__empty,
.cb-search-page__empty-line,
.cb-search-page__empty-hint,
.cb-search-page__hit,
.cb-search-page__hit-link,
.cb-search-page__hit-head,
.cb-search-page__hit-title,
.cb-search-page__hit-excerpt {
  color: var( --cb-search-results-text, #F0EFEC ) !important;
}
.cb-search-page__hit-link:hover .cb-search-page__hit-title {
  color: var( --cb-search-results-link-hover, var( --wp--preset--color--accent, #1E5BD8 ) ) !important;
}
.cb-search-page__hit-type {
  background: rgba(240, 239, 236, 0.12) !important;
  color: var( --cb-search-results-muted, #F0EFEC ) !important;
}
.cb-search-page__form input[type="search"] {
  background: var( --cb-search-results-input-bg, rgba(255, 255, 255, 0.04) ) !important;
  color: var( --cb-search-results-input-text, var( --cb-search-results-text, #F0EFEC ) ) !important;
  border-color: var( --cb-search-results-input-border, rgba(240, 239, 236, 0.25) ) !important;
}
.cb-search-page__form input[type="search"]::placeholder {
  color: var( --cb-search-results-muted, rgba(240, 239, 236, 0.55) ) !important;
}
/* Submit button on the inline /?s= form. The plugin renders a plain
   <button> with no styling; pick up bg + text from settings so the
   button is visibly an action, not an invisible block. */
.cb-search-page__form button,
.cb-search-page__form button[type="submit"] {
  background: var( --cb-search-results-submit-bg, #1E5BD8 ) !important;
  color: var( --cb-search-results-submit-text, #FFFFFF ) !important;
  border: 0 !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-weight: 600;
  cursor: pointer;
}
.cb-search-page__form button:hover,
.cb-search-page__form button:focus-visible {
  filter: brightness(1.08);
}

/* Search overlay — bg + colors driven by Settings → Search → Colors
   (cb-search-settings publishes the CSS vars at the top of <head>).
   Forces readable defaults: light panel on translucent dark backdrop,
   navy text inside the panel. */
.rh-search-overlay {
  background: var(--cb-search-backdrop-bg, rgba(10, 15, 30, 0.55)) !important;
}
.rh-search-overlay .rh-search-panel {
  background: var(--cb-search-panel-bg, var(--wp--preset--color--surface, #FAFAF8)) !important;
}
/* Body/result text inside the panel uses --cb-search-panel-text.
   The form itself is OMITTED so .rh-search-form's `color` flows from the
   plugin's rule (which reads --cb-search-icon-color) and drives the
   magnifying-glass + close-button SVG via currentColor inheritance. */
.rh-search-overlay .rh-search-panel,
.rh-search-overlay input[type="search"],
.rh-search-overlay .rh-search-status,
.rh-search-overlay .rh-search-results,
.rh-search-overlay .rh-search-results a,
.rh-search-overlay .rh-search-result,
.rh-search-overlay .rh-search-result__title,
.rh-search-overlay .rh-search-result__excerpt,
.rh-search-overlay .rh-search-all {
  color: var(--cb-search-panel-text, var(--wp--preset--color--primary, #0F1B2D)) !important;
}
.rh-search-overlay input[type="search"]::placeholder {
  color: var(--cb-search-panel-placeholder, rgba(15, 27, 45, 0.55)) !important;
}
.rh-search-overlay .rh-search-result__type,
.rh-search-overlay .rh-search-result__excerpt,
.rh-search-overlay .rh-search-status {
  color: var(--cb-search-panel-muted, rgba(15, 27, 45, 0.6)) !important;
}
.rh-search-overlay .rh-search-result__type {
  background: rgba(15, 27, 45, 0.06) !important;
}
.rh-search-overlay .rh-search-result.is-active {
  background: rgba(30, 91, 216, 0.08) !important;
}

/* Bred sikkerhetsnett: any element directly on the dark body that defaults
   to dark text via theme.json's old #0F1B2D — flip to light unless it's
   inside a known light card/container. */
body > *:not(.cb-feature-card):not(.cb-project-card):not(.skotnes-services-editorial__item):not(.cb-call-card):not(.cb-employee-card):not(.sk-contact__formwrap):not(.sk-contact__info):not(input):not(textarea):not(button):not(.wp-block-styrk-blocks-call-card):not(.cb-process):not(.skotnes-projects):not(.cb-cta-section):not(.bg-surface):not(.has-background):not(.has-text-color):not(.skip-link):not(.screen-reader-text),
.entry-content > *:not(.cb-feature-card):not(.cb-project-card):not(.skotnes-services-editorial__item):not(.cb-call-card):not(.cb-employee-card):not(.sk-contact__formwrap):not(.sk-contact__info):not(.cb-process):not(.skotnes-projects):not(.cb-cta-section):not(.bg-surface):not(.has-background):not(.has-text-color):not(.skip-link):not(.screen-reader-text) {
  color: #F0EFEC;
}

/* Accessibility: skip-to-content link.
   Hidden until keyboard-focused; on focus it must have a clearly
   readable contrast against the page. The safety-net rule above
   was tinting it cream on a light background — invisible. Forced
   to navy-on-cream with a brand-blue focus ring. */
.skip-link.screen-reader-text:focus {
  color: #0F1B2D !important;
  background: #FAFAF8 !important;
  outline: 3px solid var(--wp--preset--color--accent, #1E5BD8) !important;
  outline-offset: 2px;
  z-index: 999999;
}

/* 404 page + generic post archive content */
body.error404 .entry-content,
body.archive .entry-content,
body.search .entry-content {
  color: #F0EFEC !important;
}
body.error404 .entry-content :is(h1,h2,h3,h4,p,a):not(.cb-feature-card *):not(.cb-project-card *) {
  color: #F0EFEC ;
}

/* Project + employee single pages content */
.single-project .entry-content,
.single-employee .entry-content,
.single-testimonial .entry-content {
  color: #F0EFEC;
}
.single-project .entry-content :is(h1,h2,h3,h4,p):not(.cb-feature-card *):not(.cb-project-card *):not(.cb-cta-section *):not(.bg-surface *):not(.cb-testimonial-card *):not(.skotnes-projects *) {
  color: #F0EFEC ;
}

/* Contact-section editor parity for form/info column backgrounds.
   Editor canvas renders upstream's classes (`.contact-form-col`,
   `.contact-info-col`); frontend renders Skotnes' classes
   (`.sk-contact__formwrap`, `.sk-contact__info`).

   NO `!important` on bg/color — inline `formBgColor` / `infoBgColor`
   from sidebar must win, otherwise the swatch picker is dead. Default
   surface only fires when no per-instance color is set. The :not()
   attribute selector excludes elements that already have inline color
   so admin picks always survive. */
/* Contact-section column bg/text/padding now live on the block attrs
   (formBgColor / infoBgColor / formTextColor / infoTextColor / formRadius
   / infoRadius). Template injects inline styles when set. No stylesheet
   defaults — admin picks per instance via sidebar. */

/* Block editor chrome som flyter over de mørke seksjonene — alignment-
   ikoner, drag handles, plus-knapper, three-dot menyen. Disse arvet
   mørk fyll/tekst fra mine globale text-color overrides og ble usynlige
   navy-på-navy. Tvinge lys farge alltid. */
.editor-styles-wrapper .block-editor-block-toolbar,
.editor-styles-wrapper .block-editor-block-toolbar *,
.editor-styles-wrapper .block-editor-block-toolbar svg,
.editor-styles-wrapper .block-editor-block-toolbar button,
.editor-styles-wrapper .components-toolbar-group,
.editor-styles-wrapper .components-toolbar-group *,
.editor-styles-wrapper .components-toolbar svg,
.editor-styles-wrapper .components-toolbar-button,
.editor-styles-wrapper .components-toolbar-button svg,
.editor-styles-wrapper .block-editor-block-mover,
.editor-styles-wrapper .block-editor-block-mover *,
.editor-styles-wrapper .block-editor-block-mover svg,
.editor-styles-wrapper .block-editor-block-list__insertion-point,
.editor-styles-wrapper .block-editor-inserter,
.editor-styles-wrapper .block-editor-inserter *,
.editor-styles-wrapper .block-editor-block-contextual-toolbar,
.editor-styles-wrapper .block-editor-block-contextual-toolbar *,
.editor-styles-wrapper .components-dropdown-menu__toggle,
.editor-styles-wrapper .components-dropdown-menu__toggle svg,
.editor-styles-wrapper .block-editor-rich-text__inline-format-toolbar,
.editor-styles-wrapper .block-editor-rich-text__inline-format-toolbar * {
  color: #F0EFEC !important;
  fill: currentColor !important;
  background-color: rgba( 15, 27, 45, 0.75 ) !important;
}

/* On the dark canvas, the block-selected outline + drag handle backdrop
   should still be visible. Use a slightly lighter chip color. */
.editor-styles-wrapper .block-editor-block-toolbar {
  background-color: rgba( 30, 91, 216, 0.18 ) !important;
  border-color: rgba( 240, 239, 236, 0.25 ) !important;
}

/* Hover state on toolbar buttons */
.editor-styles-wrapper .components-toolbar-button:hover,
.editor-styles-wrapper .components-toolbar-button:focus {
  color: #ffffff !important;
  background-color: rgba( 240, 239, 236, 0.15 ) !important;
}

/* Inline block "drag to swap sides" hint banner sometimes inherits dark — force light. */
.editor-styles-wrapper [class*="DragHint"],
.editor-styles-wrapper [class*="drag-hint"],
.editor-styles-wrapper .components-notice {
  color: #0F1B2D !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Eyebrow streken — atomisk konsistens

   .cb-eyebrow er den ene komponenten alle eyebrows (kort, hero, contact-
   section, featured-projects, employee-grid …) bruker. Streken (`::before`)
   krever at parent er flex så pseudo-elementet legger seg som flex-barn
   med gap. Noen render-paths (Skotnes' egne PHP + upstream featured-
   projects) emitterer inline `display: inline-block` som overstyrer
   klasse-display og bryter streken. Tving inline-flex tilbake.

   Globalt toggle: sett `--cb-eyebrow-dash: none` på :root for å skjule
   streken på hele siden (f.eks. midlertidig under brand-bytte).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cb-eyebrow-dash: inline-block;   /* `inline-block` = vis; `none` = skjul */
  --cb-eyebrow-dash-width: 32px;
  --cb-eyebrow-dash-height: 2px;
}

.cb-eyebrow,
.is-style-eyebrow,
.skotnes-eyebrow,
.contact-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cb-eyebrow::before,
.is-style-eyebrow::before,
.skotnes-eyebrow::before,
.contact-form__eyebrow::before {
  content: '';
  display: var( --cb-eyebrow-dash, inline-block );
  width: var( --cb-eyebrow-dash-width, 32px );
  height: var( --cb-eyebrow-dash-height, 2px );
  background: currentColor;
  flex-shrink: 0;
}