/*
 * Deliberate design fixes on top of the frozen Elementor CSS (loaded last, see
 * app/lib/site/render.ts). These intentionally differ from the old WordPress site,
 * so the visual gate reports the affected pages as changed.
 */

/* Milestones (/timeline/): the blue band runs on behind the hero and footer. It is pulled
   up under the hero divider and down under the footer divider, and masked with the same
   Shape Dividers curve (mirrored like the dividers, blurred), so it fades in just below the
   hero wave and out just above the footer wave, parallel to both. The colour runs teal at
   the faded edges into navy, so the fade reads mint rather than a muddy lavender. Sizes follow the
   dividers' own breakpoints: --hsec/--hdiv hero section/wave, --fsec/--fdiv footer.
   Generated by: node scripts/gen-timeline-css.cjs . 1 1.5  (blur, gap in divider units). */
#timeline {
  --hsec: 215px; --hdiv: 215px; --fsec: 265px; --fdiv: 264px;
  --u-top: calc(var(--hdiv) / 2.17); /* px per divider unit */
  --u-bot: calc(var(--fdiv) / 2.17);
  margin-top: calc(-1 * var(--hsec));
  margin-bottom: calc(-1 * var(--fsec));
  position: relative;
  z-index: 4;
  pointer-events: none;
}
#timeline .timeline-item { pointer-events: auto; }
/* The footer's wave (site chrome) stays on top of the band's fade-out. */
.page-id-1317 .elementor-element-a2fad5a { z-index: 5; }
@media (max-width: 1024px) { #timeline { --hdiv: 160px; --fdiv: 201px; } }
@media (max-width: 767px) { #timeline { --hdiv: 81px; --fsec: 150px; --fdiv: 131px; } }
.timeline {
  /* Milestones start where the band is solid: 5.22 divider units below the divider top. */
  padding-top: calc(var(--hsec) - var(--hdiv) + var(--u-top) * 5.22 + 40px);
  padding-bottom: calc(var(--fsec) - var(--fdiv) + var(--u-bot) * 5.22 + 40px);
}
.timeline::before {
  --top-at: calc(var(--hsec) - var(--hdiv));
  /* Teal at the faded edges (as the hero and footer) into navy. */
  background: linear-gradient(to bottom,
    #00af8c calc(var(--top-at) + var(--u-top) * 1.3), #1d5e8a calc(var(--top-at) + var(--u-top) * 3),
    var(--color-blue) calc(var(--top-at) + var(--u-top) * 5), var(--color-blue) calc(100% - var(--u-bot) * 5),
    #1d5e8a calc(100% - var(--u-bot) * 3), #00af8c calc(100% - var(--u-bot) * 1.3));
  --mask:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 35.28 6.6%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27b%27 x=%27-20%%27 y=%27-50%%27 width=%27140%%27 height=%27200%%27%3E%3CfeGaussianBlur stdDeviation=%271%27/%3E%3C/filter%3E%3CclipPath id=%27c%27%3E%3Cpath transform=%27matrix(-1 0 0 1 35.28 0)%27 d=%27M45 1.16L35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4L-10 .4V20H45z%27/%3E%3C/clipPath%3E%3Cg clip-path=%27url(%23c)%27%3E%3Cpath filter=%27url(%23b)%27 transform=%27matrix(-1 0 0 1 35.28 1.5)%27 d=%27M45 1.16L35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4L-10 .4V20H45z%27/%3E%3C/g%3E%3C/svg%3E") 0 var(--top-at) / 100% calc(var(--u-top) * 6.6) no-repeat,
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 35.28 6.6%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27b%27 x=%27-20%%27 y=%27-50%%27 width=%27140%%27 height=%27200%%27%3E%3CfeGaussianBlur stdDeviation=%271%27/%3E%3C/filter%3E%3CclipPath id=%27c%27%3E%3Cpath transform=%27matrix(-1 0 0 1 35.28 4.43)%27 d=%27M45 1.16L35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4L-10 .4V-20H45z%27/%3E%3C/clipPath%3E%3Cg clip-path=%27url(%23c)%27%3E%3Cpath filter=%27url(%23b)%27 transform=%27matrix(-1 0 0 1 35.28 2.9299999999999997)%27 d=%27M45 1.16L35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4L-10 .4V-20H45z%27/%3E%3C/g%3E%3C/svg%3E") 0 100% / 100% calc(var(--u-bot) * 6.6) no-repeat,
    linear-gradient(to bottom, transparent calc(var(--top-at) + var(--u-top) * 6.4), #000 calc(var(--top-at) + var(--u-top) * 6.4),
      #000 calc(100% - var(--u-bot) * 6.4), transparent calc(100% - var(--u-bot) * 6.4));
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.timeline::after {
  display: none;
}

/* Circle cards (/relevant-projects/, /toolbox/, …): true circles, not ellipses. */
body:not(.elementor-editor-active) .circle {
  width: 100%;
  max-width: 290px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-content: center;
  align-items: center;
  justify-self: center;
  padding: 0 40px;
  overflow: hidden;
}

/* Toolbox downloads: centred rows instead of a left-hung 3-column grid. */
body:not(.elementor-editor-active) .toolbox-circle {
  padding: 0 20px;
  gap: 12px;
}
/* Elementor sets these per widget (and unevenly: 32px vs 35px), so !important. */
.toolbox-circle .circle-text-visible .elementor-heading-title,
.toolbox-circle .circle-text-visible .elementor-heading-title a {
  font-size: 26px !important;
  line-height: 1.2 !important;
}
.toolbox-circle .circle-image img {
  max-height: 120px;
  width: auto;
}
.e-grid:has(> .toolbox-circle) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding-inline: 0;
}
.e-grid:has(> .toolbox-circle) > .toolbox-circle {
  flex: 0 0 290px;
}

/* Jump-to-top button (added by marmade-overrides.js). Bottom right; the language switcher
   sits bottom left. */
.marmade-to-top {
  position: fixed;
  right: 20px;
  bottom: 64px;
  z-index: 999998;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2a2a85;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease;
}
.marmade-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, background-color 0.2s ease;
}
.marmade-to-top:hover { background: #00af8c; }
.marmade-to-top:focus-visible { outline: 3px solid #00af8c; outline-offset: 3px; }
@media (max-width: 767px) { .marmade-to-top { right: 16px; bottom: 64px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .marmade-to-top { transition: none; } }

/* Cookie consent banner (public/marmade-overrides.js). Sits above the jump-to-top button. */
.marmade-consent {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999999;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  background: #2a2a85;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  font-size: 15px;
  line-height: 1.5;
}
.marmade-consent[hidden] { display: none; }
.marmade-consent__text { flex: 1 1 320px; margin: 0; }
.marmade-consent__text a { color: #fff; text-decoration: underline; }
.marmade-consent__actions { display: flex; gap: 10px; }
.marmade-consent__btn {
  padding: 10px 22px;
  border: 2px solid #00af8c;
  border-radius: 999px;
  background: #00af8c;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.marmade-consent__btn--ghost { background: transparent; border-color: #fff; }
.marmade-consent__btn:hover { filter: brightness(1.1); }
.marmade-consent__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  .marmade-consent { left: 16px; right: 16px; bottom: 16px; padding: 16px; font-size: 14px; }
  .marmade-consent__actions { width: 100%; }
  .marmade-consent__btn { flex: 1; }
}

/* Posts written in the back office: same body type as the migrated posts' text widgets. */
.marmade-post-body { font-size: 15px; line-height: 1.5; color: #161616; padding: 0 5%; }
.marmade-post-body p { margin: 0 0 1em; }