/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* =========================================================
   TallyBrief design system
   Reusable tokens + component classes for Elementor pages
   today and Gutenberg/classic pages later.
   ========================================================= */

:root {
  --tb-ink: #1B1F27;
  --tb-body: #545B6B;
  --tb-primary: #1F3A5C;
  --tb-primary-dark: #16293F;
  --tb-tint: #E8EDF3;
  --tb-section-bg: #F6F7F9;
  --tb-border: #E3E6EB;
  --tb-white: #FFFFFF;
  --tb-radius-card: 20px;
  --tb-radius-pill: 999px;
  --tb-space-section: 96px;
  --tb-space-section-mobile: 56px;
}

body {
  color: var(--tb-body);
}

/* Section wrappers */
.tb-section {
  padding-top: var(--tb-space-section);
  padding-bottom: var(--tb-space-section);
  background-color: var(--tb-white);
}

.tb-section--soft {
  background-color: var(--tb-section-bg);
}

.tb-section--band {
  background-color: var(--tb-tint) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 64px 48px !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .tb-section--band {
    padding: 40px 24px !important;
  }
}

.tb-section--dark {
  background-color: var(--tb-primary);
}

.tb-section--dark h1,
.tb-section--dark h2,
.tb-section--dark h3,
.tb-section--dark h4,
.tb-section--dark p {
  color: var(--tb-white) !important;
}

@media (max-width: 768px) {
  .tb-section {
    padding-top: var(--tb-space-section-mobile);
    padding-bottom: var(--tb-space-section-mobile);
  }
}

/* Cards */
.tb-card {
  background-color: var(--tb-white) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 32px !important;
  transition: border-color 0.15s ease;
}

.tb-card:hover {
  border-color: var(--tb-primary);
}

.tb-card--soft {
  background-color: var(--tb-section-bg);
  border-color: var(--tb-section-bg);
}

/* Pin each card's trailing CTA button to the card's bottom edge instead of
   letting it trail directly under variable-length title/description text.
   Cards in a row are already equal height (CSS Grid stretch), so pushing
   the button down with margin-top:auto keeps every button in a row level
   regardless of how much text sits above it. Used by both the category
   cards and the guide cards, which share .tb-card. */
.tb-card .e-con-inner > .elementor-widget-button {
  margin-top: auto;
}

/* Icon tiles (trust row, category tiles) */
.tb-icon-tile .elementor-icon-box-icon {
  background-color: var(--tb-tint);
  border-radius: 16px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* display:flex above overrides Elementor's default inline-block on this
     element, which breaks the widget's own text-align:center centering
     (text-align only positions inline-level children). Auto margins keep
     the icon badge centered regardless — flexbox auto margins win over
     the parent's align-items, including Elementor's own !important reset. */
  margin-left: auto;
  margin-right: auto;
}

.tb-icon-tile .elementor-icon-box-icon i,
.tb-icon-tile .elementor-icon-box-icon svg {
  color: var(--tb-primary);
  fill: var(--tb-primary);
}

/* Placeholder visual block for missing logos/screenshots */
.tb-placeholder-visual {
  background-color: var(--tb-tint) !important;
  border-radius: calc(var(--tb-radius-card) - 4px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  width: 100%;
  margin-bottom: 20px;
}

.tb-placeholder-visual .elementor-icon {
  color: var(--tb-primary);
  opacity: 0.55;
}

.tb-placeholder-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-body);
  opacity: 0.6;
}

/* Secondary / outline button variant */
.tb-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--tb-primary) !important;
  border: 2px solid var(--tb-primary) !important;
}

.tb-btn-outline .elementor-button:hover {
  background-color: var(--tb-tint) !important;
}

/* =========================================================
   Astra header / footer chrome (non-Elementor)
   ========================================================= */

body,
.ast-header-search .astra-search-icon,
.main-header-menu .menu-link,
.site-footer,
.site-footer a {
  font-family: 'Inter', sans-serif;
}

.site-title,
.site-title a,
.ast-builder-text-element {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--tb-ink) !important;
  white-space: nowrap;
  overflow-wrap: normal;
}

