/* Blog Specific Styling 
   Brand Colors: 
   Navy: #14324d
   Orange: #f59d2a
   Light BG: #f7f9fc
   Text Navy: #0f2d48
   Muted Text: #5e7188
*/

:root {
  --blog-navy: var(--navy);
  --blog-navy-dark: #0d2235;
  --blog-orange: var(--orange);
  --blog-orange-hover: #d8872a;
  --blog-light: #f7f9fc;
  --blog-text-navy: var(--navy);
  --blog-text-muted: #5e7188;
  --blog-white: #ffffff;
  --blog-border: #e8ecf1;
  --blog-shadow: 0 4px 15px rgba(20, 50, 77, 0.05);
  --blog-shadow-hover: 0 10px 25px rgba(20, 50, 77, 0.1);
  --blog-radius: 8px;
}

/* Blog button adjustments are scoped so the rest of the site keeps its existing button behavior. */
.blog-hero .btn, .blog-cta .btn { width: auto; min-height: 54px; white-space: nowrap; }
.blog-hero .btn-primary, .blog-cta .btn-primary { background-color: var(--blog-orange); color: var(--blog-white) !important; box-shadow: 0 4px 15px rgba(245, 157, 42, 0.25); }
.blog-hero .btn-primary:hover, .blog-cta .btn-primary:hover { background-color: var(--blog-orange-hover); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245, 157, 42, 0.4); }
.blog-hero .btn-secondary { background-color: transparent; color: var(--blog-white) !important; border-color: rgba(255, 255, 255, 0.6); }
.blog-hero .btn-secondary:hover { background-color: var(--blog-white); color: var(--blog-navy) !important; border-color: var(--blog-white); transform: translateY(-2px); }

/* 1. Blog Hero (Hub & Post) */
.blog-hero, .blog-post-hero { background-color: var(--blog-navy); color: var(--blog-white); text-align: center; position: relative; overflow: hidden; }
.blog-hero.shared-static-hero {
  background-image:
    linear-gradient(180deg, rgba(9, 36, 58, 0.46) 0%, rgba(9, 36, 58, 0.58) 100%),
    url("../images/hero/blog-library-two.webp");
}
.blog-hero-container, .blog-post-hero-container { max-width: 900px; margin: 0 auto; text-align: center; }
.blog-hero h1, .blog-post-hero h1 { color: var(--blog-white); margin-bottom: 1.5rem; }
.blog-hero-intro { color: rgba(255,255,255,0.9); margin-bottom: 2.5rem; }
.blog-eyebrow { color: var(--blog-orange); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1rem; text-transform: uppercase; }
.blog-hero .blog-eyebrow,
.blog-hero.shared-static-hero .blog-eyebrow { display: block; text-align: center; margin: 0 auto 1rem; position: static; left: auto; right: auto; transform: none; width: auto; max-width: 100%; }
.blog-hero-actions { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.blog-post-category { display: inline-block; background-color: rgba(245, 157, 42, 0.15); color: var(--blog-orange); padding: 6px 16px; border-radius: 4px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; }
.blog-post-excerpt { font-size: 1.3rem; color: rgba(255,255,255,0.9); margin-bottom: 2rem; line-height: 1.6; }
.blog-post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem 1.25rem; color: rgba(255,255,255,0.72); font-size: 0.98rem; }
.blog-post-meta span { position: relative; }
.blog-post-meta span + span::before { content: ""; position: absolute; left: -0.7rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.45); transform: translateY(-50%); }

/* 2. Blog Intro */
.blog-intro { padding: 80px 0; background-color: var(--blog-light); text-align: center; }
.blog-intro-container { max-width: 1100px; margin: 0 auto; }
.blog-intro h2 { font-size: 2.2rem; color: var(--blog-text-navy); max-width: 900px; margin: 0 auto 1.5rem auto; text-align: center; }
.blog-intro p { font-size: 1.15rem; color: var(--blog-text-muted); line-height: 1.7; text-align: left; }

