/**
 * ============================================================================
 * NETT CUSTOM CSS — SINGLE POST
 * ============================================================================
 *
 * Applies to: single post pages (is_single())
 * Depends on: _master-variables.css or _master-variables-[project-id].css
 *
 * PRIORITY: Font families & color palette are the most critical declarations.
 * All rules here reference CSS custom properties from _master-variables so
 * switching a project's palette/fonts automatically updates this file.
 * ============================================================================
 */

/* ============================================================
 * BASE TYPOGRAPHY — highest priority for font rendering
 * ============================================================ */
.single-post,
.single-post body {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    font-weight: var(--nett-body-weight);
    line-height: var(--nett-body-line-height);
    letter-spacing: var(--nett-body-tracking);
    color: var(--nett-body-color);
    background-color: var(--nett-bg-primary);
}

/* ============================================================
 * POST HEADER / TITLE AREA
 * ============================================================ */
.single-post .entry-header,
.single-post .post-header,
.single-post article > header {
    margin-bottom: var(--nett-space-8);
    padding-bottom: var(--nett-space-6);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

/* Post Title — uses display font & primary color family */
.single-post .entry-title,
.single-post .post-title,
.single-post h1.title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h1-size);
    font-weight: var(--nett-h1-weight);
    line-height: var(--nett-h1-line-height);
    letter-spacing: var(--nett-h1-tracking);
    color: var(--nett-h1-color);
    margin-top: 0;
    margin-bottom: var(--nett-space-4);
}

/* Post Meta (date, author, categories) */
.single-post .entry-meta,
.single-post .post-meta {
    font-family: var(--nett-font-meta);
    font-size: var(--nett-meta-size);
    font-weight: var(--nett-meta-weight);
    line-height: var(--nett-meta-line-height);
    color: var(--nett-meta-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-gap-sm);
    align-items: center;
}

.single-post .entry-meta a,
.single-post .post-meta a {
    color: var(--nett-text-link);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.single-post .entry-meta a:hover,
.single-post .post-meta a:hover {
    color: var(--nett-text-link-hover);
    text-decoration: underline;
}

/* Category/Tag Badges in meta */
.single-post .entry-meta .cat-links a,
.single-post .entry-meta .tags-links a,
.single-post .post-meta .cat-links a {
    display: inline-block;
    padding: var(--nett-badge-padding);
    background-color: var(--nett-primary-50);
    color: var(--nett-primary-700);
    border-radius: var(--nett-badge-radius);
    font-size: var(--nett-badge-font-size);
    font-weight: var(--nett-badge-font-weight);
    font-family: var(--nett-font-badge);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.single-post .entry-meta .cat-links a:hover,
.single-post .entry-meta .tags-links a:hover {
    background-color: var(--nett-primary);
    color: var(--nett-white);
}

/* Featured Image */
.single-post .post-thumbnail,
.single-post .entry-thumbnail,
.single-post figure.wp-block-post-featured-image {
    margin-bottom: var(--nett-space-8);
    border-radius: var(--nett-card-radius);
    overflow: hidden;
    box-shadow: var(--nett-shadow-md);
}

.single-post .post-thumbnail img,
.single-post .entry-thumbnail img,
.single-post figure.wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
 * POST CONTENT — BODY TYPOGRAPHY (HIGHEST PRIORITY)
 * ============================================================ */
.single-post .entry-content,
.single-post .post-content {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    font-weight: var(--nett-body-weight);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    max-width: 75ch;
}

/* Headings inside content */
.single-post .entry-content h1,
.single-post .post-content h1 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h1-size);
    font-weight: var(--nett-h1-weight);
    line-height: var(--nett-h1-line-height);
    letter-spacing: var(--nett-h1-tracking);
    color: var(--nett-h1-color);
    margin: var(--nett-space-10) 0 var(--nett-space-4);
}

.single-post .entry-content h2,
.single-post .post-content h2 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-h2-weight);
    line-height: var(--nett-h2-line-height);
    letter-spacing: var(--nett-h2-tracking);
    color: var(--nett-h2-color);
    margin: var(--nett-space-8) 0 var(--nett-space-4);
    padding-bottom: var(--nett-space-2);
    border-bottom: var(--nett-border-2) solid var(--nett-primary-100);
}

.single-post .entry-content h3,
.single-post .post-content h3 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h3-size);
    font-weight: var(--nett-h3-weight);
    line-height: var(--nett-h3-line-height);
    letter-spacing: var(--nett-h3-tracking);
    color: var(--nett-h3-color);
    margin: var(--nett-space-6) 0 var(--nett-space-3);
}

