/* =============================================================
   FOOTER — 4-row layout
   Mobile: flex-column | Desktop: row/grid
   ============================================================= */

/* -----------------------------------------------------------------------
   0. Scroll-entrance animations
   ----------------------------------------------------------------------- */

[data-footer-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-footer-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger child elements */
[data-footer-animate]:nth-child(2) {
  transition-delay: 0.1s;
}
[data-footer-animate]:nth-child(3) {
  transition-delay: 0.18s;
}

/* @media (prefers-reduced-motion: reduce) {
  [data-footer-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
} */

/* -----------------------------------------------------------------------
   1. Base shell
   ----------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-black);
  color: var(--color-gray-400);
  /* border-top: 1px solid var(--color-white-12); */
}

/* -----------------------------------------------------------------------
   2. ROW 1 — CTA
   ----------------------------------------------------------------------- */

.footer-cta {
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-white-12);
}

.footer-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}

.footer-cta__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  max-width: 100%;
  margin: 0;
  text-align: center;
}

.footer-cta__btn {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-8);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  gap: var(--space-3);
  color: var(--color-white) !important;
  text-decoration: none;
}

/* Desktop: side by side */
@media (min-width: 768px) {
  .footer-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-cta__title {
    font-size: var(--font-size-2xl);
    max-width: 55ch;
  }
}

/* -----------------------------------------------------------------------
   3. BODY (rows 2-4 wrapper)
   ----------------------------------------------------------------------- */

.footer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block: var(--space-12);
}

/* -----------------------------------------------------------------------
   4. ROW 2 — OFFICES
   ----------------------------------------------------------------------- */

.footer-offices__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-8);
  line-height: var(--line-height-snug);
}

.footer-offices__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Each office: semantic <address> */
.footer-office {
  font-style: normal; /* Override browser italic on <address> */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-office__local {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  display: block;
  margin-bottom: var(--space-2);
}

.footer-office__line {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  line-height: var(--line-height-relaxed);
  display: block;
}

/* Tablet+: 2-column grid */
@media (min-width: 640px) {
  .footer-offices__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-10);
  }
}

/* Desktop: 3-column (auto-fit so 1 or 2 offices still look fine) */
@media (min-width: 1024px) {
  .footer-offices__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------------------------------
   5. ROW 3 — NAVIGATION + SOCIALS
   ----------------------------------------------------------------------- */

.footer-nav-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border-top: 1px solid var(--color-white-12);
  padding-top: var(--space-10);
}

/* ----- Footer Nav ----- */
.footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Top-level items as "columns" on mobile use accordion pattern */
.footer-nav__list > .menu-item {
  border-bottom: 1px solid var(--color-white-12);
}

/* Top-level links (parent) */
.footer-nav__list > .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-4) 0;
  transition: color var(--transition-fast);
  letter-spacing: var(--letter-spacing-wide);
}

.footer-nav__list > .menu-item > a:hover {
  color: var(--color-primary);
}

/* Chevron toggle indicator for items with children */
.footer-nav__list > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.footer-nav__list > .menu-item-has-children.is-open > a::after {
  transform: rotate(180deg);
}

/* Sub-menu: hidden by default on mobile */
.footer-nav__list .sub-menu {
  list-style: none;
  padding: 0 0 var(--space-4) 0;
  margin: 0;
  display: none;
}

.footer-nav__list > .menu-item-has-children.is-open > .sub-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Simple items (no children): no chevron, no border */
.footer-nav__list > .menu-item:not(.menu-item-has-children) > a::after {
  display: none;
}

/* Sub-menu links */
.footer-nav__list .sub-menu .menu-item a {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: block;
}

.footer-nav__list .sub-menu .menu-item a:hover {
  color: var(--color-white);
}

/* Highlighted link in menu (e.g. "Fale com a gente") */
.footer-nav__list .menu-item.menu-item--cta > a,
.footer-nav__list .sub-menu .menu-item.menu-item--cta > a {
  color: var(--color-primary);
}

/* ----- Social Links ----- */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}

.footer-social__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  background-color: var(--color-gray-900);
  border: 1px solid var(--color-white-12);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.footer-social__link:hover {
  color: var(--color-white);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.footer-social__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* === DESKTOP: Nav row side by side, Nav as columns === */
@media (min-width: 1024px) {
  .footer-nav-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-12);
  }

  /* On desktop, nav becomes multi-column */
  .footer-nav {
    width: 65%;
  }

  .footer-nav__list {
    flex-direction: row;
    gap: var(--space-8);
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .footer-nav__list > .menu-item {
    border-bottom: none;
    flex: 0 0 auto;
    min-width: 8rem;
  }

  /* On desktop, top-level link is always a column header  */
  .footer-nav__list > .menu-item > a {
    padding: 0 0 var(--space-3) 0;
    pointer-events: none; /* column headers, not links */
    cursor: default;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-white);
  }

  /* Exception: items without children are real links */
  .footer-nav__list > .menu-item:not(.menu-item-has-children) > a {
    pointer-events: auto;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-gray-400);
  }

  .footer-nav__list > .menu-item:not(.menu-item-has-children) > a:hover {
    color: var(--color-white);
  }

  /* Hide chevron on desktop */
  .footer-nav__list > .menu-item-has-children > a::after {
    display: none;
  }

  /* Sub-menus always visible on desktop */
  .footer-nav__list .sub-menu,
  .footer-nav__list > .menu-item-has-children.is-open > .sub-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-social {
    width: 30%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
  }
}

/* -----------------------------------------------------------------------
   6. ROW 4 — COPYRIGHT
   ----------------------------------------------------------------------- */

.footer-copy {
  border-top: 1px solid var(--color-white-12);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: center;
}

.footer-copy p {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  max-width: none;
  margin: 0;
}

@media (min-width: 1024px) {
  .footer-copy {
    text-align: right;
  }
}