/**
 * FlexIQ Design System - CSS Custom Properties
 * Version: 2.0 — EXACT Figma tokens
 * Updated: 2026-02-19
 * 
 * Component styles (header, footer) loaded separately via functions.php
 */

:root {
  /* === FIGMA EXACT COLORS === */
  --color-primary: #0c2212;
  --color-near-black: #0a0a0a;
  --color-nav-dark: #171717;
  --color-accent: #5fdf81;
  --color-accent-light: #b0eaa9;
  --color-button: #1B3FC5;
  --color-button-text: #ffffff;
  --color-hero-bg: #f8f6ea;
  --color-section-bg: #f6fcff;
  --color-muted: #2c2c2c;
  --color-gray: #525252;
  --color-gray-light: #737373;
  --color-border: #d4d4d4;
  --color-input-bg: #fafafa;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Legacy aliases (keep for backward compat) */
  --color-primary-rgb: 12, 34, 18;
  --color-accent-rgb: 95, 223, 129;
  --color-accent-light-rgb: 176, 234, 169;
  --color-gray-900: #0a0a0a;
  --color-gray-800: #171717;
  --color-gray-400: #525252;
  --color-gray-300: #737373;
  --color-gray-25: #fafafa;
  --color-section-blue: #f6fcff;
  --color-hero-cream: #f8f6ea;
  --color-text-muted: #2c2c2c;
  --color-button-primary: #193ec6;
  --color-info-dark: #193ec6;

  /* === FIGMA EXACT TYPOGRAPHY === */
  --font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-primary: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Exact sizes from Figma */
  --text-hero: 96px;
  --text-value-prop: 58px;
  --text-h2: 48px;
  --text-h3-card: 24px;
  --text-h3-sub: 20px;
  --text-number: 30px;
  --text-body-xl: 24px;
  --text-body-lg: 22px;
  --text-body: 16px;
  --text-small: 14px;
  --text-nav: 14px;

  /* Legacy size aliases */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  /* Line heights from Figma */
  --lh-hero: 96px;
  --lh-value-prop: 64px;
  --lh-h2: 48px;
  --lh-body-xl: 34px;
  --lh-body-lg: 31px;
  --lh-body: 24px;

  /* Legacy line height tokens */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* Font weights */
  --font-weight-normal: 400;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* === FIGMA EXACT SPACING === */
  --section-padding: 80px;
  --card-padding: 24px;
  --grid-gap: 24px;

  /* Legacy spacing tokens */
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 2.5rem;
  --spacing-6: 3rem;
  --spacing-8: 4rem;
  --spacing-10: 5rem;
  --spacing-12: 6rem;
  --spacing-16: 8rem;
  --spacing-20: 10rem;
  --spacing-24: 12rem;
  --spacing-32: 16rem;

  --section-padding-y: 80px;
  --section-padding-x: 2rem;
  --section-gap: 8rem;
  --component-gap: 3rem;
  --card-gap: 1.5rem;
  --inline-gap-sm: 1rem;
  --inline-gap-md: 1.5rem;
  --inline-gap-lg: 2rem;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max: 1920px;

  /* === FIGMA EXACT BORDER RADIUS === */
  --radius-pill: 9999px;
  /* Knappar */
  --radius-card: 24px;
  /* Kort */
  --radius-input: 8px;
  /* Input */

  /* Legacy radius tokens */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 48px;
  --radius-2xl: 80px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 768px) {
  :root {
    --section-padding: 64px;
    --section-padding-y: 64px;
    --section-padding-x: 1.5rem;
    --section-gap: 4rem;
    --component-gap: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --section-padding: 48px;
    --section-padding-y: 48px;
    --section-padding-x: 1rem;
    --section-gap: 3rem;
    --component-gap: 1.5rem;
    --card-padding: 20px;
  }
}

/* ===================================================================
   ACCESSIBILITY - FOCUS STATES
   =================================================================== */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Remove WP default top margin on site blocks */
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}

/* ===================================================================
   GLOBAL TYPOGRAPHY — central control, no inline styles needed
   =================================================================== */

/* All content inherits Satoshi */
body,
.wp-site-blocks {
  font-family: var(--font-primary);
  color: var(--color-primary);
}

/* Section headings (h2) */
.wp-block-heading:where(h2) {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-primary);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.1;
}