.single-post .entry-content h4,
.single-post .post-content h4 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    line-height: var(--nett-h4-line-height);
    color: var(--nett-h4-color);
    margin: var(--nett-space-5) 0 var(--nett-space-2);
}

.single-post .entry-content h5,
.single-post .post-content h5 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h5-size);
    font-weight: var(--nett-h5-weight);
    line-height: var(--nett-h5-line-height);
    color: var(--nett-h5-color);
    margin: var(--nett-space-4) 0 var(--nett-space-2);
}

.single-post .entry-content h6,
.single-post .post-content h6 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h6-size);
    font-weight: var(--nett-h6-weight);
    line-height: var(--nett-h6-line-height);
    color: var(--nett-h6-color);
    margin: var(--nett-space-4) 0 var(--nett-space-2);
}

/* Paragraphs */
.single-post .entry-content p,
.single-post .post-content p {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    margin-bottom: var(--nett-space-5);
}

/* Lead / intro paragraph */
.single-post .entry-content .lead,
.single-post .entry-content > p:first-of-type {
    font-family: var(--nett-font-lead);
    font-size: var(--nett-lead-size);
    font-weight: var(--nett-lead-weight);
    line-height: var(--nett-lead-line-height);
    color: var(--nett-lead-color);
}

/* Links */
.single-post .entry-content a,
.single-post .post-content a {
    color: var(--nett-text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--nett-transition-colors);
}

.single-post .entry-content a:hover,
.single-post .post-content a:hover {
    color: var(--nett-text-link-hover);
}

/* Lists */
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .post-content ul,
.single-post .post-content ol {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    padding-left: var(--nett-space-6);
    margin-bottom: var(--nett-space-5);
}

.single-post .entry-content li,
.single-post .post-content li {
    margin-bottom: var(--nett-space-2);
}

/* Blockquote */
.single-post .entry-content blockquote,
.single-post .post-content blockquote {
    font-family: var(--nett-font-quote);
    font-size: var(--nett-quote-size);
    font-weight: var(--nett-quote-weight);
    font-style: var(--nett-quote-style);
    line-height: var(--nett-quote-line-height);
    color: var(--nett-quote-color);
    border-left: var(--nett-quote-border-width) solid var(--nett-quote-border-color);
    padding: var(--nett-space-4) var(--nett-space-6);
    margin: var(--nett-space-6) 0;
    background-color: var(--nett-primary-50);
    border-radius: 0 var(--nett-radius-md) var(--nett-radius-md) 0;
}

.single-post .entry-content blockquote cite,
.single-post .post-content blockquote cite {
    font-family: var(--nett-font-caption);
    font-size: var(--nett-caption-size);
    font-style: normal;
    color: var(--nett-text-muted);
    display: block;
    margin-top: var(--nett-space-2);
}

/* Inline Code */
.single-post .entry-content code,
.single-post .post-content code {
    font-family: var(--nett-font-mono);
    font-size: var(--nett-code-size);
    color: var(--nett-code-color);
    background-color: var(--nett-code-bg);
    padding: var(--nett-code-padding);
    border-radius: var(--nett-code-radius);
}

/* Code Block */
.single-post .entry-content pre,
.single-post .post-content pre {
    font-family: var(--nett-font-mono);
    font-size: var(--nett-text-sm);
    background-color: var(--nett-bg-dark);
    color: var(--nett-gray-100);
    padding: var(--nett-space-5);
    border-radius: var(--nett-radius-lg);
    overflow-x: auto;
    margin: var(--nett-space-6) 0;
    box-shadow: var(--nett-shadow-inner);
}

.single-post .entry-content pre code,
.single-post .post-content pre code {
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

/* Tables */
.single-post .entry-content table,
.single-post .post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--nett-space-6) 0;
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
}

.single-post .entry-content thead tr,
.single-post .post-content thead tr {
    background-color: var(--nett-primary);
    color: var(--nett-white);
}

.single-post .entry-content th,
.single-post .post-content th {
    font-family: var(--nett-font-label);
    font-weight: var(--nett-font-semibold);
    letter-spacing: var(--nett-tracking-wide);
    text-align: left;
    padding: var(--nett-space-3) var(--nett-space-4);
}

