/**
 * Persian Date Display - Front-end Styles
 *
 * @package    PersianDateFront
 * @author     Your Name
 * @version    1.0.0
 * 
 * Table of Contents:
 * 1. RTL General Fixes
 * 2. Post Dates
 * 3. Comment Dates
 * 4. WooCommerce Dates
 * 5. Archive & Calendar Widget
 * 6. Responsive Enhancements
 * 7. Persian Typography Micro-interactions
 */

/* ============================================
   1. RTL GENERAL FIXES
   ============================================ */

/* Force RTL direction for date elements */
.post-date,
.entry-date,
.entry-meta .date,
.post-meta time,
.published-date,
.article-date,
.single-date,
.posted-on,
.posted-on time,
time.entry-date,
.entry-time,
.post-time,
.publish-date,
.article-post-date,
.post-published,
.post-metadata time,
.meta-date,
.date-meta,
.entry-published,
.post-publish-date {
    direction: rtl !important;
    unicode-bidi: embed !important;
    font-family: inherit, 'IRANSans', 'Vazir', 'Shabnam', 'Sahel', 'Yekan', 'Tahoma', sans-serif !important;
}

/* Fix spacing around date icons in RTL */
.post-date i,
.entry-date i,
.post-meta i[class*="fa-calendar"],
.post-meta i[class*="fa-clock"],
.post-meta .dashicons-calendar,
.post-meta .dashicons-clock {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* Fix date separators for RTL */
.post-meta .sep,
.entry-meta .sep,
.meta-separator {
    margin: 0 5px !important;
}

/* Ensure date tooltips don't break layout */
time[title],
.post-date[title],
.entry-date[title] {
    cursor: help;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

time[title]:hover,
.post-date[title]:hover,
.entry-date[title]:hover {
    border-bottom-color: #2196F3;
    color: #1565C0;
}


/* ============================================
   2. POST DATES
   ============================================ */

/* Modern card-style date badge - virally attractive */
.post-date-badge,
.entry-date-badge,
.article-date-badge,
.post-date-stamp,
.date-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2);
    direction: rtl;
}

.post-date-badge:hover,
.entry-date-badge:hover,
.date-stamp:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

/* Gradient variant - sunset theme */
.post-date-sunset,
.entry-date-sunset {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

.post-date-sunset:hover,
.entry-date-sunset:hover {
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.6);
}

/* Gradient variant - ocean theme */
.post-date-ocean,
.entry-date-ocean {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.post-date-ocean:hover,
.entry-date-ocean:hover {
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.6);
}

/* Pulse animation for "new" posts */
.post-date-new,
.entry-date-new {
    animation: datePulse 2s ease-in-out infinite;
}

@keyframes datePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(102, 126, 234, 0.8);
        transform: translateY(-2px);
    }
}

/* Post date in blog list/grid */
.blog .post-date,
.archive .post-date,
.posts-list .post-date,
.post-grid .post-date,
.blog-list .entry-date,
.posts-archive .entry-date {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    direction: rtl;
}

/* Single post page - highlighted date */
.single .entry-date,
.single .post-date,
.single-post .post-meta time {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    background: #f8f9fa;
    padding: 6px 15px;
    border-radius: 30px;
    display: inline-block;
    border: 2px solid #e9ecef;
    direction: rtl;
}


/* ============================================
   3. COMMENT DATES
   ============================================ */

/* Comment metadata - beautiful Persian style */
.comment-metadata time,
.comment-meta time,
.comment-date,
.comment-time,
.comment-meta .comment-date,
.comment-metadata .comment-time {
    font-size: 12px;
    color: #888;
    font-style: normal;
    direction: rtl;
    unicode-bidi: embed;
}

/* Comment date with Persian micro-interaction */
.comment-metadata a,
.comment-meta a {
    color: #6c757d;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 13px;
    direction: rtl;
    display: inline-block;
}

.comment-metadata a:hover,
.comment-meta a:hover {
    color: #495057;
    transform: translateX(-3px);
}

