/* ── ttt-text-patterns ── */
/* ═══════════════════════════════════════
   Liberty Charts — Blog System v7.1.0
   Frontend styles — nuclear grid/spacing
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --ttt-ink: #1a1a1a;
  --ttt-green: #089981;
  --ttt-gold: #C49A3C;
  --ttt-maroon: #7D2D2D;
  --ttt-gray-100: #f5f5f5;
  --ttt-gray-200: #e0e0e0;
  --ttt-gray-300: #cccccc;
  --ttt-gray-500: #888888;
  --ttt-gray-700: #4a4a4a;
  --ttt-radius: 12px;
}

/* ═══════════════════ GLOBAL ═══════════════════ */

/* Global font/color defaults — scoped to avoid leaking into custom HTML blocks */
.entry-title, h1.entry-title, .wp-block-post-title, .kadence-single-title .entry-title {
  font-family: 'Nunito Sans', sans-serif !important; font-weight: 800 !important;
  font-size: clamp(2rem, 4.5vw, 2.8rem) !important; line-height: 1.15 !important;
  letter-spacing: -0.5px !important; color: var(--ttt-ink) !important;
}
.entry-content a { color: var(--ttt-green); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   ZERO OUT WP BLOCK GAP inside custom containers
   Uses --wp--style--block-gap var + is-layout selectors
   ═══════════════════════════════════════════════════ */

.ttt-section, .ttt-popout, .ttt-step, .ttt-step-body,
.ttt-quote-block {
  --wp--style--block-gap: 0px !important;
}

/* Zero block-gap margins via WP layout selectors */
:is(.ttt-section, .ttt-popout, .ttt-step-body, .ttt-quote-block) > * + * {
  margin-block-start: 0 !important;
}
:is(.ttt-section, .ttt-popout, .ttt-step-body, .ttt-quote-block).is-layout-flow > * + * {
  margin-block-start: 0 !important;
}
:is(.ttt-section, .ttt-popout, .ttt-step-body, .ttt-quote-block).is-layout-constrained > * + * {
  margin-block-end: 0 !important;
}

/* Older WP inner-container pattern */
:is(.ttt-section, .ttt-popout, .ttt-step-body, .ttt-quote-block) > .wp-block-group__inner-container > * + * {
  margin-top: 0 !important; margin-bottom: 0 !important;
}

/* Re-add specific spacing */
.ttt-popout-label { margin-bottom: 8px !important; }
.ttt-section-label { margin-bottom: 6px !important; }
.ttt-step-title { margin-bottom: 4px !important; }
.ttt-quote-text { margin-bottom: 14px !important; }
.ttt-prose { margin-bottom: 16px !important; }

/* ═══════════════════ PROSE ═══════════════════ */

.ttt-prose {
  font-family: 'DM Sans', sans-serif !important; font-size: 16.5px !important;
  color: var(--ttt-gray-700) !important; line-height: 1.8 !important;
}
.ttt-prose strong { color: var(--ttt-ink) !important; }

/* ═══════════════════ HEADINGS ═══════════════════ */

.ttt-section { margin-bottom: 20px !important; padding: 0 !important; }
.ttt-section-label {
  font-size: 0.72rem !important; font-weight: 700 !important; color: var(--ttt-green) !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  line-height: 1.2 !important; padding: 0 !important;
}
.ttt-h1 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 2.8rem) !important; font-weight: 800 !important;
  line-height: 1.15 !important; letter-spacing: -0.5px; color: var(--ttt-ink) !important;
  margin-bottom: 32px !important; margin-top: 0 !important; padding-left: 16px !important;
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(to bottom, var(--ttt-green), rgba(255,255,255,0)) 1 !important;
}
.ttt-h2 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 1.85rem !important; font-weight: 700 !important; line-height: 1.3 !important;
  color: var(--ttt-ink) !important; margin-bottom: 28px !important; margin-top: 0 !important;
  padding-left: 16px !important; border-left: 4px solid transparent !important;
  border-image: linear-gradient(to bottom, var(--ttt-green), rgba(255,255,255,0)) 1 !important;
}
.ttt-h3 {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: var(--ttt-ink) !important; margin-bottom: 20px !important; margin-top: 0 !important;
  padding-left: 14px !important; border-left: 3px solid transparent !important;
  border-image: linear-gradient(to bottom, var(--ttt-gray-300), rgba(255,255,255,0)) 1 !important;
}
/* Top margins on standalone headings (not inside .ttt-section) */
h1.ttt-h1:not(.ttt-section h1) { margin-top: 56px !important; }
h2.ttt-h2:not(.ttt-section h2) { margin-top: 56px !important; }
h3.ttt-h3:not(.ttt-section h3) { margin-top: 32px !important; }
/* Top margins on ttt-blog-section groups (label + heading) */
.wp-block-group.ttt-section { margin-top: 56px !important; }
h2.ttt-h2 + .wp-block-group.ttt-section,
.ttt-section:has(.ttt-h2) { margin-top: 56px !important; }
.ttt-section:has(.ttt-h3) { margin-top: 32px !important; }

