/* Smart Tax — design system theme overrides
   Loaded after all page styles. Applies brand typography on top of the
   global color swap already baked into the compiled/inline CSS. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --st-navy-950:#0d181f;
  --st-navy-900:#122029;
  --st-navy-800:#1c2e38;
  --st-navy-700:#24404d;
  --st-navy-600:#31586a;
  --st-gold-700:#8f5f34;
  --st-gold-600:#a97c4f;
  --st-gold-500:#c39b6c;
  --st-font-display:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --st-font-body:'Inter',-apple-system,'Segoe UI',sans-serif;
}

body, p, span, div, a, li, td, th, input, textarea, select, button{
  font-family:var(--st-font-body), sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
  font-family:var(--st-font-display), sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
}

/* --- Component-level brand overrides ---
   The compiled site defines its colors through several overlapping token
   systems (--color-*, --bs-color-*) and, in places, hardcoded hex values
   that bypass those tokens entirely. Text-level hex substitution handles
   most of it; these rules force the remaining known button/nav components
   to the correct brand colors regardless of which rule wins upstream. */

.atom-button__button--primary{
  background-color:var(--st-gold-600) !important;
  border-color:var(--st-gold-600) !important;
  color:#fff !important;
}
.atom-button__button--primary:hover{
  background-color:var(--st-gold-700) !important;
  border-color:var(--st-gold-700) !important;
}
.atom-button__button--secondary-outline{
  background-color:transparent !important;
  border-color:var(--st-navy-800) !important;
  color:var(--st-navy-800) !important;
}
.atom-button__button--secondary-outline:hover{
  background-color:var(--st-navy-800) !important;
  color:#fff !important;
}
.atom-button__button--secondary,
.atom-button__button--secondary-variant{
  background-color:#fff !important;
  border-color:var(--st-navy-800) !important;
  color:var(--st-navy-800) !important;
}
.atom-button__button--link,
.atom-button__button--anchor,
.atom-button__button--menu-button{
  color:var(--st-navy-800) !important;
}

a{ color:var(--st-navy-800); }
a:hover{ color:var(--st-gold-700); }

/* --- Header --- */
.main-header{
  background:var(--st-navy-800) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.08);
}
/* Top-level nav toggles only — must NOT bleed into dropdown-menu content,
   which sits on its own white panel and needs dark text instead. */
.main-header .navbar-nav>.nav-item>.nav-link,
.main-header .navbar-nav>.nav-item>.nav-link>span,
.main-header .navbar-nav>.nav-item>.dropdown-toggle-mobile,
.main-header .navbar-nav>.nav-item>.dropdown-toggle-mobile>span,
.main-header__navbar-brand,
.main-header .atom-link[href*="login" i],
.main-header .atom-link[href*="login" i]>span{
  color:rgba(255,255,255,0.85) !important;
}
.main-header .navbar-menu__icon,
.main-header .navbar-menu__icon:before,
.main-header .navbar-menu__icon:after{
  background-color:#fff !important;
}

/* Dropdown panels: force a fully opaque white surface — the compiled site's
   scoped styles otherwise win the specificity fight and leave the panel
   translucent, letting page content show through. */
.main-header .dropdown-menu,
.main-header .dropdown-menu-group,
.main-header .dropdown-menu-group__group{
  background-color:#ffffff !important;
  opacity:1 !important;
  backdrop-filter:none !important;
}
.main-header .dropdown-menu,
.main-header .dropdown-menu *{
  color:var(--st-navy-800) !important;
}
.main-header .dropdown-menu .dropdown-item:hover{
  background-color:var(--neutral-50, #f7f6f4) !important;
  color:var(--st-gold-700) !important;
}
.main-header__navbar-brand img{
  content:url('/assets/img/logo-mark.png');
  height:32px !important;
  width:32px !important;
  object-fit:contain;
}
.main-header__navbar-brand::after{
  content:'SMART TAX';
  font-family:var(--st-font-display);
  font-weight:800;
  font-size:15px;
  color:#fff;
  letter-spacing:0.04em;
  margin-left:8px;
  white-space:nowrap;
}

/* --- Header (Nuxt3 app pages: abrir-empresa*, fale-conosco) ---
   These pages use a separate "base-header" component (different build)
   instead of "main-header", with its own logo <img> encoded as a base64
   data: URI SVG — text-level hex substitution can't reach that, so we
   swap it for the Smart Tax mark via CSS instead. */
.base-header{
  background:var(--st-navy-800) !important;
}
.base-header .base-dropdown__label,
.base-header .base-dropdown__label span{
  color:rgba(255,255,255,0.85) !important;
}
.base-header .base-dropdown__label svg path{
  fill:#fff !important;
}
.base-header .base-dropdown__list{
  background:#ffffff !important;
  opacity:1 !important;
}
.base-header .base-dropdown__list,
.base-header .base-dropdown__list *{
  color:var(--st-navy-800) !important;
}
.base-header .logo{
  content:url('/assets/img/logo-mark.png');
  width:32px !important;
  height:32px !important;
  object-fit:contain;
}

/* --- Footer --- */
.organism-footer{
  background:var(--st-navy-900) !important;
  color:rgba(255,255,255,0.65) !important;
}
.organism-footer a,
.organism-footer p,
.organism-footer span,
.organism-footer li,
.organism-footer label{
  color:rgba(255,255,255,0.65) !important;
}
.organism-footer a:hover{ color:var(--st-gold-500) !important; }
.organism-footer__logo img{
  content:url('/assets/img/logo-mark.png');
  height:36px !important;
  width:36px !important;
  object-fit:contain;
}
.organism-footer hr,
.organism-footer .border-top,
.organism-footer [class*="border"]{
  border-color:rgba(255,255,255,0.15) !important;
}

