// ==========================================================================
// PressZone Theme - Single Post Page Styles
// ==========================================================================
// Entry point - compiles to single.css
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

@import 'abstracts/variables';
@import 'abstracts/mixins';

// --------------------------------------------------------------------------
// Single Post Page Container
// --------------------------------------------------------------------------
.single-post-page {
    background: $light-bg-primary;

    body.dark-mode & {
        background: $dark-bg-primary;
    }
}

// --------------------------------------------------------------------------
// Article Header
// --------------------------------------------------------------------------
.article-header {
    background: $light-bg-secondary;
    border-bottom: 1px solid $light-border-color;

    body.dark-mode & {
        background: $dark-bg-secondary;
        border-bottom-color: $dark-border-color;
    }
}

.article-meta {
    font-size: 0.875rem;
}

.article-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: $color-primary;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
}

.article-title {
    color: $light-text-primary;
    line-height: 1.2;

    body.dark-mode & {
        color: $dark-text-primary;
    }

    @media (max-width: 768px) {
        font-size: 1.75rem;
    }
}

.article-excerpt {
    font-size: 1.125rem;
    line-height: 1.6;
    color: $light-text-secondary;

    body.dark-mode & {
        color: $dark-text-secondary;
    }
}

// --------------------------------------------------------------------------
// Author Bar
// --------------------------------------------------------------------------
.article-author-bar {
    padding-top: 1rem;
    border-top: 1px solid $light-border-color;

    body.dark-mode & {
        border-top-color: $dark-border-color;
    }

    @media (max-width: 576px) {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem !important;

        .article-date {
            margin-left: 0 !important;
        }
    }
}

.author-avatar {
    img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid $light-border-color;

        body.dark-mode & {
            border-color: $dark-border-color;
        }
    }
}

.author-info {
    .author-name {
        color: $light-text-primary;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }

    .author-title {
        font-size: 0.813rem;
    }
}

.article-date {
    font-size: 0.875rem;
}

// --------------------------------------------------------------------------
// Featured Image
// --------------------------------------------------------------------------
.article-featured-image {
    .featured-image-wrapper {
        margin: 0;
        overflow: hidden;
        border-radius: 0.75rem;
        box-shadow: $shadow-lg;

        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }
}

// --------------------------------------------------------------------------
// Article Content
// --------------------------------------------------------------------------
.article-content {
    background: $light-bg-primary;

    body.dark-mode & {
        background: $dark-bg-primary;
    }
}

