/* A szunetelo szolgaltatas tajekoztato lapja.
   Reszletek es indoklas: tools/make_service_paused.py

   Sajat stiluslap, mert ez az EGYETLEN lap a siteon, ahol urlap all a
   `contact-us.css` nelkul. A szinek es a tipografia a core.min.css
   valtozoibol jonnek - itt csak elrendezes van, uj szin nincs. */

.sp-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.sp-prose p {
  margin: 0 0 16px;
  max-width: 62ch;
}

/* A lepeslista nem dekoracio: a latogato legfontosabb kerdese az, hogy
   "akkor most mi van" - erre a harom sor valaszol, ranezesre. */
.sp-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.sp-steps li {
  position: relative;
  padding: 0 0 16px 28px;
}
.sp-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-grey-200);
}
.sp-steps li.is-done::before {
  background: var(--color-orange-600);
}
/* A pontokat osszekoto vonal - a lista igy folyamat, nem felsorolas. */
.sp-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  bottom: 2px;
  width: 2px;
  background: var(--color-grey-200);
}

.sp-card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 16px;
  padding: 32px;
}
.sp-card h2 {
  margin: 0 0 8px;
}
.sp-card > p {
  margin: 0 0 20px;
}

.sp-field {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.sp-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font: inherit;
  color: var(--color-grey-600);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 8px;
}
.sp-field input::placeholder {
  color: var(--color-grey-500);
}
.sp-field input:focus-visible,
.sp-field button:focus-visible {
  outline: 2px solid var(--color-orange-600);
  outline-offset: 2px;
}
.sp-field button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sp-note {
  margin: 16px 0 0;
  color: var(--color-grey-500);
}
.sp-note a {
  color: inherit;
  text-decoration: underline;
}

/* Az uzenet helyet MINDIG lefoglaljuk, kulonben a valasz megjelenesekor a
   gomb elugrik a kurzor alol - pont abban a pillanatban, amikor a
   felhasznalo odanez. */
.sp-status {
  min-height: 24px;
  margin: 12px 0 0;
}
.sp-status.is-error {
  color: var(--color-status-error);
}
.sp-status.is-success {
  color: var(--color-status-success);
}

/* A .sp-links kartyak a core.min.css-be kerultek: a 404-oldal is
   hasznalja oket, az viszont ezt a fajlt nem tolti. */

@media (max-width: 900px) {
  .sp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .sp-links {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .sp-card {
    padding: 24px;
  }
  /* Keskeny kepernyon a gomb a mezo ALA kerul: egymas mellett mindketto
     osszenyomodna, es a cim beirasa lenne kenyelmetlen. */
  .sp-field {
    flex-direction: column;
  }
  /* Egymas ala kerulve a gomb toltse ki a szelesseget - kulomben a mezo
     alatt egy nala keskenyebb gomb logna, ami rendetlennek latszik. */
  .sp-field button {
    width: 100%;
    justify-content: center;
  }
}

/* A mezonek van cimkeje, csak nem latszik: a placeholder nem cimke - eltunik
   gepeles kozben, es a kepernyoolvasok egy resze nem is olvassa fel. */
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}