/*
 * Concretu Help Center — Custom CSS
 * Abordagem: trabalhar COM o Bootstrap 2 do HelpScout, apenas visual overrides
 * NAO mexer em: float, width dos spans, display do .row-fluid, clearfix
 */

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

/* ===== Design Tokens ===== */
:root {
  --c-primary: #7e22ce;
  --c-primary-hover: #6b21a8;
  --c-primary-light: #faf5ff;
  --c-primary-muted: #f3e8ff;
  --c-fg: #171717;
  --c-muted: #737373;
  --c-border: #e5e5e5;
  --c-bg: #ffffff;
  --c-bg-muted: #fafafa;
  --c-radius: 0.625rem;
  --c-font: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--c-font) !important;
  background: var(--c-bg-muted) !important;
  color: var(--c-fg) !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== Links ===== */
a {
  color: var(--c-primary) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--c-primary-hover) !important;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--c-font) !important;
  color: var(--c-fg) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ===== Navbar ===== */
/* HelpScout base: .navbar .brand { float:left; padding:31px 20px 11px; margin-left:-20px } */
.navbar,
.navbar .navbar-inner {
  background: var(--c-bg) !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.navbar .brand {
  padding: 14px 20px 14px 0 !important;
  margin-left: 0 !important;
}

.navbar .brand img {
  height: 36px !important;
  width: auto !important;
}

.navbar .nav > li > a {
  color: var(--c-fg) !important;
  font-family: var(--c-font) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  text-shadow: none !important;
}

.navbar .nav > li > a:hover {
  color: var(--c-primary) !important;
  background: transparent !important;
}

/* Esconder link "Contato" duplicado (mobile) */
#contactMobile {
  display: none;
}

/* ===== Search (Home) ===== */
/* HelpScout base: #docsSearch{background:#F5F5F5} #searchBar{width:620px} button{position:absolute;top:24px;right:-1px;height:50px} */
#docsSearch {
  background: var(--c-bg) !important;
  border-bottom: 1px solid var(--c-border) !important;
  padding: 2.5em 0 !important;
}

#docsSearch h1 {
  font-family: var(--c-font) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  color: var(--c-fg) !important;
}

#searchBar input.search-query {
  font-family: var(--c-font) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius) 0 0 var(--c-radius) !important;
  font-size: 16px !important;
  background: var(--c-bg) !important;
  color: var(--c-fg) !important;
  box-shadow: none !important;
}

#searchBar input.search-query:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.1) !important;
}

#searchBar button {
  background: var(--c-primary) !important;
  border: none !important;
  border-radius: 0 var(--c-radius) var(--c-radius) 0 !important;
  color: white !important;
  text-shadow: none !important;
  font-family: var(--c-font) !important;
  font-weight: 600 !important;
}

#searchBar button:hover {
  background: var(--c-primary-hover) !important;
}

/* Sidebar search (pequeno) */
#sidebar #searchBar.sm {
  position: relative !important;
}

#sidebar #searchBar.sm input.search-query {
  font-size: 14px !important;
  height: 38px !important;
  border-radius: var(--c-radius) 0 0 var(--c-radius) !important;
  box-sizing: border-box !important;
}

#sidebar #searchBar.sm button {
  height: 38px !important;
  border-radius: 0 var(--c-radius) var(--c-radius) 0 !important;
  padding: 0 12px !important;
  top: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* Search dropdown */
#serp-dd {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

#serp-dd .result li.active,
#serp-dd .result li:hover {
  background: var(--c-primary-light) !important;
}

#serp-dd .result a:hover {
  color: var(--c-primary) !important;
}

/* ===== Home — Category Cards ===== */
/* HelpScout base: .category-list .category{display:inline-block;width:29%;border:1px solid #e0e0e0;padding:1.5em 1em} */
.category-list {
  text-align: center !important;
  max-width: 960px;
  margin: 0 auto !important;
}

.category-list .category {
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 1.5em 1.2em !important;
  transition: all 0.2s ease;
  cursor: pointer;
  background: var(--c-bg) !important;
}

.category-list .category:hover {
  border-color: rgba(126, 34, 206, 0.3) !important;
  box-shadow: 0 4px 12px rgba(126, 34, 206, 0.08) !important;
  transform: translateY(-2px);
  background: var(--c-bg) !important;
}

