/*
Theme Name: Dreaming Arcadia
Theme URI: https://example.com/dreaming-arcadia
Description: A beautiful, modern WordPress theme with complete functionality
Version: 1.0.0
Author: Phill Developer From Designik agency
Author URI: https://example.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dreaming-arcadia
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ============================================
   Reset and Base Styles
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #131411;
  background-image: url('<?php echo esc_url( get_template_directory_uri() ); ?>/images/image-2-1.png');
}
a {
  color: #0073aa;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #005a87;
}

/* ============================================
   Header Styles
   ============================================ */

header {
   color: white;
  }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-branding h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
}

.site-branding p {
  font-size: 14px;
  margin: 5px 0 0 0;
  opacity: 0.9;
}

/* ============================================
   Navigation Styles
   ============================================ */

nav {
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-menu {
  list-style: none;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.main-menu li {
  position: relative;
}

.main-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.main-menu a:hover,
.main-menu li.active > a {
  background-color: #667eea;
}

.main-menu ul {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  display: none;
  min-width: 200px;
}

.main-menu li:hover > ul {
  display: block;
}

.main-menu ul li a {
  padding: 10px 20px;
  border-bottom: 1px solid #555;
}

.main-menu ul li a:hover {
  background-color: #667eea;
}

/* ============================================
   Container and Layout
   ============================================ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

main {
  min-height: calc(100vh - 200px);
}

.content-wrapper {
  margin: 30px 0;
}

/* ============================================
   Footer Styles
   ============================================ */

footer {
  background-color: #333;
  color: white;
  padding: 40px 0 20px;
  margin-top: 50px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 30px;
}

.footer-widget {
  color: #ccc;
}

.footer-widget h3 {
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
}

.footer-widget ul {
  list-style: none;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li a {
  color: #ccc;
  transition: color 0.3s ease;
}

.footer-widget ul li a:hover {
  color: #667eea;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #555;
  padding-top: 20px;
  color: #999;
}

.footer-bottom p {
  margin: 0;
}

/* ============================================
   404 Page Styles
   ============================================ */

.error-404 {
  text-align: center;
  padding: 60px 20px;
}

.error-404 h1 {
  font-size: 72px;
  color: #667eea;
  margin-bottom: 20px;
}

.error-404 p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #666;
}

.error-404 .search-form {
  margin: 30px 0;
}

.error-404 .search-form input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
  max-width: 100%;
}

.error-404 .search-form button {
  padding: 10px 20px;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.error-404 .search-form button:hover {
  background-color: #764ba2;
}

/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    text-align: center;
  }

  .main-menu {
    flex-direction: column;
    width: 100%;
  }

  .main-menu a {
    text-align: center;
  }

  article {
    padding: 20px;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .error-404 h1 {
    font-size: 48px;
  }

  .error-404 .search-form input {
    width: 100%;
    margin-bottom: 10px;
  }

  .error-404 .search-form button {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }


}



/* ============================================
   Additional Styles
   ============================================ */


   /* for home page  */

   /* Container Logic */
.blog-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1085px;
  margin: 0 auto;
  padding: 20px;
}

/* Base Card Styles */
.post-card {
  display: flex;
  flex-direction: row;
  gap: 20px;
  min-width: 800px; /* Ensures desktop layout stays consistent */
}

/* Image Styling */
.post-image-wrapper {
  flex: 0 0 294px;
  /* height: 347px; */
  overflow: hidden;
  border-radius: 16px;
}

