/* Shared top bar, desktop + phone. Loaded on every regular page.
   Desktop (>=960px): logo and page links on the left, language / theme / Login /
   main button grouped on the right. Below 960px the text links, Login and the main
   button move into a hamburger menu; logo, EN/ID and the theme switch stay in the bar.
   Written to sit on top of each page's own nav styles, so it uses a few !important
   to beat the old inline link styles. */
:root{--nav-line:color-mix(in srgb,currentColor 16%,transparent);}
.nav-burger{display:none;}
.nav-menu{display:none;}

/* ── Desktop ── */
@media (min-width:960px){
  .nav .nav-inner{height:76px;padding-top:0 !important;padding-bottom:0 !important;gap:0 !important;}
  .nav .nav-controls{flex:1;margin-left:44px;gap:0 !important;}

  /* page links */
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta){
    position:relative;margin:0 !important;padding:10px 15px;
    font-family:inherit;font-size:14px !important;font-weight:500 !important;letter-spacing:.01em;
    color:inherit !important;opacity:.68;text-decoration:none;white-space:nowrap;
    transition:opacity .2s ease;
  }
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta)::after{
    content:"";position:absolute;left:15px;right:15px;bottom:3px;height:1.5px;border-radius:2px;
    background:var(--accent-strong,currentColor);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta):hover,
  .nav .nav-controls>a[aria-current="page"]:not(.nav-cta){opacity:1;}
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta):hover::after,
  .nav .nav-controls>a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1);}

  /* utilities: language + theme, pushed to the right */
  .nav .lang-toggle{
    margin-left:auto !important;padding:2px;gap:0;
    border:1px solid var(--nav-line);border-radius:99px;opacity:1;
  }
  .nav .lang-toggle button{font-size:11px;font-weight:700;letter-spacing:.07em;padding:5px 11px;border-radius:99px;}
  .nav .lang-toggle button:not(.active){opacity:.55;}
  .nav .lang-toggle button:not(.active):hover{opacity:1;}
  .nav .icon-btn{width:34px;height:34px;margin-left:8px;border:1px solid transparent;border-radius:99px;color:inherit;opacity:.75;transition:opacity .2s,background .2s;}
  .nav .icon-btn:hover{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent);border-color:transparent;}

  /* Login: quiet text link behind a hairline divider */
  .nav .nav-login{
    position:relative;margin-left:18px;padding:9px 14px;min-height:0;
    border:0 !important;background:none !important;box-shadow:none;
    font-family:inherit;font-size:14px;font-weight:600;color:inherit;opacity:.85;
    transition:opacity .2s;
  }
  .nav .nav-login::before{content:"";position:absolute;left:-10px;top:50%;width:1px;height:18px;background:var(--nav-line);transform:translateY(-50%);}
  .nav .nav-login:hover{opacity:1;color:inherit;}

  .nav .nav-login,.nav .nav-cta{white-space:nowrap;flex-shrink:0;}
  /* main button */
  .nav .nav-cta{
    margin-left:6px;min-height:42px;padding:0 20px;gap:8px;border-radius:99px;
    font-size:14px;font-weight:700;letter-spacing:.005em;
    box-shadow:0 8px 22px -10px var(--accent-glow,rgba(15,110,90,.55));
    transition:background .15s,transform .2s,box-shadow .2s;
  }
  .nav .nav-cta:not(:has(.arr))::after{content:"→";transition:transform .2s;}
  .nav .nav-cta .arr{display:inline-block;transition:transform .2s;}
  .nav .nav-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px var(--accent-glow,rgba(15,110,90,.7));}
  .nav .nav-cta:hover .arr,.nav .nav-cta:hover::after{transform:translateX(3px);}
}

/* narrow desktop (960–1100px): tighter links so the main button stays on one line */
@media (min-width:960px) and (max-width:1100px){
  .nav .nav-controls{margin-left:22px;}
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta){padding:10px 9px;}
  .nav .nav-controls>a:not(.nav-login):not(.nav-cta)::after{left:9px;right:9px;}
  .nav .nav-login{margin-left:12px;padding:9px 10px;}
  .nav .nav-cta{padding:0 16px;}
}

