/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
#breadcrumbs {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #6e4f9c; /* lilac-purple */
  background: #f8f2ff;
  padding: 12px 20px;
  border-radius: 30px;
  margin: 20px auto;
  max-width: 100%;
  box-shadow: 0 4px 10px rgba(110, 79, 156, 0.1);
  display: inline-block;
  position: relative;
  animation: fadeInBreadcrumbs 0.8s ease-in-out;
}

#breadcrumbs a {
  color: #a172d1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

#breadcrumbs a:hover {
  color: #884ccf;
  text-decoration: underline;
}

#breadcrumbs span {
  margin: 0 5px;
  color: #999;
  font-weight: 300;
}

/* Animation for breadcrumb fade-in */
@keyframes fadeInBreadcrumbs {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#ez-toc-container, 
.ez-toc-widget-container, 
#toc_container, 
.lwptoc, 
.lwptoc_i {
  text-align: left !important;
  margin: 1em 0;
}

.header-top, .header-menu {
  position: sticky;
  z-index: 9999;
  background: white;
}

.header-top {
  top: 0;
}

.header-menu {
  top: 105.5px; }

.post-tags {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
}

.post-tags a {
  background: #eee;
  padding: 6px 12px;
  margin: 4px;
  display: inline-block;
  border-radius: 20px;
  text-decoration: none;
  color: #444;
  font-size: 20px;
}

.post-tags a:hover {
  background-color: #d7c1ff;
  color: #000;
}

button,
.wp-block-button__link,
.btn-primary,
input[type="submit"],
a.button,
.button {
  background-color: #d8b4fe !important; /* Light lilac */
  color: #3b0764 !important; /* Deep plum text */
  font-family: 'Merriweather', serif !important;
  font-weight: bold;
  border: none;
  padding: 10px 22px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(123, 85, 200, 0.2);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-block;
}

button:hover,
.wp-block-button__link:hover,
.btn-primary:hover,
input[type="submit"]:hover,
a.button:hover,
.button:hover {
  background-color: #c084fc !important; /* Darker lilac */
  color: #fff !important;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(91, 44, 180, 0.3);
}
.archive .post,
.tag .post,
.category .post {
  margin-bottom: 30px; 
	margin-left: 85px;
	width: calc(33.333% - 5px);
  padding: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.archive .post img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.archive .post p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive .post img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
  .post-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.2s ease;
  }

  .post-card:hover {
    transform: translateY(-6px);
  }

  .post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .post-content {
    padding: 30px;
  }

  .post-title {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .post-excerpt {
    font-size: 0.95em;
    color: #444;
    line-height: 1.5;
  }

@media only screen and (max-width: 768px) {
  .blog .ast-row,
  .archive .ast-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }

  .blog .ast-row article,
  .archive .ast-row article {
    width: 100% !important;
    margin: 0 auto;
    display: block;
  }
  .blog .ast-row,
  .archive .ast-row {
    flex-direction: unset !important;
  }
}

.kdrama-message {
  background: #f6f0fa; /* pastel lilac */
  border: 2px dashed #d9b8f4;
  border-radius: 20px;
  padding: 30px;
  font-family: 'Merriweather', sans-serif;
  color: #5c4170;
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: center;
  box-shadow: 0 4px 10px rgba(183, 145, 209, 0.2);
  margin-top: 40px;
  margin-bottom: 40px;
  transition: all 0.3s ease;
}

.kdrama-message:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 20px rgba(183, 145, 209, 0.3);
}

.kdrama-message h2 {
  font-size: 2rem;
  color: #9c6cd8;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 1px 1px #eee;
}

.kdrama-message p {
  margin: 0;
}

/* Cherry Blossom Orbit Loader */
.petal-loader {
  position: fixed;
  top: 70%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
}

.petal {
  width: 20px;
  height: 30px;
  background: #d9b8f4; /* lilac tone */
  border-radius: 50% 50% 50% 0;
  position: absolute;
  opacity: 0.8;
  transform-origin: 34px 34px;
  animation: orbit 1.5s linear infinite;
  box-shadow: 0 2px 6px rgba(217, 184, 244, 0.5);
}

