/* Template B v2 — small overrides on top of compiled Tailwind CSS.
 * Reserved for things the live site does via React state that we replace with CSS-only behavior. */

/* FAQ accordion +/- toggle (live site uses React useState; we use <details>/<summary>). */
.tb-faq-card summary { list-style: none; }
.tb-faq-card summary::-webkit-details-marker { display: none; }
.tb-faq-card[open] .tb-faq-marker::before { content: '−'; }
.tb-faq-card:not([open]) .tb-faq-marker::before { content: '+'; }
.tb-faq-card .tb-faq-marker { font-size: 0; line-height: 1; }
.tb-faq-card .tb-faq-marker::before { font-size: 24px; line-height: 1; }

/* WP admin bar at top of page nudges sticky header positions; only on logged-in views. */
.admin-bar header.sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar header.sticky { top: 46px; } }

/* Tailwind utilities NOT shipped in the live site's compiled JIT CSS bundle.
 * The live Next.js Image fill component renders inline style="position:absolute;
 * height:100%;width:100%;..." instead of using these utility classes, so JIT
 * never compiled them. We need them because our WP markup uses utility classes
 * for the same effect. */
.h-full   { height: 100%; }
.h-96     { height: 24rem; }
.w-80     { width: 20rem; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x,0), var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x,0), var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.bg-navy\/50 { background-color: rgb(30 58 95 / 0.5); }
.group:hover .group-hover\:bg-navy\/50 { background-color: rgb(30 58 95 / 0.5); }
.cursor-pointer { cursor: pointer; }
.list-none { list-style-type: none; }

/* ── Blog index (home.php) ──────────────────────────────────────────────── */
/* 1-column on mobile, 2-column on desktop (md:grid-cols-2 not in compiled CSS) */
.tb-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .tb-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Featured image card */
.tb-post-thumb-wrap { display: block; overflow: hidden; height: 220px; }
.tb-post-thumb-img  { width: 100%; height: 220px; object-fit: cover; display: block; }

/* Pagination */
.tb-blog-pagination { margin-top: 3rem; }
.tb-blog-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tb-blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
  border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem;
  color: #1e3a5f; background: #f9fafb; border: 1px solid #e5e7eb;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.tb-blog-pagination .page-numbers:hover  { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.tb-blog-pagination .page-numbers.current { background: #f97316; color: #fff; border-color: #f97316; }