.ast-site-title-wrap,
.ast-site-identity {
  min-width: -webkit-max-content;
  min-width: max-content;
}

@media (max-width: 480px) {
  .site-title,
  .site-title a {
    font-size: 20px !important;
  }
}

.main-header-bar {
  border-bottom: 1px solid var(--tb-border);
  background-color: var(--tb-white);
}

.main-header-menu .menu-item > .menu-link {
  color: var(--tb-ink);
  font-weight: 500;
  font-size: 16px;
}

.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
  color: var(--tb-primary);
}

.ast-header-search .astra-search-icon svg,
.ast-header-search .astra-search-icon {
  color: var(--tb-ink);
  fill: var(--tb-ink);
}

.ast-mobile-header-content .menu-link {
  color: var(--tb-ink);
}

/* =========================================================
   Footer — compact editorial layout (v2, replaces the dark-navy
   3-column footer). White background, thin rules, no column
   headings; ~160–220px tall on desktop. Astra prints its own
   dynamic CSS with higher-specificity attribute selectors for the
   footer wrap, so a couple of rules below need !important to win.
   ========================================================= */

.site-footer {
  background-color: var(--tb-white) !important;
  color: var(--tb-body);
  border-top: 1px solid var(--tb-border);
}

.tb-footer-wrap {
  padding-top: 36px;
  padding-bottom: 32px;
}

.tb-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.tb-footer-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-footer-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 5px;
}

.tb-footer-word {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--tb-ink) !important;
}

.tb-footer-tagline {
  margin: 5px 0 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tb-body);
  opacity: 0.85;
  max-width: 360px;
}

.tb-footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 3px 0 0 0;
  padding: 0;
}

.tb-footer-nav a {
  font-size: 14px;
  color: var(--tb-body) !important;
  text-decoration: none;
  white-space: nowrap;
}

.tb-footer-nav a:hover {
  color: var(--tb-primary) !important;
}

.tb-footer-divider {
  border: none;
  border-top: 1px solid var(--tb-border);
  margin: 24px 0 16px 0;
}

.tb-footer-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

.tb-footer-copyright {
  font-size: 13px;
  color: var(--tb-body);
  opacity: 0.8;
  margin: 0;
}

.tb-footer-disclosure {
  font-size: 12.5px;
  color: var(--tb-body);
  opacity: 0.65;
  margin: 0;
  text-align: right;
}

.tb-footer-disclosure a {
  color: inherit;
  text-decoration: underline;
}

.tb-footer-disclosure a:hover {
  color: var(--tb-primary);
}

@media (max-width: 768px) {
  .tb-footer-wrap {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  .tb-footer-top {
    flex-direction: column;
    gap: 16px;
  }
  .tb-footer-nav ul {
    margin-top: 0;
    gap: 8px 20px;
  }
  .tb-footer-divider {
    margin: 20px 0 14px 0;
  }
  .tb-footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
  .tb-footer-disclosure {
    text-align: left;
  }
}

/* Astra's below-footer row is unhooked (see tallybrief-footer.php), so no
   rules are needed for .site-below-footer-wrap / .ast-footer-copyright. */

/* Inverse (white-on-dark) button for dark banner sections */
.tb-btn-inverse .elementor-button {
  background-color: var(--tb-white) !important;
  color: var(--tb-primary-dark) !important;
}

.tb-btn-inverse .elementor-button:hover {
  background-color: var(--tb-tint) !important;
}

/* Newsletter signup email field (dark navy band) */
.tb-newsletter-input {
  padding: 14px 22px;
  border-radius: var(--tb-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--tb-white);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  min-width: 280px;
}

.tb-newsletter-input::placeholder {
  color: #C7CCD6;
}

.tb-newsletter-input:focus {
  outline: none;
  border-color: var(--tb-white);
  background-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 480px) {
  .tb-newsletter-input {
    min-width: 0;
    width: 100%;
  }
}

/* Full-bleed breakout for homepage sections (Astra's .ast-container caps
   normal content at ~1240px even when Elementor's content_width is "full",
   so section backgrounds need to escape it explicitly). Safe to nest
   position:sticky/fixed inside since it doesn't use transform. */
.tb-full-bleed {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* Eyebrow label above section headings */
.tb-eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tb-primary);
  margin-bottom: 12px;
}

