/* --- 1. Font is now imported in header.php --- */

/* --- 2. Theme Configuration ---
   This is your main theme file.
   You can change all your colors here! 
*/
:root {
  /* --- Fonts --- */
  --font-family-base: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Olive Green Theme Colors --- */
  --color-primary: #556B2F;     /* Dark Olive Green (for buttons, headers) */
  --color-primary-hover: #6B8E23; /* A lighter olive for hover */
  --color-secondary: #F0EFEA;   /* A very light beige/off-white (for backgrounds) */
  --color-text: #3d3d3d;      /* Dark gray (for text) */
  --color-border: #dddddd;
  --color-card-bg: #ffffff;     /* White background for cards */
  --color-navbar-bg: #ffffff;
  --color-danger: #D9534F;
}

/* --- 3. Apply Theme --- */

/* Apply font and base colors */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-secondary);
  color: var(--color-text);
  font-weight: 400;
}

/* Make headings use a slightly bolder font weight */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* --- 4. Override Bootstrap Components --- */

/* -- Navbar -- */
.navbar {
  background-color: var(--color-navbar-bg);
  border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
  color: var(--color-primary);
  font-weight: 700;
}

/* -- Buttons -- */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-success {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* -- Badges -- */
.badge.bg-danger {
  background-color: var(--color-danger) !important;
}

/* -- Cards -- */
.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
}

