/*
Theme Name: Loikka Solutions
Theme URI: https://loikka.com
Author: Loikka Solutions
Author URI: https://loikka.com
Description: Modern dark tech theme for Loikka Solutions — Salesforce consulting with Finnish heart.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loikka-solutions
*/

/* =====================
   CSS CUSTOM PROPERTIES
   ===================== */
:root {
  --color-primary:   #053C3C;
  --color-secondary: #071F2E;
  --color-surface:   #0A2E2E;
  --color-accent:    #55F0EB;
  --color-highlight: #FFF000;
  --color-yellow:    #FFF000;
  --color-beige:     #E6C19B;
  --color-light:     #E1E1E1;
  --color-white:     #ffffff;
  --color-charcoal:  #2D2D2D;
}

/* =====================
   BASE
   ===================== */
html {
  overflow-x: hidden; /* Prevent horizontal scroll on iOS Safari */
}

body {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: 'Jost', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Epilogue', sans-serif;
  line-height: 1.15;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-highlight);
}

/* ── Inline text link hover effect (excludes buttons & nav) ── */
:is(p, li, td, figcaption) > a:not(.wp-block-button__link):not(.wp-element-button):not([class*="-btn"]):not([class*="-button"]) {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.2s ease,
              text-decoration-thickness 0.2s ease,
              background-color 0.2s ease,
              color 0.2s ease;
  border-radius: 2px;
}

:is(p, li, td, figcaption) > a:not(.wp-block-button__link):not(.wp-element-button):not([class*="-btn"]):not([class*="-button"]):hover {
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  background-color: rgba(85, 240, 235, 0.12);
}

/* =====================
   LAYOUT RESETS
   ===================== */

/* Kill ALL spacing between last content block and footer */
.wp-site-blocks > footer,
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .site-footer,
:where(.wp-site-blocks) > footer,
.wp-block-template-part.site-footer,
.wp-site-blocks > .wp-block-template-part {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Remove any bottom margin/padding on post-content wrapper */
.wp-site-blocks > .wp-block-post-content {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove bottom margin on the last block inside post content */
.wp-block-post-content > *:last-child,
.wp-block-post-content > .alignfull:last-child {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* =====================
   HEADER
   ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 60, 60, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(85, 240, 235, 0.15);
  transition: background 0.3s ease;
  width: 100%;
}

.site-header .wp-block-site-title a {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
  letter-spacing: -0.02em;
}

.site-header .wp-block-site-title a:hover {
  color: var(--color-accent) !important;
}

.site-header .wp-block-navigation a {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
  position: relative;
}

.site-header .wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.site-header .wp-block-navigation a:hover::after {
  width: 100%;
}

.site-header .wp-block-navigation a:hover {
  color: var(--color-white) !important;
}

.nav-cta > a {
  background: transparent !important;
  border: 1.5px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  padding: 0.35rem 1.1rem !important;
  border-radius: 4px !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.nav-cta .wp-block-navigation-item__label {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

.nav-cta > a:hover,
.nav-cta:hover .wp-block-navigation-item__label {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 16px rgba(85, 240, 235, 0.35) !important;
}

.nav-cta > a::after,
.nav-cta .wp-block-navigation-item__label::after {
  display: none !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--color-secondary) !important;
  border: 1px solid rgba(85, 240, 235, 0.2) !important;
  border-radius: 4px !important;
  padding: 0.5rem 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  min-width: 230px !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
  font-size: 0.85rem !important;
  padding: 0.45rem 1.2rem !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  color: var(--color-accent) !important;
  background: rgba(85, 240, 235, 0.07) !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a::after {
  display: none !important;
}

/* =====================
   HERO — HOMEPAGE
   ===================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(85, 240, 235, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(255, 240, 0, 0.03) 0%, transparent 45%);
  pointer-events: none;
}

.hero-eyebrow {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  margin-bottom: 1rem !important;
  padding-top: 72px !important;
  position: relative !important;
}

.hero-eyebrow::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 56px !important;
  background: var(--color-accent) !important;
  box-shadow: 0 0 14px rgba(85, 240, 235, 0.55) !important;
}

/* Data visualization panel */
.hero-data-viz {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
}

.hero-data-viz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(85, 240, 235, 0.72) 2px, transparent 2px),
    radial-gradient(circle, rgba(85, 240, 235, 0.32) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(85, 240, 235, 0.14) 1px, transparent 1px);
  background-size: 48px 48px, 72px 72px, 36px 36px;
  background-position: 0 0, 24px 24px, 12px 12px;
  animation: dataDrift 14s ease-in-out infinite alternate;
}

.hero-data-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(85, 240, 235, 0.07) 0%, transparent 65%);
  animation: pulseGlow 3.5s ease-in-out infinite;
}

@keyframes dataDrift {
  0%   { background-position: 0 0, 24px 24px, 12px 12px; }
  100% { background-position: 12px 10px, 36px 34px, 24px 22px; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* =====================
   HERO — PAGE LEVEL 1
   ===================== */
.page-hero-l1 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.page-hero-l1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(85, 240, 235, 0.05) 0%, transparent 55%);
  pointer-events: none;
}

/* =====================
   HERO — PAGE LEVEL 2
   ===================== */
.page-hero-l2 {
  min-height: 52vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
  overflow: hidden;
}

/* =====================
   HERO — PAGE LEVEL 3
   ===================== */
.page-hero-l3 {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  position: relative;
}

/* =====================
   HERO — ARCHIVE & POST
   ===================== */
.archive-hero,
.post-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
}

/* =====================
   SECTION SHARED
   ===================== */
.section-eyebrow {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  display: block;
  margin-bottom: 0.75rem !important;
}

/* =====================
   PAGE CONTENT AREAS (light background)
   ===================== */
.page-content-area,
.post-content-area,
.l3-content {
  background: #ffffff !important;
  color: var(--color-charcoal);
}

/* Inner body wrapper — constrains content to 900px centered, no inline padding so
   WordPress block-support !important injection doesn't interfere */
.l2-body-inner {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
  width: 100%;
}

/* Selectors for when .page-content-area wraps .wp-block-post-content (template-level) */
.page-content-area .wp-block-post-content,
.post-content-area .wp-block-post-content,
.l3-content .wp-block-post-content {
  color: var(--color-charcoal);
}

