/* ============================================================================
   Book a Scientist — standalone page chrome
   bas-page.css

   Header and footer for the standalone subdomain. This is NOT part of the
   widget — bas-reveal.css stays self-contained and portable so the widget can
   still be embedded elsewhere. Everything here is prefixed `basp-`.

   Tokens match design-tokens.md.
   ========================================================================= */

.basp-page {
  --basp-navy:   #151B54;
  --basp-gold:   #F7CE3E;
  --basp-ink:    #0A1612;
  --basp-white:  #FFFFFF;
  --basp-muted:  rgba(255, 255, 255, 0.72);
  --basp-hair:   rgba(255, 255, 255, 0.20);
  --basp-font:   Poppins, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --basp-doodle: url("assets/doodle.png");
  --basp-container: 1170px;
}

.basp-page,
.basp-page *,
.basp-page *::before,
.basp-page *::after {
  box-sizing: border-box;
}

.basp-container {
  width: 100%;
  max-width: var(--basp-container);
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------------------------------------------------------------------------
   Header — mirrors the site's 75px sticky topbar
   ------------------------------------------------------------------------ */

.basp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 75px;
  padding: 10px 0;
  background-color: var(--basp-navy);
  background-image: var(--basp-doodle);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.basp-topbar .basp-container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.basp-logo-link {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 4px;
}

.basp-logo {
  width: 209px;   /* the site's rendered logo width */
  height: auto;
  display: block;
}

.basp-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 8px;
}

.basp-nav a {
  font-family: var(--basp-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--basp-gold);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease-in-out;
}

.basp-nav a:hover,
.basp-nav a:focus-visible {
  color: var(--basp-white);
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

.basp-footer {
  padding: 50px 0;
  background-color: var(--basp-navy);
  background-image: var(--basp-doodle);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-top: 1px solid var(--basp-hair);
}

.basp-footer .basp-container {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.basp-fcol { flex: 0 1 auto; }
.basp-fcol--brand { flex: 1 1 280px; }

.basp-fcol h2 {
  margin: 0 0 12px;
  font-family: var(--basp-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--basp-white);
}

.basp-fcol a {
  display: block;
  margin-bottom: 8px;
  font-family: var(--basp-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--basp-gold);
  text-decoration: none;
  border-radius: 4px;
}
.basp-fcol a:hover,
.basp-fcol a:focus-visible { color: var(--basp-white); }

.basp-tagline {
  margin: 14px 0 0;
  font-family: var(--basp-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--basp-muted);
}

.basp-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  align-items: baseline;
  margin: 36px auto 0;
  max-width: var(--basp-container);
  padding: 18px 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--basp-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--basp-muted);
}

/* Deliberately understated — a credit line, not a promotion. No rel="nofollow":
   the whole point is that the link is followable. */
.basp-credit {
  color: rgba(255, 255, 255, 0.55);
}

.basp-credit a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

.basp-credit a:hover,
.basp-credit a:focus-visible {
  color: var(--basp-gold);
  text-decoration-color: var(--basp-gold);
}

/* ---------------------------------------------------------------------------
   Focus — visible on every interactive element
   ------------------------------------------------------------------------ */

.basp-page a:focus-visible {
  outline: 3px solid var(--basp-gold);
  outline-offset: 3px;
}

/* Skip link — first tab stop, so keyboard users can jump past the header */
.basp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--basp-font);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  background: var(--basp-gold);
  color: var(--basp-ink);
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.basp-skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .basp-topbar { height: auto; padding: 12px 0; position: static; }
  .basp-topbar .basp-container {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .basp-logo { width: 168px; }
  .basp-nav {
    margin-left: 0;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
  }
  .basp-nav a { font-size: 15px; }
  .basp-footer .basp-container { gap: 30px; }
}

@media (max-width: 400px) {
  .basp-logo { width: 148px; }
  .basp-nav a { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .basp-page * { transition: none !important; animation: none !important; }
}