/* ═══════════════════ CALLOUT BOXES ═══════════════════ */

.ttt-popout {
  border-radius: var(--ttt-radius) !important; padding: 24px 28px !important;
  margin-top: 28px !important; margin-bottom: 0 !important;
}
.ttt-popout-accent { background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important; }
.ttt-popout-gold   { background: linear-gradient(135deg, #ffffff 0%, #f5f0e6 100%) !important; }
.ttt-popout-warn   { background: linear-gradient(135deg, #ffffff 0%, #f5eded 100%) !important; }
.ttt-popout-gray   { background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important; }
.ttt-popout-label { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase; }
.ttt-popout-accent .ttt-popout-label { color: var(--ttt-green) !important; }
.ttt-popout-gold .ttt-popout-label   { color: var(--ttt-gold) !important; }
.ttt-popout-warn .ttt-popout-label   { color: var(--ttt-maroon) !important; }
.ttt-popout-gray .ttt-popout-label   { color: var(--ttt-gray-500) !important; }
.ttt-popout-text { color: var(--ttt-gray-700) !important; font-size: 0.95rem !important; line-height: 1.75 !important; margin-bottom: 0 !important; }
.ttt-popout-text strong { color: var(--ttt-ink) !important; }

/* ═══════════════════ STEPS ═══════════════════ */

.ttt-step-list {
  margin-top: 28px !important; margin-bottom: 28px !important; padding: 0 !important;
  --wp--style--block-gap: 16px !important;
}
/* Spacing between consecutive step cards (with or without wrapper) */
.ttt-step + .ttt-step,
.ttt-step-list > * + *,
.ttt-step-list.is-layout-flow > * + *,
.ttt-step-list.is-layout-constrained > * + *,
.ttt-step-list > .wp-block-group + .wp-block-group {
  margin-block-start: 16px !important;
  margin-top: 16px !important;
}
.ttt-step-list > :first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
/* Standalone step cards (not in step-list) get margin between them */
div.wp-block-group.ttt-step + div.wp-block-group.ttt-step {
  margin-top: 16px !important;
  margin-block-start: 16px !important;
}

.ttt-step {
  padding: 24px 28px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
  border-radius: var(--ttt-radius) !important; position: relative !important;
  gap: 20px !important; align-items: flex-start !important;
}
.ttt-step-num {
  flex-shrink: 0 !important; width: 36px !important; height: 36px !important;
  min-width: 36px !important; border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(8,153,129,0.12) 0%, rgba(8,153,129,0) 100%) !important;
  color: var(--ttt-green) !important; font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important; font-size: 0.95rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important; line-height: 1 !important;
}
.ttt-step-body { flex: 1 !important; min-width: 0 !important; padding: 0 !important; }
.ttt-step-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--ttt-ink) !important; line-height: 1.4 !important; }
.ttt-step-desc { font-size: 0.9rem !important; color: var(--ttt-gray-700) !important; line-height: 1.65 !important; margin-bottom: 0 !important; }

/* ═══════════════════ QUOTE ═══════════════════ */

.ttt-quote-block { margin-top: 28px !important; margin-bottom: 0 !important; text-align: center !important; padding: 0 !important; }
.ttt-quote-text { font-family: 'Nunito Sans', sans-serif !important; font-size: 1.08rem !important; font-weight: 600 !important; font-style: italic !important; color: var(--ttt-ink) !important; line-height: 1.8 !important; text-align: center !important; }
.ttt-quote-text::before { content: '\201C' !important; font-family: Georgia, serif !important; font-size: 3rem !important; color: var(--ttt-gold) !important; vertical-align: middle !important; line-height: 0 !important; margin-right: 4px !important; position: relative !important; top: 6px !important; }
.ttt-quote-text::after { content: '\201D' !important; font-family: Georgia, serif !important; font-size: 3rem !important; color: var(--ttt-gold) !important; vertical-align: middle !important; line-height: 0 !important; margin-left: 4px !important; position: relative !important; top: 6px !important; }
.ttt-quote-cite { font-style: normal !important; font-size: 0.82rem !important; font-weight: 700 !important; color: var(--ttt-gold) !important; text-align: right !important; letter-spacing: 0.5px !important; margin-bottom: 0 !important; }
.ttt-quote-cite em { font-style: italic !important; }





  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%) !important;
  border-radius: var(--ttt-radius) !important; padding: 24px 26px !important;
  border: 1.5px solid transparent !important; background-clip: padding-box !important;
  position: relative !important;
  margin-top: 24px !important; margin-bottom: 0 !important;
}
/* When inside columns, no extra top margin */
  margin-top: 0 !important;
}

  content: '' !important; position: absolute !important; inset: -1.5px !important;
  border-radius: var(--ttt-radius) !important; padding: 1.5px !important;
  background: linear-gradient(315deg, #ffffff 0%, #d0d0d0 100%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important; mask-composite: exclude !important;
  pointer-events: none !important;
}

  background: linear-gradient(135deg, #ffffff 0%, #e8f5f1 100%) !important;
}

