/* HydroFLOW applications in building water systems - the interactive diagram
   on the green-building pages (/bniya-yeruka/, /en/green-building/).

   The rules below are the supplied block's own CSS, unchanged, with two
   additions at the end: the Hebrew font order (the only difference between the
   two supplied files) and the fit inside this theme, where the block replaces an
   image already sitting in a padded .wrap. Loaded only on pages that carry the
   diagram - see inc/building-applications.php. */

.hfa *,.hfa *::before,.hfa *::after{box-sizing:border-box}
.hfa{
  --hf-teal:#00A9A2; --hf-teal-deep:#006974; --hf-indigo:#384A9C;
  --hf-navy:#04102E; --hf-grey:#4E4E56; --hf-line:#2E3F8F;
  font-family:"Montserrat","Heebo","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--hf-indigo); background:#fff;
  padding-block:clamp(2rem,5vw,4.5rem); padding-inline:16px;
  -webkit-font-smoothing:antialiased;
}
.hfa__inner{max-width:1280px;margin-inline:auto}
@supports (container-type:inline-size){.hfa__inner{container-type:inline-size}}
.hfa__head{max-width:74ch;margin-inline:auto;text-align:center}
.hfa h2{
  margin:0 0 .6em; font-weight:800; letter-spacing:-.01em; line-height:1.06;
  font-size:clamp(1.75rem,1rem + 2.4vw,3.25rem); color:var(--hf-indigo);
}
.hfa h2 em{font-style:italic}
.hfa h2 sup{font-size:.42em;vertical-align:super;font-weight:700;margin-inline-start:.05em}
.hfa__lead{
  margin:0; font-weight:500; font-size:clamp(1rem,.9rem + .35vw,1.375rem);
  line-height:1.7; color:var(--hf-indigo);
}
.hfa__lead em{font-style:italic}

.hfa__stage{
  position:relative; width:100%; aspect-ratio:1440 / 810; overflow:visible;
  margin-top:clamp(1.5rem,3.5vw,3rem);
}
.hfa__artbox{position:absolute;left:9.5139%;top:9.5062%;width:67.5000%;height:89.3827%}
.hfa__art{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.hfa__pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hfa__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hfa__leader{fill:none;stroke:var(--hf-line);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s cubic-bezier(.2,.7,.3,1),stroke-width .18s cubic-bezier(.2,.7,.3,1)}
.hfa__tip{fill:var(--hf-teal);transition:r .18s cubic-bezier(.2,.7,.3,1)}
.hfa__leader.is-on{stroke:var(--hf-teal);stroke-width:4.6}
.hfa__tip.is-on{r:12}
.hfa__pin{display:none}
.hfa__pin circle{fill:var(--hf-teal);stroke:#fff;stroke-width:5}
.hfa__pin text{fill:#fff;font-weight:700;font-size:34px;text-anchor:middle;
  font-family:"Montserrat","Heebo",system-ui,sans-serif;direction:ltr}
.hfa__pin.is-on circle{fill:var(--hf-teal-deep)}

.hfa__chip{
  position:absolute; transform:translate(-50%,-50%);
  left:var(--x); top:var(--y);
  display:flex; flex-direction:column; align-items:center; gap:.45em;
  padding:.6em .85em; background:#fff;
  border:1.6px solid var(--hf-indigo); border-radius:10px;
  box-shadow:0 6px 20px rgba(4,16,46,.10);
  font-size:clamp(8px,1.32vw,16px); font-weight:700; line-height:1.22;
  color:var(--hf-indigo); text-align:center; white-space:nowrap;
  transition:box-shadow .18s cubic-bezier(.2,.7,.3,1),border-color .18s cubic-bezier(.2,.7,.3,1),
             transform .18s cubic-bezier(.2,.7,.3,1);
}
@supports (container-type:inline-size){.hfa__chip{font-size:clamp(8px,1.36cqw,16px)}}
.hfa__chip img{height:calc(var(--ih) * 1em);width:auto;display:block}
.hfa__chip.is-on{border-color:var(--hf-teal);box-shadow:0 10px 26px rgba(4,16,46,.18);
  transform:translate(-50%,-50%) translateY(-2px)}

.hfa__legend{display:none;margin:1.75rem 0 0;padding:0;list-style:none}
.hfa__legend h3{
  margin:0 0 .9rem; font-size:1rem; font-weight:700; color:var(--hf-teal);
  letter-spacing:.02em; text-transform:uppercase;
}
.hfa__legend ol{margin:0;padding:0;list-style:none;display:grid;gap:.55rem .9rem}
@media (min-width:480px){.hfa__legend ol{grid-template-columns:1fr 1fr}}
.hfa__legend li{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;line-height:1.35}
.hfa__legend .num{
  flex:0 0 auto;width:1.7em;height:1.7em;border-radius:50%;background:var(--hf-teal);
  color:#fff;font-weight:700;font-size:.85rem;display:grid;place-items:center;
}
.hfa__legend li.is-on{color:var(--hf-teal-deep)}

@media (max-width:780px){
  .hfa__chip,.hfa__lines{display:none}
  .hfa__pin{display:block}
  .hfa__legend{display:block}
  .hfa__stage{aspect-ratio:972 / 724}
  .hfa__artbox{left:0;top:0;width:100%;height:100%}
}
@container (max-width:719px){
  .hfa__chip,.hfa__lines{display:none}
  .hfa__pin{display:block}
  .hfa__legend{display:block}
  .hfa__stage{aspect-ratio:972 / 724}
  .hfa__artbox{left:0;top:0;width:100%;height:100%}
}
@media (prefers-reduced-motion:reduce){
  .hfa__chip,.hfa__leader,.hfa__tip{transition:none}
}

/* The Hebrew supplied file put Heebo first; everything else was identical. */
.hfa[lang="he"]{font-family:"Heebo","Montserrat","Segoe UI",system-ui,-apple-system,sans-serif}

/* In this theme the block takes the place of an image inside
   <div class="wrap" style="padding:40px 0">. That wrapper supplies the width and
   40px above and below, so the block's own vertical padding would double the
   gap. Its side padding stays: the inline "padding:40px 0" zeroes .wrap's
   gutters, which suited an image running edge to edge but would put the text
   flush against the screen edge on a phone. */
.wrap > .hfa{padding-block:0;background:transparent}

/* Three theme rules reach into the block and override its own typography:
   - [dir] h1-h4 set the theme's typeface (Rubik for Hebrew, Inter for English);
   - html[dir="ltr"] h2 loosens English headings to +.02em, where the block
     sets -.01em - the English heading came out visibly wider than supplied;
   - [dir] p aligns every paragraph to the reading edge, un-centring the lead.
   Found by comparing the theme render against the supplied file rendered on its
   own, aligned pixel for pixel, then reading computed styles. Scoped with enough
   weight to win without !important. After this both languages match the
   supplied files. */
.hfa .hfa__head h2,
.hfa .hfa__legend h3{font-family:inherit}
.hfa .hfa__head h2{letter-spacing:-.01em}
.hfa .hfa__head .hfa__lead{text-align:center}