/* ═══════════════════════════════════════════════════════════════════════════════
   ALIGNMENT AUDIT — Task #842209: Full Website Alignment & Layout QA
   ─────────────────────────────────────────────────────────────────────────────
   Fixes cross-cutting alignment, centering, and layout consistency issues
   across ALL consumer-facing pages: homepage, settlements, guides, tools,
   games, pricing, community, leaderboard, etc.

   Loads in combined.min.css pipeline (after global-enforce.css) so it has
   final say on alignment-related properties.

   Created: 2026-04-12
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   §1. GLOBAL CONTAINER CENTERING SAFETY NET
   ──────────────────────────────────────────────────────────────────────────────
   Ensures ALL known container/inner patterns center properly with margin auto
   and have consistent horizontal padding to prevent content touching edges.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1a. Generic inner containers: enforce centering ─────────────────────── */
[class$="-inner"],
[class*="-inner "] {
  margin-left: auto;
  margin-right: auto;
}

/* ── 1b. Known page-specific containers: explicit centering + padding ────── */
/* Homepage */
.rs-trust-bar-inner,
.urgency-strip-inner,
.rs-leaderboard-inner,
.sr-benefits-inner,
.rs-stats-bar-below {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* Settlements directory */
.dir-hero-inner,
.dir-grid-wrap,
.dir-browse-cats-inner,
.dir-seo-inner,
.dir-states-inner,
.cs-strip-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Settlement detail */
.detail-hero-inner,
.detail-content-inner,
.detail-breadcrumb-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Leaderboard */
.lb-hero-inner,
.lb-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Community */
.comm-hero-inner,
.comm-body {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* No-proof-required */
.np-wrap,
.np-hero-inner,
.np-stats-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Find-my-settlements */
.fms-hero-inner,
.fms-quiz-container,
.fms-results-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Tools */
.tools-hero,
.tools-section,
.tools-guides-strip {
  margin-left: auto;
  margin-right: auto;
}

/* Calculator / Payout calculator */
.pc-hero-inner,
.pc-breadcrumb-inner,
.pc-how-inner,
.pc-calc-inner,
.pc-faq-inner,
.calc-widget-section {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Pricing */
.prc-grid {
  margin-left: auto;
  margin-right: auto;
}

/* Pro / Pro-Plus */
.pro-section,
.pro-features-grid,
.pro-faq,
.proplus-section,
.proplus-features-grid {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Compare plans */
.compare-inner,
.cp-header-grid,
.compare-faq {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Games */
.game-page,
.bingo-main,
.tq-page {
  margin-left: auto;
  margin-right: auto;
}

/* SOTW / settlement-of-the-week */
.sotw-archive-hero-inner,
.sotw-archive-grid-wrap {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Guides */
.guides-grid-wrap,
.guide-content-wrap,
.guide-hero-inner,
.gfl-section {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §2. MAX-WIDTH STANDARDIZATION
   ──────────────────────────────────────────────────────────────────────────────
   Standardize container widths to a controlled set of sizes:
     --max-width:       1200px (primary full-width content)
     --max-width-sp:    1100px (standard secondary page content)
     --max-width-narrow: 900px (narrow page content)
     --max-width-prose:  700px (article/long-form content)

   We do NOT force max-widths where pages already have proper ones — only
   fix cases where containers are missing max-width or use odd values.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Homepage sections that used non-standard widths — normalize to 1100px */
.urgency-strip-inner {
  max-width: 1100px;
}

/* Homepage leaderboard section — was 860px, bump to 900px (standard narrow) */
.rs-leaderboard-inner {
  max-width: var(--max-width-narrow, 900px);
}

/* Homepage benefits — was 1000px, normalize to 1100px */
.sr-benefits-inner {
  max-width: 1100px;
}

/* SEO content in settlements — was 780px, normalize to 700px (prose width) */
.dir-seo-inner {
  max-width: var(--max-width-prose, 700px);
}

/* Pricing grid — was 1260px, cap to 1200px (standard max) */
.prc-grid {
  max-width: var(--max-width, 1200px);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §3. TEXT ALIGNMENT CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   Ensure hero sections use center-aligned text, and body content sections
   use left-aligned text (for readability). No mixed alignment within the
   same visual section.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 3a. Hero sections: always center-aligned ─────────────────────────────── */
.sp-hero,
.sp-hero-inner,
.dir-hero,
.dir-hero-inner,
.lb-hero,
.lb-hero-inner,
.comm-hero,
.comm-hero-inner,
.np-hero,
.fms-hero,
.fms-hero-inner,
.pro-hero,
.proplus-hero,
.pricing-hero,
.compare-hero,
.tools-hero,
.pc-hero,
.pc-hero-inner,
.sotw-archive-hero,
.sotw-archive-hero-inner,
.guide-hero,
.guide-hero-inner {
  text-align: center;
}

/* ── 3b. Body/content sections: left-aligned text for readability ─────────── */
.dir-grid-wrap,
.np-list,
.comm-grid,
.lb-list,
.guides-grid,
.tools-grid,
.pc-how-steps,
.compare-table {
  text-align: left;
}

/* ── 3c. Card content: left-aligned within centered grids ─────────────────── */
.prc-card,
.guide-card,
.np-card,
.dir-card,
.comm-card,
.lb-card,
.tool-card {
  text-align: left;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §4. HEADING FONT-WEIGHT CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   Standardize heading weights across all pages:
     h1: 800 (extra-bold)   — page titles/hero headlines
     h2: 700 (bold)         — section titles
     h3: 600 (semi-bold)    — card titles, subsection headers
     h4-h6: 600 (semi-bold) — labels, minor headers
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page-level hero headings */
.sp-hero h1,
.dir-hero h1,
.lb-hero h1,
.comm-hero h1,
.np-hero h1,
.fms-hero h1,
.pro-hero h1,
.proplus-hero h1,
.pricing-hero h1,
.compare-hero h1,
.tools-hero h1,
.pc-hero h1,
.sotw-archive-hero h1,
.guide-hero h1,
.game-page h1,
.bingo-main h1,
.tq-hero h1 {
  font-weight: 800;
}

/* Section titles */
.sp-section h2,
.dir-page h2,
.lb-page h2,
.comm-page h2,
.np-page h2,
.tools-page h2,
.game-page h2,
.bingo-main h2,
.tq-page h2 {
  font-weight: 700;
}

/* Card / subsection titles */
.prc-card h3,
.guide-card h3,
.np-card h3,
.dir-card h3,
.comm-card h3,
.lb-card h3,
.tool-card h3 {
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §5. CARD & GRID ALIGNMENT — Even spacing, consistent heights
   ──────────────────────────────────────────────────────────────────────────────
   Ensure all card grids have consistent gaps and cards stretch to equal
   heights within their row.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 5a. Consistent grid gaps ─────────────────────────────────────────────── */
.prc-grid,
.guides-grid,
.np-list,
.comm-grid,
.tools-grid {
  gap: 1.25rem;
}

/* ── 5b. Equal-height cards (flex column stretch) ─────────────────────────── */
.prc-card,
.guide-card,
.np-card,
.comm-card,
.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card CTA/footer pushed to bottom */
.prc-card > a:last-child,
.prc-card > button:last-child,
.guide-card-cta,
.np-card-cta,
.tool-card-cta {
  margin-top: auto;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §6. SECTION SPACING CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   Standardize vertical spacing between major page sections.
   Desktop: 3.5rem–5rem padding.  Mobile: 2rem–3rem padding.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 6a. Standard section padding ─────────────────────────────────────────── */
.dir-browse-cats,
.dir-states-section,
.lb-page,
.np-page,
.comm-page,
.tools-page {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §7. CTA BUTTON ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────────
   Buttons in hero sections should center. Buttons in card footers should
   be left-aligned or stretch to full width consistently.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Hero CTA containers: center buttons */
.sp-hero .sp-btn-wrap,
.sp-hero .sp-cta-wrap,
.dir-hero .dir-cta-wrap,
.lb-hero .lb-cta-wrap,
.comm-hero .comm-cta-wrap,
.pricing-hero .sp-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §8. MOBILE LAYOUT FIXES (375px)
   ──────────────────────────────────────────────────────────────────────────────
   Ensure content fills the viewport properly, no half-empty screens, no
   horizontal overflow, no elements breaking out of containers.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* ── 8a. Prevent horizontal overflow ──────────────────────────────────── */
  body {
    overflow-x: hidden;
  }
  main {
    overflow-x: hidden;
  }

  /* ── 8b. Ensure all containers have proper mobile padding ────────────── */
  .sp-container,
  .ds-container,
  .sp-container--narrow,
  .sp-container--article {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8c. Hero sections: tighter padding on mobile ────────────────────── */
  .sp-hero,
  .dir-hero,
  .lb-hero,
  .comm-hero,
  .pricing-hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8d. Full-width cards on narrow screens ──────────────────────────── */
  .prc-grid,
  .guides-grid,
  .np-list,
  .tools-grid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* ── 8e. Trust bar wraps cleanly on mobile ───────────────────────────── */
  .rs-trust-bar-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .rs-trust-badge {
    border-right: none;
    padding: 8px 12px;
    justify-content: center;
  }

  /* ── 8f. Stats bar mobile centering ──────────────────────────────────── */
  .rs-stats-bar,
  .rs-stats-bar-below {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8g. Pricing cards stack properly ────────────────────────────────── */
  .prc-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8h. Compare plans table horizontal scroll ───────────────────────── */
  .cp-header-grid,
  .cp-row-grid {
    min-width: 600px;
  }
  .compare-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8i. Game pages: full-width centering ────────────────────────────── */
  .game-page,
  .bingo-main,
  .tq-page {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── 8j. Leaderboard cards full width ────────────────────────────────── */
  .lb-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── 8k. Community grid single column ────────────────────────────────── */
  .comm-grid {
    grid-template-columns: 1fr;
  }
}

/* Extra-narrow mobile (375px) */
@media (max-width: 400px) {
  /* Tighter padding */
  .sp-container,
  .ds-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Prevent text overflow in cards */
  .prc-card,
  .guide-card,
  .np-card,
  .dir-card,
  .comm-card,
  .lb-card,
  .tool-card {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Price text doesn't wrap oddly */
  .prc-price {
    white-space: nowrap;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §9. FOOTER ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────────
   Footer columns properly spaced and centered in their container.
   ══════════════════════════════════════════════════════════════════════════════ */

.site-footer-inner,
.footer-inner {
  max-width: var(--max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

@media (max-width: 600px) {
  .site-footer-inner,
  .footer-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §10. IMAGE & ICON ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────────
   Hero images, icons, and logos centered within their containers.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Hero badges/eyebrows centered */
.sp-hero-badge,
.sr-hero-eyebrow,
.dir-hero-badge,
.lb-hero-badge,
.comm-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon wrappers in feature cards */
.tool-card-icon,
.guide-card-icon,
.np-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §11. BREADCRUMB ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────────
   Ensure breadcrumbs are consistently centered and aligned.
   ══════════════════════════════════════════════════════════════════════════════ */

.sp-breadcrumb-inner,
.dir-breadcrumb-inner,
.pc-breadcrumb-inner,
.detail-breadcrumb-inner {
  max-width: var(--sp-container-max, 1060px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §12. WIDE SCREEN SAFETY (>1440px)
   ──────────────────────────────────────────────────────────────────────────────
   On ultra-wide screens, content should stay centered and not stretch to
   fill the entire viewport. Max-width constraints + auto margins handle this.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  /* Ensure full-width sections still constrain their inner content */
  .rs-hero-inner,
  .sp-hero-inner,
  .dir-hero-inner,
  .rs-trust-bar-inner {
    max-width: var(--max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §13. TABLE ALIGNMENT
   ──────────────────────────────────────────────────────────────────────────────
   Data tables (compare plans, settlement info) have consistent column
   alignment and proper cell padding.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Compare plans table cells */
.cp-cell {
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 0.5rem;
}

/* First column (feature names) — left aligned */
.cp-cell:first-child,
.cp-row-label {
  text-align: left;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §14. INLINE STYLE OVERRIDES — Fix alignment issues caused by inline styles
   ──────────────────────────────────────────────────────────────────────────────
   Some templates use inline max-width/padding that creates inconsistencies.
   These rules normalize the most common offenders.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Pricing page — normalize inline max-width on sp-container elements */
.pricing-page .sp-container[style*="max-width:700px"],
.pricing-page .sp-container[style*="max-width: 700px"] {
  max-width: var(--max-width-prose, 700px) !important;
}

.pricing-page .sp-container[style*="max-width:820px"],
.pricing-page .sp-container[style*="max-width: 820px"] {
  max-width: var(--max-width-narrow, 900px) !important;
}

.pricing-page .sp-container[style*="max-width:860px"],
.pricing-page .sp-container[style*="max-width: 860px"] {
  max-width: var(--max-width-narrow, 900px) !important;
}

/* ── Fix homepage sections that use odd inline centering ──────────────────── */
/* Trust badge strip — ensure flex centering on all viewports */
.rs-hero-inner > [style*="display:flex"][style*="justify-content:center"] {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §15. VISUAL RHYTHM — Consistent section dividers
   ──────────────────────────────────────────────────────────────────────────────
   Sections separated by consistent borders/spacing.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Subtle section dividers on light backgrounds */
.sp-section + .sp-section {
  border-top: 1px solid #f1f5f9;
}

/* Remove double borders where hero already has border-bottom */
.sp-hero + .sp-section {
  border-top: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §16. HOMEPAGE FILTERS & SEARCH ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Fix search bar, quick-filter pills, and filter row centering on the homepage.
   The search bar was limited to 500px and left-aligned; quick-filters and
   filter-row were left-aligned when they should center within their container.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 16a. Filters section container ──────────────────────────────────────── */
.filters-section {
  padding: 1.5rem 1.5rem;
}
.filters-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 16b. Search bar — full width in container, properly centered ────────── */
.filters-form .search-box {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 16c. Quick filters — centered within container ──────────────────────── */
.filters-form .quick-filters {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ── 16d. Filter row — centered, wrap neatly ─────────────────────────────── */
.filters-form .filter-row {
  justify-content: center;
}

/* ── 16e. Filter checkbox label — consistent spacing ─────────────────────── */
.filter-checkbox {
  white-space: nowrap;
}

/* ── 16f. Mobile filters ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .filters-section {
    padding: 1rem 1rem;
  }
  .filters-form .search-box {
    max-width: 100%;
  }
  .filters-form .quick-filters {
    justify-content: flex-start;
  }
  .filters-form .filter-row {
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  .filters-form .filter-select {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §17. FEATURED ROUNDUP BANNER ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Fix the monthly roundup banner text alignment. The sub-text had text-align:
   center which made it visually detached from the title above it.
   Normalize max-width to 1100px for consistency with other homepage sections.
   ══════════════════════════════════════════════════════════════════════════════ */

.featured-roundup-inner {
  max-width: 1100px;
}

.featured-roundup-sub {
  text-align: left;
}

@media (max-width: 600px) {
  .featured-roundup-bar {
    padding: 0.75rem 1rem;
  }
  .featured-roundup-inner {
    gap: 0.75rem;
  }
  .featured-roundup-link {
    min-width: 0;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §18. NEAR-YOU SECTION ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Tighten alignment of the "Find settlements near you" prompt bar.
   Ensure the prompt row elements align vertically and the section
   centers properly on all viewports.
   ══════════════════════════════════════════════════════════════════════════════ */

.near-you-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ny-prompt-row {
  align-items: center;
  gap: 0.75rem;
}

/* Ensure select and button stay inline on desktop */
.ny-state-select,
.ny-set-btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .near-you-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ny-prompt-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .ny-prompt-text {
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §19. SETTLEMENT LISTING FILTER BAR — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Ensure the filter toolbar and filter row on settlement listing pages
   are consistently centered and spaced.
   ══════════════════════════════════════════════════════════════════════════════ */

.sl-filter-toolbar {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.sl-filter-row {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.sl-active-tags {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §20. CATEGORY & STATE PAGE FILTER ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Category page filter bars and state page nav bars — center consistently.
   ══════════════════════════════════════════════════════════════════════════════ */

.cat-filter-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Category hub grid — center properly */
.ch-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 600px) {
  .ch-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §21. SETTLEMENT DETAIL PAGE ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Ensure detail page content containers center properly and don't
   exceed max-width on wide screens.
   ══════════════════════════════════════════════════════════════════════════════ */

.detail-hero .hero-inner,
.detail-body .content-with-sidebar {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.detail-body {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §22. SECONDARY PAGE HERO & CONTENT CENTERING — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Ensure all secondary pages (pricing, map, refer, guides, featured, privacy,
   terms, B2B pages) have consistent hero centering and body alignment.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 22a. Pricing page hero centering ────────────────────────────────────── */
.pricing-hero,
.pricing-hero .sp-hero-inner {
  text-align: center;
}

/* ── 22b. Map page hero and filter centering ─────────────────────────────── */
.map-hero-inner,
.map-filter-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* ── 22c. Refer page — ensure centered within narrow container ───────────── */
.refer-page {
  margin-left: auto;
  margin-right: auto;
}
.refer-hero {
  text-align: center;
}

/* ── 22d. Featured archive page centering ────────────────────────────────── */
.fa-hero-inner {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.fa-archive-wrap {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 22e. Privacy & Terms page centering ─────────────────────────────────── */
.policy-layout {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.policy-hero {
  text-align: center;
}

/* ── 22f. B2B pages (for-law-firms) — hero centering ────────────────────── */
.lf-hero,
.lf-hero-inner {
  text-align: center;
}
.lf-intro-bar-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 22g. Find-my-settlements wizard — already well-centered, safety net ─── */
.fms-wizard-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §23. GUIDE PAGES ALIGNMENT — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Guide index and individual guide pages — center hero and content containers.
   ══════════════════════════════════════════════════════════════════════════════ */

.guides-grid-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.guide-content-wrap {
  max-width: var(--max-width-prose, 700px);
  margin-left: auto;
  margin-right: auto;
}

/* Guide section labels — left-aligned within centered container */
.guides-section-label {
  text-align: left;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §24. GLOBAL SECTION HEADING CENTERING — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Section headings that introduce content grids should be left-aligned
   within their centered containers. Hero headings remain centered.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Section headings within body content — left-aligned */
.rs-featured-section h2,
.settlements-section h2,
.rs-guides-section h2,
.sr-trending-title,
.sr-benefits-inner h2 {
  text-align: left;
}

/* Email capture sections — centered */
.inline-email-cta,
.sl-email-section,
.cat-email-section,
.ch-email-box {
  text-align: center;
}

/* Ensure CTA wraps in email captures center buttons */
.inline-email-cta .email-strip-form,
.sl-email-form,
.cat-email-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §25. MOBILE ALIGNMENT REFINEMENTS — Task #881190
   ──────────────────────────────────────────────────────────────────────────────
   Additional mobile-specific alignment fixes across all pages.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Featured roundup: stack vertically on narrow screens */
  .featured-roundup-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .featured-roundup-cta {
    align-self: flex-start;
  }

  /* Near-you cards: ensure full width */
  .ny-grid {
    grid-template-columns: 1fr;
  }

  /* Category filter bar: wrap cleanly */
  .cat-filter-inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* Settlement listing hero sub-text */
  .sl-hero-sub {
    max-width: 100%;
  }

  /* Detail page body padding */
  .detail-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Map filter padding */
  .map-filter-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Privacy/Terms policy layout */
  .policy-layout {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Extra-narrow mobile (375px) */
@media (max-width: 400px) {
  .filters-section {
    padding: 0.75rem 0.75rem;
  }
  .featured-roundup-bar {
    padding: 0.6rem 0.75rem;
  }
  .near-you-section {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}


/* END alignment-audit.css — Task #881190 + #842209 */