/* Headings — works both ways (class on template wrapper OR on a block inside post-content) */
.page-content-area h1,
.page-content-area h2,
.page-content-area h3,
.page-content-area h4,
.page-content-area .wp-block-post-content h1,
.page-content-area .wp-block-post-content h2,
.page-content-area .wp-block-post-content h3,
.page-content-area .wp-block-post-content h4,
.post-content-area .wp-block-post-content h1,
.post-content-area .wp-block-post-content h2,
.post-content-area .wp-block-post-content h3,
.post-content-area .wp-block-post-content h4,
.l3-content .wp-block-post-content h1,
.l3-content .wp-block-post-content h2,
.l3-content .wp-block-post-content h3 {
  color: var(--color-primary) !important;
  font-family: 'Epilogue', sans-serif;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Paragraphs */
.page-content-area p,
.page-content-area .wp-block-post-content p,
.post-content-area .wp-block-post-content p,
.l3-content .wp-block-post-content p {
  color: var(--color-charcoal) !important;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* Links */
.page-content-area a:not(.wp-block-button__link),
.page-content-area .wp-block-post-content a:not(.wp-block-button__link),
.post-content-area .wp-block-post-content a:not(.wp-block-button__link),
.l3-content .wp-block-post-content a:not(.wp-block-button__link) {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: text-underline-offset 0.2s ease,
              text-decoration-color 0.2s ease,
              background-color 0.2s ease,
              color 0.2s ease;
}

.page-content-area a:not(.wp-block-button__link):hover,
.page-content-area .wp-block-post-content a:not(.wp-block-button__link):hover,
.post-content-area .wp-block-post-content a:not(.wp-block-button__link):hover,
.l3-content .wp-block-post-content a:not(.wp-block-button__link):hover {
  color: var(--color-primary) !important;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  background-color: rgba(85, 240, 235, 0.15);
  padding: 0 2px;
  margin: 0 -2px;
}

/* Lists */
.page-content-area ul,
.page-content-area ol,
.page-content-area .wp-block-post-content ul,
.page-content-area .wp-block-post-content ol,
.post-content-area .wp-block-post-content ul,
.post-content-area .wp-block-post-content ol {
  color: var(--color-charcoal) !important;
  font-size: 1.05rem;
  line-height: 1.75;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* =====================
   YELLOW CTA SECTION — ensure dark text on yellow background
   ===================== */
.l2-cta-section h2,
.l2-cta-section h3,
.l2-cta-section p {
  color: var(--color-primary) !important;
}

/* =====================
   SERVICES SECTION
   ===================== */
.services-section {
  background: var(--color-surface) !important;
}

.service-card {
  border: 1px solid rgba(85, 240, 235, 0.18) !important;
  border-top: 3px solid var(--color-accent) !important;
  background: rgba(5, 60, 60, 0.55) !important;
  border-radius: 4px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 22px rgba(85, 240, 235, 0.13) !important;
  border-color: rgba(85, 240, 235, 0.45) !important;
}

/* =====================
   WHY LOIKKA SECTION
   ===================== */
.why-section {
  background: #ffffff !important;
  color: var(--color-charcoal) !important;
}

.why-section h2,
.why-section h3 {
  color: var(--color-primary) !important;
}

.why-section p {
  color: var(--color-charcoal) !important;
}

.why-stat {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}

.why-card {
  border-left: 3px solid var(--color-primary) !important;
  padding-left: 1.5rem !important;
}

.why-section .section-eyebrow {
  color: var(--color-primary) !important;
}

/* =====================
   TESTIMONIALS SECTION
   ===================== */
.testimonials-section {
  background: var(--color-secondary) !important;
}

.testimonial-card {
  border: 1px solid rgba(85, 240, 235, 0.14) !important;
  background: rgba(5, 60, 60, 0.48) !important;
  border-radius: 4px !important;
  padding: 2.25rem !important;
  position: relative !important;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  font-family: 'Epilogue', sans-serif;
  font-size: 5rem;
  color: var(--color-accent);
  opacity: 0.35;
  line-height: 1;
}

.testimonial-author {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(85, 240, 235, 0.18) !important;
  font-weight: 600 !important;
  color: var(--color-accent) !important;
}

/* =====================
   INSIGHTS SECTION
   ===================== */
.insights-section {
  background: var(--color-primary) !important;
}

.insight-card {
  border: 1px solid rgba(85, 240, 235, 0.14) !important;
  background: rgba(7, 31, 46, 0.5) !important;
  border-radius: 4px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.insight-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Tight inner spacing for card elements */
.insight-card .wp-block-post-title {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
}

.insight-card .wp-block-post-date {
  margin-top: 0 !important;
  margin-bottom: 0.6rem !important;
}

.insight-card .wp-block-post-excerpt,
.insight-card .wp-block-post-excerpt p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Wrapper: plain block with turquoise bottom rule */
.insight-category-tag,
.wp-block-post-terms {
  display: block !important;
  background: transparent !important;
  padding: 0 0 0.4rem 0 !important;
  border-radius: 0 !important;
  margin-bottom: 1.1rem !important;
  border-bottom: 1.5px solid rgba(85, 240, 235, 0.45) !important;
}

/* Only the <a> tag gets the teal pill styling */
.insight-category-tag a,
.wp-block-post-terms a {
  display: inline-block !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  background: var(--color-accent) !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  margin-bottom: 0 !important;
}

/* =====================
   CONTACT CTA SECTION
   ===================== */
.contact-cta-section {
  background: var(--color-highlight) !important;
}

.contact-cta-section h2 {
  color: var(--color-primary) !important;
}

.contact-cta-section p {
  color: rgba(5, 60, 60, 0.82) !important;
}

.contact-cta-section .wp-block-button__link {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: 4px !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.contact-cta-section .wp-block-button__link:hover {
  background: var(--color-secondary) !important;
  transform: translateY(-2px) !important;
}

/* =====================
   LEVEL 2 — SERVICE PAGE
   ===================== */
.l2-benefits-box {
  background: rgba(85, 240, 235, 0.08) !important;
  border: 1px solid rgba(85, 240, 235, 0.25) !important;
  border-radius: 4px !important;
}

.benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.benefits-list li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.benefits-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(85, 240, 235, 0.5);
}

.l2-process-section {
  background: var(--color-surface) !important;
}

.process-step {
  border-top: 2px solid rgba(85, 240, 235, 0.3) !important;
  background: transparent !important;
  padding-top: 1.25rem !important;
}

.process-number {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: rgba(85, 240, 235, 0.3) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1 !important;
}

/* =====================
   LEVEL 3 — BREADCRUMB
   ===================== */
.loikka-breadcrumb {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

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

.loikka-breadcrumb a:hover {
  color: var(--color-accent) !important;
}

.loikka-breadcrumb .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0.1rem;
}

.loikka-breadcrumb .breadcrumb-current {
  color: rgba(255, 255, 255, 0.85);
}

/* =====================
   LEVEL 3 — HERO SUBTITLE (from excerpt)
   ===================== */
.l3-hero-subtitle {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* =====================
   LEVEL 3 — SIDEBAR
   ===================== */
.l3-sidebar-col {
  border-left: 1px solid rgba(5, 60, 60, 0.08);
  padding-left: clamp(1.25rem, 5vw, 3rem) !important;
}

.l3-sidebar-inner {
  position: sticky !important;
  top: 5.5rem !important;
}

.l3-sidebar-box {
  background: #071F2E !important;
  border: 1px solid rgba(85, 240, 235, 0.15) !important;
  border-radius: 6px !important;
  margin-bottom: 0 !important;
}

/* =====================
   LEVEL 3 — SIBLING PAGES LIST
   ===================== */
.sibling-pages-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sibling-pages-list li {
  border-bottom: 1px solid rgba(5, 60, 60, 0.1);
}

.sibling-pages-list li:last-child {
  border-bottom: none;
}

.sibling-pages-list a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.9rem !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.sibling-pages-list a:hover {
  color: var(--color-accent) !important;
  padding-left: 0.4rem;
}

/* =====================
   LEVEL 3 — CONTENT AREA typography
   ===================== */
.l3-content .wp-block-post-content h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  font-weight: 700 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(5, 60, 60, 0.08);
}

.l3-content .wp-block-post-content h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--color-primary) !important;
}

/* ── Headings inside padded group boxes (cards, benefit panels, etc.)
   The box's own padding provides breathing room — reset the large
   flow-document margin-top that applies to headings in running text. ── */
.l3-content .wp-block-post-content .wp-block-group.has-background h2,
.l3-content .wp-block-post-content .wp-block-group.has-background h3,
.l3-content .wp-block-post-content .wp-block-group.has-background h4,
.page-content-area .wp-block-post-content .wp-block-group.has-background h2,
.page-content-area .wp-block-post-content .wp-block-group.has-background h3,
.page-content-area .wp-block-post-content .wp-block-group.has-background h4 {
  margin-top: 0 !important;
}

.l3-content .wp-block-post-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.l3-content .wp-block-post-content li {
  margin-bottom: 0.45rem;
  line-height: 1.65;
  color: var(--color-charcoal);
}

.l3-content .wp-block-post-content .wp-block-columns {
  gap: 1.5rem !important;
  margin-top: 1.5rem;
}

/* ── Restore WP colour-preset text colours inside l3/page content areas ──
   The broad h2/h3/p/li rules above use !important and override every
   element. These rules win back explicit colours set via WP preset classes
   (has-white-color, has-accent-color, etc.) so dark-background boxes inside
   page content stay legible. */
.l3-content .wp-block-post-content .has-white-color,
.l3-content .wp-block-post-content .has-white-color li,
.page-content-area .wp-block-post-content .has-white-color,
.page-content-area .wp-block-post-content .has-white-color li {
  color: #ffffff !important;
}
.l3-content .wp-block-post-content .has-accent-color,
.l3-content .wp-block-post-content .has-accent-color li,
.page-content-area .wp-block-post-content .has-accent-color,
.page-content-area .wp-block-post-content .has-accent-color li {
  color: #55F0EB !important;
}
.l3-content .wp-block-post-content .has-highlight-color,
.l3-content .wp-block-post-content .has-highlight-color li,
.page-content-area .wp-block-post-content .has-highlight-color,
.page-content-area .wp-block-post-content .has-highlight-color li {
  color: #FFF000 !important;
}

/* Process step numbers inside content */
.process-number-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 0.5rem;
  flex-shrink: 0;
  vertical-align: middle;
}

/* =====================
   AUTHOR CARD
   ===================== */
.author-card {
  background: rgba(7, 31, 46, 0.5) !important;
  border: 1px solid rgba(85, 240, 235, 0.18) !important;
  border-radius: 4px !important;
}

.author-card .wp-block-post-author {
  align-items: flex-start !important;
  gap: 1rem !important;
}

.author-card .wp-block-post-author__avatar img {
  border-radius: 50% !important;
  border: 2px solid var(--color-accent) !important;
}

.author-card .wp-block-post-author__name {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--color-white) !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
}

