/* THE SITE'S HEADER AND FOOTER FOR THE STATIC PAGES -- how it works, privacy,
   terms. A COPY of the block at the end of src/brand.css, which the app's own
   pages read through src/parts/site.jsx; these pages are served straight out
   of dist/ and cannot import it. Change both together.

   The one difference is the wordmark, which is a picture here rather than
   the app's drawn mark. */

.site-head {
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1228px;
  min-height: 92px;
  margin: 0 auto;
  /* Well off the top edge rather than against it: the mark and the links sit
     a clear way down the page, asked for twice. */
  padding: 52px 24px 0;
}
.site-home { display: inline-flex; color: #111111; }
.site-mark { display: block; height: 34px; width: auto; }
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
}
.site-nav[data-asking] { visibility: hidden; }
.site-nav-link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  color: #111111;
  text-decoration: none;
  cursor: pointer;
}
.site-nav-link:hover,
.site-nav-link[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.site-nav-link:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }

.site-foot {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1228px;
  margin: auto auto 0;
  padding: 28px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 12px;
}
/* Each half on a small cream chip, so the print reads over anything behind
   it -- the front page's ribbons, a colored page. */
.site-foot-links, .site-foot-co {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.92);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.12);
  color: #333333;
}
.site-foot-co { display: block; letter-spacing: .02em; }
.site-foot-link { color: #333333; text-decoration: none; padding: 2px 0; }
.site-foot-link:hover { color: #111111; text-decoration: underline; }
.site-foot-link:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }

@media (max-width: 480px) {
  .site-head { padding: 32px 16px 0; min-height: 64px; }
  .site-foot { padding: 24px 16px 16px; }
  .site-mark { height: 26px; }
  .site-nav { gap: 14px; font-size: 13px; }
  /* FOUR LINKS AND A WORDMARK DO NOT FIT ACROSS A PHONE, so where there is a
     wordmark the links drop to a row of their own under it. */
  .site-head[data-mark] { flex-wrap: wrap; row-gap: 14px; }
  .site-head[data-mark] .site-nav { margin-left: 0; width: 100%; }
  .site-nav-link { white-space: nowrap; }
}
@media (max-width: 420px) {
  .site-foot { justify-content: flex-start; }
}

/* The picture carries its own margin -- the lettering is 55 of its 116 pixels
   tall and starts 22 in -- so it is drawn at the size that puts its LETTERS at
   the drawn mark's size, and the margin is taken back off with negative
   margins so the header row is the same height as on the app's pages. */
/* The static pages' logo is public/logo.svg, cropped to the letters and their
   shadow like the app's, so it takes the same height as the app header and
   needs no margins to pull a padded image back into line. */
img.site-mark { width: auto; }

/* SIGNED IN, YOUR THINGS SIT IN ONE BUBBLE: the Boardroom, your boards and
   your picture (src/parts/site.jsx). The site's own card language -- black
   outline, hard shadow -- so it reads as a thing you hold rather than more
   links. The halo reaches past the picture, so the bubble's right padding
   leaves room for it. */
.site-me {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 13px 8px 20px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 3px 3px 0 #111111;
}
.site-me-link { display: inline-flex; border-radius: 12px; }
.site-me-link:focus-visible { outline: 2px solid #111111; outline-offset: 5px; }
.site-me-face {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #4FAEC8;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
}
.site-me-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .site-me { gap: 12px; padding: 7px 11px 7px 14px; }
}