/* =============================================================
   NICHENCY — BLOG / SINGLE POST STYLESHEET
   assets/css/blog.css
   Loaded only on single post pages and blog template page.

   Class names used in single.php — all unique, no collision
   with main.css global classes:
     .blog-article-container  outer full-width background
     .article-wrap            centred column, max-width
     .article-breadcrumbs     breadcrumb bar
     .article-date            published date bar
     .share-section           share button rows
     .article-body            the_content() output
     .article-cta             stanley CTA block
     .article-nav             prev/back/next row
   ============================================================= */


/* ── OUTER BACKGROUND ── */

.blog-article-container {
    background: #E9F9FF;
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #130F49;
}

.blog-article-container * {
    box-sizing: border-box;
}


/* ── CENTRED COLUMN ─────────────────────────────────────────
   .article-wrap is the sole width constraint.
   No padding here — each child section controls its own
   horizontal padding so chrome bars run full-width of the
   column while the body text gets generous side breathing room.
   ─────────────────────────────────────────────────────────── */

.article-wrap {
    max-width: 740px;
    margin: 0 auto;
    background: #ffffff;
}


/* ── BREADCRUMBS ── */

.article-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 48px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
}

.breadcrumb-link {
    color: #130F49 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb-link:hover { color: #55527C !important; }
.breadcrumb-link svg   { opacity: 0.65; flex-shrink: 0; }
.breadcrumb-separator  { color: #b0b0b0; }
.breadcrumb-current    { color: #6b6b6b; }


/* ── PUBLISHED DATE ── */

.article-date {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 48px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #55527C;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.article-date svg {
    opacity: 0.55;
    flex-shrink: 0;
}


/* ── SHARE SECTIONS ── */

.share-section {
    background: #f8f9fa;
    padding: 14px 48px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.share-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #55527C;
    font-size: 13px;
}

.share-buttons {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 5px;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    transition: all 0.25s;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.share-btn svg       { display: block; flex-shrink: 0; }
.share-btn:hover     { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.14); }
.share-btn.twitter   { background: #1DA1F2; color: #fff !important; }
.share-btn.linkedin  { background: #0077B5; color: #fff !important; }
.share-btn.facebook  { background: #4267B2; color: #fff !important; }
.share-btn.email     { background: #55527C; color: #fff !important; }
.share-btn.save      { background: #130F49; color: #fff !important; }


/* ── ARTICLE BODY ─────────────────────────────────────────
   This is where the_content() lands.
   Generous padding gives the text real breathing room.
   ───────────────────────────────────────────────────────── */

.article-body {
    padding: 52px 64px 40px;
}

/* Strip any residual WordPress entry-content margin/padding
   that might add extra space above the first element */
.article-body > *:first-child { margin-top: 0 !important; }

/* Headings */
.article-body h1 {
    font-family: 'Inter', sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #130F49;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.article-body h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.35em;
    font-weight: 600;
    color: #130F49;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid #130F49;
}

.article-body h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #55527C;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

/* Body text */
.article-body p {
    margin-bottom: 1.1em;
    color: #130F49;
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.1em;
    padding-left: 1.8em;
}

.article-body li {
    margin-bottom: 0.45em;
    color: #130F49;
}

.article-body strong { color: #130F49; font-weight: 600; }

.article-body a {
    color: #130F49;
    text-decoration: underline;
}

.article-body a:hover { color: #55527C; }

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 28px 0;
    display: block;
}


/* ── CONTENT CALLOUT BOXES ── */

.article-body .intro {
    background: #E9F9FF;
    padding: 18px 22px;
    border-left: 4px solid #130F49;
    margin-bottom: 2em;
    border-radius: 0 6px 6px 0;
}

.article-body .highlight-box {
    background: #fff8e1;
    padding: 16px 20px;
    border-radius: 6px;
    margin: 1.5em 0;
    border-left: 3px solid #55527C;
}

.article-body .cost-box {
    background: #e8f5e9;
    padding: 16px 20px;
    border-radius: 6px;
    margin: 1.5em 0;
    border-left: 3px solid #130F49;
}

.article-body .series-note {
    background: #e3f2fd;
    padding: 14px 18px;
    border-radius: 6px;
    font-style: italic;
    margin-bottom: 2em;
    border-left: 3px solid #55527C;
}

/* Legacy .cta-box — kept for older articles */
.article-body .cta-box {
    background: linear-gradient(135deg, #130F49 0%, #55527C 100%);
    color: #fff;
    padding: 28px;
    border-radius: 10px;
    text-align: center;
    margin-top: 2.5em;
    box-shadow: 0 6px 20px rgba(19,15,73,0.2);
}
.article-body .cta-box h3 { color: #fff !important; margin-top: 0; font-size: 1.35em; }
.article-body .cta-box p  { color: #fff !important; }
.article-body .cta-box a  { color: #E9F9FF !important; font-weight: 600; text-decoration: none !important; }
.article-body .cta-box a:hover { text-decoration: underline !important; }

.article-body .cta-btn {
    display: inline-block;
    background: #E9F9FF !important;
    color: #130F49 !important;
    padding: 12px 28px;
    border-radius: 6px;
    margin-top: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none !important;
    transition: all 0.25s;
}
.article-body .cta-btn:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}


/* ── STANLEY CTA ── */

.article-cta {
    padding: 0 64px 40px;
}

.stanley-cta-box {
    background: linear-gradient(135deg, #130F49 0%, #55527C 100%) !important;
    border-radius: 12px !important;
    padding: 44px !important;
    box-shadow: 0 8px 30px rgba(19,15,73,0.22) !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
}

.stanley-cta-inner {
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    gap: 44px !important;
    align-items: center !important;
}

.stanley-cta-box .stanley-cta-tag {
    display: inline-block !important;
    background: rgba(255,255,255,0.15) !important;
    color: #E9F9FF !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 13px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: none !important;
    line-height: 1.5 !important;
}

.stanley-cta-box .stanley-cta-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.6em !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.stanley-cta-box .stanley-cta-text {
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.82) !important;
    margin-bottom: 22px !important;
}

.stanley-cta-box .stanley-cta-contacts {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin-bottom: 24px !important;
}

.stanley-cta-box .stanley-cta-contact-item,
.stanley-cta-box .stanley-cta-contact-item:link,
.stanley-cta-box .stanley-cta-contact-item:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #E9F9FF !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: opacity 0.25s !important;
}
.stanley-cta-box .stanley-cta-contact-item:hover { opacity: 0.8 !important; }

.stanley-cta-box .stanley-cta-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.stanley-cta-box .stanley-cta-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.stanley-cta-box .stanley-cta-btn-primary,
.stanley-cta-box .stanley-cta-btn-primary:link,
.stanley-cta-box .stanley-cta-btn-primary:visited {
    display: inline-block !important;
    padding: 12px 22px !important;
    background: #E9F9FF !important;
    color: #130F49 !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s !important;
    border: none !important;
}
.stanley-cta-box .stanley-cta-btn-primary:hover {
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

.stanley-cta-box .stanley-cta-btn-secondary,
.stanley-cta-box .stanley-cta-btn-secondary:link,
.stanley-cta-box .stanley-cta-btn-secondary:visited {
    display: inline-block !important;
    padding: 12px 22px !important;
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
}
.stanley-cta-box .stanley-cta-btn-secondary:hover {
    border-color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    transform: translateY(-2px) !important;
}

.stanley-cta-box .stanley-cta-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.stanley-cta-box .stanley-cta-stat {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 18px 12px !important;
    text-align: center !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.stanley-cta-box .stanley-cta-stat-number {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: #E9F9FF !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
}

.stanley-cta-box .stanley-cta-stat-label {
    display: block !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.68) !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}


/* ── PREV / NEXT NAVIGATION ── */

.article-nav {
    background: #f8f9fa;
    padding: 16px 48px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.article-nav a,
.article-nav span {
    flex: 1;
    min-width: 0;
    color: #130F49 !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    padding: 8px 16px;
    border: 2px solid #130F49;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.25s;
}

.article-nav span:empty { border: none; padding: 0; }
.article-nav a:first-child { text-align: left; }
.article-nav a:last-child  { text-align: right; }
.article-nav a:hover { background: #130F49; color: #fff !important; }


/* ── BLOG INDEX PAGE ── */

.intercom-blog-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px 100px;
}

.intercom-blog-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #130F49 !important;
    margin-bottom: 12px !important;
}

.intercom-blog-subtitle {
    font-size: 18px !important;
    color: #55527C !important;
    margin-bottom: 60px !important;
}

.intercom-featured-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 2px solid #e5e5e5;
}

.intercom-featured-image { height: 380px; border-radius: 10px; overflow: hidden; }
.intercom-featured-image img { width: 100%; height: 100%; object-fit: cover; }

.intercom-featured-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #55527C;
    margin-bottom: 14px;
}

.intercom-featured-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #130F49 !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    text-decoration: none !important;
    display: block;
}
.intercom-featured-title:hover { color: #55527C !important; }

.intercom-featured-excerpt { font-size: 15px; color: #55527C; line-height: 1.7; margin-bottom: 20px; }
.intercom-featured-meta    { font-size: 13px; color: #a0a0a0; }

.intercom-posts-list { display: flex; flex-direction: column; }

.intercom-post-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid #e5e5e5;
    align-items: start;
    text-decoration: none !important;
    transition: background 0.2s;
}
.intercom-post-item:hover { background: #f8f9fa; }

.intercom-post-thumbnail { width: 160px; height: 110px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.intercom-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.intercom-post-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #55527C;
    margin-bottom: 6px;
}

.intercom-post-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #130F49 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}
.intercom-post-title:hover { color: #55527C !important; }

.intercom-post-excerpt { font-size: 14px; color: #55527C; line-height: 1.6; margin-bottom: 8px; }
.intercom-post-meta    { font-size: 12px; color: #a0a0a0; }

.intercom-no-posts {
    text-align: center;
    padding: 80px 20px;
    font-size: 18px;
    color: #6b6b6b;
}

.intercom-category-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 22px 0 38px;
    margin-bottom: 38px;
    border-bottom: 1px solid #e5e5e5;
}

.intercom-pill {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none !important;
    border: 1px solid #e0e0e0;
    color: #55527C !important;
    transition: all 0.2s;
}
.intercom-pill:hover,
.intercom-pill.active { background: #130F49; color: #fff !important; border-color: #130F49; }


/* ── RESPONSIVE ── */

@media (max-width: 900px) {
    .intercom-blog-container { padding: 60px 20px 80px; }
    .intercom-blog-title { font-size: 38px !important; }
    .intercom-featured-post { grid-template-columns: 1fr; gap: 28px; }
    .intercom-featured-image { height: 300px; order: -1; }
    .intercom-featured-title { font-size: 26px !important; }
    .intercom-post-item { grid-template-columns: 1fr; gap: 16px; }
    .intercom-post-thumbnail { width: 100%; height: 180px; }
    .stanley-cta-inner { grid-template-columns: 1fr !important; gap: 30px !important; }
    .stanley-cta-box .stanley-cta-stats { grid-template-columns: repeat(4,1fr) !important; }
}

@media (max-width: 768px) {
    .article-body         { padding: 36px 28px 32px; }
    .article-cta          { padding: 0 28px 32px; }
    .article-breadcrumbs  { padding: 14px 28px; }
    .article-date         { padding: 10px 28px; }
    .share-section        { padding: 14px 28px; flex-direction: column; align-items: flex-start; }
    .article-nav          { padding: 16px 28px; flex-direction: column; gap: 8px; }

    .article-nav a,
    .article-nav span {
        text-align: center !important;
        width: 100%;
        flex: none;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .article-body         { padding: 28px 20px 24px; }
    .article-cta          { padding: 0 20px 24px; }
    .article-breadcrumbs  { padding: 12px 20px; }
    .article-date         { padding: 10px 20px; }
    .share-section        { padding: 12px 20px; }
    .article-nav          { padding: 14px 20px; }

    .intercom-blog-container { padding: 40px 16px 60px; }
    .intercom-blog-title { font-size: 30px !important; }
    .intercom-blog-subtitle { font-size: 15px !important; }
    .intercom-featured-title { font-size: 22px !important; }
    .intercom-post-title { font-size: 18px !important; }

    .stanley-cta-box { padding: 28px 20px !important; }
    .stanley-cta-box .stanley-cta-title { font-size: 1.4em !important; }
    .stanley-cta-box .stanley-cta-stats { grid-template-columns: repeat(2,1fr) !important; }
    .stanley-cta-box .stanley-cta-buttons { flex-direction: column !important; }
    .stanley-cta-box .stanley-cta-btn-primary,
    .stanley-cta-box .stanley-cta-btn-secondary { text-align: center !important; }
}