/*
 * Shared WordPress block components for StirLight.
 * Page content selects semantic block styles; visual rules stay here.
 */

:root {
  --sl-content-wide: 1200px;
  --sl-content-reading: 72ch;
  --sl-section-sm: clamp(2.5rem, 5vw, 4rem);
  --sl-section-lg: clamp(4rem, 8vw, 6rem);
  --sl-grid-gap: clamp(1rem, 2.5vw, 2rem);
}

.entry-content > :where(p, ul, ol, h2, h3, h4, blockquote),
.stirlight-article > :where(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: var(--sl-content-reading);
}

.entry-content :where(.wp-block-buttons, .uagb-buttons__wrap) {
  gap: 0.75rem 1rem;
}

.entry-content :where(.wp-block-button__link, .uagb-buttons-repeater) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-block-group.is-style-direct-answer,
.stirlight-direct-answer {
  max-width: var(--sl-content-reading);
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--sl-surface-warm);
  border-left: 4px solid var(--sl-accent);
  color: var(--sl-text);
}

.wp-block-group.is-style-direct-answer > :last-child,
.wp-block-group.is-style-callout > :last-child,
.wp-block-group.is-style-related-links > :last-child,
.wp-block-group.is-style-section-cta > :last-child {
  margin-bottom: 0;
}

.wp-block-group.is-style-callout,
.stirlight-disclaimer,
.stirlight-vignette {
  max-width: var(--sl-content-reading);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--sl-surface-alt);
  border-left: 4px solid var(--sl-border-strong);
  color: var(--sl-text-muted);
}

.stirlight-card-grid,
.stirlight-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sl-grid-gap);
  max-width: var(--sl-content-wide);
  margin: 1.5rem 0 3rem;
}

/* Core flow layout adds margin-block-start to every child after the first,
 * which drops the second card of each row out of alignment. Grid gap owns
 * the spacing here. */
.stirlight-card-grid > *,
.stirlight-profile-grid > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.stirlight-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-group.is-style-listing-card,
.wp-block-group.is-style-profile-card {
  height: 100%;
  padding: 1.5rem;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(20, 26, 37, 0.04);
}

.wp-block-group.is-style-listing-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-group.is-style-listing-card:hover {
  border-color: var(--sl-accent);
  box-shadow: 0 8px 24px rgba(20, 26, 37, 0.06);
}

.wp-block-group.is-style-listing-card .stirlight-card-kicker,
.wp-block-group.is-style-profile-card .stirlight-card-kicker {
  margin: 0 0 0.75rem;
  color: var(--sl-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wp-block-group.is-style-listing-card h3,
.wp-block-group.is-style-profile-card h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5625rem);
}

.wp-block-group.is-style-listing-card a {
  color: var(--sl-text);
  text-decoration: none;
}

.wp-block-group.is-style-listing-card a:hover {
  color: var(--sl-accent-text);
  text-decoration: underline;
}

.wp-block-table.is-style-data-table,
.stirlight-table-wrap {
  max-width: 100%;
  margin: 3rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-block-table.is-style-data-table table {
  min-width: 680px;
}

.wp-block-group.is-style-faq-section {
  max-width: var(--sl-content-reading);
  margin: 3rem 0;
}

.wp-block-group.is-style-faq-section > h3 {
  padding-top: 1.5rem;
  border-top: 1px solid var(--sl-border);
}

.wp-block-group.is-style-related-links,
.stirlight-related {
  max-width: var(--sl-content-reading);
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--sl-surface-alt);
  border-radius: 4px;
}

.wp-block-group.is-style-section-cta,
.stirlight-cta {
  max-width: var(--sl-content-wide);
  margin: 3rem 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--sl-navy-700);
  border-radius: 8px;
  color: var(--sl-text-invert);
}

.wp-block-group.is-style-section-cta :where(h2, h3, p, strong),
.stirlight-cta :where(h2, h3, p, strong) {
  color: var(--sl-text-invert);
}

.wp-block-group.is-style-section-cta a:not(.wp-block-button__link),
.stirlight-cta a:not(.stirlight-btn):not(.wp-block-button__link) {
  color: var(--sl-warm-300);
}

.wp-block-group.is-style-section-cta .wp-block-button:not(.is-style-secondary):not(.is-style-tertiary) .wp-block-button__link,
.stirlight-cta .wp-block-button:not(.is-style-secondary):not(.is-style-tertiary) .wp-block-button__link {
  background: var(--sl-warm-600);
  border-color: var(--sl-warm-600);
  color: var(--sl-white) !important;
}

.wp-block-group.is-style-section-cta .wp-block-button:not(.is-style-secondary):not(.is-style-tertiary) .wp-block-button__link:hover,
.stirlight-cta .wp-block-button:not(.is-style-secondary):not(.is-style-tertiary) .wp-block-button__link:hover {
  background: var(--sl-warm-700);
  border-color: var(--sl-warm-700);
  color: var(--sl-white) !important;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--sl-accent-text);
}

.wp-block-group.is-style-section-cta .wp-block-button.is-style-secondary .wp-block-button__link {
  color: var(--sl-warm-300);
}

.wp-block-button.is-style-tertiary .wp-block-button__link {
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--sl-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stirlight-family-legal .entry-content {
  max-width: var(--sl-content-reading);
  margin-inline: auto;
}

.stirlight-family-legal .entry-content :where(h2, h3) {
  margin-top: 2rem;
}

@media (max-width: 781px) {
  .stirlight-card-grid,
  .stirlight-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-group.is-style-listing-card {
    transition: none;
  }
}