.single-post .entry-content td,
.single-post .post-content td {
    padding: var(--nett-space-3) var(--nett-space-4);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
    color: var(--nett-body-color);
}

.single-post .entry-content tbody tr:nth-child(even),
.single-post .post-content tbody tr:nth-child(even) {
    background-color: var(--nett-bg-secondary);
}

.single-post .entry-content tbody tr:hover,
.single-post .post-content tbody tr:hover {
    background-color: var(--nett-primary-50);
}

/* Images inside content */
.single-post .entry-content img,
.single-post .post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nett-radius-lg);
}

.single-post .entry-content figure,
.single-post .post-content figure {
    margin: var(--nett-space-6) 0;
}

.single-post .entry-content figcaption,
.single-post .post-content figcaption {
    font-family: var(--nett-font-caption);
    font-size: var(--nett-caption-size);
    color: var(--nett-caption-color);
    letter-spacing: var(--nett-tracking-wide);
    text-align: center;
    margin-top: var(--nett-space-2);
}

/* Horizontal Rule */
.single-post .entry-content hr,
.single-post .post-content hr {
    border: 0;
    border-top: var(--nett-border-1) solid var(--nett-border-color);
    margin: var(--nett-space-8) 0;
}

/* ============================================================
 * POST FOOTER / TAGS / SHARE
 * ============================================================ */
.single-post .entry-footer,
.single-post .post-footer {
    margin-top: var(--nett-space-8);
    padding-top: var(--nett-space-6);
    border-top: var(--nett-border-1) solid var(--nett-border-color);
    font-family: var(--nett-font-meta);
    font-size: var(--nett-meta-size);
    color: var(--nett-meta-color);
}

.single-post .entry-footer .tags-links a,
.single-post .post-footer .tags-links a {
    display: inline-block;
    padding: var(--nett-badge-padding);
    margin: 0 var(--nett-space-1) var(--nett-space-1) 0;
    background-color: var(--nett-tag-bg);
    color: var(--nett-tag-text);
    border-radius: var(--nett-badge-radius);
    font-size: var(--nett-badge-font-size);
    font-weight: var(--nett-badge-font-weight);
    font-family: var(--nett-font-badge);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.single-post .entry-footer .tags-links a:hover,
.single-post .post-footer .tags-links a:hover {
    background-color: var(--nett-tag-hover-bg);
    color: var(--nett-tag-hover-text);
}

/* ============================================================
 * AUTHOR BOX
 * ============================================================ */
.single-post .author-box,
.single-post .post-author {
    display: flex;
    gap: var(--nett-space-5);
    padding: var(--nett-space-6);
    background-color: var(--nett-bg-secondary);
    border: var(--nett-border-1) solid var(--nett-border-color);
    border-radius: var(--nett-card-radius);
    box-shadow: var(--nett-shadow-sm);
    margin: var(--nett-space-8) 0;
}

.single-post .author-box .author-avatar img {
    width: var(--nett-testimonial-avatar-size);
    height: var(--nett-testimonial-avatar-size);
    border-radius: var(--nett-radius-full);
    object-fit: cover;
}

.single-post .author-box .author-name {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    margin-bottom: var(--nett-space-1);
}

.single-post .author-box .author-bio {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-sm-size);
    color: var(--nett-body-sm-color);
    line-height: var(--nett-body-sm-line-height);
}

/* ============================================================
 * RELATED POSTS
 * ============================================================ */
.single-post .related-posts h2,
.single-post .related-posts h3 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h3-size);
    font-weight: var(--nett-h3-weight);
    color: var(--nett-h3-color);
    margin-bottom: var(--nett-space-6);
}

.single-post .related-posts .related-post-card {
    background-color: var(--nett-card-bg);
    border: var(--nett-border-1) solid var(--nett-card-border);
    border-radius: var(--nett-card-radius);
    box-shadow: var(--nett-card-shadow);
    overflow: hidden;
    transition: var(--nett-transition-all);
}

.single-post .related-posts .related-post-card:hover {
    box-shadow: var(--nett-card-shadow-hover);
    transform: translateY(-2px);
}

.single-post .related-posts .related-post-card .card-body {
    padding: var(--nett-card-padding);
}

.single-post .related-posts .related-post-card h4 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    margin-bottom: var(--nett-space-2);
    transition: var(--nett-transition-colors);
}

.single-post .related-posts .related-post-card:hover h4 {
    color: var(--nett-primary);
}

/* ============================================================
 * COMMENTS SECTION
 * ============================================================ */