/* Card/sub headings (h3) */
.wp-block-heading:where(h3) {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-primary);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.3;
}

/* Small headings (h4) */
.wp-block-heading:where(h4) {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.4;
}

/* Body text */
.wp-block-group p,
.wp-block-column p,
.wp-block-columns p {
  font-family: var(--font-primary);
  color: var(--color-gray);
  line-height: 1.6;
  font-size: 1rem;
}

/* ===================================================================
   FIGMA EXACT BUTTON STYLES
   =================================================================== */

.wp-block-button__link,
.wp-element-button {
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-semibold);
  padding: 14px 28px;
  transition: opacity 0.15s ease;
}

.wp-block-button__link:hover {
  opacity: 0.88;
}

/* Buttons with inline styles (has-background) — respect inline colors */
.wp-block-button .wp-block-button__link.has-background {
  /* Inline styles take precedence — don't override */
}

/* ===================================================================
   BUTTON VARIANTS × SIZES
   Format: is-style-{variant}-{size}
   Variants: primary-green, primary-blue, outline, ghost, link
   Sizes: sm, md, lg, xl
   =================================================================== */

/* --- Size tokens --- */
.wp-block-button[class*="-sm"] .wp-block-button__link {
  padding: 8px 16px;
  font-size: 14px;
}

.wp-block-button[class*="-md"] .wp-block-button__link {
  padding: 12px 24px;
  font-size: 16px;
}

.wp-block-button[class*="-lg"] .wp-block-button__link {
  padding: 16px 32px;
  font-size: 18px;
}

.wp-block-button[class*="-xl"] .wp-block-button__link {
  padding: 20px 40px;
  font-size: 20px;
}

/* --- Primary Green --- */
.wp-block-button[class*="is-style-primary-green"] .wp-block-button__link {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: 2px solid transparent;
}

/* --- Primary Blue --- */
.wp-block-button[class*="is-style-primary-blue"] .wp-block-button__link {
  background-color: var(--color-button);
  color: #ffffff;
  border: 2px solid transparent;
}

/* --- Outline (dark) --- */
.wp-block-button[class*="is-style-outline"] .wp-block-button__link {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid currentColor;
  box-sizing: border-box;
}

/* --- Outline White (for dark backgrounds) --- */
.wp-block-button[class*="is-style-outline-white"] .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-sizing: border-box;
}

/* Ensure all buttons same box model */
.wp-block-button__link,
.wp-element-button {
  box-sizing: border-box;
}

/* --- Ghost --- */
.wp-block-button[class*="is-style-ghost"] .wp-block-button__link {
  background-color: transparent;
  color: var(--color-button);
  border: 2px solid transparent;
  text-decoration: underline;
}

/* --- Link --- */
.wp-block-button[class*="is-style-link"] .wp-block-button__link {
  background: none;
  border: none;
  color: var(--color-button);
  text-decoration: underline;
  font-weight: 500;
  border-radius: 0;
}

.wp-block-button[class*="is-style-link"] .wp-block-button__link:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* Fill fallback (default WP style, no inline colors) */
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--color-button);
  color: #ffffff;
  border: 2px solid transparent;
}

/* ===================================================================
   LAYOUT UTILITIES — Add these as "Additional CSS class(es)" in editor
   =================================================================== */

/* Heights */
.h-screen {
  min-height: 100vh;
}

.h-screen-90 {
  min-height: 90vh;
}

.h-screen-80 {
  min-height: 80vh;
}

.h-screen-70 {
  min-height: 70vh;
}

.h-screen-50 {
  min-height: 50vh;
}

.h-auto {
  min-height: auto !important;
}

/* ===================================================================
   RESPONSIVE UTILITIES — Add as "Additional CSS class" in editor
   =================================================================== */

/* Show/hide per device */
.hide-mobile { display: block !important; }
.hide-desktop { display: none !important; }
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: block !important; }
}

/* Min-heights — px values (desktop → mobile) */
div.min-h-400 { min-height: 400px !important; }
div.min-h-500 { min-height: 500px !important; }
div.min-h-600 { min-height: 600px !important; }
div.min-h-700 { min-height: 700px !important; }
div.min-h-800 { min-height: 800px !important; }

