/* Estilos exclusivos para single.php - Falabetinho Fluent */

.single-post-article {
  background: var(--body-bg, #fff);
  border-radius: var(--corner-radius-large, 8px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 2rem;
  margin: 2rem 0;
  max-width: 800px;
}
.single-post-header {
  margin: 2rem 0;
  font-size: 3rem;
}
.single-post-title {
  font-size: 4.2rem;
  margin: 0 0 0.5rem 0;
  color: var(--header-text-light, #ffffff);
}
@media (max-width: 600px) {
  .single-post-title {
    font-size: 2.1rem;
  }
}
.single-post-meta {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 0.5rem;
}
.single-post-thumb {
  margin: 1.5rem 0;
  text-align: center;
}
.single-post-thumb img {
  border-radius: var(--corner-radius-xlarge, 4px);
  max-width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.single-post-content {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--body-text, #2d1a4d);
}
.single-post-footer {
  border-top: 1px solid #eee;
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.95rem;
  color: #666;
}
.single-post-tags {
  margin-left: 1rem;
  color: #7E57C2;
}

/* Área de widget (aside) - visível apenas em desktop */
@media (max-width: 1023px) {
  aside[aria-label="single-widget"] {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  aside[aria-label="single-widget"] {
    display: block !important;
  }
}

/* Drawer de widgets para tablet/mobile */
.widget-drawer-backdrop {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,22,54,0.32);
}
.widget-drawer {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  width: 90vw;
  max-width: 320px;
  height: 100vh;
  background: var(--menu-bg, #fff);
  box-shadow: -4px 0 24px rgba(0,0,0,0.16);
  border-radius: 16px 0 0 16px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.widget-drawer.open {
  display: block;
  transform: translateX(0);
}
.widget-drawer-backdrop.open {
  display: block;
}

/* Botão mostrar widgets (tablet/mobile) */
.show-widgets-btn {
  display: none;
}
@media (max-width: 1023px) {
  .show-widgets-btn {
    display: block;
  }
}