/* ============================================================================
   THE SITE NAVIGATION (templates/_nav.html)
   The same on every page: the logo top left, the menu icon top right. It
   stands alone, without style.css, because not every page loads that; the
   values are the ones style.css's :root uses.
   ========================================================================= */

/* The logo, and a fade under it so text scrolling up behind the corner
   stays out of its way. */
.site-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 900;     /* over page content; under the overlays and modals */
  display: block;
  line-height: 0;
  transition: transform 0.3s ease;
}
.site-logo img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.site-logo:hover { transform: scale(1.04); }
.site-logo:active { transform: scale(0.98); }
.site-logo:focus-visible {
  outline: 1px solid #ffd27f;
  outline-offset: 4px;
}
.site-nav-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 890;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

/* The menu: an icon in the corner. Opened, the links slide out to its left,
   the one nearest the icon first. Closed, they are hidden from the tab order
   too (visibility), not just transparent. */
.menu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-links {
  display: flex;
  align-items: center;
  visibility: hidden;
  transition: visibility 0s 0.3s;
}
.menu.open .menu-links {
  visibility: visible;
  transition: none;
}

.menu a {
  font-family: 'Archivo', sans-serif;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 8px 12px;
  opacity: 0;
  transform: translateX(14px);
  transition: color 0.3s ease, opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu.open a {
  opacity: 1;
  transform: none;
}
/* Staggered from the icon outwards, and back in the same order on close. */
.menu.open a:nth-last-child(2) { transition-delay: 0s, 0.04s, 0.04s; }
.menu.open a:nth-last-child(3) { transition-delay: 0s, 0.08s, 0.08s; }
.menu.open a:nth-last-child(4) { transition-delay: 0s, 0.12s, 0.12s; }
.menu.open a:nth-last-child(5) { transition-delay: 0s, 0.16s, 0.16s; }
.menu.open a:nth-last-child(6) { transition-delay: 0s, 0.2s, 0.2s; }

/* Three lines that fold into an ×. */
.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.menu-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: #ededed;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease, top 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.14);
}
.menu-toggle:hover span:nth-child(1) { transform: translateX(-2px); }
.menu-toggle:hover span:nth-child(3) { transform: translateX(2px); }
.menu.open .menu-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu.open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu.open .menu-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.menu-toggle:focus-visible {
  outline: 1px solid #ffd27f;
  outline-offset: 2px;
}
/* Something new in Connections, while the badge is folded away. */
.menu-toggle.has-news::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 200, 80, 0.9);
}
.menu.open .menu-toggle.has-news::after { display: none; }

/* Hover: an underline, no colour change. (The color line also overrides
   style.css's sitewide orange a:hover.) */
.menu a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.nav-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(255, 200, 80, 0.8);
  color: #000;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.nav-badge:empty { display: none !important; }

/* The page you are on. */
.menu a[aria-current="page"] { color: #ffd27f; }

@media (max-width: 768px) {
  .site-logo { top: 14px; left: 14px; }
  .site-logo img { height: 34px; }
  /* On a phone the text runs the full width, right under the logo and the
     icon, so the fade is nearly solid where they sit before it lets go: a
     plain fade was half-transparent there and headings read straight
     through it. */
  .site-nav-fade {
    height: 88px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.94) 0%,
                rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0) 100%);
  }
  .menu {
    top: 12px;
    right: 8px;
  }
  .menu a {
    font-size: 14px;
    padding: 8px;
  }
  /* Too narrow for a row: the links drop down under the icon, right-aligned,
     still sliding in from the right. */
  .menu-links {
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 6px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.2s ease;
  }
  .menu.open .menu-links {
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .menu-links a {
    white-space: nowrap;
    padding: 10px 14px;
  }
}

@media (hover: none) {
  .site-logo:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo, .menu a, .menu-toggle, .menu-toggle span, .menu-links { transition: none; }
}

/* ============================================================================
   THE SITE FOOTER (templates/_footer.html)
   At the end of the pages you read to the bottom: the logo and what the
   project is, the pages, how to reach us, and a last line with the legal
   page. It starts on the hero title's edge, 8% across.
   ========================================================================= */
.site-footer {
  margin-top: 32px;
  padding: 64px 8vw 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Archivo', sans-serif;
}
.site-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.site-footer-logo { display: inline-block; line-height: 0; }
.site-footer-logo img { height: 40px; width: auto; opacity: 0.9; }
/* style.css sets every <p> in Inconsolata. */
.site-footer-tagline {
  margin: 16px 0 0;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer-label {
  margin-bottom: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.3s;
}
/* Same underline as the menu, and no sitewide orange. */
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.site-footer-logo:hover { text-decoration: none; }
.site-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer-base a { font-size: 13px; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 768px) {
  .site-footer { padding: 48px 24px 24px; }
  .site-footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer-about { grid-column: 1 / -1; }
  .site-footer-base { margin-top: 40px; }
}