/* ═══════════════════════════════════════════════════════════════════════
   Task #842210: Full Website Alignment & Layout QA — Part 2
   B2B, account, legal, blog, and remaining pages

   Fixes alignment, centering, card heights, mobile stacking, and
   consistency issues across all Part 2 pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. EQUAL-HEIGHT CARDS — B2B Pricing & Feature Grids
   All pricing tier cards must stretch to equal heights with CTAs
   pinned to the bottom. Applies to all B2B pages.
   ────────────────────────────────────────────────────────────────────── */

/* Partners — Law Firms pricing cards */
.plf-plans {
  align-items: stretch;
}
.plf-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plf-plan ul {
  flex-grow: 1;
}
.plf-plan-cta {
  margin-top: auto;
}

/* Partners — Employers pricing cards */
.pe-pricing-grid {
  align-items: stretch;
}
.pe-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pe-plan__features {
  flex-grow: 1;
}
.pe-plan__cta {
  margin-top: auto;
}

/* Partners — Employers ROI cards */
.pe-roi__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

/* For Administrators — pricing cards */
.la-pricing-grid {
  align-items: stretch;
}
.la-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.la-plan-features {
  flex-grow: 1;
}
.la-plan-cta {
  margin-top: auto;
}

/* For Administrators — "What's Included" cards */
.la-included-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.la-included-desc {
  flex-grow: 1;
}

/* Partners main page — "Why" cards */
.why-grid {
  align-items: stretch;
}
.why-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.why-card p {
  flex-grow: 1;
}

/* API docs — use case cards */
.use-case-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