.category-list .category h3 {
  font-family: var(--c-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--c-fg) !important;
  margin: 0 0 4px 0 !important;
}

.category-list .category:hover h3 {
  color: var(--c-primary) !important;
}

.category-list .category .article-count {
  color: var(--c-muted) !important;
  font-size: 13px !important;
}

.category-list .category p:not(.article-count) {
  display: none !important;
}

/* ===== Content Wrapper ===== */
/* HelpScout base: .contentWrapper{background:#fff;border:1px solid #e9e5e5;padding:45px 46px} */
.contentWrapper {
  border-radius: 12px !important;
  border-color: var(--c-border) !important;
}

/* ===== Category Page — Header ===== */
/* HelpScout base: #categoryHead{position:relative} #categoryHead h1{margin-right:165px} #categoryHead .sort{position:absolute;right:0;top:8px} */
#categoryHead h1 {
  font-family: var(--c-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--c-fg) !important;
}

#categoryHead .sort select,
select#sortBy {
  font-family: var(--c-font) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
  background: var(--c-bg) !important;
  height: auto !important;
}

/* ===== Article List ===== */
/* HelpScout base: .articleList{font-size:1.3em} .articleList li{margin:1.4em 0;padding-left:25px} */
.articleList {
  font-size: 1em !important;
}

.articleList li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--c-border);
}

.articleList li:last-child {
  border-bottom: none;
}

.articleList li a {
  font-family: var(--c-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
  display: block !important;
  padding: 12px 8px !important;
  margin: 0 !important;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.articleList li a:hover {
  color: var(--c-primary) !important;
  background: var(--c-primary-light) !important;
}

.articleList li a i {
  opacity: 0.4;
  margin-right: 6px;
}

/* ===== Search Results Page (#serp) ===== */
/* HelpScout base: #serp .articleList>li{padding-left:25px} #serp .articleList>li a{font-size:18px;margin-left:-24px} */
#serp .articleList > li {
  padding-left: 0 !important;
}

#serp .articleList > li a {
  margin-left: 0 !important;
  font-size: 16px !important;
}

#serp .articleList > li p {
  font-family: var(--c-font) !important;
  font-size: 14px !important;
  color: var(--c-muted) !important;
  margin: 0 !important;
  padding: 0 8px 12px 8px !important;
  line-height: 1.5 !important;
}

/* ===== Sidebar ===== */
/* HelpScout base: Bootstrap 2 .span3 — NÃO alterar width/float */
#sidebar {
  font-family: var(--c-font) !important;
}

#sidebar h3 {
  font-family: var(--c-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--c-muted) !important;
  margin-bottom: 8px !important;
}

#sidebar ul.nav-list {
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  overflow: hidden !important;
}

#sidebar ul.nav-list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#sidebar ul.nav-list > li > a {
  font-family: var(--c-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-fg) !important;
  padding: 9px 12px !important;
  display: block !important;
  border-radius: 8px !important;
  transition: color 0.2s, background 0.2s;
  line-height: 1.4 !important;
}

#sidebar ul.nav-list > li > a:hover {
  color: var(--c-primary) !important;
  background: var(--c-primary-light) !important;
}

#sidebar ul.nav-list > li.active > a {
  color: var(--c-primary) !important;
  background: var(--c-primary-muted) !important;
  font-weight: 600 !important;
}

#sidebar ul.nav-list > li > a > i.icon-arrow {
  opacity: 0.3;
}

#sidebar ul.nav-list > li.active > a > i.icon-arrow {
  opacity: 0.7;
}

/* ===== Article ===== */
/* HelpScout base: #fullArticle{font-size:14px;color:#585858;line-height:1.55em} */
/* HelpScout inline: #fullArticle, #fullArticle p, ... { color:#585858; } */
#fullArticle {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--c-fg) !important;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--c-fg) !important;
  font-family: var(--c-font) !important;
}

#fullArticle h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--c-border) !important;
}

#fullArticle h2 {
  font-size: 20px !important;
  margin-top: 2em !important;
  margin-bottom: 0.5em !important;
}

#fullArticle h3 {
  font-size: 17px !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.4em !important;
}

