/* ============================================================
   ARQPEDIA — Override editorial cream/ink para 50 ferramentas
   Reescrita 2026-05-25c: agressivo, mata identidade Tailwind dark
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  --aq-cream:        #faf7f2;
  --aq-cream-2:      #f2ede5;
  --aq-cream-3:      #e8e3da;
  --aq-ink:          #1a1814;
  --aq-warm:         #5c5651;
  --aq-warm-2:       #8b8275;
  --aq-terracota:    #c4654e;
  --aq-terracota-2:  #a85440;
  --aq-line:         rgba(26, 24, 20, .08);

  /* Variáveis Tailwind/shadcn re-mapeadas */
  --background:           oklch(97% .008 70);
  --foreground:           oklch(15% .005 65);
  --card:                 #ffffff;
  --card-foreground:      oklch(15% .005 65);
  --popover:              #ffffff;
  --popover-foreground:   oklch(15% .005 65);
  --secondary:            oklch(94% .012 75);
  --secondary-foreground: oklch(25% .008 65);
  --muted:                oklch(94% .012 75);
  --muted-foreground:     oklch(42% .015 65);
  --accent:               oklch(91% .017 75);
  --accent-foreground:    oklch(15% .005 65);
  --border:               oklch(89% .013 75);
  --input:                oklch(94% .012 75);
  --primary:              oklch(53% .12 30);
  --primary-foreground:   oklch(99% .005 70);
  --ring:                 oklch(53% .12 30);
  --destructive:          oklch(57% .22 27);
  --destructive-foreground: #ffffff;

  --font-display:         'Fraunces', 'Tiempos Headline', Georgia, serif;
  --font-serif:           'Fraunces', Georgia, serif;
  --default-font-family:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ============ BASE ============ */
html, body {
  background-color: var(--aq-cream) !important;
  color: var(--aq-ink) !important;
}
body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 400;
  letter-spacing: -.011em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -.025em !important;
  color: var(--aq-ink) !important;
  font-weight: 400 !important;
}

/* ============ HEADER ============ */
header,
body > #root > div > header,
[role="banner"]:not(.aq-keep) {
  background-color: rgba(250, 247, 242, .88) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--aq-line) !important;
  color: var(--aq-ink) !important;
}
header img[alt*="ArqP"], header img[alt*="Arqp"] {
  height: 44px !important;
  width: auto !important;
}
header nav a {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  color: var(--aq-warm) !important;
  font-weight: 450 !important;
  font-size: .875rem !important;
}
header nav a:hover { color: var(--aq-ink) !important; }
/* Botão verde "Blog" no header → terracota */
header a[class*="bg-green"], header a[class*="bg-primary"],
header [class*="bg-emerald"], header [class*="bg-green"] {
  background-color: var(--aq-terracota) !important;
  color: #fff !important;
}

/* ============ BACKGROUNDS ============ */
.bg-background, [class*="bg-background"] {
  background-color: var(--aq-cream) !important;
}
.bg-card, [class*="bg-card"]:not(.bg-background) {
  background-color: #ffffff !important;
  border-color: var(--aq-line) !important;
}
.bg-muted, .bg-secondary, [class*="bg-muted"], [class*="bg-secondary"] {
  background-color: var(--aq-cream-2) !important;
}
.bg-accent, [class*="bg-accent"] {
  background-color: var(--aq-cream-3) !important;
}

/* ============ TEXTO ============ */
.text-foreground, [class*="text-foreground"] { color: var(--aq-ink) !important; }
.text-muted-foreground, [class*="text-muted-foreground"] { color: var(--aq-warm) !important; }
.text-card-foreground { color: var(--aq-ink) !important; }
.text-primary { color: var(--aq-terracota) !important; }

/* ============ BOTÕES ============ */
button {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  border-radius: 8px !important;
}
/* Botão primário: terracota com texto branco */
button.bg-primary, [class*="bg-primary"]:not(input) {
  background-color: var(--aq-terracota) !important;
  color: #ffffff !important;
}
button.bg-primary:hover { background-color: var(--aq-terracota-2) !important; }

/* Botões toggle (Laje/Viga/Pilar/Piso/Sapata): selected = terracota fill */
[role="group"] button[data-state="on"],
[role="group"] button[aria-pressed="true"],
[role="tablist"] button[data-state="active"] {
  background-color: var(--aq-terracota) !important;
  color: #fff !important;
  border-color: var(--aq-terracota) !important;
}
[role="group"] button[data-state="off"],
[role="group"] button[aria-pressed="false"],
[role="tablist"] button[data-state="inactive"] {
  background-color: var(--aq-cream-2) !important;
  color: var(--aq-ink) !important;
  border-color: var(--aq-line) !important;
}
/* Estado "selected" comum em ToggleGroup do shadcn */
button.bg-black, button[class*="bg-foreground"], button[class*="bg-zinc-9"], button[class*="bg-gray-9"] {
  background-color: var(--aq-terracota) !important;
  color: #fff !important;
}

