/*
 * assets/css/blog.css — Plexify Theme
 * أنماط صفحات المدونة، المنشورات الفردية، التعليقات، الأرشيف، 404
 */

/* =============================================================
   VARIABLES (inherited from main.css)
   ============================================================= */
:root {
    --plexify-container-width: 1200px;
    --plexify-gap:             clamp(1.5rem, 4vw, 3rem);
}

/* =============================================================
   CONTAINER — يُستخدم في صفحات المدونة
   ============================================================= */
.plexify-container {
    max-width: var(--plexify-container-width);
    margin-inline: auto;
    padding-inline: var(--pad-x, clamp(1.25rem, 5vw, 5rem));
    padding-block:  var(--pad-section, clamp(4rem, 8vh, 7rem));
}

/* =============================================================
   BLOG / ARCHIVE LAYOUT
   ============================================================= */
.plexify-blog-layout,
.plexify-archive-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--plexify-gap);
}

@media (min-width: 1024px) {
    .plexify-blog-layout,
    .plexify-archive-layout {
        grid-template-columns: 2fr 1fr;
    }
}

/* =============================================================
   ARCHIVE HEADER
   ============================================================= */
.plexify-archive-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.5rem;
}

.plexify-archive-title {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 800;
    color:       var(--white, #fff);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.plexify-archive-desc {
    font-size: 0.95rem;
    color:     var(--muted, #9a9a9a);
    line-height: 1.7;
}

/* =============================================================
   POSTS GRID
   ============================================================= */
.plexify-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .plexify-posts-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .plexify-posts-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   POST CARD (content.php)
   ============================================================= */
.plexify-post-card {
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-card, 12px);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    border-color 0.28s ease, transform 0.28s ease;
}

.plexify-post-card:hover {
    border-color: rgba(110, 255, 106, 0.3);
    transform:    translateY(-4px);
}

.plexify-post-card__thumb {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
}

.plexify-post-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.plexify-post-card:hover .plexify-post-card__img {
    transform: scale(1.05);
}

.plexify-post-card__body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}

