/* Progresíve Site Visuals 1.0.2 — styles for the add-on to the Progresíve Site plugin. */

/* 1. Full-width header animation (and every full-width band on the Progresíve pages).
      The site theme gives any element with id="main" 30px of padding on each side. The Progresíve pages are built
      inside <main id="main">, so the header animation and the coloured bands stopped short of the screen edges. */
html body.pe-body #main { padding-left: 0 !important; padding-right: 0 !important; }

/* 2. The foraging crane's head (home page header) sat about 2 units to one side of the end of its neck, a step that
      showed once the head was brought in front of the pickerelweed leaf. Shifted so the neck runs straight into it.
      The selector only matches the original drawing, so a later fix in the Progresíve Site plugin can't be doubled. */
.pef-chead--forage > g[transform="translate(-80 -28.7) rotate(-74)"] { transform: translate(-78px, -28.7px) rotate(-74deg); }

/* 3. Scroll circuit (home page) */
body.pe-has-circuit #main { position: relative; }
.pe-circuit { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; overflow: hidden; pointer-events: none; }
.pe-circuit path { fill: none; stroke-linejoin: round; stroke-linecap: butt; }   /* butt: the pieces meet without overlap */
.pe-circuit__ghost { stroke: rgba(58, 148, 70, .12); stroke-width: 1; }
.pe-circuit__base { stroke: rgba(38, 163, 208, .17); stroke-width: 1.5; }
.pe-circuit__glow { stroke: rgba(38, 163, 208, .16); stroke-width: 8; }
.pe-circuit__live { stroke-width: 2.25; }
.pe-circuit__node { fill: #fff; stroke: #26A3D0; stroke-width: 2; opacity: .75; transition: fill .35s, stroke .35s, opacity .35s; }
.pe-circuit__node.is-lit { fill: #3A9446; stroke: #CDEAD1; opacity: 1; }
.pe-circuit__node--end { stroke-width: 2.5; }
.pe-circuit__pulse { transition: opacity .25s; }
.pe-circuit__halo { fill: rgba(38, 163, 208, .22); transform-box: fill-box; transform-origin: center; transition: transform .45s ease, opacity .45s ease; }
.pe-circuit__pulse.is-idle .pe-circuit__halo { transform: scale(.7); opacity: .65; }
.pe-circuit__dot { fill: #fff; stroke: #26A3D0; stroke-width: 3; }
.pe-static .pe-circuit__pulse { display: none; }

/* 4. Side menu (home page, desktop): the header's section links, kept on screen at the left */
.pe-sidenav {
  position: fixed; z-index: 80; left: clamp(16px, 2vw, 40px); top: 50%; margin: 0; padding: 10px 8px;
  border-radius: 20px; border: 1px solid rgba(15, 65, 84, .08); background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 18px 44px -24px rgba(11, 49, 63, .5); font-family: var(--pe-font, inherit);
  opacity: 0; visibility: hidden; transform: translate(-12px, -50%);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.pe-sidenav.is-on { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.pe-sidenav.is-off { display: none; }
.pe-sidenav__list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pe-sidenav__list li { margin: 0; padding: 0; }
.pe-sidenav .pe-sidenav__link {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 9px; border-radius: 999px;
  font-size: .82rem; font-weight: 650; line-height: 1.25; letter-spacing: .01em; white-space: nowrap;
  color: var(--pe-ink-2, #2A4753) !important; text-decoration: none !important; transition: background .2s, color .2s;
}
.pe-sidenav .pe-sidenav__link:hover { background: rgba(38, 163, 208, .1); }
.pe-sidenav .pe-sidenav__link.is-current { color: var(--pe-green-700, #2E7638) !important; background: rgba(58, 148, 70, .1); }
.pe-sidenav .pe-sidenav__link:focus-visible { border-radius: 999px; }
.pe-sidenav__node {
  position: relative; z-index: 1; flex: none; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 2px solid rgba(38, 163, 208, .55); transition: background .25s, border-color .25s, box-shadow .25s;
}
.pe-sidenav__link.is-passed .pe-sidenav__node { background: #26A3D0; border-color: #26A3D0; }
.pe-sidenav__link.is-current .pe-sidenav__node { background: #3A9446; border-color: #3A9446; box-shadow: 0 0 0 4px rgba(58, 148, 70, .18); }
.pe-sidenav__rail { position: absolute; width: 2px; border-radius: 2px; background: rgba(38, 163, 208, .18); pointer-events: none; }
.pe-sidenav__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--pe-fill, 0px); border-radius: 2px; background: linear-gradient(180deg, #3A9446, #26A3D0); }
/* slim version for narrower desktops: dots only, the name shows on hover or keyboard focus */
.pe-sidenav.is-compact { padding: 8px 5px; border-radius: 999px; }
.pe-sidenav.is-compact .pe-sidenav__link { padding: 8px; gap: 0; }
.pe-sidenav.is-compact .pe-sidenav__link:hover, .pe-sidenav.is-compact .pe-sidenav__link.is-current { background: transparent; }
.pe-sidenav.is-compact .pe-sidenav__label {
  position: absolute; left: calc(100% + 12px); top: 50%; padding: 5px 11px; border-radius: 999px;
  background: var(--pe-blue-950, #0B313F); color: #fff; font-size: .74rem; box-shadow: 0 10px 24px -12px rgba(11, 49, 63, .6);
  opacity: 0; transform: translate(-4px, -50%); pointer-events: none; transition: opacity .2s, transform .2s;
}
.pe-sidenav.is-compact .pe-sidenav__link:hover .pe-sidenav__label,
.pe-sidenav.is-compact .pe-sidenav__link:focus-visible .pe-sidenav__label { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 759px) {
  .pe-circuit__ghost { display: none; }
  .pe-circuit__live { stroke-width: 1.75; }
  .pe-circuit__glow { stroke-width: 5; }
  .pe-circuit__dot { stroke-width: 2.5; }
  .pe-circuit__node { stroke-width: 1.75; }
}
@media (max-width: 1023px) { .pe-sidenav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pe-circuit__pulse { display: none; }
  .pe-circuit__node, .pe-sidenav, .pe-sidenav * { transition: none !important; }
}
@media print { .pe-circuit, .pe-sidenav { display: none !important; } }