.card[onclick] {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card[onclick]:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* -- Modals -- */
.modal-content {
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* --- 5. Your Custom Classes --- */
.item-modal-img {
  height: 360px;
  width: 100%;
  object-fit: contain;
}


/* --- 6. New Image Zoom Styles --- */
/* Style for the large image inside the new zoom modal */
.zoomed-image-content {
  /* Make it a block element */
  display: block;

  /* Center it horizontally */
  margin-left: auto;
  margin-right: auto;

  /* Constrain its size. 
    max-width: 100% tells it to respect the modal's padding.
  */
  max-width: 100%;
  max-height: 80vh; /* 80% of the screen's height */

  /* Maintain aspect ratio */
  width: auto; 
  height: auto;
  object-fit: contain;
}

/* --- 7. New Footer Styles --- */
.site-footer {
  /* Use the theme variables we already defined */
  background-color: var(--color-navbar-bg); 
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

.enamad-seal img {
  width: 120px; /* Standard enamad size */
  height: auto;
  border-radius: 5px;
}

/* --- 8. About Us Styles --- */

/* Custom Styles for Article/About Page */

/* Custom Styles for Article/About Page */

.about-content {
    font-family: 'Vazirmatn', 'Arial', sans-serif; /* Example for Farsi font, use what you have */
    line-height: 1.8;
    color: #333;
    max-width: 900px; /* Limit content width for readability */
    margin: 0 auto; /* Center the content */
    padding: 20px;
    background-color: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.about-title {
    color: #4CAF50; /* A fresh green for titles */
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
}

.about-section-title {
    color: #388E3C; /* A slightly darker green for section titles */
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Underline effect for section titles */
.about-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Shorter underline */
    height: 3px;
    background-color: #8BC34A; /* Lighter green */
    border-radius: 5px;
}

.about-content p {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    text-align: justify; /* Justify text for a clean look */
}

.about-content .lead {
    font-size: 1.3rem;
    font-weight: 500;
    color: #555;
}

.about-content img {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #ddd;
    /* --- MODIFIED FOR SMALLER IMAGES --- */
    max-width: 400px; /* Set a maximum width */
    max-height: 300px; /* Set a maximum height */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it respects margin: auto for centering */
    margin-left: auto;
    margin-right: auto;
    /* --- END MODIFIED --- */
}

.about-link {
    color: #1976D2; /* A nice blue for links */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

.about-link:hover {
    color: #1565C0;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-content {
        padding: 15px;
    }
    .about-title {
        font-size: 1.8rem;
    }
    .about-section-title {
        font-size: 1.5rem;
    }
    .about-content p {
        font-size: 1rem;
    }
    .about-content .lead {
        font-size: 1.15rem;
    }
    /* Ensure images scale down even further on small screens */
    .about-content img {
        max-width: 100%; /* Allow it to shrink to fit smaller screens */
        max-height: 250px; /* Slightly smaller max height for mobile */
    }
}

@media (max-width: 576px) {
    .about-title {
        font-size: 1.6rem;
    }
    .about-section-title {
        font-size: 1.3rem;
    }
    .about-content img {
        max-height: 200px; /* Even smaller max height for very small screens */
    }
}

/* --- 8. New Article Image Styles --- */
.article-image {
  /* Set a max width. Change 600px to any size you like! */
  max-width: 400px; 

  /* Keep it responsive (will shrink on phones) */
  width: 100%; 

  /* Make sure it's centered */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- 9. Articles styles --- */

/* Adding 'direction: rtl' and 'text-align: right' to ensure the 
   Farsi text (which is Right-to-Left) renders correctly.
   Bootstrap's RTL build would normally handle this, but this
   ensures it works even without it.
*/
.articles-oliveoil-container {
    direction: rtl;
    text-align: right;
    font-family: Tahoma, sans-serif; /* A common Farsi font */
}

.articles-oliveoil-h1 {
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #8f9b6c;
    padding-bottom: 10px;
}

.articles-oliveoil-h3 {
    color: #5a6639;
    font-weight: bold;
}

.articles-oliveoil-recipe-row {
    margin-bottom: 2.5rem;
}


.articles-oliveoil-placeholder {
    width: 100%;
    min-height: 200px;
    background-color: #f4f4f4;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #aaa;
    border-radius: 8px;
}

.articles-oliveoil-tags {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.articles-oliveoil-tags .badge {
    margin-left: 5px;
    font-size: 0.9rem;
}



/* Olive Green Theme & RTL Styles */
.olive-article-page {
  direction: rtl;
  text-align: right;
  /* Using Vazirmatn (a popular, clean Farsi font) with fallbacks */
  font-family: 'Vazirmatn', Tahoma, sans-serif; 
  color: #333;
  line-height: 1.8;
}
.olive-article-page h1.display-4 {
  color: #3d550c; /* Dark olive */
  font-weight: bold;
  border-bottom: 3px solid #8f9b6c; /* Medium olive */
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.olive-article-page h2 {
  color: #5a6639; /* Medium-dark olive */
  font-weight: bold;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e8ede0;
  padding-bottom: 10px;
}
.olive-article-page h3 {
   color: #3d550c;
   font-weight: 600;
   margin-top: 1.5rem;
}

/* Light green background for main content sections */
.olive-article-section {
  background-color: #f7f9f4; /* Very light olive/grey */
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 1px solid #e8ede0;
}

.olive-article-page ul {
  list-style-position: inside; /* Keeps bullets aligned in RTL */
  padding-right: 0; /* Remove default padding */
}
.olive-article-page ul li {
  margin-bottom: 0.75rem;
}

/* Custom styling for list bullets */
.olive-article-page ul li::marker {
  color: #8f9b6c;
  font-size: 1.2em;
  font-weight: bold;
}

.olive-article-page .lead {
  font-size: 1.25rem;
  font-weight: 300;
  color: #555;
}

/* Themed placeholder for the image text */
.olive-image-placeholder {
  width: 100%;
  padding: 2rem;
  background-color: #e8ede0; /* Light olive */
  border: 2px dashed #8f9b6c; /* Medium olive */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6639;
  font-weight: bold;
  font-style: italic;
  border-radius: 8px;
  margin: 1.5rem 0;
}

/* Tags section */
.olive-article-tags h5 {
  color: #3d550c;
  font-weight: bold;
}
.olive-article-tags .badge {
  background-color: #5a6639;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5em 0.75em;
  margin-left: 8px; /* RTL means margin-left adds space *between* tags */
  margin-bottom: 8px;
  border-radius: 5px;
}