/* Styles for header.hbs — the sticky bar and the desktop mega drawer.
   Breakpoint: the desktop bar takes over at 1000px (matches legacy).

   Also owns the card primitives shared by both mega panels (`.mega-cards`,
   `.card-item`, `.card-more`): they are rendered by mega-crypto.hbs and
   mega-blog.hbs alike, so per the module rule they belong to the parent. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* `.container` centres the bar and caps its width; the inner bar owns its own gutters. */
.header {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  margin: 16px 16px 0;
  padding: 16px;
  background-color: var(--gray-0);
  border: 1px solid var(--stroke-neutral-1-default);
  border-radius: 12px;
}

.header-start {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-end {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.burger {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
  color: var(--on-background-neutral-subdued);
}

.brand {
  display: flex;
}

.brand img {
  width: 76px;
  height: auto;
}

.auth-link {
  padding: 8px;
  border-radius: 8px;
  background-color: var(--on-background-neutral-cta);
  color: var(--on-background-neutral-default);
  font-size: 14px;
  font-weight: 400;
}

/* --- Download button + hover popup host (desktop only) --- */
.download {
  position: relative;
  display: none;
  align-items: center;
  height: 100%;
}

/* Same top-to-bottom wipe as the mega drawer — legacy drives both from the one
   pair of enter/leave hooks. This box stays padding-free so height can reach 0;
   the popup's chrome lives on `.download-popup-body`. `visibility` flips
   instantly on open but waits out the collapse on close, which keeps the links
   inside unfocusable while the popup is shut. */
.download-popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 170px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    height 300ms ease-in-out,
    opacity 300ms ease-in-out,
    visibility 0s linear 300ms;
}

.download-popup.is-open {
  height: var(--download-popup-height, 0px);
  opacity: 1;
  visibility: visible;
  transition:
    height 300ms ease-in-out,
    opacity 0s,
    visibility 0s;
}

/* --- Mega drawer --- */
/* Opens as a top-to-bottom wipe. `--mega-height` is the active panel's measured
   height, published by the island; animating a real length works everywhere,
   whereas `grid-template-rows: 0fr → 1fr` is not interpolated by every engine.
   Opening is height-only, closing also fades — same asymmetry as the legacy
   onEnterTransition / onLeaveTransition hooks in the old Header.vue. */
.mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: fit-content;
  margin: -1px auto 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    height 300ms ease-in-out,
    opacity 300ms ease-in-out,
    visibility 0s linear 300ms;
}

.mega.is-open {
  height: var(--mega-height, 0px);
  opacity: 1;
  visibility: visible;
  transition:
    height 300ms ease-in-out,
    opacity 0s,
    visibility 0s;
}

/* The chrome, and a persistent one: it holds both grids and only they slide, so
   the box stays put through a panel swap the way the legacy `.container` did. */
.mega-panel {
  padding: 16px;
  background: var(--gray-0);
  border: 1px solid var(--stroke-neutral-1-default);
  border-radius: 0 0 24px 24px;
}

/* Swapping panels plays out-then-in, as legacy's `mode="out-in"` did: the grid on
   screen slides away over 0.28s and only then does the next one slide in, which is
   why the leave keyframes hold their end state (`forwards`) until the island
   swaps `shownPanel`. */
.mega-panel-cards--enter-forward {
  animation: mega-slide-forward 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-panel-cards--enter-backward {
  animation: mega-slide-backward 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-panel-cards--leave-forward {
  animation: mega-slide-leave-forward 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mega-panel-cards--leave-backward {
  animation: mega-slide-leave-backward 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mega-slide-forward {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mega-slide-backward {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mega-slide-leave-forward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(32px); }
}

@keyframes mega-slide-leave-backward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-32px); }
}

/* --- Card primitives shared by both panels --- */
.mega-cards {
  display: grid;
  gap: 8px;
}

.mega-empty {
  grid-column: 1 / -1;
  padding: 1rem;
  color: var(--on-background-neutral-subdued);
  font-size: 14px;
  text-align: center;
}

.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background-color: var(--background-neutral-2);
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.card-arrow {
  color: var(--on-background-neutral-default);
}

.card-more {
  align-items: center;
  justify-content: center;
  min-width: 64px;
}

.card-more-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-background-neutral-default);
  font-size: 14px;
}

.card-more-text > span {
  display: none;
}

/* 801, not 800: legacy hides the button with `max-width: 800px`, so 800px itself
   is still a phone as far as this button is concerned. */
@media (min-width: 801px) {
  .download {
    display: flex;
  }
}

@media (min-width: 1000px) {
  .header-inner {
    height: 72px;
    margin: 16px 1.5rem 0;
    padding: 0 24px;
  }

  .header-start {
    gap: 24px;
  }

  .burger {
    display: none;
  }

  .brand img {
    width: 96px;
  }

  .mega-cards {
    gap: 16px;
    width: 900px;
  }

  .card-item {
    padding: 12px;
  }

  .mega-cards .card-item:hover {
    background-color: var(--background-neutral-3);
  }

  .card-more {
    background-color: transparent;
  }

  /* Transparent at rest, so hovering it only has to bring the card tint back —
     legacy holds it one step lighter than a real card's hover. Must follow the
     `.card-item:hover` rule above: same specificity, so order decides. */
  .mega-cards .card-more:hover {
    background-color: var(--background-neutral-2);
  }

  .card-more-text > span {
    display: block;
  }
}

@media (min-width: 1400px) {
  .mega-cards {
    width: 974px;
  }
}