/* ════════════════════════════════════════════════════════════════════════════════
   DESKTOP 1440px AUDIT — Task #962938
   Full-site layout audit at 1440px viewport width.
   Fixes alignment, spacing, and visual consistency gaps found across all pages.

   Load order: appended to combined.min.css cascade (after alignment-audit.css).
   Created: 2026-04-19
   ════════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   §1. BLOG PAGE — Normalize container width from 1200px → 1100px
   ──────────────────────────────────────────────────────────────────────────────
   Blog hero and grid use 1200px while all other secondary pages use 1100px.
   This creates a visual inconsistency — blog content extends 100px wider than
   guide pages, settlement pages, and other secondary pages at 1440px.
   ══════════════════════════════════════════════════════════════════════════════ */

.blog-hero-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

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

/* Blog author/article pages — same constraint */
.blog-article-wrap,
.blog-post-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §2. SETTLEMENT DETAIL — Align outer container with body content width
   ──────────────────────────────────────────────────────────────────────────────
   .detail-inner has max-width: 1200px (from settlement-detail.css) but
   .content-with-sidebar inside it has max-width: 1100px (from alignment-audit).
   This creates a 50px misalignment on each side — breadcrumb/header are wider
   than the main content area. Normalize .detail-inner to match body content.
   ══════════════════════════════════════════════════════════════════════════════ */