/* =========================================================
   Software Review Template — component classes (v2 refinement)
   Reusable for every product review built on the skeleton.
   ========================================================= */

.tb-review-section p,
.tb-review-section li {
  line-height: 1.65;
}
.tb-review-section p {
  margin: 0 0 1em 0;
}
.tb-review-section p:last-child {
  margin-bottom: 0;
}

.tb-review-section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  border-top: 1px solid var(--tb-border) !important;
}

.tb-review-section--first {
  border-top: none !important;
  padding-top: 40px !important;
}

.tb-review-section--major {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.tb-review-section--tint {
  background-color: var(--tb-section-bg) !important;
}

@media (max-width: 768px) {
  .tb-review-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .tb-review-section--first {
    padding-top: 24px !important;
  }
  .tb-review-section--major {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

.tb-prose {
  max-width: 740px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.tb-wide {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.tb-verdict-box {
  background-color: var(--tb-tint) !important;
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 40px !important;
  width: 100%;
}

.tb-final-box {
  background-color: var(--tb-white) !important;
  border: 2px solid var(--tb-primary) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 36px !important;
  width: 100%;
}

@media (max-width: 768px) {
  .tb-verdict-box,
  .tb-final-box {
    padding: 24px !important;
  }
}

.tb-fact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-body);
  opacity: 0.7;
  margin: 0 0 4px 0;
}

.tb-fact-value {
  font-weight: 600;
  color: var(--tb-ink);
  margin: 0;
}

.tb-breadcrumb {
  font-size: 13px;
  color: var(--tb-body);
  margin: 0;
}

.tb-breadcrumb a {
  color: var(--tb-body);
  text-decoration: none;
}

.tb-breadcrumb a:hover {
  color: var(--tb-primary);
}

.tb-breadcrumb .tb-current {
  color: var(--tb-ink);
  font-weight: 600;
}

.tb-meta-row {
  font-size: 14px;
  color: var(--tb-body);
  margin: 0;
}

.tb-card--compact {
  padding: 20px !important;
}

.tb-card--weak {
  background-color: var(--tb-section-bg) !important;
}

.elementor-icon-list-icon .fa-check {
  color: var(--tb-primary) !important;
}

.elementor-icon-list-icon .fa-minus,
.elementor-icon-list-icon .fa-times {
  color: var(--tb-body) !important;
  opacity: 0.8;
}

/* Check / cross icons in the review template's bullet lists align to the
   first line of their item text (top), not the vertical centre of the whole
   — often multi-line — item. Elementor exposes both hooks as inherited
   custom properties: --icon-vertical-align feeds the item's flex align-items,
   --icon-vertical-offset feeds a relative top nudge on the icon. 0.3em lands
   the glyph on the first line given the template's 1.65 list line-height.
   Scoped to .tb-review-section so other icon lists (guide template,
   methodology checklist, etc.) are untouched. */
.tb-review-section .elementor-widget-icon-list .elementor-icon-list-item {
  --icon-vertical-align: flex-start;
  --icon-vertical-offset: 0.3em;
}

.tb-placeholder-visual--logo {
  min-height: 96px !important;
  max-width: 160px !important;
}

.tb-placeholder-visual--tiny {
  min-height: 64px !important;
  max-width: 100px !important;
}

/* Core Features screenshots: reverted to one uniform placeholder size (no tiers, no caption, no border) */
.tb-placeholder-visual--screenshot {
  min-height: 200px !important;
}

@media (max-width: 768px) {
  .tb-placeholder-visual--screenshot {
    min-height: 160px !important;
  }
}

.tb-shot .tb-placeholder-visual {
  border: 1px solid var(--tb-border) !important;
}

.tb-shot--large .tb-placeholder-visual {
  min-height: 380px !important;
}

.tb-shot--medium .tb-placeholder-visual {
  min-height: 200px !important;
}

.tb-shot--compact .tb-placeholder-visual {
  min-height: 160px !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tb-shot-caption {
  font-size: 13px;
  color: var(--tb-body);
  opacity: 0.75;
  text-align: center;
  font-style: italic;
  margin-top: 8px !important;
}

@media (max-width: 768px) {
  .tb-shot--large .tb-placeholder-visual {
    min-height: 220px !important;
  }
  .tb-shot--medium .tb-placeholder-visual {
    min-height: 150px !important;
  }
}

.tb-compare-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
}

.tb-compare-table {
  padding: 0 !important;
  min-width: 560px !important;
}

.tb-scroll-hint {
  display: none;
  font-size: 12px;
  color: var(--tb-body);
  opacity: 0.7;
  text-align: center;
  margin-top: 8px !important;
}

@media (max-width: 767px) {
  .tb-scroll-hint {
    display: block;
  }
}

.tb-compare-cell {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--tb-border) !important;
  font-size: 15px;
}

.tb-compare-cell--head {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--tb-ink);
  background-color: var(--tb-section-bg) !important;
}

.tb-compare-cell--reco {
  background-color: var(--tb-tint) !important;
}

.tb-compare-cell--reco.tb-compare-cell--head {
  background-color: var(--tb-primary) !important;
  color: var(--tb-white);
}

.tb-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--tb-white);
  color: var(--tb-primary);
  padding: 3px 9px;
  border-radius: var(--tb-radius-pill);
  margin-left: 6px;
}

