/* Root Variables */
:root {
   --dark-bg: #6a8e63;
   --pale-green: #c5e8c8;
   --bg-shiny: linear-gradient(135deg, #e8f5e9, #c5e8c8);
   --text-light: #ffffff;
}

/* General Body and Typography */
body {
   font-family: 'Merriweather', serif;
   font-size: 1rem;
   line-height: 1.6;
   color: #333333;
   margin: 0;
   display: flex;
   flex-direction: column;
   background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 65%, var(--dark-bg) 100%);
   min-height: 100vh;
}



h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Cinzel Decorative', serif;
   color: #6a8e63;
   text-transform: uppercase;
}

/* Navbar Styling */
.navbar {
   background: transparent;
   color: var(--text-light);
   padding: 0px 20px; 
   text-align: center;
   font-family: 'Cinzel Decorative', serif;
   text-transform: uppercase;    
}


.navbar .container-fluid {
   display: flex;
   justify-content: center;
   align-items: center;
}



.navbar .navbar-brand {
   font-family: 'Cinzel Decorative', serif;
   font-weight: 800;
   font-size: 2rem;
   color: #d9a441;
   text-transform: uppercase;
   
   letter-spacing: 2px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   transition: color 0.3s ease, text-shadow 0.3s ease;
   
   }

.navbar-collapse {
   flex-grow: 0;  /* Prevent the collapse from affecting centering */
   justify-content: center;
}

.navbar-nav {
   display: flex;
   gap: 0px;
}
.nav-item {
   margin: 0 10px;
}

.nav-link:hover {
   color: #4b6f4a;
   text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.8);

}

.navbar .navbar-brand:hover {
   color: #f5d76e;
   text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
   .navbar {
      font-size: 0.9rem;
      padding: 10px;
   }

   .navbar .navbar-brand {
      font-size: 1.4rem;
   }

   .navbar a {
      margin: 0 5px;
   }
}

@media (max-width: 480px) {
   .navbar .navbar-brand {
      font-size: 1.2rem;
   }

   .navbar a {
      font-size: 0.8rem;
   }
}

/* Main Content Area */
main {
   flex: 1;
   background: var(--bg-shiny);
   box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), inset 0 -1px 5px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
   padding: 20px; 
   text-align: center;
   flex-direction: column;
   display: flex;
}


.container-fluid.main {
   height: 100%;
   
   padding: 15px;
} 

.row {
   margin: 0;
   justify-content: center;
}

.blog-post-body {
   align-content: center;
   font-size: 1rem;
   line-height: 1.8;
   text-align: justify;
   margin-top: 20px;
}

.post-body {
   font-size: 1rem;
   line-height: 1.8;
   text-align: justify;
   margin: 20px;
}


/* cauldron container */
.cauldron-wrapper {
   width: 88%;
   border-radius: 48%;
   background: var(--bg-shiny);
   display: flex; 
   flex-direction: column;
   padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   overflow-y: auto;
   position: relative;
   margin:  5px auto;
   max-height: 82vh;
   min-height: 82vh;
   /*overflow-y: auto; */
   /*overflow-x: hidden;*/
   /*padding-right: 20px ; */
   /*flex-grow: 1; */
}



.cauldron-wrapper::-webkit-scrollbar {
   width: 8px;
}
.cauldron-wrapper::-webkit-scrollbar-track {
   background: transparent;
   margin-right: 20px;
}

.cauldron-wrapper::-webkit-scrollbar-thumb {
   background: rgba(106, 142, 99, 0.5);
   border-radius: 4px;
}

   


/* Footer Styling */
.footer {
   position: sticky;
   background: transparent;
   color: var(--text-light);
   text-align: center;
   padding: 5px ;
   font-size: 0.9rem;
   z-index: 10;
   margin-top: 5px;
}


@media (max-width: 768px) {
   .footer {
      font-size: 0.8rem;
      padding: 5px;
   }
}




@media (max-width: 480px) {
   .footer {
      font-size: 0.7rem;
   }
}

/* Buttons */
button,
.btn  {
   background: linear-gradient(135deg, #6a8e63, #4b6f4a);
   color: #ffffff;
   border: none;
   border-radius: 8px;
   padding: 10px 20px;
   font-family: 'Merriweather', serif;
   font-weight: bold;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   cursor: pointer;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

button:hover,
.btn:hover {
   background: linear-gradient(135deg, #8ebf77, #6a8e63);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
   transform: translateY(-2px);
   color: #f5d76e;
}

button:active,
.btn:active {
   background: linear-gradient(135deg, #4b6f4a, #6a8e63);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
   transform: translateY(2px);
}

button:disabled,
.btn:disabled {
   background: #cccccc;
   color: #666666;
   cursor: not-allowed;
   box-shadow: none;
}

/* Pagination styling */
.pagination .page-link {
   color: #6a8e63;  /* Green text */
   background: #ffffff;  /* White background */
   border: none;
}

.pagination .page-link:hover {
   color: #d9a441;  /* Gold text on hover */
   background: #ffffff;  /* Keep white background */
   border: none;
}

/* Remove the default blue focus outline */
.pagination .page-link:focus {
   box-shadow: none;
   outline: none;
}

/* Cards */
.card {
   background: linear-gradient(135deg, #ffffff, #f4f4f4);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
   border: none;
   border-radius: 8px;
   color: #333333;
   width: 260px;
   margin: 5px auto;
   margin-bottom: 20px;
   transition: 0.3s ease;
}

.card:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.card-img-top {
   width: 90%;
   height: auto;
   border-radius: 5px;
   margin: 0 auto;
   display: block;
   max-height: 150px;
   object-fit: cover;
}

.card-title {
   color: #6a8e63;
   font-weight: bold;
   font-size: 0.85rem;
   text-decoration: none;
   text-align: center;
   margin-bottom: 8px;
   line-height: 1.2;
}

.card-title:hover {
   color: #d4af37;
}

.card-text {
   color: #6a8e63;
   font-size: 0.75rem;
   line-height: 1.4;
   text-align: justify;
   padding: 0 10px;
}

.text-muted {
   color: #6a8e63;
}

/* Comments Section */
.comments-section {
   margin-top: 20px;
   background-color: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
}

.comment-card {
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 15px;
   background-color: #f9f9f9;
}

.comment-form-section {
   background-color: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card a,
.card a:link,
.card a:visited {
   text-decoration: none;
}

.post-link {
   text-decoration: none;
}