.author-card .wp-block-post-author__bio {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.55 !important;
  margin-top: 0.4rem !important;
}

/* =====================
   SIDEBAR RECENT POSTS
   ===================== */
.sidebar-post-item {
  border-bottom: 1px solid rgba(85, 240, 235, 0.1) !important;
}

.sidebar-post-item:last-child {
  border-bottom: none !important;
}

.sidebar-post-item .wp-block-post-title a {
  color: var(--color-white) !important;
  text-decoration: none !important;
  font-family: 'Epilogue', sans-serif;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  transition: color 0.2s ease;
  display: block;
}

.sidebar-post-item .wp-block-post-title a:hover {
  color: var(--color-accent) !important;
}

.sidebar-post-item .wp-block-post-date {
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 0.2rem;
  display: block;
}

/* =====================
   POST FEATURED IMAGE
   ===================== */
.wp-block-post-featured-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 4px;
}

/* =====================
   QUERY PAGINATION
   ===================== */
.wp-block-query-pagination {
  margin-top: 3rem;
  gap: 0.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers a {
  background: rgba(85, 240, 235, 0.1) !important;
  color: var(--color-accent) !important;
  border: 1px solid rgba(85, 240, 235, 0.2) !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  transition: background 0.2s ease !important;
}

.wp-block-query-pagination a:hover {
  background: rgba(85, 240, 235, 0.2) !important;
}

/* =====================
   BREADCRUMB
   ===================== */
.page-breadcrumb a {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
}

.page-breadcrumb a:hover {
  color: var(--color-accent) !important;
}

/* =====================
   FOOTER
   ===================== */
.site-footer {
  background: var(--color-secondary) !important;
  border-top: 1px solid rgba(85, 240, 235, 0.12);
}

.site-footer .wp-block-site-title a,
.site-footer a {
  color: rgba(255, 255, 255, 0.68) !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  color: var(--color-accent) !important;
}

.footer-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.75rem 0 0 0 !important;
}

.footer-nav-list li {
  margin-bottom: 0.4rem !important;
}

/* =====================
   EQUAL CARDS
   ===================== */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: flex-start;
}

/* =====================
   ANIMATIONS
   ===================== */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.7s ease forwards;
}