.tb-feature-block {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  border-top: 1px solid var(--tb-border) !important;
}

.tb-feature-block--first {
  border-top: none !important;
  padding-top: 0 !important;
}

@media (max-width: 768px) {
  .tb-feature-block {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

.tb-our-take {
  border-left: 3px solid var(--tb-primary) !important;
  background-color: var(--tb-tint) !important;
  padding: 14px 18px !important;
  border-radius: 0 10px 10px 0 !important;
}

.tb-our-take p {
  margin: 0 !important;
}

.tb-pull-quote {
  border-left: 4px solid var(--tb-primary) !important;
  padding: 4px 0 4px 28px !important;
}

.tb-pull-quote .elementor-testimonial-image {
  display: none;
}

.tb-pull-quote .elementor-testimonial-content {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--tb-ink);
}

.tb-pull-quote .elementor-testimonial-meta {
  margin-top: 12px;
  font-size: 14px;
}

.tb-secondary-link {
  font-size: 13px;
  color: var(--tb-body);
  opacity: 0.85;
}

.tb-secondary-link a {
  color: inherit;
  text-decoration: underline;
}

.tb-text-link {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.tb-text-link a {
  color: var(--tb-primary);
  text-decoration: none;
}

.tb-text-link a:hover {
  text-decoration: underline;
}

.tb-push-bottom {
  margin-top: auto !important;
}

.tb-toc {
  border: 1px solid var(--tb-border) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 20px 24px !important;
  background-color: var(--tb-white) !important;
  width: 100%;
}

.tb-toc-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tb-body);
  opacity: 0.7;
  font-weight: 700;
  margin: 0 0 10px 0 !important;
}

.tb-toc ul {
  columns: 2;
  column-gap: 24px;
  margin: 0;
  padding-left: 18px;
}

.tb-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.tb-toc a {
  color: var(--tb-body);
  text-decoration: none;
  font-size: 14px;
}

.tb-toc a:hover {
  color: var(--tb-primary);
}

@media (max-width: 480px) {
  .tb-toc ul {
    columns: 1;
  }
}

.tb-sticky-summary {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  background-color: rgb(255, 255, 255) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
  border-bottom: 1px solid var(--tb-border) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tb-sticky-summary * {
  opacity: 1 !important;
}

.tb-sticky-summary > .e-con-inner,
.tb-sticky-summary .tb-wide {
  background-color: rgb(255, 255, 255) !important;
}

@media (max-width: 1024px) {
  .tb-sticky-summary {
    display: none !important;
  }
}

.tb-sticky-cta .elementor-button {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.tb-sticky-mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .tb-sticky-mobile-cta {
    display: flex !important;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600 !important;
    background-color: rgb(255, 255, 255) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
    border-top: 1px solid var(--tb-border) !important;
    padding: 12px 16px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }

  .tb-sticky-mobile-cta * {
    opacity: 1 !important;
  }
}

.tb-sticky-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tb-body);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