#fullArticle ul,
#fullArticle ol {
  padding-left: 1.75em !important;
  margin-bottom: 1em;
}

#fullArticle ul {
  list-style-type: disc !important;
}

#fullArticle ol {
  list-style-type: decimal !important;
}

#fullArticle li {
  margin-bottom: 0.4em;
}

#fullArticle strong,
#fullArticle b {
  font-weight: 600;
  color: var(--c-fg) !important;
}

/* Print button — manter position: absolute do HelpScout base */
#fullArticle .printArticle {
  color: var(--c-muted) !important;
  opacity: 0.4;
  transition: opacity 0.2s;
}

#fullArticle .printArticle:hover {
  opacity: 1;
  color: var(--c-primary) !important;
}

/* ===== Code Blocks ===== */
#fullArticle pre {
  background: var(--c-bg-muted) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius) !important;
  padding: 16px 20px !important;
  margin: 0.5em 0 1.5em 0 !important;
  overflow-x: auto;
}

#fullArticle pre code {
  font-family: var(--c-font) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--c-fg) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  font-weight: 400;
}

/* Inline code */
#fullArticle code {
  font-family: var(--c-font) !important;
  font-size: 0.875em;
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-weight: 500;
}

/* ===== Callouts (inline style divs) ===== */
#fullArticle div[style*="border-left"] {
  border-radius: var(--c-radius) !important;
}

#fullArticle div[style*="border-left"] > p:last-child {
  margin-bottom: 0 !important;
}

#fullArticle .callout,
#fullArticle div[class*="callout"] {
  border-radius: var(--c-radius) !important;
  padding: 14px 18px !important;
  margin: 1em 0 1.5em 0 !important;
  border: none !important;
  background: var(--c-primary-light) !important;
  border-left: 4px solid var(--c-primary) !important;
}

#fullArticle .callout > p:last-child,
#fullArticle div[class*="callout"] > p:last-child {
  margin-bottom: 0 !important;
}

#fullArticle .callout--warning,
#fullArticle .callout-warning {
  background: #fffbeb !important;
  border-left-color: #f59e0b !important;
}

/* ===== Images ===== */
#fullArticle img {
  max-width: 100%;
  height: auto;
  border-radius: var(--c-radius);
}

/* ===== Tables ===== */
#fullArticle table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius) !important;
  overflow: hidden;
  margin: 1em 0 1.5em 0 !important;
}

#fullArticle table th {
  background: var(--c-bg-muted) !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid var(--c-border) !important;
  color: var(--c-fg) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#fullArticle table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--c-border) !important;
  font-size: 14px !important;
}

#fullArticle table tbody tr:hover {
  background: var(--c-primary-light) !important;
}

/* ===== Article Ratings ===== */
/* HelpScout base: .articleRatings{display:flex;align-items:center;justify-content:center} — JA É FLEX */
/* HelpScout base: .rateAction{width:28px;height:28px;border-radius:50%} */
.articleRatings {
  border-color: var(--c-border) !important;
  background: var(--c-bg) !important;
  font-family: var(--c-font) !important;
}

.articleRatings-question {
  color: var(--c-fg) !important;
  font-weight: 500 !important;
}

.rateAction {
  background: #E3E8EB !important;
  transition: all 0.2s ease-in-out !important;
}

.rateAction:not([disabled]):hover {
  background: var(--c-primary-light) !important;
  box-shadow: 0 4px 7px 0 rgba(126, 34, 206, 0.2) !important;
}

/* ===== Article Footer ===== */
/* HelpScout base: .articleFoot p,.articleFoot time{display:inline-block} .articleFoot time.lu{float:right} */
.articleFoot {
  font-family: var(--c-font) !important;
}

.articleFoot p,
.articleFoot time {
  color: var(--c-muted) !important;
  font-family: var(--c-font) !important;
  font-style: normal !important;
}

.articleFoot a {
  color: var(--c-primary) !important;
}

/* ===== Footer — esconder completamente ===== */
footer {
  display: none !important;
}

/* ===== Inputs e Selects ===== */
input, textarea, select, button {
  font-family: var(--c-font) !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .navbar .brand img {
    height: 28px !important;
  }

  #fullArticle {
    font-size: 15px !important;
  }
}