/* 3. Blog Category Cards */
.blog-category-section { padding: 80px 0 40px; background-color: var(--blog-white); }
.blog-category-section .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.blog-section-heading { max-width: 980px; margin: 0 auto 2.5rem; text-align: center; }
.blog-section-heading h2 { font-size: 2.2rem; color: var(--blog-text-navy); margin: 0 0 0.75rem; }
.blog-section-heading p { color: var(--blog-text-muted); font-size: 1.1rem; line-height: 1.7; margin: 0 auto; text-align: left; }
.blog-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; width: 100%; max-width: 1320px; margin: 0 auto; box-sizing: border-box; }
.blog-category-card { background: var(--blog-white); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); padding: 1.75rem; text-align: left; text-decoration: none; box-shadow: var(--blog-shadow); transition: all 0.3s ease; display: block; min-width: 0; border-bottom: 3px solid transparent; }
.blog-category-card h3 { font-size: 1.25rem; color: var(--blog-text-navy); margin: 0 0 0.75rem; transition: color 0.3s ease; }
.blog-category-card p { color: var(--blog-text-muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.blog-category-card:hover { transform: translateY(-4px); box-shadow: var(--blog-shadow-hover); border-bottom-color: var(--blog-orange); }
.blog-category-card:hover h3 { color: var(--blog-orange); }


.blog-hub-container { width: min(100% - 2.5rem, 1280px); max-width: 1280px; margin: 0 auto; }
.blog-topic-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 auto 2.5rem; max-width: 1100px; }
.blog-topic-chip { display: inline-flex; align-items: center; padding: 0.55rem 1rem; border: 1px solid var(--blog-border); border-radius: 999px; color: var(--blog-text-navy); background: var(--blog-white); font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: all 0.25s ease; }
.blog-topic-chip:hover { border-color: var(--blog-orange); color: var(--blog-orange); }
.blog-topic-chip.is-active { background: var(--blog-orange); border-color: var(--blog-orange); color: var(--blog-white); }
.blog-filter-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
#blog-topic-all:checked ~ .blog-topic-chips label[for="blog-topic-all"],
#blog-topic-accounting:checked ~ .blog-topic-chips label[for="blog-topic-accounting"],
#blog-topic-bookkeeping:checked ~ .blog-topic-chips label[for="blog-topic-bookkeeping"],
#blog-topic-tax-preparation:checked ~ .blog-topic-chips label[for="blog-topic-tax-preparation"],
#blog-topic-payroll:checked ~ .blog-topic-chips label[for="blog-topic-payroll"],
#blog-topic-business-tax-filing:checked ~ .blog-topic-chips label[for="blog-topic-business-tax-filing"],
#blog-topic-irs-tax-resolution:checked ~ .blog-topic-chips label[for="blog-topic-irs-tax-resolution"] { background: var(--blog-orange); border-color: var(--blog-orange); color: var(--blog-white); box-shadow: 0 6px 18px rgba(241, 158, 59, 0.22); }
#blog-topic-all:focus-visible ~ .blog-topic-chips label[for="blog-topic-all"] { outline: 3px solid rgba(241, 158, 59, 0.4); outline-offset: 3px; }
#blog-topic-accounting:focus-visible ~ .blog-topic-chips label[for="blog-topic-accounting"],
#blog-topic-bookkeeping:focus-visible ~ .blog-topic-chips label[for="blog-topic-bookkeeping"],
#blog-topic-tax-preparation:focus-visible ~ .blog-topic-chips label[for="blog-topic-tax-preparation"],
#blog-topic-payroll:focus-visible ~ .blog-topic-chips label[for="blog-topic-payroll"],
#blog-topic-business-tax-filing:focus-visible ~ .blog-topic-chips label[for="blog-topic-business-tax-filing"],
#blog-topic-irs-tax-resolution:focus-visible ~ .blog-topic-chips label[for="blog-topic-irs-tax-resolution"] { outline: 3px solid rgba(241, 158, 59, 0.4); outline-offset: 3px; }
.blog-subsection-heading h3 { font-size: 1.6rem; color: var(--blog-text-navy); margin: 0 0 1.25rem; }
.blog-single-post-wrap { max-width: 760px; margin: 0; }
.blog-card-single { max-width: 760px; }
/* 4. Blog Hub Grid & Cards */
.blog-hub, .blog-related { padding: 80px 0 100px; background-color: var(--blog-white); }
.blog-related { border-top: 1px solid var(--blog-border); padding-top: 80px; }
.blog-related h2 { font-size: 2.2rem; color: var(--blog-text-navy); max-width: 900px; margin: 0 auto 3rem auto; text-align: center; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.blog-hub .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; align-items: stretch; max-width: 1180px; margin: 0 auto; }
.blog-card { background: var(--blog-white); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); box-shadow: var(--blog-shadow); transition: all 0.3s ease; display: flex; flex-direction: column; overflow: hidden; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--blog-shadow-hover); }
.blog-card-content { padding: 2.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.blog-hub .blog-card-content { padding: 1.5rem; }
.blog-card-category { color: var(--blog-orange); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; display: block; }
.blog-card-title { font-size: 1.5rem; line-height: 1.4; margin-bottom: 0.75rem; }
.blog-hub .blog-card-title { font-size: 1.24rem; line-height: 1.35; }
.blog-card-title a { color: var(--blog-text-navy); text-decoration: none; transition: color 0.3s ease; }
.blog-card-title a:hover { color: var(--blog-orange); }
.blog-card-date { font-size: 0.95rem; color: var(--blog-text-muted); margin-bottom: 1.5rem; }
.blog-hub .blog-card-date { margin-bottom: 1rem; }
.blog-card-excerpt { color: var(--blog-text-muted); line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }
.blog-hub .blog-card-excerpt { margin-bottom: 1.25rem; flex-grow: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-link { color: var(--blog-navy); font-weight: 600; text-decoration: none; position: relative; display: inline-block; transition: color 0.3s ease; }
.blog-hub .blog-card-link { width: fit-content; margin-top: auto; }
.blog-card-link::after { content: '→'; margin-left: 5px; transition: margin-left 0.3s ease; }
.blog-card-link:hover { color: var(--blog-orange); }
.blog-card-link:hover::after { margin-left: 8px; }

#blog-topic-accounting:checked ~ .blog-grid .blog-card,
#blog-topic-bookkeeping:checked ~ .blog-grid .blog-card,
#blog-topic-tax-preparation:checked ~ .blog-grid .blog-card,
#blog-topic-payroll:checked ~ .blog-grid .blog-card,
#blog-topic-business-tax-filing:checked ~ .blog-grid .blog-card,
#blog-topic-irs-tax-resolution:checked ~ .blog-grid .blog-card { display: none; }
#blog-topic-accounting:checked ~ .blog-grid .blog-topic-accounting,
#blog-topic-bookkeeping:checked ~ .blog-grid .blog-topic-bookkeeping,
#blog-topic-tax-preparation:checked ~ .blog-grid .blog-topic-tax-preparation,
#blog-topic-payroll:checked ~ .blog-grid .blog-topic-payroll,
#blog-topic-business-tax-filing:checked ~ .blog-grid .blog-topic-business-tax-filing,
#blog-topic-irs-tax-resolution:checked ~ .blog-grid .blog-topic-irs-tax-resolution { display: flex; }


/* Empty State */
.blog-empty { text-align: center; padding: 60px 20px; background-color: var(--blog-light); border-radius: var(--blog-radius); border: 1px dashed #d1d9e2; grid-column: 1 / -1; }
.blog-empty h3 { font-size: 1.8rem; color: var(--blog-text-navy); margin-bottom: 1rem; }
.blog-empty p { color: var(--blog-text-muted); font-size: 1.1rem; }
.blog-empty-text { text-align: center; color: var(--blog-text-muted); grid-column: 1 / -1; }

/* 5. Soft CTA */
.blog-soft-cta { padding: 80px 0; background-color: var(--blog-light); }
.blog-cta { background-color: var(--blog-white); max-width: 900px; margin: 0 auto; padding: 4rem; text-align: center; border-radius: var(--blog-radius); box-shadow: var(--blog-shadow); border: 1px solid var(--blog-border); border-top: 4px solid var(--blog-orange); }
.blog-cta h2 { font-size: 2.2rem; color: var(--blog-text-navy); max-width: 900px; margin: 0 auto 1rem auto; text-align: center; }
.blog-cta p { font-size: 1.2rem; color: var(--blog-text-muted); margin-bottom: 2.5rem; }
.blog-cta .btn-secondary { border-color: var(--blog-navy); color: var(--blog-navy) !important; }
.blog-cta .btn-secondary:hover { background-color: var(--blog-navy); color: var(--blog-white) !important; }
.blog-cta-actions { display: flex; justify-content: center; gap: 1rem; }

/* 6. Blog Article Styling */
.blog-article { padding: 80px 0; background-color: var(--blog-white); }
.blog-article-container { max-width: 900px; margin: 0 auto; }
.blog-article-content { width: 100%; }
.blog-article p { font-size: 1.15rem; color: var(--blog-text-navy); line-height: 1.8; margin-bottom: 1.5rem; }
.blog-article h2 { font-size: 2rem; color: var(--blog-text-navy); margin: 3rem 0 1.5rem 0; position: relative; padding-bottom: 15px; }
.blog-article h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 96px; height: 3px; background-color: var(--blog-orange); border-radius: 2px; }
.blog-article h3 { font-size: 1.5rem; color: var(--blog-text-navy); margin: 2.5rem 0 1rem 0; }
.blog-article ul, .blog-article ol { font-size: 1.15rem; color: var(--blog-text-navy); line-height: 1.8; margin-bottom: 1.5rem; padding-left: 2rem; }
.blog-article li { margin-bottom: 0.5rem; }
.blog-article a { color: var(--blog-orange); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.blog-article a:hover { color: var(--blog-navy); }

/* Table of Contents */
.blog-toc { background-color: var(--blog-light); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); padding: 2rem; margin: 0 0 3rem 0; }
.blog-toc h2, .blog-toc h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1.3rem; padding-bottom: 0; }
.blog-toc h2::after { display: none; }
.blog-toc ul { list-style: none; padding: 0; margin: 0; }
.blog-toc li { margin-bottom: 0.75rem; }
.blog-toc a { color: var(--blog-text-navy); text-decoration: none; font-weight: 500; }
.blog-toc a:hover { color: var(--blog-orange); }


/* Reusable article callouts */
.blog-callout { background-color: var(--blog-light); border: 1px solid var(--blog-border); border-left: 4px solid var(--blog-orange); border-radius: var(--blog-radius); padding: 1.75rem 2rem; margin: 2.5rem 0; }
.blog-callout h2, .blog-callout h3 { color: var(--blog-text-navy); margin-top: 0; margin-bottom: 1rem; padding-bottom: 0; }
.blog-callout h2 { font-size: 1.4rem; }
.blog-callout h3 { font-size: 1.3rem; }
.blog-callout h2::after { display: none; }
.blog-callout p { color: var(--blog-text-navy); font-size: 1.1rem; line-height: 1.75; margin: 0; }
.blog-callout ul { list-style: none; padding: 0; margin: 0; color: var(--blog-text-navy); font-size: 1.08rem; line-height: 1.65; }
.blog-callout li { position: relative; padding-left: 1.35rem; margin-bottom: 0.8rem; }
.blog-callout li:last-child { margin-bottom: 0; }
.blog-callout li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background-color: var(--blog-orange); transform: translateY(-50%); }
.blog-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }
.blog-checklist .blog-checklist-item { margin: 0; padding-left: 2rem; }
.blog-checklist .blog-checklist-item::before { top: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background-color: rgba(245, 157, 42, 0.16); border: 1px solid rgba(245, 157, 42, 0.45); transform: none; }
.blog-checklist .blog-checklist-item::after { content: ''; position: absolute; left: 0.42rem; top: 0.48rem; width: 0.35rem; height: 0.65rem; border-right: 2px solid var(--blog-orange); border-bottom: 2px solid var(--blog-orange); transform: rotate(45deg); }
.blog-trust-callout { margin-bottom: 0; }

