/*
Theme Name: ZubairIZ WP Theme
Theme URI: https://example.com
Author: Zubair Ibn Zamir
Author URI: https://zubairiz.com
Description: A modern WordPress theme with Tailwind CSS and DaisyUI theme switching
Version: 1.0.1
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: tailwind-theme
*/

/* This file is required by WordPress but styles are handled by Tailwind */

/* Compact List View Styles for Mobile */
.list-view-item.compact-card {
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .list-view-item.compact-card {
    min-height: auto;
    max-height: 100px;
    margin-bottom: 0.5rem;
    padding: 0 !important;
  }
  
  .list-view-item.compact-card .card-side {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  
  .list-view-item.compact-card figure {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .list-view-item.compact-card figure img {
    border-radius: 0.5rem;
  }
  
  .list-view-item.compact-card .card-body {
    padding: 0.5rem 0.75rem !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .list-view-item.compact-card .card-title {
    margin-bottom: 0.25rem !important;
    font-weight: 600;
    line-height: 1.3;
  }
  
  .list-view-item.compact-card .post-excerpt {
    display: none !important;
  }
  
  .list-view-item.compact-card .card-actions {
    margin-top: 0.5rem !important;
    padding: 0 !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .list-view-item.compact-card .badge {
    display: none !important;
  }
  
  .list-view-item.compact-card .btn-xs {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    height: 1.75rem;
    min-height: 1.75rem;
  }
  
  .list-view-item.compact-card .text-sm {
    font-size: 0.625rem;
    margin-bottom: 0.25rem;
  }
}

/* Line clamp utility for excerpts */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* DaisyUI List View Enhancements */
.list-clickable.list-row {
  transition: background-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  padding: 1rem !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid hsl(var(--bc) / 0.1);
}

.list-clickable.list-row:last-child {
  margin-bottom: 0 !important;
  border-bottom: none;
}

.list-clickable.list-row:hover:not(.button-hovering) {
  background-color: hsl(var(--b2));
  opacity: 0.9;
}

.list-clickable.list-row:active:not(.button-hovering) {
  background-color: hsl(var(--b3));
  transform: scale(0.98);
}

/* Prevent button hover from affecting entire row */
.list-clickable.list-row.button-hovering {
  background-color: inherit;
  opacity: 1;
}

.list-clickable.list-row .read-more-btn-list {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  width: auto;
  min-width: auto;
  max-width: fit-content;
  margin-left: auto;
}

.list-clickable.list-row .read-more-btn-list:hover {
  background-color: hsl(var(--p));
  color: hsl(var(--pc));
  transform: none;
}

/* Ensure list has proper spacing */
.list.bg-base-100 {
  padding: 1rem 0;
}

.list.bg-base-100 > li.list-row,
.list.bg-base-100 > li {
  margin-bottom: 1.5rem !important;
  margin-top: 0 !important;
}

.list.bg-base-100 > li.list-row:last-child,
.list.bg-base-100 > li:last-child {
  margin-bottom: 0 !important;
}

/* Add padding to list content areas */
.list-row > div:first-child {
  padding-left: 0.5rem;
}

.list-row > div:nth-child(2) {
  padding: 0 0.5rem;
}

.list-row .list-col-wrap {
  padding: 0 0.5rem;
}

.list-row .read-more-btn-list {
  margin-left: auto;
  padding: 0.5rem 1rem;
  flex-shrink: 0;
  width: auto;
  min-width: auto;
  max-width: fit-content;
}

/* Make Read More button more compact on desktop */
@media (min-width: 768px) {
  .list-row .read-more-btn-list {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    min-width: auto;
    max-width: fit-content;
    white-space: nowrap;
  }
}

/* Ensure list-row doesn't stretch the button */
.list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-row .read-more-btn-list {
  flex: 0 0 auto;
}

/* Content readability - optimal 60-75 characters per line (65ch is ideal) */
.prose {
  max-width: 65ch; /* ~65 characters - optimal for reading */
  font-size: 1rem; /* 16px base font size */
  line-height: 1.7; /* 1.5-1.7 range for comfortable reading */
  text-align: justify; /* Justify text for equal line width */
}

.prose-lg {
  max-width: 65ch; /* ~65 characters - optimal for reading */
  font-size: 1.125rem; /* 18px for larger text */
  line-height: 1.7; /* 1.5-1.7 range for comfortable reading */
  text-align: justify; /* Justify text for equal line width */
}

/* Center content for better readability */
main article .prose,
main article .prose-lg {
  margin-left: auto;
  margin-right: auto;
}

/* Drop cap - first letter large, spans 2 lines */
.prose p:first-of-type::first-letter,
.prose-lg p:first-of-type::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.85;
  padding-right: 0.1em;
  padding-top: 0.05em;
  font-weight: bold;
}

/* Pagination - Use DaisyUI join component with btn-active */
/* CRITICAL: Only buttons with btn-active should look active */
.join .btn:not(.btn-active) {
  background-color: transparent !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc) / 0.2) !important;
}

/* CRITICAL: Explicitly prevent page 1 from looking active unless it has btn-active */
.join .btn:first-child:not(.btn-active),
.join .btn:not(.btn-active) {
  background-color: transparent !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc) / 0.2) !important;
}

