/* ==========================================================================
   Classic Editor Blog Post Styles (Predefined aesthetics)
   ========================================================================== */

main#content {
    padding: 0;
}

/* Blog Single Hero */
.blog-single-hero {
    padding: 80px 0 40px;
    background-color: #fff;
    text-align: center;
}

.blog-single-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.blog-single-category {
    margin-bottom: 20px;
}

.blog-single-title {
    font-size: 42px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 30px;
    line-height: 1.2;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.blog-single-meta {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-author-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.author-details {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: #121212;
    font-size: 15px;
}

.author-name a {
    color: #121212;
    text-decoration: none;
}

.post-date {
    font-size: 13px;
    color: #666;
}

/* Featured Image */
.blog-single-featured-image {
    background-color: #fff;
    padding-bottom: 40px;
}

.featured-image-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.featured-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Classic Editor Content Styles */
.blog-single-content {
    padding: 40px 0;
}

.classic-editor-content {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #333;
    font-size: 17px;
    line-height: 1.8;
}

/* Headings */
.classic-editor-content h1,
.classic-editor-content h2,
.classic-editor-content h3,
.classic-editor-content h4,
.classic-editor-content h5,
.classic-editor-content h6 {
    color: #121212;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.classic-editor-content h2 {
    font-size: 24px;
}

.classic-editor-content h3 {
    font-size: 22px;
}

.classic-editor-content h4 {
    font-size: 20px;
}

.classic-editor-content h5 {
    font-size: 18px;
}

/* Paragraphs & Links */
.classic-editor-content p {
    margin-bottom: 24px;
}

.classic-editor-content a {
    color: #EF6224;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.classic-editor-content a:hover {
    border-color: #EF6224;
}

/* Lists */
.classic-editor-content ul,
.classic-editor-content ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.classic-editor-content li {
    margin-bottom: 10px;
}

/* Quote / Blockquote */
.classic-editor-content blockquote,
.classic-editor-content .wp-block-quote {
    margin: 40px 0;
    padding: 30px 40px;
    background-color: #fff192;
    /* Using existing theme gradient color variable */
    border-left: 5px solid #EF6224;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 20px;
    color: #121212;
    position: relative;
}

.classic-editor-content blockquote p {
    margin-bottom: 0;
}

.classic-editor-content blockquote cite {
    display: block;
    margin-top: 15px;
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    color: #EF6224;
}

/* Table */
.classic-editor-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 30px 0;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.classic-editor-content table th,
.classic-editor-content table td {
    padding: 12px 16px;
    border: 1px solid #eee;
    text-align: left;
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* 
   Prevent columns other than the first column from being squished excessively.
   This guarantees that columns like "Strategy", "What to Do", etc. get enough width 
   to display words as whole units without squeezing the first (serial number) column.
*/
.classic-editor-content table th:not(:first-child),
.classic-editor-content table td:not(:first-child) {
    min-width: 120px;
}

/* 
   Intelligently apply white-space: nowrap and min-width to the first column 
   ONLY in 3-column comparison tables (like the Shopify White-Label agency comparison).
*/
.classic-editor-content table tr td:first-child:nth-last-child(3),
.classic-editor-content table tr th:first-child:nth-last-child(3) {
    white-space: nowrap;
    min-width: 120px;
}

.classic-editor-content figure.wp-block-table {
    width: 100%;
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.classic-editor-content figure.wp-block-table table {
    margin: 0;
    box-shadow: none;
}

.classic-editor-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #121212;
}

.classic-editor-content table tr:nth-child(even) {
    background-color: #fafafa;
}

/* Buttons */
.classic-editor-content .wp-block-button__link,
.classic-editor-content .btn,
.classic-editor-content .com-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #EF6224;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.classic-editor-content .wp-block-button__link:hover,
.classic-editor-content .btn:hover,
.classic-editor-content .com-btn:hover {
    background-color: #010101;
    color: #EF6224;
    border-color: #010101;
}

/* Predefined classes for shortcodes or manual div wrappers */

/* TL;DR Section (Premium Aesthetic) */
.classic-editor-content .tldr-box {
    background: linear-gradient(135deg, #ffffff 0%, #FFF9F6 100%);
    border: 1px solid rgba(239, 98, 36, 0.12);
    border-left: 5px solid #EF6224;
    border-radius: 4px 16px 16px 4px;
    padding: 30px 35px;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(239, 98, 36, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.classic-editor-content .tldr-box:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 98, 36, 0.3);
    box-shadow: 0 15px 35px rgba(239, 98, 36, 0.06);
}

.classic-editor-content .tldr-box h3 {
    margin-top: 0;
    margin-bottom: 18px;
    color: #121212;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 21px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.classic-editor-content .tldr-box h3::before {
    content: "⚡";
    color: #EF6224;
    background: rgba(239, 98, 36, 0.08);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(239, 98, 36, 0.1);
}

.classic-editor-content .tldr-box p {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
    margin: 0;
}

.classic-editor-content .tldr-box p:not(:last-child) {
    margin-bottom: 16px;
}

/* Summary Section */
.classic-editor-content .summary-box {
    background-color: #fafafa;
    border-left: 4px solid #121212;
    padding: 25px 30px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
}

.classic-editor-content .summary-box h3 {
    margin-top: 0;
}

/* Premium Quote Box */
.classic-editor-content .premium-quote {
    background-color: #ffffff;
    border: 1px solid #e9e9e9;
    border-left: 4px solid #EF6224;
    padding: 35px 40px;
    margin: 40px 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: all 0.3s ease;
}

.classic-editor-content .premium-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(239, 98, 36, 0.05);
}

.classic-editor-content .premium-quote::before {
    content: "“";
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 90px;
    font-family: Georgia, serif;
    color: rgba(239, 98, 36, 0.1);
    line-height: 1;
}

.classic-editor-content .premium-quote p {
    font-size: 20px;
    line-height: 1.6;
    color: #121212;
    font-weight: 500;
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.classic-editor-content .premium-quote .quote-author {
    font-size: 15px;
    font-weight: 700;
    color: #EF6224;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.classic-editor-content .premium-quote .quote-author::before {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #EF6224;
}

/* FAQ Items Accordion (Premium Aesthetic) */
.classic-editor-content .faq-item {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    margin-bottom: 16px;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    padding: 0;
}

.classic-editor-content .faq-item:hover {
    border-color: #EF6224;
    box-shadow: 0 10px 25px -5px rgba(239, 98, 36, 0.04), 0 8px 10px -6px rgba(239, 98, 36, 0.04);
}

.classic-editor-content .faq-item.active {
    border-color: #EF6224;
    background-color: #FCFCFA;
    /* Warm off-white, matching website bg */
    box-shadow: 0 12px 20px -8px rgba(239, 98, 36, 0.06);
}

/* Beautiful Left Accent Line */
.classic-editor-content .faq-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #EF6224;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.classic-editor-content .faq-item.active::before {
    opacity: 1;
}

/* Question Header styling */
.classic-editor-content .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    cursor: pointer;
    user-select: none;
    gap: 20px;
}

/* Elegant, non-bold typography */
.classic-editor-content .faq-question .faq-question-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 500 !important;
    /* Not bold, very elegant */
    color: #121212;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.classic-editor-content .faq-item:hover .faq-question-text,
.classic-editor-content .faq-item.active .faq-question-text {
    color: #EF6224;
}

/* Chevron Icon Wrapper */
.classic-editor-content .faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    color: #888888;
    transition: color 0.3s ease;
}

.classic-editor-content .faq-item.active .faq-icon {
    color: #EF6224;
}

/* Premium Chevron SVG rotation */
.classic-editor-content .faq-icon svg.chevron-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: static;
}