/* Trust and E-E-A-T Boxes */
.blog-eeat-box { background-color: var(--blog-light); border: 1px solid var(--blog-border); border-left: 4px solid var(--blog-orange); border-radius: var(--blog-radius); padding: 1.5rem; margin-bottom: 3rem; }
.blog-eeat-box p { color: var(--blog-text-muted); font-size: 1rem; line-height: 1.6; margin: 0 0 0.45rem; }
.blog-eeat-box p:last-child { margin-bottom: 0; }
.blog-trust-box { background-color: var(--blog-navy); color: var(--blog-white); border-radius: var(--blog-radius); padding: 2.5rem; margin-top: 4rem; text-align: center; border-bottom: 4px solid var(--blog-orange); }
.blog-trust-box h2 { color: var(--blog-white); margin-top: 0; margin-bottom: 1rem; font-size: 1.4rem; padding-bottom: 0; }
.blog-trust-box h2::after { display: none; }
.blog-trust-box p { color: rgba(255,255,255,0.9); margin: 0; font-size: 1.1rem; max-width: none; }

/* Related Services */
.blog-related-services { padding: 80px 0; background-color: var(--blog-light); border-top: 1px solid var(--blog-border); }
.blog-related-services h2 { font-size: 2.2rem; color: var(--blog-text-navy); max-width: 900px; margin: 0 auto 3rem auto; text-align: center; }
.blog-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.blog-service-card { display: block; background: var(--blog-white); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); box-shadow: var(--blog-shadow); padding: 1.75rem; text-align: center; text-decoration: none; transition: all 0.3s ease; border-top: 4px solid var(--blog-orange); }
.blog-service-card h3 { color: var(--blog-text-navy); font-size: 1.15rem; margin: 0; transition: color 0.3s ease; }
.blog-service-card:hover { transform: translateY(-4px); box-shadow: var(--blog-shadow-hover); }
.blog-service-card:hover h3 { color: var(--blog-orange); }

