/* ============================================================
   BeeGroup — Components: navbar, footer, buttons
   ============================================================ */

/* ---------- Navbar ------------------------------------------
   Fase 02.2 — Dynamic navbar.
   The header is fixed (out of document flow) so the Hero can start
   at viewport top (no white strip above the video). It stays hidden
   while any part of the Hero is still in view, and slides in from
   above once the Hero is fully above the viewport. Toggle is driven
   by the `.is-visible` class, applied by assets/js/main.js via an
   IntersectionObserver on a sentinel inserted right after `#hero`.
---------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  background: var(--bg-white);
  border-bottom: 1px solid var(--color-border);

  /* Hidden by default — JS flips `.is-visible` once we're past the Hero. */
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 350ms ease-out,
    opacity   350ms ease-out,
    visibility 0s linear 350ms;
}
.site-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 350ms ease-out,
    opacity   350ms ease-out,
    visibility 0s linear 0s;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Sentinel used by the IntersectionObserver — zero visual footprint. */
.nav-sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--navbar-h);
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.navbar__brand img,
.navbar__brand svg {
  height: 32px;
  width: auto;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar__menu a {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding: var(--sp-2) 0;
  position: relative;
}
.navbar__menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width var(--dur-base) var(--ease);
}
.navbar__menu a:hover::after,
.navbar__menu a:focus-visible::after { width: 100%; }

.navbar__toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  color: var(--color-text);
}
.navbar__toggle-bar,
.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease);
}
.navbar__toggle-bar { position: relative; }
.navbar__toggle-bar::before,
.navbar__toggle-bar::after {
  content: '';
  position: absolute; left: 0;
}
.navbar__toggle-bar::before { top: -8px; }
.navbar__toggle-bar::after  { top: 8px;  }

/* Mobile */
@media (max-width: 900px) {
  .navbar__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .navbar__menu {
    position: absolute;
    top: var(--navbar-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--color-border);
    padding: var(--sp-4) var(--container-pad);
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease);
    box-shadow: var(--shadow-md);
  }
  .navbar__menu[data-open="true"] { transform: translateY(0); }
  .navbar__menu li { border-bottom: 1px solid var(--color-border); }
  .navbar__menu li:last-child { border-bottom: 0; }
  .navbar__menu a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: var(--fs-md);
  }
  .navbar__menu a::after { display: none; }
}

/* ---------- Buttons ----------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inv);
}
.btn--primary:hover { background: var(--color-primary-h); color: var(--color-text-inv); }

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: currentColor;
}
.btn--outline:hover { background: var(--color-text); color: var(--color-text-inv); }

/* ---------- Footer ------------------------------------------ */
.site-footer {
  background: var(--bg-green);
  color: var(--color-text-inv);
  padding-block: var(--sp-8);
}
.site-footer a { color: var(--color-text-inv); }
.site-footer a:hover { color: var(--color-primary); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__brand img { height: 44px; }
.site-footer__title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
  color: var(--bg-beige);
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--bg-beige);
}