@import url('./site-fonts.css');

html {
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

[data-shared-header],
.site-header {
  display: block;
  flex-shrink: 0;
}

[data-shared-footer] {
  display: block;
  flex-shrink: 0;
  /* Match collapsed footer height so shared-footer.js replaceWith does not grow the page. */
  min-height: 656px;
  margin-top: 92px;
}

body.has-sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: visible;
}

body.has-sticky-footer > main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

body.has-sticky-footer > [data-shared-footer],
body.has-sticky-footer > .site-footer,
body.has-sticky-footer > footer.site-footer {
  flex-shrink: 0;
  margin-top: auto;
}

.site-footer {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 92px 0 0;
  padding: 130px 0 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  color: #ffffff;
  background: #8A43E9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1440' height='520' viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 58C47 42 76 65 119 54C164 43 183 18 229 35C276 52 314 53 361 41C407 29 447 13 493 37C539 61 563 79 611 62C659 45 690 34 739 34C788 34 823 52 871 59C919 66 948 62 994 56C1042 50 1068 30 1117 36C1165 42 1197 53 1244 40C1292 27 1322 9 1370 29C1398 41 1417 40 1440 36V478Q1440 520 1398 520H42Q0 520 0 478V58Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='1440' height='520' viewBox='0 0 1440 520' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 58C47 42 76 65 119 54C164 43 183 18 229 35C276 52 314 53 361 41C407 29 447 13 493 37C539 61 563 79 611 62C659 45 690 34 739 34C788 34 823 52 871 59C919 66 948 62 994 56C1042 50 1068 30 1117 36C1165 42 1197 53 1244 40C1292 27 1322 9 1370 29C1398 41 1417 40 1440 36V478Q1440 520 1398 520H42Q0 520 0 478V58Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.site-footer::before {
  content: "";
  display: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.site-footer-inner {
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 clamp(54px, 7.8vw, 154px);
  box-sizing: border-box;
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) repeat(3, minmax(104px, 0.55fr));
  gap: clamp(22px, 2.4vw, 40px);
  align-items: start;
  padding-bottom: 24px;
}

.site-footer-categories {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: clamp(22px, 2.4vw, 40px);
  align-items: start;
  padding-bottom: 54px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 24px;
}

.site-footer-brand {
  min-width: 0;
}

.site-footer-title {
  display: inline-block;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.site-footer-title .brand-i,
.site-footer-title .brand-rooks {
  color: #ffffff;
}

.site-footer-description {
  max-width: 268px;
  margin: 28px 0 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.site-footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.site-footer-social a {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(37, 23, 75, 0.18);
}

.site-footer-social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer-social-like {
  background: #6BC766;
}

.site-footer-social-camera {
  background: #EF6B6B;
}

.site-footer-social-play {
  background: #D9A227;
}

.site-footer-social-facebook svg,
.site-footer-social-youtube svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.site-footer-social-instagram svg {
  fill: none;
  stroke: currentColor;
}

.site-footer-group {
  display: grid;
  gap: 20px;
}

.site-footer-links-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 1.25em;
  letter-spacing: 0.01em;
}

.site-footer-links-title a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.site-footer-links-title a:hover,
.site-footer-links-title a:focus-visible {
  text-decoration: underline;
}

.site-footer-links {
  display: grid;
  gap: 14px;
}

.site-footer-links a {
  width: fit-content;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}

.site-footer-collapse-extra {
  display: grid;
  gap: 14px;
}

.site-footer-collapse-extra[hidden] {
  display: none;
}

.site-footer-view-more {
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.site-footer-view-more:hover,
.site-footer-view-more:focus-visible {
  color: #ffffff;
  outline: none;
}

.site-footer-links a:hover,
.site-footer-bottom-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-bottom {
  position: relative;
  z-index: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(34px, 4vw, 46px);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.site-footer-copy {
  margin: 0;
  color: inherit;
}

.site-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer-bottom-links a {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1280px) {
  [data-shared-footer] {
    min-height: 900px;
  }

  .site-footer-inner {
    padding-inline: clamp(32px, 6vw, 74px);
  }

  .site-footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 56px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer-categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 56px;
  }
}

@media (max-width: 1100px) {
  [data-shared-footer] {
    min-height: 1100px;
  }

  .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 76px;
  }

  .site-footer-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 56px;
  }

  .site-footer {
    padding-top: 64px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .site-footer::before {
    display: none;
  }
}

@media (max-width: 680px) {
  [data-shared-footer] {
    min-height: 1480px;
    margin-top: 64px;
  }

  .site-footer {
    margin-top: 64px;
    padding: 44px 0 0;
    border-radius: 0;
    font-size: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .site-footer-inner {
    padding-inline: 24px;
  }

  .site-footer::before {
    display: none;
  }

  .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    padding-bottom: 20px;
  }

  .site-footer-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer-description,
  .site-footer-links a,
  .site-footer-view-more,
  .site-footer-bottom {
    font-size: 16px;
  }

  .site-footer-links {
    gap: 16px;
  }

  .site-footer-bottom {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 0 22px;
  }

  .site-footer::after {
    bottom: 92px;
  }
}