/* ============================================================
   Article Content Styles
   Loaded only on single post pages.

   Visual theme is consistent with /services/ page:
   - Brand accent:  #d90303  (red, used for CTAs, FAQ active state)
   - Headings:      #000     (pure black, uppercase-friendly)
   - Body text:     #333
   - Subtle bg:     #f8f8f8  (FAQ question), #fafafa (answer)
   - Border:        #e0e0e0  (soft grey)
   - Font:          'Roboto Condensed', sans-serif (site-wide)
   ============================================================ */

.single-page-artical,
.artical-content,
.key-takeaways,
.toc,
.callout,
.faq-section,
.faq-item,
.author-box,
.related-posts,
.steel-table,
.single-header,
.single-meta,
.article-footer-meta,
.share-artical {
    font-family: 'Roboto Condensed', sans-serif;
}

/* ---------- Single article wrapper ---------- */
.single-page-artical {
    max-width: 920px;
    margin: 0 auto;
    background: #fff;
    padding: 0 0 2em;
}

.single-header h1 {
    font-size: 2.4em;
    color: #000;
    line-height: 1.25;
    margin: 0.3em 0 0.4em;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    color: #666;
    font-size: 0.95em;
    padding: 8px 0 18px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1.6em;
}

.single-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.single-meta .meta-item .meta-icon {
    color: #d90303;
    font-weight: 700;
}

.single-meta .meta-item a {
    color: #000;
    text-decoration: none;
    transition: 0.3s all;
}

.single-meta .meta-item a:hover {
    color: #d90303;
}

.single-meta .meta-item time {
    color: #333;
}

/* ---------- Article body typography ---------- */
.artical-content {
    font-size: 1.05em;
    line-height: 1.8;
    color: #333;
    word-wrap: break-word;
}

.artical-content p {
    margin: 0 0 1.15em;
    height: auto;
    overflow: visible;
}

.artical-content > h2 {
    font-size: 1.75em;
    color: #000;
    margin: 1.8em 0 0.6em;
    padding-bottom: 0.35em;
    border-bottom: 2px solid #d90303;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.artical-content > h3 {
    font-size: 1.3em;
    color: #000;
    margin: 1.6em 0 0.55em;
    font-weight: 700;
    line-height: 1.35;
    border-left: 4px solid #d90303;
    padding-left: 12px;
}

.artical-content > h4 {
    font-size: 1.1em;
    color: #000;
    margin: 1.4em 0 0.45em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.artical-content a {
    color: #d90303;
    text-decoration: none;
    transition: 0.3s all;
}

.artical-content a:hover {
    color: #000;
    text-decoration: underline;
}

.artical-content ul,
.artical-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.artical-content ul li,
.artical-content ol li {
    margin-bottom: 0.5em;
    line-height: 1.75;
}

.artical-content ul li::marker {
    color: #d90303;
}

.artical-content ol li::marker {
    color: #000;
    font-weight: 700;
}

.artical-content blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    background: #f8f8f8;
    border-left: 4px solid #d90303;
    border-radius: 4px;
    color: #333;
    font-style: italic;
}

.artical-content blockquote p:last-child {
    margin-bottom: 0;
}

.artical-content strong {
    color: #000;
}

/* ---------- Steel Table (comparison tables) ---------- */
.steel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-size: 0.95em;
}

.steel-table thead th {
    background: #d90303;
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    text-transform: uppercase;
    font-size: 0.95em;
}

.steel-table tbody td {
    padding: 11px 14px;
    border-top: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
}

.steel-table tbody tr:nth-child(even) td {
    background: #f8f8f8;
}

.steel-table tbody tr:hover td {
    background: #fafafa;
}

.steel-table td:first-child {
    font-weight: 700;
    color: #000;
}

.steel-table caption {
    caption-side: bottom;
    padding-top: 8px;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
}

/* ---------- Key Takeaways ---------- */
.key-takeaways {
    margin: 0 0 1.8em;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #d90303;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.key-takeaways .kt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    color: #000;
}

.key-takeaways .kt-title::before {
    content: "\2605";
    color: #d90303;
    font-size: 1.2em;
}

.key-takeaways ul {
    margin: 0;
    padding-left: 1.3em;
}

.key-takeaways ul li {
    margin-bottom: 6px;
    line-height: 1.65;
    color: #333;
}

.key-takeaways ul li::marker {
    color: #d90303;
}

.key-takeaways strong {
    color: #000;
}

/* ---------- Table of Contents ---------- */
.toc {
    margin: 0 0 1.8em;
    padding: 16px 22px 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #d90303;
    border-radius: 5px;
}

