/* DualCore Surface: the header, menu and page-to-page transition shared by every page.
   Colours come from the page: --fg / --fg-2 / --hair / --btn-bg / --btn-fg (see ocean.css and pages.css). */

/* the WordPress admin bar (administrators only): every fixed element starts below it. js/shell.js keeps --ab
   in step when a small phone scrolls the bar away; --ab-doc stays the height WordPress moves the page down by */
body.admin-bar { --ab: 32px; --ab-doc: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --ab: 46px; --ab-doc: 46px; } }

/* moving between pages crossfades instead of flashing white (Chrome 126+, Safari 18.2+; others just load) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; } }

.top {
  position: fixed; z-index: 30; top: var(--ab, 0px); left: 0; right: 0; height: var(--top-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  color: var(--fg); pointer-events: none;
  transition: color .45s var(--e-io), background-color .45s var(--e-io), box-shadow .45s var(--e-io);
}
.top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.mark { width: 20px; height: 29px; overflow: visible; }
.mark-a { fill: var(--orange); }
.mark-b { fill: currentColor; transition: fill .45s var(--e-io); }
.wordmark { font-weight: 600; font-size: 22px; letter-spacing: -.045em; line-height: 1; }
.brand-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); margin-left: 4px; padding-top: 2px; }

/* plain words, in the order a visitor expects */
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 10px 12px; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; color: var(--fg-2);
  transition: color .25s;
}
.nav a:hover, .nav a[aria-current] { color: var(--fg); }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current]::before {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange);
}

.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 20px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 24px -12px rgba(0, 30, 35, .45);
  transition: background-color .45s var(--e-io), color .45s var(--e-io), translate .35s var(--e-out), box-shadow .3s;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--e-out); }
.pill:hover svg { transform: translate(2px, -2px); }
/* Home carries its own big "Get a free preview" button */
html[data-page="home"] .top .pill { display: none; }

.menu-btn {
  display: none; align-items: center; gap: 9px; height: 44px; padding: 0 17px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255, 255, 255, .22); font: inherit; font-size: 14.5px; font-weight: 500; color: inherit; cursor: pointer;
}
.menu-btn .bars { position: relative; width: 14px; height: 9px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--e-out), top .3s var(--e-out); }
.menu-btn .bars::before { top: 1px; } .menu-btn .bars::after { top: 6.5px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }
html.is-under .menu-btn { background: rgba(4, 30, 38, .35); }

/* the phone menu: every page by name; the depths are a small nod, never the label */
.menu {
  position: fixed; z-index: 29; left: 10px; right: 10px; top: calc(var(--ab, 0px) + var(--top-h) + 4px); padding: 12px 18px 18px; border-radius: 22px;
  background: #f6faf8; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 30, 40, .6);
}
.menu[hidden] { display: none; }
.menu ol { margin: 0; padding: 0; list-style: none; }
.menu li a { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 13px 2px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid rgba(127, 150, 150, .25); }
.menu li a[aria-current]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 99, 54, .22); }
/* the depth is a small nod in lowercase ("30 m", never "30 M", which reads as millions) */
.menu .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; text-transform: none; color: #6b7d7c; }
.menu .menu-cta { display: flex; margin-top: 16px; height: 50px; border-radius: 999px; align-items: center; justify-content: center; background: var(--ink); color: var(--cream); font-size: 15px; font-weight: 500; }
.menu .menu-mail { display: block; margin-top: 12px; text-align: center; font-size: 14px; color: #33494a; padding: 8px 0; }

@media (max-width: 860px) {
  .nav, .top .pill { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 861px) { .menu { display: none !important; } }
@media (max-width: 760px) {
  .wordmark { font-size: 20px; }
  .brand-label { display: none; }
}
@media (pointer: coarse) { .brand { padding: 8px 0; } }