.tb-sticky-close:hover {
  color: var(--tb-ink);
}

.tb-sticky-hidden,
.tb-sticky-auto-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#tb-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--tb-primary);
  width: 0%;
  z-index: 9999;
  transition: width 0.12s linear;
}

/* Small tinted icon tile used next to sparse card headings for a bit more visual weight */
.tb-mini-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--tb-radius-pill);
  background-color: var(--tb-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tb-mini-icon i,
.tb-mini-icon svg {
  color: var(--tb-primary);
}

/* =========================================================
   Auto-updating review listings (Home + Reviews page)
   ========================================================= */

.tb-latest-reviews-grid,
.tb-all-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .tb-latest-reviews-grid,
  .tb-all-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tb-latest-reviews-grid,
  .tb-all-reviews-grid {
    grid-template-columns: 1fr;
  }
}

.tb-review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px !important;
}

.tb-review-card-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: calc(var(--tb-radius-card) - 8px);
  display: block;
}

.tb-review-card-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-primary);
  background-color: var(--tb-tint);
  padding: 5px 12px;
  border-radius: var(--tb-radius-pill);
}

.tb-review-card-category i {
  font-size: 11px;
}

.tb-review-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--tb-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tb-review-card-excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tb-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tb-review-card-btn {
  display: inline-block;
  text-align: center;
  background-color: transparent;
  color: var(--tb-primary);
  border: 2px solid var(--tb-primary);
  border-radius: var(--tb-radius-pill);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: auto;
  width: fit-content;
}

.tb-review-card-btn:hover {
  background-color: var(--tb-tint);
}

.tb-reviews-empty {
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-card);
  padding: 40px;
  text-align: center;
  color: var(--tb-body);
  background-color: var(--tb-section-bg);
  grid-column: 1 / -1;
}

.tb-reviews-pagination {
  margin-top: 32px;
  text-align: center;
  grid-column: 1 / -1;
}

.tb-reviews-pagination a,
.tb-reviews-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-body);
  text-decoration: none;
  font-size: 14px;
}

.tb-reviews-pagination .current {
  background-color: var(--tb-primary);
  color: var(--tb-white);
  border-color: var(--tb-primary);
}

/* =========================================================
   Auto-updating guide listings (Accounting Guides page)
   Mirrors the review listing grid/card system above so guides
   and reviews look and behave the same way.
   ========================================================= */

.tb-latest-guides-grid,
.tb-all-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .tb-latest-guides-grid,
  .tb-all-guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tb-latest-guides-grid,
  .tb-all-guides-grid {
    grid-template-columns: 1fr;
  }
}

.tb-guide-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px !important;
}

.tb-guide-card-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: calc(var(--tb-radius-card) - 8px);
  display: block;
}

.tb-guide-card-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-primary);
  background-color: var(--tb-tint);
  padding: 5px 12px;
  border-radius: var(--tb-radius-pill);
}

.tb-guide-card-category i {
  font-size: 11px;
}

.tb-guide-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--tb-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tb-guide-card-excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tb-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tb-guide-card-btn {
  display: inline-block;
  text-align: center;
  background-color: transparent;
  color: var(--tb-primary);
  border: 2px solid var(--tb-primary);
  border-radius: var(--tb-radius-pill);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin-top: auto;
  width: fit-content;
}

.tb-guide-card-btn:hover {
  background-color: var(--tb-tint);
}

.tb-guides-empty {
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-card);
  padding: 40px;
  text-align: center;
  color: var(--tb-body);
  background-color: var(--tb-section-bg);
  grid-column: 1 / -1;
}

.tb-guides-pagination {
  margin-top: 32px;
  text-align: center;
  grid-column: 1 / -1;
}

