/* The shared header and footer (site/partials/) - linked from every page
   that includes them. Page-specific styles stay in each page. */

/* Header: nav link active state */
.nav-link {
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.nav-link.active {
  text-decoration-line: underline;
  text-decoration-color: #3367d1;
  text-decoration-thickness: 2px;
}

/* Header: Pricing - beside Login in the top menu */
.nav-cta-link {
  font-size: 14px;
  font-weight: 600;
  color: #666c73;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-cta-link:hover, .nav-cta-link[aria-current="page"] { color: #191b1d; }

.text-brand-blue { color: #3367d1; }
.text-brand-blue:hover { color: rgba(51,103,209,0.8); }

/* Footer */
.site-footer {
  background: #ffffff;
  border-top: 1px solid #e8e8e8;
  padding-top: 32px;
}
.site-footer .inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Row 1: the logo and tagline (stacked) on the left, the Chrome Extension
   on the right. */
.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.site-footer .brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
}
.site-footer .tagline {
  margin: 0;
  font-size: 12px;
  color: #aaaaaa;
}
/* Under the line: the rest of the links, centred above the copyright. */
.site-footer .links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.site-footer .links a {
  font-size: 12px;
  color: #aaaaaa;
  text-decoration: none;
}
.site-footer .links a:hover { color: #111111; }
/* The Chrome Extension - a small outlined button, so it stands out
   from the plain footer links. */
.site-footer a.ext-link {
  display: inline-flex;
  font-size: 12px;
  text-decoration: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #dddddd;
  border-radius: 999px;
  font-weight: 600;
  color: #111111;
  white-space: nowrap;
}
.site-footer a.ext-link:hover { border-color: #111111; }
.site-footer a.ext-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.site-footer .copyright-bar {
  margin-top: 24px;
  border-top: 1px solid #f0f0f0;
  padding: 20px 24px;
  text-align: center;
  font-size: 11px;
  color: #cccccc;
}
.site-footer .copyright { margin: 16px 0 0; }