/* 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; aspect-ratio: 16/9; }
.tb-post-thumb-img  { width: 100%; height: 100%; 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; }

/* ── Prose / blog post content typography ─────────────────────────────── */
.prose p          { margin-top: 1.25em; margin-bottom: 1.25em; line-height: 1.75; }
.prose p:first-child { margin-top: 0; }
.prose h2         { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-top: 2em; margin-bottom: 0.75em; color: rgb(30 58 95); }
.prose h3         { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-top: 1.75em; margin-bottom: 0.5em; color: rgb(30 58 95); }
.prose h4         { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.4em; color: rgb(30 58 95); }
.prose ul, .prose ol { margin-top: 1em; margin-bottom: 1em; padding-left: 1.625em; }
.prose ul         { list-style-type: disc; }
.prose ol         { list-style-type: decimal; }
.prose li         { margin-top: 0.5em; margin-bottom: 0.5em; }
.prose a          { color: rgb(249 115 22); text-decoration: underline; }
.prose a:hover    { color: rgb(234 88 12); }
.prose strong     { font-weight: 700; }
.prose em         { font-style: italic; }
.prose blockquote { border-left: 4px solid rgb(249 115 22); padding-left: 1em; margin: 1.5em 0; color: rgb(107 114 128); font-style: italic; }
.prose code       { background: rgb(243 244 246); padding: 0.15em 0.4em; border-radius: 0.25em; font-size: 0.9em; }
.prose hr         { border: 0; border-top: 1px solid rgb(229 231 235); margin: 2em 0; }

/* ── TOC container ─────────────────────────────────────────────────────── */
.toc-container    { background: rgb(239 246 255); border: 1px solid rgb(219 234 254); border-radius: 0.5rem; padding: 1rem 1.25rem; margin: 1.5em 0; }
.toc-title        { font-weight: 700; margin: 0 0 0.5em 0 !important; color: rgb(30 58 95); }
.toc-list         { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.toc-list li      { margin: 0.3em 0 !important; }
.toc-list li a    { color: rgb(37 99 235); text-decoration: none; }
.toc-list li a:hover { text-decoration: underline; }

/* ── PAA (People Also Ask) accordion ──────────────────────────────────── */
.paa-container    { margin-top: 2em; }
.paa-item         { border-bottom: 1px solid rgb(229 231 235); }
.paa-item details { padding: 0.75em 0; }
.paa-item summary { font-weight: 600; cursor: pointer; color: rgb(30 58 95); list-style: none; }
.paa-item summary::-webkit-details-marker { display: none; }
.paa-item summary::before { content: "+ "; color: rgb(249 115 22); }
.paa-item details[open] summary::before { content: "− "; }
.paa-answer       { margin-top: 0.5em; color: rgb(75 85 99); line-height: 1.65; }

/* single.php — Tailwind classes not compiled into main-built.css */
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.max-h-96 { max-height: 24rem; }
.rounded-b-xl { border-bottom-left-radius: .75rem; border-bottom-right-radius: .75rem; }
.prose { max-width: 65ch; color: rgb(55 65 81); }
.prose > * + * { margin-top: 1.25em; }
.prose p { margin-top: 1.25em; margin-bottom: 1.25em; line-height: 1.75; }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2em; margin-bottom: 1em; color: rgb(17 24 39); }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.6em; margin-bottom: 0.6em; color: rgb(17 24 39); }
.prose ul { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; }
.prose li { margin-top: 0.5em; margin-bottom: 0.5em; }
.prose a { color: rgb(30 58 95); text-decoration: underline; }
.prose strong { font-weight: 700; }
.single-post-thumb { margin-top: 2.5rem; }