/* Override any DaisyUI default active styling on first button */
.join .btn:first-child {
  background-color: transparent !important;
  color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc) / 0.2) !important;
}

.join .btn:first-child.btn-active {
  background-color: hsl(var(--p)) !important;
  color: hsl(var(--pc)) !important;
  border-color: hsl(var(--p)) !important;
}

.join .btn-active {
  background-color: hsl(var(--p)) !important;
  color: hsl(var(--pc)) !important;
  border-color: hsl(var(--p)) !important;
}

/* Ensure join component displays correctly */
.join {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hide empty paragraphs completely */
.prose p:empty,
.prose-lg p:empty,
.card-body .prose p:empty,
.card-body .prose-lg p:empty,
article .prose p:empty,
article .prose-lg p:empty,
main .prose p:empty,
main .prose-lg p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* Paragraph breaks in content - Target all non-empty paragraphs in post content */
.prose p:not(:empty),
.prose-lg p:not(:empty),
.card-body .prose p:not(:empty),
.card-body .prose-lg p:not(:empty),
article .prose p:not(:empty),
article .prose-lg p:not(:empty),
main .prose p:not(:empty),
main .prose-lg p:not(:empty),
.entry-content p:not(:empty),
.post-content p:not(:empty) {
  margin-bottom: 1.5em !important;
  margin-top: 0 !important;
  display: block !important;
  line-height: 1.7 !important;
  min-height: 1em !important;
}

.prose p:not(:empty):last-child,
.prose-lg p:not(:empty):last-child,
.card-body .prose p:not(:empty):last-child,
.card-body .prose-lg p:not(:empty):last-child,
article .prose p:not(:empty):last-child,
article .prose-lg p:not(:empty):last-child,
main .prose p:not(:empty):last-child,
main .prose-lg p:not(:empty):last-child,
.entry-content p:not(:empty):last-child,
.post-content p:not(:empty):last-child {
  margin-bottom: 0 !important;
}

/* Ensure paragraphs in card-body content area have spacing */
.card-body > .prose p:not(:empty),
.card-body > .prose-lg p:not(:empty) {
  margin-bottom: 1.5em !important;
  margin-top: 0 !important;
}

/* Override any Tailwind/DaisyUI resets that might remove paragraph spacing */
.prose p:not(:empty) + p:not(:empty),
.prose-lg p:not(:empty) + p:not(:empty) {
  margin-top: 0 !important;
  margin-bottom: 1.5em !important;
}

/* Ensure content wrapper doesn't collapse margins */
.prose,
.prose-lg,
.card-body .prose,
.card-body .prose-lg {
  overflow: visible !important;
}

/* Handle line breaks and ensure spacing */
.prose br,
.prose-lg br {
  display: block !important;
  content: "" !important;
  margin-bottom: 0.5em !important;
}

/* Force paragraph spacing - most aggressive override */
div.prose p:not(:empty),
div.prose-lg p:not(:empty) {
  margin-bottom: 1.5em !important;
  padding-bottom: 0 !important;
}

/* Mobile: Reduce padding for blog post cards and single posts */
@media (max-width: 768px) {
  /* Don't override Tailwind classes - let px-2 sm:px-4 work */
  /* Only reduce card-body padding on mobile for post cards */
  .post-item .card-body,
  article .card-body {
    padding: 1rem !important;
  }
  
  /* Reduce single post card-body padding */
  main article .card .card-body {
    padding: 1rem !important;
  }
  
  /* Reduce gap between cards on mobile */
  #posts-container {
    gap: 1rem !important;
  }
  
  /* Reduce vertical padding on mobile */
  main.container.mobile-padding {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Category badge padding - match btn-sm padding */
.post-item .badge,
.card-body .badge {
  padding-left: 0.75rem !important; /* px-3 - matches btn-sm */
  padding-right: 0.75rem !important; /* px-3 - matches btn-sm */
  padding-top: 0.75rem !important; /* py-2 - matches btn-sm vertical padding */
  padding-bottom: 0.75rem !important; /* py-2 - matches btn-sm vertical padding */
}

/* Post card images - fixed height container so title stays in same position */
.card.post-item figure,
.post-item figure,
article.post-item figure {
  height: 12rem !important; /* Fixed height - 192px */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  width: 100%;
  padding: 0 !important;
  border-radius: 1rem 1rem 0 0 !important; /* Match card's rounded top corners */
}

.card.post-item figure a,
.post-item figure a,
article.post-item figure a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.card.post-item figure img,
.post-item figure img,
article.post-item figure img,
.post-item .post-thumbnail,
.card.post-item .post-thumbnail {
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Post card images - show full image on desktop (no cropping), cover on mobile */
@media (min-width: 768px) {
  .card.post-item figure,
  .post-item figure,
  article.post-item figure {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 1rem 1rem 0 0 !important; /* Match card's rounded top corners */
  }
  .card.post-item figure a,
  .post-item figure a,
  article.post-item figure a {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
  }
  .card.post-item figure img,
  .post-item figure img,
  article.post-item figure img,
  .post-item .post-thumbnail,
  .card.post-item .post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* Change to cover to fill space better */
    max-width: 100%;
    max-height: 100%;
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    transform: scale(1.05) !important; /* Slight zoom (5%) to avoid empty space */
    border-radius: 1rem 1rem 0 0 !important; /* Match card's rounded top corners */
  }
}

@media (max-width: 767px) {
  .card.post-item figure,
  .post-item figure,
  article.post-item figure {
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 1rem 1rem 0 0 !important; /* Match card's rounded top corners */
  }
  .card.post-item figure a,
  .post-item figure a,
  article.post-item figure a {
    background-color: transparent !important;
    background: transparent !important;
  }
  .card.post-item figure img,
  .post-item figure img,
  article.post-item figure img,
  .post-item .post-thumbnail,
  .card.post-item .post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 1rem 1rem 0 0 !important; /* Match card's rounded top corners */
  }
}

/* Make main container wider on desktop */
@media (min-width: 1024px) {
  main.container {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Related posts section */
.related-post-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-post-item:hover {
  transform: translateY(-2px);
}

.related-post-item figure {
  border-radius: 0 !important;
  overflow: hidden;
  margin: 0 !important;
}

.related-post-item figure img {
  border-radius: 0 !important;
  transition: transform 0.3s ease;
}

.related-post-item:hover figure img {
  transform: scale(1.05);
}

/* Mobile: ensure each related post is full width */
@media (max-width: 767px) {
  .related-post-item {
    width: 100%;
  }
}

/* Ensure footer is always visible at bottom */
body.flex {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

body.flex > .flex-grow {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* Mobile-specific footer visibility */
@media (max-width: 768px) {
  footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    margin-top: 2rem !important;
    padding: 2rem 1rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  body.flex {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important; /* iOS fix */
  }
  
  body.flex > .flex-grow {
    flex-grow: 1 !important;
    min-height: 0 !important;
  }
  
  /* Ensure footer is not hidden by any parent */
  html body footer {
    display: block !important;
    visibility: visible !important;
  }
}

/* Authors Modal Scrollbar - Make it visible on all devices */
.authors-modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--p)) hsl(var(--b2));
}

.authors-modal-scroll::-webkit-scrollbar {
  width: 8px;
}

.authors-modal-scroll::-webkit-scrollbar-track {
  background: hsl(var(--b2));
  border-radius: 4px;
}

.authors-modal-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--p));
  border-radius: 4px;
}

.authors-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--pf));
}

/* Mobile: Make scrollbar more visible */
@media (max-width: 768px) {
  .authors-modal-scroll {
    scrollbar-width: auto;
  }
  
  .authors-modal-scroll::-webkit-scrollbar {
    width: 10px;
  }
}