/* ============================================================
   FLOW-AID -- materialebaandet under hero
   particulair.eu/flow-aid/

   De seks variabler herunder er baandets eneste farvevalg, og de
   peger alle paa brand.css. Skiftes paletten der, foelger baandet
   med. Der skal altsaa ikke rettes farver i denne fil.

   Maalt paa baggrunden #2d475c (--text-main):
     stregen   --bg-soft   #e3eef9 : 8,24:1
     accenten  --amber-300 #f0bf7c : 5,74:1
     vaeggene  --accent-blue       : 5,58:1
     knappens kant                 : 3,36:1  (krav 3:1, WCAG 1.4.11)

   Hoejden er 110 px (88 px paa smaa skaerme). Geometrien i siloen
   udmaales af hoejden, saa forholdet holder begge steder.

   Baandet ligger klods op ad .usp-band, som har samme baggrund.
   De to skal laese som ét moerkt felt, og derfor har baandet
   ingen nederste kant. Pauseknappen staar oeverst til hoejre --
   nederst ville den ligge oven paa stregen og taet paa
   usp-bandets kontaktlink.
   ============================================================ */

.pa-band{
  --pa-band-bg1:    var(--text-main);
  --pa-band-bg2:    #35566e;
  --pa-band-line:   var(--bg-soft);
  --pa-band-wall:   rgba(166,201,227,.42);
  --pa-band-fill:   rgba(227,238,249,.15);
  --pa-band-accent: var(--amber-300);

  position:relative;
  width:100%;
  height:110px;
  overflow:hidden;
  background:var(--text-main);
}
.pa-band__canvas{display:block;width:100%;height:100%}

.pa-band__toggle{
  position:absolute;right:14px;top:12px;
  width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(45,71,92,.92);
  border:1px solid rgba(227,238,249,.5);
  border-radius:50%;
  color:var(--bg-soft);
  cursor:pointer;
}
.pa-band__toggle:hover{border-color:var(--bg-soft);background:rgba(45,71,92,.9)}
.pa-band__toggle:focus-visible{outline:2px solid var(--amber-300);outline-offset:2px}
.pa-band__toggle .pa-band__play{display:none}
.pa-band__toggle.is-paused .pa-band__play{display:block}
.pa-band__toggle.is-paused .pa-band__pause{display:none}

@media (max-width:640px){ .pa-band{height:88px} }