/* Blog pages (list, single, archive) + header/footer for inner pages */

    body { background: #fff; }

    a { color: #c5a352; text-decoration: none; }
    a:hover { color: #e0c26d; }

    /* HEADER (same markup as index.html, always in solid "shrunk" state) */
    .cbp-af-header.header-solid { background-color: #000; box-shadow: 0 2px 14px 0 rgba(0,0,0,.08); }
    .navigation-wrap .nav-link { color: #fff !important; }
    .navigation-wrap .nav-link:hover,
    .navigation-wrap .nav-link.active { color: #c5a352 !important; }
    .navigation-wrap .navbar-toggler-icon { filter: invert(1); }
    .social-icons { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
    .social-icon { font-size: 18px; color: #fff !important; transition: all .3s ease; }
    .social-icon:hover { color: #c5a352 !important; transform: translateY(-2px); }
    @media (max-width: 1199px) {
      .navigation-wrap .navbar-collapse { background: #000; padding-bottom: 10px; }
      .social-icons { justify-content: center; margin-top: 15px; }
    }

    /* BLOG: typography comes from css/style.css (same as index). Posts = white card + gold border */
    .blog-page { padding: 130px 0 90px; }
    .text-show { color: #b08d2f; letter-spacing: 1px; font-weight: 600; }

    .blog-box {
      background: #fff;
      border: 2px solid #c5a352;
      border-radius: 6px;
      padding: 40px;
    }
    .blog-box h1 { font-size: 36px; line-height: 46px; color: #111; }
    .blog-box p { color: #333; }
    .blog-content p { font-size: 16px; line-height: 1.8; margin-bottom: 1.2rem; }
    .blog-quote { border-left: 4px solid #c5a352; padding-left: 20px; font-style: italic; color: #111; margin: 28px 0; }
    .blog-quote { font-size: 18px; }
    .post-sub { font-size: 18px; color: #555; margin-top: .75rem; }
    .post-meta { color: #777; font-size: 14px; margin-bottom: 1.5rem; }
    .post-meta span { color: #b08d2f; font-weight: 600; }
    .back-link { font-size: 14px; color: #777 !important; }
    .back-link:hover { color: #b08d2f !important; }
    .post-nav a { font-size: 15px; }
    @media (max-width: 575px) { .blog-box { padding: 22px; } .blog-box h1 { font-size: 28px; line-height: 36px; } }

    /* RECENT BLOGS: same white / gold card as the list page */
    .blog-card { display: block; background: #fff; border: 2px solid #c5a352; border-radius: 6px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
    .blog-card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(197,163,82,.25); }
    .blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
    .blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
    .blog-thumb-content { padding: 16px 18px 20px; }
    .blog-thumb-content h6 { color: #111; margin: 0 0 6px; }
    .blog-thumb-content p { font-size: 15px; color: #555; margin: 0; }
    /* FOOTER (copied from index.html) */
    .ss-bg-dark { background: #0b0b0b; }
    .ss-footer { font-family: 'Poppins', sans-serif; color: #cfcfcf; }
    .ss-heading { color: #fff; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 0; }
    .ss-stream-link {
      display: inline-flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 8px;
      background: rgba(255,255,255,0.05); color: #ddd; font-size: 18px;
      text-decoration: none; transition: all 0.2s ease; margin-right: 8px;
    }
    .ss-stream-link:hover { color: #fff; background: #c5a35248; transform: translateY(-3px); }
    .ss-mail { margin: 0; }
    .ss-mail-link { color: #d4af37; font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s ease; }
    .ss-mail-link:hover { color: #e50914; text-decoration: underline; }
    .ss-social-link {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.05); color: #ddd; text-decoration: none;
      font-size: 16px; transition: all 0.2s ease; margin-right: 8px;
    }
    .ss-social-link:hover { color: #fff; background: #c5a35248; transform: translateY(-3px); }
    .ss-divider { height: 1px; background: rgba(255,255,255,0.05); margin-top: 1.5rem; }
    @media (max-width: 767.98px) { .ss-footer { text-align: left; } }
  

    /* list-only rules */
    .blog-date { font-size: 13px; color: #777; text-transform: uppercase; letter-spacing: 1px; }
    .read-more { color: #b08d2f; font-size: 14px; font-weight: 600; }
    .blog-pagination .page-num { min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #c5a352; border-radius: 6px; color: #111 !important; font-size: 15px; }
    .blog-pagination .page-num:hover, .blog-pagination .page-num.active { background: #c5a352; color: #000 !important; }

/* ===== Theme additions ===== */
body.ss-inner { background: #fff; }
.blog-sub { color: #666; }
.blog-page .btn-gold { background-color: #c5a352; color: #fff !important; font-weight: 600; border-radius: 8px; padding: 10px 28px; display: inline-block; }
.blog-page .btn-gold:hover { background-color: #000; color: #c5a352 !important; }

/* card image placeholder when a post has no picture */
.blog-card-img.no-image { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0b0b0b, #3a3a3a); color: #c5a352; font-size: 44px; }
.blog-card-img.no-image i { opacity: .85; }
.blog-card { height: 100%; }

/* imported / dashboard-written post content */
.blog-content { overflow-wrap: anywhere; }
.blog-content img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-content a { color: #b08d2f !important; text-decoration: underline; }
.blog-content ol, .blog-content ul { margin: 0 0 1.2rem 1.4rem; color: #333; font-size: 16px; line-height: 1.8; }
.blog-content blockquote { border-left: 4px solid #c5a352; padding-left: 20px; font-style: italic; color: #111; margin: 28px 0; }
.blog-content figure { margin: 0 0 1.2rem; }
.blog-content hr { border-color: #c5a352; opacity: .5; }
.blog-content pre { background: #f6f6f6; padding: 14px; border-radius: 6px; overflow: auto; }
.blog-content .post-embed { margin: 0 0 1.4rem; }
.blog-content iframe { max-width: 100%; border: 0; }
.blog-content iframe[src*="youtube"], .blog-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.blog-content iframe[src*="spotify"] { width: 100%; }
.post-cover { width: 100%; }
.post-tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a { font-size: 13px; color: #777 !important; border: 1px solid #ddd; border-radius: 20px; padding: 3px 12px; }
.post-tags a:hover { border-color: #c5a352; color: #b08d2f !important; }
.blog-pagination .page-num { cursor: pointer; }
.blog-pagination span.page-num.dots { border-color: transparent; background: transparent; }