.tb-guides-pagination a,
.tb-guides-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-pill);
  color: var(--tb-body);
  text-decoration: none;
  font-size: 14px;
}

.tb-guides-pagination .current {
  background-color: var(--tb-primary);
  color: var(--tb-white);
  border-color: var(--tb-primary);
}

/* Real-image screenshot slots (Core Features + Day-to-Day) */
.tb-placeholder-visual--screenshot,
.tb-shot .tb-placeholder-visual {
  position: relative !important;
  overflow: hidden;
}

.tb-screenshot-fill {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.tb-screenshot-fill img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit;
}

/* ---------------------------------------------------------------
   Core Features screenshots (reusable Review template)
   Uniform 16:9 frame; the whole screenshot stays visible (no crop):
   object-fit: contain, centred, with the frame's existing --tb-tint
   background filling any letterbox space. Scoped to .tb-feature-block
   so the Day-to-Day (.tb-shot) and Guide (.tb-guide-step) screenshot
   slots keep their current behaviour. No per-image class required.
   --------------------------------------------------------------- */
.tb-feature-block .tb-placeholder-visual--screenshot {
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

.tb-feature-block .tb-placeholder-visual--screenshot .elementor-widget-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.tb-feature-block .tb-placeholder-visual--screenshot .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  border-radius: inherit;
}

/* =========================================================
   Guide Article Template v2 — editorial refinement
   Narrower reading column, balanced type scale, section-level
   color rhythm instead of nested cards. Scoped to tb-guide-*
   so the review template and rest of the site are unaffected.
   ========================================================= */

/* Full-bleed breakout: the actual page content column (.ast-container)
   is padded/boxed, so every guide section escapes it to stretch the
   background edge-to-edge. Content width is controlled separately by
   .tb-wide / .tb-guide-prose inside. Does NOT use transform, so it is
   safe to nest position:sticky/fixed descendants inside. */
