/*
  Creavo-demopalkki — jaettu kaikkien /demot/-esimerkkisivustojen kesken.

  Palkki on tarkoituksella Creavon omaa "chromea", ei osa demon omaa ilmettä:
  musta pohja + lime-aksentti erottavat sen selvästi demon paletista, jotta
  kävijälle on koko ajan selvää mikä on esimerkkisivusto ja mikä on Creavo.

  Fontit ovat järjestelmäfontteja tarkoituksella: palkki ei saa pakottaa
  yhtään demoa lataamaan ylimääräistä fonttitiedostoa.

  Kun demo kopioidaan oikealle asiakkaalle, poistetaan kaksi riviä:
  tämä <link> ja demo-bar.js:n <script>. Mitään muuta siivottavaa ei jää.
*/

/*
  Kerrostus. Palkki on demon oman sticky-navin (tyypillisesti 50–60) yläpuolella
  mutta koko ruudun peittävien overlayden alapuolella. Aiemmin palkki oli
  z-indexillä 2147483000, jolloin se piirtyi kampaamon mobiilivalikon päälle ja
  peitti valikon viimeisen linkin 360×600-ruudulla.

  SOPIMUS DEMOILLE:
  1. Koko ruudun overlay (mobiilivalikko, modaali) käyttää z-indexiä >= 100.
  2. Overlayn auetessa demo lisää <html>-elementille luokan "demo-overlay-open"
     ja poistaa sen sulkiessa.

  Kaksi sääntöä, koska ne korjaavat eri puolet samasta ongelmasta: z-index
  hoitaa sen mitä silmä näkee, luokka poistaa palkin myös tab-järjestyksestä.
  Pelkkä z-index ei riitä — se ei vaikuta fokusjärjestykseen, joten
  näppäimistökäyttäjä tabittaisi avoimen valikon takaa näkymättömään palkkiin.
*/

.creavo-demobar {
  --cdb-ink: #181818;
  --cdb-lime: #a8e84b;
  --cdb-lime-ink: #18280a;
  --cdb-muted: #a5a5a1;
  --cdb-z: 60;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--cdb-z);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--cdb-ink);
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 -12px 32px -18px rgba(0, 0, 0, 0.65);
  transform: translateY(110%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.creavo-demobar * {
  box-sizing: border-box;
}

.creavo-demobar.is-in {
  transform: translateY(0);
}

/* --- Vasen puoli: mikä tämä sivu on --- */

.creavo-demobar-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.creavo-demobar-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cdb-lime);
  box-shadow: 0 0 0 4px rgba(168, 232, 75, 0.2);
}

.creavo-demobar-text {
  min-width: 0;
}

.creavo-demobar-title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.creavo-demobar-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--cdb-muted);
}

.creavo-demobar-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 7px;
}

.creavo-demobar-sub b {
  color: #e8e8e4;
  font-weight: 600;
}

.creavo-demobar-pipe {
  color: rgba(255, 255, 255, 0.28);
}

.creavo-demobar-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Logo skaalataan tekstin mukaan: 0.85em pitää sen samassa optisessa
   koossa kuin vieressä oleva teksti myös jos fonttikoko muuttuu. */
.creavo-demobar-by img {
  display: block;
  width: auto;
  height: 0.85em;
  /* Kuva on alkuperäiseltä kooltaan 435×81, joten width/height-attribuutit
     kertovat selaimelle suhteen. height:auto ei käy, koska korkeus on tässä
     se mitä ohjataan — width:auto antaa leveyden seurata. */
}

/* --- Oikea puoli: toiminnot --- */

.creavo-demobar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.creavo-demobar-link,
.creavo-demobar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.creavo-demobar-link {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #e8e8e4;
}

.creavo-demobar-link:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.creavo-demobar-link svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Määränpää kuuluu saavutettavaan nimeen muttei nappiin: "Palaa
   takaisin" riittää silmälle, koska palkki kertoo ympärillä missä
   ollaan, mutta ruudunlukijan linkkilistassa se jäisi irralliseksi.
   Näkyvä teksti on nimen alussa (WCAG 2.5.3, Label in Name), joten
   puheohjaus osuu yhä komennolla "Palaa takaisin". */
.creavo-demobar-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.creavo-demobar-cta {
  padding: 10px 18px;
  border: 1px solid var(--cdb-lime);
  background: var(--cdb-lime);
  color: var(--cdb-lime-ink);
}

.creavo-demobar-cta:hover {
  background: #b8f065;
  border-color: #b8f065;
}

.creavo-demobar-cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.creavo-demobar-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  color: #e8e8e4;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.creavo-demobar-toggle:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.creavo-demobar-toggle svg {
  width: 15px;
  height: 15px;
}

/* --- Kutistettu tila: pieni pilleri kulmassa --- */

.creavo-demopill {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #181818;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
  transform: translateY(140%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.creavo-demopill.is-in {
  transform: translateY(0);
}

.creavo-demopill .creavo-demobar-dot {
  box-shadow: 0 0 0 3px rgba(168, 232, 75, 0.2);
}

/* --- Overlay auki: palkki pois näkyvistä JA tab-järjestyksestä --- */

html.demo-overlay-open .creavo-demobar,
html.demo-overlay-open .creavo-demopill {
  display: none;
}

/* --- Mobiili --- */

@media (max-width: 720px) {
  .creavo-demobar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  }

  .creavo-demobar-sub {
    font-size: 0.76rem;
  }

  .creavo-demobar-actions {
    width: 100%;
    margin-left: 0;
    /* Turvaverkko kapeimmille ruuduille: jos molemmat napit eivät mahdu
       riville, ne rivittyvät sen sijaan että puskisivat palkin yli. */
    flex-wrap: wrap;
  }

  /* Paluupainike oli aiemmin piilotettu mobiilissa perusteella "vain yksi
     selkeä toiminto". Silloin puhelinkäyttäjälle ei jäänyt palkkiin yhtään
     reittiä ulos demosta, vaikka koko palkin tarkoitus on estää umpikuja.
     Nyt se näkyy, ja tilaa tehdään lyhentämällä CTA:n tekstiä. */
  .creavo-demobar-cta-long {
    display: none;
  }

  .creavo-demobar-link {
    padding: 9px 12px;
  }

  .creavo-demobar-cta {
    flex: 1;
    justify-content: center;
  }

  .creavo-demobar-toggle {
    order: 2;
  }

  .creavo-demobar-mark {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creavo-demobar,
  .creavo-demopill {
    transition: none;
  }
}