/* Min-heights — viewport units (dvh with vh fallback) */
div.min-h-screen { min-height: 100vh !important; min-height: 100dvh !important; }
div.min-h-screen-90 { min-height: 90vh !important; min-height: 90dvh !important; }
div.min-h-screen-80 { min-height: 80vh !important; min-height: 80dvh !important; }
div.min-h-screen-70 { min-height: 70vh !important; min-height: 70dvh !important; }
div.min-h-screen-60 { min-height: 60vh !important; min-height: 60dvh !important; }
div.min-h-screen-50 { min-height: 50vh !important; min-height: 50dvh !important; }

/* Heights — exact viewport (dvh with vh fallback) */
div.h-dvh { height: 100vh !important; height: 100dvh !important; }
div.h-svh { height: 100svh !important; }
div.h-lvh { height: 100lvh !important; }

/* Responsive — scale down on mobile */
@media (max-width: 767px) {
  div.min-h-400 { min-height: 280px !important; }
  div.min-h-500 { min-height: 350px !important; }
  div.min-h-600 { min-height: 400px !important; }
  div.min-h-700 { min-height: 450px !important; }
  div.min-h-800 { min-height: 500px !important; }
  div.min-h-screen { min-height: 80vh !important; min-height: 80dvh !important; }
  div.min-h-screen-90 { min-height: 70vh !important; min-height: 70dvh !important; }
  div.min-h-screen-80 { min-height: 60vh !important; min-height: 60dvh !important; }
  div.min-h-screen-70 { min-height: 50vh !important; min-height: 50dvh !important; }
  div.min-h-screen-60 { min-height: 45vh !important; min-height: 45dvh !important; }
  div.min-h-screen-50 { min-height: 40vh !important; min-height: 40dvh !important; }
  .h-screen { min-height: 80vh !important; min-height: 80dvh !important; }
  .h-screen-90 { min-height: 70vh !important; min-height: 70dvh !important; }
  .h-screen-80 { min-height: 60vh !important; min-height: 60dvh !important; }
  .h-screen-70 { min-height: 50vh !important; min-height: 50dvh !important; }
}