.comment-metadata a::before,
.comment-meta a::before {
    content: '🕐 ';
    font-size: 11px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.comment-metadata a:hover::before,
.comment-meta a:hover::before {
    opacity: 1;
}

/* Human time diff badge (e.g., "۳ ساعت پیش") */
.comment-time-diff,
.human-time-diff,
.relative-time {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    direction: rtl;
    animation: fadeInUp 0.5s ease;
}

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

/* Comment list styling */
.comment-list .comment-body {
    position: relative;
}

.comment-list .comment-metadata {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

/* Nested comments - indent with Persian touch */
.comment-list .children {
    border-right: 3px solid #667eea;
    margin-right: 30px;
    padding-right: 20px;
    margin-top: 15px;
}


/* ============================================
   4. WOOCOMMERCE DATES
   ============================================ */

/* Order date in My Account > Orders */
.woocommerce-orders-table__cell-order-date,
.woocommerce-MyAccount-orders .order-date,
.woocommerce-orders-table .order-date,
.order-date,
.woocommerce-order-details .order-date {
    direction: rtl !important;
    unicode-bidi: embed !important;
    font-family: inherit, 'IRANSans', 'Vazir', 'Tahoma', sans-serif !important;
}

/* Order date badge in My Account */
.woocommerce-orders-table__cell-order-date {
    font-weight: 600;
    color: #495057;
}

/* Order details page - the date block */
.woocommerce-order-details .woocommerce-order-overview__date date {
    direction: rtl;
    font-weight: 700;
    color: #333;
}

/* Product review dates */
.woocommerce-review__published-date,
.comment-meta .woocommerce-review__published-date,
.woocommerce .review-date,
.product-review-date {
    direction: rtl !important;
    font-size: 12px !important;
    color: #999 !important;
}

/* Sale badge dates */
.onsale,
.woocommerce .onsale {
    direction: rtl !important;
    font-family: inherit, 'IRANSans', 'Vazir', 'Tahoma', sans-serif !important;
}

/* Cart and checkout date displays */
.woocommerce-cart .cart-date,
.woocommerce-checkout .order-date,
.cart-totals .date-info {
    direction: rtl;
}


/* ============================================
   5. ARCHIVE & CALENDAR WIDGET
   ============================================ */

/* Archive page titles */
.archive .page-title,
.archive .archive-title,
.archive-description {
    direction: rtl;
}

.archive .page-title span,
.archive .archive-title span {
    color: #667eea;
    font-weight: 700;
}

/* Calendar widget - complete RTL overhaul */
.widget_calendar table,
.calendar_widget table,
.wp-calendar-table {
    direction: rtl;
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.widget_calendar caption,
.calendar_widget caption,
.wp-calendar-table caption {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    direction: rtl;
}

.widget_calendar th,
.calendar_widget th,
.wp-calendar-table th {
    background: #f8f9fa;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.widget_calendar td,
.calendar_widget td,
.wp-calendar-table td {
    text-align: center;
    padding: 8px;
    transition: all 0.2s ease;
    direction: rtl;
}

.widget_calendar td a,
.calendar_widget td a,
.wp-calendar-table td a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #667eea;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

.widget_calendar td a:hover,
.calendar_widget td a:hover,
.wp-calendar-table td a:hover {
    background: #764ba2;
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.5);
    transform: scale(1.15);
}

/* Today's date highlight */
.widget_calendar td#today,
.calendar_widget td#today,
.wp-calendar-table td#today {
    background: #e8f5e9;
    font-weight: 700;
    border: 2px solid #4caf50;
    border-radius: 50%;
}

/* Calendar navigation */
.widget_calendar nav,
.calendar_widget nav,
.wp-calendar-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    direction: rtl;
}

.widget_calendar nav a,
.calendar_widget nav a,
.wp-calendar-nav a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.widget_calendar nav a:hover,
.calendar_widget nav a:hover,
.wp-calendar-nav a:hover {
    color: #764ba2;
}


/* ============================================
   6. RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Mobile: make dates more readable */
@media (max-width: 768px) {
    .post-date-badge,
    .entry-date-badge,
    .date-stamp {
        font-size: 12px;
        padding: 6px 12px;
    }

    .single .entry-date,
    .single .post-date,
    .single-post .post-meta time {
        font-size: 13px;
        padding: 5px 12px;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .comment-metadata time,
    .comment-meta time {
        display: block;
        margin-top: 5px;
    }

    .comment-list .children {
        margin-right: 15px;
        padding-right: 10px;
    }

    .widget_calendar td a,
    .calendar_widget td a,
    .wp-calendar-table td a {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 11px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .post-date-badge,
    .entry-date-badge {
        font-size: 11px;
        padding: 4px 10px;
        gap: 4px;
    }

    .widget_calendar table,
    .wp-calendar-table {
        font-size: 11px;
    }

    .widget_calendar caption,
    .wp-calendar-table caption {
        font-size: 14px;
        padding: 8px;
    }
}


/* ============================================
   7. PERSIAN TYPOGRAPHY MICRO-INTERACTIONS
   ============================================ */

/* Animated underline for dates */
.post-date-animated,
.entry-date-animated {
    position: relative;
    text-decoration: none;
    color: #333;
    padding-bottom: 4px;
}

.post-date-animated::after,
.entry-date-animated::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 2px;
}

.post-date-animated:hover::after,
.entry-date-animated:hover::after {
    width: 100%;
}

/* Glowing date for featured posts */
.featured-post .post-date,
.sticky .post-date,
.featured .entry-date,
.sticky .entry-date {
    color: #ff6f00 !important;
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from {
        text-shadow: 0 0 5px rgba(255, 111, 0, 0.3);
    }
    to {
        text-shadow: 0 0 20px rgba(255, 111, 0, 0.6), 0 0 40px rgba(255, 111, 0, 0.3);
    }
}

/* Date ribbon style - viral attraction */
.date-ribbon {
    position: relative;
    display: inline-block;
    background: #ff4757;
    color: white;
    padding: 8px 20px 8px 30px;
    font-weight: 700;
    font-size: 14px;
    direction: rtl;
    clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
    animation: ribbonWave 3s ease-in-out infinite;
}

@keyframes ribbonWave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1deg);
    }
    75% {
        transform: rotate(-1deg);
    }
}

/* Date with Persian-inspired pattern */
.date-persian-pattern {
    position: relative;
    padding: 10px 15px;
    background: #fdf5e6;
    border: 2px solid #d4a574;
    border-radius: 8px;
    color: #8b5e3c;
    font-weight: 600;
    direction: rtl;
    overflow: hidden;
}

.date-persian-pattern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(212, 165, 116, 0.1) 10px,
        rgba(212, 165, 116, 0.1) 20px
    );
    animation: patternMove 20s linear infinite;
    pointer-events: none;
}

@keyframes patternMove {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Print styles */
@media print {
    .post-date,
    .entry-date,
    .comment-metadata time,
    .woocommerce-orders-table__cell-order-date {
        direction: rtl !important;
        color: #000 !important;
        background: none !important;
    }
}