/* API docs — pricing cards */
.pricing-grid {
  align-items: stretch;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-features {
  flex-grow: 1;
}

/* Data licensing — buyer cards */
.buyer-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.buyer-card p {
  flex-grow: 1;
}

/* Data licensing — pricing plans */
.dl-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dl-plan ul {
  flex-grow: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   2. FORM INPUT CONSISTENCY — Unified padding/sizing
   ────────────────────────────────────────────────────────────────────── */

/* Employers contact form — consistent input padding */
.pe-form__input,
.pe-form__select,
.pe-form__textarea {
  box-sizing: border-box;
}

/* Partners form — consistent focus states */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
}

/* API docs form — ensure no overflow */
.signup-card .form-input {
  box-sizing: border-box;
}


/* ──────────────────────────────────────────────────────────────────────
   3. MOBILE: B2B PAGES (375px+)
   ────────────────────────────────────────────────────────────────────── */

/* Administrators — contact section center on mobile */
@media (max-width: 640px) {
  .la-contact {
    justify-content: center;
    text-align: center;
  }
  .la-contact-btns {
    justify-content: center;
    width: 100%;
  }

  /* Partners credibility stats — stack on very narrow */
  .cred-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .cred-grid {
    grid-template-columns: 1fr;
  }
}

/* Administrators — modal safe area */
.la-modal-overlay {
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}

/* Employers stats row — intermediate breakpoint */
@media (max-width: 768px) {
  .pe-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* API docs — hero stats mobile */
@media (max-width: 640px) {
  .hero-stats {
    gap: 1rem;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. PRO DIGEST PAGE FIXES
   ────────────────────────────────────────────────────────────────────── */

/* Fix: Compare plan cards equal height */
.pd-compare .pd-plan {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.pd-compare .pd-plan ul {
  flex: 1;
}

/* Fix: Stats bar consistent alignment */
.pd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Fix: FAQ summary alignment with multi-line text */
.pd-faq summary {
  align-items: flex-start;
  gap: 1rem;
}

/* Fix: Form mobile stacking */
@media (max-width: 420px) {
  .pd-form {
    flex-direction: column;
  }
  .pd-form input[type="email"] {
    width: 100%;
    min-width: 0;
  }
  .pd-form button {
    width: 100%;
  }

  /* Billing toggle stacking */
  .pd-billing-toggle-wrap {
    flex-direction: column;
    width: 100%;
  }
  .pd-billing-btn {
    width: 100%;
    text-align: center;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   5. BLOG PAGES FIXES
   ────────────────────────────────────────────────────────────────────── */

/* Fix: Email gate form mobile stacking */
@media (max-width: 560px) {
  .email-gate-form {
    flex-direction: column;
    width: 100%;
  }
  .email-gate-input {
    width: 100%;
  }
  .email-gate-btn {
    width: 100%;
  }
}

/* Fix: Blog filter bar smooth scroll on mobile */
.blog-filter-inner {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Fix: Newsletter button touch target */
@media (max-width: 480px) {
  .blog-newsletter-btn {
    min-height: 44px;
  }
}

/* Fix: Blog post breadcrumb wrapping */
.post-breadcrumb {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fix: Blog post meta dot alignment */
.post-meta-dot {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Fix: Blog post newsletter mobile stacking */
@media (max-width: 768px) {
  .post-newsletter-form {
    width: 100%;
  }
  .post-newsletter-input {
    width: 100%;
    min-width: 0;
  }
  .post-newsletter-btn {
    width: 100%;
  }
}

/* Fix: Blog post filing CTA mobile */
@media (max-width: 480px) {
  .post-filing-cta {
    align-items: stretch;
  }
  .post-filing-cta-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Fix: Blog count label mobile */
@media (max-width: 480px) {
  .blog-count-label {
    font-size: 0.8rem;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   6. ACCOUNT PAGE FIXES
   ────────────────────────────────────────────────────────────────────── */

/* Fix: Account header mobile stacking */
@media (max-width: 480px) {
  .account-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* Fix: Feature grid equal heights */
.feature-grid {
  align-items: stretch;
}
.feature-item {
  min-height: 100%;
}


/* ──────────────────────────────────────────────────────────────────────
   7. CLAIM TRACKER FIXES
   ────────────────────────────────────────────────────────────────────── */

/* Fix: Hero value section mobile transition */
@media (max-width: 420px) {
  .ct-hero {
    flex-direction: column;
  }
  .ct-hero-value {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   8. STATE PAGES FIXES
   ────────────────────────────────────────────────────────────────────── */

/* Fix: Hero actions button stacking on mobile */
@media (max-width: 560px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Fix: State law note alignment */
.state-law-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}


/* ──────────────────────────────────────────────────────────────────────
   9. COMPARISON TABLE SCROLL HINTS
   On mobile, horizontally-scrollable tables need a visual hint
   so users know to swipe.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .plf-table-wrap,
  .pe-table-wrap,
  .la-table-wrap {
    position: relative;
  }
  .plf-table-wrap::after,
  .pe-table-wrap::after,
  .la-table-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92));
    pointer-events: none;
    border-radius: 0 8px 8px 0;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   10. GLOBAL TOUCH TARGET MINIMUM
   Ensure all interactive elements meet 44px minimum on mobile.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* B2B form submit buttons */
  .pe-form__btn,
  .la-form-btn,
  .partner-form button[type="submit"],
  .signup-card button[type="submit"] {
    min-height: 44px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   11. LEGAL PAGES — Consistent paragraph spacing & heading hierarchy
   Privacy & Terms already look good, but ensure mobile text sizing
   prevents iOS zoom and body text is readable.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .policy-body p,
  .policy-body li {
    font-size: 0.92rem;
    line-height: 1.7;
  }
  .policy-body h2 {
    font-size: 1.15rem;
  }
  .policy-body h3 {
    font-size: 1rem;
  }
}

/* Ensure legal page input font size prevents iOS zoom */
@media (max-width: 375px) {
  .policy-body input,
  .policy-body select,
  .policy-body textarea {
    font-size: 16px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   12. CODE BLOCK SCROLL FADE (API docs)
   ────────────────────────────────────────────────────────────────────── */

.code-block {
  position: relative;
}
.code-block::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, transparent, #1e293b);
  pointer-events: none;
  border-radius: 0 8px 8px 0;
  opacity: 0;
  transition: opacity 0.2s;
}
/* Only show fade when content overflows */
.code-block:hover::after {
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   13. DATA LICENSING RESPONSIVE FIXES
   ────────────────────────────────────────────────────────────────────── */

.dl-card {
  max-width: 100%;
}

@media (max-width: 640px) {
  .dl-plan {
    padding: 1.25rem;
  }
}

/* FAQ details smooth transition */
.dl-card details summary svg {
  transition: transform 0.2s ease;
}


/* ──────────────────────────────────────────────────────────────────────
   14. iOS INPUT ZOOM PREVENTION
   Any input with font-size < 16px causes iOS to auto-zoom on focus.
   Ensure all form inputs across all pages respect this.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
  .pe-form__input,
  .la-form-input,
  .partner-form .form-input,
  .signup-card .form-input,
  .pd-form input,
  .email-gate-input,
  .blog-sidebar-newsletter-input,
  .post-newsletter-input {
    font-size: 16px;
  }
}