/* ============================================================
   Page-level styles for the server-rendered Softrify pages.
   Builds on styles.css (tokens, buttons, header, footer),
   services.css (sub-page hero) and library.css (blocks).
   ============================================================ */

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-family: 'Space Grotesk'; font-size: 14px; }
.skip-link:focus { left: 0; }

:where(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ---------- Header: two logos, swapped by scroll state ---------- */
.site-header .logo-light { display: none; }
.site-header .logo-dark { display: block; }
.site-header.scrolled .logo-light { display: block; }
.site-header.scrolled .logo-dark { display: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu { padding: 12px 0 20px; border-top: 1px solid rgba(38,51,89,.1); background: #fff; }
.mobile-menu .container-x { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid rgba(38,51,89,.06); }
.mobile-menu a:last-of-type { border-bottom: none; }

/* ---------- Footer headings (were <h6>, now semantic <h2>) ---------- */
.footer .footer-heading { font-family: 'Space Grotesk'; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }

/* ---------- Section head defaults on new pages ---------- */
.features .section-head, .industries-rich .section-head, .logos .section-head, .team .section-head, .faq .section-head, .blog .section-head { margin-bottom: 56px; }
.detail-copy .eyebrow { margin-bottom: 4px; }

/* ---------- Forms ---------- */
.form-error { color: #c0392b; font-size: 14px; margin: 0; }

/* ---------- Blog: article layout with sticky TOC ---------- */
.article-layout { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 56px; justify-content: center; align-items: start; }
@media (max-width: 1040px) { .article-layout { grid-template-columns: minmax(0, 720px); justify-content: center; } .article-toc { display: none; } }

.article-toc .toc { position: sticky; top: 120px; }
.article-body { max-width: 720px; margin: 0; }
.article-lede { font-size: 20px !important; line-height: 1.6 !important; color: var(--ink) !important; font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid rgba(38,51,89,.12); }
.article-body h2 { scroll-margin-top: 110px; }
.article-body a { color: var(--red); }

.article-after { max-width: 720px; margin: 64px auto 0; display: flex; flex-direction: column; gap: 24px; }
.article-after .author-box { max-width: none; }

/* Blog listing helpers */
.blog-empty { color: var(--muted); font-size: 16px; text-align: center; padding: 40px 0; }
.featured-post { text-decoration: none; color: inherit; }

/* Grid/flex children default to min-width:auto, so an unwrappable meta row
   can push a card wider than a phone screen. Let them wrap and shrink. */
.featured-post > *, .post-card > *, .ind-card > *, .detail-grid > *, .contact-grid > * { min-width: 0; }
.fp-meta, .post-meta, .article-meta { flex-wrap: wrap; }
.post-card h3 a:hover { color: var(--red); }
.filter-bar .filter-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 720px) {
  .page-banner { padding: 118px 0 52px; }
  .detail-block { padding: 72px 0 !important; }
  .features, .industries-rich, .logos, .team, .faq, .blog, .contact { padding: 72px 0; }
  .stats { padding: 64px 0; }
  .article { padding: 96px 0 80px; }
  .article-head { text-align: left; }
  .article-head .breadcrumb { justify-content: flex-start !important; }
  /* Breadcrumb links are small hit areas on a phone — pad them out. */
  .breadcrumb a, .breadcrumb .current,
  .page-banner .crumb a, .page-banner .crumb .cur { display: inline-flex; align-items: center; min-height: 38px; }
  .article-meta { flex-wrap: wrap; gap: 6px 12px; }
  .article-body p { font-size: 17px; }
  .faq-item summary { padding: 20px; font-size: 16px; }
  /* iOS Safari zooms on focus below 16px; library.css sets 15px so override here. */
  .cf-field input, .cf-field textarea, .cf-field select { font-size: 16px; }
  .faq-item .faq-a { padding: 0 20px 22px; }
  .section-head { margin-bottom: 40px !important; }
}

@media (max-width: 860px) {
  /* aspect-ratio would otherwise derive width from min-height and overshoot */
  .featured-post .fp-media .img-ph, .featured-post .fp-media img { width: 100%; max-width: 100%; }
}

@media (max-width: 560px) {
  .featured-post .fp-body { padding: 26px 22px; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .pg-link { min-width: 40px; height: 40px; }
}