/* ==========================================================================
   WCL Phase 4 News Post Styles — brand the 15 Phase 4 blog posts
   Scope: single-post article content only (safe for other post templates)
   Reference: /tmp/claude-safe-work/wcl_semantic_us/visual_audit/news_report.md
              memory/reference_wcl_design_system.md
              memory/feedback_no_grey_in_design.md
   ========================================================================== */

.single-post article{
    font-family: 'Inter', 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #0a1628;
}

/* hide the inline duplicate H1 that lives in section.dark (keep WP page-title) */
.single-post article > section.dark h1{
    display: none;
}

/* DARK HERO inside entry-content */
.single-post article > section.dark{
    background: linear-gradient(135deg, #0a1628 0%, #1e293b 100%);
    color: #fff;
    padding: 72px 32px 64px;
    margin: 0 0 48px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.single-post article > section.dark .wrap{
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}
.single-post article > section.dark .meta{
    color: #ff7700;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
}
.single-post article > section.dark .lead{
    color: #fff !important;        /* override inline opacity:0.88 variants */
    opacity: 1 !important;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 500;
    max-width: 720px;
}

/* BODY SECTIONS */
.single-post article > section:not(.dark){
    padding: 0;
    background: transparent;
}
.single-post article > section:not(.dark) .wrap{
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

/* BODY TEXT — no grey, no 300 weight */
.single-post article p,
.single-post article li{
    color: #0a1628;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.72;
    font-family: 'Inter', 'Ubuntu', Helvetica, Arial, sans-serif;
}
.single-post article p.lead:not(section.dark .lead){
    font-size: 20px;
    font-weight: 600;
    color: #0a1628;
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 4px solid #ff7700;
}

/* HEADINGS — brand dark, not grey */
.single-post article h2{
    color: #0a1628;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    margin: 48px 0 20px;
    font-family: 'Space Grotesk', 'Ubuntu', Helvetica, Arial, sans-serif;
    position: relative;
    padding-left: 18px;
}
.single-post article h2::before{
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 5px;
    background: #ff7700;
    border-radius: 3px;
}
.single-post article h3{
    color: #1e293b;
    font-weight: 700;
    font-size: 22px;
    margin: 32px 0 14px;
    font-family: 'Space Grotesk', 'Ubuntu', Helvetica, Arial, sans-serif;
}

/* LISTS */
.single-post article ul,
.single-post article ol{
    padding-left: 24px;
    margin: 20px 0;
}
.single-post article ul li{
    list-style: none;
    position: relative;
    padding-left: 8px;
    margin-bottom: 10px;
}
.single-post article ul li::before{
    content: '';
    position: absolute;
    left: -16px; top: 12px;
    width: 8px; height: 8px;
    background: #ff7700;
    border-radius: 2px;
}
.single-post article strong{
    color: #0a1628;
    font-weight: 700;
}
.single-post article a{
    color: #1e73be;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(30,115,190,0.35);
}
.single-post article a:hover{
    color: #ff7700;
    text-decoration-color: #ff7700;
}

/* TABLES — card treatment (post 15 magento-vs-nopcommerce + any future) */
.single-post article table{
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    background: #fff;
    border: 1px solid rgba(30,115,190,0.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.single-post article th{
    background: #0a1628;
    color: #fff;
    text-align: left;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.single-post article td{
    padding: 14px 18px;
    border-top: 1px solid rgba(30,115,190,0.08);
    color: #0a1628;
    font-weight: 500;
}
.single-post article tr:nth-child(even) td{
    background: rgba(30,115,190,0.04);
}

/* CTA — "Book Strategy Call with WebCoreLab" etc. */
.single-post article p:has(a[href*="call"], a[href*="contact"], a[href*="strategy"]){
    margin: 48px 0;
    padding: 32px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,119,0,0.06) 100%);
    border: 1px solid rgba(255,119,0,0.2);
    border-radius: 16px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.single-post article p:has(a[href*="call"], a[href*="contact"], a[href*="strategy"]) a{
    display: inline-block;
    background: #ff7700;
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 4px 24px rgba(255,119,0,0.35);
    transition: transform .15s, box-shadow .15s;
}
.single-post article p:has(a[href*="call"], a[href*="contact"], a[href*="strategy"]) a:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255,119,0,0.45);
    color: #fff !important;
}

/* MOBILE */
@media (max-width: 768px){
    .single-post article > section.dark{
        padding: 48px 0 40px;
        margin-bottom: 32px;
    }
    .single-post article > section.dark .lead{ font-size: 17px; }
    .single-post article p,
    .single-post article li{ font-size: 16px; }
    .single-post article h2{ font-size: 26px; margin: 36px 0 16px; }
    .single-post article h3{ font-size: 19px; }
}

/* Marker comment to verify deploy */
/* WCL_PHASE4_NEWS_POST_MARKER_20260423 */