/* ===========================================================
   TimeCatchApp Blog — child theme stylesheet
   Ported from /content/blog-redesign/shared.css (approved mockup).
   Colors/font pulled from timecatchapp.com computed styles:
   navy #172B4D, indigo accent #5E72E4, green accent #24A46D,
   body font Arial (matches main site).
   =========================================================== */

* { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #32325D;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo img { height: 34px; display: block; }
.main-nav { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav-item { position: relative; }
.nav-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #32325D; padding: 10px 0; display: flex; align-items: center; gap: 4px;
}
.nav-link.plain { font-weight: 700; }
.chevron { font-size: 10px; opacity: .6; }
.dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: -12px;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(23,43,77,0.14);
  padding: 10px; min-width: 300px;
}
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 700;
}
.dropdown-menu a:hover { background: #F3F4F9; }
.dropdown-menu a span { display: block; font-size: 12.5px; font-weight: 400; color: #6B7280; margin-top: 2px; }
.dropdown-menu a.active { background: #EEF0FC; color: #5E72E4; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.btn-text { font-size: 14px; font-weight: 700; color: #32325D; }
.btn-primary {
  background: #5E72E4; color: #FFFFFF; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 8px; white-space: nowrap; display: inline-block;
}
.btn-primary:hover { background: #4C5FD0; color: #FFFFFF; }
.mobile-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }

@media (max-width: 900px) {
  .main-nav, .header-actions { display: none; }
  .mobile-toggle { display: block; margin-left: auto; }
}

/* ---------- Footer ---------- */
.site-footer { background: #172B4D; color: #C9D2E8; padding: 56px 24px 0; }
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 30px; margin-bottom: 12px; }
.version-link { font-size: 12.5px; color: #8DA0D0; }
.footer-col h4 { color: #FFFFFF; font-size: 14px; margin: 0 0 14px; }
.footer-col a { display: block; font-size: 13.5px; color: #C9D2E8; margin-bottom: 10px; }
.footer-col a:hover { color: #FFFFFF; }
.social-icons { display: flex; gap: 12px; flex-wrap: wrap; }
.social-icons a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #FFFFFF;
}
.footer-bottom {
  max-width: 1280px; margin: 0 auto; padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: #8DA0D0;
}
.footer-bottom a { color: #8DA0D0; }
.footer-bottom a:hover { color: #FFFFFF; }

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- Newsletter signup block ---------- */
.newsletter-block {
  background: linear-gradient(135deg, #0F1F3A 0%, #172B4D 55%, #26346B 100%);
  color: #FFFFFF; border-radius: 16px; padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin: 40px 0;
}
.newsletter-copy h3 { font-size: 22px; margin: 0 0 6px; color: #FFFFFF; }
.newsletter-copy p { font-size: 14.5px; color: #B9C6EC; margin: 0; max-width: 420px; }
/* Plain link-through button -- no email capture here, since it's already
   collected on the /consulting-insights landing page itself. */
.newsletter-cta {
  display: inline-block; border: none; background: #5E72E4; color: #FFFFFF; font-weight: 700; font-size: 14px;
  padding: 13px 26px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.newsletter-cta:hover { background: #4C5FD0; color: #FFFFFF; }

@media (max-width: 640px) {
  .newsletter-block { padding: 32px 24px; }
  .newsletter-cta { width: 100%; text-align: center; }
}

/* ---------- Blog index: hero ---------- */
.blog-hero {
  background: linear-gradient(135deg, #0F1F3A 0%, #172B4D 55%, #26346B 100%);
  color: #FFFFFF; padding: 72px 24px 64px; text-align: center;
}
.blog-hero h1 { font-size: 42px; margin: 0 0 14px; color: #FFFFFF; }
.blog-hero p { font-size: 18px; color: #B9C6EC; max-width: 640px; margin: 0 auto 28px; }
.hero-search { max-width: 480px; margin: 0 auto; display: flex; background: #FFFFFF; border-radius: 8px; overflow: hidden; }
.hero-search input { flex: 1; border: none; padding: 13px 16px; font-size: 14px; font-family: inherit; outline: none; }
.hero-search button { border: none; background: #5E72E4; color: #FFFFFF; padding: 0 20px; font-weight: 700; cursor: pointer; }

/* ---------- Blog index: post grid ---------- */
.blog-grid-section { max-width: 1120px; margin: 0 auto; padding: 56px 24px 80px; }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; list-style: none; margin: 0; padding: 0; }
.blog-grid.is-first-block { margin-bottom: 0; }
/* WordPress core styles give every .wp-block-post <li> a 24px top margin
   except the first one (meant for a single-column list) -- in a 2-column
   grid that pushes right-column items down relative to their left-column
   row-mates. Same bug found and fixed on the "More from the blog" grid;
   fixing it here too before it gets reported separately. */
.blog-grid > li { margin-top: 0 !important; }
.post-card { border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; transition: box-shadow .15s, transform .15s; height: 100%; }
.post-card:hover { box-shadow: 0 16px 32px rgba(23,43,77,0.12); transform: translateY(-2px); }
/* First post in the whole grid reads as the featured/lead item. WordPress's
   Query Loop wraps every post in its own <li>, so ".post-card:first-child"
   was wrong -- each .post-card is the sole/first child of its own <li>,
   meaning that selector matched EVERY card, not just the lead one (this
   was the actual bug behind images "covering" every card's text). Target
   the grid's first <li> directly instead. */
.blog-grid > li:first-child {
  grid-column: 1 / -1;
}
.blog-grid > li:first-child .post-card {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
/* !important throughout this block: WordPress's own core block-library
   stylesheet (wp-block-library/style.css) ships a competing
   `.wp-block-post-featured-image img { height: auto; }` rule, and because
   the post-featured-image block can wrap the <img> in an extra div when
   aspectRatio/scale attributes are set, a plain class selector doesn't
   reliably win the cascade or target the right element. Targeting both
   the class WP always adds (.wp-block-post-featured-image) and our own
   (.post-thumb), with !important, makes this robust regardless of the
   exact markup WordPress renders. */
.post-thumb,
.post-card .wp-block-post-featured-image {
  aspect-ratio: 16/9 !important;
  max-height: 260px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #FFFFFF; background: linear-gradient(135deg,#172B4D,#5E72E4);
  overflow: hidden !important;
}
.post-thumb img,
.post-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}
.blog-grid > li:first-child .post-thumb,
.blog-grid > li:first-child .wp-block-post-featured-image {
  aspect-ratio: auto !important;
  max-height: none !important;
  height: 100% !important;
}
.post-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; }
.blog-grid > li:first-child .post-card-body { justify-content: center; padding: 32px; }
.post-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #5E72E4; background: #EEF0FC; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; width: fit-content;
}
.post-card h2 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; }
.blog-grid > li:first-child h2 { font-size: 26px; }
.post-card h2 a:hover { color: #5E72E4; }
.post-excerpt { font-size: 14px; line-height: 1.6; color: #5F6B85; margin: 0 0 16px; }
.post-meta { font-size: 12.5px; color: #8892A6; margin-top: auto; }

/* Same pattern as the featured-image fix: target both our class and the
   one WordPress always adds (.wp-block-query-pagination), with
   !important, so this doesn't depend on the block's "layout":"flex"
   attribute actually rendering as a horizontal flex row on its own. The
   query-pagination-numbers block also wraps its links in its own
   container that needs the same treatment. */
.pagination,
.wp-block-query-pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  margin-top: 48px;
}
.wp-block-query-pagination-numbers {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}
.pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid #E5E7EB; padding: 0 10px;
}
.pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current { background: #5E72E4; color: #FFFFFF; border-color: #5E72E4; }
.pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:hover { border-color: #5E72E4; color: #5E72E4; }

@media (max-width: 800px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid > li:first-child .post-card { grid-template-columns: 1fr; }
  .blog-hero h1 { font-size: 30px; }
}

/* ---------- Single post ---------- */
.breadcrumb { max-width: 1120px; margin: 0 auto; padding: 18px 24px 0; font-size: 13px; color: #8892A6; }
.breadcrumb a:hover { color: #5E72E4; }

.post-shell { max-width: 1120px; margin: 0 auto; padding: 24px 24px 100px; display: grid; grid-template-columns: 1fr; }
/* max-width/width !important: .post-layout is an unaligned block inside
   .post-shell's WordPress "constrained" layout context, so without this
   it silently inherits the theme's default 770px content-width cap from
   theme.json -- which was capping .related-posts to 770px regardless of
   its own (wider) max-width, since a child can't exceed a narrower
   parent no matter what its own max-width allows. justify-items:center
   below still centers .post-wrap (720px) and .related-posts (1072px)
   independently within this now-unconstrained row. */
.post-layout { display: grid; grid-template-columns: 1fr; justify-items: center; max-width: none !important; width: 100% !important; }
.post-wrap { max-width: 720px; width: 100%; }

.post-wrap h1.post-title { font-size: 38px; line-height: 1.25; margin: 0 0 18px; color: #172B4D; }
.post-meta-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #6B7280; margin-bottom: 32px; }
.author-avatar { width: 32px; height: 32px; border-radius: 50%; background: #5E72E4; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

.post-featured-image-wrap {
  aspect-ratio: 21/9; border-radius: 14px; margin-bottom: 40px; overflow: hidden;
  background: linear-gradient(135deg,#172B4D,#5E72E4);
}
.post-featured-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-toc {
  background: #F7F8FC; border: 1px solid #E5E7EB; border-radius: 12px; padding: 20px 24px; margin-bottom: 40px;
}
.post-toc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #6B7280; margin: 0 0 12px; }
.post-toc a { display: block; font-size: 14.5px; font-weight: 700; color: #32325D; padding: 6px 0; }
.post-toc a:hover { color: #5E72E4; }

.post-body, .entry-content { font-size: 17px; line-height: 1.75; color: #3A3F52; }
.post-body p, .entry-content p { margin: 0 0 22px; }
.post-body h2, .entry-content h2 { font-size: 26px; color: #172B4D; margin: 44px 0 18px; scroll-margin-top: 90px; }
.post-body ul, .entry-content ul { margin: 0 0 22px; padding-left: 22px; }
.post-body li, .entry-content li { margin-bottom: 8px; }

.post-faq { margin-top: 48px; }
.post-faq h2 { font-size: 26px; color: #172B4D; margin: 0 0 20px; }
.post-faq details {
  border: 1px solid #E5E7EB; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px;
}
.post-faq summary { font-weight: 700; font-size: 15.5px; cursor: pointer; color: #32325D; }
.post-faq p { margin: 12px 0 0; font-size: 15px; color: #5F6B85; }

.post-cta {
  margin-top: 56px; background: linear-gradient(135deg,#0F1F3A,#172B4D 55%,#26346B);
  color: #fff; border-radius: 16px; padding: 40px; text-align: center;
}
.post-cta h3 { font-size: 24px; margin: 0 0 10px; color: #FFFFFF; }
.post-cta p { color: #B9C6EC; margin: 0 0 22px; }
.post-cta .btn-primary { display: inline-block; padding: 12px 26px; font-size: 15px; }

/* ~50% wider than the 720px reading column, and marked "align: wide" in
   the template (not just this CSS) so it escapes theme.json's default
   770px content-width cap on unaligned blocks -- !important as a
   defensive backup in case that global-styles rule still wins the
   cascade for any reason. */
/* .post-layout > .related-posts (two classes) rather than plain
   .related-posts (one class): WordPress's own global-styles block ships
   `.is-layout-constrained > :where(...)  { max-width: ... !important }`
   whose :where() exclusion list does NOT include .alignwide, so it caps
   alignwide blocks too -- and its separate .alignwide override rule
   ISN'T marked !important, so it loses to that one. With both this rule
   and WP's at equal specificity and both !important, it came down to
   stylesheet load order (WP's loads after ours and won). Bumping our
   selector to two classes gives it higher specificity so it wins
   regardless of load order. */
.post-layout > .related-posts { max-width: 368px !important; width: 100% !important; margin: 56px auto 0 !important; }
.related-posts h3 { font-size: 20px; color: #172B4D; margin: 0 0 18px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; align-items: start; }
/* Same WordPress core default (24px top margin on every .wp-block-post
   li but the first) that misaligned the blog-grid rows -- see comment
   there. This, combined with the outer/inner class-name collision fixed
   above, was the actual cause of the "tiles to the left" and "tops not
   aligned" symptoms. */
.related-grid > li { margin-top: 0 !important; }
.related-card {
  display: block; border: 1px solid #E5E7EB; border-radius: 12px; padding: 18px 20px; font-size: 14.5px; font-weight: 700; color: #32325D;
}
.related-card:hover { border-color: #5E72E4; color: #5E72E4; }
/* The wp:post-title block renders as a heading (h2 by default), which
   doesn't inherit .related-card's font-size -- it was picking up the
   theme's default h2 size (28px) instead, which is why the text was
   oversized and wrapping. Overriding directly on the heading itself. */
.related-card h2,
.related-card h3 {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #32325D !important;
  margin: 0 !important;
}
.related-card span { display: block; font-size: 12.5px; font-weight: 400; color: #8892A6; margin-top: 6px; }

.share-rail { display: flex; gap: 10px; margin-bottom: 32px; }
.share-rail a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E5E7EB; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #32325D;
}
.share-rail a:hover { border-color: #5E72E4; color: #5E72E4; }

@media (max-width: 700px) {
  .post-wrap h1.post-title { font-size: 28px; }
  .related-grid { grid-template-columns: 1fr; }
}