/* === Nattus theme switcher === */
html, body{ transition: background-color .35s ease, color .35s ease; }

html.theme-light{
  --ink:#E2E1DD;
  --ink-2:#D7D6D1;
  --ink-3:#CCCBC6;
  --off:#111111;
  --muted:rgba(17,17,17,.62);
  --faint:rgba(17,17,17,.36);
  --line:rgba(17,17,17,.12);
  --line-2:rgba(17,17,17,.20);
}

/* Nav backgrounds use literal rgba in original CSS — override per theme */
html.theme-light nav.scrolled{ background:rgba(226,225,221,.78)!important; }
@media(max-width:880px){
  html.theme-light .nav-links{ background:rgba(226,225,221,.97)!important; }
}

/* Cursor spotlight: only in dark theme */
html.theme-light .spotlight{ display:none!important; }

/* Logos (monochrome offwhite source) — invert to dark in light theme */
html.theme-light .brand-logo{ filter: invert(1) brightness(.12)!important; }

/* Hero bulb in light theme: dark icon, dark glow */
html.theme-light .hero-bulb .bulb-img{
  filter: invert(1) brightness(.15);
  opacity:.45;
}
html.theme-light .hero-bulb .bulb-glow{
  background: radial-gradient(circle, rgba(17,17,17,.22), transparent 70%)!important;
}
html.theme-light .hero-bulb:hover .bulb-img{
  opacity:1;
  filter: invert(1) brightness(0) drop-shadow(0 0 22px rgba(17,17,17,.45));
  animation: bulbFlickLight .5s ease-out;
}
html.theme-light .hero-bulb:hover .bulb-glow{ opacity:1!important; }
@keyframes bulbFlickLight{
  0%   { filter: invert(1) brightness(0) drop-shadow(0 0 22px rgba(17,17,17,.45)); }
  40%  { filter: invert(1) brightness(.05) drop-shadow(0 0 30px rgba(17,17,17,.6)); }
  100% { filter: invert(1) brightness(0) drop-shadow(0 0 22px rgba(17,17,17,.45)); }
}
@media(prefers-reduced-motion:reduce){
  html.theme-light .hero-bulb:hover .bulb-img{ animation:none; }
}
@media(max-width:880px){
  html.theme-light .hero-bulb .bulb-img{
    opacity:1;
    filter: invert(1) brightness(0) drop-shadow(0 0 22px rgba(17,17,17,.45));
  }
  html.theme-light .hero-bulb .bulb-glow{ opacity:1!important; }
}

/* Theme toggle button */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;color:var(--off);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  padding:0;
}
.theme-toggle:hover{ background:var(--off); color:var(--ink); border-color:var(--off); }
.theme-toggle svg{ width:16px; height:16px; display:block; }
.theme-toggle .icon-sun{ display:none; }
html.theme-light .theme-toggle .icon-sun{ display:block; }
html.theme-light .theme-toggle .icon-moon{ display:none; }
@media(max-width:880px){
  .theme-toggle{ width:44px;height:44px; }
  .theme-toggle svg{ width:18px;height:18px; }
}

/* Remove nav-link underline pseudo from buttons (they're <a class="btn">) */
.nav-links a.btn::after{ display:none!important; }

/* === Reservar button — guaranteed contrast in both themes === */
.nav-links a.btn.btn--rose,
html.theme-dark .nav-links a.btn.btn--rose{
  background:#E2E1DD!important;
  color:#111111!important;
  border-color:#E2E1DD!important;
}
.nav-links a.btn.btn--rose:hover,
html.theme-dark .nav-links a.btn.btn--rose:hover{
  background:transparent!important;
  color:#E2E1DD!important;
  border-color:#E2E1DD!important;
}
html.theme-light .nav-links a.btn.btn--rose{
  background:#111111!important;
  color:#E2E1DD!important;
  border-color:#111111!important;
}
html.theme-light .nav-links a.btn.btn--rose:hover{
  background:transparent!important;
  color:#111111!important;
  border-color:#111111!important;
}

/* Underline (::after) only on text nav links, never on buttons */
.nav-links a.btn::after,
.nav-links a.btn.btn--rose::after{ display:none!important; content:none!important; }

