/* ============================================================
   Yammbo Shared — Mega Menu + Unified Footer
   v1.0 — 2026-05-08
   Used by: apex (yammbo.com), /bot/, /pos/, /web/, /music/, /flow/,
            /about/, /customers/, /docs/, /help/, /community/, /api/, /careers/
   ============================================================ */

/* ============ TOKENS (page can override) ============ */
:root {
  --ymb-bg: #0a0a0a;
  --ymb-fg: #fafafa;
  --ymb-muted: rgba(250,250,250,0.6);
  --ymb-border: rgba(255,255,255,0.08);
  --ymb-border-strong: rgba(255,255,255,0.15);
  --ymb-card: rgba(255,255,255,0.03);
  --ymb-card-hover: rgba(255,255,255,0.05);
  --ymb-accent: #fafafa;
  --ymb-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ymb-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Product accent tokens */
  --ymb-c-web: #1878f3;
  --ymb-c-store: #22c55e;
  --ymb-c-pos: #ff8a3d;
  --ymb-c-music: #1878f3;
  --ymb-c-vcard: #a855f7;
  --ymb-c-flow: #06d6a0;
  --ymb-c-bot: #06b6d4;
}

/* ============ MEGA MENU ============ */
/* Sits inside .nav-links — a single trigger that opens a wide panel */

.ymb-mega { position: relative; }

.ymb-mega-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ymb-mono);
  font-size: 13px; letter-spacing: 0.12em; font-weight: 600;
  color: var(--ymb-fg); opacity: 0.75;
  cursor: pointer; background: none; border: 0; padding: 0;
  transition: opacity 200ms;
}
.ymb-mega-trigger:hover { opacity: 1; }
.ymb-mega-trigger .ymb-caret {
  width: 10px; height: 10px; transition: transform 240ms cubic-bezier(0.2,0.7,0.2,1);
  opacity: 0.7;
}
.ymb-mega[data-open="true"] .ymb-caret { transform: rotate(180deg); }
.ymb-mega[data-open="true"] .ymb-mega-trigger { opacity: 1; }

.ymb-mega-panel {
  position: fixed; top: 72px; left: 50%; transform: translate(-50%, -8px);
  width: min(1080px, calc(100vw - 32px));
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ymb-border-strong);
  border-radius: 18px;
  padding: 28px;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.2,0.7,0.2,1), transform 240ms cubic-bezier(0.2,0.7,0.2,1), visibility 0s linear 240ms;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  z-index: 200;
}
.ymb-mega[data-open="true"] .ymb-mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 240ms cubic-bezier(0.2,0.7,0.2,1), transform 240ms cubic-bezier(0.2,0.7,0.2,1), visibility 0s;
}

.ymb-mega-products {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.ymb-mega-prod {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.ymb-mega-prod:hover {
  background: var(--ymb-card-hover);
  border-color: var(--ymb-border);
  transform: translateY(-1px);
}
.ymb-mega-prod-dot {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ymb-border);
}
.ymb-mega-prod-dot::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--prod-color, #fafafa);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--prod-color, #fafafa) 18%, transparent);
}
.ymb-mega-prod-text { display: flex; flex-direction: column; gap: 4px; }
.ymb-mega-prod-name {
  font-family: var(--ymb-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: var(--ymb-fg);
}
.ymb-mega-prod-tag {
  font-family: var(--ymb-sans); font-size: 13px; line-height: 1.4;
  color: var(--ymb-muted); font-weight: 400;
}

.ymb-mega-side { display: flex; flex-direction: column; gap: 22px; }
.ymb-mega-side-block h6 {
  font-family: var(--ymb-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; opacity: 0.45;
  margin: 0 0 12px;
}
.ymb-mega-side-block ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ymb-mega-side-block li a {
  font-family: var(--ymb-mono); font-size: 13px;
  color: var(--ymb-fg); opacity: 0.78;
  transition: opacity 200ms, transform 200ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.ymb-mega-side-block li a:hover { opacity: 1; transform: translateX(2px); }
.ymb-mega-side-block li a .ymb-arrow {
  opacity: 0; transition: opacity 200ms, transform 200ms;
}
.ymb-mega-side-block li a:hover .ymb-arrow {
  opacity: 0.7; transform: translateX(2px);
}

@media (max-width: 1024px) {
  /* Mega panel hidden on mobile — replaced by mobile burger menu */
  .ymb-mega-panel { display: none; }
}

/* ============ UNIFIED FOOTER ============ */
.ymb-footer {
  position: relative;
  border-top: 1px solid var(--ymb-border);
  padding: 80px 0 40px;
  background: var(--ymb-bg);
  overflow: hidden;
}
.ymb-footer::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 0%, rgba(255,255,255,0.025), transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 100%, rgba(255,255,255,0.02), transparent 70%);
  pointer-events: none;
}
.ymb-footer-inner {
  width: var(--container, min(1280px, calc(100% - 64px)));
  margin: 0 auto; position: relative; z-index: 2;
}
.ymb-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 1024px) {
  .ymb-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .ymb-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ymb-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ymb-footer { padding: 60px 0 30px; }
}
@media (max-width: 420px) {
  .ymb-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

.ymb-footer-brand img { height: 30px; margin-bottom: 18px; }
.ymb-footer-brand p {
  font-family: var(--ymb-mono); font-size: 13px;
  color: var(--ymb-muted); line-height: 1.6;
  max-width: 320px; margin: 0 0 22px;
}
.ymb-footer-contact {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--ymb-mono); font-size: 12px;
  margin-bottom: 22px;
}
.ymb-footer-contact a {
  color: var(--ymb-fg); opacity: 0.75;
  transition: opacity 200ms;
}
.ymb-footer-contact a:hover { opacity: 1; }