.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.35s; }
.fade-up:nth-child(4) { animation-delay: 0.5s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-32px);
  animation: slideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* =====================
   REDUCED MOTION
   ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 768px) {
  .hero-data-viz {
    display: none;
  }

  .hero-section {
    min-height: 90vh;
    padding-top: 1rem;
  }

  .page-hero-l1 { min-height: 55vh; }
  .page-hero-l2 { min-height: 48vh; }

  .why-stat {
    font-size: 2.25rem !important;
  }

  .testimonial-card {
    padding: 1.5rem !important;
  }

  .l3-sidebar-box,
  .author-card {
    position: static !important;
    margin-bottom: 2rem;
  }
}


/* PADDING FIX */
.hero-section,.services-section,.why-loikka-section,.testimonials-section,.insights-section,.cta-section,.archive-hero,.post-hero,.page-hero-l1,.page-hero-l2,.page-hero-l3,.page-content-area,.post-content-area,.l2-process-section,.contact-cta-section{padding-left:clamp(1.25rem,5vw,4rem)!important;padding-right:clamp(1.25rem,5vw,4rem)!important;box-sizing:border-box}
.hero-section .wp-block-column{padding-left:0!important}
.services-section .alignwide,.insights-section .alignwide,.why-loikka-section .alignwide,.testimonials-section .alignwide{padding-left:0!important;padding-right:0!important}
.page-content-area .wp-block-post-content,.post-content-area .wp-block-post-content,.l3-content .wp-block-post-content{max-width:720px;margin-left:auto;margin-right:auto}
/* END PADDING FIX */

/* VERTICAL PADDING FIX */
.services-section,.why-loikka-section,.testimonials-section,.insights-section{padding-top:clamp(3rem,7vw,6rem)!important;padding-bottom:clamp(3rem,7vw,6rem)!important}
.contact-cta-section{padding-top:clamp(2.5rem,5vw,4.5rem)!important;padding-bottom:clamp(2.5rem,5vw,4.5rem)!important}
/* END VERTICAL PADDING FIX */

/* LOGO TEXT */
.loikka-logo { font-family: 'Epilogue', sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: baseline; line-height: 1; }
.logo-name { color: #ffffff; }
.logo-dot  { color: #55F0EB; }
.loikka-logo:hover .logo-name { color: rgba(255,255,255,0.8); }
.loikka-logo:hover .logo-dot  { color: #55F0EB; }
/* END LOGO TEXT */


/* NAV RESPONSIVE FIX */

/* Tighten nav items at medium widths */
@media (max-width: 1280px) {
  .site-header .wp-block-navigation a {
    font-size: 0.8rem !important;
  }
  .site-header .wp-block-navigation {
    gap: 0.8rem !important;
  }
}

/* Nested sub-submenu: flip to left when near right edge so it never clips */
.wp-block-navigation__submenu-container
  .wp-block-navigation-item
  .wp-block-navigation__submenu-container {
  left: auto !important;
  right: 100% !important;
  top: 0 !important;
}

/* Hamburger button styling */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--color-white) !important;
  background: transparent !important;
  border: none !important;
  padding: 0.4rem !important;
  cursor: pointer !important;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: var(--color-white) !important;
  width: 24px !important;
  height: 24px !important;
}

/* Mobile overlay panel */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--color-secondary) !important;
  padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  color: var(--color-white) !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 1.1rem !important;
  padding: 0.6rem 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 1rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .nav-cta .wp-block-navigation-item__content {
  color: var(--color-accent) !important;
  border: none !important;
  background: transparent !important;
  padding: 0.6rem 0 !important;
}

/* END NAV RESPONSIVE FIX */


/* NAV BREAKPOINT FIX */

/*
 * WordPress nav JS overflow detection is unreliable when flex-wrap:nowrap
 * squeezes items instead of overflowing. Force hamburger via CSS breakpoint.
 */

/* Below 1100px: hide inline nav list, show hamburger button */
@media (max-width: 1100px) {
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* Above 1100px: hide hamburger, show inline nav */
@media (min-width: 1101px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .wp-block-navigation .wp-block-navigation__responsive-container {
    display: block !important;
  }
}

/* Mobile overlay: full-screen dark panel */
/* When the menu is open, remove backdrop-filter from the header so
   position:fixed works correctly on the overlay (backdrop-filter creates
   a new containing block that traps fixed descendants). */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  z-index: 9999 !important;
  background: var(--color-secondary) !important;
  padding: 5rem 2rem 2rem !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  flex-direction: column !important;
}

/* Close button inside overlay */
.wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1.25rem !important;
  color: var(--color-white) !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
}

/* Overlay nav items layout */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.9rem 0 !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
}

/* Submenu inside overlay: indented list */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 1rem !important;
  min-width: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container a {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 0.5rem 0 !important;
}

/* CTA inside overlay */
.wp-block-navigation__responsive-container.is-menu-open
  .nav-cta .wp-block-navigation-item__content {
  color: var(--color-accent) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .nav-cta > a {
  border: none !important;
  background: transparent !important;
  padding: 0.9rem 0 !important;
}

/* END NAV BREAKPOINT FIX */


/* ACCORDION SUBMENU IN MOBILE OVERLAY */

/* Parent item row: link + toggle button side by side */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Remove individual border we set before (now on parent) */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  border-bottom: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:not(.has-child) {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* The link takes all available width */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-item__content {
  flex: 1 !important;
  border-bottom: none !important;
}

/* Toggle button */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.6) !important;
  padding: 0.9rem 0.5rem !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  min-width: 2.5rem !important;
  z-index: 2 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle svg {
  display: none !important; /* hide WP default SVG, we use CSS arrow */
}

/* CSS chevron arrow via pseudo-element */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(255,255,255,0.6) !important;
  border-bottom: 2px solid rgba(255,255,255,0.6) !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.25s ease, border-color 0.2s ease !important;
}

/* Rotate chevron when open */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.is-open
  > .wp-block-navigation-submenu__toggle::after {
  transform: rotate(-135deg) translateY(-2px) !important;
  border-color: var(--color-accent) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.is-open
  > .wp-block-navigation-submenu__toggle {
  color: var(--color-accent) !important;
}

/* Submenu: hidden by default, full width, indented */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  display: none !important;
  flex-basis: 100% !important;
  flex-direction: column !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0.5rem 1.25rem !important;
  min-width: 0 !important;
}

/* Show submenu when parent is open */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.is-open
  > .wp-block-navigation__submenu-container {
  display: flex !important;
}

/* Submenu link style */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 0.5rem 0 !important;
  border-bottom: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  color: var(--color-accent) !important;
}

/* END ACCORDION SUBMENU */


/* ARROW POSITION FIX — keep toggle button on same row as link text */

