/* ==========================================================================
   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: "Instrument 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: "Instrument 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: var(--brand-500);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.classic-editor-content a:hover {
    border-color: var(--brand-500);
}

/* 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 var(--brand-500);
    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: var(--brand-500);
}

/* Table */
.classic-editor-content table {
    display: block;
    width: fit-content;
    max-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: fit-content;
    max-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: var(--brand-500);
    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: var(--brand-500);
    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 var(--brand-500);
    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: "Instrument 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: var(--brand-500);
    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: "Instrument 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 var(--brand-500);
    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: var(--font-body); /* was Georgia: one family site-wide */
    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: var(--brand-500);
    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: var(--brand-500);
}

/* 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: var(--brand-500);
    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: var(--brand-500);
    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: var(--brand-500);
    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: "Instrument 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: var(--brand-500);
}

/* 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: var(--brand-500);
}

/* 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: "Instrument 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: var(--brand-500);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed var(--brand-500);
    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;
}

/* ============ OVERVIEW BOX (Premium Aesthetic) ============ */
.classic-editor-content .overview-blog {
    background: linear-gradient(135deg, #ffffff 0%, #FCFCFA 100%);
    border: 1px solid #e9e9e9;
    border-left: 5px solid var(--brand-500);
    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 .overview-blog:hover {
    transform: translateY(-2px);
    border-color: var(--brand-500);
    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 .overview-blog h3,
.classic-editor-content .overview-blog h4 {
    margin-top: 5px;
    margin-bottom: 16px;
    font-family: "Instrument Sans", sans-serif;
    font-size: 21px;
    font-weight: 600 !important;
    color: #121212;
    line-height: 1.3;
}

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

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

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

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

/* ============ PRO TIP BOX ============ */
.classic-editor-content .pro-tip-box {
    background-color: #121212;
    border-left: 5px solid var(--brand-500);
    border-radius: 12px;
    padding: 35px;
    margin: 45px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

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

.classic-editor-content .pro-tip-box h3,
.classic-editor-content .pro-tip-box h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-family: "Instrument Sans", sans-serif;
    font-size: 20px;
    font-weight: 600 !important;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.classic-editor-content .pro-tip-box h3::before,
.classic-editor-content .pro-tip-box h4::before {
    content: "💡";
    background: rgba(239, 98, 36, 0.15);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    border: 1px solid rgba(239, 98, 36, 0.3);
}

.classic-editor-content .pro-tip-box p {
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #E5E7EB;
    margin: 0;
}

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

.classic-editor-content .pro-tip-box p a {
    color: var(--brand-500);
    border-bottom: 1px dashed var(--brand-500);
    transition: all 0.3s ease;
}

.classic-editor-content .pro-tip-box 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 overview */
    .classic-editor-content .overview-blog {
        padding: 30px 20px;
        margin: 35px 0;
    }

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

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

/* Global blog link hover */
.blog-single-main a:hover {
    color: var(--brand-500);
}

.sidebar-lead-magnet{
    display:flex;
    align-items:center;
    gap:40px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:32px 36px;
    margin-top:25px;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
    transition:.3s;
}
.sidebar-lead-magnet:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

/* --- Left: book + benefits --- */
.lead-media{
    flex:0 0 260px;
}
.lead-book{
    display:block;
    width:100%;
    max-width:240px;
    margin:0 auto 18px;
    filter:drop-shadow(0 14px 28px rgba(232,93,32,.25));
}
.lead-benefits{
    list-style:none;
    padding:0;
    margin:0 auto;
    width:fit-content;
}
.lead-benefits li{
    font-size:14.5px;
    color:#333;
    position:relative;
    padding:5px 0 5px 26px;
    line-height:1.5;
}
.lead-benefits li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#22C55E;
    font-weight:bold;
}

/* --- Right: content --- */
.lead-content{
    flex:1;
    min-width:0;
}
.lead-badge{
    display:inline-block;
    background:#FDEDE4;
    color:#E85D20;
    padding:5px 12px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:12px;
}
.lead-content h3{
    font-size:26px;
    line-height:1.3;
    margin:0 0 10px;
    color:#222;
}
.lead-desc{
    color:#666;
    font-size:15px;
    line-height:1.7;
    margin:0 0 20px;
}

/* --- Form: stacked vertically --- */
.lead-form input[type="email"]{
    display:block;
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    margin-bottom:12px;
    transition:.25s;
}
.lead-form input[type="email"]:focus{
    border-color:#E85D20;
    outline:none;
    box-shadow:0 0 0 3px rgba(232,93,32,.12);
}
.lead-form button{
    display:block;
    width:100%;
    background:#E85D20;
    color:#fff;
    border:0;
    border-radius:10px;
    padding:15px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}
.lead-form button:hover{
    background:#cf4e18;
}

.lead-note{
    margin:12px 0 0;
    color:#888;
    font-size:12px;
    line-height:1.6;
    text-align:center;
}

/* --- Responsive: stack on tablets/phones --- */
@media (max-width:767px){
    .sidebar-lead-magnet{
        flex-direction:column;
        text-align:center;
        padding:26px 22px;
        gap:24px;
    }
    .lead-media{flex:0 0 auto;}
    .lead-book{max-width:180px;}
    .lead-benefits{text-align:left;}
}