.detail-inner {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* Ensure content-with-sidebar respects the parent width */
.detail-body .content-with-sidebar {
  max-width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §3. FOR-LAW-FIRMS — Label centering and intro bar
   ──────────────────────────────────────────────────────────────────────────────
   The .lf-logos section is a full-width ticker (intentional — needs overflow:hidden).
   The .lf-logos-label text above it can be centered for visual balance.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Center the "Covering settlements from..." label text */
.lf-logos-label {
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Intro/social proof bar inner constraint */
.lf-intro-bar {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.lf-intro-bar-inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §4. SETTLEMENT MAP — Legend bar padding alignment
   ──────────────────────────────────────────────────────────────────────────────
   .map-legend-bar spans full viewport width (intentional — matches the map above).
   Add consistent horizontal padding so legend items don't hug the viewport edges.
   ══════════════════════════════════════════════════════════════════════════════ */

.map-legend-bar {
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §5. DIRECTORY — Category nav alignment
   ──────────────────────────────────────────────────────────────────────────────
   .dir-cat-inner uses 1200px while .dir-hero-inner and .dir-grid-wrap use 1100px.
   Normalize to 1100px for visual column alignment.
   ══════════════════════════════════════════════════════════════════════════════ */

.dir-cat-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §6. DESKTOP MEGA-MENU — Active page indicator
   ──────────────────────────────────────────────────────────────────────────────
   The JS sets .nav-active on the active mega-btn but the visual indicator is
   only a color change (green). Add an underline for clearer active state.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  /* Active section button: green color + bottom underline */
  .mega-btn.nav-active {
    color: #059669 !important;
    -webkit-text-fill-color: #059669 !important;
    font-weight: 600 !important;
  }

  .mega-btn.nav-active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: #059669;
    border-radius: 1px;
  }

  /* Pricing direct link (not a mega-btn, but similar treatment) */
  .nav-pricing-direct.nav-active {
    color: #059669 !important;
    font-weight: 600 !important;
    position: relative;
  }

  .nav-pricing-direct.nav-active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: #059669;
    border-radius: 1px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §7. SECTION PADDING CONSISTENCY — Wide desktop (1281-1440px)
   ──────────────────────────────────────────────────────────────────────────────
   Ensure all major section containers have consistent vertical padding at
   desktop widths. Sections should breathe without excessive whitespace.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Standard secondary-page sections */
  .sp-section {
    padding-top: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
  }

  /* Ensure hero sections have consistent vertical rhythm */
  .sp-hero {
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §8. CARD HOVER STATE CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   All interactive cards should share the same hover pattern: subtle lift +
   emerald shadow. Standardize across settlement cards, guide cards, tool cards.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Settlement listing cards */
.settlement-card:hover,
.dir-card:hover,
.np-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Guide cards */
.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tool cards */
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §9. BUTTON VISUAL CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   Ensure all primary CTA buttons across all pages use the same green, radius,
   height, and hover state. Normalize any one-off button styles.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Primary CTA: consistent emerald style */
.btn-primary,
.sr-hero-cta-primary,
.sp-btn-primary,
.lf-cta-primary,
.emp-cta-primary {
  background-color: #059669;
  border-color: #059669;
  color: #ffffff;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover,
.sr-hero-cta-primary:hover,
.sp-btn-primary:hover,
.lf-cta-primary:hover,
.emp-cta-primary:hover {
  background-color: #047857;
  border-color: #047857;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
  transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §10. FOOTER VISUAL CONSISTENCY
   ──────────────────────────────────────────────────────────────────────────────
   Ensure footer inner container is consistent across all pages.
   Already handled by alignment-audit.css but reinforce here for safety.
   ══════════════════════════════════════════════════════════════════════════════ */

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


/* ══════════════════════════════════════════════════════════════════════════════
   §11. TYPOGRAPHY CONSISTENCY — Page titles and section headings
   ──────────────────────────────────────────────────────────────────────────────
   Standardize h1/h2 sizing across all secondary pages for visual harmony.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* All secondary page hero headings: consistent sizing */
  .sp-hero h1,
  .sp-hero-inner h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  /* Section headings across all pages */
  .sp-section h2,
  .lf-section h2,
  .emp-section h2 {
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §12. PRICING PAGE — Plan cards visual consistency at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   Ensure 4-column pricing grid has proper spacing and cards don't look cramped.
   At 1440px with max-width 1200px, each card is ~270px — comfortable.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .prc-grid {
    gap: 1.25rem;
  }

  /* Ensure comparison table CTA cells align consistently */
  .cmp-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §13. SETTLEMENT LISTINGS — Filter bar and grid consistency
   ──────────────────────────────────────────────────────────────────────────────
   Settlements index (/settlements): filter bar, grid, and category pills should
   all align at the same 1100px max-width column.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Grid gap at desktop: comfortable card spacing */
  .dir-grid {
    gap: 1.25rem;
  }

  /* Category pills should match grid width */
  .dir-browse-cats-inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §14. ABOUT PAGE — section hero + info sections at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   About page uses .ab-container (1100px) consistently. Ensure hero section
   text doesn't stretch and inline max-widths are normalized.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .ab-hero-inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §15. B2B PAGES (LAW FIRMS / EMPLOYERS) — Tier cards at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   Tier/pricing cards on B2B pages should be properly spaced at 1440px.
   The 3-column grid within 1200px container gives ~370px per card — ideal.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Law firms pricing grid */
  .lf-pricing-grid {
    gap: 1.5rem;
  }

  /* Employers pricing grid */
  .emp-pricing-grid {
    gap: 1.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §16. CONTACT PAGE — Form layout at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   Contact form uses .co-container (1100px) with a 2-column grid. This is
   properly constrained. Ensure sticky form positioning works at desktop.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .co-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §17. GUIDE PAGES — Content width and sidebar at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   Individual guide pages use .guide-content-wrap (700px) for prose content.
   This is intentionally narrow for readability — no change needed.
   Guide index uses .guides-grid-wrap (1100px) — consistent.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Guide index: ensure grid columns don't get too wide at 1440px */
@media (min-width: 1024px) {
  .guides-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Guide TOC sidebar: hide at desktop on narrow viewports, show at wide */
  .guide-toc {
    display: block;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §18. FIND-MY-SETTLEMENTS — Quiz and results at 1440px
   ──────────────────────────────────────────────────────────────────────────────
   The wizard is intentionally narrow (560px) for focus. Results display
   should be constrained and centered properly.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Results container: proper centering */
.fms-results-wrap,
.fms-results-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
}


/* ══════════════════════════════════════════════════════════════════════════════
   §19. COMPARE PAGES — Comparison table at 1440px
   ──────────────────────────────────────────════════════════════════════════════
   Compare pages use .cmp-table-section (1100px) — already properly constrained.
   Ensure horizontal scroll on table works cleanly on all screen sizes.
   ══════════════════════════════════════════════════════════════════════════════ */

.cmp-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §20. SECTION DIVIDERS — Visual rhythm consistency
   ──────────────────────────────────────════════════════════════════════════════
   Prevent double borders where sections stack adjacent to each other.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Remove double borders between adjacent same-color sections */
.sp-section + .sp-section {
  border-top: none;
}

/* Ensure contrast-safe section headers don't get random dark backgrounds */
.sp-section h2,
.sp-section h3 {
  color: #111827;
}


/* ══════════════════════════════════════════════════════════════════════════════
   §21. GLOBAL CONTAINER SAFETY — Nav inner centering at very wide viewports
   ──────────────────────────────────────────────────────────────────────────────
   Ensure the nav inner content stays centered on screens wider than the nav max-width.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1400px) {
  /* Ensure navigation inner content stays centered */
  .nav-inner,
  .nav-brand-row {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   §22. MOBILE SAFETY — Ensure fixes don't break mobile
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Reset desktop-only fixes on mobile */
  .blog-hero-inner,
  .blog-wrap {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .detail-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .lf-logos {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .fms-results-wrap,
  .fms-results-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* END desktop-1440-audit.css — Task #962938 */