/* Mijn Hartritme / Mon Rythme Cardiaque – site style (replaces the Enfold theme) */
:root {
  --red: #b54444;
  --red-dark: #a43333;
  --red-deep: #b00606;
  --red-socket: #8a0404;
  --text: #555;
  --heading: #222;
  --line: #e1e1e1;
  --soft: #f8f8f8;
  --wrap: 1140px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.7 var(--font); color: var(--text); background: #fff; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--red); }
a:hover { color: var(--red-deep); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 99; background: #fff; padding: 8px 12px; }

/* ---------- header ---------- */
.logo-bar { text-align: center; padding: 6px 20px; background: #fff; }
.logo img { height: 66px; width: auto; display: inline-block; vertical-align: middle; }
.nav-bar { background: var(--red); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.nav-inner { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.langs { display: flex; gap: 2px; }
.langs a { display: flex; align-items: center; padding: 8px 10px; opacity: .65; }
.langs a[aria-current], .langs a:hover { opacity: 1; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.menu > li { position: relative; }
.menu a { display: block; color: #fff; text-decoration: none; padding: 12px 14px; font-size: 13px; letter-spacing: .02em; }
.menu > li > a[aria-current], .menu a:hover { background: var(--red-dark); color: #fff; }
.menu ul { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); border-top: 2px solid var(--red-dark); display: none; }
.menu ul a { color: var(--text); padding: 8px 16px; }
.menu ul a:hover { background: var(--soft); color: var(--red); }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.only-mobile { display: none; }
.burger { display: none; background: none; border: 0; padding: 12px; cursor: pointer; }
.burger span:first-child, .burger span:first-child::before, .burger span:first-child::after {
  display: block; width: 20px; height: 2px; background: #fff; position: relative; content: ""; }
.burger span:first-child::before { position: absolute; top: -6px; }
.burger span:first-child::after { position: absolute; top: 6px; }

/* ---------- content ---------- */
.content { max-width: var(--wrap); margin: 0 auto; padding: 36px 20px 20px; }
.home .content { padding-top: 24px; }
.block { padding: 10px 0; }
.row { display: flex; flex-wrap: wrap; gap: 0 4%; margin: 0 0 20px; }
.col { min-width: 0; }
.w-1 { flex: 0 0 100%; }
.w-1-2 { flex: 0 0 48%; }
.w-1-3 { flex: 0 0 30.66%; }
.w-2-3 { flex: 0 0 65.33%; }
.w-1-4 { flex: 0 0 22%; }
.w-3-4 { flex: 0 0 74%; }
.w-1-5 { flex: 0 0 16.8%; }
.row:has(.has-bg) { gap: 0; }
.row:has(.has-bg) > .w-1-4 { flex-basis: 25%; }
.row:has(.has-bg) > .w-1-2 { flex-basis: 50%; }
.col.has-bg { background: var(--bg); color: #fff; padding: 30px 18px; }
.col.has-bg h4, .col.has-bg p { color: #fff; }
.col.has-bg:empty { display: none; }

h1, h2, h3, h4, h5 { color: var(--heading); font-weight: 400; line-height: 1.3; margin: 1.2em 0 .5em; }
h3 { font-size: 17px; }
h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.text p { margin: 0 0 1em; }
.text ul, .text ol { padding-left: 1.4em; }
.center { text-align: center; }

.heading { display: flex; flex-direction: column; margin: 10px 0 18px; }
.heading h1, .heading h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0;
  display: flex; align-items: center; gap: 12px; color: var(--heading); }
.heading h1::after, .heading h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.heading .pre { font-size: 12px; color: #888; }
.heading.big h1, .heading.big h2 { font-size: 30px; }
.heading.big h1::after, .heading.big h2::after { display: none; }
.footer-links .heading h2 { color: #fff; }

.spacer { height: 16px; }
hr.sep { border: 0; width: 50px; border-top: 2px solid var(--red); margin: 40px auto; }

figure.img { margin: 0 0 20px; }
figure.img img { display: block; }
figure.center img { margin: 0 auto; }
figure.circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 0 0 20px; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed { margin: 0 0 20px; }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.hero-video { position: relative; margin: 0 calc(50% - 50vw) 0; background: #000; border-top: 8px solid #000; border-bottom: 4px solid var(--red-deep); }
.hero-video video { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.hero-title { position: absolute; left: 0; right: 0; bottom: 72px; text-align: center; color: #fff; font-size: 26px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.home .hero-video + .block { margin-top: -48px; position: relative; }
.home .row:has(.has-bg) { max-width: 1060px; margin-left: auto; margin-right: auto; }

.icon svg { width: 28px; height: 28px; display: inline-block; vertical-align: middle; }
.icon.big { text-align: center; }
.icon.big svg { width: 44px; height: 44px; }

.btn { display: inline-block; background: var(--red); color: #fff; text-decoration: none; padding: 9px 18px; font-size: 12px;
  border: 2px solid var(--red); border-radius: 2px; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn-light { background: transparent; border-color: #fff; color: #fff; }
.btn-light:hover { background: #fff; color: var(--red-deep); border-color: #fff; }
.btn-outline { background: #fff; color: var(--text); border-color: #ccc; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.buttons.center { justify-content: center; }

.stat { text-align: center; }
.stat .num { display: block; font-size: 34px; color: var(--red-deep); line-height: 1.2; }
.stat .label { font-size: 12px; }

.accordion { border: 1px solid var(--line); margin: 0 0 30px; }
.accordion details { border-top: 1px solid var(--line); }
.accordion details:first-child { border-top: 0; }
.accordion summary { padding: 9px 14px 9px 34px; cursor: pointer; list-style: none; position: relative; font-size: 13px; color: var(--heading); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: "+"; position: absolute; left: 12px; top: 8px; width: 13px; height: 13px; line-height: 11px; font-size: 12px;
  text-align: center; border: 1px solid #ccc; color: #999; }
.accordion details[open] summary { color: var(--red); }
.accordion details[open] summary::before { content: "−"; }
.accordion .text { padding: 4px 16px 10px 34px; }

.timeline { list-style: none; padding: 0; margin: 0 0 30px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 20px 26px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.timeline .step { font-size: 12px; text-transform: uppercase; color: var(--red); }
.timeline h3 { margin: 0 0 6px; }

.tabs { margin: 0 calc(50% - 50vw) 30px; }
.tab-list { display: flex; justify-content: center; flex-wrap: wrap; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tab-list button { background: none; border: 0; padding: 16px 18px; font: inherit; font-size: 11px; text-transform: uppercase; color: #777; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tab-list button[aria-selected=true] { color: var(--red); }
.tab-panel { max-width: var(--wrap); margin: 0 auto; padding: 30px 20px 0; }

.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.logos a, .logos > img { display: flex; align-items: center; justify-content: center; background: var(--soft); padding: 14px; min-height: 100px; }
.logos img { max-height: 70px; width: auto; }

/* risk test form */
.risk-test { max-width: 760px; }
.risk-test .form-title { font-size: 22px; text-transform: uppercase; color: #999; font-weight: 300; margin: 0 0 16px; }
.risk-test .field { border: 0; padding: 0; margin: 0 0 18px; }
.risk-test label, .risk-test legend { display: block; font-size: 13px; color: var(--heading); margin-bottom: 4px; padding: 0; }
.risk-test input[type=number] { width: 140px; padding: 7px 9px; border: 1px solid #ccc; font: inherit; }
.risk-test small { display: block; color: #999; font-size: 11px; }
.risk-test .choice { display: flex; align-items: center; gap: 8px; color: var(--text); margin: 2px 0; cursor: pointer; }
.risk-test .req { color: var(--red-deep); }
.risk-test .invalid legend, .risk-test .invalid label[for] { color: var(--red-deep); }
.risk-test .form-error { color: var(--red-deep); font-weight: bold; }

/* ---------- footer ---------- */
.site-footer > .block { max-width: var(--wrap); margin: 0 auto; padding: 10px 20px; }
.site-footer .logos { margin-bottom: 0; }
.site-footer .footer-links { max-width: none; background: var(--red-deep); color: #fff; padding: 40px max(20px, calc(50% - var(--wrap) / 2 + 20px)) 20px; }
.footer-links a { color: #fff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .text p { margin: 0 0 .5em; }
.footer-links .heading h2::after { border-top-color: rgba(255,255,255,.3); }
.footer-links figure.img img { max-width: 140px; }
.socket { background: var(--red-socket); color: #fff; font-size: 12px; padding: 12px 0; }
.socket .wrap { display: flex; justify-content: space-between; align-items: center; }
.socket .social { display: flex; gap: 14px; }
.socket a { color: #fff; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .w-1-4, .row:has(.has-bg) > .w-1-4 { flex-basis: 50%; }
  .w-1-5 { flex-basis: 30%; margin-bottom: 14px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  .burger { display: block; margin-left: auto; }
  .nav-inner { justify-content: flex-start; flex-wrap: wrap; }
  .menu { display: none; width: 100%; flex-direction: column; padding-bottom: 8px; }
  .menu.open { display: flex; }
  .menu ul { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 16px; }
  .menu ul a { color: #fff; opacity: .9; }
  .menu ul a:hover { background: var(--red-dark); color: #fff; }
  .only-mobile { display: block; }
  .row { gap: 0; }
  .w-1-2, .w-1-3, .w-2-3, .w-3-4, .w-1-4, .row:has(.has-bg) > .w-1-4, .row:has(.has-bg) > .w-1-2 { flex-basis: 100%; }
  .w-1-5 { flex-basis: 50%; }
  .heading.big h1, .heading.big h2 { font-size: 24px; }
  .home .hero-video + .block { margin-top: 0; }
  .hero-title { font-size: 18px; bottom: 12px; }
  .socket .wrap { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } }

/* quote-style headings (testimonials) */
.heading.quote h1, .heading.quote h2 { font-size: 18px; letter-spacing: .03em; }
.heading.quote h1::after, .heading.quote h2::after { display: none; }
.heading .sub { font-size: 12px; font-style: italic; color: #888; margin-top: 2px; }