/*
 * Maria Teixeira - Components (BEM, DS v2)
 * Loaded after tokens.css. No resets. No !important unless noted.
 */

/* ==== Article: standfirst / lede ==== */
.mt-article .standfirst,
.col-main .standfirst {
  font-family: var(--mt-font-serif, Georgia, serif);
  font-size: var(--mt-lede, 22px);
  line-height: 1.55;
  color: var(--mt-ink, #1A1A1A);
  margin: 0 0 var(--mt-s-6, 24px);
}

/* ==== Article: column main ==== */
.mt-article .col-main {
  font-size: var(--mt-body, 17px);
  line-height: var(--mt-body-lh, 1.65);
  color: var(--mt-ink, #1A1A1A);
}
.mt-article .col-main h2 {
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: var(--mt-h2, 48px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: var(--mt-s-10, 40px) 0 var(--mt-s-5, 20px);
  color: var(--mt-navy, #0F2C4C);
}
.mt-article .col-main h2 .num {
  display: inline-block;
  min-width: 1.4em;
  margin-right: .35em;
  color: var(--mt-gold, #B88A3E);
  font-variant-numeric: tabular-nums;
}
.mt-article .col-main h3 {
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: var(--mt-h3, 32px);
  line-height: 1.2;
  margin: var(--mt-s-8, 32px) 0 var(--mt-s-4, 16px);
  color: var(--mt-navy, #0F2C4C);
}

/* ==== Buttons ==== */
.mt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-s-2, 8px);
  padding: 12px 22px;
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  border-radius: var(--mt-r-md, 6px);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--mt-t-fast, .15s) ease, color var(--mt-t-fast, .15s) ease, border-color var(--mt-t-fast, .15s) ease;
  cursor: pointer;
}
.mt-btn--solid {
  background: var(--mt-navy, #0F2C4C);
  color: #FFFFFF;
  border-color: var(--mt-navy, #0F2C4C);
}
.mt-btn--solid:hover {
  background: #08223F;
  border-color: #08223F;
  color: #FFFFFF;
}
.mt-btn--ghost {
  background: transparent;
  color: var(--mt-navy, #0F2C4C);
  border-color: var(--mt-navy, #0F2C4C);
}
.mt-btn--ghost:hover { background: var(--mt-navy, #0F2C4C); color: #FFFFFF; }
.mt-btn--gold {
  background: var(--mt-gold, #B88A3E);
  color: #FFFFFF;
  border-color: var(--mt-gold, #B88A3E);
}
.mt-btn--gold:hover { background: #9E7533; border-color: #9E7533; }

/* ==== Base legal (legal-basis callout) ==== */
.mt-base-legal {
  margin: var(--mt-s-6, 24px) 0;
  padding: var(--mt-s-5, 20px) var(--mt-s-6, 24px);
  background: var(--mt-cream, #FBF8F2);
  border-left: 3px solid var(--mt-gold, #B88A3E);
  border-radius: var(--mt-r-sm, 4px);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-ink, #1A1A1A);
}
.mt-base-legal__label {
  display: block;
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: var(--mt-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-gold, #B88A3E);
  margin-bottom: var(--mt-s-2, 8px);
}

/* ==== Response box (quick-answer / TL;DR) ==== */
.mt-response-box {
  margin: var(--mt-s-6, 24px) 0;
  padding: var(--mt-s-6, 24px);
  background: #FFFFFF;
  border: 1px solid #E5E3DD;
  border-top: 3px solid var(--mt-navy, #0F2C4C);
  border-radius: var(--mt-r-md, 6px);
}
.mt-response-box__label {
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: var(--mt-eyebrow, 12px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-navy, #0F2C4C);
  margin: 0 0 var(--mt-s-2, 8px);
}
.mt-response-box__body {
  font-size: var(--mt-body, 17px);
  line-height: var(--mt-body-lh, 1.65);
  color: var(--mt-ink, #1A1A1A);
  margin: 0;
}

/* ==== CTA Acao Institucional ==== */
.mt-cta {
  margin: var(--mt-s-10, 40px) 0;
  padding: var(--mt-s-8, 32px);
  border-radius: var(--mt-r-lg, 10px);
}
.mt-cta--acao {
  background: var(--mt-navy, #0F2C4C);
  color: #FFFFFF;
  text-align: center;
}
.mt-cta--acao h3 {
  font-family: var(--mt-font-sans, Inter, sans-serif);
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 var(--mt-s-3, 12px);
  color: #FFFFFF;
}
.mt-cta--acao p {
  font-size: var(--mt-body, 17px);
  line-height: var(--mt-body-lh, 1.65);
  margin: 0 0 var(--mt-s-5, 20px);
  color: rgba(255,255,255,.88);
}
.mt-cta--acao .mt-btn--solid {
  background: var(--mt-gold, #B88A3E);
  border-color: var(--mt-gold, #B88A3E);
}

/* ==== Accessibility: WCAG AA contrast — home hero year-mark (page-id-4251) ==== */
/* .hero .year-mark strong: --gold #B88A3E = ~2.97:1 on cream, fails AA.          */
/* #7a5614 = 4.61:1 on cream, passes AA. !important needed: same specificity as   */
/* the inline <style> block in the Elementor widget, which wins by document order. */
.page-id-4251 .year-mark strong { color: #7a5614 !important; }
.mt-cta--acao .mt-btn--solid:hover { background: #9E7533; border-color: #9E7533; }


/* ==== P2.1 a11y contrast fix (2026-05-14): override Elementor widget inline color for eyebrow icons ==== */
/* Some Elementor widgets in MT Single Post template (1272) have hardcoded #966918 text_color. */
/* Override at higher specificity to bring all article-card / post-info eyebrows to AA contrast. */
.elementor-element .elementor-icon-list-icon i,
.elementor-element .elementor-icon-list-icon svg,
.mt-card-eyebrow .elementor-icon-list-icon i,
.mt-card-eyebrow .elementor-icon-list-icon svg {
  color: #7a5614 !important;
  fill: #7a5614 !important;
}


/* ==== P2.1+P2.6 a11y fixes (2026-05-14): link distinguishability + slate contrast ==== */
/* Using !important because existing theme rules in other files (mt-responsive.css) load   */
/* later in cascade order and have equal or higher specificity.                            */

/* 1) Author autolink — universal underline (overrides existing :link text-decoration:none) */
.mt-author-autolink,
a.mt-author-autolink,
a.mt-author-autolink:link,
a.mt-author-autolink:visited {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* 2) Body links inside articles get underline (excludes button-styled links) */
.elementor-widget-text-editor p a:not(.mt-btn):not(.elementor-button),
.elementor-widget-text-editor li a:not(.mt-btn):not(.elementor-button),
.mt-article-body p a:not(.mt-btn):not(.elementor-button),
.mt-article-body li a:not(.mt-btn):not(.elementor-button) {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* 3) Podcast trigger subtitle: darken slate from #6b7480 (4.46) to #646d79 (4.7) — passes AA */
.mt-podcast-trigger__sub,
html body .mt-podcast-trigger__sub {
  color: #646d79 !important;
}