/* ==========================================================================
   Deskman Studio — SITE NAV (shared)
   The floating pill + electric ticker + mega menu, in one stylesheet that
   loads on every request.

   Why this file exists
   --------------------
   The home design and the interior design are two separate systems that
   collide on generic names (.btn, .nav, .wrap all mean different things in
   each), so functions.php loads exactly one of home.css / main.css per
   request. The nav used to be defined twice — once in each — with different
   markup, different class names and a different scroll class, which is why
   the header looked different on the home page than everywhere else.

   Now the nav is defined once, here, and this file loads alongside whichever
   page stylesheet is in play. To survive that, it depends on nothing from
   either of them: every value it needs is declared below under its own
   --dskn-* prefix. That prefix is deliberate — --nav-h, --ticker-h and
   --nav-top already exist in BOTH page stylesheets with different values,
   because each uses them to pad its own hero clear of the fixed header.
   Those stay where they are and keep their own jobs; nothing here reads them,
   so the nav renders identically no matter which stylesheet won.

   The one contract between this file and the others: the nav block is 96px
   tall (--dskn-block), and each page stylesheet's own tokens must sum to the
   same 96px so heroes clear it. Change a number here, change them there.

   Load order: enqueued last, after home.css / main.css, so it wins any
   leftover conflict on .nav / .ticker / .mega without needing !important.
   ========================================================================== */

:root{
  /* ---- geometry ---------------------------------------------------------
     In px, deliberately, and this is the one thing not to "tidy up" into rem.
     The two page stylesheets disagree on the root font size — home.css leaves
     it at the browser default 16px, main.css sets html{font-size:15px} (14px
     on phones) — so an identical rem value rendered the nav ~6% smaller on
     every interior page than on the home page: 645px wide against 688px, a
     53px pill against 56px. The nav is fixed chrome authored against a 16px
     baseline and it has to be the same object on every page, so it states its
     own sizes outright and ignores whatever either stylesheet does to :root.
     Browser zoom still scales all of this normally.

     The strip is a separate bar floating under the pill, not a tab tucked
     behind it, so the paper shows through --dskn-gap. */
  --dskn-top:16px;          /* how far off the top the pill sits */
  --dskn-h:56px;            /* pill height */
  --dskn-gap:8px;           /* clear paper gap between pill and ticker */
  --dskn-ticker-h:16px;     /* the electric strip */
  --dskn-w:688px;           /* pill + ticker width at rest */
  --dskn-w-tight:576px;     /* …and once the page has scrolled */
  --dskn-pad:24px;          /* viewport gutter the pill must not exceed */

  /* Total height of the fixed header block: 96px. Anchor scroll-margin below
     uses it, and each page stylesheet pads its own hero to match — home.css
     via its --nav-top/--nav-h/--ticker-gap/--ticker-h, main.css via its own.
     Change the height here and those must follow. */
  --dskn-block:calc(var(--dskn-top) + var(--dskn-h) + var(--dskn-gap) + var(--dskn-ticker-h));

  /* ---- palette ----------------------------------------------------------
     Hard values, not references. Both page stylesheets happen to define
     --electric and --paper identically today, but relying on that would put
     the nav's appearance at the mercy of an edit in either file. */
  --dskn-ink:#1D1B1B;
  --dskn-shell:#141313;     /* pill + mega background */
  --dskn-paper:#F4F4F4;
  --dskn-electric:#A1FF62;
  --dskn-grey:#3A3636;      /* the Contact button */
  --dskn-grey-hi:#4A4545;
  --dskn-sub:#8C8888;       /* the "STUDIO" half of the wordmark */
  --dskn-link:#CFCBCB;

  --dskn-font:"PP Neue Montreal","Neue Montreal","Onest",-apple-system,Segoe UI,sans-serif;
  --dskn-mono:"JetBrains Mono",ui-monospace,monospace;
  --dskn-ease:cubic-bezier(.62,.05,0,1);
  --dskn-pill:999px;
}
@media (max-width:900px){ :root{ --dskn-pad:16px; } }

/* ==========================================================================
   PILL
   ========================================================================== */
.navshell{
  position:fixed; top:var(--dskn-top); left:0; right:0; z-index:90;
  display:flex; flex-direction:column; align-items:center;
  /* the shell spans the full width so the pill can centre in it, but only
     its children may take pointer events — otherwise it would swallow every
     click across the top of the page */
  pointer-events:none;
}
.navshell > *{ pointer-events:auto; }