.ymb-footer-col h5 {
  font-family: var(--ymb-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; opacity: 0.45;
  margin: 0 0 18px;
}
.ymb-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.ymb-footer-col li a {
  font-family: var(--ymb-mono); font-size: 13px;
  color: var(--ymb-fg); opacity: 0.78;
  transition: opacity 200ms, transform 200ms;
  display: inline-block;
}
.ymb-footer-col li a:hover { opacity: 1; transform: translateX(2px); }

/* Footer bottom bar */
.ymb-footer-bottom {
  border-top: 1px solid var(--ymb-border);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.ymb-footer-copy {
  font-family: var(--ymb-mono); font-size: 12px;
  color: var(--ymb-muted);
}
.ymb-footer-legal {
  display: flex; gap: 22px; flex-wrap: wrap;
}
.ymb-footer-legal a {
  font-family: var(--ymb-mono); font-size: 12px;
  color: var(--ymb-muted); opacity: 0.85;
  transition: opacity 200ms;
}
.ymb-footer-legal a:hover { opacity: 1; color: var(--ymb-fg); }

/* Social icons */
.ymb-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.ymb-socials a {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ymb-border);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ymb-fg); opacity: 0.7;
  transition: opacity 200ms, transform 200ms, background 200ms, border-color 200ms;
}
.ymb-socials a:hover {
  opacity: 1; transform: translateY(-2px);
  background: var(--ymb-card-hover);
  border-color: var(--ymb-border-strong);
}
.ymb-socials a svg { width: 18px; height: 18px; }

/* ============ HEADER SPACING UPGRADE ============ */
/* Apply `.nav-roomy` modifier to existing .nav for breathable header */
.nav-roomy { padding: 22px 0 !important; }
.nav-roomy .nav-inner { gap: 36px !important; }
.nav-roomy .nav-links { gap: 30px !important; }
.nav-roomy .nav-logo { gap: 16px !important; }

@media (max-width: 1024px) {
  .nav-roomy { padding: 18px 0 !important; }
}

/* ============ LANGUAGE TOGGLE ============ */
.ymb-lang-toggle {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ymb-border-strong);
  border-radius: 999px;
}
.ymb-lang-toggle [data-lang-btn] {
  appearance: none;
  background: transparent;
  color: var(--ymb-fg);
  border: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--ymb-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms, background 200ms, color 200ms;
}
.ymb-lang-toggle [data-lang-btn]:hover { opacity: 0.95; }
.ymb-lang-toggle [data-lang-btn].active {
  opacity: 1;
  background: var(--ymb-fg);
  color: #0a0a0a;
}

/* Mobile: hide the desktop toggle (kept in DOM for the JS clone source) and
   render the cloned toggle inside the hamburger panel instead. */
@media (max-width: 1024px) {
  .nav-inner > .ymb-lang-toggle { display: none; }
}
.ymb-lang-toggle-mobile {
  align-self: flex-start;
  margin-top: 18px;
}
.ymb-lang-toggle-mobile [data-lang-btn] {
  padding: 6px 14px;
  font-size: 11px;
}