/*
 * Gama Est — Unified Single Article Styles
 * Version: 3.0 FINAL
 * Scope: WordPress single blog posts
 * Purpose: Readability, contrast, responsive layout and accessibility
 */

/* =========================================
   1. Global article colors and layout
========================================= */

body.single-post {
    --gama-text: #333333;
    --gama-muted: #444444;
    --gama-link: #07558A;
    --gama-link-hover: #003B61;
    --gama-border: #D5D5D5;
    --gama-surface: #F5F6F7;
    --gama-focus: #07558A;

    color: var(--gama-text);
    overflow-wrap: break-word;
}

body.single-post #page,
body.single-post #main-content {
    min-width: 0;
    max-width: 100%;
}

/* =========================================
   2. Main article content
========================================= */

body.single-post .entry-content,
body.single-post .post-content,
body.single-post .article-content,
body.single-post .the-content,
body.single-post .entry-summary,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container {
    color: var(--gama-text);
    font-size: 17px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

/* Common text blocks, including Elementor div-based content */
body.single-post .entry-content p,
body.single-post .post-content p,
body.single-post .article-content p,
body.single-post .the-content p,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container p,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container li,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container div,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container span,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container td,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container th {
    color: var(--gama-text);
}

/* Paragraph spacing */
body.single-post .entry-content p,
body.single-post .post-content p,
body.single-post .article-content p,
body.single-post .the-content p,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container p {
    margin-block: 0 1.2em;
    line-height: 1.9;
}

/* =========================================
   3. Headings
========================================= */

body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6,
body.single-post .post-content h1,
body.single-post .post-content h2,
body.single-post .post-content h3,
body.single-post .post-content h4,
body.single-post .post-content h5,
body.single-post .post-content h6,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h1,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h2,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h3,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h4,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h5,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container h6 {
    color: #222222;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
    margin-block: 1.5em 0.65em;
}

body.single-post .entry-content h1,
body.single-post .post-content h1 {
    font-size: clamp(1.8rem, 4vw, 2.35rem);
}

body.single-post .entry-content h2,
body.single-post .post-content h2 {
    font-size: clamp(1.5rem, 3.5vw, 1.9rem);
}

body.single-post .entry-content h3,
body.single-post .post-content h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

body.single-post .entry-content h4,
body.single-post .post-content h4 {
    font-size: 1.2rem;
}

body.single-post .entry-content h5,
body.single-post .entry-content h6,
body.single-post .post-content h5,
body.single-post .post-content h6 {
    font-size: 1.05rem;
}

/* =========================================
   4. Article links and keyboard accessibility
========================================= */

body.single-post .entry-content a,
body.single-post .post-content a,
body.single-post .article-content a,
body.single-post .the-content a,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container a {
    color: var(--gama-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

body.single-post .entry-content a:hover,
body.single-post .post-content a:hover,
body.single-post .elementor-widget-theme-post-content
.elementor-widget-container a:hover {
    color: var(--gama-link-hover);
    text-decoration-thickness: 2px;
}

/* Sidebar links */
body.single-post #main-content .top-posts a,
body.single-post #main-content .categories-list a {
    color: var(--gama-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Publication date */
body.single-post #page .elementor-widget-post-info
.elementor-post-info a,
body.single-post #page .elementor-widget-post-info
.elementor-post-info a .elementor-icon-list-text {
    color: #006B35;
}

/* Article keyword links */
body.single-post #page .OnePruduct_keyWord__1NnjK a {
    color: #24425A;
    text-decoration: underline;
}

/* Cancel reply */
body.single-post #page #cancel-comment-reply-link {
    color: #006B35;
    text-decoration: underline;
}

/* Visible keyboard focus */
body.single-post #page a:focus-visible,
body.single-post #page button:focus-visible,
body.single-post #page input:focus-visible,
body.single-post #page textarea:focus-visible,
body.single-post #page select:focus-visible {
    outline: 3px solid var(--gama-focus);
    outline-offset: 3px;
}

/* =========================================
   5. Images, figures and videos
========================================= */

body.single-post .entry-content img,
body.single-post .post-content img,
body.single-post .article-content img,
body.single-post .the-content img,
body.single-post .elementor-widget-theme-post-content img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

body.single-post .entry-content figure,
body.single-post .post-content figure,
body.single-post .elementor-widget-theme-post-content figure {
    max-width: 100%;
    margin-block: 1.5rem;
}

body.single-post .wp-caption-text,
body.single-post .entry-content figcaption,
body.single-post .post-content figcaption,
body.single-post .elementor-widget-theme-post-content figcaption {
    color: var(--gama-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
}

body.single-post .entry-content iframe,
body.single-post .post-content iframe,
body.single-post .entry-content video,
body.single-post .post-content video {
    max-width: 100%;
}

body.single-post .entry-content iframe[src*="youtube.com"],
body.single-post .entry-content iframe[src*="youtube-nocookie.com"],
body.single-post .post-content iframe[src*="youtube.com"],
body.single-post .post-content iframe[src*="youtube-nocookie.com"] {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* =========================================
   6. Lists, tables, quotes and code
========================================= */

body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .post-content ul,
body.single-post .post-content ol {
    padding-inline-start: 1.5em;
    padding-inline-end: 0;
    margin-block: 0 1.25em;
}

body.single-post .entry-content li,
body.single-post .post-content li {
    margin-block: 0 0.45em;
    line-height: 1.85;
}

body.single-post .entry-content table,
body.single-post .post-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-block: 1.5rem;
    font-size: 0.95rem;
    -webkit-overflow-scrolling: touch;
}

body.single-post .entry-content th,
body.single-post .entry-content td,
body.single-post .post-content th,
body.single-post .post-content td {
    border: 1px solid var(--gama-border);
    padding: 0.7rem;
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
}

body.single-post .entry-content th,
body.single-post .post-content th {
    background: var(--gama-surface);
    color: #222222;
    font-weight: 700;
}

body.single-post .entry-content blockquote,
body.single-post .post-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-inline-start: 4px solid #555555;
    background: var(--gama-surface);
    color: var(--gama-text);
}

body.single-post .entry-content pre,
body.single-post .post-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
}