.nav{
  position:relative; z-index:2;
  width:min(var(--dskn-w), calc(100vw - 2 * var(--dskn-pad)));
  height:var(--dskn-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline:8px;
  background:var(--dskn-shell); color:var(--dskn-paper);
  font-family:var(--dskn-font); font-size:16px;
  border-radius:var(--dskn-pill);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
  border:0;
  transition:width .55s var(--dskn-ease);
}
html.tight .nav{ width:min(var(--dskn-w-tight), calc(100vw - 2 * var(--dskn-pad))); }

.nav .nav-l{ display:flex; align-items:center; padding-left:8px; }

.nav .menu-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--dskn-font); font-size:16px; font-weight:400;
  letter-spacing:-.01em; text-transform:none; color:var(--dskn-paper);
  background:none; border:0; padding:0; cursor:pointer;
}
.nav .menu-btn .ic{ display:inline-flex; flex-direction:column; gap:5px; }
.nav .menu-btn i{
  display:block; width:20px; height:1.5px; background:currentColor;
  border-radius:2px; transition:transform .3s var(--dskn-ease);
}
.nav .menu-btn[aria-expanded="true"] .ic i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav .menu-btn[aria-expanded="true"] .ic i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* The wordmark swaps to the studio glyph once the page has moved off the top.
   Both states are always in the DOM and only opacity/transform change, so
   there is no reflow and no flash if the class never lands. */
.nav .brand{
  justify-self:center; position:relative; display:grid; place-items:center;
  min-width:112px; height:100%;
  font-family:var(--dskn-font); font-weight:700; font-size:18.4px;
  letter-spacing:-.04em; text-transform:none; color:var(--dskn-paper);
}
.nav .brand .full{ transition:opacity .3s var(--dskn-ease), transform .3s var(--dskn-ease); }
.nav .brand .full em{ font-style:normal; color:var(--dskn-sub); }
.nav .brand .mark{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:24px; line-height:1; color:var(--dskn-electric);
  opacity:0; transform:scale(.5) rotate(-90deg);
  transition:opacity .3s var(--dskn-ease), transform .45s var(--dskn-ease);
}
html.tight .nav .brand .full{ opacity:0; transform:scale(.85); }
html.tight .nav .brand .mark{ opacity:1; transform:none; }

.nav .nav-r{ justify-self:end; display:flex; align-items:center; gap:8px; }

/* Fully specified rather than inherited: on interior pages main.css's .btn is
   a squared, bordered button, and on the home page home.css's is a pill. The
   nav needs the same two buttons either way, so it states all of it. */
.nav .nav-r .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:36.8px; padding-inline:16px;
  border:0; border-radius:var(--dskn-pill);
  font-family:var(--dskn-font); font-size:15.2px; font-weight:500;
  letter-spacing:-.01em; white-space:nowrap;
  transition:background .25s var(--dskn-ease), color .25s var(--dskn-ease),
             transform .25s var(--dskn-ease);
}
.nav .nav-r .btn:hover{ transform:translateY(-1px); }
.nav .nav-r .btn.grey{ background:var(--dskn-grey); color:var(--dskn-paper); }
.nav .nav-r .btn.grey:hover{ background:var(--dskn-grey-hi); }
.nav .nav-r .btn.btn-lime{ background:var(--dskn-electric); color:var(--dskn-ink); }

/* ==========================================================================
   TICKER
   ========================================================================== */
