/* ==========================================================================
   HABLADÓNDE · IDENTIDAD DE MARCA
   Mantiene separados los colores del logotipo y los colores funcionales UI.
   ========================================================================== */

body.theme-habla-forest {
  /* Colores maestros para aplicaciones sobre fondos claros. */
  --habladonde-brand-navy: #011a4c;
  --habladonde-brand-green: #079a14;

  /* Variante inversa accesible para el encabezado verde oscuro. */
  --habladonde-brand-reverse-primary: #ffffff;
  --habladonde-brand-reverse-green: #39ff88;
  --habladonde-brand-reverse-copy: #d6e8dd;
}

body.theme-habla-forest .topbar .brand {
  gap: 8px;
  padding: 4px 6px 4px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--habladonde-brand-reverse-primary);
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

body.theme-habla-forest .topbar .brand:hover,
body.theme-habla-forest .topbar .brand:active,
body.theme-habla-forest .topbar .brand:focus:not(:focus-visible) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
}

body.theme-habla-forest .topbar .brand:focus-visible {
  outline: none;
  outline-offset: 0;
}

body.theme-habla-forest .topbar .brand .brand-logo {
  filter:
    drop-shadow(0 0 8px rgba(85, 245, 154, 0.18))
    drop-shadow(0 5px 10px rgba(0, 14, 9, 0.28));
}

body.theme-habla-forest .topbar .brand .brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--habladonde-brand-reverse-primary);
  font-family: "Outfit", "Inter", sans-serif;
  text-shadow: 0 2px 10px rgba(0, 14, 9, 0.3);
  text-decoration: none;
}

body.theme-habla-forest
  .topbar
  .brand:focus-visible
  .brand-wordmark {
  text-decoration-line: underline;
  text-decoration-color: var(--habladonde-brand-reverse-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.theme-habla-forest
  .topbar
  .brand
  .brand-wordmark__habla {
  color: var(--habladonde-brand-reverse-primary);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.14),
    0 2px 10px rgba(0, 14, 9, 0.3);
}

body.theme-habla-forest
  .topbar
  .brand
  .brand-wordmark__donde {
  color: var(--habladonde-brand-reverse-green);
  text-shadow:
    0 0 12px rgba(57, 255, 136, 0.2),
    0 2px 10px rgba(0, 14, 9, 0.3);
}

body.theme-habla-forest .topbar .brand .brand-copy small {
  color: var(--habladonde-brand-reverse-copy);
  text-shadow: 0 2px 8px rgba(0, 14, 9, 0.24);
}

@media (max-width: 580px) {
  body.public-session:not(.public-account-page) {
    --public-header-height: 106px;
  }

  body.public-session:not(.public-account-page)
    .topbar--public {
    grid-template-rows: 50px 44px;
  }

  body.public-session.public-account-page
    .topbar--public
    .brand {
    gap: 5px;
    padding: 1px 4px 1px 0;
  }

  body.public-session.public-account-page
    .topbar--public
    .brand
    img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body.theme-habla-forest:not(.public-session)
    .topbar--authenticated
    .brand {
    gap: 3px;
    max-width: 116px;
    padding: 2px 3px 2px 0;
    border-radius: 8px;
  }
}

@media (max-width: 340px) {
  body.theme-habla-forest:not(.public-session)
    .topbar--authenticated
    .brand {
    padding-right: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-habla-forest .topbar .brand {
    transition: none;
  }
}