/* The generic display:block on nav item content breaks the flex row.
   Override it for has-child items so link + arrow sit inline. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-item__content {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
}

/* Make sure the toggle button does not grow or shrink, stays right of text */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle {
  flex: 0 0 auto !important;
  align-self: center !important;
}

/* END ARROW POSITION FIX */


/* ARROW POSITION FIX 2 — absolute positioning, left-align overlay */

/* Left-align all overlay content (nav inherits justify-content:right otherwise) */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Each item: relative so we can absolute-position the toggle */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child {
  position: relative !important;
  display: block !important;
}

/* The link: full width, left-aligned, with right padding for the arrow */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child
  > .wp-block-navigation-item__content {
  display: block !important;
  flex: unset !important;
  padding-right: 2.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Toggle button: absolute, vertically centred on the link row */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 3.3rem !important;   /* matches the link padding + line-height */
  width: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: unset !important;
  align-self: unset !important;
}

/* END ARROW POSITION FIX 2 */


/* OVERLAY ITEMS RIGHT-ALIGNED */

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  text-align: right !important;
  align-items: flex-end !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  text-align: right !important;
}

/* Submenu items: also right-aligned */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  text-align: right !important;
}

/* END OVERLAY ITEMS RIGHT-ALIGNED */


/* =====================
   SERVICE CARDS — EDITABLE CONTENT AREAS
   ===================== */

/* Dark service card grid (reusable in any dark section) */
.sf-services-grid .wp-block-column {
  border: 1px solid rgba(85, 240, 235, 0.18) !important;
  border-top: 3px solid var(--color-accent) !important;
  background: rgba(5, 60, 60, 0.55) !important;
  border-radius: 4px !important;
  padding: 2rem !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.sf-services-grid .wp-block-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 22px rgba(85, 240, 235, 0.13) !important;
  border-color: rgba(85, 240, 235, 0.45) !important;
}

.sf-services-grid .wp-block-column h3 {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.75rem !important;
}

.sf-services-grid .wp-block-column p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.sf-services-grid .wp-block-column a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  display: inline-block !important;
  margin-top: 0.75rem !important;
  transition: color 0.2s ease !important;
}

.sf-services-grid .wp-block-column a:hover {
  color: #ffffff !important;
}

/* Card icon emoji or number */
.card-icon {
  display: inline-block !important;
  font-size: 1.8rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1 !important;
}

/* ── Salesforce page hero (smaller than homepage) ── */
.sf-hero {
  min-height: 55vh !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.sf-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 25% 45%, rgba(85, 240, 235, 0.06) 0%, transparent 55%) !important;
  pointer-events: none !important;
}