/* Outline buttons */
button.border, button[class*="border-input"], button[class*="variant-outline"] {
  border-color: var(--aq-line) !important;
  background-color: #ffffff !important;
  color: var(--aq-ink) !important;
}

/* ============ INPUTS / SELECTS ============ */
input, select, textarea {
  background-color: #ffffff !important;
  color: var(--aq-ink) !important;
  border-color: var(--aq-line) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  border-radius: 8px !important;
}
input::placeholder, textarea::placeholder { color: var(--aq-warm-2) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--aq-terracota) !important;
  box-shadow: 0 0 0 3px rgba(196, 101, 78, .15) !important;
}

/* ============ CARDS / BORDAS ============ */
[class*="border-border"], [class*="border-input"] { border-color: var(--aq-line) !important; }
[class*="rounded-lg"], [class*="rounded-xl"] { border-radius: 12px !important; }
[class*="shadow-sm"], [class*="shadow"] { box-shadow: 0 1px 2px rgba(26, 24, 20, .04), 0 0 0 1px rgba(26, 24, 20, .04) !important; }

/* ============ LINKS ============ */
a { color: var(--aq-ink); }
a:hover { color: var(--aq-terracota); }

/* ============ BOTÃO ⌘K injetado por JS ============ */
.aq-cmdk-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--aq-cream-2) !important;
  border: 1px solid var(--aq-line) !important;
  border-radius: 999px !important;
  padding: 8px 12px 8px 14px !important;
  font-size: .8125rem !important;
  color: var(--aq-warm) !important;
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  transition: all .2s !important;
  cursor: pointer;
}
.aq-cmdk-btn:hover {
  background: var(--aq-cream-3) !important;
  color: var(--aq-ink) !important;
  border-color: var(--aq-ink-2) !important;
}
.aq-cmdk-btn svg { width: 14px; height: 14px; }
.aq-cmdk-label { font-weight: 400; }
.aq-cmdk-kbd {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .6875rem !important;
  background: rgba(26, 24, 20, .08) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: var(--aq-ink) !important;
}
@media (max-width: 760px) { .aq-cmdk-label, .aq-cmdk-kbd { display: none !important; } .aq-cmdk-btn { padding: 8px 10px !important; } }

/* ============ NAV UNIFICADA (injetada por JS) ============ */
.aq-unified-nav { display: flex !important; gap: 28px !important; align-items: center; }
.aq-unified-nav a, .aq-nav-link {
  font-family: 'Inter Tight', system-ui, sans-serif !important;
  font-size: .875rem !important;
  font-weight: 450 !important;
  color: var(--aq-warm) !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  transition: color .15s;
  padding: 0 !important;
  background: transparent !important;
}
.aq-unified-nav a:hover, .aq-nav-link:hover { color: var(--aq-ink) !important; }
.aq-unified-nav a.active, .aq-nav-link.active { color: var(--aq-ink) !important; font-weight: 500 !important; }
@media (max-width: 860px) { .aq-unified-nav { display: none !important; } }

/* ============ FOOTER UNIFICADO ============ */
footer, footer[class*="bg-"], [role="contentinfo"] {
  background-color: var(--aq-ink) !important;
  color: var(--aq-cream-2) !important;
  padding: 64px 0 32px !important;
}
.aq-unified-footer { font-family: 'Inter Tight', system-ui, sans-serif; }
.aq-footer-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px;
}
.aq-footer-brand p { color: var(--aq-warm-2) !important; font-size: .875rem; line-height: 1.55; max-width: 320px; margin-top: 16px; }
.aq-footer-logo img { height: 48px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.aq-footer-col h4 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .6875rem !important; font-weight: 500 !important;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--aq-warm-2) !important; margin-bottom: 16px;
}
.aq-footer-col ul { list-style: none; padding: 0; margin: 0; }
.aq-footer-col li { margin-bottom: 10px; }
.aq-footer-col a {
  color: var(--aq-cream-2) !important; opacity: .85;
  font-size: .875rem !important; font-weight: 400 !important;
  transition: opacity .15s, color .15s;
}
.aq-footer-col a:hover { opacity: 1; color: var(--aq-terracota) !important; }
.aq-footer-bottom {
  max-width: 1320px; margin: 48px auto 0; padding: 24px 32px 0;
  border-top: 1px solid rgba(250, 247, 242, .1);
  font-size: .75rem; color: var(--aq-warm-2);
}
@media (max-width: 860px) {
  .aq-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 20px; }
  .aq-footer-brand { grid-column: 1 / -1; }
  .aq-footer-bottom { padding: 24px 20px 0; }
}
@media (max-width: 480px) {
  .aq-footer-inner { grid-template-columns: 1fr; }
}

