/* Species DNA-sexing landing pages (templates/dna_portal/species_sexing.html)
   and the "Species we sex" chip row on the poultry test page.
   Colours come from palette.css only. */

.species-page .species-hero { max-width: 860px; margin: 0 auto 1.3rem; text-align: center; }
.species-page .species-hero .page-title { margin: 0 0 .6rem; text-align: center; }
.species-page .species-answer { font-size: clamp(1.05rem, 2.2vw, 1.25rem); margin: 0 auto 1.1rem; max-width: 36em; }

.species-page .species-price { display: flex; justify-content: center; align-items: baseline; gap: .35rem; margin: 0 0 .4rem; }
.species-page .species-price .price-tag { font-size: 2.3rem; padding-right: 0; }
.moonlit-site .page-main .page-shell .species-page .species-price .species-per { color: rgb(var(--c-muted)) !important; font: 600 1rem/1 var(--lh-sans); }

.species-page .species-terms { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.4rem; font: 500 .92rem/1.4 var(--lh-sans); }
.moonlit-site .page-main .page-shell .species-page .species-terms,
.moonlit-site .page-main .page-shell .species-page .species-terms strong { color: rgb(var(--c-ink)) !important; }
.species-page .species-terms strong { text-transform: capitalize; }

.species-page .species-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.4rem; }
.species-page .species-cta { font: 600 1.15rem/1.2 var(--lh-sans); padding: .95rem 1.8rem; min-height: 52px; border-radius: 999px; text-align: center; }
.moonlit-site .species-page a.species-secondary { color: rgb(var(--c-accent)); font: 600 .98rem/1.3 var(--lh-sans); text-decoration: underline; text-underline-offset: .22em; }
.moonlit-site .species-page a.species-secondary:hover { color: rgb(var(--c-deep)); }
.species-page .species-test-note { font-size: .82rem; margin: .8rem 0 0; }
.species-page .species-actions-end { margin: 1.8rem 0 .6rem; }

.species-page .species-block { max-width: 860px; margin-left: auto; margin-right: auto; }
.species-page .species-block h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0 0 .85rem; }
.species-page .species-block p { margin: .5rem 0; }

.species-page .species-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.species-page .species-steps li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: .9rem; border: 1px solid rgb(var(--c-border) / 0.3); border-radius: 6px; background: rgb(var(--c-surface-soft) / 0.6); line-height: 1.5; }
.species-page .species-steps strong,
.species-page .species-samples strong { display: block; font-family: var(--lh-sans); }
.species-page .species-steps span:not(.species-step-num),
.species-page .species-samples li > span:last-child { display: block; font-size: .92rem; }
.moonlit-site .page-main .page-shell .species-page .species-step-num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(var(--c-accent)); color: rgb(var(--c-white)) !important; font: 700 1rem/1 var(--lh-serif); }

.species-page .species-samples { display: grid; gap: .6rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.species-page .species-samples li { margin: 0; padding: .7rem .9rem; border-left: 3px solid rgb(var(--c-accent)); background: rgb(var(--c-surface-soft) / 0.6); border-radius: 0 5px 5px 0; line-height: 1.5; }
.species-page .species-samples strong { display: inline; }
.moonlit-site .page-main .page-shell .species-page .species-tag { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: rgb(var(--c-accent)); color: rgb(var(--c-white)) !important; font: 700 .68rem/1.5 var(--lh-sans); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }

/* Chip rows: "Other birds we sex" here, and "Species we sex" on the poultry page. */
.species-others { max-width: 860px; margin: 1.5rem auto .5rem; text-align: center; }
.moonlit-site .page-main .page-shell .species-others h2 { color: rgb(var(--c-surface)) !important; font: 700 .78rem/1.4 var(--lh-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; }
.species-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.species-chips li { margin: 0; }
.moonlit-site .species-chips a { display: inline-block; padding: .4rem .85rem; border: 1px solid rgb(var(--c-border) / 0.5); border-radius: 999px; background: rgb(var(--c-surface-soft)); color: rgb(var(--c-accent)); font: 600 .85rem/1.3 var(--lh-sans); text-decoration: none; }
.moonlit-site .species-chips a:hover,
.moonlit-site .species-chips a:focus-visible { background: rgb(var(--c-surface-deep)); border-color: rgb(var(--c-accent)); }
.species-chip-row { margin: 1rem 0 0; }
.species-chip-row .species-chips { justify-content: flex-start; }
.moonlit-site .page-main .page-shell .species-chip-row .species-chip-label { margin: 0 0 .5rem; font: 700 .72rem/1.4 var(--lh-sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c-accent)) !important; }

@media (max-width: 720px) {
  .species-page .species-steps { grid-template-columns: 1fr; }
  .species-page .species-cta { width: 100%; }
  .species-page .species-actions { flex-direction: column; }
}
.species-page .species-hero .moon-breadcrumb { justify-content: center; margin-top: 0; }