.classic-editor-content .faq-item.active .faq-icon svg.chevron-icon {
    transform: rotate(180deg);
}

/* Smooth height transition content wrapper */
.classic-editor-content .faq-answer {
    overflow: hidden;
    height: 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.classic-editor-content .faq-answer-content {
    padding: 0 28px 22px 28px;
}

/* Answer Paragraph styling */
.classic-editor-content .faq-answer p {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #555555;
    margin: 0;
    display: block !important;
}

/* Style links inside answers */
.classic-editor-content .faq-answer p a {
    color: #EF6224;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed #EF6224;
    transition: all 0.3s ease;
}

.classic-editor-content .faq-answer p a:hover {
    border-bottom-style: solid;
}

/* Images & Figures */
.classic-editor-content figure,
.classic-editor-content img {
    margin: 40px 0;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.classic-editor-content figcaption {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

/* Post Tags */
.blog-single-tags {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.tags-title {
    font-weight: 600;
    color: #121212;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ============ CONCLUSION BOX (Premium Aesthetic) ============ */
.classic-editor-content .conclusion-blog {
    background: linear-gradient(135deg, #ffffff 0%, #FCFCFA 100%);
    border: 1px solid #e9e9e9;
    border-left: 5px solid #EF6224;
    border-radius: 12px;
    padding: 35px;
    margin: 45px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.classic-editor-content .conclusion-blog:hover {
    transform: translateY(-2px);
    border-color: #EF6224;
    box-shadow: 0 15px 35px rgba(239, 98, 36, 0.05), 0 5px 15px rgba(0, 0, 0, 0.01);
}

/* Typography elements */
.classic-editor-content .conclusion-blog h3,
.classic-editor-content .conclusion-blog h4 {
    margin-top: 5px;
    margin-bottom: 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 21px;
    font-weight: 600 !important;
    color: #121212;
    line-height: 1.3;
}

.classic-editor-content .conclusion-blog p {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
    margin: 0;
}

.classic-editor-content .conclusion-blog p:not(:last-child) {
    margin-bottom: 16px;
}

/* Link treatments */
.classic-editor-content .conclusion-blog p a {
    color: #EF6224;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed #EF6224;
    transition: all 0.3s ease;
}

.classic-editor-content .conclusion-blog p a:hover {
    border-bottom-style: solid;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blog-single-title {
        font-size: 32px;
    }

    .blog-single-hero {
        padding: 60px 0 30px;
    }

    .classic-editor-content {
        font-size: 16px;
    }

    .classic-editor-content blockquote {
        padding: 20px;
        font-size: 18px;
    }

    .classic-editor-content .summary-box {
        padding: 20px;
    }

    .classic-editor-content .tldr-box {
        padding: 25px 20px;
        margin: 25px 0;
    }

    /* Mobile overrides for conclusion */
    .classic-editor-content .conclusion-blog {
        padding: 30px 20px;
        margin: 35px 0;
    }

    .classic-editor-content .conclusion-blog h3,
    .classic-editor-content .conclusion-blog h4 {
        font-size: 19px;
    }

    .classic-editor-content .conclusion-blog p {
        font-size: 15px;
    }
}

/* Global blog link hover */
.blog-single-main a:hover {
    color: #EF6224;
}