.navshell .ticker{
  position:relative; z-index:1;
  margin-top:var(--dskn-gap);
  width:min(var(--dskn-w), calc(100vw - 2 * var(--dskn-pad)));
  height:var(--dskn-ticker-h);
  padding:0; border:0; border-radius:4.8px;
  background:var(--dskn-electric); color:var(--dskn-ink);
  overflow:hidden; display:flex; align-items:center;
  transition:opacity .4s var(--dskn-ease), transform .4s var(--dskn-ease),
             width .55s var(--dskn-ease);
}
html.tight .navshell .ticker{ opacity:0; transform:translateY(-9.6px); pointer-events:none; }
.navshell .ticker .tk{ display:inline-flex; white-space:nowrap; animation:dskn-mq 26s linear infinite; }
.navshell .ticker .tk span{
  font-family:var(--dskn-mono); font-size:9.5px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  padding-inline:16px; line-height:1;
}
@keyframes dskn-mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .navshell .ticker .tk{ animation:none; } }

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.mega{
  position:fixed; left:var(--dskn-pad); right:var(--dskn-pad);
  top:calc(var(--dskn-top) + var(--dskn-h) + 7.2px);
  z-index:88;
  background:var(--dskn-shell); color:var(--dskn-paper);
  font-family:var(--dskn-font); font-size:16px;
  border-radius:25.6px; padding:40px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--dskn-ease), transform .4s var(--dskn-ease), visibility .4s;
  max-width:1408px; margin-inline:auto;
}
.mega.open{ opacity:1; visibility:visible; transform:none; }
.mega .mega-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:40px; }
.mega h4{
  font-family:var(--dskn-mono); font-size:11px; font-weight:400;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--dskn-electric); margin:0 0 16px;
}
.mega a{
  display:block; padding:8px 0;
  font-family:var(--dskn-font); font-size:18.4px; font-weight:400;
  color:var(--dskn-link); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.25s var(--dskn-ease);
}
.mega a:hover{ color:var(--dskn-electric); padding-left:8px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .nav .nav-r .btn.grey{ display:none; }
  .mega .mega-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px){
  /* Menu + wordmark + Start don't fit on a phone, so the brand shows only its
     mark — the same swap the nav already makes once you start scrolling. */
  .nav .brand{ min-width:40px; }
  .nav .brand .full{ opacity:0; transform:scale(.85); }
  .nav .brand .mark{ opacity:1; transform:none; }
  .nav{ padding-inline:8px; }
  .nav .nav-l{ padding-left:8px; }
  .nav .nav-r .btn{ padding-inline:16px; }
}

/* ==========================================================================
   ADMIN BAR
   The nav is position:fixed at --dskn-top. Logged in, WordPress puts its own
   bar in that same space and the pill hides behind it. Push the shell down by
   the bar's height rather than changing --dskn-top, so the anchor
   scroll-margin below stays in step.
   ========================================================================== */
body.admin-bar .navshell{ top:calc(var(--dskn-top) + 32px); }
body.admin-bar .mega{ top:calc(var(--dskn-top) + var(--dskn-h) + 7.2px + 32px); }
@media screen and (max-width:782px){
  body.admin-bar .navshell{ top:calc(var(--dskn-top) + 46px); }
  body.admin-bar .mega{ top:calc(var(--dskn-top) + var(--dskn-h) + 7.2px + 46px); }
}

/* ==========================================================================
   ANCHOR LANDING
   scroll-behavior:smooth plus a fixed nav means #work lands underneath the
   pill. Give every in-page target the block's full height as margin.
   ========================================================================== */
:target,
#top,#studio,#services,#work,#pricing,#contact{
  scroll-margin-top:calc(var(--dskn-block) + 16px);
}
body.admin-bar :target,
body.admin-bar #top,body.admin-bar #studio,body.admin-bar #services,
body.admin-bar #work,body.admin-bar #pricing,body.admin-bar #contact{
  scroll-margin-top:calc(var(--dskn-block) + 16px + 32px);
}

@media print{
  .navshell,.mega{ display:none !important; }
}


/* ==========================================================================
   LOCATIONS STRIP
   Printed by template-parts/locations.php in both footers. Lives here rather
   than in main.css or home.css because this is the one stylesheet that loads
   on every request, so the strip looks identical on the home page and the
   interior pages instead of drifting between the two design systems.
   ========================================================================== */
.dskl{ padding:40px 0 24px; }
.dskl .wrap{ width:100%; max-width:1408px; margin-inline:auto; padding-inline:24px; }
.dskl-h{
  font-family:var(--dskn-mono,ui-monospace,monospace); font-size:11px; font-weight:400;
  text-transform:uppercase; letter-spacing:.1em; color:#817F7F; margin:0 0 16px;
}
.dskl-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.dskl-list a{
  display:inline-flex; align-items:center; min-height:32px; padding:0 14px;
  border:1px solid #D8D8D8; border-radius:999px;
  font-family:var(--dskn-font,inherit); font-size:14px; color:#312E2E; text-decoration:none;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.dskl-list a:hover{ background:#201D1D; border-color:#201D1D; color:#F4F4F4; }
.dskl-list a[aria-current="page"]{ background:#A1FF62; border-color:#201D1D; color:#201D1D; }
.dskl-list .dskl-all{ border-style:dashed; }
@media (pointer:coarse){ .dskl-list a{ min-height:44px; } }