/* Orbit Timing for 5 petals */
.petal1 { transform: rotate(0deg) translateX(34px); animation-delay: 0s; }
.petal2 { transform: rotate(72deg) translateX(34px); animation-delay: 0.15s; }
.petal3 { transform: rotate(144deg) translateX(34px); animation-delay: 0.3s; }
.petal4 { transform: rotate(216deg) translateX(34px); animation-delay: 0.45s; }
.petal5 { transform: rotate(288deg) translateX(34px); animation-delay: 0.6s; }

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(34px);
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) translateX(34px);
    opacity: 0.7;
  }
}

/* === Base style for all menu links === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li > a {
  position: relative !important;
  padding: 0.5em 1em !important;
  color: #422a5e !important;
  transition: color 0.3s ease !important;
}

/* === Default hidden underline === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li > a::after {
  content: "" !important;
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.4s ease;
}

/* === Active link glow underline === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li.current-menu-item > a::after,
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li.current_page_item > a::after {
  background: #d9b8f4;
  opacity: 1;
	height: 7px;
  box-shadow: 0 0 6px #d9b8f4, 0 0 12px #e7d0f8;
}
/* === Only show dot for current (active) page === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li.current-menu-item > a::after,
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li.current_page_item > a::after {
  opacity: 1;
}

/* === Base menu link styling === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li > a {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  color: #422a5e;
  transition: color 0.3s ease;
  text-decoration: none;
  overflow: hidden;
}

/* === Create the hidden underline === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #d9b8f4;
  transition: width 0.4s ease, left 0.4s ease;
  transform: translateX(-50%);
}

/* === Expand underline from center on hover === */
#ast-desktop-header .site-header-primary-section-left .main-header-menu > li > a:hover::after {
  width: 100%;
  left: 50%;
}

body {
  cursor: url('https://kdramawave.com/wp-content/uploads/2025/06/cursor.png') 16 16, auto;
}

