/*
Theme Name: Monobase Child
Template: monobase
Version: 1.0
*/

/* =========================
   BASE
========================= */

html,
body {
  background: #ffffff !important;
  transition: none !important;
}

/* =========================
   FUNDO QUADRICULADO
========================= */

.paper-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #ffffff;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(120, 120, 120, 0.04) 0,
      rgba(120, 120, 120, 0.04) 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(120, 120, 120, 0.04) 0,
      rgba(120, 120, 120, 0.04) 1px,
      transparent 1px,
      transparent 32px
    );
}

body > *:not(.paper-bg) {
  position: relative;
  z-index: 1;
}

/* =========================
   MANCHAS
========================= */

.stain {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  background-image:
    radial-gradient(
      ellipse at 48% 52%,
      #ffffff 0 40%,
      rgba(255, 255, 255, 0.96) 55%,
      rgba(255, 255, 255, 0) 75%
    ),
    radial-gradient(
      ellipse at 30% 35%,
      rgba(255, 255, 255, 0.92) 0 20%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 70% 65%,
      rgba(255, 255, 255, 0.9) 0 20%,
      transparent 40%
    );
}

.s1 {
  width: 35vw;
  height: 20vw;
  left: 5vw;
  top: 10vh;
  animation: drift1 28s ease-in-out infinite alternate;
}

.s2 {
  width: 22vw;
  height: 14vw;
  left: 70vw;
  top: 15vh;
  animation: drift2 34s ease-in-out infinite alternate;
}

.s3 {
  width: 38vw;
  height: 22vw;
  left: 3vw;
  top: 60vh;
  animation: drift3 30s ease-in-out infinite alternate;
}

.s4 {
  width: 25vw;
  height: 15vw;
  left: 72vw;
  top: 70vh;
  animation: drift4 36s ease-in-out infinite alternate;
}

.s5 {
  width: 30vw;
  height: 18vw;
  left: 45vw;
  top: 80vh;
  animation: drift5 40s ease-in-out infinite alternate;
}

@keyframes drift1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3vw, 1vh) scale(1.02); }
}

@keyframes drift2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3vw, 1.5vh); }
}

@keyframes drift3 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(2vw, -2vh); }
}

@keyframes drift4 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2vw, -1vh); }
}

@keyframes drift5 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(1.5vw, 2vh); }
}

/* =========================
   SIDEBAR
========================= */

.site-sidebar,
aside {
  width: 220px !important;
  min-width: 220px !important;
}

.site-main,
main {
  margin-left: 220px !important;
}

.site-sidebar,
.site-sidebar *,
aside,
aside * {
  border: none !important;
}

.site-sidebar li,
.site-sidebar a {
  border: none !important;
}

.site-sidebar a {
  display: block;
  padding: 8px 0;
  transition: none !important;
}

/* item ativo do menu */
.site-sidebar .current-menu-item a,
.site-sidebar .current_page_item a,
.site-sidebar a.active {
  background: transparent !important;
  color: #000000 !important;
}

/* hover do menu */
.site-sidebar a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* =========================
   HEADER / TOPO
========================= */

header,
.header,
.site-header,
.header-top {
  border: none !important;
}

* {
  border-color: transparent !important;
}

/* =========================
   DARK MODE
========================= */

/* neutraliza classes de dark mode */
.dark-mode,
[data-theme="dark"],
body.dark,
html.dark {
  background: #ffffff !important;
  color: inherit !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  /* Container principal vira coluna única */
  .site-box {
    display: block !important;
    width: 100% !important;
  }

  /* Esconde a sidebar por padrão no mobile */
  .site-sidebar {
    display: none !important;
  }

  /* Restaura o comportamento do tema quando o menu é aberto */
  body.menu-open .site-box .site-sidebar {
    display: flex !important;
  }

  body.menu-open .site-box .main-box {
    display: none !important;
  }

  /* Conteúdo ocupa tudo */
  .main-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* Título à esquerda */
  .entry-title,
  h1.entry-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  /* Texto justificado */
  .entry-content,
  .entry-content p {
    text-align: justify !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Galeria ocupa toda a largura */
  .wp-block-gallery,
  .gallery,
  .entry-content figure,
  .entry-content .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .wp-block-gallery img,
  .gallery img,
  .entry-content figure img {
    width: 100% !important;
    height: auto !important;
  }

}

/* esconde botão/ícone de dark mode */
.dark-mode-toggle,
.theme-toggle,
.color-mode-toggle,
.mode-toggle,
.toggle-dark-mode,
button[aria-label*="dark" i],
button[aria-label*="theme" i],
button[title*="dark" i],
button[title*="theme" i],
[aria-label*="dark mode" i],
[aria-label*="toggle theme" i] {
  display: none !important;
}