/**
 * TuliRytmika site footer (custom/footer/SiteFooter.php, templates/site-footer.php).
 * 1rem = 10px (html { font-size: 62.5% } in style.css). Breakpoints: ≤ 767 phone,
 * 768–1023 tablet (brand above the links), ≥ 1024 two halves side by side.
 */

.tr-footer {
  margin-top: 8rem; /* white gap above the grey part; pages were designed against the old footer's 80px top margin */
  background: #fff;
  color: var(--color-primary-black);
}

.tr-footer a,
.tr-footer a:hover {
  color: var(--color-primary-black);
  text-decoration: none;
}

.tr-footer a:focus-visible {
  border-radius: 0.4rem;
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 0.3rem;
}

/* hover only on pointer devices, so a tap does not leave the blue state behind */
@media (hover: hover) {
  .tr-footer a:hover {
    color: var(--color-primary-blue);
  }
}

.tr-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tr-footer li {
  margin: 0;
}

.tr-footer p {
  margin: 0;
}

/* ── Grey part ── */
.tr-footer__top {
  background: var(--color-footer-bg);
}

.tr-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4.8rem;
  padding-top: 6.4rem;
  padding-bottom: 1.6rem;
}

.tr-footer__brand {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.tr-footer__logo {
  display: block;
}

.tr-footer__logo img {
  display: block;
  width: 15rem;
  height: auto;
}

.tr-footer__tagline {
  max-width: 34rem;
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: var(--color-text-muted);
}

.tr-footer a.tr-footer__email {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: var(--color-primary-blue);
}

.tr-footer a.tr-footer__email svg {
  flex: none;
}

@media (hover: hover) {
  .tr-footer a.tr-footer__email:hover {
    color: var(--color-primary-blue-hover);
  }
}

.tr-footer__brand .tr-footer__social {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.tr-footer a.tr-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-black);
}

@media (hover: hover) {
  .tr-footer a.tr-footer__social-link:hover {
    border-color: var(--color-primary-blue);
    color: var(--color-primary-blue);
  }
}

.tr-footer__main {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3.2rem;
}

.tr-footer__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4.8rem;
}

.tr-footer__heading {
  margin: 0 0 0.6rem;
  font-family: var(--edublink-font-secondary);
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 700;
  color: var(--color-primary-black);
}

.tr-footer__nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}

.tr-footer__nav li {
  line-height: 2.4rem; /* the parent's li line-height would make the list taller than the links */
}

.tr-footer__nav a {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

/* Payments */
.tr-footer__payments {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.tr-footer__payments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}

.tr-footer__payments .tr-footer__heading {
  margin-bottom: 0;
}

.tr-footer__installments {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--color-text-muted);
}

.tr-footer__installments svg {
  flex: none;
  color: var(--color-primary-blue);
}

.tr-footer__installments strong {
  font-weight: 500;
  color: var(--color-primary-black);
}

.tr-footer__marks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
}

.tr-footer__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  border: 1px solid var(--color-line);
  border-radius: 0.8rem;
  background: #fff;
}

.tr-footer__mark img {
  display: block;
  width: auto;
  height: 2.2rem;
}

.tr-footer__mark--visa img {
  width: 3.8rem;
  height: auto;
}

.tr-footer__mark--mastercard img {
  width: 3.2rem;
  height: auto;
}

/* Apple Pay and Google Pay carry their own frame and look smaller at the same height */
.tr-footer__mark--applepay img,
.tr-footer__mark--googlepay img {
  height: 2.6rem;
}

/* Clouds: transparent top, solid white bottom that runs into the legal strip */
.tr-footer__clouds {
  height: 8.8rem;
  background: url(../img/footer-clouds.png) repeat-x center bottom;
  background-size: auto 8.8rem;
}

/* ── White legal strip ── */
.tr-footer__legal-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2.4rem;
  padding-bottom: 3.6rem;
}

.tr-footer__docs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.4rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 500;
}

.tr-footer__legal-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
}

.tr-footer__seller,
.tr-footer__copyright {
  font-size: 1.3rem;
  line-height: 2.1rem;
  color: var(--color-text-muted);
}

.tr-footer__copyright {
  text-align: right;
  white-space: nowrap;
}

.tr-footer__sep {
  display: none; /* desktop: line break instead of the comma */
}

/* ── Tablet: brand above, links and payments below at full width ── */
@media (max-width: 1024px) {
  .tr-footer {
    margin-top: 4rem; /* Elementor tablet breakpoint: the pages' bottom margins switch here too */
  }
}

@media (max-width: 1023px) {
  .tr-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4rem;
    padding-top: 4.8rem;
  }

  .tr-footer__brand,
  .tr-footer__main {
    grid-column: auto;
  }

  .tr-footer__main {
    gap: 4rem;
  }
}

/* Offer bar pages (home, /kurs/ below 1200 px): the "back to top" button sits 46 px above the bar
   and would cover the right end of the copyright; room for it under the legal text. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.tr-has-offer-bar:not(:has(.tr-offer-bar__state[data-package-in-cart="1"])) .tr-footer__legal-inner {
    padding-bottom: 5.6rem;
  }
}

/* ── Phone ── */
@media (max-width: 767px) {
  .tr-footer__grid,
  .tr-footer__legal-inner {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  .tr-footer__grid {
    row-gap: 0;
    padding-top: 4rem;
    padding-bottom: 1.6rem;
  }

  .tr-footer__brand {
    gap: 1.6rem;
  }

  .tr-footer__logo img {
    width: 12.4rem;
  }

  .tr-footer__tagline {
    font-size: 1.5rem;
    line-height: 2.4rem;
  }

  .tr-footer a.tr-footer__email {
    min-height: 4.4rem;
    font-size: 1.5rem;
  }

  .tr-footer__brand .tr-footer__social {
    margin-top: 0;
  }

  .tr-footer a.tr-footer__social-link {
    width: 4.4rem;
    height: 4.4rem;
  }

  .tr-footer__main {
    gap: 0;
  }

  .tr-footer__nav-grid {
    column-gap: 1.6rem;
    padding-top: 2.8rem;
  }

  .tr-footer__heading {
    margin-bottom: 0.4rem;
    font-size: 1.8rem;
    line-height: 2.6rem;
  }

  .tr-footer__nav ul {
    gap: 0;
  }

  .tr-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 4.4rem;
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

  .tr-footer__payments {
    gap: 1rem;
    padding-top: 2.4rem;
  }

  .tr-footer__payments-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .tr-footer__marks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.4rem;
  }

  .tr-footer__mark {
    height: 4.4rem;
  }

  .tr-footer__clouds {
    height: 6.4rem;
    background-size: auto 6.4rem;
  }

  /* bottom padding clears the floating buttons (back to top on the right, CookieFirst on the left:
     46 px, 15-16 px from the bottom, 80 px above the offer bar) so they never cover the seller data */
  .tr-footer__legal-inner {
    gap: 0.8rem;
    padding-top: 2rem;
    padding-bottom: 7.6rem;
  }

  .tr-footer__docs {
    line-height: 2.2rem;
  }

  .tr-footer__docs a {
    display: flex;
    align-items: center;
    min-height: 4.4rem;
  }

  .tr-footer__legal-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .tr-footer__copyright {
    text-align: left;
    white-space: normal;
  }

  /* one paragraph and one copyright line: comma instead of the line break */
  .tr-footer__sep {
    display: inline;
  }

  .tr-footer__br {
    display: none;
  }
}