/* Content alignment inside blocks */
.content-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.content-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.content-bottom {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Gap utilities */
.gap-sm { gap: 8px !important; }
.gap-md { gap: 16px !important; }
.gap-lg { gap: 24px !important; }
.gap-xl { gap: 48px !important; }

/* Max-width utilities */
.max-w-600 { max-width: 600px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-1000 { max-width: 1000px !important; }

/* Text alignment responsive */
.text-center-mobile { text-align: inherit; }
@media (max-width: 767px) {
  .text-center-mobile { text-align: center !important; }
}

/* Full bleed — breaks out of content width */
.full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* Center content vertically */
.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flex-center-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================================================
   FIGMA EXACT CARD STYLES
   =================================================================== */

.wp-block-group.is-style-card,
.service-card,
.feature-card {
  border-radius: var(--radius-card) !important;
  padding: var(--card-padding) !important;
}

/* Center icon and full-width text in service cards */
.wp-block-group.is-style-card > .wp-block-image {
  align-self: center !important;
}
.wp-block-group.is-style-card > .wp-block-group {
  width: 100% !important;
}

/* Left-aligned cards: icon stays left */
.section-left .wp-block-group.is-style-card > .wp-block-image {
  align-self: flex-start !important;
}

/* Services columns — stack at tablet */
@media (max-width: 1023px) {
  .section .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .section .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* Article cards — link color inherit */
.article-card .wp-block-post-title a {
  color: var(--color-primary, #0c2212);
  text-decoration: none;
}
.article-card .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* Contact Forms — gradient background + responsive */
.flexiq-contact-form,
.flexiq-contact-form-cv {
  background: linear-gradient(180deg, #F6FCFF 0%, #FFFFFF 100%);
}
@media (max-width: 1023px) {
  .flexiq-contact-form,
  .flexiq-contact-form-cv {
    padding: 64px 24px;
  }
  .flexiq-contact-form .wp-block-columns,
  .flexiq-contact-form-cv .wp-block-columns {
    flex-wrap: wrap;
  }
  .flexiq-contact-form .wp-block-columns > .wp-block-column,
  .flexiq-contact-form-cv .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* What We Help With — responsive cards */
@media (max-width: 1023px) {
  .flexiq-what-we-help-with .wp-block-columns {
    flex-wrap: wrap;
  }
  .flexiq-what-we-help-with .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }
  .help-card {
    padding: 48px 32px;
  }
}

/* ===================================================================
   FIGMA EXACT HERO
   =================================================================== */

.hero-h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #000000;
  font-family: var(--font-family);
}

.hero-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 1.5rem;
  font-family: var(--font-family);
}

.hero-ingress {
  font-size: 18px;
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: #555555;
  margin-bottom: 2.5rem;
  font-family: var(--font-family);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 5rem 2rem 3rem;
}

/* Left-aligned secondary hero — align with page content */
.flexiq-hero--left .wp-block-cover__inner-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.flexiq-hero--left .hero-content {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.flexiq-hero--left .hero-content > * {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.flexiq-hero--left .hero-h1 {
  max-width: 900px;
}

.flexiq-hero--left .hero-ingress {
  max-width: 700px;
}

/* ===================================================================
   NAV LINKS UPPERCASE
   =================================================================== */

.wp-block-navigation-item__content,
.wp-block-navigation a {
  font-size: 14px !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #000000 !important;
}

/* ===================================================================
   UTILITY CLASSES
   =================================================================== */

.bg-primary {
  background-color: var(--color-primary);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-section-blue {
  background-color: var(--color-section-bg);
}

.bg-hero-cream {
  background-color: var(--color-hero-bg);
}

.bg-input {
  background-color: var(--color-input-bg);
}

.text-primary {
  color: var(--color-primary);
}

.text-accent {
  color: var(--color-accent);
}

.text-black {
  color: var(--color-black);
}

.text-white {
  color: var(--color-white);
}

.text-muted {
  color: var(--color-muted);
}

.text-gray {
  color: var(--color-gray-light);
}

.font-regular {
  font-weight: var(--font-regular);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-bold {
  font-weight: var(--font-bold);
}

.font-black {
  font-weight: var(--font-black);
}

.rounded-pill {
  border-radius: var(--radius-pill);
}

.rounded-card {
  border-radius: var(--radius-card);
}

.rounded-input {
  border-radius: var(--radius-input);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.transition {
  transition: var(--transition-base);
}

/* ===================================================================
   INTERACTIVE HOVER STATES
   =================================================================== */

.article-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ===================================================================
   FLEXIQ CONTACT FORM — Figma-exact styles
   =================================================================== */

.flexiq-form-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
}

.flexiq-form-title {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 24px 0;
  font-family: var(--font-family);
}

.flexiq-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flexiq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.flexiq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flexiq-label {
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  font-family: var(--font-family);
}

.flexiq-input {
  background: #fafafa;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--font-family);
  color: #0a0a0a;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.flexiq-input:focus {
  border-color: #5fdf81;
  background: #ffffff;
}

.flexiq-input::placeholder {
  color: #a3a3a3;
}

.flexiq-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23737373' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

.flexiq-textarea {
  resize: vertical;
  min-height: 100px;
}

.flexiq-btn-submit {
  background: #1B3FC5;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: opacity 0.15s ease;
}

.flexiq-btn-submit:hover {
  opacity: 0.88;
}

.flexiq-form-status {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

.flexiq-form-status.success {
  background: #d1fae5;
  color: #065f46;
}

.flexiq-form-status.error {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 600px) {
  .flexiq-row {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   GÖR ETT MOVE — card shadow (Figma)
   =================================================================== */
.gor-ett-move-card,
.wp-block-group.is-layout-flow[style*="border-radius:20px"] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ===================================================================
   FLEXIQ HERO — Figma-exact
   =================================================================== */

.flexiq-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
}


/* wp:cover handles the background image natively */
.flexiq-hero .wp-block-cover__image-background {
  object-position: center bottom;
}

/* Legacy support for wp:image approach */
.hero-illustration-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* Hero text content */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}


.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero buttons use inline WP styles — no custom classes needed */

/* Legacy cityscape styles removed — using illustration bg now */

/* ============================================================
   RESPONSIVE NAV — Mobile / Tablet / Desktop
   ============================================================ */

/* --- Nav link base styles --- */
.flexiq-nav .wp-block-navigation-item__content,
.flexiq-nav .wp-block-navigation a {
  color: #0c2212 !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}

.flexiq-nav .wp-block-navigation-item__content:hover,
.flexiq-nav .wp-block-navigation a:hover {
  opacity: 0.7;
}

/* Active nav item — bold on current page */
.flexiq-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.flexiq-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
  font-weight: 700 !important;
  opacity: 1;
}

/* Nav container — explicit gap (not relying on blockGap) */
.flexiq-nav.wp-block-navigation__container,
.flexiq-nav .wp-block-navigation__container,
ul.flexiq-nav.wp-block-navigation,
.wp-block-navigation.flexiq-nav .wp-block-navigation__container {
  gap: 24px !important;
}

/* Site logo — 92px as set in editor */
.flexiq-logo img,
.wp-block-site-logo.flexiq-logo img {
  width: 92px;
  height: auto;
}

/* Prevent max-width:100% from overriding explicit image sizes */
.wp-block-image img[style*="width"],
.wp-block-image img[style*="height"] {
  max-width: none !important;
}

/* --- CTA nav link styled as green pill button --- */
.flexiq-nav .wp-block-navigation-item.flexiq-nav-cta>.wp-block-navigation-item__content,
.flexiq-nav a.flexiq-nav-cta {
  background: #5fdf81 !important;
  color: #0c2212 !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Target the link inside the nav-cta item */
.wp-block-navigation .flexiq-nav-cta .wp-block-navigation-item__content {
  background: #5fdf81 !important;
  color: #0c2212 !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- Hamburger button styling --- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: #0c2212 !important;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: #0c2212 !important;
}

/* --- Mobile overlay menu --- */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #ffffff !important;
  padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #0c2212 !important;
  font-size: 18px !important;
  font-weight: var(--font-weight-normal) !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.wp-block-navigation__responsive-container.is-menu-open .flexiq-nav-cta .wp-block-navigation-item__content {
  background: #5fdf81 !important;
  border-radius: 9999px !important;
  padding: 12px 20px !important;
  border-bottom: none !important;
  text-align: center !important;
  margin-top: 16px !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet (768px–1024px) */
@media (max-width: 1024px) {

  .flexiq-nav .wp-block-navigation-item__content,
  .flexiq-nav .wp-block-navigation a {
    font-size: 12px !important;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {

  /* Header inner — logo + hamburger only */
  .flexiq-nav-wrapper {
    gap: 0 !important;
  }

  /* Footer columns stack */
  .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Hero text */
  .wp-block-group .has-text-color[style*="font-size:64px"],
  .wp-block-group .has-text-color[style*="font-size:56px"] {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }

  /* Section padding */
  .wp-block-group[style*="padding-top:80px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Cards: single column */
  .wp-block-columns.are-vertically-aligned-top {
    flex-direction: column !important;
  }
}


/* ============================================================
   FULL RESPONSIVE — ALL BLOCKS & COMPONENTS
   Mobile-first breakpoints: 768px tablet, 480px mobile
   ============================================================ */

/* --- Fluid section padding --- */
.wp-block-group.alignfull[style*="padding-top:80px"],
.wp-block-group.alignfull[style*="padding-top: 80px"] {
  padding-top: clamp(2.5rem, 6vw, 5rem) !important;
  padding-bottom: clamp(2.5rem, 6vw, 5rem) !important;
}

/* --- Fluid section headings (48px, 58px) --- */
h2.wp-block-heading[style*="font-size:48px"],
h2.wp-block-heading[style*="font-size: 48px"] {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
}

h2.wp-block-heading[style*="font-size:58px"],
h2.wp-block-heading[style*="font-size: 58px"] {
  font-size: clamp(2rem, 4.5vw, 3.625rem) !important;
}

/* --- Fluid section ingress (24px, 22px) --- */
p.has-text-color[style*="font-size:24px"],
p.has-text-color[style*="font-size: 24px"] {
  font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
}

p.has-text-color[style*="font-size:22px"],
p.has-text-color[style*="font-size: 22px"] {
  font-size: clamp(1rem, 2vw, 1.375rem) !important;
}

/* ---- HERO (responsive handled by clamp in main styles) ---- */
.flexiq-hero {
  min-height: auto;
}

/* ---- KOMPETENSER CARDS (3 col) ---- */
/* Cards with image placeholder top */
.wp-block-columns:has(.wp-block-column > [style*="height:200px"]) {
  flex-wrap: wrap !important;
}

.wp-block-columns:has(.wp-block-column > [style*="height:200px"]) .wp-block-column {
  min-width: 280px;
}

/* ---- VARFÖR VÄLJA OSS (01–06 grid, 3+3 col) ---- */
/* Numbers accent */
p.has-text-color[style*="color:#a3d6a3"][style*="font-size:30px"] {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem) !important;
}

/* ---- GÖR ETT MOVE CARDS ---- */
.wp-block-column [style*="height:240px"],
.wp-block-column [style*="height:200px"] {
  height: 180px !important;
}

/* ---- CONTACT FORM ---- */
.flexiq-form-card {
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}

/* ============================================================
   TABLET — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* 3-col → 2-col */
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(3) {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

  /* ALL columns stack */
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero */
  .flexiq-hero {
    overflow: hidden;
  }

  .hero-content {
    padding: 2.5rem 1.25rem 1.5rem !important;
    max-width: 100%;
  }

  .hero-label {
    font-size: 11px !important;
  }

  /* .hero-h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  } */

  .hero-ingress {
    font-size: 1rem !important;
  }

  .hero-cityscape-wrap {
    height: 220px !important;
  }

  /* Section paddings */
  .wp-block-group.alignfull {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Section headings */
  h2.wp-block-heading {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  h3.wp-block-heading {
    font-size: 1.125rem !important;
  }

  /* Ingress paragraphs */
  p.has-text-color[style*="font-size:24px"],
  p.has-text-color[style*="font-size:22px"],
  p.has-text-color[style*="font-size:18px"] {
    font-size: 1rem !important;
  }

  /* Card image placeholders */
  .wp-block-column [style*="height:240px"],
  .wp-block-column [style*="height:200px"] {
    height: 160px !important;
  }

  /* Varför välja oss numbers */
  p.has-text-color[style*="color:#a3d6a3"] {
    font-size: 1.25rem !important;
  }

  /* Footer: stack columns + center */
  footer .wp-block-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  footer .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  footer svg {
    width: 200px !important;
  }

  /* Contact form: full width */
  .flexiq-form-card {
    padding: 1.5rem !important;
    border-radius: 12px !important;
  }

  .flexiq-row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .flexiq-field {
    width: 100% !important;
  }

  /* Articles section */
  .wp-block-columns>.wp-block-column>[style*="border-radius:12px"] {
    margin-bottom: 1rem;
  }
}

/* ============================================================
   SMALL MOBILE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {
  /* .hero-h1 {
    font-size: 1.75rem !important;
  } */

  .hero-ingress {
    font-size: 0.9375rem !important;
  }

  .wp-block-group.alignfull {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  h2.wp-block-heading {
    font-size: 1.5rem !important;
  }
}

/* ===================================================================
   ARTICLE CARDS — shared styles
   =================================================================== */

.article-card .wp-block-post-excerpt__more-link,
.article-card-horizontal .wp-block-post-excerpt__more-link,
.flexiq-articles-query .wp-block-post-excerpt__more-link {
  display: none;
}

/* ===================================================================
   ARTICLE CARD HORIZONTAL — Vertical list variant
   =================================================================== */

.article-card-horizontal {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card-horizontal:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.article-card-horizontal .wp-block-post-featured-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0;
}

.articles-vertical-section .wp-block-post-template {
  gap: 80px;
}

.article-card-horizontal .wp-block-post-title a {
  color: var(--color-primary, #0c2212);
  text-decoration: none;
}

.article-card-horizontal .wp-block-post-title a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .article-card-horizontal {
    flex-direction: column;
  }
  .article-card-horizontal > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }
  .articles-vertical-section .wp-block-post-template {
    gap: 40px;
  }
}

/* ============================================================
   RESPONSIVE UTILITIES (Tailwind-style for Gutenberg)
   Use these class names in block "Additional CSS class(es)"
   ============================================================ */

/* Stack flex layouts on mobile */
.stack-mobile {
  flex-wrap: wrap !important;
}
@media (max-width: 768px) {
  .stack-mobile {
    flex-direction: column !important;
  }
  .stack-mobile > * {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .stack-mobile iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
  }
}

/* Full width on mobile — images, iframes, anything with fixed width */
.full-mobile,
.full-mobile img,
.full-mobile iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}
@media (min-width: 769px) {
  .full-mobile,
  .full-mobile img,
  .full-mobile iframe {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
  }
}

/* Padding utilities */
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }

/* Width utilities */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.max-w-full { max-width: 100% !important; }

/* Remove min-height on mobile */
@media (max-width: 768px) {
  .no-minh-mobile { min-height: auto !important; }
}