/* ── Services section (dark bg) ── */
.sf-services-section {
  background: var(--color-primary) !important;
  padding-top: clamp(3rem, 7vw, 6rem) !important;
  padding-bottom: clamp(3rem, 7vw, 6rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
}

/* ── Intro section (white bg) ── */
.sf-intro-section {
  background: #ffffff !important;
  padding-top: clamp(3rem, 7vw, 5rem) !important;
  padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.sf-intro-section h2,
.sf-intro-section h3 {
  color: var(--color-primary) !important;
}

.sf-intro-section p {
  color: var(--color-charcoal) !important;
}

.sf-intro-section .section-eyebrow {
  color: var(--color-primary) !important;
}

/* ── Intro section dark variant (blue bg) ── */
.sf-intro-section-dark {
  background: #071F2E !important;
  padding-top: clamp(3rem, 7vw, 5rem) !important;
  padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.sf-intro-section-dark h2,
.sf-intro-section-dark h3 {
  color: #ffffff !important;
}

.sf-intro-section-dark p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.sf-intro-section-dark .section-eyebrow {
  color: #55F0EB !important;
}

/* ── Products section (slightly darker dark) ── */
.sf-products-section {
  background: var(--color-secondary) !important;
  padding-top: clamp(3rem, 7vw, 6rem) !important;
  padding-bottom: clamp(3rem, 7vw, 6rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* ── Yellow CTA banner (reusable) ── */
.sf-cta-section {
  background: var(--color-yellow) !important;
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

.sf-cta-section h2 {
  color: var(--color-primary) !important;
}

.sf-cta-section p {
  color: var(--color-primary) !important;
  opacity: 0.85 !important;
}

/* ── Stats row ── */
.sf-stats {
  gap: 2rem !important;
}

.sf-stats .wp-block-column {
  text-align: center !important;
}

.sf-stat-number {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 2.75rem !important;
  font-weight: 800 !important;
  color: var(--color-accent) !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Responsive: stack cards on smaller screens ── */
@media (max-width: 768px) {
  .sf-services-grid .wp-block-columns {
    flex-direction: column !important;
  }
}


/* =====================
   HOME INSIGHTS — DYNAMIC QUERY LOOP
   ===================== */

/* 3-column grid (matches old equal-cards) */
.home-insights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .home-insights-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .home-insights-grid { grid-template-columns: 1fr !important; }
}

/* Each <li> is a flex column so the card stretches */
.home-insights-grid > li {
  display: flex !important;
  flex-direction: column !important;
}

.home-insights-grid > li > .wp-block-group.insight-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Post title link */
.home-insights-grid .wp-block-post-title {
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
}
.home-insights-grid .wp-block-post-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.home-insights-grid .wp-block-post-title a:hover {
  color: var(--color-accent) !important;
}

/* Post excerpt */
.home-insights-grid .wp-block-post-excerpt {
  flex: 1 !important;
  margin-bottom: 0 !important;
}
.home-insights-grid .wp-block-post-excerpt p,
.home-insights-grid .wp-block-post-excerpt__excerpt {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.home-insights-grid .wp-block-post-excerpt__more-link {
  display: none !important;
}

/* Post terms — category tag */
.home-insights-grid .wp-block-post-terms {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  display: block !important;
  padding: 0 0 0.25rem 0 !important;
  margin-bottom: 1.1rem !important;
  border-bottom: 1.5px solid rgba(85, 240, 235, 0.45) !important;
}
.home-insights-grid .wp-block-post-terms a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
}

/* Read more — cyan outline button style */
.home-insights-grid .wp-block-read-more.insight-read-more {
  color: #55F0EB !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: 1px solid rgba(85, 240, 235, 0.4) !important;
  border-radius: 4px !important;
  padding: 0.4rem 1rem !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.home-insights-grid .wp-block-read-more.insight-read-more:hover {
  background: rgba(85, 240, 235, 0.1) !important;
  color: #ffffff !important;
}


/* FIX — insights query loop: category tag visible on dark background */
.insights-section .wp-block-query .wp-block-post-terms,
.insights-section .wp-block-query .wp-block-post-terms a,
.home-insights-grid .wp-block-post-terms,
.home-insights-grid .wp-block-post-terms a {
  color: var(--color-accent) !important;
  background: transparent !important;
}


/* =====================
   INSIGHT CARD LAYOUT FIX
   ===================== */

/* Each <li> stretches to equal height in the grid row */
.home-insights-grid > li {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;          /* prevents grid blowout */
}

/* Card fills the <li> height and flows as a flex column */
.home-insights-grid > li .insight-card,
.home-insights-grid > li .wp-block-group.insight-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* Excerpt grows to fill remaining space, pushing button to bottom */
.home-insights-grid .wp-block-post-excerpt {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}

/* Read-more: FIXED 1.5rem gap (overrides the earlier margin-top:auto rule) */
.home-insights-grid .wp-block-read-more.insight-read-more {
  margin-top: 1.5rem !important;    /* replaces auto — works in flex and flow */
  align-self: flex-start !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
}


/* Remove gap between why-loikka (white) and testimonials (dark) sections */
.why-section.wp-block-group,
.why-loikka-section.wp-block-group {
  margin-bottom: 0 !important;
}
.testimonials-section.wp-block-group {
  margin-top: 0 !important;
}

/* Kill block-gap between why-loikka and testimonials */
.why-section.wp-block-group + .testimonials-section.wp-block-group,
.testimonials-section.wp-block-group {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.why-section.wp-block-group {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

/* Remove gap between hero and services section */
.hero-section.wp-block-group {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}
.services-section.wp-block-group {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Zero block-gap between all full-width homepage sections */
.hero-section.wp-block-group,
.services-section.wp-block-group,
.why-section.wp-block-group,
.why-loikka-section.wp-block-group,
.testimonials-section.wp-block-group,
.insights-section.wp-block-group,
.contact-cta-section.wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Remove gap between site header and first content section */
.wp-block-post-content {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
}

/* Also zero the first direct child block inside post-content */
.wp-block-post-content > .wp-block-group:first-child,
.wp-block-post-content > *:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* =====================================================================
   COVER BLOCK HEROES — support for wp:cover versions of hero sections
   ===================================================================== */

/* Extend hero-section CSS to cover block variant */
.hero-section.wp-block-cover {
  min-height: 100vh !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Extend sf-hero CSS to cover block variant */
.sf-hero.wp-block-cover {
  min-height: 55vh !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Hero inner padding — left/right breathing room */
.sf-hero.wp-block-cover .wp-block-cover__inner-container .wp-block-group {
  padding-left: clamp(1.5rem, 5vw, 4rem) !important;
  padding-right: clamp(1.5rem, 5vw, 4rem) !important;
}

/* Remove gap before cover block hero (same as wp-block-group) */
.wp-block-post-content > .wp-block-cover:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Cover inner-container: full width so aligned-wide columns work */
.hero-section.wp-block-cover .wp-block-cover__inner-container,
.sf-hero.wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* =====================================================================
   SITE LOGO BLOCK (header + footer)
   ===================================================================== */

.wp-block-site-logo.loikka-site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Logo image: let width drive height naturally (SVG viewBox is ~8.6:1 wide) */
.wp-block-site-logo.loikka-site-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
}
.wp-block-site-logo.loikka-site-logo a {
  display: block;
  line-height: 0;
}

/* Mobile: let the header logo shrink to fit the screen */
@media (max-width: 600px) {
  .wp-block-site-logo.loikka-site-logo {
    flex-shrink: 1;
    min-width: 0;
    max-width: 60vw;
  }
  .wp-block-site-logo.loikka-site-logo img {
    max-width: 100%;
  }
}

/* Footer logo – slightly smaller */
.wp-block-site-logo.footer-logo {
  margin-bottom: 0.75rem;
}
.wp-block-site-logo.footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
  opacity: 0.85;
}

/* =====================================================================
   FOOTER SITEMAP NAV  ([loikka_footer_nav] shortcode)
   ===================================================================== */

/* Grid container: auto-fill columns, min 140 px each */
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 2rem 1.5rem;
  width: 100%;
}

/* Column header = top-level nav link */
.footer-sitemap__heading {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none !important;
  margin-bottom: 0.65rem;
  transition: color 0.2s ease;
}

.footer-sitemap__heading:hover {
  color: var(--color-accent) !important;
}

/* Sub-list */
.footer-sitemap__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-sitemap__list a {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.68) !important;
  text-decoration: none !important;
  line-height: 1.5;
  transition: color 0.18s ease;
}

.footer-sitemap__list a:hover {
  color: var(--color-accent) !important;
}

/* =====================================================================
   SHORTCODE: [loikka_year] in copyright paragraph
   ===================================================================== */
/* (no extra CSS needed — just use in footer.html as text) */

/* =====================================================================
   SHORTCODE: [loikka_child_pages] — dynamic service card grid
   ===================================================================== */

.loikka-child-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.loikka-child-card {
  background: rgba(5, 60, 60, 0.55);
  border: 1px solid rgba(85, 240, 235, 0.18);
  border-top: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.loikka-child-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 22px rgba(85, 240, 235, 0.13);
  border-color: rgba(85, 240, 235, 0.45);
}

.loikka-child-card h3 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.loikka-child-card h3 a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.loikka-child-card h3 a:hover {
  color: var(--color-accent) !important;
}

.loikka-child-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  flex: 1;
}

.loikka-child-card__link {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  align-self: flex-start;
}

.loikka-child-card__link:hover {
  color: #ffffff !important;
}



/* =====================
   TÖIHIN PAGE
   ===================== */

/* Hero gradient (reuses page-hero-l2 base, adds override) */
.toihin-hero {
  background: linear-gradient(135deg, #053C3C 0%, #0c3d5c 100%) !important;
}

/* Group photo placeholder */
.toihin-group-photo {
  overflow: hidden;
}

.toihin-group-photo .wp-block-cover__background {
  background-color: #cddede !important;
}

/* Culture cards */
.culture-card {
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.culture-card:hover {
  box-shadow: 0 6px 24px rgba(5, 60, 60, 0.1) !important;
  transform: translateY(-2px);
}

/* Testimonial cards */
.testimonial-card {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 100%;
}

.testimonial-quote-mark {
  font-family: Georgia, serif !important;
  line-height: 1 !important;
  display: block;
}

/* Open position items */
.open-position-item {
  transition: box-shadow 0.2s ease;
}

.open-position-item:hover {
  box-shadow: 0 4px 16px rgba(5, 60, 60, 0.1) !important;
}


/* Remove WP's default block-gap between full-width sections on the Töihin page */
.page-template-page-toihin .wp-block-post-content {
  --wp--style--block-gap: 0px;
}
.page-template-page-toihin .wp-block-post-content > .wp-block-group {
  margin-block-start: 0 !important;
}

/* =====================
   404 PAGE
   ===================== */

.error-404-hero {
  min-height: 60vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-404-hero .wp-block-group.alignwide {
  width: 100%;
}

.error-404-nav {
  /* section gap fix */
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.error-404-card {
  height: 100%;
  box-shadow: 0 2px 12px rgba(5,60,60,0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.error-404-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(5,60,60,0.12);
}

/* =====================
   MEISTÄ PAGE
   ===================== */

/* Stats bar dividers */
.meista-stats-bar .wp-block-column + .wp-block-column .meista-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* "Me…" bullet items */
.me-item {
  border-left: 3px solid #55F0EB !important;
}

/* Team cards */
.team-card {
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(5, 60, 60, 0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.team-card:hover {
  box-shadow: 0 8px 28px rgba(5, 60, 60, 0.13) !important;
  transform: translateY(-3px);
}

.team-card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Yhteydenotto page ─────────────────────────────────────────────────────── */
.yhtc-eyebrow {
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #55F0EB !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
}
.yhtc-hero-h1 {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}
.yhtc-hero-body {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.yhtc-section-h2 {
  color: #053C3C !important;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 2.5rem !important;
}
.yhtc-map-h2 {
  color: #053C3C !important;
  font-size: clamp(1.6rem, 3vw, 2.1rem) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 2.25rem !important;
}
.yhtc-address {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1d2327 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.yhtc-address-email {
  font-size: 0.97rem !important;
  line-height: 1.7 !important;
  color: #1d2327 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
}
.yhtc-address-hint {
  font-size: 0.88rem !important;
  color: #888 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
}
.yhtc-address a,
.yhtc-address-email a {
  color: #053C3C !important;
  text-decoration: underline !important;
}
/* Remove WP's default block-gap between full-width sections on this page */
.page-template-page-yhteydenotto .wp-block-post-content {
  --wp--style--block-gap: 0px;
}
.page-template-page-yhteydenotto .wp-block-post-content > .wp-block-group {
  margin-block-start: 0 !important;
}

/* Collapse bottom padding when no contacts are selected yet */
.yhtc-contacts-section:not(:has(.loikka-contacts-grid)) {
  padding-bottom: 0 !important;
}
.yhtc-map-columns { align-items: center !important; gap: clamp(2rem, 5vw, 4rem) !important; }

/* ── Contact card inside the l3 sidebar ─────────────────────────────────────── */
/* Flush against the sidebar — no gap, matches the box padding */
.l3-sidebar-inner > .wp-block-shortcode {
  margin: 0;
  padding: 0;
}
.l3-sidebar-inner .loikka-contact-sidebar {
  background: #0d3535;
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  text-align: left;
}
.l3-sidebar-inner .loikka-contact-sidebar__photo {
  width: 56px;
  height: 56px;
  margin: 0 0 0.75rem;
}
.l3-sidebar-inner .loikka-contact-sidebar__photo img {
  width: 56px;
  height: 56px;
}
.l3-sidebar-inner .loikka-contact-sidebar__name {
  text-align: left;
  font-size: 0.97rem;
  margin: 0 0 0.15rem;
}
.l3-sidebar-inner .loikka-contact-sidebar__job {
  text-align: left;
  font-size: 0.82rem;
}
.l3-sidebar-inner .loikka-contact-sidebar__links {
  align-items: flex-start;
  margin-top: 0.85rem;
  gap: 0.45rem;
}
.l3-sidebar-inner .loikka-contact-sidebar__links a {
  font-size: 0.82rem;
}
.wp-block-button.loikka-cta-primary .wp-block-button__link {
  background-color: #55F0EB !important;
  color: #053C3C !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.9rem 2.2rem !important;
  border-radius: 6px !important;
}

/* =====================
   L3 CTA BOX (shortcode-rendered, editable per page)
   ===================== */
.l3-cta-box {
  background: #071F2E;
  border: 1px solid rgba(85, 240, 235, 0.15);
  border-radius: 6px;
  padding: 1.75rem;
  margin: 0;
}

.l3-cta-box > p:first-child,
.l3-cta-box__heading {
  color: #55F0EB !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
}

.l3-cta-box__body {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
}

.l3-cta-box__btn {
  display: inline-block;
  background-color: #FFF000;
  color: #053C3C !important;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none !important;
  line-height: 1;
  transition: background-color 0.18s ease;
}

.l3-cta-box__btn:hover {
  background-color: #e6d800;
  color: #053C3C !important;
}

/* =====================
   BLOG POST AUTHOR (shortcode-rendered)
   ===================== */

/* Full author card — sidebar */
.loikka-post-author {
  background: rgba(7, 31, 46, 0.5);
  border: 1px solid rgba(85, 240, 235, 0.18);
  border-radius: 4px;
  padding: 1.75rem;
  margin-bottom: 2rem;
}

.loikka-post-author__eyebrow {
  font-size: 0.875rem !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.loikka-post-author__inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.loikka-post-author__photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-accent);
}

.loikka-post-author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.loikka-post-author__name {
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--color-white) !important;
  margin-top: 0 !important;
  margin-bottom: 0.15rem !important;
}

.loikka-post-author__job {
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.loikka-post-author__bio {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.55 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}

.loikka-post-author__actions {
  margin-top: 0.75rem;
}

.loikka-post-author__actions p {
  display: none;
}

.loikka-post-author__cta {
  display: inline-block;
  margin-top: 0;
  background-color: #55F0EB;
  color: #053C3C !important;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background-color 0.18s ease;
}

.loikka-post-author__cta:hover {
  background-color: #3dd6d1;
  color: #053C3C !important;
}

/* Mini inline author — hero */
.loikka-post-author-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.loikka-post-author-mini__photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.loikka-post-author-mini__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.loikka-post-author-mini__name {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Post author — LinkedIn link */
.loikka-post-author__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: 0.5rem;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.loikka-post-author__linkedin:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Responsive YouTube embed ──────────────────────────────────────────────── */
.loikka-video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  margin: 0 0 2rem;
}

.loikka-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Resource listing (Oppaat / Webinaarit) ────────────────────────────────── */
.resource-listing {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.resource-listing__empty {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}

.resource-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(7, 31, 46, 0.5);
  border: 1px solid rgba(85, 240, 235, 0.14);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.resource-card__image {
  flex-shrink: 0;
  width: 160px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.resource-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.resource-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(85, 240, 235, 0.08);
}

.resource-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  gap: 0.4rem;
}

.resource-card__title {
  font-family: 'Epilogue', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 !important;
  line-height: 1.35;
}

.resource-card__excerpt {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 !important;
  line-height: 1.55;
}

.resource-card__cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 0.35rem;
}

@media (max-width: 600px) {
  .resource-card {
    flex-direction: column;
  }
  .resource-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ── Pagination — FSE query block + resource listing shortcode ─────────────── */

/* Shared pagination container */
.wp-block-query-pagination,
.resource-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 3rem;
}

/* All page links and spans */
.wp-block-query-pagination a,
.wp-block-query-pagination span,
.resource-pagination a,
.resource-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Inactive page numbers */
.wp-block-query-pagination a,
.resource-pagination a {
  background: rgba(85, 240, 235, 0.08);
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(85, 240, 235, 0.18);
}

.wp-block-query-pagination a:hover,
.resource-pagination a:hover {
  background: rgba(85, 240, 235, 0.18);
  color: #ffffff !important;
}

/* Active / current page */
.wp-block-query-pagination .current,
.wp-block-query-pagination span.current,
.resource-pagination .current {
  background: var(--color-accent);
  color: var(--color-primary) !important;
  border: 1px solid var(--color-accent);
}

/* Prev / Next labels */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  padding: 0 0.5rem;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
  color: var(--color-accent) !important;
}

/* ─── Language Switcher ─────────────────────────────────────── */
.loikka-lang-switcher,
.wpml-ls-legacy-dropdown,
.wpml-ls-statics-footer {
    font-size: 0.8rem;
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.loikka-lang-switcher a,
.wpml-ls a {
    color: var(--color-white) !important;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.loikka-lang-switcher a:hover,
.wpml-ls a:hover {
    opacity: 1;
}

.wpml-ls-legacy-dropdown .wpml-ls-current-language > a {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px;
    padding: 0.3rem 0.6rem !important;
    opacity: 1 !important;
    color: var(--color-white) !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
    background: var(--color-dark) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 4px;
    min-width: 80px;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
    padding: 0.4rem 0.6rem !important;
}

/* ─── Language Switcher (shortcode) ─────────────────────────── */
.loikka-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.loikka-lang-switcher__item {
    color: rgba(255,255,255,0.55) !important;
    text-decoration: none !important;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.loikka-lang-switcher__item:hover {
    color: var(--color-white) !important;
}

.loikka-lang-switcher__item--active {
    color: var(--color-white) !important;
    background: rgba(255,255,255,0.12);
}

/* =====================
   BLOG HIGHLIGHT BLOCK
   ===================== */
.blog-hilight,
p.blog-hilight,
.entry-content p.blog-hilight,
.wp-block-post-content p.blog-hilight {
    position: relative;
    font-size: 1.18rem !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
    color: var(--color-accent) !important;
    background: rgba(85, 240, 235, 0.07) !important;
    border-left: 3px solid var(--color-accent) !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 1.1rem 1.5rem 1.1rem 1.5rem !important;
    margin: 2rem 0 !important;
}

.blog-hilight::before,
p.blog-hilight::before {
    content: '\201C';
    position: absolute;
    top: -0.15em;
    left: 0.35rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.35;
    font-family: Georgia, serif;
    pointer-events: none;
}

/* =====================
   ASIAKASTARINA CLIENT CARD
   ===================== */
.loikka-post-client {
    background: var(--color-primary, #053C3C) !important;
    color: #fff;
    border-radius: 8px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.loikka-post-client__eyebrow {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent, #55F0EB) !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

.loikka-post-client__logo {
    background: #fff;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

.loikka-post-client__logo img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.loikka-post-client__name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-accent, #55F0EB) !important;
    margin-bottom: 0.75rem !important;
    text-align: center;
}

.loikka-post-client__desc {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.8) !important;
    margin-bottom: 1.25rem !important;
}

.loikka-post-client__cta a {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent, #55F0EB);
    text-decoration: none;
    transition: opacity 0.15s;
}

.loikka-post-client__cta a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Page 478 (Etusivu Kuva): reduce gap between services-section and dark blue section */
.page-id-478 .services-section {
  padding-bottom: 2rem !important;
}

/* Equal-height step cards in why-section */
.why-section .wp-block-columns {
  align-items: stretch !important;
}
.why-section .wp-block-column > .wp-block-group.why-card {
  height: 100%;
  box-sizing: border-box;
}

/* Equal-height insight cards, all starting from the same top line */
.home-insights-grid {
  align-items: stretch !important;
}
.home-insights-grid > li {
  margin-top: 0 !important;
  align-self: stretch !important;
}
.home-insights-grid > li > .wp-block-group.insight-card {
  height: 100% !important;
  justify-content: flex-start !important;
}

/* =====================
   GLOBAL BUTTON HOVERS
   ===================== */

/* Base transition on all buttons */
.wp-block-button__link {
  transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:visited {
  text-decoration: none !important;
}

/* Solid dark/teal buttons → lighten slightly + lift */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
}

/* Yellow buttons → keep yellow, just lift + slight darken */
.wp-block-button__link[style*="FFF000"]:hover,
.wp-block-button__link[style*="fff000"]:hover {
  filter: brightness(0.92) !important;
  transform: translateY(-2px) !important;
}

/* Outline buttons → fill with accent colour on hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-accent) !important;
  transform: translateY(-2px) !important;
}

/* Needs-nav section: pill buttons fill on hover */
.needs-nav-section .wp-block-button__link:hover {
  background-color: rgba(85,240,235,0.15) !important;
  border-color: #55F0EB !important;
  transform: none !important;
}

/* =====================
   SF PARTNER SECTION
   ===================== */
.sf-partner-section {
  background: #071F2E !important;
  padding-top: clamp(3rem, 7vw, 5rem) !important;
  padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  padding-left: clamp(1.25rem, 5vw, 4rem) !important;
  padding-right: clamp(1.25rem, 5vw, 4rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.sf-partner-section .alignwide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sf-partner-section .section-eyebrow {
  color: #55F0EB !important;
}



/* ── Secondary (ghost) CTA button on yellow contact section ── */
.contact-cta-section .wp-block-button.is-secondary-cta .wp-block-button__link {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  font-weight: 600 !important;
}
.contact-cta-section .wp-block-button.is-secondary-cta .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px) !important;
}