/* ════════════════════════════════════════════════════════════════
   WTS BYG — Comprehensive Bug Fixes
   
   Issues addressed:
   1. Service card icons inconsistent sizing (homepage)
   2. FAQ cross/text unreadable (dark on dark)
   3. Cert carousel smoothness + infinite loop fix
   4. Ydelser page text broken out of box (dark text on dark bg)
   5. Review author names unreadable (green-200 on dark green)
   6. Snedker page wrong background colour
   7. Global text readability audit (dark-on-dark fixes)
   8. Process steps on dark background
   9. Lokationer cards text readability
   ════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   1. SERVICE CARD ICONS — uniform sizing
   The SVG icons inside .service-card__icon-wrap
   were rendering at inconsistent sizes.
   Force all icons to the same dimensions.
   ───────────────────────────────────────────────── */

.service-card__icon-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
}

.service-card__icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex-shrink: 0 !important;
}


/* ─────────────────────────────────────────────────
   2. FAQ SECTION — full readability fix
   The FAQ items sit on a dark section. The trigger
   text, cross icon, and body text must be white/light.
   ───────────────────────────────────────────────── */

/* FAQ items on dark backgrounds */
.section--dark .faq-item,
.section--deeper .faq-item,
.section--off .faq-item,
.section--light .faq-item {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.section--dark .faq-item:hover,
.section--dark .faq-item.open,
.section--deeper .faq-item:hover,
.section--deeper .faq-item.open,
.section--off .faq-item:hover,
.section--off .faq-item.open,
.section--light .faq-item:hover,
.section--light .faq-item.open {
  border-color: rgba(13,232,92,0.3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Question text — white */
.section--dark .faq-trigger__q,
.section--deeper .faq-trigger__q,
.section--off .faq-trigger__q,
.section--light .faq-trigger__q {
  color: #ffffff !important;
}

/* Cross/plus icon — white on dark circle */
.section--dark .faq-trigger__icon,
.section--deeper .faq-trigger__icon,
.section--off .faq-trigger__icon,
.section--light .faq-trigger__icon {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

.section--dark .faq-trigger__icon svg,
.section--deeper .faq-trigger__icon svg,
.section--off .faq-trigger__icon svg,
.section--light .faq-trigger__icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* When FAQ is open, icon gets accent bg */
.section--dark .faq-item.open .faq-trigger__icon,
.section--deeper .faq-item.open .faq-trigger__icon,
.section--off .faq-item.open .faq-trigger__icon,
.section--light .faq-item.open .faq-trigger__icon {
  background: var(--gold) !important;
  color: #0e2612 !important;
}

.section--dark .faq-item.open .faq-trigger__icon svg,
.section--deeper .faq-item.open .faq-trigger__icon svg,
.section--off .faq-item.open .faq-trigger__icon svg,
.section--light .faq-item.open .faq-trigger__icon svg {
  stroke: #0e2612 !important;
  color: #0e2612 !important;
}

/* Answer body text — light on dark */
.section--dark .faq-body__content,
.section--deeper .faq-body__content,
.section--off .faq-body__content,
.section--light .faq-body__content {
  color: rgba(255,255,255,0.75) !important;
}

/* Also fix the homepage FAQ which doesn't have section-- wrapper class directly */
.faq-item {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.faq-trigger__q {
  color: #ffffff !important;
}

.faq-trigger__icon {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

.faq-trigger__icon svg {
  stroke: #ffffff !important;
}

.faq-item.open .faq-trigger__icon {
  background: var(--gold, #0DE85C) !important;
  color: #0e2612 !important;
}

.faq-item.open .faq-trigger__icon svg {
  stroke: #0e2612 !important;
}

.faq-body__content {
  color: rgba(255,255,255,0.75) !important;
}


/* ─────────────────────────────────────────────────
   3. CERT CAROUSEL — smooth infinite scrolling
   Use will-change and optimised animation for
   buttery smooth infinite loop without lag.
   ───────────────────────────────────────────────── */

.cert-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cert-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: certScroll 18s linear infinite !important;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  padding: 0.5rem 0;
}

/* Never pause on hover - always keep scrolling */
.cert-track:hover {
  animation-play-state: running !important;
}

@keyframes certScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-33.333%, 0, 0); }
}

/* Slightly smaller badges so more fit in view */
.cert-badge--icon-only {
  width: 140px !important;
  padding: 1.5rem 1.25rem !important;
}

.cert-badge__icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 12px !important;
}

.cert-badge__icon svg {
  width: 32px !important;
  height: 32px !important;
}


/* ─────────────────────────────────────────────────
   4. YDELSER PAGE — text readability on dark bg
   section--light and section--off are dark bg now.
   All inline color:var(--green-900) etc. are dark.
   Override them to white/light.
   ───────────────────────────────────────────────── */

/* Ydelse cards on the ydelser overview — white bg cards are fine,
   but the surrounding section text needs to be light */

/* Process steps on dark bg */
.process-step__num {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--gold, #0DE85C) !important;
  color: var(--gold, #0DE85C) !important;
}

.process-step__title {
  color: #ffffff !important;
}

.process-step__desc {
  color: rgba(255,255,255,0.7) !important;
}

.process-steps::before {
  background: linear-gradient(90deg, rgba(13,232,92,0.2), rgba(13,232,92,0.5), rgba(13,232,92,0.2)) !important;
}

/* Areas strip — ensure visibility */
.areas-strip {
  background: #0e2612 !important;
}


/* ─────────────────────────────────────────────────
   5. REVIEW AUTHOR NAMES — readability fix
   color:var(--green-200) = #0e2612 on dark bg.
   Force all review authors to white/gold.
   ───────────────────────────────────────────────── */

/* Override any inline style that uses --green-200 for review authors */
.card-glass p[style*="green-200"],
.card-glass p[style*="--green-200"],
.review-card__author,
p[style*="color:var(--green-200)"] {
  color: var(--gold, #0DE85C) !important;
}

/* Homepage review author names that use --gold inline (these are fine) */
/* But subpage review authors with --green-200 need the fix above */


/* ─────────────────────────────────────────────────
   6. SNEDKER PAGE — match dark background
   Snedker uses #385144 and #2a3d33 instead of
   the site-wide #0e2612 / #133117.
   ───────────────────────────────────────────────── */

/* Override snedker's inline background colours */
.section--dark.services-section[style*="385144"],
section[style*="background:#385144"],
section.section--darker[style*="background:#385144"] {
  background: #0e2612 !important;
}

div.trust-bar[style*="background:#2a3d33"],
section.cta-banner[style*="background:#2a3d33"] {
  background: #133117 !important;
}

/* Nuclear option: override ALL inline #385144 and #2a3d33 backgrounds site-wide */
[style*="background:#385144"] {
  background: #0e2612 !important;
}

[style*="background:#2a3d33"] {
  background: #133117 !important;
}

/* Snedker page text that references #385144 as text colour */
[style*="color:#385144"] {
  color: #ffffff !important;
}

/* But keep the light-bg sections' text dark where appropriate */
section[style*="background:#F8F5F2"] [style*="color:#385144"],
section[style*="background:#fff"] [style*="color:#385144"] {
  color: #0e2612 !important;
}

section[style*="background:#F8F5F2"] h2[style*="color:#385144"],
section[style*="background:#F8F5F2"] p.eyebrow[style*="color:#385144"],
section[style*="background:#F8F5F2"] .eyebrow[style*="color:#385144"] {
  color: #0e2612 !important;
}

/* City tags on snedker page — keep readable on their section */
section[style*="background:#fff"] [style*="color:#385144"] {
  color: #0e2612 !important;
}


/* ─────────────────────────────────────────────────
   7. GLOBAL TEXT READABILITY AUDIT
   Anywhere dark text (green vars) sits on the now-dark
   backgrounds, flip to white/light.
   ───────────────────────────────────────────────── */

/* Headings with inline color:var(--green-900) on dark sections */
[style*="color:var(--green-900)"] {
  color: #ffffff !important;
}

/* Headlines in sections that became dark */
.section--light h2,
.section--light h3,
.section--light .headline-md,
.section--light .headline-lg {
  color: #ffffff !important;
}

.section--light .eyebrow {
  color: var(--gold, #0DE85C) !important;
}

.section--light p,
.section--light .body-lg {
  color: rgba(255,255,255,0.75) !important;
}

.section--off h2,
.section--off h3 {
  color: #ffffff !important;
}

/* Ydelse card feature text — these cards have white bg so keep dark */
.ydelse-card__title {
  color: #1a1a1a !important;
}

.ydelse-card__desc {
  color: #555 !important;
}

.ydelse-card__feature {
  color: #0e2612 !important;
}

.ydelse-card__feature svg {
  color: #0DE85C !important;
}

.ydelse-card__cta {
  color: #0e2612 !important;
}

.ydelse-card:hover .ydelse-card__cta {
  color: #0DE85C !important;
}

/* Ydelse cards bg stays white */
.ydelse-card {
  background: #ffffff !important;
}


/* ─────────────────────────────────────────────────
   8. LOKATIONER CARDS — text readability
   Location cards on /lokationer/ may have dark
   text on dark bg.
   ───────────────────────────────────────────────── */

/* Location cards should have readable text */
.section--light .card-glass h3,
.section--light .card-glass h4 {
  color: #ffffff !important;
}

.section--light .card-glass p {
  color: rgba(255,255,255,0.7) !important;
}

/* Location icon backgrounds */
.section--light .card-glass .cert-badge__icon,
.section--light .card-glass [style*="background:rgba(56,81,68"] {
  background: rgba(13,232,92,0.10) !important;
  border-color: rgba(13,232,92,0.22) !important;
}


/* ─────────────────────────────────────────────────
   9. YDELSER SUBPAGES — review & general text
   Service detail pages inherit broken colours.
   ───────────────────────────────────────────────── */

/* Service detail page feature checks on dark bg */
.section--dark .feature-item__text,
.section--deeper .feature-item__text {
  color: rgba(255,255,255,0.85) !important;
}

.section--dark .feature-item__check,
.section--deeper .feature-item__check {
  background: rgba(13,232,92,0.10) !important;
  border-color: rgba(13,232,92,0.22) !important;
}

.section--dark .feature-item__check svg,
.section--deeper .feature-item__check svg {
  stroke: #0DE85C !important;
}

/* CTA banner text */
.cta-banner h2,
.cta-banner p {
  color: #ffffff !important;
}

.cta-banner p {
  color: rgba(255,255,255,0.75) !important;
}

/* Breadcrumb — layout + colour */
.breadcrumb {
  color: rgba(255,255,255,0.5) !important;
  background: transparent;
  padding: 0.6rem 0;
  position: relative;
  z-index: 10;
}

.breadcrumb .container {
  padding-top: 0;
  padding-bottom: 0;
}

.breadcrumb__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumb__item {
  display: flex !important;
  align-items: center !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1 !important;
}

.breadcrumb__item svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.breadcrumb__item--current {
  color: rgba(255,255,255,0.75) !important;
}

.breadcrumb a,
.breadcrumb__link {
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.breadcrumb a:hover,
.breadcrumb__link:hover {
  color: #ffffff !important;
}


/* ─────────────────────────────────────────────────
   10. MISC FIXES
   ───────────────────────────────────────────────── */

/* Ensure all card-glass on dark bg has proper text */
.card-glass p[style*="color:#444"] {
  color: rgba(255,255,255,0.7) !important;
}

/* Value boxes / trust items */
.trust-item__icon {
  background: #133117 !important;
}

.trust-item__icon svg {
  stroke: #0DE85C !important;
}

/* Section header on dark bg */
.section-header .body-lg {
  color: rgba(255,255,255,0.7);
}

/* Reviews grid — fix card-glass p inline color:#444 override from brand-overrides */
.section--off .card-glass p[style*="color:#444"],
.section--light .card-glass p[style*="color:#444"] {
  color: rgba(255,255,255,0.7) !important;
}

/* Stat card improvements */
.stat-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hide any image placeholder boxes that aren't filled yet */
.cert-badge__logo[src=""],
.cert-badge__logo:not([src]),
img[src=""]:not(.nav-logo-img):not(.hero__img) {
  display: none;
}

/* Smooth all animations globally */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Link arrows on dark bg */
.service-card__link {
  color: var(--gold, #0DE85C) !important;
}


/* ─────────────────────────────────────────────────
   11. YDELSE CARD TEXT OVERFLOW FIX
   Cards on /ydelser/ overview page need proper
   text containment within their white card bodies.
   ───────────────────────────────────────────────── */

.ydelse-card {
  overflow: hidden !important;
}

.ydelse-card__body {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ydelse-card__desc {
  overflow: hidden !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

.ydelse-card__features {
  overflow: hidden !important;
}

.ydelse-card__feature {
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Service card image — uniform aspect ratio */
.ydelse-card__img {
  flex-shrink: 0 !important;
}

/* Process step cards on ydelser subpages */
.section--off .card-glass h3 {
  color: #ffffff !important;
}

.section--off .card-glass p {
  color: rgba(255,255,255,0.65) !important;
}

/* Lokationer subpages city tags */
.city-tag {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.8) !important;
}

.city-tag:hover {
  background: var(--gold, #0DE85C) !important;
  color: #0e2612 !important;
  border-color: var(--gold, #0DE85C) !important;
}

.city-tag svg {
  stroke: currentColor !important;
}


/* ─────────────────────────────────────────────────
   12. YDELSER SUBPAGE — icon-only service cards
   Now that images are removed, cards should be
   compact icon + text grid.
   ───────────────────────────────────────────────── */

/* Service cards without images: compact layout */
.service-card:not(:has(.service-card__img)) {
  padding: 1.5rem !important;
  gap: 0.75rem !important;
}

/* Also target via the cursor:default style we added */
.service-card[style*="cursor:default"] {
  padding: 1.5rem !important;
  gap: 0.75rem !important;
}

/* Remove the negative margin that was for image cards */
.service-card[style*="cursor:default"] .service-card__img {
  display: none !important;
}


/* ─────────────────────────────────────────────────
   13. TRÆTERRASSE ICON FIX — replace briefcase with deck icon
   The icon was a briefcase SVG which looked wrong.
   Force consistent sizing on all icon wraps.
   ───────────────────────────────────────────────── */

/* Make all service card icon containers SQUARE and consistent */
.service-card__icon-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Force ALL SVGs inside icon wraps to same size */
.service-card__icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex-shrink: 0 !important;
}


/* ─────────────────────────────────────────────────
   14. FAQ HEADING — white on dark background
   The FAQ section's <section class="section"> sits
   on the dark body bg. Force all text white.
   ───────────────────────────────────────────────── */

/* The FAQ section has no --dark modifier but body bg is dark */
body > section.section:not(.section--dark):not(.section--deeper):not(.section--off):not(.section--light) {
  background: #0e2612;
}

/* All section headlines without explicit dark class need white text */
section.section .headline-md,
section.section .headline-lg,
section.section .headline-sm,
section.section h1,
section.section h2,
section.section h3 {
  color: #ffffff !important;
}

section.section .eyebrow {
  color: var(--gold, #0DE85C) !important;
}

section.section .body-lg {
  color: rgba(255,255,255,0.75) !important;
}

section.section p {
  color: rgba(255,255,255,0.75) !important;
}

/* Exceptions: elements inside white cards should stay dark */
section.section .ydelse-card h2,
section.section .ydelse-card h3 {
  color: #1a1a1a !important;
}

section.section .ydelse-card p {
  color: #555 !important;
}

section.section .ydelse-card .ydelse-card__feature {
  color: #0e2612 !important;
}

section.section .ydelse-card .ydelse-card__cta {
  color: #0e2612 !important;
}

/* White card exceptions — project cards, ydelse cards etc */
.ydelse-card *,
.project-card * {
  /* Don't override — let specific rules handle */
}


/* ─────────────────────────────────────────────────
   15. YDELSER HERO — left-aligned text
   The hero section should be left-aligned, not centered.
   ───────────────────────────────────────────────── */

.ydelser-hero__inner {
  align-items: flex-start !important;
  text-align: left !important;
}

.ydelser-hero__title {
  text-align: left !important;
}

.ydelser-hero__sub {
  text-align: left !important;
}

/* The CTA buttons row */
.ydelser-hero__inner > div[style*="justify-content:center"] {
  justify-content: flex-start !important;
}


/* ─────────────────────────────────────────────────
   16. YDELSER OVERVIEW — white card text fix
   The ydelse-card elements are WHITE bg cards.
   ALL text inside must be DARK, not white.
   ───────────────────────────────────────────────── */

.ydelse-card {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

.ydelse-card__title {
  color: #1a1a1a !important;
}

.ydelse-card__desc {
  color: #555555 !important;
}

.ydelse-card__feature {
  color: #1a1a1a !important;
  font-size: 0.78rem !important;
}

.ydelse-card__feature svg {
  color: #0DE85C !important;
  stroke: #0DE85C !important;
  width: 14px !important;
  height: 14px !important;
}

.ydelse-card__cta {
  color: #0e2612 !important;
}

.ydelse-card:hover .ydelse-card__cta {
  color: #0DE85C !important;
}

.ydelse-card__tag {
  background: #0DE85C !important;
  color: #0e2612 !important;
}

/* Ydelse card features border */
.ydelse-card__features {
  border-top-color: #eee !important;
}


/* ─────────────────────────────────────────────────
   17. HOMEPAGE FAQ — force white text on dark bg
   The FAQ <section class="section"> has no bg,
   sitting on dark body. All text must be white.
   ───────────────────────────────────────────────── */

/* Target the specific FAQ section structure */
.split .split__text .headline-md,
.split .split__text h2 {
  color: #ffffff !important;
}

.split .split__text .eyebrow {
  color: #0DE85C !important;
}

.split .split__text .body-lg,
.split .split__text p {
  color: rgba(255,255,255,0.75) !important;
}

/* All body-level sections without explicit bg */
body > section.section {
  color: #ffffff;
}

body > section.section .headline-md,
body > section.section .headline-lg,
body > section.section .headline-sm,
body > section.section h1,
body > section.section h2,
body > section.section h3,
body > section.section h4 {
  color: #ffffff !important;
}

body > section.section .eyebrow {
  color: #0DE85C !important;
}

body > section.section p,
body > section.section .body-lg {
  color: rgba(255,255,255,0.75) !important;
}

/* Except white-background cards inside these sections */
body > section.section .ydelse-card h2,
body > section.section .ydelse-card p,
body > section.section .project-card h3,
body > section.section .project-card p {
  color: #1a1a1a !important;
}

body > section.section .ydelse-card .ydelse-card__desc {
  color: #555 !important;
}


/* ─────────────────────────────────────────────────
   18. YDELSER HERO — left alignment (override inline)
   ───────────────────────────────────────────────── */

.ydelser-hero__inner {
  align-items: flex-start !important;
  text-align: left !important;
}

.ydelser-hero__inner .breadcrumb {
  justify-content: flex-start !important;
}

.ydelser-hero__inner .eyebrow {
  text-align: left !important;
}

.ydelser-hero__title {
  text-align: left !important;
  max-width: 14ch !important;
}

.ydelser-hero__sub {
  text-align: left !important;
  max-width: 52ch !important;
}

.ydelser-hero__inner > div:last-child {
  justify-content: flex-start !important;
}


/* ─────────────────────────────────────────────────
   19. YDELSE CARDS — overflow & text clipping fix
   Cards must NOT clip their text content.
   Only the image area should clip for rounded corners.
   ───────────────────────────────────────────────── */

.ydelse-card {
  overflow: visible !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-radius: 20px !important;
}

/* Only the image wrapper clips */
.ydelse-card__img {
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
}

/* Card body must never clip */
.ydelse-card__body {
  overflow: visible !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
}

/* CTA link must be fully visible */
.ydelse-card__cta {
  overflow: visible !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding-top: 0.5rem !important;
}

.ydelse-card:hover .ydelse-card__cta {
  color: #0DE85C !important;
}

/* Features list inside cards */
.ydelse-card__features {
  overflow: visible !important;
}

.ydelse-card__feature {
  overflow: visible !important;
  white-space: normal !important;
}

/* Description text */
.ydelse-card__desc {
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  hyphens: auto !important;
  color: #555 !important;
}

.ydelse-card__title {
  color: #1a1a1a !important;
  overflow: visible !important;
}


/* ─────────────────────────────────────────────────
   20. LIGHT BACKGROUND SECTIONS — dark text override
   Sections with explicit light backgrounds (#F8F5F2, #fff, white)
   must have DARK text, overriding the global white text rules.
   ───────────────────────────────────────────────── */

[style*="background:#F8F5F2"] h1,
[style*="background:#F8F5F2"] h2,
[style*="background:#F8F5F2"] h3,
[style*="background:#F8F5F2"] h4,
[style*="background:#F8F5F2"] .headline-md,
[style*="background:#F8F5F2"] .headline-lg {
  color: #1a1a1a !important;
}

[style*="background:#F8F5F2"] p,
[style*="background:#F8F5F2"] .body-lg,
[style*="background:#F8F5F2"] span,
[style*="background:#F8F5F2"] li {
  color: #333 !important;
}

[style*="background:#F8F5F2"] .eyebrow {
  color: #0e2612 !important;
}

[style*="background:#F8F5F2"] .feature-item__text {
  color: #333 !important;
}

[style*="background:#fff"] h1,
[style*="background:#fff"] h2,
[style*="background:#fff"] h3,
[style*="background:#fff"] h4,
[style*="background:#fff"] .headline-md,
[style*="background:#fff"] .headline-lg {
  color: #1a1a1a !important;
}

[style*="background:#fff"] p,
[style*="background:#fff"] .body-lg,
[style*="background:#fff"] span,
[style*="background:#fff"] li {
  color: #333 !important;
}

[style*="background:#fff"] .eyebrow {
  color: #0e2612 !important;
}

/* Also handle background: white and background:#ffffff */
section[style*="background:#ffffff"] h2,
section[style*="background:#ffffff"] p,
section[style*="background:white"] h2,
section[style*="background:white"] p {
  color: #1a1a1a !important;
}

/* City tags on white/cream bg sections */
[style*="background:#fff"] .city-tag,
[style*="background:#F8F5F2"] .city-tag {
  background: #0e2612 !important;
  border-color: #0e2612 !important;
  color: #fff !important;
}

[style*="background:#fff"] .city-tag:hover,
[style*="background:#F8F5F2"] .city-tag:hover {
  background: #0DE85C !important;
  border-color: #0DE85C !important;
  color: #0e2612 !important;
}


/* ─────────────────────────────────────────────────
   21. HOMEPAGE SERVICE CARDS — uniform image sizing
   The card-glass padding override breaks the negative
   margin image trick. Fix: zero padding on top for
   image cards, use proper aspect-ratio.
   ───────────────────────────────────────────────── */

/* Service cards WITH images: reset padding so image goes edge-to-edge */
.services-section .card-glass.service-card {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* The image container — forced uniform aspect ratio */
.service-card__img {
  margin: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

.service-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Content below the image gets the padding */
.services-section .card-glass.service-card > .service-card__icon-wrap,
.services-section .card-glass.service-card > div:not(.service-card__img),
.services-section .card-glass.service-card > span {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.services-section .card-glass.service-card > .service-card__icon-wrap {
  margin-top: 1.25rem;
}

.services-section .card-glass.service-card > div:last-of-type {
  margin-bottom: 0.5rem;
}

.services-section .card-glass.service-card > span:last-child {
  margin-bottom: 1.5rem;
}

/* Ensure the grid keeps cards equal height */
.services-grid {
  align-items: stretch !important;
}

.services-grid .card-glass {
  height: auto !important;
  min-height: 0 !important;
}


/* ─────────────────────────────────────────────────
   22. YDELSER OVERVIEW — uniform card images
   The ydelse-card images must all be the same height.
   ───────────────────────────────────────────────── */

.ydelse-card__img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: #0e2612 !important;
}

.ydelse-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Grid: equal columns, equal card heights */
.ydelser-grid {
  align-items: start !important;
}

.ydelse-card {
  display: flex !important;
  flex-direction: column !important;
}


/* ─────────────────────────────────────────────────
   23. SERVICE CARDS — only zero padding when has image
   The padding:0 rule was breaking icon-only cards
   on ydelser subpages. Only apply to cards WITH images.
   ───────────────────────────────────────────────── */

/* Override: restore padding on icon-only service cards */
.card-glass.service-card:not(:has(.service-card__img)) {
  padding: 1.5rem !important;
  overflow: visible !important;
}

/* For browsers without :has support, target the "Andre ydelser" section specifically */
.section--dark .services-grid .card-glass.service-card {
  padding: 1.5rem !important;
  overflow: visible !important;
}

/* Only the HOMEPAGE services section (which is inside .services-section) gets zero padding */
.services-section .services-grid .card-glass.service-card {
  padding: 0 !important;
  overflow: hidden !important;
}

/* CTA banner fix — ensure proper background */
.cta-banner {
  background: #133117 !important;
}

.cta-banner__bg {
  background: #133117 !important;
}

/* CTA banner circles */
.cta-banner__circle--1 {
  background: rgba(255,255,255,0.04) !important;
}

.cta-banner__circle--2 {
  background: rgba(13,232,92,0.08) !important;
}


/* ─────────────────────────────────────────────────
   24. HOMEPAGE SERVICE CARDS — final image alignment fix
   The .services-section rule must beat .section--dark rule.
   Higher specificity ensures homepage cards get padding:0
   with edge-to-edge images.
   ───────────────────────────────────────────────── */

section.services-section .services-grid .card-glass.service-card {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

section.services-section .services-grid .service-card__img {
  margin: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}

section.services-section .services-grid .service-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text content padding via the card body */
section.services-section .services-grid .card-glass.service-card > .service-card__icon-wrap {
  margin: 1.25rem 1.5rem 0 1.5rem !important;
}

section.services-section .services-grid .card-glass.service-card > div:not(.service-card__img) {
  margin: 0 1.5rem !important;
}

section.services-section .services-grid .card-glass.service-card > span {
  margin: 0 1.5rem 1.5rem 1.5rem !important;
}

/* ── Breadcrumb positioning — sits below fixed navbar ──────────────── */
nav.breadcrumb {
  padding-top: calc(72px + 0.6rem) !important;
  margin-top: 0 !important;
  background: var(--brand-green, #133117) !important;
}

/* ── Feature checkmark — bright CTA green dot ──────────────────────── */
.feature-item__check {
  background: #0DE85C !important;
  border-color: #0DE85C !important;
  box-shadow: 0 2px 10px rgba(13,232,92,0.28) !important;
}
.feature-item__check svg {
  stroke: #082010 !important;
  color: #082010 !important;
  fill: none !important;
}

/* ── Hamburger — CTA green lines, larger touch target ───────────────── */
.hamburger {
  width: 44px !important;
  padding: 0.5rem !important;
  gap: 6px !important;
}
.hamburger__line {
  background: #0DE85C !important;
  height: 2.5px !important;
  border-radius: 3px !important;
  width: 100% !important;
}
/* Keep the open-state animation correct with new size */
.hamburger.open .hamburger__line:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger.open .hamburger__line:nth-child(2) { opacity: 0; width: 0 !important; }
.hamburger.open .hamburger__line:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — Must come last to win specificity
   ══════════════════════════════════════════════════════════ */

/* Eyebrow square box — remove globally (was a 20px line rendering as a square) */
.eyebrow::before,
.eyebrow:before {
  display: none !important;
  content: none !important;
}

/* Scroll cue — hidden on all screen sizes */
.hero__scroll-cue,
.scroll-line {
  display: none !important;
}

/* ydelser hero — center on mobile, keep left on desktop */
@media (max-width: 768px) {
  .ydelser-hero__inner {
    align-items: center !important;
    text-align: center !important;
  }
  .ydelser-hero__inner .eyebrow {
    text-align: center !important;
    justify-content: center !important;
  }
  .ydelser-hero__title {
    text-align: center !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .ydelser-hero__sub {
    text-align: center !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }
}

/* Hero homepage — centered + spread on mobile */
@media (max-width: 768px) {
  .hero__left {
    align-items: center !important;
    text-align: center !important;
  }
  .hero__heading,
  .hero__sub {
    text-align: center !important;
  }
  .hero__sub {
    max-width: 34ch !important;
  }
  .hero__actions {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-inline: auto !important;
  }
}

/* Short hero pages — center on mobile */
@media (max-width: 768px) {
  .hero--short .hero__left {
    align-items: center !important;
    text-align: center !important;
  }
  .hero--short .hero__heading,
  .hero--short .hero__sub {
    text-align: center !important;
  }
}

/* Section headers — center on mobile */
@media (max-width: 768px) {
  .section-header {
    text-align: center !important;
  }
  .section-header .eyebrow {
    justify-content: center !important;
    margin-inline: auto !important;
  }
}

/* Prevent any horizontal scroll */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMB — Hide on mobile (broken square box issue)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  nav.breadcrumb,
  .breadcrumb,
  .ydelser-hero__inner nav,
  .ydelser-hero__inner .breadcrumb {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE HERO — Left-align text, center CTAs on mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero__left {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hero__heading,
  .hero__sub {
    text-align: left !important;
  }
  .hero__sub {
    max-width: 100% !important;
  }
  .hero__actions {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .hero__badge {
    margin-inline: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   YDELSER HERO — Left-align text, center CTAs on mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ydelser-hero__inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .ydelser-hero__inner .eyebrow {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .ydelser-hero__title {
    text-align: left !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .ydelser-hero__sub {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }
  /* CTAs — center on mobile */
  .ydelser-hero__inner > div[style*="flex"] {
    justify-content: center !important;
    width: 100% !important;
  }
  .ydelser-hero__inner .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   REVIEWS / CARD GRIDS — Single column on mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .reviews-grid,
  [style*="minmax(320px"],
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Review cards — better padding on mobile */
  .reviews-grid .card-glass {
    padding: 1.25rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL LEFT-ALIGN — All hero headings & subtext on mobile
   Applies across homepage, ydelser, lokationer, ydelser sub-pages,
   om-os, referencer, blog, kontakt, snedker
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero (homepage full-height) ── */
  .hero__left,
  .hero__heading,
  .hero__sub,
  .hero__badge {
    text-align: left !important;
    align-items: flex-start !important;
    margin-inline: 0 !important;
  }
  .hero__actions {
    align-items: stretch !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* ── Hero short (ydelser sub-pages, lokationer) ── */
  .hero--short .hero__left,
  .hero--short .hero__heading,
  .hero--short .hero__sub,
  .hero--short .hero__badge {
    text-align: left !important;
    align-items: flex-start !important;
    margin-inline: 0 !important;
  }

  /* ── Ydelser index hero ── */
  .ydelser-hero__inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .ydelser-hero__title,
  .ydelser-hero__sub {
    text-align: left !important;
    max-width: 100% !important;
  }
  .ydelser-hero__inner .eyebrow {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* CTAs in ydelser hero — centered */
  .ydelser-hero__inner > div:last-child {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ── Section headers (mid-page) — keep centered ── */
  .section-header {
    text-align: center !important;
  }
  .section-header .eyebrow {
    justify-content: center !important;
    margin-inline: auto !important;
  }
  .section-header h2,
  .section-header p {
    text-align: center !important;
  }

  /* ── Split sections (about, feature, FAQ sides) ── */
  .split__text .eyebrow {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .split__text h2,
  .split__text h3,
  .split__text p {
    text-align: left !important;
  }

  /* ── CTA Banner ── */
  .cta-banner__text .eyebrow {
    justify-content: center !important;
  }
  .cta-banner__text h2,
  .cta-banner__text p {
    text-align: center !important;
  }

  /* ── Lokationer short-hero inner text ── */
  .lokation-hero__inner,
  [class*="lokation"] h1,
  [class*="lokation"] p {
    text-align: left !important;
    align-items: flex-start !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HARDCODED 3-COLUMN GRIDS — Force single column on mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"],
  [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}