/*
Theme Name: Metisma Child
Template: hello-elementor
Version: 1.0.0
Description: Child theme of Hello Elementor for Metisma B.V. — carries the site's custom CSS reliably (the WordPress Customizer's Additional CSS is not output on this stack).
Author: Metisma
*/

/* =====================================================================
   Metisma custom CSS  ·  edit this file, re-zip or re-upload via SFTP
   This is the canonical home for all custom styling (replaces the
   WordPress Customizer Additional CSS, which does not render here).
   ===================================================================== */

/* ---------- design tokens ------------------------------------------- */
:root {
  --mx-navy-950:#070F1D; --mx-navy-900:#0A1628; --mx-navy-850:#0D1B30;
  --mx-navy-800:#101F36; --mx-navy-700:#1A2F4A; --mx-navy-600:#28415F;
  --mx-line:#22364F; --mx-ink:#EAF0F7; --mx-muted:#8FA3BC; --mx-faint:#71869F;
  --mx-amber:#F2A93B; --mx-amber-deep:#D98E1B;
  --mx-blue:#4A90E2; --mx-blue-line:#4F7CD7;
}

/* ---------- header --------------------------------------------------- */
.mx-header {
  position: sticky; top: 0; z-index: 99;
  background: rgba(10,22,40,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mx-line);
}
.mx-header .elementor-nav-menu a,
.mx-header .menu-item a {
  color: var(--mx-muted); font-weight: 600; font-size: 13.5px; letter-spacing: .03em;
}
.mx-header .menu-item a:hover { color: var(--mx-ink); }
.mx-header .menu-cta > a { color: var(--mx-amber) !important; }

/* ---------- hero ----------------------------------------------------- */
.mx-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(1100px 560px at 72% -12%, #13253E 0%, transparent 60%), var(--mx-navy-900);
}
.mx-hero > .e-con-inner, .mx-hero .elementor-container { position: relative; z-index: 1; }
.mx-h1-accent { color: var(--mx-blue); }

/* primary CTA */
body .mx-cta .elementor-button {
  background: var(--mx-amber); color: var(--mx-navy-950); font-weight: 700; border-radius: 8px;
  padding: 15px 26px; box-shadow: 0 4px 14px rgba(242,169,59,.18);
  transition: transform .18s, box-shadow .18s, background .18s;
}
body .mx-cta .elementor-button:hover {
  background: #F7B956; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(242,169,59,.24);
}
/* ghost CTA */
body .mx-ghost .elementor-button {
  background: none; border: 1px solid var(--mx-navy-600); color: var(--mx-ink);
  font-weight: 600; border-radius: 8px; padding: 14px 22px;
  transition: border-color .15s, background .15s;
}
body .mx-ghost .elementor-button:hover { border-color: var(--mx-blue-line); background: var(--mx-navy-800); }

/* ---------- stats strip ---------------------------------------------- */
.mx-stats { background: var(--mx-navy-850); border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }
body .mx-stats .elementor-counter-number-wrapper { color: var(--mx-ink); font-family: Montserrat, sans-serif; font-weight: 800; }
body .mx-stats .elementor-counter-number-suffix { color: var(--mx-amber); font-size: .55em; font-weight: 700; }
body .mx-stats .elementor-counter-title { color: var(--mx-muted); font-size: 13px; line-height: 1.5; text-align: left; }

/* ---------- service cards -------------------------------------------- */
.mx-card {
  background: var(--mx-navy-800); border: 1px solid var(--mx-line); border-radius: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mx-card:hover {
  transform: translateY(-6px); border-color: var(--mx-blue-line);
  box-shadow: 0 16px 40px rgba(7,15,29,.55);
}
.mx-card .mx-more { color: var(--mx-amber); font-weight: 700; font-size: 13px; display:inline-block; margin-top:16px; }

/* ---------- approach steps ------------------------------------------- */
.mx-stepnum {
  width: 29px; height: 29px; display: grid; place-items: center;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: var(--mx-blue);
}

/* approach connecting line — faint blue rail linking the four hex nodes.
   Requires the step ROW container to have class .mx-steps and position:relative
   (set Advanced > Position to Relative, or it inherits fine as a flex container). */
.mx-steps { position: relative; }
/* Step columns: keep node and text left-aligned (the look you approved).
   The connecting rail was dropped — the four hex-numbered steps stand alone. */
.mx-stepnum { margin-bottom: 16px; }
.mx-steps > * { position: relative; z-index: 1; }
@media (max-width: 1024px) { .mx-steps::before { display: none; } }

/* ---------- AI Act strip --------------------------------------------- */
.mx-act { border: 1px solid var(--mx-amber-deep); background: rgba(242,169,59,.06); border-radius: 16px; }


/* ---------- question-1 teaser (markup-only HTML widget: .mxt-*) -------- */
.mxt-box {
  background: linear-gradient(150deg, var(--mx-navy-800), var(--mx-navy-850));
  border: 1px solid var(--mx-line); border-radius: 16px; padding: 32px;
}
.mxt-tag { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mx-amber); margin: 0 0 12px; }
.mxt-q { font-size: 22px; font-weight: 700; color: var(--mx-ink); margin: 0 0 22px; line-height: 1.35; }
.mxt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mxt-opt, .mxt-opt span {
  color: var(--mx-ink) !important;   /* beat Hello/kit default link color */
}
.mxt-opt {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: var(--mx-navy-900); border: 1px solid var(--mx-line); border-radius: 10px;
  padding: 13px 15px; font-size: 13.5px; line-height: 1.45;
  transition: border-color .15s, background .15s, transform .15s;
}
.mxt-opt:hover { border-color: var(--mx-amber); background: var(--mx-navy-700); transform: translateX(3px); }
.mxt-opt .k {
  flex: 0 0 auto; width: 22px; height: 25px; display: grid; place-items: center;
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: var(--mx-navy-600); font-size: 11px; font-weight: 700; color: var(--mx-ink);
  transition: background .15s, color .15s;
}
.mxt-opt:hover .k { background: var(--mx-amber); color: var(--mx-navy-950) !important; }
.mxt-fine { font-size: 12px; color: var(--mx-faint); margin: 0; }
@media (max-width: 680px) { .mxt-opts { grid-template-columns: 1fr; } }

/* ---------- footer --------------------------------------------------- */
.mx-footer { background: var(--mx-navy-950); border-top: 1px solid var(--mx-line); }
.mx-footer, .mx-footer a { color: var(--mx-muted); font-size: 13px; }
.mx-footer a:hover { color: var(--mx-ink); }
.mx-fine { color: var(--mx-faint) !important; font-size: 11.5px !important; }