/*
Theme Name: Miduni (fixed)
Theme URI: https://miduni.com
Author: miduni GmbH
Author URI: https://miduni.com
Description: Custom WordPress theme for the approved Miduni consulting website. Fixed SVGs, CTA color, and responsive tweaks.
Version: 1.0.1
Text Domain: miduni
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  color-scheme: light;
  font-family: Inter, Geist, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-primary: #0f5c64;
  --color-primary-focus: #14727b;
  --color-primary-on-dark: #ffffff;
  --color-on-primary: #ffffff;
  --color-canvas: #ffffff;
  --color-canvas-soft: #f8f8f1;
  --color-surface-panel-1: #0d2a33;
  --color-surface-panel-3: #0f3b45;
  --color-ink: #1d1d1f;
  --color-ink-muted-80: rgba(29,29,31,0.8);
  --color-ink-muted-48: rgba(29,29,31,0.48);
  --color-hairline: rgba(29,29,31,0.08);
  --color-divider-soft: rgba(29,29,31,0.12);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-image: 0 18px 50px rgba(11, 36, 52, 0.12);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, button, input, textarea, select {
  font-family: inherit;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, .button, input[type="submit"] { font: inherit; }

.topbar { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--color-hairline); }
.topbar nav { max-width: 1200px; margin: 0 auto; padding: 0 40px; height: 76px; display: flex; align-items: center; justify-content: space-between; }
.topbar .brand { font-size: 23px; font-weight: 600; letter-spacing: -0.5px; }
.topbar .main-navigation { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }

.topbar .main-navigation .miduni-menu { display: flex; gap: 24px; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar .main-navigation .miduni-menu li { margin: 0; }

.topbar .main-navigation a { position: relative; font-size: 15px; letter-spacing: -0.1px; color: var(--color-ink-muted-80); transition: color 140ms var(--ease-standard); }
.topbar .main-navigation a:hover, .topbar .main-navigation .current-menu-item > a { color: var(--color-ink); }
.topbar .main-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-standard); }
.topbar .main-navigation .current-menu-item > a::after, .topbar .main-navigation a:hover::after { transform: scaleX(1); }

.topbar .cta-button { background: var(--color-primary); color: #ffffff !important; border: none; border-radius: 12px; padding: 11px 20px; cursor: pointer; transition: background 140ms var(--ease-standard); }
.topbar .cta-button:hover { background: var(--color-primary-focus); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container-tight { max-width: 1040px; margin: 0 auto; padding: 0 40px; }
.section-label { display: block; margin-bottom: 18px; font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-muted-80); }

.k-hero { font-size: 56px; line-height: 1.07; letter-spacing: -0.56px; font-weight: 600; margin: 0; }
.k-display-lg { font-size: 40px; line-height: 1.1; letter-spacing: -0.2px; font-weight: 600; margin: 0; }
.k-display-md { font-size: 34px; line-height: 1.2; letter-spacing: -0.34px; font-weight: 600; margin: 0; }
.k-lead { font-size: 28px; line-height: 1.22; letter-spacing: -0.14px; font-weight: 400; }
.k-lead-airy { font-size: 24px; line-height: 1.5; font-weight: 300; }
.k-body-strong { font-size: 17px; font-weight: 600; }
.k-body { font-size: 17px; }
.k-caption { font-size: 14px; }

.btn { border: none; cursor: pointer; font-weight: 600; letter-spacing: -0.1px; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-radius: 12px; padding: 12px 24px; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-focus); }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 12px; padding: 12px 24px; }
.btn-secondary:hover, .btn-secondary:focus-visible { background: rgba(15,92,100,0.08); }

.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
.splitscreen { display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: start; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card-panel, .contact-panel, .motif-panel, .industry-card { background: var(--color-canvas); border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); }
.card-panel { padding: 26px; }
.industry-card { padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; color: var(--color-ink-muted-48); transition: border-color 220ms var(--ease-standard), color 220ms var(--ease-standard); }
.industry-card:hover { border-color: var(--color-primary); color: var(--color-primary); }

.motif-panel { position: relative; overflow: hidden; padding: 24px; min-height: 380px; background: var(--color-canvas-soft); }
.motif-panel svg { width: 100%; height: 100%; display:block; }
.hero-data-viz { position: relative; overflow: hidden; min-height: 380px; background: var(--color-surface-panel-3); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); }
.hero-data-viz svg { width: 100%; height: 100%; display:block; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.viz-draw { stroke-dasharray: var(--len, 520); stroke-dashoffset: var(--len, 520); animation: drawLine 1s ease-out 0.3s forwards; }
.viz-flow { stroke-dasharray: 8 8; stroke-dashoffset: 1000; animation: revealLine 1s ease-out 0.9s forwards; }
.viz-rise,
.viz-pulse { opacity: 0; transform: translateY(12px); animation: riseIn 0.8s ease-out forwards; }
.viz-rise { animation-delay: 0.7s; }
.viz-pulse { animation-delay: 0.9s; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes revealLine {
  to { stroke-dashoffset: 0; }
}
@keyframes riseIn {
  to { opacity: 1; transform: none; }
}
.motif-label { position: absolute; bottom: 16px; left: 22px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted-48); }

.service-card { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--color-ink); background: transparent; text-align: left; cursor: pointer; }
.svc-link { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 7px; transition: gap 160ms var(--ease-standard); }

.eng-block { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.step-number { width: 46px; height: 46px; border-radius: var(--radius-full); border: 1px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }

.process-step { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding-bottom: 36px; }
.process-step:last-child { padding-bottom: 0; }
.process-step .step-index { width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--color-primary); background: var(--color-canvas); }

.pulled-quote { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: 27px; line-height: 1.4; letter-spacing: -0.2px; color: var(--color-ink); }
.pulled-quote + .attribution { margin-top: 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-muted-48); }

.contact-panel { padding: 44px 40px; }
.mi-field { display: flex; flex-direction: column; gap: 8px; }
.mi-field label { font-size: 14px; font-weight: 600; letter-spacing: -0.12px; color: var(--color-ink); }
.mi-field input, .mi-field textarea { font-size: 16px; color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); padding: 13px 15px; outline: none; }
.mi-field textarea { min-height: 132px; resize: vertical; }
.mi-field input:focus, .mi-field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,92,100,0.12); }

.error-text { font-size: 13px; color: #c0392b; font-weight: 500; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; align-items: start; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 11px; }
.footer-menu { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-menu li { margin: 0; }
.footer-links a, .footer-contact a, .footer-contact span { font-size: 14px; color: var(--color-ink-muted-80); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--color-divider-soft); }
.footer-bottom a { font-size: 12px; color: var(--color-ink-muted-48); }
.footer-bottom span { font-size: 12px; color: var(--color-ink-muted-48); }

.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 760px; margin: 0 auto; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-image); padding: 20px 22px; }
.cookie-banner p { margin: 0; font-size: 14px; color: var(--color-ink-muted-80); }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .topbar nav, .container, .container-tight { padding: 0 22px; }
  .topbar .main-navigation { gap: 16px; }

  .hero-grid, .splitscreen, .two-col, .grid-3, .grid-4, .footer-grid { grid-template-columns: 1fr; }

  .topbar nav { height: auto; padding: 18px 22px; }

  /* Mobile hero spacing tweak to avoid cramped layout */
  .hero-grid { padding: 60px 0; }
}