.site-description {
  background: linear-gradient(90deg, #ba8ec5, #eac6f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.site-title {
  position: relative;
  display: inline-block;
  animation: heartbeat 3s infinite ease-in-out;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.site-branding:hover img {
  transform: scale(1.05) rotate(-1deg);
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 6px #c38ed7); /* lilac glow */
}

.site-title:hover {
  color: #c38ed7;
  text-shadow: 0 0 5px #e3d1ef;
  transition: all 0.3s ease;
}


/* 🎀 Comment Box Styling */
.comment-form-comment textarea {
  background: #fcf7ff;
  border: 2px solid #e2c4f7;
  padding: 15px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(195, 142, 215, 0.1);
  transition: all 0.3s ease;
}

.comment-form-comment textarea:focus {
  border-color: #c38ed7;
  box-shadow: 0 0 10px #e2c4f7;
  background-color: #fff9ff;
  outline: none;
}

/* 🌸 Placeholder Styling */
.comment-form-comment textarea::placeholder {
  color: #aa85b9;
  font-style: italic;
}

/* 💌 Checkbox styling */
.comment-form .comment-form-cookies-consent label {
  font-size: 15px;
  color: #5b375c;
}

/* 💜 Button Styling */
.comment-form input[type="submit"] {
  background: linear-gradient(135deg, #d4a0f3, #c38ed7);
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 15px;
  color: white;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(195, 142, 215, 0.3);
  transition: all 0.3s ease;
}

.comment-form input[type="submit"]:hover {
  background: linear-gradient(135deg, #c38ed7, #ba8ec5);
  box-shadow: 0 8px 25px rgba(195, 142, 215, 0.5);
  transform: translateY(-2px);
}
.comment-form-comment textarea {
  animation: floatUp 0.8s ease-out;
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-lilac {
  background: linear-gradient(135deg, #d4a0f3, #c38ed7);
  padding: 0.8em 2em;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(195,142,215,0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-lilac:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(195,142,215,0.5);
}

.entry-header .entry-title {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.entry-header .entry-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #d9b8f4;
  border-radius: 2px;
  transition: width 0.4s ease, left 0.4s ease;
}

.entry-header .entry-title:hover::after {
  width: 100%;
  left: 0;
}

.entry-header .entry-title {
  text-shadow: 
    0 5px 0 #fff,
    0 6px 15px rgba(217, 184, 244, 0.7);
}

/* Only apply drop-cap on single blog post pages */
.single-post .entry-content > p:first-of-type::first-letter,
.single .entry-content > p:first-of-type::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 1;
  margin-right: 0.15em;
  color: #ba8ec5;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

/* Automatically highlight any underlined text in lilac */
.entry-content u,
.page-content u,
.post-content u {
  /* Remove the default underline */
  text-decoration: none !important;

  /* Lilac highlight */
  background-color: rgba(234, 198, 245, 0.4);
  padding: 0.05em 0.15em;
  border-radius: 3px;

  /* Keep text color the same (or override if desired) */
  color: inherit;
  transition: background-color 0.3s ease;
}

/* Optional: darker highlight on hover */
.entry-content u:hover,
.page-content u:hover,
.post-content u:hover {
  background-color: rgba(234, 198, 245, 0.6);
}

/* Stylish Lilac Blockquote Box */
blockquote {
  background-color: #f3e8f9; /* soft lilac */
  border-left: 4px solid #d1a3e8; /* deeper lilac border */
  margin: 2em auto;
  padding: 1.2em 2em;
  font-style: italic;
  font-size: 1.15em;
  color: #4a004e;
  max-width: 750px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(209, 163, 232, 0.2);
}

/* Optional: style citation inside blockquote if used */
blockquote cite {
  display: block;
  margin-top: 1em;
  font-style: normal;
  font-size: 0.9em;
  color: #6a357d;
}

/* Apply to all post images */
.entry-content img {
  display: block;
  margin: 2em auto;
  padding: 1em;
  background-color: #f8f4fb; /* Soft lilac canvas */
  border: 1px solid #e2d2f2;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(150, 130, 180, 0.15);
  max-width: 100%;
  transition: transform 0.3s ease;
}

.entry-content img {
  display: block;
  margin: 2em auto;
  border: 3px dotted #e0c9f7;
  padding: 8px;
  border-radius: 10px;
  background-color: #fdfaff;
  transition: transform 0.3s ease;
}

.entry-content img:hover {
  transform: scale(1.015);
}

.kdrama-outro {
  background: #f9f5fc;
  border-left: 5px solid #caa8f5;
  padding: 1.5em;
  margin-top: 3em;
  border-radius: 10px;
  font-family: 'Merriweather', sans-serif;
  color: #5c406d;
  box-shadow: 0 8px 20px rgba(200, 170, 245, 0.1);
}

.kdrama-outro h3 {
  font-size: 1.3em;
  margin-bottom: 0.6em;
  color: #7e4aa8;
}

.kdrama-outro p {
  margin: 0.6em 0;
  font-size: 1em;
  line-height: 1.6;
}

.kdrama-outro .quote {
  font-style: italic;
  text-align: center;
  color: #9b75c3;
  font-size: 1.05em;
}
.kdrama-preview-box {
  background: linear-gradient(145deg, #fdf8ff, #f3e9fb);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(190, 140, 255, 0.12);
  padding: 2.5em 2em;
  margin: 4em auto 2em;
  max-width: 800px;
  font-family: 'Pretendard', 'Segoe UI', sans-serif;
  position: relative;
  overflow: hidden;
  color: #4c3564;
  animation: fadeIn 1.5s ease-out;
}

.kdrama-preview-box::before {
  content: "";
  background: url('https://i.ibb.co/vvrTRRZ/korean-brush-stroke.png') no-repeat center center;
  opacity: 0.05;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  pointer-events: none;
}

.kdrama-preview-box h3 {
  font-size: 1.5em;
  margin-bottom: 1em;
  color: #8b5fbf;
  text-align: center;
}

.kdrama-preview-box .quote {
  font-style: italic;
  font-size: 1.2em;
  color: #6e4d94;
  text-align: center;
  margin-bottom: 1.5em;
}

.kdrama-preview-box .actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.kdrama-preview-box .actions button {
  background: #dfc5f8;
  border: none;
  border-radius: 30px;
  padding: 0.7em 1.5em;
  color: #5b3d78;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.kdrama-preview-box .actions button:hover {
  background: #e8d4fa;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHh0YWhzbDR2dGI1aTRxbzl0Nngwd29ndnZla3pyYWZva3J3emptNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1BQyCn2V0rrr2/giphy.gif') repeat;
  opacity: 0.03;
  z-index: 1;
}

/* Base Mood Outro Styles */
.mood-outro {
  padding: 1.5em;
  margin-top: 2em;
  border-radius: 14px;
  font-size: 1.15em;
  text-align: center;
  transition: all 0.4s ease-in-out;
}

/* ROMANCE */
.mood-outro.romance {
  background: linear-gradient(145deg, #fff0f6, #f9e6ff);
  border-radius: 1.8rem;
  box-shadow: 0 12px 45px rgba(215, 155, 230, 0.15);
  padding: 2.5rem;
  text-align: center;
  color: #5e3b70;
  position: relative;
  margin-top: 4rem;
  overflow: hidden;
  font-family: 'Dancing Script', cursive;
  animation: glowFadeIn 1s ease-in-out;
}

.mood-outro.romance h3 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: #9d4edd;
}

.mood-outro.romance p.quote {
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: 1.6rem;
}

.mood-outro.romance .links a {
  display: inline-block;
  margin: 0.5rem 0.7rem;
  padding: 0.6rem 1.3rem;
  background: #eac8ff;
  border-radius: 25px;
  font-weight: 600;
  color: #5e3b70;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

.mood-outro.romance .links a:hover {
  background: #f1daff;
}

.mood-outro.romance::before,
.mood-outro.romance::after {
  content: "\1F497";
  position: absolute;
  font-size: 1.5em;
  animation: floatHearts 6s infinite ease-in-out;
  opacity: 0.3;
}

.mood-outro.romance::before {
  top: 10px; left: 20px;
}

.mood-outro.romance::after {
  bottom: 10px; right: 20px;
}

@keyframes glowFadeIn {
  from { opacity: 0; text-shadow: none; }
  to { opacity: 1; text-shadow: 0 0 5px #f06292; }
}

@keyframes floatHearts {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* THRILLER */
.mood-outro.thriller {
  background: radial-gradient(circle at center, #1a1a1a, #000000);
  color: #fefefe;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 25px rgba(255, 0, 107, 0.2);
  margin-top: 4rem;
  font-weight: bold;
  animation: pulse 2s infinite;
  text-shadow: 0 0 2px #000;
}

.mood-outro.thriller h3 {
  font-size: 1.7rem;
  color: #ff6f91;
}

.mood-outro.thriller .quote {
  font-style: italic;
  font-size: 1.2rem;
  margin: 1rem 0;
}

.mood-outro.thriller .cta a {
  display: inline-block;
  background: #ff005c;
  color: white;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 5px;
  margin-top: 1rem;
  transition: 0.2s;
}

.mood-outro.thriller .cta a:hover {
  background: #ff3380;
}

@keyframes pulse {
  0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
  50% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }
  100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
}

/* SLICE OF LIFE */
.mood-outro.slice {
  background: #fcfaf9;
  border: 1px solid #e3ded9;
  padding: 2rem;
  font-family: 'Noto Serif KR', serif;
  color: #4b3f36;
  text-align: center;
  border-radius: 12px;
  margin-top: 4rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.mood-outro.slice h3 {
  font-size: 1.6rem;
  color: #8d6748;
}

.mood-outro.slice .quote {
  margin: 1rem 0;
  font-style: italic;
  color: #6b5845;
}

.mood-outro.slice .buttons a {
  color: #6d4c3d;
  border: 1px dashed #bcae9c;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  margin: 0 0.5rem;
}

.mood-outro.slice .buttons a:hover {
  background: #f8f1eb;
}

/* SAD */
.mood-outro.sad {
  background: linear-gradient(145deg, #cfd9df, #e2ebf0);
  color: #444;
  font-style: italic;
  padding: 2em;
  border-left: 6px solid #7a8a94;
  filter: grayscale(30%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(100, 100, 100, 0.2);
  transition: all 0.5s ease;
}

.mood-outro.sad::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 10%, #888 50%, transparent 90%);
  animation: drip 3s infinite;
  opacity: 0.3;
}

@keyframes drip {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 0.3; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* COMEDY */
.mood-outro.comedy {
  background: linear-gradient(135deg, #fff9c4, #ffe57f);
  color: #4e342e;
  padding: 2.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 12px 30px rgba(255, 235, 59, 0.3);
  text-align: center;
  font-family: 'Comic Neue', cursive;
  margin-top: 4rem;
  position: relative;
  animation: laughBounce 2s infinite ease-in-out;
}

.mood-outro.comedy h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ff6f00;
}

.mood-outro.comedy p.quote {
  font-style: italic;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

@keyframes laughBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* FANTASY */
.mood-outro.fantasy {
  background: linear-gradient(to right, #a18cd1, #fbc2eb);
  color: #2e1a47;
  padding: 2.5rem;
  border-radius: 2rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  box-shadow: 0 10px 40px rgba(161, 140, 209, 0.3);
  margin-top: 4rem;
  position: relative;
  animation: sparkleFade 5s infinite;
}

.mood-outro.fantasy h3 {
  font-size: 2rem;
  color: #6a1b9a;
}

.mood-outro.fantasy p.quote {
  font-style: italic;
  font-size: 1.3rem;
  color: #512da8;
}

@keyframes sparkleFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; box-shadow: 0 0 25px #e1bee7; }
}

/* CRIME */
.mood-outro.crime {
  background: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #34495e 10px, #34495e 20px);
  color: #ecf0f1;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  margin-top: 4rem;
  animation: blinkAlert 2s infinite;
}

.mood-outro.crime h3 {
  font-size: 1.7rem;
  color: #e74c3c;
}

.mood-outro.crime p.quote {
  font-size: 1.1rem;
  font-style: italic;
}

@keyframes blinkAlert {
  0%, 100% { border: 2px solid #e74c3c; }
  50% { border: 2px solid transparent; }
}

/* HORROR */
.mood-outro.horror {
  background: linear-gradient(to bottom, #2f0f13, #000);
  color: #f8f8f8;
  padding: 2.2rem;
  border-radius: 1.2rem;
  text-align: center;
  font-family: 'Creepster', cursive;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.3);
  margin-top: 4rem;
  animation: horrorPulse 1.8s infinite ease-in-out;
}

.mood-outro.horror h3 {
  font-size: 1.9rem;
  color: #ff0000;
}

.mood-outro.horror p.quote {
  font-size: 1.2rem;
  font-style: italic;
  color: #fdd;
}

@keyframes horrorPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px red; }
  50% { transform: scale(1.05); box-shadow: 0 0 25px red; }
  100% { transform: scale(1); box-shadow: 0 0 10px red; }
}

/* HISTORY */
.mood-outro.history {
  background: linear-gradient(to right, #d7ccc8, #bcaaa4);
  color: #3e2723;
  padding: 2.5rem;
  border-radius: 1.5rem;
  text-align: center;
  font-family: 'Merriweather', serif;
  margin-top: 4rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.mood-outro.history h3 {
  font-size: 1.8rem;
  color: #4e342e;
}

.mood-outro.history p.quote {
  font-size: 1.2rem;
  font-style: italic;
  color: #5d4037;
}

/* Unified and Cleaned-Up Stylish Recent Posts Widget CSS */

/* Shared container styling */
.wp-block-latest-posts,
.recent-posts-widget-with-thumbnails {
  background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
  border-left: 5px solid #a368d4;
  padding: 20px 18px;
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(163, 104, 212, 0.15);
  font-family: 'Merriweather', serif;
  transition: all 0.3s ease-in-out;
}

/* Unified heading styling */
.wp-block-heading,
.recent-posts-widget-with-thumbnails h2 {
  color: #7e4bc0;
  font-size: 1.3em;
  margin-bottom: 12px;
  position: relative;
  padding-bottom: 6px;
}

.wp-block-heading::after,
.recent-posts-widget-with-thumbnails h2::after {
  content: "";
  width: 40px;
  height: 2px;
  background: #7e4bc0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

/* List styles */
.wp-block-latest-posts__list,
.recent-posts-widget-with-thumbnails ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-latest-posts__list li,
.recent-posts-widget-with-thumbnails li {
  margin-bottom: 15px;
  padding: 10px 12px;
  background: #fff8ff;
  border-left: 3px solid #d9a7f0;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.3s;
  position: relative;
}

.wp-block-latest-posts__list li:hover,
.recent-posts-widget-with-thumbnails li:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 10px rgba(180, 140, 255, 0.2);
  background: #fef5ff;
}

/* Link styling */
.wp-block-latest-posts__list li a,
.recent-posts-widget-with-thumbnails li a {
  color: #6b4c7c;
  font-weight: 600;
  text-decoration: none;
  font-size: 1em;
  display: inline-block;
}

.wp-block-latest-posts__list li a:hover,
.recent-posts-widget-with-thumbnails li a:hover {
  color: #a368d4;
  text-decoration: underline;
}

/* Date/meta info */
.wp-block-latest-posts__list li .wp-block-latest-posts__post-date {
  display: block;
  font-size: 0.8em;
  color: #999;
  margin-top: 3px;
}

/* Genre Sidebar Highlight Box */
.genre-sidebar-highlight {
  background: #f5ecff;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.genre-sidebar-btn {
  display: inline-block;
  margin-top: 10px;
  background: #c084fc;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
}
.genre-sidebar-btn:hover {
  background: #a855f7;
}

@media (max-width: 768px) {
  .mobile-genre-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #7e22ce;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
  }

  .mobile-genre-button:hover {
    background: #5b21b6;
  }
}
.post-dates {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  background: #f5ecff;
  padding: 10px 18px;
  border-left: 4px solid #9333ea;
  border-radius: 8px;
  color: #5b21b6;
  font-family: 'Merriweather', sans-serif;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(147, 51, 234, 0.08);
  transition: all 0.3s ease-in-out;
  animation: fadeInDateBar 0.6s ease;
}

.post-dates:hover {
  background: #ede9fe;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.12);
}

.post-dates span {
  font-weight: 500;
}

@keyframes fadeInDateBar {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.entry-content h3 {
  display: inline-block;
  background-color: #ead5f3;
  color: #3d3d3d;
  font-family: 'Poppins', sans-serif;
  padding: 6px 14px;
  border-radius: 25px;
  font-weight: 600;
  margin: 20px 0;
}
.entry-content h4 {
  color: #8e44ad;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  border-bottom: 3px solid #ead5f3;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.entry-content h2 {
  background: linear-gradient(90deg, #ead5f3, #f6c1e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}
.entry-content h1 {
  color: #b088b4;
  font-family: 'Merriweather', serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-shadow: 1px 1px 2px #ead5f3;
}
.page-title.ast-archive-title {
  font-family: 'Poppins', sans-serif;
  color: #8e44ad;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ead5f3, #f6c1e2);
  padding: 10px 20px;
  border-radius: 20px;
  display: inline-block;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 4px 10px rgba(234, 213, 243, 0.4);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.page-title.ast-archive-title::after {
  content: "";
  display: block;
  width: 50%;
  margin: 10px auto 0;
  height: 4px;
  background-color: #b088b4;
  border-radius: 2px;
}
.sort-bar {
  margin-bottom: 20px;
  font-family: Poppins, sans-serif;
}

.sort-bar label {
  margin-right: 8px;
  font-weight: 600;
  color: #9d4edd;
}

#postSort {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #ead5f3;
  background: #fdf7ff;
  color: #333;
  font-size: 14px;
}
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: #ff4c68; /* You can change the color */
  width: 0%;
  z-index: 9999;
  transition: width 0.25s ease-out;
}