.toc .toc-title {
    font-size: 1em;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toc .toc-title::before {
    content: "\2630";
    color: #d90303;
    font-size: 1.1em;
}

.toc ol {
    margin: 0;
    padding-left: 1.3em;
}

.toc ol li {
    margin-bottom: 5px;
    line-height: 1.65;
}

.toc a {
    color: #000;
    text-decoration: none;
    transition: 0.3s all;
}

.toc a:hover {
    color: #d90303;
    text-decoration: underline;
}

/* ---------- Callout ---------- */
.callout {
    margin: 1.6em 0;
    padding: 14px 20px;
    background: #f8f8f8;
    border-left: 4px solid #d90303;
    border-radius: 4px;
    color: #333;
}

.callout .callout-title {
    font-weight: 700;
    color: #d90303;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95em;
}

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

.callout.callout-tip {
    background: #f8f8f8;
    border-left-color: #d90303;
}

.callout.callout-tip .callout-title {
    color: #d90303;
}

.callout.callout-warning {
    background: #fafafa;
    border-left-color: #d90303;
}

.callout.callout-warning .callout-title {
    color: #d90303;
}

/* ---------- FAQ Section (article FAQ, styled to match services page seo-faq) ---------- */
.faq-section {
    margin: 1.4em 0;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s all;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-item > summary.faq-q {
    cursor: pointer;
    padding: 18px 50px 18px 25px;
    background: linear-gradient(to right, #f8f8f8, #fff);
    font-weight: 600;
    color: #000;
    list-style: none;
    position: relative;
    font-size: 1.05em;
    line-height: 1.5;
    transition: 0.3s all;
    border-left: 4px solid #d90303;
    margin-left: -1px;
}

.faq-item > summary.faq-q::-webkit-details-marker {
    display: none;
}

.faq-item > summary.faq-q::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 400;
    color: #d90303;
    transition: 0.3s all;
}

.faq-item[open] > summary.faq-q::after {
    content: "\00D7";
    transform: translateY(-50%) rotate(0deg);
    color: #fff;
}

.faq-item[open] > summary.faq-q {
    background: #d90303;
    color: #fff;
    border-left-color: #000;
}

.faq-item > summary.faq-q:hover {
    background: linear-gradient(to right, #f0f0f0, #f8f8f8);
}

.faq-item[open] > summary.faq-q:hover {
    background: #d90303;
}

.faq-item .faq-a {
    padding: 18px 25px;
    background: #fafafa;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #eee;
}

.faq-item .faq-a p:last-child {
    margin-bottom: 0;
}

/* ---------- Author Box ---------- */
.author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 2.4em 0 1.6em;
    padding: 20px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #d90303;
    border-radius: 5px;
}

.author-box .author-avatar {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #d90303;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: 700;
}

.author-box .author-info {
    flex: 1;
}

.author-box .author-info .author-name {
    margin: 0 0 4px;
    font-size: 1.15em;
    color: #000;
    font-weight: 700;
}

.author-box .author-info .author-role {
    margin: 0 0 8px;
    font-size: 0.85em;
    color: #d90303;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.author-box .author-info .author-bio {
    margin: 0;
    color: #555;
    line-height: 1.65;
    font-size: 0.95em;
}

/* ---------- Related Posts ---------- */
.related-posts {
    margin: 2.4em 0 1em;
    padding-top: 1.6em;
    border-top: 1px solid #e0e0e0;
}

.related-posts h3 {
    font-size: 1.5em;
    color: #000;
    margin: 0 0 1em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid #d90303;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.related-posts-grid .related-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    transition: 0.3s all;
    display: flex;
    flex-direction: column;
}

.related-posts-grid .related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
    border-color: #d90303;
}

.related-posts-grid .related-card .related-thumb {
    display: block;
    width: 100%;
    height: 140px;
    background: #f0f0f0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23d90303' fill-opacity='0.35' d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/></svg>") center / 56px no-repeat;
    background-size: cover;
}

.related-posts-grid .related-card .related-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-posts-grid .related-card .related-title {
    margin: 0 0 6px;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.35;
    color: #000;
}

.related-posts-grid .related-card .related-title a {
    color: #000;
    text-decoration: none;
    transition: 0.3s all;
}

.related-posts-grid .related-card .related-title a:hover {
    color: #d90303;
}

.related-posts-grid .related-card .related-excerpt {
    margin: 0;
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

/* ---------- Image inside content ---------- */
.artical-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.artical-content figure {
    margin: 1.6em 0;
}

.artical-content figcaption {
    font-size: 0.88em;
    color: #666;
    text-align: center;
    padding-top: 6px;
    font-style: italic;
}

/* ---------- Article footer (share + meta bottom) ---------- */
.article-footer-meta {
    margin-top: 1.6em;
    padding-top: 1em;
    border-top: 1px dashed #e0e0e0;
}

@media (max-width: 768px) {
    .single-header h1 {
        font-size: 1.7em;
    }

    .artical-content {
        font-size: 1em;
    }

    .artical-content > h2 {
        font-size: 1.4em;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
    }

    .author-box .author-avatar {
        margin: 0 auto;
    }
}

/* ============================================================
   Enlarged font size — only for the 3 articles linked from
   the "CLICK HERE" buttons on /services/ page:
     - postid-63  : /cnc-laser-vs-plasma-vs-flame-cutting/
     - postid-10 : /steel-plate-quality-standards/
     - postid-35 : /cnc-steel-cutting-to-size-guide/
   Base body font is bumped up; em-based headings scale with it.
   ============================================================ */
body.postid-10 .artical-content,
body.postid-35 .artical-content,
body.postid-63 .artical-content {
    font-size: 1.2em;
    line-height: 1.78;
}

body.postid-63 .single-header h1,
body.postid-10 .single-header h1,
body.postid-35 .single-header h1 {
    font-size: 2.85em;
}

body.postid-63 .single-meta,
body.postid-10 .single-meta,
body.postid-35 .single-meta {
    font-size: 1.08em;
}

body.postid-63 .key-takeaways .kt-title,
body.postid-10 .key-takeaways .kt-title,
body.postid-35 .key-takeaways .kt-title {
    font-size: 1.2em;
}

body.postid-63 .toc .toc-title,
body.postid-10 .toc .toc-title,
body.postid-35 .toc .toc-title {
    font-size: 1.15em;
}

body.postid-63 .callout .callout-title,
body.postid-10 .callout .callout-title,
body.postid-35 .callout .callout-title {
    font-size: 1.08em;
}

body.postid-63 .faq-item > summary.faq-q,
body.postid-10 .faq-item > summary.faq-q,
body.postid-35 .faq-item > summary.faq-q {
    font-size: 1.2em;
}

body.postid-63 .author-box .author-info .author-name,
body.postid-10 .author-box .author-info .author-name,
body.postid-35 .author-box .author-info .author-name {
    font-size: 1.32em;
}

body.postid-63 .author-box .author-info .author-role,
body.postid-10 .author-box .author-info .author-role,
body.postid-35 .author-box .author-info .author-role {
    font-size: 0.95em;
}

body.postid-63 .author-box .author-info .author-bio,
body.postid-10 .author-box .author-info .author-bio,
body.postid-35 .author-box .author-info .author-bio {
    font-size: 1.08em;
    line-height: 1.75;
}

body.postid-63 .related-posts-grid .related-card .related-title,
body.postid-10 .related-posts-grid .related-card .related-title,
body.postid-35 .related-posts-grid .related-card .related-title {
    font-size: 1.15em;
}

body.postid-63 .related-posts-grid .related-card .related-excerpt,
body.postid-10 .related-posts-grid .related-card .related-excerpt,
body.postid-35 .related-posts-grid .related-card .related-excerpt {
    font-size: 0.95em;
    line-height: 1.6;
}

body.postid-63 .steel-table,
body.postid-10 .steel-table,
body.postid-35 .steel-table {
    font-size: 1.05em;
}

body.postid-63 .steel-table thead th,
body.postid-10 .steel-table thead th,
body.postid-35 .steel-table thead th {
    font-size: 1.05em;
}

@media (max-width: 768px) {
    body.postid-63 .single-header h1,
    body.postid-10 .single-header h1,
    body.postid-35 .single-header h1 {
        font-size: 2em;
    }

    body.postid-63 .artical-content,
    body.postid-10 .artical-content,
    body.postid-35 .artical-content {
        font-size: 1.12em;
        line-height: 1.75;
    }

    body.postid-63 .artical-content > h2,
    body.postid-10 .artical-content > h2,
    body.postid-35 .artical-content > h2 {
        font-size: 1.7em;
    }

    body.postid-63 .artical-content > h3,
    body.postid-10 .artical-content > h3,
    body.postid-35 .artical-content > h3 {
        font-size: 1.4em;
    }

    body.postid-63 .faq-item > summary.faq-q,
    body.postid-10 .faq-item > summary.faq-q,
    body.postid-35 .faq-item > summary.faq-q {
        font-size: 1.12em;
    }
}