.article-body {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: $light-text-primary;
    max-width: 100%;

    body.dark-mode & {
        color: $dark-text-primary;
    }

    * {
        max-width: 100%;
    }

    // Headings
    h2, h3, h4, h5, h6 {
        color: $light-text-primary;
        margin-top: 2rem;
        margin-bottom: 1rem;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 700;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid $light-border-color;

        body.dark-mode & {
            border-bottom-color: $dark-border-color;
        }
    }

    h3 {
        font-size: 1.375rem;
        font-weight: 600;
    }

    h4 {
        font-size: 1.125rem;
        font-weight: 600;
    }

    // Paragraphs
    p {
        margin-bottom: 1.5rem;
    }

    // Links
    a {
        color: $color-primary;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover {
            color: $color-primary-hover;
        }
    }

    // Lists
    ul, ol {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;

        li {
            margin-bottom: 0.5rem;
        }
    }

    ul {
        list-style-type: disc;

        ul {
            list-style-type: circle;
        }
    }

    ol {
        list-style-type: decimal;
    }

    // Blockquotes
    blockquote {
        margin: 2rem 0;
        padding: 1.5rem 2rem;
        background: $light-bg-secondary;
        border-left: 4px solid $color-primary;
        border-radius: 0 0.5rem 0.5rem 0;
        font-style: italic;
        color: $light-text-secondary;

        body.dark-mode & {
            background: $dark-bg-secondary;
            color: $dark-text-secondary;
        }

        p:last-child {
            margin-bottom: 0;
        }

        cite {
            display: block;
            margin-top: 1rem;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 600;
            color: $light-text-muted;

            body.dark-mode & {
                color: $dark-text-muted;
            }

            &::before {
                content: '— ';
            }
        }

        @include rtl {
            border-left: none;
            border-right: 4px solid $color-primary;
            border-radius: 0.5rem 0 0 0.5rem;
        }
    }

    // Code blocks
    pre {
        margin: 1.5rem 0;
        padding: 1.25rem;
        background: $light-bg-tertiary;
        border: 1px solid $light-border-color;
        border-radius: 0.5rem;
        overflow-x: auto;
        font-family: $font-family-mono;
        font-size: 0.875rem;
        line-height: 1.6;

        body.dark-mode & {
            background: $dark-bg-tertiary;
            border-color: $dark-border-color;
        }

        code {
            background: none;
            padding: 0;
            font-size: inherit;
        }
    }

    code {
        padding: 0.125rem 0.375rem;
        background: rgba($color-primary, 0.1);
        border-radius: 0.25rem;
        font-family: $font-family-mono;
        font-size: 0.875em;
        color: $color-primary;
    }

    // Images
    img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
    }

    figure {
        margin: 2rem 0;

        img {
            display: block;
            width: 100%;
        }

        figcaption {
            margin-top: 0.75rem;
            font-size: 0.875rem;
            color: $light-text-muted;
            text-align: center;

            body.dark-mode & {
                color: $dark-text-muted;
            }
        }
    }

    // Tables
    table {
        width: 100%;
        margin: 1.5rem 0;
        border-collapse: collapse;
        font-size: 0.9375rem;

        th, td {
            padding: 0.75rem 1rem;
            text-align: left;
            border: 1px solid $light-border-color;

            body.dark-mode & {
                border-color: $dark-border-color;
            }

            @include rtl {
                text-align: right;
            }
        }

        th {
            background: $light-bg-secondary;
            font-weight: 600;
            color: $light-text-primary;

            body.dark-mode & {
                background: $dark-bg-secondary;
                color: $dark-text-primary;
            }
        }

        tr:nth-child(even) td {
            background: $light-bg-secondary;

            body.dark-mode & {
                background: $dark-bg-secondary;
            }
        }
    }

    // Horizontal rule
    hr {
        margin: 2.5rem 0;
        border: none;
        border-top: 1px solid $light-border-color;

        body.dark-mode & {
            border-top-color: $dark-border-color;
        }
    }

    // WordPress specific
    .wp-block-image {
        margin: 2rem 0;

        &.aligncenter {
            text-align: center;
        }

        &.alignleft {
            float: left;
            margin-right: 1.5rem;
            margin-bottom: 1rem;
        }

        &.alignright {
            float: right;
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
    }

    .wp-caption {
        max-width: 100%;
    }

    .wp-caption-text {
        font-size: 0.875rem;
        color: $light-text-muted;
        text-align: center;
        margin-top: 0.5rem;

        body.dark-mode & {
            color: $dark-text-muted;
        }
    }
}

// --------------------------------------------------------------------------
// Article Tags
// --------------------------------------------------------------------------
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid $light-border-color;

    body.dark-mode & {
        border-top-color: $dark-border-color;
    }
}

.article-tag {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: $light-bg-secondary;
    border: 1px solid $light-border-color;
    border-radius: 50px;
    font-size: 0.813rem;
    color: $light-text-secondary;
    text-decoration: none;
    transition: all $transition-base;

    &:hover {
        background: $color-primary;
        border-color: $color-primary;
        color: #fff;
    }

    body.dark-mode & {
        background: $dark-bg-secondary;
        border-color: $dark-border-color;
        color: $dark-text-secondary;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}

// --------------------------------------------------------------------------
// Article Sidebar
// --------------------------------------------------------------------------
.article-sidebar {
    padding-top: 2rem;

    @media (min-width: 992px) {
        padding-top: 0;
        top: 100px;
    }
}

// --------------------------------------------------------------------------
// Author Bio Section
// --------------------------------------------------------------------------
.author-bio {
    background: $light-bg-secondary;
    border-top: 1px solid $light-border-color;

    body.dark-mode & {
        background: $dark-bg-secondary;
        border-top-color: $dark-border-color;
    }
}

.author-bio-card {
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;
    transition: all $transition-base;

    &:hover {
        border-color: $light-border-light;
        box-shadow: $shadow-md;
    }

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;

        &:hover {
            border-color: $dark-border-light;
        }
    }

    @media (max-width: 576px) {
        .d-flex {
            flex-direction: column;
            text-align: center;
        }
    }
}

.author-bio-avatar {
    img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid $light-border-color;

        body.dark-mode & {
            border-color: $dark-border-color;
        }
    }
}

.author-bio-content {
    h4 {
        color: $light-text-primary;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }

    p {
        line-height: 1.6;
    }
}

