/* Sticky header offset (updated by JS at runtime) */
:root {
  --sticky-gap: 8px;
  --sticky-top: 64px;
  --sticky-header-h: 0px;
  --sticky-offset: calc(var(--sticky-top) + var(--sticky-header-h));
}

/* Common card styles */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--sticky-offset) + 14px);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.card-title { margin: 0; font-size: 16px; }
.card-body { padding: 16px; }

/* ===== Floating section header (“page menu”) ===== */
/* Default = green fallback */
.card.top-header {
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  background: var(--sh-bg, #014421);                 /* green fallback */
  border: 1px solid #013220;
  color: #fff;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* If a logo is present, remove grey/translucent look: go pure white */
.card.top-header.has-watermark {
  background: var(--sh-bg, #fff);           /* was: #fff */
  color: var(--sh-text, #013220);       /* sensible default text */
}

/* If brand colours are provided, keep white bg and use frame/text vars */
.card.top-header.has-brand {
  background: var(--sh-bg, #fff);           /* was: #fff */
  border-color: var(--sh-frame, #013220);
  color: var(--sh-text, #013220);
}

/* Content above the watermark */
.card.top-header .card-head {
  border-bottom: none;
  padding: 14px 16px;
  position: relative;
  z-index: 1;
}

.card.top-header.is-stuck { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }

/* Full-colour background logo (watermark) via ::before (shown only if has-watermark) */
/* Prevent watermark clipping when oversized + rotated */
.card.top-header.has-watermark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* Oversize the pseudo-element so rotation doesn't crop.
     Controlled via --wm-oversize (e.g. 0px, 20px, 60px). */
  width:  calc(100% + var(--wm-oversize, 20px));
  height: calc(100% + var(--wm-oversize, 20px));

  transform: translate(-50%, -50%) rotate(-5deg);
  transform-origin: center center;

  background-image: var(--wm);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;   /* scale image to the larger box */
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;

  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Fixed and spacer utilities */
.card.top-header.is-fixed {
  position: fixed;
  top: var(--sticky-top);
  z-index: 50;
  box-sizing: border-box;
}
.top-header-spacer { display: none; height: 0; }

/* Headings */
.team-head { display: flex; align-items: baseline; gap: 12px; }
.team-head h1 { margin: 0; font-size: 24px; color: inherit; }
.team-head .sub { color: inherit; }

/* Default (green fallback) */
.page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.page-tabs a {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #fff;               /* white ring on green bg */
  border-radius: 10px;
  font-size: 13px;
  background: #014421;                  /* green */
  color: #fff;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.page-tabs a:hover {
  background: #013220;
  border-color: #fff;
  color: #fff;
}
.page-tabs a.active {
  background: #fff;
  color: #013220;
  border: 1px solid #fff;               /* keep visible frame on green */
}

/* ===== Branded behaviour (only when colours are passed) ===== */
.card.top-header.has-brand .page-tabs a {
  background: var(--sh-pill-bg, #fff);
  color: var(--sh-text, #013220);
  border: 1px solid #fff;               /* ✅ always white frame */
}
.card.top-header.has-brand .page-tabs a:hover {
  background: color-mix(in srgb, var(--sh-pill-bg, #fff) 80%, var(--sh-frame, #013220) 20%);
  color: var(--sh-text, #013220);
  border-color: #fff;                   /* ✅ keep white */
}
/* Selected pill uses pillBg/pillText */
.card.top-header.has-brand .page-tabs a.active {
  background: #fff;
  color: var(--sh-pill-text, #fff);
  border: 1px solid #fff;               /* ✅ consistent white outline */
}

/* Remove text-decoration and box shadows globally */
.section-header .pills a,
.section-header .pills a:link,
.section-header .pills a:visited,
.section-header .pills a:hover,
.section-header .pills a:focus,
.section-header .pills a:active,
.section-header .pills a * {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Mobile: keep watermark proportional (still respects --wm-size) */
@media (max-width: 520px) {
  .card.top-header.has-watermark::before {
    background-size: var(--wm-size, 140px) auto;
  }
}