/* ============================================================
   SPP Content Discovery - search form + article index styling.
   Self-contained. Uses the SPP palette custom properties from the Divi child
   theme when present, with hard fallbacks so it renders correctly even if the
   child theme is not active. Palette per PHASE1_APPROVED_2026-04-28.md:
   charcoal primary, navy accent, no STR green.
   ============================================================ */

/* ---- Native search form ([spp_search]) ---- */
.spp-search {
  margin: 0 0 var(--spp-rhythm-block, 32px);
}

.spp-search__title {
  font-family: var(--spp-font-heading-sans, 'Montserrat', system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--spp-color-primary, #2d3940);
  margin: 0 0 10px;
}

.spp-search__form {
  display: flex;
  width: 100%;
  max-width: 560px;
  border: 1px solid #d4d8db;
  border-radius: 6px;
  overflow: hidden;
  background: var(--spp-color-bg-canvas, #ffffff);
}

.spp-search__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--spp-font-body, 'Lato', 'Open Sans', -apple-system, sans-serif);
  color: var(--spp-color-primary, #2d3940);
  background: transparent;
}

.spp-search__input::placeholder {
  color: #8a9197;
}

.spp-search__submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--spp-font-heading-sans, 'Montserrat', system-ui, sans-serif);
  color: #ffffff;
  background: var(--spp-color-accent, #066aab);
  transition: background-color 0.15s ease-in-out;
}

.spp-search__submit:hover,
.spp-search__submit:focus {
  background: var(--spp-color-primary, #2d3940);
}

.spp-search__form:focus-within {
  border-color: var(--spp-color-accent, #066aab);
  box-shadow: 0 0 0 2px rgba(6, 106, 171, 0.15);
}

/* ---- Article index ([spp_article_index]) ---- */
.spp-article-index {
  margin: 0;
}

.spp-article-index--empty p {
  color: #6b7177;
  font-style: italic;
}

.spp-article-index__series {
  margin: 0 0 var(--spp-rhythm-block, 32px);
}

.spp-article-index__series-title {
  font-family: var(--spp-font-heading-sans, 'Montserrat', system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--spp-color-primary, #2d3940);
  border-bottom: 2px solid var(--spp-color-accent, #066aab);
  padding-bottom: 8px;
  margin: 0 0 18px;
}

.spp-article-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spp-article-index__item {
  padding: 16px 0;
  border-bottom: 1px solid #e7e9eb;
}

.spp-article-index__item:last-child {
  border-bottom: 0;
}

.spp-article-index__link {
  display: inline-block;
  font-family: var(--spp-font-heading-serif, 'Lora', Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--spp-color-accent, #066aab);
  text-decoration: none;
}

.spp-article-index__link:hover,
.spp-article-index__link:focus {
  color: var(--spp-color-primary, #2d3940);
  text-decoration: underline;
}

.spp-article-index__date {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a9197;
}

.spp-article-index__excerpt {
  margin: 8px 0 0;
  font-family: var(--spp-font-body, 'Lato', 'Open Sans', -apple-system, sans-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: #4a5258;
}

@media (max-width: 600px) {
  .spp-search__form {
    max-width: 100%;
  }
  .spp-article-index__series-title {
    font-size: 1.2rem;
  }
}