.plexify-post-card__meta {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    font-size:   0.72rem;
    color:       var(--muted, #9a9a9a);
    flex-wrap:   wrap;
}

.plexify-post-card__date { color: var(--lime, #6EFF6A); font-weight: 700; }

.plexify-post-card__title {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--white, #fff);
    line-height: 1.3;
}

.plexify-post-card__title a {
    color:      inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.plexify-post-card__title a:hover { color: var(--lime, #6EFF6A); }

.plexify-post-card__excerpt {
    font-size:   0.85rem;
    color:       var(--muted, #9a9a9a);
    line-height: 1.6;
}

.plexify-post-card__link {
    margin-top: auto;
    font-size:  0.82rem;
    font-weight: 700;
    color:      var(--lime, #6EFF6A);
    display:    inline-flex;
    align-items: center;
    gap:        0.3rem;
    transition: gap 0.2s ease;
}

.plexify-post-card__link:hover { gap: 0.5rem; }

/* =============================================================
   PAGINATION
   ============================================================= */
.nav-links {
    display:         flex;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      3rem;
    flex-wrap:       wrap;
}

.nav-links .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding-inline:  0.75rem;
    background:      var(--dark-2, #1a1a1a);
    border:          1px solid rgba(255, 255, 255, 0.1);
    border-radius:   8px;
    color:           var(--white, #fff);
    font-size:       0.88rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.2s ease, border-color 0.2s ease;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
    background:   var(--lime, #6EFF6A);
    border-color: var(--lime, #6EFF6A);
    color:        var(--dark, #0d0d0d);
}

/* =============================================================
   SINGLE POST
   ============================================================= */
.plexify-single-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--plexify-gap);
    align-items: start;
}

@media (min-width: 1024px) {
    .plexify-single-layout { grid-template-columns: 2fr 1fr; }
}

.plexify-single-post__header {
    margin-bottom: 2rem;
}

.plexify-single-post__cats {
    display:  flex;
    gap:      0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.plexify-single-post__title {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 800;
    color:       var(--white, #fff);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.plexify-single-post__meta {
    display:     flex;
    align-items: center;
    gap:         1rem;
    font-size:   0.82rem;
    color:       var(--muted, #9a9a9a);
    flex-wrap:   wrap;
}

.plexify-single-post__meta time { color: var(--lime, #6EFF6A); font-weight: 700; }

.plexify-single-post__thumbnail {
    border-radius: var(--radius-card, 12px);
    overflow:      hidden;
    margin-bottom: 2.5rem;
    aspect-ratio:  16 / 7;
}

.plexify-featured-image {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* محتوى المنشور الفردي */
.plexify-single-post__content {
    font-size:   1rem;
    line-height: 1.8;
    color:       rgba(255, 255, 255, 0.85);
}

.plexify-single-post__content h2,
.plexify-single-post__content h3,
.plexify-single-post__content h4 {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-weight: 700;
    color:       var(--white, #fff);
    margin-block: 1.5em 0.6em;
}

.plexify-single-post__content h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.plexify-single-post__content h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

.plexify-single-post__content p { margin-bottom: 1.2em; }

.plexify-single-post__content a {
    color: var(--lime, #6EFF6A);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.plexify-single-post__content ul,
.plexify-single-post__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2em;
}

.plexify-single-post__content li { margin-bottom: 0.4em; }

.plexify-single-post__content blockquote {
    border-left: 3px solid var(--lime, #6EFF6A);
    padding-left: 1.2rem;
    margin-inline: 0;
    color:  var(--muted, #9a9a9a);
    font-style: italic;
}

.plexify-single-post__content img {
    max-width:     100%;
    border-radius: 8px;
}

.plexify-single-post__content code {
    background:    rgba(110, 255, 106, 0.1);
    border:        1px solid rgba(110, 255, 106, 0.2);
    border-radius: 4px;
    padding:       0.1em 0.4em;
    font-size:     0.88em;
    color:         var(--lime, #6EFF6A);
}

.plexify-single-post__content pre {
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding:       1.2rem;
    overflow-x:    auto;
}

/* وسوم المنشور */
.plexify-single-post__tags {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plexify-tag {
    background:    rgba(110, 255, 106, 0.1);
    border:        1px solid rgba(110, 255, 106, 0.2);
    border-radius: 20px;
    padding:       0.25rem 0.75rem;
    font-size:     0.75rem;
    font-weight:   700;
    color:         var(--lime, #6EFF6A);
    text-decoration: none;
    transition:    background 0.2s ease;
}

.plexify-tag:hover { background: rgba(110, 255, 106, 0.2); }

/* روابط المنشور التالي/السابق */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-block: 3rem 1rem;
}

.nav-previous,
.nav-next {
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-card, 12px);
    padding:       1.2rem;
    transition:    border-color 0.2s ease;
}

.nav-previous:hover,
.nav-next:hover { border-color: rgba(110, 255, 106, 0.3); }

.nav-subtitle {
    display:    block;
    font-size:  0.7rem;
    color:      var(--muted, #9a9a9a);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}

.nav-title {
    display:     block;
    font-size:   0.9rem;
    font-weight: 700;
    color:       var(--white, #fff);
}

/* =============================================================
   SIDEBAR
   ============================================================= */
.plexify-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget {
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-card, 12px);
    padding:       1.5rem;
}

.widget__title {
    font-family:   var(--font-heading, 'Syne', sans-serif);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--white, #fff);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.widget ul { list-style: none; padding: 0; margin: 0; }

.widget ul li {
    padding-block: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size:     0.88rem;
}

.widget ul li a {
    color:      var(--muted, #9a9a9a);
    transition: color 0.2s ease;
}

.widget ul li a:hover { color: var(--lime, #6EFF6A); }

/* =============================================================
   COMMENTS
   ============================================================= */
.plexify-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plexify-comments__title {
    font-family:   var(--font-heading, 'Syne', sans-serif);
    font-size:     1.4rem;
    font-weight:   700;
    color:         var(--white, #fff);
    margin-bottom: 1.5rem;
}

.plexify-comments__list {
    list-style: none;
    padding:    0;
    margin:     0 0 2rem;
    display:    flex;
    flex-direction: column;
    gap: 1rem;
}

.plexify-comment {
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-card, 12px);
    padding:       1.25rem;
}

/* تعليقات مضمّنة */
.plexify-comment .children {
    list-style:  none;
    padding:     0;
    margin-top:  1rem;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(110, 255, 106, 0.2);
    display:     flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plexify-comment__meta {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap:     wrap;
}

.plexify-comment__avatar-img {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid rgba(110, 255, 106, 0.3);
}

.plexify-comment__author {
    font-weight: 700;
    font-size:   0.9rem;
    color:       var(--white, #fff);
}

.plexify-comment__date {
    font-size: 0.75rem;
    color:     var(--muted, #9a9a9a);
}

.plexify-comment__pending {
    font-size: 0.75rem;
    color:     #ffb347;
}

.plexify-comment__text {
    font-size:   0.9rem;
    line-height: 1.7;
    color:       rgba(255, 255, 255, 0.8);
}

.plexify-comment__text p { margin-bottom: 0.5em; }

.plexify-comment__actions {
    margin-top: 0.75rem;
    display:    flex;
    gap:        1rem;
    font-size:  0.78rem;
}

.plexify-reply-link a,
.plexify-edit-link a {
    color:      var(--lime, #6EFF6A);
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.plexify-reply-link a:hover,
.plexify-edit-link a:hover { opacity: 0.75; }

/* نموذج التعليق */
.comment-respond {
    margin-top: 2.5rem;
}

.comment-reply-title {
    font-family:   var(--font-heading, 'Syne', sans-serif);
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--white, #fff);
    margin-bottom: 0.5rem;
}

.plexify-comments__note {
    font-size:     0.82rem;
    color:         var(--muted, #9a9a9a);
    margin-bottom: 1.5rem;
}

.plexify-comment-field {
    margin-bottom: 1.1rem;
    display:       flex;
    flex-direction: column;
    gap:           0.35rem;
}

.plexify-comment-field label {
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--white, #fff);
}

.plexify-comment-field label span { color: var(--lime, #6EFF6A); }

.plexify-comment-field input,
.plexify-comment-field textarea {
    width:         100%;
    background:    var(--dark-2, #1a1a1a);
    border:        1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding:       0.7rem 1rem;
    color:         var(--white, #fff);
    font-family:   var(--font-body, 'DM Sans', sans-serif);
    font-size:     0.9rem;
    transition:    border-color 0.2s ease;
    outline:       none;
}

.plexify-comment-field input:focus,
.plexify-comment-field textarea:focus {
    border-color: var(--lime, #6EFF6A);
}

.plexify-comment-field textarea { resize: vertical; min-height: 130px; }

.form-submit { margin-top: 0.5rem; }

.form-submit .submit {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    background:     var(--lime, #6EFF6A);
    color:          var(--dark, #0d0d0d);
    font-family:    var(--font-body, 'DM Sans', sans-serif);
    font-weight:    700;
    font-size:      0.9rem;
    padding:        0.65rem 1.4rem;
    border:         none;
    border-radius:  50px;
    cursor:         pointer;
    transition:     background 0.25s ease, transform 0.2s ease;
}

.form-submit .submit:hover { background: var(--lime-dark, #52D84E); transform: scale(1.03); }

/* =============================================================
   PAGE — صفحات ثابتة
   ============================================================= */
.plexify-page-header {
    margin-bottom: 2rem;
}

.plexify-page-title {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    color:       var(--white, #fff);
    line-height: 1.1;
}

.plexify-page-thumbnail {
    border-radius: var(--radius-card, 12px);
    overflow:      hidden;
    margin-bottom: 2.5rem;
    aspect-ratio:  21 / 9;
}

.plexify-page-content {
    font-size:   1rem;
    line-height: 1.8;
    color:       rgba(255, 255, 255, 0.85);
}

/* =============================================================
   404 PAGE
   ============================================================= */
.plexify-404 {
    min-height: 80vh;
    display:    flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.plexify-404-content {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1.5rem;
}

.plexify-404-title {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   clamp(5rem, 20vw, 12rem);
    font-weight: 800;
    color:       var(--lime, #6EFF6A);
    line-height: 1;
    opacity:     0.2;
}

.plexify-404-subtitle {
    font-family: var(--font-heading, 'Syne', sans-serif);
    font-size:   clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color:       var(--white, #fff);
}

.plexify-404-text {
    font-size:  1rem;
    color:      var(--muted, #9a9a9a);
    max-width:  480px;
    line-height: 1.7;
}

.plexify-404-search {
    width:     100%;
    max-width: 440px;
    margin-top: 0.5rem;
}

/* =============================================================
   SEARCH FORM
   ============================================================= */
.plexify-search-form {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    background:  var(--dark-2, #1a1a1a);
    border:      1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding:     0.3rem 0.3rem 0.3rem 1.2rem;
    transition:  border-color 0.2s ease;
}

.plexify-search-form:focus-within { border-color: var(--lime, #6EFF6A); }

.plexify-search-form__label { flex: 1; }

.plexify-search-form__input {
    width:      100%;
    background: transparent;
    border:     none;
    outline:    none;
    color:      var(--white, #fff);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size:  0.9rem;
}

.plexify-search-form__input::placeholder { color: var(--muted, #9a9a9a); }

.plexify-search-form__btn {
    flex-shrink: 0;
    padding:     0.55rem 1rem;
}

/* =============================================================
   NO RESULTS
   ============================================================= */
.plexify-no-results {
    text-align:  center;
    padding:     4rem 1rem;
    color:       var(--muted, #9a9a9a);
}

.plexify-no-results h2 {
    font-family:   var(--font-heading, 'Syne', sans-serif);
    font-size:     2rem;
    font-weight:   700;
    color:         var(--white, #fff);
    margin-bottom: 1rem;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 767px) {
    .post-navigation { grid-template-columns: 1fr; }
    .plexify-404 { padding-block: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .plexify-post-card,
    .plexify-post-card__img { transition: none !important; }
}