/* manta: theme-header — header / navigation UX. Loads after the bundle CSS and after inject/theme.css,
 * so it supersedes the "header actions" block in theme.css. Markup comes from /inject/header.js. */

/* ---------- breakpoint ----------
 * Donor switches desktop nav -> burger at 767px. With Docs / X / App added, the desktop row only fits
 * from ~1024px, so the burger header is used up to 1023px. (theme.css forced nav.header-nav-desktop to
 * display:flex at every width, which put the desktop menus on phones and pushed the burger off-screen.) */
@media (max-width: 1023px) {
  .header-main nav.header-nav-desktop { display: none; }
  .header-main .header-nav-mobile { display: flex; align-items: center; justify-content: flex-end; }
}

/* ---------- desktop >= 1024px ---------- */
/* nav row is exactly the logo's height (2.4rem) so the 3.6rem App button centers on the logo line
 * without moving the menu text or growing the header. Scoped to >=1024 so it can never out-order the
 * <=1023 display:none above (equal specificity). */
@media (min-width: 1024px) {
  .header-main nav.header-nav-desktop { display: flex; flex-wrap: nowrap; align-items: center; height: 2.4rem; gap: 6rem; }
  .header-main nav.header-nav-desktop .header-nav-list { flex: none; }
}
.manta-actions { display: flex; align-items: center; flex: none; gap: 2.4rem; white-space: nowrap; }
.manta-actions a {
  color: currentColor; text-decoration: none; white-space: nowrap;
  font-family: var(--font-secondary, "ABC Repro Mono", "Courier New", monospace);
  font-size: var(--size-small, 1.2rem); font-weight: 400; line-height: 1.5; letter-spacing: .01em;
  transition: color var(--duration-default, .25s), border-color var(--duration-default, .25s), background-color var(--duration-default, .25s);
}
.manta-actions .manta-docs:hover { color: #95bfff; }
.manta-actions .manta-x { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .18); }
.manta-actions .manta-x:hover { color: #95bfff; border-color: #95bfff; }
.manta-x svg { display: block; width: 1.5rem; height: 1.5rem; fill: currentColor; }
.manta-app {
  display: inline-flex; align-items: center; gap: .8rem; height: 3.6rem; padding: 0 1.6rem; border-radius: .4rem;
  background: #95bfff; color: #000 !important; text-decoration: none; white-space: nowrap;
  font-family: var(--font-secondary, "ABC Repro Mono", "Courier New", monospace); font-size: 1.3rem; font-weight: 500; line-height: 1.5; letter-spacing: .01em;
}
.manta-app:hover { background: #b9cfea; }
.manta-app small { font-size: .95rem; line-height: 1; opacity: .7; letter-spacing: .08em; text-transform: uppercase; }
/* 1024–1180px: tighten the rhythm so the row never wraps */
@media (max-width: 1180px) {
  .header-main nav.header-nav-desktop { gap: 4.4rem; }
  .header-main nav.header-nav-desktop .header-nav-list { gap: 4.4rem; }
  .manta-actions { gap: 2rem; }
}

/* closed submenus are opacity:0 in the donor but still in the tab order; hide them for real once the
 * fade-out (.2s) has finished so Tab goes Products > Use cases > Explore > Learn > Docs > X > App */
.header-nav-desktop .header-nav-item .header-nav-submenu-wrapper { visibility: hidden; transition: visibility 0s linear .3s; }
.header-nav-desktop .header-nav-item.is-active .header-nav-submenu-wrapper { visibility: visible; transition-delay: 0s; }

/* keyboard focus (donor sets :focus-visible{outline:none}) */
.header-main .header-nav-link:focus-visible,
.header-main .header-nav-submenu-link:focus-visible,
.header-main .manta-actions a:focus-visible,
.header-main .manta-actions-mobile a:focus-visible,
.header-main .manta-mobile-extra a:focus-visible,
.header-main .header-nav-mobile-toggle:focus-visible,
.header-main .header-announcement-bar-close:focus-visible { outline: 2px solid #95bfff; outline-offset: 3px; border-radius: .3rem; }

/* ---------- mobile <= 1023px: X + App left of the burger ---------- */
@media (max-width: 1023px) {
  /* the row is 4.4rem tall (tap targets); pull it up so it centers on the 2.4rem logo line */
  .header-main .header-nav-mobile { gap: 1.2rem; margin-top: -1rem; }
  .header-main .header-nav-mobile .manta-actions-mobile { display: flex; align-items: center; gap: .4rem; order: -1; margin: 0; transition: opacity .2s ease; }
  .header-main .header-nav-mobile .header-nav-mobile-toggle { order: 0; }
  .header-main .header-nav-mobile .header-nav-mobile-toggle:before { inset: -1.5rem -1.3rem; }   /* burger hit area ~4.5x4.5rem */
  .manta-actions-mobile a {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 4.4rem; height: auto;
    color: currentColor; text-decoration: none; white-space: nowrap;
    font-family: var(--font-secondary, "ABC Repro Mono", "Courier New", monospace); font-size: 1.2rem; font-weight: 500; line-height: 1;
  }
  .manta-actions-mobile .manta-x { width: 4.4rem; }
  .manta-actions-mobile .manta-x:before { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: .6rem; }
  .manta-actions-mobile .manta-app { gap: .6rem; padding: 0 1.2rem; background: none; z-index: 0; }
  .manta-actions-mobile .manta-app:before { content: ""; position: absolute; inset: .5rem 0; background: #95bfff; border-radius: .4rem; z-index: -1; }
  .manta-actions-mobile .manta-app small { font-size: .9rem; }
  /* menu open: the panel slides over them; fade so nothing peeks during the transition */
  .header-main.is-mobile-menu-open .manta-actions-mobile { opacity: 0; pointer-events: none; }

  /* items appended into the opened menu */
  /* extra rows must not overflow the top on short screens (donor: height:100% + flex-end). Nuxt re-appends the
   * bundle CSS after the inject links at hydration, so this needs to beat the donor's (0,3,0) selector. */
  .header-main .header-nav-mobile .header-nav-mobile-panel .header-nav-mobile-list { height: auto; min-height: 100%; }
  .header-nav-mobile-item.manta-mobile-extra a.header-nav-mobile-link { display: block; width: fit-content; color: inherit; text-decoration: none; }
  .header-nav-mobile-item.manta-mobile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; margin-top: 1rem; }
  .header-nav-mobile-item.manta-mobile-row > a { flex: none; }   /* never squeeze: wrap the row instead of breaking "Follow on X" */
  .header-nav-mobile-item.manta-mobile-row a.manta-x-text {
    display: inline-flex; align-items: center; gap: .8rem; min-height: 4.4rem; color: inherit; text-decoration: none; white-space: nowrap;
    font-family: var(--font-secondary, "ABC Repro Mono", "Courier New", monospace); font-size: var(--size-small, 1.2rem); font-weight: 400; line-height: 1.5;
  }
  .header-nav-mobile-item.manta-mobile-row a.manta-x-text svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
  .header-nav-mobile-item.manta-mobile-row a.manta-x-text:after { content: "↗"; display: inline-block; }   /* donor's external-link glyph */
  .header-nav-mobile-item.manta-mobile-row .manta-app { display: inline-flex; margin-top: 0; height: 4.4rem; padding: 0 1.8rem; }
}
@media (max-width: 767px) { .header-main .header-nav-mobile { margin-top: -1.15rem; } }   /* logo is 2.1rem here */
@media (max-width: 360px) {
  .header-main .header-nav-mobile { gap: 1rem; }
  .header-main .header-nav-mobile .manta-actions-mobile { gap: .2rem; }
  .manta-actions-mobile .manta-app small { display: none; }   /* 320px: keep clear of the logo */
  .header-nav-mobile-item.manta-mobile-row { gap: 1rem 1.6rem; }
}

/* ---------- announcement bar: donor renders a close button but hides it (display:none); show it ---------- */
.header-main .header-announcement-bar .header-announcement-bar-close { display: flex; }
.header-main .header-announcement-bar .header-announcement-bar-close:before { content: ""; position: absolute; inset: -1.2rem; }   /* tap target */
.header-main .header-announcement-bar-close-icon rect { fill: currentColor; }
/* phones: the bar is a ticker and text runs under the icon; give the close a full-height strip in the bar's own colour */
@media (max-width: 767px) {
  .header-main .header-announcement-bar .header-announcement-bar-inner { background-color: inherit; }
  .header-main .header-announcement-bar .header-announcement-bar-close {
    background-color: inherit; top: 0; right: 0; height: 100%; width: 4.2rem; padding-left: .8rem; transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.4rem); mask-image: linear-gradient(to right, transparent, #000 1.4rem);
  }
  .header-main .header-announcement-bar .header-announcement-bar-close-icon { width: 1.4rem; height: 1.4rem; }
}

/* ticker fades out before the close button so the marquee never runs under the × (phones use the JS ticker) */
@media (max-width: 767px) {
  .header-announcement-bar .header-announcement-bar-inner { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 5.2rem), transparent calc(100% - 2.4rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 5.2rem), transparent calc(100% - 2.4rem), transparent 100%); }
  .header-announcement-bar .header-announcement-bar-close { -webkit-mask-image: none; mask-image: none; }
}