/* Theme toggle focus ring — no blue, use theme color */
.theme-toggle{ outline:none!important; }
.theme-toggle:focus{ outline:none!important; }
.theme-toggle:focus-visible{
  outline:2px solid var(--off)!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

/* === Inline SVG logo + bulb: use currentColor instead of invert filter === */
svg.brand-logo{ color: var(--off); filter: none !important; height:42px; width:auto; display:block; }
nav.scrolled svg.brand-logo{ height:34px; }
svg.brand-logo.brand-logo--footer{ height:72px; }
html.theme-light svg.brand-logo{ color: var(--off); filter: none !important; }

.hero-bulb{ color: var(--off); }
html.theme-light .hero-bulb{ color: var(--off); }
/* Override PNG-era invert filters for the SVG bulb */
html.theme-light .hero-bulb svg.bulb-img,
html.theme-light .hero-bulb:hover svg.bulb-img{
  filter: none !important;
}
html.theme-light .hero-bulb:hover svg.bulb-img{
  filter: drop-shadow(0 0 22px rgba(17,17,17,.55)) !important;
}
@media(max-width:880px){
  html.theme-light .hero-bulb svg.bulb-img{
    filter: drop-shadow(0 0 22px rgba(17,17,17,.45)) !important;
    opacity:1;
  }
}

/* === Brand logo (real PNG, theme-swapped) === */
.brand-logo-wrap{ display:inline-block; line-height:0; }
.brand-logo-wrap .brand-logo{ height:42px; width:auto; display:block; object-fit:contain; filter:none !important; }
nav.scrolled .brand-logo-wrap .brand-logo{ height:34px; }
.brand-logo-wrap.brand-logo--footer .brand-logo{ height:90px; }
/* Dark theme → show offwhite (light) logo */
.brand-logo-wrap .brand-logo--dark{ display:none; }
html.theme-light .brand-logo-wrap .brand-logo--light{ display:none; }
html.theme-light .brand-logo-wrap .brand-logo--dark{ display:block; }

/* === Padroniza hero "invertido" (sobre.html) para seguir o tema === */
.hero{ background: var(--ink) !important; color: var(--off) !important; }
.hero .label,
.hero h1,
.hero p{ color: var(--off) !important; }
.hero h1 em{ color: var(--muted) !important; }
.hero-mark svg{ stroke: var(--off) !important; }

/* === Nav: neutraliza "on-light" agora que hero segue o tema === */
nav.on-light:not(.scrolled) .brand,
nav.on-light:not(.scrolled) .nav-links a,
nav.on-light:not(.scrolled) .menu-toggle{ color: var(--off) !important; }
nav.on-light:not(.scrolled) .nav-links a{ color: rgba(226,225,221,.7) !important; }
nav.on-light:not(.scrolled) .nav-links a:hover{ color: var(--off) !important; }
html.theme-light nav.on-light:not(.scrolled) .nav-links a{ color: rgba(17,17,17,.6) !important; }
nav.on-light:not(.scrolled) .brand-logo{ filter: none !important; }

/* === Padroniza cards/botões rosa para seguir o tema (mantém "ideia." em rosa) === */
.ccard.wa,
.ccard.wa:hover{
  background: var(--off) !important;
  border-color: var(--off) !important;
  color: var(--ink) !important;
}
.ccard.wa h4, .ccard.wa p{ color: var(--ink) !important; }
.btn--solid{
  background: var(--off) !important;
  color: var(--ink) !important;
  border-color: var(--off) !important;
}
.btn--solid:hover{
  background: transparent !important;
  color: var(--off) !important;
  border-color: var(--off) !important;
}
.fab-wa{
  background: var(--off) !important;
  border-color: var(--off) !important;
  color: var(--ink) !important;
}

/* === Mobile: lâmpada não pode sobrepor o texto do hero === */
@media(max-width:880px){
  .hero-bulb{
    position:absolute !important;
    top:auto !important;
    bottom:6% !important;
    right:-14% !important;
    width:54vw !important;
    opacity:.18 !important;
    z-index:0 !important;
    pointer-events:none;
  }
  .hero-bulb .bulb-img{ opacity:.18 !important; filter:none !important; }
  .hero-bulb .bulb-glow{ opacity:0 !important; }
  .hero > *:not(.hero-bulb){ position:relative; z-index:1; }
}