body.single-post .entry-content code,
body.single-post .post-content code {
    overflow-wrap: anywhere;
}

/* =========================================
   7. Comments
========================================= */

body.single-post #comments,
body.single-post #comments .comment-text,
body.single-post #comments .comment-text p,
body.single-post #comments .comment-author,
body.single-post #comments .comment-time,
body.single-post #comments .comment-metadata {
    color: var(--gama-text);
}

body.single-post #comments .comment-reply-link,
body.single-post #comments .comment-edit-link {
    color: var(--gama-link);
    text-decoration: underline;
}

body.single-post #respond input,
body.single-post #respond textarea,
body.single-post #respond select {
    max-width: 100%;
    box-sizing: border-box;
}

body.single-post #respond textarea {
    width: 100%;
    min-height: 150px;
    line-height: 1.7;
}

body.single-post #respond label,
body.single-post #respond .comment-notes,
body.single-post #respond .logged-in-as,
body.single-post #respond .comment-form-cookies-consent {
    color: var(--gama-text);
}

/* =========================================
   8. Mobile layout
========================================= */

@media (max-width: 767px) {
    body.single-post .entry-content,
    body.single-post .post-content,
    body.single-post .article-content,
    body.single-post .the-content,
    body.single-post .elementor-widget-theme-post-content
    .elementor-widget-container {
        font-size: 16px;
        line-height: 1.85;
    }

    body.single-post .entry-content h1,
    body.single-post .post-content h1 {
        font-size: 1.75rem;
    }

    body.single-post .entry-content h2,
    body.single-post .post-content h2 {
        font-size: 1.45rem;
    }

    body.single-post .entry-content table,
    body.single-post .post-content table {
        font-size: 0.875rem;
    }
}