.post-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content Box Styling */
.post-content {
  flex: 1;
  position: relative;
  padding: 30px 20px;
  border-radius: 20px;
  color: white;
  font-family: 'Inter', sans-serif;
  overflow: hidden; /* Needed for the shimmer effect */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.green-theme { background-color: #5DAC78; }
/* .pink-theme { background-color: #B3124D; } */

/* The Shimmer Effect */
.post-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.6s;
  transform: skewX(-20deg);
}

.post-content:hover::after {
  left: 150%;
}

/* Internal Layout */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.post-title {
    font-family: "CCHighJinkies Bold", sans-serif !important;
  font-size: 28px;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.post-meta-badge {
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
  border-radius: 10px 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  margin-right: -20px; /* Pulls to edge */
}

.post-excerpt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-category a {
  color: #E8DFA2;
  text-decoration: underline;
}

.read-more-btn {
  background: #E8DFA2;
  color: black;
  padding: 10px 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 800px) {
  .post-card {
    flex-direction: column;
    min-width: 100%; /* Removes the 800px limit on mobile */
  }
  
  .post-image-wrapper {
    width: 100%;
    flex: none;
  }
  
  .post-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .post-meta-badge {
    margin-right: 0;
    border-radius: 5px;
  }
}












/* more 534 */


/* Section Wrapper with Gradient */
.story-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 60px 20px;
  /* background: linear-gradient(180deg, rgba(1, 136, 82, 0.90) 0%, #31AE7C 100%); */
  box-sizing: border-box;
}

/* Central Container */
.story-container {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  color: white;
}

/* Typography */
.story-title {
  font-family: "CCHighJinkies Bold", sans-serif !important;
  font-size: 40px;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}

.story-content {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.story-content p {
  margin-bottom: 20px;
}

/* Image Handling */
.story-image-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.story-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Comments Area */
.story-comments-shortcode {
  font-family: 'Inter', sans-serif;
  color: black;
  font-size: 14px;
  margin-top: 20px;
}

/* MOBILE RESPONSIVE STYLES */
@media (max-width: 768px) {
  .story-section {
    padding: 30px 15px;
  }
  
  .story-title {
    font-size: 28px;
    text-align: center;
  }
  
  .story-content {
    font-size: 15px;
    text-align: justify;
  }
}
/* ends */









/* more 519 */
/* Main Section Wrapper */
.diary-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 60px 20px;
  /* Your specific gradient */
  /* background: linear-gradient(180deg, #201F35 0%, #F2295B 100%); */
  box-sizing: border-box;
}
figure{
    background-color: none;
}
/* Container with 800px min-width logic */
.diary-container {
  max-width: 1000px;
  min-width: 800px; /* Forces consistency on larger screens */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Typography */
.diary-title {
  font-family: "CCHighJinkies Bold", sans-serif !important;
  color: #DCD0CE;
  font-size: 35.5px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.diary-body {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.diary-body p {
  margin-bottom: 25px;
}
figure{
    background-color: transparent !important;
}
/* Image Handling */
.diary-image-group {
  display: flex;
  flex-direction: column;
  background-color: none !important;
  align-items: center;
  margin: 30px 0;
  gap: 10px;
}
.diary-caption{
    color: white !important;
}

.diary-img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.diary-img.portrait { max-width: 360px; }
.diary-img.landscape { max-width: 640px; }
.diary-img.wide { max-width: 447px; }

.diary-caption {
  font-style: italic;
  font-weight: 700;
  text-align: center;
}

/* Comments Area */
.diary-comments {
  font-family: 'Inter', sans-serif;
  color: black;
  font-size: 14px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 800px) {
  .diary-container {
    min-width: 100%; /* Allows it to shrink on mobile */
  }
  
  .diary-section {
    padding: 30px 15px;
  }
  
  .diary-title {
    font-size: 28px;
    text-align: center;
  }

  .diary-img {
    max-width: 100% !important; /* Ensure images don't overflow small screens */
  }
}
/* ends */










/* updates pages */


.blog-feed {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #131411; Matching your previous background */
}

.feed-banner img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}

.feed-container {
  width: 100%;
  max-width: 820px;
  min-width: 800px;
  margin-top: -82px; /* Pulls content up over the banner slightly as per original */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 50px;
}

.feed-card {
  background: #202020;
  outline: 1px solid #6C6C6C;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Header Styles */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.card-outer-title {
  color: #FF0099;
  font-family: 'Chelsea Market', cursive;
  font-size: 30px;
  margin: 0;
  letter-spacing: 1px;
}

.card-meta {
  color: #929292;
  font-family: 'Fragment Mono', monospace;
  font-style: italic;
  font-size: 15px;
}

.meta-link {
  color: #CF6A90;
  text-decoration: none;
  letter-spacing: 1.5px;
}

/* Inner Content Gradients */
.card-inner-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.green-gradient {
  background: linear-gradient(180deg, rgba(1, 136, 82, 0.90) 0%, #31AE7C 100%);
}

.pink-gradient {
  background: linear-gradient(180deg, #201F35 0%, #F2295B 100%);
}

.card-inner-title {
  text-align: right;
  color: white;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 38px;
  margin: 0;
}

.pink-gradient .card-inner-title {
  color: #DCD0CE;
}

.card-text {
  color: white;
  font-family: 'Fragment Mono', monospace;
  font-size: 12px;
  line-height: 24px;
  margin: 0;
}

/* Footer Styles */
.card-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.more-link, .tag-link {
  color: #C97CAB;
  text-decoration: none;
  border-bottom: 1px solid #C97CAB;
  width: fit-content;
  font-family: 'Fragment Mono', monospace;
  font-size: 12px;
}

.card-tags {
  font-family: 'Fragment Mono', monospace;
  font-size: 12px;
}

.tag-label {
  color: #FFC800;
}

/* MOBILE RESPONSIVE */
@media (max-width: 800px) {
  .feed-container {
    min-width: 100%;
    margin-top: 0;
    padding: 15px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-inner-title {
    font-size: 28px;
    text-align: left;
  }
  
  .card-inner-content {
    padding: 20px;
  }
}

/* ends */










/* mou */
.detail-item {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Section Wrapper with Background */
.profile-section {
  width: 100%;
  min-height: 720px;
   background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Container Logic */
.profile-card-container {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 960px;
  min-width: 800px; /* Locked for larger devices */
}

/* Left Side: Image Card */
.profile-image-card {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  padding: 20px;
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.status-indicator {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
}

.dot {
  width: 10px;
  height: 10px;
  background: #FF2AA6;
  border-radius: 50%;
}

.image-box img {
  width: 100%;
  max-width: 246px;
  border-radius: 8px;
}

.quick-tags {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.tag {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 15px;
  border-radius: 999px;
  color: white;
  font-size: 12px;
}

/* Right Side: Details */
.profile-details-card {
  background: rgba(0, 0, 0, 0.30);
  border-radius: 14px;
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: white;
  font-family: 'Inter', sans-serif;
}

.details-header h2 {
  font-size: 24px;
  margin: 0;
}

.subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

.detail-item {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
}

.detail-label {
  width: 120px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
  text-transform: uppercase;
}

.detail-value {
  font-size: 14px;
}

.divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
  margin: 10px 0;
}

.social-text {
  font-size: 15px;
  margin-bottom: 10px;
}

.social-text span {
  font-size: 14px;
  opacity: 0.8;
  margin-left: 10px;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.icon-box {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.icon-box:hover {
  background: rgba(255, 255, 255, 0.3);
}

.social-placeholder {
  width: 18px;
  height: 18px;
  /* background: white; */
  display: block;
}

/* MOBILE RESPONSIVE */
@media (max-width: 800px) {
  .profile-card-container {
    flex-direction: column;
    min-width: 100%;
    max-width: 400px; /* Better look on portrait phones */
  }

  .profile-image-card {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ends */