.single-post #comments {
    margin-top: var(--nett-space-10);
    padding-top: var(--nett-space-8);
    border-top: var(--nett-border-2) solid var(--nett-border-color);
}

.single-post #comments .comments-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h3-size);
    font-weight: var(--nett-h3-weight);
    color: var(--nett-h3-color);
    margin-bottom: var(--nett-space-6);
}

.single-post .comment-body {
    background-color: var(--nett-bg-secondary);
    border-radius: var(--nett-radius-xl);
    padding: var(--nett-space-5);
    margin-bottom: var(--nett-space-4);
}

.single-post .comment-author .fn {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
}

.single-post .comment-meta .comment-metadata a {
    font-family: var(--nett-font-meta);
    font-size: var(--nett-meta-size);
    color: var(--nett-meta-color);
    text-decoration: none;
}

.single-post .comment-content p {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    color: var(--nett-body-color);
    line-height: var(--nett-body-line-height);
    margin-bottom: var(--nett-space-3);
}

/* Comment Form */
.single-post .comment-respond {
    margin-top: var(--nett-space-8);
}

.single-post .comment-respond .comment-reply-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    color: var(--nett-h4-color);
    margin-bottom: var(--nett-space-5);
}

.single-post .comment-form label {
    font-family: var(--nett-font-label);
    font-size: var(--nett-label-size);
    font-weight: var(--nett-label-weight);
    color: var(--nett-label-color);
    letter-spacing: var(--nett-label-tracking);
    display: block;
    margin-bottom: var(--nett-space-1);
}

.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
    width: 100%;
    background-color: var(--nett-input-bg);
    border: var(--nett-border-1) solid var(--nett-input-border);
    border-radius: var(--nett-input-radius);
    padding: var(--nett-input-padding);
    font-family: var(--nett-font-body);
    font-size: var(--nett-input-font-size);
    color: var(--nett-text-primary);
    transition: border-color var(--nett-duration) var(--nett-ease);
    outline: none;
}

.single-post .comment-form input[type="text"]:focus,
.single-post .comment-form input[type="email"]:focus,
.single-post .comment-form textarea:focus {
    border-color: var(--nett-input-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.single-post .comment-form .form-submit input[type="submit"] {
    font-family: var(--nett-font-btn);
    font-size: var(--nett-btn-font-size);
    font-weight: var(--nett-btn-font-weight);
    background-color: var(--nett-btn-primary-bg);
    color: var(--nett-btn-primary-text);
    border: none;
    border-radius: var(--nett-btn-radius);
    padding: var(--nett-btn-padding-y) var(--nett-btn-padding-x);
    cursor: pointer;
    transition: var(--nett-transition-colors);
}

.single-post .comment-form .form-submit input[type="submit"]:hover {
    background-color: var(--nett-btn-primary-hover-bg);
}

/* ============================================================
 * POST NAVIGATION (prev / next)
 * ============================================================ */
.single-post .post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--nett-space-4);
    margin: var(--nett-space-10) 0;
    padding: var(--nett-space-5) 0;
    border-top: var(--nett-border-1) solid var(--nett-border-color);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next {
    flex: 1;
}

.single-post .post-navigation .nav-subtitle {
    font-family: var(--nett-font-overline);
    font-size: var(--nett-overline-size);
    font-weight: var(--nett-overline-weight);
    letter-spacing: var(--nett-overline-tracking);
    text-transform: var(--nett-overline-transform);
    color: var(--nett-overline-color);
    display: block;
    margin-bottom: var(--nett-space-1);
}

.single-post .post-navigation .nav-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-base);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.single-post .post-navigation a:hover .nav-title {
    color: var(--nett-primary);
}

/* ============================================================
 * SIDEBAR (if applicable)
 * ============================================================ */
.single-post .widget-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h5-size);
    font-weight: var(--nett-h5-weight);
    color: var(--nett-text-primary);
    margin-bottom: var(--nett-space-4);
    padding-bottom: var(--nett-space-2);
    border-bottom: var(--nett-border-2) solid var(--nett-primary);
}

/* ============================================================
 * RESPONSIVE OVERRIDES
 * ============================================================ */
@media (max-width: 768px) {
    .single-post .entry-content,
    .single-post .post-content {
        max-width: 100%;
    }

    .single-post .author-box,
    .single-post .post-author {
        flex-direction: column;
    }

    .single-post .post-navigation {
        flex-direction: column;
    }
}