/* ═══════════════════ FEATURED IMAGE ═══════════════════ */

.post-thumbnail img, .kadence-single-entry .post-thumbnail img { border-radius: var(--ttt-radius) !important; max-width: 100% !important; height: auto !important; }


/* ── wp:icon inside ev-card ── */
.ttt-ev-top .wp-block-icon {
  width: 24px !important; height: 24px !important;
  flex-shrink: 0 !important;
}
.ttt-ev-top .wp-block-icon svg {
  width: 24px !important; height: 24px !important; display: block !important;
}

/* ── wp:icon inside og-cell ── */
.ttt-og-cell .wp-block-icon {
  width: 32px !important; height: 32px !important;
  margin: 0 auto 14px !important; opacity: 0.5 !important;
}
.ttt-og-cell .wp-block-icon svg {
  width: 32px !important; height: 32px !important; display: block !important;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .ttt-h1 { font-size: clamp(1.8rem, 4vw, 2.4rem) !important; }
  .ttt-h2 { font-size: 1.6rem !important; }
}

/* Mobile */
@media (max-width: 700px) {
  /* Typography */
  .ttt-prose { font-size: 15px !important; line-height: 1.7 !important; }
  .ttt-h1 { font-size: clamp(1.6rem, 7vw, 2rem) !important; padding-left: 14px !important; margin-bottom: 24px !important; }
  .ttt-h2 { font-size: 1.4rem !important; padding-left: 14px !important; margin-bottom: 22px !important; }
  .ttt-h3 { font-size: 1.15rem !important; padding-left: 12px !important; margin-bottom: 16px !important; }
  .ttt-section-label { font-size: 0.65rem !important; }

  /* Heading top margins */
  h1.ttt-h1:not(.ttt-section h1) { margin-top: 40px !important; }
  h2.ttt-h2:not(.ttt-section h2) { margin-top: 40px !important; }
  h3.ttt-h3:not(.ttt-section h3) { margin-top: 24px !important; }
  .wp-block-group.ttt-section { margin-top: 40px !important; }

  /* Callout boxes */
  .ttt-popout { padding: 20px 22px !important; margin-top: 22px !important; margin-bottom: 0 !important; }
  .ttt-popout-label { font-size: 0.65rem !important; }
  .ttt-popout-text { font-size: 0.9rem !important; }

  /* Steps */
  .ttt-step { padding: 20px !important; gap: 16px !important; }
  .ttt-step-num { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 0.9rem !important; border-radius: 8px !important; }
  .ttt-step-title { font-size: 0.95rem !important; }
  .ttt-step-desc { font-size: 0.85rem !important; }
  div.wp-block-group.ttt-step + div.wp-block-group.ttt-step { margin-top: 12px !important; }

  /* Quote */
  .ttt-quote-block { margin-top: 22px !important; margin-bottom: 0 !important; }
  .ttt-quote-text { font-size: 0.95rem !important; line-height: 1.7 !important; }
  .ttt-quote-text::before, .ttt-quote-text::after { font-size: 2.4rem !important; }
  .ttt-quote-cite { font-size: 0.75rem !important; }

  /* Chart image */

  /* Split columns — stack on mobile */


  /* Custom HTML card */

  /* Featured image */
  .post-thumbnail img { border-radius: 8px !important; }
}