/* ============ BREADCRUMB ============ */
[aria-label="Breadcrumb"] a { color: var(--aq-warm) !important; }
[aria-label="Breadcrumb"] a:hover { color: var(--aq-ink) !important; }

/* ============ BADGES / CHIPS (não-botão) ============ */
span[class*="badge"], div[class*="badge"], span[class*="rounded-full"][class*="px-"]:not(button) {
  background-color: var(--aq-cream-3) !important;
  color: var(--aq-ink) !important;
}

/* ============ BOTÕES TOGGLE rounded-full ============ */
/* Selected (Laje/etc) — bg-primary tem maior especificidade */
button.bg-primary,
button[class*="bg-primary"],
a.bg-primary,
a[class*="bg-primary"] {
  background-color: var(--aq-terracota) !important;
  color: #ffffff !important;
  border-color: var(--aq-terracota) !important;
}
/* Não-selected */
button.bg-muted, button[class*="bg-muted"] {
  background-color: var(--aq-cream-2) !important;
  color: var(--aq-ink) !important;
}

/* ============ TOPBAR EDITORIAL injetado por JS ============ */
.aq-topbar {
  background: var(--aq-ink);
  color: var(--aq-cream-2);
  padding: 12px 0;
  text-align: center;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: -.01em;
  position: relative;
  z-index: 100;
}
.aq-topbar a {
  color: var(--aq-cream-2) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aq-topbar a:hover { color: #ffffff !important; }
.aq-topbar em {
  color: var(--aq-terracota);
  font-style: normal;
  font-weight: 500;
}
.aq-topbar .arrow { opacity: .6; transition: opacity .2s; }
.aq-topbar a:hover .arrow { opacity: 1; }

/* Esconde busca interna da ferramenta (substituída por ⌘K no header) */
header [type="search"],
header input[placeholder*="Buscar calculadora" i],
header form[role="search"],
header [data-loc*="Search"]:not([data-loc*="SearchButton"]) {
  display: none !important;
}

/* Esconde topbar interno do React + banner inline + PWA prompt */
[data-loc*="TopBar"],
[data-loc*="TopBanner"],
[data-loc*="MobflixBanner"],
[data-loc*="InstallPrompt"],
[data-loc*="PWAPrompt"],
[data-loc*="PWAInstall"],
div[class*="install"][class*="fixed"],
div[class*="from-slate-950"],
div.bg-gradient-to-r[class*="slate-9"],
aside[class*="install"] {
  display: none !important;
}
/* Banner Mobflix INLINE editorial — card premium */
main a[href*="mobflix.com.br"] {
  display: block !important;
  background: linear-gradient(135deg, #1a1814 0%, #2f2b25 100%) !important;
  color: #faf7f2 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  margin: 32px 0 !important;
  border: 1px solid rgba(196, 101, 78, .35) !important;
  transition: transform .25s, border-color .2s, box-shadow .25s !important;
  position: relative !important;
}
main a[href*="mobflix.com.br"]:hover {
  transform: translateY(-2px) !important;
  border-color: #c4654e !important;
  box-shadow: 0 16px 40px rgba(26, 24, 20, .2) !important;
}
.aq-mobflix-card { padding: 28px 32px; }
.aq-mob-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6875rem;
  color: #c4654e;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 12px;
}
.aq-mob-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-size: 1.625rem;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #faf7f2 !important;
  margin-bottom: 16px;
}
.aq-mob-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(250, 247, 242, .12);
  flex-wrap: wrap;
  gap: 12px;
}
.aq-mob-hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: rgba(250, 247, 242, .6);
  letter-spacing: .06em;
}
.aq-mob-cta {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: .9375rem;
  color: #faf7f2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aq-mob-cta .arrow { transition: transform .2s; display: inline-block; }
main a[href*="mobflix.com.br"]:hover .aq-mob-cta .arrow { transform: translateX(4px); }

/* ============ SCROLLBAR ============ */
* { scrollbar-color: var(--aq-warm-2) var(--aq-cream-2); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--aq-cream-2); }
*::-webkit-scrollbar-thumb { background: var(--aq-warm-2); border-radius: 4px; }