/* ── Phone and tablet: hamburger ── */
@media (max-width:959px){
  .nav-controls>a{display:none !important;}
  .nav-burger{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;padding:0;
    border-radius:99px;border:1px solid var(--border, var(--rule, rgba(128,128,128,.3)));
    background:transparent;color:var(--text-2, var(--text-muted, currentColor));cursor:pointer;
  }
  .nav-burger svg{width:18px;height:18px;}
  .nav-burger .nb-close{display:none;}
  .nav.menu-open .nav-burger .nb-open{display:none;}
  .nav.menu-open .nav-burger .nb-close{display:block;}
  .nav-menu{
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg-1, var(--bg, #080F0C));color:var(--text-1, var(--text, #fff));
    border-bottom:1px solid var(--border, var(--rule, rgba(128,128,128,.3)));
    box-shadow:0 28px 40px -24px rgba(0,0,0,.45);
    padding:6px 24px 24px;
    flex-direction:column;gap:0;
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;
  }
  .nav.menu-open .nav-menu{display:flex;animation:navMenuIn .22s ease both;}
  .nav.menu-open{background:var(--bg-1, var(--bg, #080F0C));border-bottom-color:var(--border, var(--rule, rgba(128,128,128,.3)));color:var(--text-1, var(--text, #fff));}
  .nav-menu a{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 2px;border-bottom:1px solid var(--border, var(--rule, rgba(128,128,128,.3)));
    font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.005em;
    color:inherit;text-decoration:none;
  }
  .nav-menu a:not(.nm-cta)::after{content:"→";font-weight:400;opacity:.3;transition:transform .2s,opacity .2s;}
  .nav-menu a:not(.nm-cta):active::after{transform:translateX(3px);opacity:.8;}
  .nav-menu a[aria-current="page"]{color:var(--accent-strong, var(--accent, inherit));}
  .nav-menu a[aria-current="page"]::after{opacity:1;}
  .nav-menu a.nm-cta{
    justify-content:center;gap:8px;
    margin-top:20px;border:0;border-radius:99px;
    background:var(--action, var(--accent-strong, var(--accent)));color:var(--on-action, #fff);padding:15px 16px;
  }
  .nav-menu a.nm-cta::after{content:"→";}
  @keyframes navMenuIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  .nav .nav-controls>a::after,.nav .nav-cta,.nav .nav-cta::after,.nav .nav-cta .arr{transition:none !important;}
  .nav.menu-open .nav-menu{animation:none;}
}

/* ── Reply-time promise (small, quiet) ── */
.reply-promise{font-size:12.5px;line-height:1.5;color:var(--text-4,#8a8f98);}
.reply-promise--packages{text-align:center;max-width:680px;margin:18px auto 0;}
.footer-col li.reply-promise{display:block;margin-top:2px;font-size:12px;line-height:1.5;opacity:.85;}


/* Playground: a game-controller icon pinned to the far right edge of the screen (desktop). On phones it lives in the menu instead. */
.nav .nav-controls>a.nav-play{display:none;}
@media (min-width:960px){
  .nav .nav-inner{padding-right:calc(clamp(16px,4vw,48px) + 64px) !important;}
  .nav .nav-controls>a.nav-play{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute !important;right:14px !important;top:50% !important;transform:translateY(-50%) !important;
    width:40px;height:40px;margin:0 !important;padding:0 !important;
    border-radius:99px;color:inherit !important;opacity:.78;text-decoration:none;
    transition:opacity .2s,background .2s;
  }
  .nav .nav-controls>a.nav-play::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:22px;background:var(--nav-line);transform:translateY(-50%);}
  .nav .nav-controls>a.nav-play::after{
    content:attr(data-label) !important;display:block !important;position:absolute !important;
    left:auto !important;right:0 !important;top:calc(100% + 6px) !important;bottom:auto !important;width:auto !important;height:auto !important;
    padding:4px 10px !important;border-radius:8px !important;background:#0A1A14 !important;color:#F0EDE6 !important;
    font-size:12px !important;font-weight:600 !important;line-height:1.3 !important;letter-spacing:.02em !important;white-space:nowrap !important;
    opacity:0 !important;transform:none !important;pointer-events:none;transition:opacity .15s !important;
  }
  .nav .nav-controls>a.nav-play:hover::after,.nav .nav-controls>a.nav-play:focus-visible::after{opacity:1 !important;transform:none !important;}
  .nav .nav-controls>a.nav-play svg{width:22px;height:22px;}
  .nav .nav-controls>a.nav-play:hover,.nav .nav-controls>a.nav-play[aria-current="page"]{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent);}
}