/* Small mobile */
@media (max-width: 400px) {
  .ttt-step { flex-direction: column !important; gap: 12px !important; }
  .ttt-step-num { position: static !important; }
  .ttt-popout { padding: 18px 18px !important; }
  .ttt-h1 { font-size: 1.5rem !important; padding-left: 12px !important; }
  .ttt-h2 { font-size: 1.25rem !important; padding-left: 12px !important; }
  .ttt-h3 { font-size: 1.05rem !important; padding-left: 10px !important; }
  .ttt-quote-text { font-size: 0.9rem !important; }
  .ttt-quote-text::before, .ttt-quote-text::after { font-size: 2rem !important; top: 4px !important; }
}


/* ═══════════════════════════════════════════════════
   BLOG POST HTML — ttt-blog-* scoped class styles
   Applied when blog HTML is used as a Custom HTML block.
   All generic class names renamed to ttt-blog-* prefix
   to prevent collision with theme CSS.
   ═══════════════════════════════════════════════════ */

.ttt-blog-hero { background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; padding: 64px 40px 56px !important; position: relative !important; overflow: hidden !important; }
.ttt-blog-hero-inner { max-width: 860px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; }
.ttt-blog-hero-badge { display: inline-block !important; font-family: "Nunito Sans",sans-serif !important; color: #089981 !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 12px !important; }
.ttt-blog-content { max-width: 860px !important; margin: 0 auto !important; padding: 64px 40px 100px !important; }
.ttt-blog-section { margin-bottom: 56px !important; padding: 0 !important; background: transparent !important; position: static !important; z-index: auto !important; }
.ttt-blog-section-label { font-size: 0.72rem !important; font-weight: 700 !important; color: var(--ttt-green) !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 6px !important; display: block !important; padding: 0 !important; }
.ttt-blog-prose p { color: var(--ttt-gray-700) !important; margin-bottom: 16px !important; margin-top: 0 !important; max-width: 700px !important; line-height: 1.8 !important; padding: 0 !important; }
.ttt-blog-popout { border-radius: var(--ttt-radius) !important; padding: 24px 28px !important; margin: 28px 0 !important; }
.ttt-blog-popout-accent { background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; }
.ttt-blog-popout-gold   { background: linear-gradient(135deg,#ffffff 0%,#f5f0e6 100%) !important; }
.ttt-blog-popout-warn   { background: linear-gradient(135deg,#ffffff 0%,#f5eded 100%) !important; }
.ttt-blog-popout-gray   { background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; }
.ttt-blog-popout-label { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 8px !important; display: block !important; }
.ttt-blog-popout-accent .ttt-blog-popout-label { color: var(--ttt-green) !important; }
.ttt-blog-popout-gold   .ttt-blog-popout-label { color: var(--ttt-gold) !important; }
.ttt-blog-popout-warn   .ttt-blog-popout-label { color: var(--ttt-maroon) !important; }
.ttt-blog-popout-gray   .ttt-blog-popout-label { color: var(--ttt-gray-500) !important; }
.ttt-blog-popout p { color: var(--ttt-gray-700) !important; font-size: 0.95rem !important; margin-bottom: 0 !important; padding: 0 !important; }
.ttt-blog-popout strong { color: var(--ttt-ink) !important; }
.ttt-blog-divider { height: 1px !important; background: var(--ttt-gray-200) !important; margin: 52px 0 !important; }
.ttt-blog-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; margin: 28px 0 !important; }
.ttt-blog-split-card { padding: 28px !important; border-radius: var(--ttt-radius) !important; background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; }
.ttt-blog-split-card h4 { font-family: "Nunito Sans",sans-serif !important; font-size: 1.05rem !important; font-weight: 600 !important; margin-bottom: 12px !important; margin-top: 0 !important; color: var(--ttt-ink) !important; padding: 0 !important; }
.ttt-blog-split-card p { font-size: 0.92rem !important; color: var(--ttt-gray-700) !important; line-height: 1.7 !important; margin-bottom: 10px !important; padding: 0 !important; }
.ttt-blog-split-card p:last-child { margin-bottom: 0 !important; }
.ttt-blog-split-label { display: inline-block !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 3px 10px !important; border-radius: 100px !important; margin-bottom: 14px !important; }
.ttt-blog-split-good .ttt-blog-split-label,
.ttt-blog-split-a .ttt-blog-split-label,
.ttt-blog-split-b .ttt-blog-split-label { background: rgba(8,153,129,0.1) !important; color: var(--ttt-green) !important; }
.ttt-blog-split-warn .ttt-blog-split-label { background: rgba(125,45,45,0.1) !important; color: var(--ttt-maroon) !important; }
.ttt-blog-steps { list-style: none !important; counter-reset: step-counter !important; margin: 28px 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 !important; }
.ttt-blog-steps li { counter-increment: step-counter !important; display: flex !important; gap: 20px !important; align-items: flex-start !important; padding: 24px 28px !important; background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; border-radius: var(--ttt-radius) !important; position: relative !important; margin: 0 !important; }
.ttt-blog-steps li::before { content: counter(step-counter) !important; flex-shrink: 0 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg,rgba(8,153,129,0.12) 0%,rgba(8,153,129,0) 100%) !important; color: var(--ttt-green) !important; font-family: "Nunito Sans",sans-serif !important; font-weight: 700 !important; font-size: 0.95rem !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ttt-blog-step-text { flex: 1 !important; }
.ttt-blog-step-text strong { display: block !important; font-size: 1rem !important; margin-bottom: 4px !important; color: var(--ttt-ink) !important; }
.ttt-blog-step-text span { font-size: 0.9rem !important; color: var(--ttt-gray-700) !important; line-height: 1.65 !important; }
.ttt-blog-flowchart { margin: 36px 0 !important; padding: 40px !important; background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; border-radius: var(--ttt-radius) !important; }
.ttt-blog-flowchart-title { font-family: "Nunito Sans",sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 32px !important; }
.ttt-blog-timeline { position: relative !important; padding-left: 32px !important; }
.ttt-blog-tl-item { position: relative !important; padding-bottom: 24px !important; display: flex !important; align-items: flex-start !important; gap: 16px !important; margin: 0 !important; }
.ttt-blog-tl-item:last-child { padding-bottom: 0 !important; }
.ttt-blog-tl-item::before { content: "" !important; position: absolute !important; left: -24px !important; top: 20px !important; bottom: 0 !important; width: 2px !important; background: linear-gradient(to bottom,var(--ttt-gray-300),rgba(255,255,255,0)) !important; }
.ttt-blog-tl-dot { position: absolute !important; left: -32px !important; top: 2px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; flex-shrink: 0 !important; z-index: 1 !important; box-sizing: border-box !important; }
.ttt-blog-tl-content { flex: 1 !important; }
.ttt-blog-tl-label { font-family: "Nunito Sans",sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; margin-bottom: 2px !important; color: var(--ttt-gray-700) !important; display: block !important; padding: 0 !important; }
.ttt-blog-tl-desc { font-size: 0.85rem !important; color: #555555 !important; line-height: 1.5 !important; display: block !important; margin: 0 !important; padding: 0 !important; }
.ttt-blog-evidence-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 28px 0 !important; }
.ttt-blog-evidence-card { background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; border-radius: var(--ttt-radius) !important; padding: 24px !important; display: flex !important; gap: 16px !important; align-items: flex-start !important; }
.ttt-blog-evidence-icon { width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.ttt-blog-evidence-icon svg { stroke: var(--ttt-green) !important; width: 28px !important; height: 28px !important; }
.ttt-blog-evidence-text { flex: 1 !important; }
.ttt-blog-ev-title { font-family: "Nunito Sans",sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--ttt-ink) !important; margin-bottom: 4px !important; display: block !important; padding: 0 !important; }
.ttt-blog-ev-desc { font-size: 0.85rem !important; color: var(--ttt-gray-700) !important; line-height: 1.55 !important; display: block !important; margin: 0 !important; padding: 0 !important; }
.ttt-blog-quote-block { margin: 28px 0 !important; text-align: center !important; padding: 0 !important; }
.ttt-blog-quote-text { display: inline !important; font-family: "Nunito Sans",sans-serif !important; font-size: 1.08rem !important; font-weight: 600 !important; font-style: italic !important; color: var(--ttt-ink) !important; line-height: 1.8 !important; }
.ttt-blog-qm { font-family: Georgia,serif !important; font-size: 3rem !important; color: var(--ttt-gold) !important; vertical-align: middle !important; line-height: 0 !important; }
.ttt-blog-qm-open { margin-right: 4px !important; position: relative !important; top: 6px !important; }
.ttt-blog-qm-close { margin-left: 4px !important; position: relative !important; top: 6px !important; }
.ttt-blog-quote-block cite { display: block !important; font-style: normal !important; font-size: 0.82rem !important; font-weight: 700 !important; color: var(--ttt-gold) !important; margin-top: 14px !important; text-align: right !important; letter-spacing: 0.5px !important; }
.ttt-blog-takeaway-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 24px 0 !important; }
.ttt-blog-takeaway-card { background: linear-gradient(135deg,#ffffff 0%,#f4f4f4 100%) !important; border-radius: var(--ttt-radius) !important; padding: 20px 22px !important; border: 1.5px solid transparent !important; background-clip: padding-box !important; position: relative !important; }
.ttt-blog-takeaway-card::before { content: "" !important; position: absolute !important; inset: -1.5px !important; border-radius: var(--ttt-radius) !important; padding: 1.5px !important; background: linear-gradient(315deg,#ffffff 0%,#d0d0d0 100%) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; }
.ttt-blog-tk-label { font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--ttt-green) !important; margin-bottom: 6px !important; display: block !important; padding: 0 !important; }
.ttt-blog-takeaway-card p { font-size: 0.88rem !important; color: var(--ttt-gray-700) !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
.ttt-blog-takeaway-card p strong { color: var(--ttt-ink) !important; }
.ttt-blog-tk-wide { grid-column: 1 / -1 !important; background: linear-gradient(135deg,#ffffff 0%,#e8f5f1 100%) !important; }
.ttt-blog-tk-wide::before { background: linear-gradient(315deg,#e8f5f1 0%,var(--ttt-green) 100%) !important; }
.ttt-blog-toolkit-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 24px 20px !important; margin: 28px 0 !important; }
.ttt-blog-toolkit-cell { text-align: center !important; padding: 8px 4px !important; }
.ttt-blog-chart-block { margin: 28px 0 !important; border-radius: var(--ttt-radius) !important; overflow: hidden !important; background: linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%) !important; }
.ttt-blog-chart-block img { width: 100% !important; height: auto !important; display: block !important; }
.ttt-blog-chart-placeholder { width: 100% !important; aspect-ratio: 16/9 !important; background: rgba(8,153,129,0.04) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ttt-blog-chart-meta { padding: 12px 18px !important; display: flex !important; align-items: baseline !important; gap: 10px !important; }
.ttt-blog-chart-ticker { font-family: "Nunito Sans",sans-serif !important; font-weight: 700 !important; font-size: 0.74rem !important; letter-spacing: 0.5px !important; color: #055a4d !important; background: linear-gradient(135deg,#08998112,#08998106) !important; padding: 4px 10px !important; border-radius: 6px !important; }
.ttt-blog-chart-date { font-size: 0.72rem !important; color: #aaa !important; }

/* Responsive */
@media (max-width: 900px) {
  .ttt-blog-content { padding: 48px 32px 80px !important; }
  .ttt-blog-hero { padding: 48px 28px 44px !important; }
}
@media (max-width: 700px) {
  .ttt-blog-hero { padding: 40px 20px 36px !important; }
  .ttt-blog-content { padding: 32px 20px 60px !important; }
  .ttt-blog-section { margin-bottom: 40px !important; }
  .ttt-blog-split { grid-template-columns: 1fr !important; }
  .ttt-blog-evidence-grid { grid-template-columns: 1fr !important; }
  .ttt-blog-takeaway-grid { grid-template-columns: 1fr !important; }
  .ttt-blog-steps li { padding: 20px !important; gap: 16px !important; }
  .ttt-blog-flowchart { padding: 24px 16px !important; margin: 24px 0 !important; }
  .ttt-blog-timeline { padding-left: 28px !important; }
  .ttt-blog-tl-dot { width: 14px !important; height: 14px !important; left: -28px !important; top: 4px !important; }
}
@media (max-width: 400px) {
  .ttt-blog-hero { padding: 32px 16px 28px !important; }
  .ttt-blog-content { padding: 24px 16px 48px !important; }
  .ttt-blog-steps li { flex-direction: column !important; gap: 12px !important; }
  .ttt-blog-steps li::before { position: static !important; }
}

/* ── ttt-chart-patterns ── */
/* ═══════════════════════════════════════
   Teach Tech Trade — Chart Patterns v2.0.0
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --lc-ink:      #1a1a1a;
  --lc-blue:     #089981;
  --lc-gray-100: #f5f5f5;
  --lc-gray-200: #e0e0e0;
  --lc-gray-500: #888888;
  --lc-radius:   12px;
}

/* ── Outer wrapper ── */
.ttt-chart-block {
  margin-top: 36px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  --wp--style--block-gap: 0px !important;
  gap: 0 !important;
}

.ttt-chart-block > *,
.ttt-chart-block.is-layout-constrained > *,
.ttt-chart-block.is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ── Image ── */
.ttt-chart-img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--lc-radius) var(--lc-radius) 0 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.ttt-chart-img img,
.ttt-chart-img figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: unset !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ── Meta row ── */
.ttt-chart-meta {
  padding: 10px 14px !important;
  background: var(--lc-gray-100) !important;
  border-radius: 0 0 var(--lc-radius) var(--lc-radius) !important;
  border-top: 1px solid var(--lc-gray-200) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  --wp--style--block-gap: 10px !important;
  min-height: unset !important;
}

.ttt-chart-meta > *,
.ttt-chart-meta.is-layout-flex > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* ── Ticker pill ── */
.ttt-chart-ticker,
p.ttt-chart-ticker {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #0ec4a5 0%, #089981 45%, #066b5a 100%) !important;
  box-shadow: 0 2px 8px rgba(8,153,129,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ── Company name ── */
.ttt-chart-name,
p.ttt-chart-name {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--lc-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.ttt-chart-name::after,
p.ttt-chart-name::after {
  content: '·' !important;
  margin-left: 10px !important;
  color: var(--lc-gray-500) !important;
  flex-shrink: 0 !important;
}

/* ── Date — right justified ── */
.ttt-chart-date,
p.ttt-chart-date {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--lc-gray-500) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

/* ── Mobile ── */
@media (max-width: 380px) {
  .ttt-chart-meta { flex-wrap: wrap !important; }
  .ttt-chart-date, p.ttt-chart-date {
    margin-left: 0 !important;
    flex-basis: 100% !important;
  }
}

/* ── ttt-icon-columns ── */
/* LC Icon Columns v1.0.1 — style.css
   All classes are scoped under .ttt-ic-section to avoid
   any conflict with lc-text-patterns or other plugins.     */

/* ── SECTION WRAPPER ── */
.ttt-ic-section {
  margin-top: 56px !important;
  margin-bottom: 0 !important;
}
.entry-content > .wp-block-group.ttt-ic-section:first-child {
  margin-top: 0 !important;
}

/* H2 inside OUR section only — does not touch global .ttt-h2 */
.wp-block-group.ttt-ic-section > .wp-block-heading,
.wp-block-group.ttt-ic-section > .ttt-h2 {
  padding-left: 16px !important;
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(to bottom, #089981, rgba(255,255,255,0)) 1 !important;
  margin-bottom: 14px !important;
}

/* Prose inside OUR section only — does not touch global .ttt-prose */
.wp-block-group.ttt-ic-section > p.ttt-prose,
.wp-block-group.ttt-ic-section > .wp-block-paragraph.ttt-prose {
  color: #4a4a4a !important;
  max-width: 700px !important;
  margin-bottom: 0 !important;
}

/* Row spacing inside section */
.wp-block-group.ttt-ic-section .ttt-tc-row,
.wp-block-group.ttt-ic-section .ttt-ev-row,
.wp-block-group.ttt-ic-section .ttt-og-row {
  margin-top: 20px !important;
}

/* ════ A+B TEXT CARDS ════ */
.ttt-tc-row.wp-block-columns {
  gap: 20px !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
}
.ttt-tc-row .wp-block-column.ttt-tc-card {
  padding: 28px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
  border-radius: 12px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.ttt-tc-row .wp-block-column.ttt-tc-card > * { margin-block-start: 0 !important; }

p.ttt-tc-label {
  display: inline-block !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  background: rgba(8,153,129,0.15) !important;
  color: #089981 !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
  line-height: 1.4 !important;
}
p.ttt-tc-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}
p.ttt-tc-body {
  font-size: 0.9rem !important;
  color: #4a4a4a !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

/* ════ C+D EVIDENCE CARDS ════ */
.ttt-ev-row.wp-block-columns {
  gap: 20px !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
}
.ttt-ev-row .wp-block-column.ttt-ev-card {
  padding: 24px 26px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
  border-radius: 12px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.ttt-ev-row .wp-block-column.ttt-ev-card > * { margin-block-start: 0 !important; }

.wp-block-group.ttt-ev-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  flex-wrap: nowrap !important;
}
.wp-block-group.ttt-ev-top > * { margin-block-start: 0 !important; }

p.ttt-ev-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  stroke: #089981 !important;
}
p.ttt-ev-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
p.ttt-ev-body {
  font-size: 0.9rem !important;
  color: #4a4a4a !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

/* ════ E+F OPEN GRID ════ */
.ttt-og-row.wp-block-columns {
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 0 !important;
}
.ttt-og-row.wp-block-columns + .ttt-og-row.wp-block-columns {
  margin-top: 32px !important;
}
.ttt-og-row .wp-block-column.ttt-og-cell {
  padding: 0 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: none !important;
}
.ttt-og-row .wp-block-column.ttt-og-cell > * { margin-block-start: 0 !important; }

p.ttt-og-icon svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  stroke: #089981 !important;
}
p.ttt-og-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
p.ttt-og-body {
  font-size: 0.88rem !important;
  color: #4a4a4a !important;
  line-height: 1.65 !important;
  margin-bottom: 0 !important;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
  .ttt-tc-row.wp-block-columns,
  .ttt-ev-row.wp-block-columns,
  .ttt-og-row.wp-block-columns { gap: 16px !important; }
  .ttt-tc-row .wp-block-column.ttt-tc-card { padding: 24px 22px !important; }
  .ttt-ev-row .wp-block-column.ttt-ev-card { padding: 22px !important; }
  .ttt-ic-section { margin-top: 44px !important; }
}
@media (max-width: 700px) {
  .ttt-tc-row.wp-block-columns,
  .ttt-ev-row.wp-block-columns,
  .ttt-og-row.wp-block-columns { flex-direction: column !important; }
  .ttt-tc-row.wp-block-columns > .wp-block-column,
  .ttt-ev-row.wp-block-columns > .wp-block-column,
  .ttt-og-row.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important; width: 100% !important; height: auto !important;
  }
  .ttt-tc-row .wp-block-column.ttt-tc-card { padding: 22px 20px !important; }
  .ttt-ev-row .wp-block-column.ttt-ev-card { padding: 20px !important; }
  .ttt-og-row .wp-block-column.ttt-og-cell { padding: 0 !important; }
  .ttt-og-row.wp-block-columns + .ttt-og-row.wp-block-columns { margin-top: 24px !important; }
  .ttt-ic-section { margin-top: 36px !important; }
}
@media (max-width: 400px) {
  .ttt-tc-row .wp-block-column.ttt-tc-card { padding: 18px 16px !important; }
  .ttt-ev-row .wp-block-column.ttt-ev-card { padding: 18px 16px !important; }
}

/* ── ttt-takeaway-cards ── */
/* LC Takeaway Cards v1.0.0 — style.css
   All rules scoped to .ttt-tk-* — zero overlap with other plugins. */

/* ── ROW ──
   14px between every row regardless of type (side-by-side, wide, gray).
   WordPress sets margin-block-start on wp-block-columns — we zero it
   on the first row and override it to exactly 14px on every subsequent row. */

.ttt-tk-row.wp-block-columns {
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Every row after any row — covers all combinations:
   side+side, side+wide, side+gray, wide+side, wide+wide,
   wide+gray, gray+side, gray+wide, gray+gray */
.ttt-tk-row.wp-block-columns + .ttt-tk-row.wp-block-columns {
  margin-top: 14px !important;
  margin-block-start: 14px !important;
}

/* ── CARD ── */
.ttt-tk-row .wp-block-column.ttt-tk-card {
  padding: 20px 22px !important;
  border-radius: 12px !important;
  /* gradient fill */
  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%) !important;
  background-clip: padding-box !important;
  /* gradient border via box-shadow trick — no pseudo-element needed in WP */
  box-shadow:
    0 0 0 1.5px #d8d8d8,
    inset 0 0 0 0 transparent !important;
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.ttt-tk-row .wp-block-column.ttt-tk-card > * {
  margin-block-start: 0 !important;
}

/* Wide card — full-width row single card */
.ttt-tk-row .wp-block-column.ttt-tk-wide {
  background: linear-gradient(135deg, #ffffff 0%, #e8f5f1 100%) !important;
  box-shadow: 0 0 0 1.5px #089981 !important;
}

/* ── LABEL ── */
p.ttt-tk-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #089981 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

/* ── BODY ── */
p.ttt-tk-body {
  font-size: 0.88rem !important;
  color: #4a4a4a !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}
p.ttt-tk-body strong {
  color: #1a1a1a !important;
}


/* Wide card — neutral gray */
.ttt-tk-row .wp-block-column.ttt-tk-gray {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
  box-shadow: 0 0 0 1.5px #d0d0d0 !important;
}
.ttt-tk-row .wp-block-column.ttt-tk-gray .ttt-tk-label {
  color: #888888 !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .ttt-tk-row.wp-block-columns {
    flex-direction: column !important;
  }
  .ttt-tk-row.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .ttt-tk-row.wp-block-columns + .ttt-tk-row.wp-block-columns {
    margin-top: 10px !important;
  }
  .ttt-tk-row .wp-block-column.ttt-tk-card {
    padding: 18px 20px !important;
  }
}