/*
Theme Name: Rookie Child
Template: rookie
Author: Majeed Panahi
Version: 1.0
*/

@import url("../rookie/style.css");

body,
#primary,
.entry-content,
.entry-title,
h1, h2, h3, p, a {
  transition: background-color 1s ease, color 1s ease, box-shadow 1s ease;

}

body.dark-mode {
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
}


/* Post Container Styling */
.single-post #primary {
  
  padding: 40px 30px;
  box-sizing: border-box;
  border-radius: 8px;
}
/* ✅ Shadow effect for post title */
.single-post .entry-title {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

/* ✅ Justify post content */
.single-post .entry-content p {
  text-align: justify;
  text-justify: inter-word;
}

.single-post #page,
.single-post .site,
.single-post .content-area,
.single-post #primary {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0;
  margin: 0;
}
.single-post .site {
  margin: 0 !important;
}

.single-post .entry-content {
  padding: 40px 5vw;
}

/* Dark mode codes */
.single-post.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.single-post.dark-mode #primary {
  background-color: #1e1e1e;
  border-radius: 8px;
}

.single-post.dark-mode .entry-title,
.single-post.dark-mode .entry-content {
  color: #ffffff;
}

.single-post.dark-mode a {
  color: #90caf9;
}
/*  EOF Dark mode codes */

/* Clean up extra shadows/borders in dark mode */
.single-post.dark-mode #primary,
.single-post.dark-mode .post,
.single-post.dark-mode .entry-content {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
.single-post .post,
.single-post .hentry,
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content > * {
  background: transparent !important;
}

.single-post .entry-content p {
  margin-bottom: 1.2em; /* or adjust to taste */
  padding: 0;
  border: none;
}
/* 🌙 Dark Mode Enhanced Styling */
body.dark-mode.single-post {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode.single-post #primary,
body.dark-mode.single-post .site,
body.dark-mode.single-post .content-area {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

body.dark-mode.single-post .entry-content,
body.dark-mode.single-post .entry-content p,
body.dark-mode.single-post .post,
body.dark-mode.single-post .hentry,
body.dark-mode.single-post .entry-title {
  background-color: transparent !important;
  color: #e0e0e0 !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.dark-mode.single-post h1,
body.dark-mode.single-post h2,
body.dark-mode.single-post h3 {
  color: #ffffff !important;
}

.single-post #secondary,
.single-post .sidebar,
.single-post .widget-area,
.single-post .site-sidebar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
}
.single-post .content-area {
  grid-template-columns: 1fr !important;
  display: block !important;
}

/* Toggle Switch Styling */
.dark-toggle-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
.dark-toggle-switch input {
  display: none;
}
.dark-toggle-switch .slider {
  width: 50px;
  height: 28px;
  background-color: #ccc;
  display: block;
  border-radius: 30px;
  position: relative;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.dark-toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fff;
  top: 4px;
  left: 4px;
  transition: transform 0.3s ease;
}

/* When Dark Mode is active */
body.dark-mode .dark-toggle-switch .slider {
  background-color: #444;
}
body.dark-mode .dark-toggle-switch .slider::before {
  transform: translateX(22px);
}
body.dark-mode.single-post .entry-content,
body.dark-mode.single-post .elementor,
body.dark-mode.single-post .elementor-section,
body.dark-mode.single-post .elementor-widget-container {
  background-color: transparent !important;
  color: #e0e0e0 !important;
}

