/*
Theme Name: GeneratePress Child - Enhanced
Theme URI: https://generatepress.com
Description: Child theme với Tailwind CSS & Lucide Icons, tối ưu mobile và AdSense
Author: Your Name
Template: generatepress
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: generatepress-child
*/

/* =================================
   IMAGE GALLERY STYLES
================================= */
.image-gallery-modal {
    backdrop-filter: blur(10px);
}

.gallery-image {
    transition: all 0.3s ease;
    cursor: zoom-in;
}

.gallery-image.scale-150 {
    transform: scale(1.5);
    cursor: zoom-out;
}

.gallery-thumbnails {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.gallery-thumb {
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.gallery-thumb:hover img {
    transform: scale(1.05);
}

.gallery-loading {
    animation: fadeIn 0.3s ease;
}

/* Navigation buttons hover effects */
.gallery-prev:hover,
.gallery-next:hover,
.gallery-close:hover {
    transform: scale(1.1);
}

.gallery-prev:active,
.gallery-next:active,
.gallery-close:active {
    transform: scale(0.95);
}

/* Smooth thumbnail scroll */
.gallery-thumbnails {
    scroll-behavior: smooth;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .gallery-thumbnails {
        max-width: 95vw;
    }
    
    .gallery-thumb img {
        width: 48px;
        height: 48px;
    }
    
    .gallery-counter {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    
    .gallery-caption {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
        max-width: 90vw;
    }
    
    .gallery-prev,
    .gallery-next {
        padding: 0.75rem;
    }
    
    .gallery-prev i,
    .gallery-next i {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Keyboard navigation indicator animation */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.gallery-controls {
    animation: pulse-subtle 3s ease-in-out infinite;
}

/* Touch feedback */
.gallery-prev:active,
.gallery-next:active,
.gallery-thumb:active {
    opacity: 0.7;
}

/* =================================
   TAILWIND UTILITIES EXTENSION
================================= */
@layer utilities {
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =================================
   CUSTOM ANIMATIONS
================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease-out forwards;
}

.animate-slideInUp {
    animation: slideInUp 0.4s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =================================
   TYPOGRAPHY ENHANCEMENTS
================================= */
body {
    @apply text-gray-800 leading-relaxed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.entry-content {
    @apply text-base leading-7;
}

.entry-content h2 {
    @apply text-2xl font-bold text-gray-900 mt-8 mb-4 pb-2 border-b-2 border-blue-500;
}

.entry-content h3 {
    @apply text-xl font-semibold text-gray-800 mt-6 mb-3;
}

.entry-content h4 {
    @apply text-lg font-semibold text-gray-800 mt-5 mb-2;
}

.entry-content p {
    @apply mb-5 text-gray-700;
}

.entry-content a {
    @apply text-blue-600 hover:text-blue-800 underline transition-colors duration-200;
}

.entry-content ul,
.entry-content ol {
    @apply ml-6 mb-5 space-y-2;
}

.entry-content ul {
    @apply list-disc;
}

.entry-content ol {
    @apply list-decimal;
}

.entry-content li {
    @apply text-gray-700 leading-7;
}

.entry-content blockquote {
    @apply border-l-4 border-blue-500 pl-6 py-3 my-6 bg-blue-50 rounded-r-lg italic text-gray-700;
}

.entry-content code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono text-pink-600;
}

.entry-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6;
}

.entry-content pre code {
    @apply bg-transparent text-gray-100 p-0;
}

.entry-content img {
    @apply rounded-lg shadow-md my-6 mx-auto;
}

.entry-content table {
    @apply w-full border-collapse my-6 shadow-sm;
}

.entry-content th {
    @apply bg-blue-600 text-white px-4 py-3 text-left font-semibold;
}

.entry-content td {
    @apply border border-gray-200 px-4 py-3 text-gray-700;
}

.entry-content tr:nth-child(even) {
    @apply bg-gray-50;
}

/* =================================
   POST META STYLING
================================= */
.entry-meta {
    @apply flex flex-wrap items-center gap-3 text-sm text-gray-600 mb-6;
}

.entry-meta .posted-on,
.entry-meta .byline,
.entry-meta .cat-links,
.entry-meta .comments-link {
    @apply flex items-center;
}

.entry-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight;
}

/* =================================
   HEADER & NAVIGATION
================================= */
.site-header {
    @apply shadow-sm bg-white sticky top-0 z-30;
}

.main-navigation {
    @apply bg-white;
}

.main-navigation a {
    @apply text-gray-700 hover:text-blue-600 transition-colors duration-200;
}

.main-navigation .current-menu-item > a {
    @apply text-blue-600 font-semibold;
}

/* =================================
   CARDS & POSTS GRID
================================= */
.post-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.post-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100;
}

.post-card:hover {
    @apply transform -translate-y-1;
}

.post-thumbnail {
    @apply relative overflow-hidden h-48;
}

.post-thumbnail img {
    @apply w-full h-full object-cover transition-transform duration-500;
}

.post-card:hover .post-thumbnail img {
    @apply scale-110;
}

/* =================================
   SIDEBAR WIDGETS
================================= */
.widget {
    @apply bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-100;
}

.widget-title {
    @apply text-xl font-bold text-gray-900 mb-4 pb-2 border-b-2 border-blue-500 flex items-center;
}

.widget ul {
    @apply space-y-2;
}

.widget li {
    @apply flex items-start;
}

.widget a {
    @apply text-gray-700 hover:text-blue-600 transition-colors duration-200 flex items-center;
}

/* =================================
   COMMENTS SECTION
================================= */
.comment-list {
    @apply space-y-6;
}

.comment {
    @apply bg-gray-50 rounded-lg p-6 border border-gray-200;
}

.comment-author {
    @apply font-semibold text-gray-900 flex items-center mb-2;
}

.comment-metadata {
    @apply text-sm text-gray-500 mb-3;
}

.comment-content {
    @apply text-gray-700 leading-7;
}

.comment-reply-link {
    @apply inline-flex items-center text-sm text-blue-600 hover:text-blue-800 font-semibold mt-3;
}

/* =================================
   FORMS
================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-semibold inline-flex items-center justify-center shadow-sm;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    @apply shadow-md transform -translate-y-0.5;
}

/* =================================
   SEARCH FORM
================================= */
.search-form {
    @apply relative;
}

.search-form input[type="search"] {
    @apply pr-12;
}

.search-form button,
.search-form input[type="submit"] {
    @apply absolute right-0 top-0 h-full px-4 rounded-l-none;
}

/* =================================
   PAGINATION
================================= */
.pagination {
    @apply flex justify-center items-center gap-2 my-8;
}

.page-numbers {
    @apply px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all duration-200;
}

.page-numbers.current {
    @apply bg-blue-600 text-white border-blue-600 font-semibold;
}

.page-numbers.dots {
    @apply hover:bg-white hover:text-gray-700 hover:border-gray-300;
}

/* =================================
   FOOTER
================================= */
.site-footer {
    @apply bg-gray-900 text-gray-300 py-12 mt-12;
}

.site-footer a {
    @apply text-gray-300 hover:text-white transition-colors duration-200;
}

.site-info {
    @apply text-center text-sm border-t border-gray-800 pt-6 mt-6;
}

/* =================================
   ADSENSE CONTAINERS
================================= */
.adsense-container {
    @apply my-8 mx-auto max-w-full;
}

.adsense-wrapper {
    @apply min-h-[90px] flex items-center justify-center;
}

/* Responsive ad sizes */
@media (max-width: 768px) {
    .adsense-wrapper {
        @apply min-h-[50px];
    }
}

/* =================================
   MOBILE OPTIMIZATIONS
================================= */
@media (max-width: 768px) {
    .entry-title {
        @apply text-2xl;
    }
    
    .entry-content h2 {
        @apply text-xl;
    }
    
    .entry-content h3 {
        @apply text-lg;
    }
    
    .site-content {
        @apply px-4;
    }
    
    .toc-container {
        @apply text-sm;
    }
}

/* =================================
   UTILITY CLASSES
================================= */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.section-spacing {
    @apply py-12 md:py-16 lg:py-20;
}

.card-shadow {
    @apply shadow-md hover:shadow-xl transition-shadow duration-300;
}

.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600;
}

.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* =================================
   DARK MODE SUPPORT (Optional)
================================= */
.dark-mode {
    @apply bg-gray-900 text-gray-100;
}

.dark-mode .site-header {
    @apply bg-gray-800 border-b border-gray-700;
}

.dark-mode .post-card,
.dark-mode .widget {
    @apply bg-gray-800 border-gray-700;
}

.dark-mode .entry-content {
    @apply text-gray-300;
}

/* =================================
   PRINT STYLES
================================= */
@media print {
    .no-print,
    .site-header,
    .site-footer,
    .social-share,
    .related-posts,
    .comments-area,
    #scroll-to-top,
    .adsense-container {
        @apply hidden;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    a {
        @apply text-black no-underline;
    }
}

/* =================================
   ACCESSIBILITY
================================= */
.skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-blue-600 focus:text-white focus:px-4 focus:py-2;
}

:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* =================================
   LOADING STATES
================================= */
.skeleton {
    @apply bg-gray-200 animate-pulse rounded;
}

.loading-spinner {
    @apply inline-block w-6 h-6 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin;
}

/* =================================
   CUSTOM SCROLLBAR
================================= */
::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full hover:bg-gray-500;
}

/* =================================
   PERFORMANCE OPTIMIZATIONS
================================= */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    @apply max-w-full h-auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}