/* SOHO VUE - 09-footer.css
   pasek mobilny, powrót na górę, stopka
   Fragment 9/13 arkusza soho.css (wiersze 2961-3154 oryginalu).
   KOLEJNOSC LADOWANIA JEST ZNACZACA - patrz includes/head.php. */

/* -------------------------------------------------------------- pasek mob */

.mobar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--burgundy);
  border-top: 1px solid rgba(244, 241, 234, .2);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobar a {
  padding: 1.05rem .5rem;
  text-align: center;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--brand-sand);
}

.mobar a+a {
  background: var(--brand-sand);
  color: var(--brand-burgundy);
}

@media (max-width: 767px) {
  .mobar {
    display: grid;
  }

  body {
    padding-bottom: 3.6rem;
  }
}

/* ------------------------------------------------------- powrót na górę  */

/* Kwadrat, nie kółko: obowiązuje jeden promień narożnika na całej stronie.
   Bez cienia, bo projekt nie używa cieni nigdzie - odrębność daje kolor
   marki, a nie uniesienie nad tłem. */
.totop {
  position: fixed;
  right: var(--pad-x);
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  z-index: var(--z-bar);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--brand-burgundy);
  color: var(--brand-sand);
  /* Jasna kreska jest po to, żeby przycisk miał kształt również na
     ciemnej stopce, gdzie sam bordo zlewa się z tłem. */
  border: 1px solid rgba(244, 241, 234, .28);
  border-radius: var(--r);
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
    opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}

.totop svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.totop:hover {
  background: var(--burgundy-hi);
  border-color: rgba(244, 241, 234, .5);
}

.totop:active {
  transform: translateY(1px);
}

/* Pokazuje się dopiero, gdy jest po co wracać - próg dzieli z paskiem
   nawigacji (ten sam wartownik w hero). Bez JavaScriptu widoczny od razu:
   lepiej mieć zbędny przycisk niż żaden. */
.js .totop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  pointer-events: none;
}

.js.is-scrolled .totop {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Nad paskiem kontaktu na telefonie, żeby nie zasłaniał "Zadzwoń". */
@media (max-width: 767px) {
  .totop {
    width: 2.75rem;
    height: 2.75rem;
    bottom: calc(3.6rem + env(safe-area-inset-bottom) + .7rem);
  }
}

/* ------------------------------------------------------------------ stopka */

.foot {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
}

.foot__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
}

@media (min-width: 860px) {
  .foot__top {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.foot__mark {
  width: 168px;
}

.foot__developer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.foot__developer-combined {
  width: 250px;
  height: auto;
}

.foot__developer-logo {
  width: 130px;
  height: auto;
  filter: invert(1);
}

.foot__developer-stamp {
  width: 72px;
  height: auto;
}

.foot nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.foot nav a {
  font-size: .9rem;
  text-decoration: none;
  color: var(--fg-soft);
}

.foot nav a:hover {
  color: var(--fg);
}

.foot__legal {
  margin-top: 2.2rem;
  display: grid;
  gap: 1rem;
}

.foot__legal p {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 90ch;
}

.foot__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--fg-soft);
}

.foot__bottom a {
  text-decoration: none;
}

.foot__bottom a:hover {
  text-decoration: underline;
}