// --------------------------------------------------------------------------
// Post Navigation
// --------------------------------------------------------------------------
.post-navigation {
    padding: 2rem 0;
    border-top: 1px solid $light-border-color;
    background: $light-bg-primary;

    body.dark-mode & {
        border-top-color: $dark-border-color;
        background: $dark-bg-primary;
    }

    .nav-links {
        display: flex;
        justify-content: space-between;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 1rem;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: 1.5rem;
        }
    }

    .nav-previous,
    .nav-next {
        flex: 1;
        max-width: 45%;

        @media (max-width: 768px) {
            max-width: 100%;
        }
    }

    .nav-next {
        text-align: right;

        @include rtl {
            text-align: left;
        }
    }

    a {
        display: block;
        padding: 1rem 1.5rem;
        background: $light-bg-card;
        border: 1px solid $light-border-color;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: all $transition-base;

        &:hover {
            border-color: $color-primary;
            box-shadow: $shadow-md;

            .nav-title {
                color: $color-primary;
            }
        }

        body.dark-mode & {
            background: $dark-bg-card;
            border-color: $dark-border-color;
        }
    }

    .nav-subtitle {
        display: block;
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .nav-title {
        display: block;
        font-weight: 600;
        color: $light-text-primary;
        transition: color $transition-base;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }
}

// --------------------------------------------------------------------------
// Comments Section
// --------------------------------------------------------------------------
.comments-section {
    background: $light-bg-secondary;
    border-top: 1px solid $light-border-color;

    body.dark-mode & {
        background: $dark-bg-secondary;
        border-top-color: $dark-border-color;
    }
}

// Comments title
.comments-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: $light-text-primary;
    margin-bottom: 2rem;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

// Comment list
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    margin-bottom: 1.5rem;

    &.depth-2,
    &.depth-3,
    &.depth-4 {
        margin-left: 2rem;

        @include rtl {
            margin-left: 0;
            margin-right: 2rem;
        }

        @media (max-width: 576px) {
            margin-left: 1rem;

            @include rtl {
                margin-left: 0;
                margin-right: 1rem;
            }
        }
    }
}

.comment-body {
    padding: 1.5rem;
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .fn {
        font-weight: 600;
        color: $light-text-primary;

        body.dark-mode & {
            color: $dark-text-primary;
        }

        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: $color-primary;
            }
        }
    }

    .says {
        display: none;
    }
}

.comment-metadata {
    font-size: 0.813rem;
    color: $light-text-muted;
    margin-bottom: 1rem;

    body.dark-mode & {
        color: $dark-text-muted;
    }

    a {
        color: inherit;
        text-decoration: none;

        &:hover {
            color: $color-primary;
        }
    }
}

.comment-content {
    color: $light-text-secondary;
    line-height: 1.6;

    body.dark-mode & {
        color: $dark-text-secondary;
    }

    p:last-child {
        margin-bottom: 0;
    }
}

.reply {
    margin-top: 1rem;

    .comment-reply-link {
        font-size: 0.813rem;
        font-weight: 500;
        color: $color-primary;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

// Comment form
.comment-respond {
    margin-top: 2rem;
    padding: 2rem;
    background: $light-bg-card;
    border: 1px solid $light-border-color;
    border-radius: 0.75rem;

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

.comment-reply-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: $light-text-primary;
    margin-bottom: 1.5rem;

    body.dark-mode & {
        color: $dark-text-primary;
    }

    small {
        font-size: 0.875rem;
        font-weight: 400;

        a {
            color: $color-primary;
        }
    }
}

.comment-form {
    label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: $light-text-primary;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }

    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background: $light-bg-primary;
        border: 1px solid $light-border-color;
        border-radius: 0.5rem;
        color: $light-text-primary;
        font-size: 1rem;
        transition: border-color $transition-base;

        &:focus {
            outline: none;
            border-color: $color-primary;
        }

        body.dark-mode & {
            background: $dark-bg-primary;
            border-color: $dark-border-color;
            color: $dark-text-primary;
        }
    }

    textarea {
        min-height: 150px;
        resize: vertical;
    }

    .comment-form-comment,
    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        margin-bottom: 1rem;
    }

    .form-submit {
        margin-top: 1.5rem;
        margin-bottom: 0;
    }

    .submit {
        padding: 0.75rem 2rem;
        background: $color-primary;
        border: none;
        border-radius: 0.5rem;
        color: #fff;
        font-weight: 600;
        cursor: pointer;
        transition: all $transition-base;

        &:hover {
            background: $color-primary-hover;
        }
    }
}

// --------------------------------------------------------------------------
// RTL Support
// --------------------------------------------------------------------------
@include rtl {
    .article-author-bar {
        .article-date {
            margin-left: 0;
            margin-right: auto;
        }
    }

    .article-tags {
        direction: rtl;
    }
}