/*
  Verkkotunnuksen saatavuustarkistus — oma osio (#verkkotunnus).
*/

/* -------------------- Hakulomake -------------------- */

/*
  Kentän ja napin korkeus tulee YHDESTÄ muuttujasta, ei kummankin omasta
  pehmusteesta. Aiemmin molemmilla oli sama padding mutta eri fonttikoko
  (kenttä 1rem, nappi 0.95rem), jolloin ne päätyivät eri korkeuksiin ja rivi
  näytti epätasaiselta. Korkeus on nyt sama luku molemmille, joten ne eivät voi
  ajautua erilleen fonttikoon tai pehmusteen muuttuessa.
*/
.vt-form {
  --vt-h: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 14px;
}

.vt-field {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  /* stretch eikä center: kenttä täyttää rivin korkeuden, jolloin se on
     täsmälleen napin mittainen myös kun rivi rivittyy. */
  align-items: stretch;
}

/* Pääte kentän sisällä kertoo ilman erillistä ohjetta, että kenttään
   kirjoitetaan nimi eikä koko osoitetta.

   Pystykeskitys on kirjoitettava tähän itse. Vihje on absoluuttisesti
   asemoitu, joten sen paikka riippui aiemmin säiliön align-items-arvosta —
   ja kun se vaihdettiin center -> stretch kentän korkeuden takia, vihje
   hyppäsi kentän yläreunaan. top + translateY irrottaa sen säiliön
   asettelusta, jolloin kumpikaan ei enää riko toistaan. */
.vt-suffix {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
  pointer-events: none;
}

.vt-input {
  width: 100%;
  height: var(--vt-h);
  /* Pystypehmuste pois: korkeus tulee --vt-h:sta, ja teksti keskittyy
     kenttään itsestään. Padding vaikuttaisi korkeuteen ja rikkoisi parin. */
  padding: 0 62px 0 18px;
  font-family: "General Sans", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.vt-input::placeholder {
  color: #9A9A98;
}

.vt-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.vt-submit {
  flex: 0 0 auto;
  height: var(--vt-h);
  padding: 0 28px;
  /* .btn on inline-block, jolloin teksti asettuisi perusviivan mukaan ja
     istuisi kiinteässä korkeudessa hieman ylös. inline-flex keskittää sen. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Odotustila: nappi ei saa kutistua tekstin vaihtuessa, muutoin rivi hyppii. */
.vt-submit[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}

.vt-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-2);
}

/* -------------------- Osio -------------------- */

/*
  Osio jää valkoiselle. Sitä seuraava .contact on --panel-tint, joten kermainen
  kaista tässä tuottaisi kaksi peräkkäistä samanväristä kaistaa eikä osioiden
  raja erottuisi. Kortin reuna ja varjo riittävät erottamaan hakukentän.
*/
.vt-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.vt-sub {
  max-width: 56ch;
  margin: 0 auto clamp(22px, 4vw, 34px);
  text-align: center;
}

/* -------------------- Tulos -------------------- */

/*
  Tulosalue on aria-live="polite": lukuohjelma kertoo vastauksen ilman että
  fokus siirtyy pois kentästä, jolloin haun voi toistaa heti uudella nimellä.
*/
.vt-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.vt-result:empty {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.vt-headline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 6px;
}

.vt-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  padding: 5px;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vt-free .vt-icon {
  background: var(--brand-tint);
  stroke: var(--brand);
}

.vt-taken .vt-icon,
.vt-unknown .vt-icon {
  background: #EFEFEC;
  stroke: var(--text-2);
}

.vt-error .vt-icon {
  background: var(--error-bg);
  stroke: var(--error-text);
}

.vt-title {
  margin: 0;
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  /* Pitkä verkkotunnus ei saa työntää korttia leveämmäksi kuin ruutu. */
  overflow-wrap: anywhere;
}

/*
  Verkkotunnus on VÄRITÖN oletuksena ja vihreä vain kun se on oikeasti vapaa.

  Aiemmin se oli aina brändin vihreä, jolloin varattu tulos luki ensin
  "creavo.fi" vihreänä ja vasta sitten "on varattu". Väri ehtii silmään ennen
  sanaa, joten se lupasi vapaata verkkotunnusta jota ei ollut. Väri on tässä
  tilatieto, ei koriste — siksi se seuraa tulosta eikä elementtiä.
*/
.vt-domain {
  color: var(--text);
}

.vt-free .vt-domain {
  color: var(--brand);
}

.vt-lead {
  margin: 0 0 16px;
  padding-left: 38px;
  font-size: 0.95rem;
}

.vt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 38px;
}

@media (max-width: 520px) {
  .vt-lead,
  .vt-actions {
    padding-left: 0;
  }
}

/* -------------------- Vaihtoehdot -------------------- */

.vt-alts {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Erotin on otsikon YLÄPUOLELLA, ei listan, ja väli tulee tästä.

  Aiemmin erotin oli listassa ja otsikolla oli margin-top: 0, jolloin otsikko
  jäi puristuksiin toimintonapin ja listan väliin — mitattu väli napin
  alareunasta otsikkoon oli 0 px, ja pyöreä nappi näytti menevän tekstin
  päälle. Nyt otsikko kantaa sekä erottimen että välin, joten jokainen
  vaihtoehtolohko irtoaa edeltävästä samalla tavalla.
*/
.vt-alts-title {
  margin: 26px 0 12px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.vt-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.vt-alt:last-child {
  border-bottom: 0;
}

.vt-alt-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.vt-alt-state {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.vt-alt-free .vt-alt-state {
  color: var(--brand);
}

.vt-alt-taken .vt-alt-state {
  color: var(--text-2);
  font-weight: 500;
}

/* Vapaan vaihtoehdon voi valita suoraan — sama polku kuin päätuloksella. */
.vt-pick {
  flex-shrink: 0;
  padding: 6px 16px;
  font-size: 0.85rem;
}

.vt-disclaimer {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Kun JS puuttuu, koko toiminto piilotetaan: hakukenttä joka ei tee mitään
   on huonompi kuin ei kenttää lainkaan. .vt-js poistetaan js/verkkotunnus.js:ssä. */
.vt-js {
  display: none;
}