/* BEGIN EVENTRO MELDINGER */
/* Sidens egen css setter ikke box-sizing paa vaare elementer. Uten
   dette blir en boks med max-width 460 og padding 26 hele 512 bred -
   maalene maa bety det de sier. */
.evt-bar, .evt-popup-bak, .evt-popup, .evt-popup-ok, .evt-merknad,
.evt-bar *, .evt-popup * { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Bar, popup og merknad for ferie- og driftsmeldinger.
   Fargene foelger resten av nettstedet. Alt er dempet nok til aa kunne
   staa i ukevis uten aa skrike, men tydelig nok til aa bli lest.
   --------------------------------------------------------------------- */

:root {
  --evt-melding-bla: #08a9ee;
  --evt-melding-mork: #0b4f6c;
  --evt-melding-gul: #f7a81b;
  --evt-melding-oransje: #e8820c;
}

/* ------------------------------------------------------------- baren */
.evt-bar {
  /* Krysset ligger absolutt plassert til hoyre, slik at teksten kan
     midtstilles paa HELE bredden og ikke paa plassen som blir til
     overs ved siden av krysset. */
  position: relative;
  padding: 14px clamp(48px, 6vw, 72px);
  /* Gul, ikke sidens egen blaa. Blaa betyr Eventro, gul betyr beskjed -
     samme sprak som merknadene, saa kunden laerer fargen en gang.
     Moerk tekst paa gul maaler 7,4:1 i kontrast; hvit paa blaa laa paa
     2,7 og var for svak. */
  background: linear-gradient(90deg, var(--evt-melding-gul), var(--evt-melding-oransje));
  color: #3d2200;
  font-family: "Sora", Arial, Helvetica, sans-serif;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  z-index: 40;
}

.evt-bar-tekst { display: block; }

.evt-bar-lukk {
  position: absolute;
  top: 50%;
  right: clamp(12px, 2vw, 24px);
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #3d2200;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  opacity: .75;
  border-radius: 4px;
}
.evt-bar-lukk:hover,
.evt-bar-lukk:focus-visible { opacity: 1; background: rgba(61, 34, 0, .14); }

/* ------------------------------------------------------------ popupen */
.evt-popup-bak {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 20, 30, .55);
}

.evt-popup {
  background: #fff;
  color: #17262f;
  max-width: 460px;
  width: 100%;
  border-radius: 12px;
  padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  border-top: 5px solid var(--evt-melding-bla);
  font-family: "Sora", Arial, Helvetica, sans-serif;
}

.evt-popup-tekst {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
}

.evt-popup-ok {
  display: block;
  width: 100%;
  padding: 11px 18px;
  background: var(--evt-melding-bla);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.evt-popup-ok:hover { background: #0b84c4; }
/* Knappen faar fokus naar dialogen aapner, slik at tastatur og
   skjermleser finner den. Da skal ringen vaere synlig, men pen. */
.evt-popup-ok:focus-visible {
  outline: 3px solid rgba(8, 169, 238, .45);
  outline-offset: 3px;
}

/* --------------------------------------------------------- merknaden */
/* Varm farge, ikke sidens egen blaa - den blaa gikk i ett med resten
   og ble lest som pynt. Pulsen gaar TRE ganger og stopper. Evig
   blinking maa kunne skrus av for aa vaere tilgjengelig, og folk har
   dessuten laert seg aa overse det som blinker. */
.evt-merknad {
  margin: 0 0 22px;
  padding: 16px 20px 16px 54px;
  position: relative;
  background: #fff4e0;
  border: 1px solid #f0c069;
  border-left: 6px solid #e8820c;
  border-radius: 6px;
  color: #6b3d05;
  font-family: "Sora", Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.45;
  animation: evt-kom 420ms ease-out both, evt-puls 800ms ease-in-out 420ms 3;
}

/* Utropstegnet staar i et eget felt, saa lange tekster faar hengende
   innrykk og ikke legger seg under symbolet. */
.evt-merknad::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8820c;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

@keyframes evt-kom {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes evt-puls {
  0%, 100% { background: #fff4e0; box-shadow: none; }
  50%      { background: #ffe7bd; box-shadow: 0 0 0 4px rgba(232, 130, 12, .18); }
}

/* Den som har bedt systemet om mindre bevegelse, skal slippe begge. */
@media (prefers-reduced-motion: reduce) {
  .evt-merknad { animation: none; }
}

@media (max-width: 600px) {
  .evt-bar { font-size: 15px; padding: 12px 42px; }
  .evt-popup { padding: 22px 18px 18px; }
}
/* END EVENTRO MELDINGER */