/* FAQ Section */
.blog-faq-section { margin-top: 3rem; }
.blog-faq { margin-top: 2rem; }
.blog-faq details { background: var(--blog-white); border: 1px solid var(--blog-border); border-radius: var(--blog-radius); margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(20,50,77,0.02); transition: border-color 0.3s ease; }
.blog-faq details[open] { border-color: var(--blog-orange); }
.blog-faq summary { padding: 1.5rem 2rem; font-size: 1.15rem; font-weight: 600; color: var(--blog-text-navy); cursor: pointer; list-style: none; position: relative; }
.blog-faq summary::-webkit-details-marker { display: none; }
.blog-faq summary::after { content: "+"; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--blog-orange); font-weight: 300; transition: transform 0.3s ease; }
.blog-faq details[open] summary::after { content: "−"; }
.blog-faq details p { padding: 0 2rem 1.5rem 2rem; margin: 0; color: var(--blog-text-muted); font-size: 1.05rem; line-height: 1.7; }

/* Responsive Rules */
@media (max-width: 992px) {
  .blog-category-grid, .blog-grid, .blog-service-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .blog-hub .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .blog-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-hero h1, .blog-post-hero h1 { font-size: 3rem; }
  .blog-cta { padding: 3rem 2rem; }
}

@media (max-width: 768px) {
  .blog-topic-chips { justify-content: flex-start; gap: 0.6rem; margin-bottom: 2rem; }
  .blog-category-grid, .blog-grid, .blog-service-grid { grid-template-columns: 1fr; }
  .blog-hub .blog-grid { grid-template-columns: 1fr; }
  .blog-category-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-hero h1, .blog-post-hero h1 { font-size: 2.4rem; }
  .blog-hero-actions { flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; }
  .blog-hero-actions .btn { width: min(100%, 22rem); min-height: 0; white-space: normal; }
  .blog-cta-actions { flex-direction: column; width: 100%; }
  .blog-cta-actions .btn { width: 100%; white-space: normal; }
  .blog-post-meta { flex-direction: column; gap: 0.35rem; }
  .blog-post-meta span + span::before { display: none; }
  .blog-card-content, .blog-category-card, .blog-cta, .blog-toc, .blog-trust-box, .blog-callout { padding: 1.5rem; }
  .blog-checklist ul { grid-template-columns: 1fr; }
  .blog-article p { font-size: 1.05rem; }
  .blog-article h2 { font-size: 1.75rem; }
  .blog-cta h2 { font-size: 1.8rem; }
  .blog-faq summary { padding: 1.25rem 1.5rem; padding-right: 3rem; font-size: 1.1rem; }
  .blog-faq summary::after { right: 1.5rem; }
  .blog-faq details p { padding: 0 1.5rem 1.25rem 1.5rem; }
}

@media (max-width: 480px) {
  .blog-hero h1, .blog-post-hero h1 { font-size: 2rem; }
  .blog-post-excerpt, .blog-hero-intro { font-size: 1.08rem; }
  .blog-intro, .blog-category-section, .blog-hub, .blog-related, .blog-related-services, .blog-soft-cta, .blog-article { padding: 60px 0; }
}


.blog-hero-intro, .blog-post-excerpt, .blog-cta p { text-align: center; }