.tb-guide-section {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.tb-guide-section--first {
  padding-top: 56px !important;
}

@media (max-width: 768px) {
  .tb-guide-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tb-guide-section--first {
    padding-top: 28px !important;
  }
}

.tb-guide-section--tint {
  background-color: var(--tb-tint) !important;
}

.tb-guide-section--soft {
  background-color: var(--tb-section-bg) !important;
}

.tb-guide-section--bordered {
  border-top: 1px solid var(--tb-border) !important;
}

.tb-guide-section--navy {
  background-color: var(--tb-primary) !important;
}

.tb-guide-section--navy h1,
.tb-guide-section--navy h2,
.tb-guide-section--navy h3,
.tb-guide-section--navy h4,
.tb-guide-section--navy h5,
.tb-guide-section--navy h6,
.tb-guide-section--navy p,
.tb-guide-section--navy li {
  color: var(--tb-white) !important;
}

.tb-guide-section--navy .tb-eyebrow,
.tb-guide-section--navy .tb-eyebrow .elementor-heading-title {
  color: #A9C2DE !important;
}

.tb-guide-section--navy a:not(.elementor-button) {
  color: #D7E4F1 !important;
  text-decoration: underline;
}

/* Reading column — narrower than the review template's tb-wide */
.tb-guide-prose {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Balanced editorial type scale (global H1/H2/H3 are landing-page sized) */
.tb-guide-h1 {
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .tb-guide-h1 {
    font-size: 29px !important;
  }
}

.tb-guide-h2 {
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .tb-guide-h2 {
    font-size: 21px !important;
  }
}

.tb-guide-h3 {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.tb-guide-h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* Inner light card — the one deliberate exception, for readability
   inside the navy Practical Example section */
.tb-guide-scenario-card {
  background-color: var(--tb-white) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 32px !important;
}

@media (max-width: 768px) {
  .tb-guide-scenario-card {
    padding: 22px !important;
  }
}

.tb-guide-section--navy .tb-guide-scenario-card h3,
.tb-guide-section--navy .tb-guide-scenario-card h4,
.tb-guide-section--navy .tb-guide-scenario-card p,
.tb-guide-section--navy .tb-guide-scenario-card li {
  color: var(--tb-ink) !important;
}

.tb-guide-section--navy .tb-guide-scenario-card .tb-eyebrow {
  color: var(--tb-primary) !important;
}

/* Step block — repeatable unit, divider-separated, no boxes */
.tb-guide-step {
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 1px solid var(--tb-border);
}

.tb-guide-step--first {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 768px) {
  .tb-guide-step {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Common Mistakes — flattened grid item (rule, not a bordered box) */
.tb-guide-mistake {
  border-top: 1px solid var(--tb-border);
  padding-top: 20px;
}

/* Narrow 2-column reference tables (guide template) don't need the
   560px min-width built for the review template's wider pricing tables */
.tb-guide-table-2col.tb-compare-table {
  min-width: 0 !important;
}

/* Table of contents — chip-style links, replaces the inline sentence */
.tb-toc-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tb-toc-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--tb-radius-pill);
  border: 1px solid var(--tb-border);
  color: var(--tb-ink);
  text-decoration: none;
  background-color: var(--tb-white);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tb-toc-chip:hover {
  border-color: var(--tb-primary);
  color: var(--tb-primary);
}

/* =========================================================
   Methodology page refinements (2026-08-08)
   ========================================================= */

/* Tightened section spacing — ~19% less top/bottom padding than the
   shared .tb-guide-section default (an initial ~15% pass, then a further
   ~5% trim), scoped to this page only (via the page-id-18 body class) so
   the Guide Template and future guide pages keep their existing rhythm
   unchanged. */
body.page-id-18 .tb-guide-section {
  padding-top: 71px !important;
  padding-bottom: 71px !important;
}

body.page-id-18 .tb-guide-section--first {
  padding-top: 46px !important;
}

@media (max-width: 768px) {
  body.page-id-18 .tb-guide-section {
    padding-top: 39px !important;
    padding-bottom: 39px !important;
  }
  body.page-id-18 .tb-guide-section--first {
    padding-top: 23px !important;
  }
}

/* Compact two-column treatment for longer checklists. Applied per-widget
   via this class (not a blanket rule on .elementor-icon-list-items), so
   short lists elsewhere are unaffected and checkmark styling is untouched. */
.tb-icon-list--cols .elementor-icon-list-items {
  columns: 2;
  column-gap: 32px;
}

.tb-icon-list--cols .elementor-icon-list-item {
  break-inside: avoid;
}

@media (max-width: 600px) {
  .tb-icon-list--cols .elementor-icon-list-items {
    columns: 1;
  }
}

/* =========================================================
   Privacy Policy page refinements (2026-08-09)
   ========================================================= */

/* Tightened section spacing — ~38% less top/bottom padding than the
   shared .tb-guide-section default (27% first pass, then a further 15%
   trim on top per follow-up feedback), scoped to this page only (via the
   page-id-3 body class) so the Guide Template and other guide/trust pages
   keep their existing rhythm unchanged. Same technique as the Methodology
   page's page-id-18 override above. */
body.page-id-3 .tb-guide-section {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

body.page-id-3 .tb-guide-section--first {
  padding-top: 35px !important;
}

@media (max-width: 768px) {
  body.page-id-3 .tb-guide-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  body.page-id-3 .tb-guide-section--first {
    padding-top: 17px !important;
  }
}

/* =========================================================
   Affiliate Disclosure page refinements (2026-08-09)
   ========================================================= */

/* Same tightened rhythm as the Privacy Policy page (page-id-3), so the
   trust-page group reads consistently. */
body.page-id-20 .tb-guide-section {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

body.page-id-20 .tb-guide-section--first {
  padding-top: 35px !important;
}

@media (max-width: 768px) {
  body.page-id-20 .tb-guide-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  body.page-id-20 .tb-guide-section--first {
    padding-top: 17px !important;
  }
}

/* =========================================================
   Terms and Conditions page refinements (2026-08-10)
   ========================================================= */

/* Same tightened rhythm as Privacy Policy (page-id-3) and Affiliate
   Disclosure (page-id-20), so all three trust pages read consistently. */
body.page-id-21 .tb-guide-section {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

body.page-id-21 .tb-guide-section--first {
  padding-top: 35px !important;
}

@media (max-width: 768px) {
  body.page-id-21 .tb-guide-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  body.page-id-21 .tb-guide-section--first {
    padding-top: 17px !important;
  }
}

/* =========================================================
   Homepage methodology band — optical vertical balance (2026-08-16)
   ========================================================= */

/* The block's content starts with bare uppercase text (has invisible
   font-leading above the ink) and ends with a solid filled button (whose
   edge sits flush with the box). Equal 64/64 padding therefore reads as
   top-heavy even though it's numerically symmetric. Shifting the split to
   56/72 corrects the optical balance while keeping the total (and so the
   container height) exactly unchanged. Scoped to the homepage only. */
body.page-id-12 .tb-section--band {
  padding-top: 44px !important;
  padding-bottom: 84px !important;
}

@media (max-width: 768px) {
  body.page-id-12 .tb-section--band {
    padding-top: 28px !important;
    padding-bottom: 52px !important;
  }
}

/* =========================================================
   Category Archive Template (review_category taxonomy)
   Added 2026-09-04; restyled 2026-09-05 to match the All Reviews page
   (page 13) in style and formatting.
   One reusable template — wp-content/novamira-sandbox/
   tb-category-archive-template.php — serves every term (Invoicing &
   Payments, Bookkeeping, Expense Tracking, Tax Preparation, and any
   future category), so this styling applies automatically without
   per-category pages. Header + card scale mirror the All Reviews page;
   the grid stays centered so a category with only 1–2 reviews doesn't
   look stranded. Reuses .tb-card / .tb-review-card / .tb-eyebrow and
   the design tokens above.
   ========================================================= */

/* Canvas: the review_category archive runs through Astra's
   separate-container layout, whose body background is the light-blue
   #F0F5FA. The All Reviews page sits on white — match it (scoped to
   this taxonomy). */
body.tax-review_category {
  background-color: var(--tb-white) !important;
}

body.tax-review_category #primary {
  margin-top: 0;
  margin-bottom: 0;
}

/* .tb-review-section--first supplies the 40px/64px vertical rhythm and
   the shared p line-height/margins; .tb-wide supplies the 1120px
   centered column. Only the horizontal padding + the header/grid gap
   are added here. */
.tb-category-archive-section .tb-wide {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Header — left-aligned eyebrow + large navy H1 + optional description,
   matching the All Reviews page header. */
.tb-category-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.tb-category-header > * {
  margin: 0;
}

.tb-category-header .tb-eyebrow {
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.tb-category-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.15;
  color: var(--tb-primary);
  margin: 0;
}

.tb-category-description {
  color: var(--tb-body);
  font-size: 18px;
  line-height: 1.65;
  max-width: 760px;
}

.tb-category-description p {
  margin: 0;
}

.tb-category-archive {
  margin: 0;
}

@media (max-width: 1024px) {
  .tb-category-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .tb-category-archive-section .tb-wide {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tb-category-title {
    font-size: 31px;
  }
  .tb-category-description {
    font-size: 16px;
  }
}

/* Card grid — inherits the shared .tb-all-reviews-grid rules unchanged
   (repeat(3, 1fr) → 2 → 1 responsive), so the layout is identical to the
   All Reviews page: cards are left-aligned and a single review sits in
   the first column. */

/* Card title — match the All Reviews card scale (28px / 600). */
.tb-category-archive .tb-review-card-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .tb-category-archive .tb-review-card-title {
    font-size: 22px;
  }
}

/* Card image — full image on the tint panel (no crop), per request. */
.tb-category-archive .tb-review-card-thumb {
  object-fit: contain;
  background-color: var(--tb-tint);
}

/* Empty-category state — composed, on-brand message instead of Astra's
   default "nothing found" search prompt (never rendered here). Reuses
   .tb-reviews-empty's bordered/tinted box, capped and left-aligned to
   sit under the header. */
.tb-category-empty {
  max-width: 560px;
  margin: 0;
}

.tb-category-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--tb-ink);
  margin: 0 0 8px 0;
}

.tb-category-empty p {
  margin: 0;
}