/*
Theme Name: MaxGate Glass
Theme URI: https://maxgate.io
Description: A glassmorphism Tailwind-based blog theme matching the redesigned MaxGate landing page and dashboard. Translucent cards, blurred backgrounds and the blue→cyan accent gradient.
Version: 3.0
Author: MaxGate Team
Author URI: https://maxgate.io
*/

/* 
  Since we are using the Tailwind CDN in header.php, 
  we only need minimal custom CSS overrides here. 
  Most styling will be handled by Tailwind utility classes directly in the PHP templates.
*/

/* WordPress Core Alignment Classes */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.maxgate-line-clamp-2,
.maxgate-line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.maxgate-line-clamp-2 {
    -webkit-line-clamp: 2;
}

.maxgate-line-clamp-3 {
    -webkit-line-clamp: 3;
}

.maxgate-line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
}

/* ============================================================
   Glass theme — card reveal on load (matches dashboard motion)
   ============================================================ */
@keyframes mg-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.mg-reveal {
    animation: mg-card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.mg-reveal-grid > * {
    animation: mg-card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.mg-reveal-grid > *:nth-child(1)  { animation-delay: 0.05s; }
.mg-reveal-grid > *:nth-child(2)  { animation-delay: 0.10s; }
.mg-reveal-grid > *:nth-child(3)  { animation-delay: 0.15s; }
.mg-reveal-grid > *:nth-child(4)  { animation-delay: 0.20s; }
.mg-reveal-grid > *:nth-child(5)  { animation-delay: 0.25s; }
.mg-reveal-grid > *:nth-child(6)  { animation-delay: 0.30s; }
.mg-reveal-grid > *:nth-child(n+7) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    .mg-reveal,
    .mg-reveal-grid > * {
        animation: none !important;
    }
}

.maxgate-mobile-related-snippet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-sidebar-card][hidden] {
    display: none !important;
}

[data-sidebar-card] {
    flex-shrink: 0;
}

/* 1. Сброс всех дефолтных рамок Tailwind Typography */
.prose table, 
.prose thead, 
.prose tbody, 
.prose tr, 
.prose th, 
.prose td {
    border: none !important;
}

/* 2. Современные стили для таблиц со скругленными углами */
.prose table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 2.5rem 0 !important;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 3. Шапка таблицы */
.prose table th {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #111827 !important;
    font-weight: 600 !important;
    padding: 1rem 1.25rem !important;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 4. Ячейки с данными */
.prose table td {
    padding: 1rem 1.25rem !important;
    vertical-align: top;
    color: #374151 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 5. Убираем "внутренние" правые границы у крайнего правого столбца */
.prose table th:last-child,
.prose table td:last-child {
    border-right: none !important;
}

/* 6. Убираем "внутреннюю" нижнюю границу у самого нижнего ряда */
.prose table tr:last-child td {
    border-bottom: none !important;
}

/* 7. Подсветка строк для визуального удобства */
.prose table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.prose table tbody tr {
    transition: background-color 0.2s ease;
}

.prose table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* 8. Темная тема (Dark mode) */
@media (prefers-color-scheme: dark) {
    .prose table {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .prose table th {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .prose table td {
        color: #e5e7eb !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .prose table tbody tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }
    
    .prose table tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.07) !important;
    }
}