/* BasilArcana shared UI primitives. Loaded last on every public page. */
:root {
  --ba-font-ui: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ba-control-radius: 999px;
  --ba-control-sm: 42px;
  --ba-control-md: 48px;
  --ba-control-lg: 54px;
  --ba-control-font: .9rem;
  --ba-control-weight: 850;
  --ba-primary: var(--m3-primary, #ff8084);
  --ba-primary-on: var(--m3-primary-on, #17171c);
  --ba-secondary: var(--m3-secondary, #f2bd7e);
  --ba-text: var(--m3-text, #f4f4fa);
  --ba-muted: var(--m3-text-soft, #c9c4d2);
  --ba-surface: var(--m3-surface-2, rgba(255,255,255,.055));
  --ba-outline: var(--m3-outline-strong, rgba(255,128,132,.34));
  --ba-hero-radius: 28px;
  --ba-hero-padding-y: 48px;
  --ba-hero-padding-x: 52px;
  --ba-hero-gap: 48px;
}

/* One hero contract for broad hubs and key search-entry tools. */
body .question-hero.unified-hub-hero,
body .academy-index-hero.unified-hub-hero,
body .compatibility-hero.unified-hub-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(380px,1fr) !important;
  align-items: center !important;
  gap: var(--ba-hero-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  margin: 0 0 clamp(24px,4vw,38px) !important;
  padding: var(--ba-hero-padding-y) var(--ba-hero-padding-x) !important;
  overflow: hidden !important;
  border: 1px solid rgba(228,177,125,.2) !important;
  border-radius: var(--ba-hero-radius) !important;
  background: radial-gradient(circle at 88% 12%,rgba(255,128,132,.16),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(22,23,30,.94) 52%,rgba(242,189,126,.055)) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.22) !important;
  box-sizing: border-box !important;
}

body .unified-hub-hero > :first-child,
body .academy-index-hero.unified-hub-hero .academy-index-hero__copy,
body .compatibility-hero.unified-hub-hero .compatibility-hero__copy {
  align-self: center !important;
  justify-content: center !important;
}

body .unified-hub-hero h1 {
  max-width: 15ch !important;
  margin: 0 !important;
  font-family: "Space Grotesk", "Manrope", sans-serif !important;
  font-size: 3.15rem !important;
  font-weight: 720 !important;
  line-height: 1.01 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

body .unified-hub-hero .lead,
body .academy-index-hero.unified-hub-hero .academy-index-hero__copy > p:not(.academy-index-hero__label) {
  max-width: 64ch !important;
  margin: 18px 0 0 !important;
  color: var(--ba-muted) !important;
  font-size: 1.06rem !important;
  line-height: 1.58 !important;
}

/* One compact header action everywhere. */
.topbar .topbar-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 174px !important;
  min-width: 174px !important;
  max-width: 174px !important;
  min-height: var(--ba-control-sm) !important;
  height: var(--ba-control-sm) !important;
  padding: 0 14px !important;
  border-radius: var(--ba-control-radius) !important;
  font-family: var(--ba-font-ui) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Shared action geometry: class names stay intact for existing JS and analytics. */
.button,
.btn,
.compatibility-button,
.lenormand-cta__primary,
.lenormand-cta__secondary {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ba-control-md) !important;
  padding: 10px 18px !important;
  border-radius: var(--ba-control-radius) !important;
  font-family: var(--ba-font-ui) !important;
  font-size: var(--ba-control-font) !important;
  font-weight: var(--ba-control-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-wrap: balance;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease !important;
}

/* Primary form submits follow the same action shape. */
.astro-tool-submit {
  box-sizing: border-box !important;
  min-height: var(--ba-control-lg) !important;
  padding: 10px 22px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ba-control-radius) !important;
  color: var(--ba-primary-on) !important;
  background: var(--ba-primary) !important;
  font-family: var(--ba-font-ui) !important;
  font-size: var(--ba-control-font) !important;
  font-weight: var(--ba-control-weight) !important;
  line-height: 1.2 !important;
}

body .unified-hub-hero .button,
body .unified-hub-hero .compatibility-button {
  border-radius: var(--ba-control-radius) !important;
}

.button.button-primary,
.btn:not(.alt),
.compatibility-button.compatibility-button--primary,
.lenormand-cta__primary {
  border: 1px solid transparent !important;
  color: var(--ba-primary-on) !important;
  background: var(--ba-primary) !important;
  box-shadow: 0 10px 28px rgba(255,128,132,.2) !important;
}

.button.button-secondary,
.btn.alt,
.compatibility-button:not(.compatibility-button--primary),
.lenormand-cta__secondary {
  border: 1px solid var(--ba-outline) !important;
  color: var(--ba-primary) !important;
  background: var(--ba-surface) !important;
  box-shadow: none !important;
}

.button:hover,
.btn:hover,
.compatibility-button:hover,
.lenormand-cta__primary:hover,
.lenormand-cta__secondary:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

.button:focus-visible,
.btn:focus-visible,
.compatibility-button:focus-visible,
.lenormand-cta__primary:focus-visible,
.lenormand-cta__secondary:focus-visible,
.topbar .topbar-cta:focus-visible {
  outline: 3px solid rgba(227,210,255,.72) !important;
  outline-offset: 3px !important;
}

/* Conversion buttons are deliberately one size above ordinary actions. */
.stage5-cta :where(.button, .btn, .compatibility-button),
.compatibility-conversion :where(.button, .btn, .compatibility-button),
.lenormand-cta .lenormand-cta__primary {
  min-height: var(--ba-control-lg) !important;
  padding-inline: 22px !important;
}

/* A single eyebrow/chip component for page and section headings. */
.section-label,
.section-eyebrow,
.eyebrow,
.question-kicker,
.natal-eyebrow,
.academy-index-hero__label,
.lenormand-trust__eyebrow,
.cta-tag,
.system-card__label {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 0 12px !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(255,128,132,.18) !important;
  border-radius: var(--ba-control-radius) !important;
  color: var(--ba-primary) !important;
  background: rgba(255,128,132,.1) !important;
  font-family: var(--ba-font-ui) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

body .unified-hub-hero .question-kicker,
body .unified-hub-hero .compatibility-kicker,
body .academy-index-hero.unified-hub-hero .academy-index-hero__label {
  min-height: 30px !important;
  margin: 0 0 18px !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(255,128,132,.18) !important;
  border-radius: var(--ba-control-radius) !important;
  color: var(--ba-primary) !important;
  background: rgba(255,128,132,.1) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

body .unified-hub-hero .question-actions,
body .unified-hub-hero .compatibility-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 22px !important;
}

body .unified-hub-hero :where(.yesno-hero__panel, .feelings-hero__panel) {
  align-self: stretch !important;
  min-height: 0 !important;
  padding: 26px !important;
  border: 1px solid rgba(255,128,132,.22) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg,rgba(255,128,132,.11),rgba(242,189,126,.055)),rgba(29,30,37,.8) !important;
}

body .unified-hub-hero :where(.yesno-hero__panel, .feelings-hero__panel) nav a {
  min-height: 42px !important;
  padding: 10px 13px !important;
  border-radius: 14px !important;
}

/* Text links remain links, but no longer look unfinished. */
:where(.reading-section, .stage5-section, .question-content, .short-answer, .article-body, .hub-content) p a,
:where(.section-more, .lenormand-trust__links, .related-reading-links) a,
:where(.lenormand-reading-bot-link, .related-combination) {
  color: var(--ba-secondary) !important;
  font-weight: 750 !important;
  text-decoration-line: underline !important;
  text-decoration-color: color-mix(in srgb, var(--ba-secondary) 48%, transparent) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .22em !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
}

:where(.reading-section, .stage5-section, .question-content, .short-answer, .article-body, .hub-content) p a:hover,
:where(.section-more, .lenormand-trust__links, .related-reading-links) a:hover,
:where(.lenormand-reading-bot-link, .related-combination):hover {
  color: var(--ba-primary) !important;
  text-decoration-color: currentColor !important;
}

@media (max-width: 640px) {
  body .topbar,
  body .topbar > *,
  body .topbar-nav,
  body .unified-hub-hero,
  body .unified-hub-hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .topbar {
    width: 100% !important;
  }

  body .topbar .topbar-cta {
    justify-self: end !important;
  }

  body .topbar-nav {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
  }

  .topbar .topbar-cta {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  .button,
  .btn,
  .compatibility-button,
  .lenormand-cta__primary,
  .lenormand-cta__secondary {
    min-height: var(--ba-control-md) !important;
    padding-inline: 16px !important;
    font-size: .86rem !important;
  }

  body .question-hero.unified-hub-hero,
  body .academy-index-hero.unified-hub-hero,
  body .compatibility-hero.unified-hub-hero {
    grid-template-columns: minmax(0,1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  body .unified-hub-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.85rem,8.8vw,2.45rem) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: wrap !important;
  }

  body .unified-hub-hero .lead,
  body .academy-index-hero.unified-hub-hero .academy-index-hero__copy > p:not(.academy-index-hero__label) {
    margin-top: 14px !important;
    font-size: .98rem !important;
  }

  body .unified-hub-hero .question-kicker,
  body .unified-hub-hero .compatibility-kicker,
  body .academy-index-hero.unified-hub-hero .academy-index-hero__label {
    margin-bottom: 12px !important;
    white-space: normal !important;
  }

  body .unified-hub-hero :where(.yesno-hero__panel, .feelings-hero__panel) nav {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.button, .btn, .compatibility-button, .lenormand-cta__primary, .lenormand-cta__secondary, .topbar-cta) {
    transition: none !important;
  }
}