/* ==========================================================================
   CLEANTIME: päta, spoločné pravidlá pre všetky stránky

   Načítava sa až za štýlmi jednotlivých stránok, aby ich vedela zjednotiť.
   Selektor začína na body[data-page], čím dorovná špecifickosť pravidiel
   scopovaných na konkrétnu stránku (home, about, legal).

   Dve zmeny oproti pôvodnému stavu:
     1. Eyebrow „Bratislava a okolie“ a popis firmy sú z markupu preč, takže
        ľavý stĺpec mriežky zanikol a päta je jednostĺpcová.
     2. Na telefóne je obsah vycentrovaný a nadpis sa zmestí na displej.
   ========================================================================== */

body[data-page] .site-footer .footer-main {
  grid-template-columns: 1fr;
}

/* Pôvodne všetko sedelo v druhom stĺpci, ten už neexistuje. */
body[data-page] .site-footer h2,
body[data-page] .site-footer .footer-actions,
body[data-page] .site-footer .footer-social,
body[data-page] .site-footer .footer-legal {
  grid-column: 1;
}

/* --------------------------------------------------------------------------
   Sociálne siete

   Pravidlá sú tu, a nie v štýloch jednotlivých stránok, lebo tento súbor sa
   načítava všade. Ikony tak vyzerajú rovnako v päte aj v úvodnom paneli
   stránky O nás a stačí ich ladiť na jednom mieste.

   Farbu ikony aj rámu berieme z currentColor, takže sada funguje na svetlej
   päte aj na tmavej fotke a mení sa len farba textu rodiča.
   -------------------------------------------------------------------------- */
body[data-page] .footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page] .site-footer .footer-social {
  margin-top: 18px;
}
body[data-page] .social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
  /* Ikona nesmie byť taká výrazná ako tlačidlá vedľa nej, preto tlmený rám. */
  opacity: .58;
  transition: opacity .3s ease, background-color .3s ease, color .3s ease, transform .3s ease;
}
body[data-page] .social-link svg {
  display: block;
  width: 20px;
  height: 20px;
}
@media (hover: hover) and (pointer: fine) {
  body[data-page] .social-link:hover {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink);
    opacity: 1;
    transform: translateY(-2px);
  }
}
body[data-page] .social-link:focus-visible {
  opacity: 1;
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* Na fotke v úvodnom paneli stránky O nás sú ikony biele a menej tlmené.
   Podklad je tam premenlivý, pri hodnote z päty by na svetlejšom mieste
   fotky takmer zanikli. */
body[data-page] .footer-social.is-hero .social-link {
  color: #fff;
  opacity: .85;
}

body[data-page] .site-footer h2 {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Telefóny: všetko na stred
   Nadpis mal spodnú hranicu clamp na 4,3 rem (asi 69 px). Slovo CleanTime
   je pri tejto veľkosti širšie než displej, preto pretekal von zo stránky.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body[data-page] .site-footer {
    padding-top: clamp(48px, 12vw, 78px);
    text-align: center;
  }
  body[data-page] .site-footer .footer-main {
    justify-items: center;
    gap: 18px;
  }
  body[data-page] .site-footer h2 {
    font-size: clamp(2.9rem, 15.5vw, 4.6rem);
    line-height: .86;
    letter-spacing: -.06em;
  }
  body[data-page] .site-footer .footer-actions {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    gap: 10px;
  }
  /* Tlačidlá na plnú šírku, aby sa nelámali do nepravidelných riadkov. */
  body[data-page] .site-footer .footer-actions > a {
    flex: 1 1 100%;
    max-width: 320px;
  }

  /* Ikony zostávajú vedľa seba a na stred. Pravidlo vyššie na ne neplatí,
     nie sú priamym potomkom .footer-actions, takže sa neroztiahnu. */
  body[data-page] .site-footer .footer-social {
    justify-content: center;
    margin-top: 14px;
  }

  /* Právny riadok: pôvodne bol copyright odtlačený doprava cez margin-left
     auto, čo ho na úzkom displeji vytláčalo mimo obrazovku. */
  body[data-page] .site-footer .footer-legal {
    justify-content: center;
    width: 100%;
    margin-top: 26px;
    gap: 10px 18px;
    text-align: center;
  }
}