/* The site's bar and foot (components/Header.astro, Footer.astro). Tokens from the
   design system, and none of its component classes. One width for every page, the
   tour's: 1320px. The service's own pages have a smaller bar of their own
   (src/localize_edge/web/site.css); the two share no markup, and may differ. */

/* In-page links scroll rather than jump, on every page of ours, and land clear of the
   sticky bar; for anyone who asked for less motion they jump. */
html { scroll-behavior: smooth }
[id] { scroll-margin-top: 76px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* Its own box model: the docs page has no reset, and padding must not widen the bar. */
.site-bar, .site-bar *, .site-foot, .site-foot * { box-sizing: border-box }
.site-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px }
@media (max-width: 600px) { .site-wrap { padding: 0 16px } }

/* ---- the bar ---- */
.site-bar { position: sticky; top: 0; z-index: 40; background: var(--bg-base);
            border-bottom: 1px solid var(--border-divider); font-family: var(--font-sans) }
.site-bar .site-wrap { display: flex; align-items: center; gap: 28px; height: 60px }
.site-bar a { text-decoration: none }
.site-bar .site-lockup { display: flex; align-items: center; gap: 11px; color: var(--fg-primary) }
.site-mark svg { width: 24px; height: 24px; display: block }
.site-type { line-height: 0 }
.site-type svg { height: 17px; width: auto; display: block }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto }
.site-bar .site-link { padding: 6px 10px; border-radius: var(--radius-lg); white-space: nowrap;
                       color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium);
                       transition: color 150ms cubic-bezier(0, 0, .2, 1), background-color 150ms cubic-bezier(0, 0, .2, 1) }
.site-bar .site-link:hover { color: var(--fg-primary); background: var(--surface-hover) }
/* The page you are on. */
.site-bar .site-link[aria-current="page"] { color: var(--primary-ink); background: var(--primary-bg) }

.site-end { display: flex; align-items: center; gap: 12px }
/* The design system's primary button, in tokens: the docs page doesn't load it. */
.site-bar .site-cta { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; white-space: nowrap;
                      border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: #fff;
                      background: linear-gradient(to bottom, var(--primary-500), var(--primary-600));
                      box-shadow: 0 1px 3px var(--shadow-black-soft), inset 0 1px 0 var(--shadow-white-hairline);
                      position: relative; isolation: isolate; transition: transform 90ms cubic-bezier(0, 0, .2, 1) }
/* Its hover is a layer that fades in: a gradient cannot be animated (as .btn-primary). */
.site-bar .site-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
                             background: linear-gradient(to bottom, var(--primary-400), var(--primary-500));
                             opacity: 0; transition: opacity 150ms cubic-bezier(0, 0, .2, 1) }
.site-bar .site-cta:hover::after { opacity: 1 }
.site-bar .site-cta:active { transform: scale(.98) }
.site-theme { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
              border: 0; border-radius: var(--radius-lg); background: none; color: var(--fg-secondary);
              transition: color 150ms cubic-bezier(0, 0, .2, 1), background-color 150ms cubic-bezier(0, 0, .2, 1) }
.site-theme:hover { color: var(--fg-primary); background: var(--surface-hover) }
.site-moon { display: none }
:root[data-theme="dark"] .site-moon { display: block }
:root[data-theme="dark"] .site-sun { display: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-moon { display: block }
  :root:not([data-theme="light"]) .site-sun { display: none }
}
.site-bar :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px }

/* Narrow: the logo, the button and the theme stay; the links go behind one menu,
   the same links in the same order. */
.site-more { display: none; position: relative }
.site-more > summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px;
                       border-radius: var(--radius-lg); color: var(--fg-primary); cursor: pointer }
/* The menu's three lines turn into a cross, and back. */
.site-more > summary span, .site-more > summary span::before, .site-more > summary span::after {
  transition: transform 150ms cubic-bezier(0, 0, .2, 1), top 150ms cubic-bezier(0, 0, .2, 1), background-color 150ms cubic-bezier(0, 0, .2, 1) }
.site-more > summary::-webkit-details-marker { display: none }
.site-more > summary span, .site-more > summary span::before, .site-more > summary span::after {
  display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 1px; content: "" }
.site-more > summary span { position: relative }
.site-more > summary span::before { position: absolute; top: -5px }
.site-more > summary span::after { position: absolute; top: 5px }
.site-more[open] > summary span { background: transparent }
.site-more[open] > summary span::before { top: 0; transform: rotate(45deg) }
.site-more[open] > summary span::after { top: 0; transform: rotate(-45deg) }
.site-panel { position: absolute; top: calc(100% + 13px); right: -8px; width: min(280px, calc(100vw - 24px));
              padding: 6px; display: grid; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border-card);
              border-radius: var(--radius-xl); box-shadow: var(--shadow-xl) }
.site-bar .site-panel .site-link { padding: 10px 12px }
@media (prefers-reduced-motion: reduce) { .site-bar *, .site-bar *::before, .site-bar *::after { transition: none !important } }
@media (max-width: 900px) {
  .site-nav { display: none }
  .site-more { display: block }
  .site-end { margin-left: auto; gap: 8px }
}
@media (max-width: 400px) { .site-type svg { height: 15px } .site-bar .site-cta { padding: 0 11px } }

/* ---- the foot ---- */
.site-foot { padding: 32px 0 56px; color: var(--fg-tertiary); font: var(--text-sm)/1.55 var(--font-sans) }
.site-foot .site-wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline; justify-content: space-between }
.site-note { margin: 0; max-width: 70ch }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px }
.site-foot .site-wrap a { color: var(--fg-secondary); text-decoration: none }
.site-foot .site-wrap a:hover { color: var(--fg-primary) }
/* A link in the page's note is a link in a sentence, and looks like one. */
.site-foot .site-note a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 2px }
.site-foot .site-note a:hover { color: var(--fg-primary) }