/* Shared styles for the static marketing pages (landing.html and the content pages next to it).
   They are plain HTML, outside the Angular app, so crawlers get the full text without JavaScript.
   Bootstrap and Bootstrap Icons come from the CDN at the same versions as the app's package.json. */

[data-bs-theme='light'] {
  --bs-body-bg: #f5f6f8;
  --pp-card-bg: #ffffff;
  --pp-muted-bg: #eef0f4;
}

[data-bs-theme='dark'] {
  --bs-body-bg: #16181b;
  --pp-card-bg: #1f2226;
  --pp-muted-bg: #22262b;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.site-header .nav-link {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.5rem;
}

.site-header .nav-link:hover,
.site-header .nav-link[aria-current='page'] {
  color: #fff;
}

.hero {
  padding: 4rem 0 3rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
}

.lead-narrow {
  max-width: 42rem;
}

.feature {
  background: var(--pp-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 1.5rem;
  height: 100%;
}

.feature .bi {
  font-size: 1.75rem;
  color: var(--bs-primary);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.cards li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 4.25rem;
  border: 2px solid var(--bs-primary);
  border-radius: 0.5rem;
  background: var(--pp-card-bg);
  font-weight: 700;
  font-size: 1.1rem;
}

.article {
  max-width: 46rem;
}

.article h2 {
  margin-top: 2.5rem;
  font-size: 1.5rem;
}

.article h3 {
  margin-top: 1.5rem;
  font-size: 1.15rem;
}

.callout {
  background: var(--pp-muted-bg);
  border-left: 4px solid var(--bs-primary);
  border-radius: 0.25rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.cta {
  background: var(--pp-muted-bg);
  border-radius: 0.75rem;
  padding: 2rem;
  margin: 3rem 0 1rem;
  text-align: center;
}

.site-footer {
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.9rem;
}

.site-footer a {
  color: inherit;
}