/* Approved American Peru brand lockups.
   Blue-backed artwork is reserved for light surfaces; the transparent artwork
   is used on the dark footer. Source proportions are never cropped or altered. */

.brand-lockup.brand-lockup-approved {
  flex: 0 0 auto;
  width: clamp(252px, 21vw, 306px);
  min-height: 0;
  gap: 0;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-logo-light {
  max-height: 63px;
  filter: drop-shadow(0 6px 14px rgba(30, 45, 61, 0.12));
}

/* First-paint fallback: if the framework briefly restores its legacy CMAP
   spans during hydration, show only the approved American artwork. */
.brand-lockup:not(.brand-lockup-approved) {
  width: clamp(208px, 16.8vw, 251px);
  min-height: 42px;
  padding: 6px 9px;
  background: #2e4d9a url('/images/logo-american-transparente-v1.png') center / calc(100% - 18px) auto no-repeat;
  border-radius: 10px;
  font-size: 0;
}

.brand-lockup:not(.brand-lockup-approved) > .brand-symbol,
.brand-lockup:not(.brand-lockup-approved) > .brand-copy {
  display: none !important;
}

.brand-lockup-approved:focus-visible,
.footer-brand-logo:focus-visible {
  outline: 3px solid var(--accent-red);
  outline-offset: 5px;
  border-radius: 9px;
}

/* The wider approved artwork needs a calmer offset than the former compact mark. */
.brand-lockup-approved + .main-navigation {
  margin-left: clamp(92px, 8.8vw, 124px);
  gap: clamp(20px, 2.2vw, 36px);
}

.footer-brand-logo {
  display: block;
  width: min(100%, 340px);
  margin-bottom: 20px;
}

.footer-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
}

.footer-brand-logo + p {
  margin-top: 0;
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .brand-lockup.brand-lockup-approved {
    width: 238px;
  }

  .brand-lockup-approved + .main-navigation {
    margin-left: clamp(52px, 5vw, 64px);
    gap: 18px;
  }

  .main-navigation > a:not(.nav-brochure),
  .nav-group > button {
    font-size: 0.94rem;
  }
}

@media (max-width: 1100px) {
  .brand-lockup.brand-lockup-approved {
    width: min(286px, 34vw);
    margin-right: auto;
  }

  .brand-lockup-approved + .main-navigation {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .brand-lockup:not(.brand-lockup-approved) {
    width: min(186px, calc(100vw - 156px));
    min-height: 34px;
    padding: 4px 6px;
    background-size: calc(100% - 12px) auto;
    border-radius: 7px;
  }

  .brand-lockup.brand-lockup-approved {
    width: min(230px, calc(100vw - 156px));
  }

  .brand-logo-light {
    max-height: 48px;
  }

  .footer-brand-logo {
    width: min(100%, 318px);
    margin-bottom: 18px;
  }
}

@media (max-width: 380px) {
  .brand-lockup.brand-lockup-approved {
    width: min(200px, calc(100vw - 150px));
  }
}

/* Keep the desktop navigation aligned even if the framework rebuilds the
   header after the first paint and temporarily changes the logo classes. */
@media (min-width: 1281px) {
  .header-shell > .main-navigation {
    margin-left: clamp(92px, 8.8vw, 124px) !important;
  }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  .header-shell > .main-navigation {
    margin-left: clamp(52px, 5vw, 64px) !important;
  }
}

@media (max-width: 1100px) {
  .header-shell > .main-navigation {
    margin-left: 0 !important;
  }
}