/* Site footer (dark) — matches Figma node 1:8807 */

.site-footer {
  background: var(--color-grey-900);
  color: var(--color-grey-100);
  padding-block: var(--space-2xl);
}
.footer__inner {
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* ---- Top bar: logo + rating ---- */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  flex-wrap: wrap;
  padding-block: var(--space-2xl);
}
.footer__logo img { height: 16px; width: auto; }
.footer__logo .brand-logo__text { color: var(--color-white); }
.footer__rating { display: inline-flex; align-items: center; gap: var(--space-2x); font-size: var(--fs-body-s); color: var(--color-grey-100); }
.footer__rating-val { color: var(--color-grey-100); font-weight: 600; }
.footer__rating-txt { color: var(--color-grey-100); }

/* ---- Content: locations + link columns ---- */
.footer__content {
  display: flex;
  gap: var(--space-l);
  align-items: stretch;
  padding-block: var(--space-s);
}
.footer__locations {
  display: flex;
  gap: var(--space-l);
  flex: 0 0 auto;
  width: 453px;
  border-right: 1px solid var(--color-grey-800);
}
.footer__loc { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.footer__loc-city,
.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}
.footer__loc-city { font-weight: 600; color: var(--color-grey-100); }
.footer__loc-list { display: flex; flex-direction: column; gap: var(--space-3xs); }
.footer__loc-list li,
.footer__loc-list a {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 500;
  color: var(--color-grey-100);
}

.footer__links { flex: 1 1 auto; display: flex; gap: var(--space-l); justify-content: flex-end; }
.footer__col { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-s); }
.footer__col-title { font-weight: 500; color: var(--color-white); }
.footer__menu { display: flex; flex-direction: column; gap: var(--space-3xs); }
.footer__menu li a,
.footer__menu li .menu-item__button {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 400;
  color: var(--color-grey-100);
}
/* Modal-opening menu items render as <button> (udi_menu_modal_button()) - look like the links. */
.footer__menu .menu-item__button { padding: 0; text-align: left; }
.footer__loc-list a:hover,
.footer__menu a:hover,
.footer__menu .menu-item__button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Bottom bar ---- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  flex-wrap: wrap;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-grey-800);
}
.footer__copy { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--color-white); }
.footer__social { display: inline-flex; align-items: center; gap: var(--space-s); }
.footer__social-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); color: var(--color-white); }
.footer__social-list { display: inline-flex; align-items: center; gap: var(--space-s); }
.footer__social-list a { display: inline-flex; }
.footer__social-list img { width: 16px; height: 16px; object-fit: contain; }
.footer__social-list a:hover img { opacity: .7; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .footer__content { flex-direction: column; }
  .footer__locations { width: 100%; border-right: 0; padding-right: 0; padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-grey-800); }
  .footer__links { flex-wrap: wrap; justify-content: flex-start; }
  .footer__col { flex: 1 1 40%; }
}
@media (max-width: 600px) {
  /* The first accordion brings its own border-top and the bottom bar its own
     border-top — drop the doubled dividers around them (client, Figma). */
  .footer__locations { flex-direction: column; gap: var(--space-l); border-bottom: 0; }
  .footer__col { flex: 1 1 100%; }

  /* Rating stacks: stars on top, label below. */
  .footer__rating { flex-direction: column; align-items: flex-start; gap: var(--space-2x); }

  /* Socials centered, above the copyright. */
  .footer__bottom { flex-direction: column; align-items: center; gap: var(--space-l); text-align: center; }
  .footer__social { order: -1; }

  /* Link columns → accordions (footer.js toggles .is-collapsible / .is-open). */
  .footer__links { gap: 0; }
  .footer__col.is-collapsible { gap: 0; border-top: 1px solid var(--color-grey-800); }
  .footer__col.is-collapsible .footer__col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-s);
    cursor: pointer;
    user-select: none;
    /* Bigger accordion labels on mobile (client, Figma). */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
  }
  .footer__col.is-collapsible .footer__col-title::after {
    content: "";
    flex: 0 0 auto;
    margin-left: var(--space-s);
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .footer__col.is-collapsible.is-open .footer__col-title::after { transform: rotate(-135deg); }
  .footer__col.is-collapsible .footer__menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  .footer__col.is-collapsible.is-open .footer__menu { padding-bottom: var(--space-s); }
}