/*====================
GLOBAL
====================*/

:root {
    --bg: #071018;
    --surface: #101b24;
    --surface-2: #142533;
    --text: #f4efe7;
    --muted: #b8c0ca;
    --accent: #d7a55a;
    --accent-2: #ffcf7a;
    --border: rgba(255, 255, 255, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: linear-gradient(135deg, #071018 0%, #0d1822 100%);
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    line-height: 1.7;
}
h1{
    font-size: 50px;
}
img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(92%, 1200px);
    margin: 0 auto;
}

.navbar {
    display: flex;
    gap: 30px;
}

.blog-hero-banner {
    position: relative;
    padding: 90px 0;
    min-height: 420px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(151, 153, 155, 0.9) 0%, rgba(7, 16, 24, 0.55) 100%),
        url('../img/ewafswsf.jpeg');
    overflow: hidden;
}

.banner-content {
    position: relative;
    z-index: 1;
   
}

.eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    font-weight: 600;
}

.blog-hero-banner h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    color: #f9ecd0;
    margin: 0 0 14px;
}

.banner-text {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .blog-hero-banner {
        min-height: 360px;
        padding: 70px 0;
    }
}

/*====================
BLOG HERO
====================*/

.blog-banner {

    position: relative;

    height: 520px;

    background: url(images/blog-banner.jpg) center/cover;

    display: flex;

    align-items: center;

}

.hero-hero-he {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--accent-2);
}

.breadcrumb span {
    color: var(--accent);
}

.breadcrumb span[aria-current="page"] {
    color: #f4e1c4;
    font-weight: 600;
}

/*====================
POST META: AUTHOR + CATEGORY
====================*/

.post-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-author .author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(215, 165, 90, 0.5);
}

.post-author .author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.post-author .author-name {
    color: #f9ecd0;
    font-weight: 600;
    font-size: 0.92rem;
}

.post-author .post-date {
    color: var(--muted);
    font-size: 0.82rem;
}

.post-category-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(215, 165, 90, 0.15);
    border: 1px solid rgba(215, 165, 90, 0.4);
    color: var(--accent-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

@media (max-width: 480px) {
    .post-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*====================
SIDEBAR: CATEGORY LIST
====================*/

.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-list li {
    border-top: 1px solid var(--border);
}

.category-list li:first-child {
    border-top: 0;
}

.category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.94rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.category-list a::after {
    content: '\2192';
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: var(--accent-2);
}

.category-list a:hover,
.category-list li.active a {
    color: #f9ecd0;
    padding-left: 6px;
}

.category-list a:hover::after,
.category-list li.active a::after {
    opacity: 1;
    transform: translateX(0);
}

.category-list li.active a {
    color: var(--accent-2);
    font-weight: 700;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(215, 165, 90, 0.5);
    flex-shrink: 0;
}

.author-card h3 {
    margin: 0 0 4px !important;
}

.blog-hero {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: 1.15;
    margin: 0 0 18px;
    color: #f9ecd0;
}

/*====================
BLOG LAYOUT
====================*/

        .blog-single-page {
            padding: 70px 0 40px;
        }

        .blog-single-page .blog-layout {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
            gap: 60px;
            align-items: start;
        }

        .blog-single-page .article-card {
            background: linear-gradient(180deg, rgba(16, 27, 36, 0.95), rgba(9, 16, 24, 0.96));
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .blog-single-page .article-content {
            padding: 48px 40px;
        }

        .blog-single-page .article-content a {
            color: var(--accent-2);
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            transition: color 0.25s ease, border-color 0.25s ease;
        }

        .blog-single-page .article-content a:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.35);
        }

        .blog-single-page .cta-box {
            margin: 3rem 0;
            padding: 28px 30px;
            border-radius: 24px;
            background: rgba(215, 165, 90, 0.12);
            border: 1px solid rgba(215, 165, 90, 0.22);
        }

        .blog-single-page .cta-box h3 {
            margin-bottom: 0.75rem;
            color: #f9ecd0;
        }

        .blog-single-page .faq-section {
            margin: 3rem 0 0;
        }

        .blog-single-page .faq-item {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            padding: 22px 24px;
            transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .blog-wrapper {

            display:grid;

            grid-template-columns:2fr 1fr;

            gap:60px;

        }

        .featured-media img {
            width: 100%;
            height: 380px;
            object-fit: cover;
        }

        .article-content {
            padding: 34px;
        }

        .article-content .lead {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.35rem;
            line-height: 1.7;
            color: #f2e3c7;
            margin-bottom: 22px;
        }

        .article-content p,
        .article-content li {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.9;
            margin-bottom: 16px;
        }

        .article-content h2 {
            font-family: 'Cormorant Garamond', serif;
            color: #f4e1c4;
            font-size: 1.9rem;
            margin: 40px 0 16px;
        }

        .article-content h3 {
            font-size: 1.2rem;
            color: var(--accent-2);
            margin: 24px 0 10px;
        }

        .article-content ul {
            padding-left: 20px;
            margin: 16px 0 24px;
        }

        .article-image {
            width: 100%;
            height: 500px;
            object-fit: cover;
            border-radius: 16px;
            margin: 12px 0 16px;
        }

        /*====================
BLOG SINGLE PAGE
====================*/

        .wp-block-heading,
        h2.wp-block-heading,
        h3.wp-block-heading {
            font-family: 'Cormorant Garamond', serif;
            color: #f4e1c4;
            line-height: 1.2;
            margin: 2.8rem 0 1rem;
            letter-spacing: 0.01em;
        }

        h2.wp-block-heading {
            font-size: clamp(2.2rem, 4vw, 3.4rem);
        }

        h3.wp-block-heading {
            font-size: clamp(1.45rem, 2.4vw, 2rem);
        }

        .wp-block-heading::after {
            content: '';
            display: block;
            width: 4.2rem;
            height: 4px;
            margin-top: 1rem;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent-2), var(--accent));
        }

        .wp-block-image {
            margin: 2.4rem 0;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
        }

        .wp-block-image img {
            width: 100%;
            display: block;
            transition: transform 0.8s ease, filter 0.8s ease;
            filter: brightness(0.95);
        }

        .wp-block-image:hover img {
            transform: scale(1.04);
            filter: brightness(1);
        }

        .wp-block-list {
            margin: 1.4rem 0 2.5rem;
            padding-left: 1.35rem;
            color: var(--muted);
        }

        .wp-block-list li {
            margin-bottom: 1rem;
            line-height: 1.9;
            padding-left: 1.4rem;
            position: relative;
        }

        .wp-block-list ul li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--accent-2);
            font-size: 0.95rem;
            top: 0.15rem;
        }

        .wp-block-list ol {
            counter-reset: section;
            list-style: none;
        }

        .wp-block-list ol li::before {
            counter-increment: section;
            content: counter(section) '.';
            position: absolute;
            left: 0;
            color: var(--accent-2);
            font-weight: 700;
        }

        .wp-block-list li strong {
            color: #f9ecd0;
        }

        .wp-block-heading + p,
        .wp-block-heading + .wp-block-image,
        .wp-block-heading + h3 {
            margin-top: 0.75rem;
        }

        p,
        .wp-block-paragraph {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.85;
            margin-bottom: 1.35rem;
        }

        p strong,
        .wp-block-paragraph strong {
            color: #f4e1c4;
        }

        .wp-block-quote {
            margin: 2.4rem 0;
            padding: 2rem 2rem;
            border-left: 4px solid var(--accent-2);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            color: #f4e1c4;
            font-style: italic;
        }

        .wp-block-quote p {
            margin: 0;
            font-size: 1.05rem;
        }

        /*====================
        SIDEBAR CARDS
        ====================*/

        .sidebar {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            width: 100%;
        }

        .sidebar-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 28px 26px;
        }

        .sidebar-card h3 {
            margin: 0 0 16px;
            color: #f4e1c4;
            font-size: 1.1rem;
        }

        .sidebar-card p {
            color: var(--muted);
            margin: 0 0 12px;
        }

        .post-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.post-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.post-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}

.post-item h4 {
  margin: 0 0 4px;
  font-size: 0.97rem;
  color: var(--text);
}

.post-item span {
  font-size: 0.84rem;
  color: var(--muted);
}

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

.tag-list a {
  text-decoration: none;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 0.9rem;
}

.share-box a {
  display: inline-block;
  text-decoration: none;
  color: #071018;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}

/*====================
RESPONSIVE
====================*/

        @media (max-width: 991px) {
            .blog-single-page {
                padding: 60px 0 30px;
            }

            .blog-single-page .blog-layout {
                grid-template-columns: 1fr;
            }

            .blog-single-page .article-card {
                border-radius: 24px;
            }

            .blog-single-page .article-content {
                padding: 32px;
            }

            .featured-media img {
                height: auto;
            }

            .sidebar {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .sidebar-card {
                padding: 24px;
            }

            .post-item img {
                width: 64px;
                height: 64px;
            }
        }

        @media (max-width: 768px) {
            .blog-hero-banner {
                padding: 50px 0;
                min-height: 300px;
            }

            .blog-single-page {
                padding: 45px 0 20px;
            }

            .blog-single-page .article-content {
                padding: 22px 18px;
            }

            .article-content .lead {
                font-size: 1.2rem;
            }

            .article-content h2 {
                font-size: 1.6rem;
                margin: 30px 0 14px;
            }

            .article-content h3 {
                font-size: 1rem;
            }

            .featured-media img {
                height: auto;
            }

            .sidebar-card {
                padding: 20px;
            }

            .post-item {
                gap: 10px;
            }

            .post-item img {
                width: 56px;
                height: 56px;
            }

            .tag-list {
                gap: 8px;
            }

            .tag-list a {
                padding: 7px 10px;
                font-size: 0.85rem;
            }

            .share-box a {
                padding: 10px 14px;
            }

            .sidebar {
                order: 2;
            }
        }

        /*====================================
IMAGES
====================================*/

        .blog-image {

            margin:50px 0;

            overflow:hidden;

            border-radius:4px;

            position:relative;

        }

        .blog-image img {

            width:100%;

            display:block;

            transition:.7s ease;

        }

        .blog-image:hover img {

            transform:scale(1.08);

        }

        /* Dark Overlay */

        .blog-image::before {

            content:"";

            position:absolute;

            inset:0;

            background:rgba(0, 0, 0, .18);

            opacity:0;

            transition:.4s;

            z-index:2;

        }

        .blog-image:hover::before {

            opacity:1;

        }

        /*====================================
HIGHLIGHT BOX
====================================*/

        .highlight-box {

            margin:45px 0;

            padding:40px;

            background:#111b23;

            border-left:4px solid #d4a15c;

            border-radius:4px;

        }

        .highlight-box h3 {

            margin-bottom:25px;

        }

        /*====================================
LIST
====================================*/

        .highlight-box ul {

            list-style:none;

            padding:0;

            margin:0;

        }

        .highlight-box li {

            color:#ececec;

            font-size:17px;

            padding:16px 0;

            padding-left:35px;

            position:relative;

            border-bottom:1px solid rgba(255, 255, 255, .08);

        }

        .highlight-box li:last-child {

            border:none;

        }

        .highlight-box li::before {

            content:"✓";

            position:absolute;

            left:0;

            top:15px;

            width:22px;

            height:22px;

            border-radius:50%;

            background:#d4a15c;

            color:#111;

            display:flex;

            align-items:center;

            justify-content:center;

            font-size:12px;

            font-weight:bold;

        }

        /*====================================
LINKS
====================================*/

        .article-content a {

            color:#d4a15c;

            text-decoration:none;

            transition:.3s;

        }

        .article-content a:hover {

            color:#fff;

        }

        /*====================================
SELECTION
====================================*/

        .article-content ::selection {

            background:#d4a15c;

            color:#111;

        }

        /*====================================
PREMIUM HOVER EFFECTS
====================================*/

        .article-content h2 {

            transition:.35s;

        }

        .article-content h2:hover {

            color:#d4a15c;

        }

        .highlight-box {

            transition:.35s;

        }

        .highlight-box:hover {

            transform:translateY(-6px);

            box-shadow:0 18px 40px rgba(0, 0, 0, .35);

        }

        .blog-image {

            transition:.35s;

        }

        .blog-image:hover {

            box-shadow:0 18px 40px rgba(0, 0, 0, .40);

        }

        /*====================================
TABLET
====================================*/

        @media (max-width:991px) {

            .article-content h2 {

                font-size:38px;

            }

            .article-content h3 {

                font-size:28px;

            }

            .article-content p {

                font-size:17px;

            }

            .drop-cap:first-letter {

                font-size:58px;

                line-height:48px;

            }

            .highlight-box {

                padding:30px;

            }

        }

        /*====================================
MOBILE
====================================*/

        @media (max-width:767px) {

            .article-content {

                margin-top:40px;

            }

            .article-content h2 {

                font-size:30px;

                margin:45px 0 20px;

            }

            .article-content h3 {

                font-size:24px;

            }

            .article-content p {

                font-size:16px;

                line-height:1.9;

            }

            .drop-cap:first-letter {

                font-size:46px;

                line-height:38px;

                padding-right:10px;

            }

            .blog-image {

                margin:30px 0;

            }

            .highlight-box {

                padding:22px;

                margin:30px 0;

            }

            .highlight-box li {

                font-size:15px;


                /*====================================
PAGE-SPECIFIC: Blog Single Enhancements
====================================*/
                .blog-single-page .article-card {
                    border-radius:18px;
                    overflow:hidden;
                    box-shadow: 0 24px 60px rgba(2, 8, 15, 0.6);
                }

                .article-content .lead {
                    font-size:1.4rem;
                    letter-spacing:0.2px;
                }

                /* FAQ accordion */
                .faq-section {
                    margin-top:3.2rem
                }

                .faq-item {
                    padding:0; margin:0 0 14px; background:transparent; border-radius:12px; overflow:hidden
                }

                .faq-question {
                    width:100%;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    padding:18px 20px;
                    background:linear-gradient(90deg, rgba(215, 165, 90, 0.06), rgba(0, 0, 0, 0.02));
                    color:#fff;
                    border:1px solid rgba(255, 255, 255, 0.04);
                    cursor:pointer;
                    font-weight:700;
                    border-radius:12px;
                }

                .faq-question .chev {
                    font-size:18px; transition:transform .25s ease
                }

                .faq-answer {
                    max-height:0; overflow:hidden; transition:max-height .32s ease, padding .25s ease; color:var(--muted); padding:0 20px
                }

                .faq-item.open .faq-answer {
                    padding:14px 20px 18px; max-height:400px
                }

                .faq-item.open .faq-question .chev {
                    transform:rotate(45deg)
                }

                /* small enhancements for images and hero */

                .featured-media img {
                    border-bottom-left-radius:0; border-bottom-right-radius:0
                }

                padding:14px 0 14px 30px;

            }

        }

        /*====================================
SMALL MOBILE
====================================*/

        @media (max-width:480px) {

            .article-content h2 {

                font-size:26px;

            }

            .article-content h3 {

                font-size:22px;

            }

            .article-content p {

                font-size:15px;

            }

            .highlight-box {

                padding:18px;

            }

            .highlight-box li {

                font-size:14px;

            }

        }

        /*==========================================
FAQ SECTION
==========================================*/

        .blog-faq {
            padding:100px 0;
            background:#091117;
        }

        .faq-heading {
            text-align:center;
            margin-bottom:60px;
        }

        .faq-heading span {
            display:block;
            color:#c89a63;
            font-size:14px;
            letter-spacing:4px;
            text-transform:uppercase;
            margin-bottom:15px;
            font-family:'DM Sans', sans-serif;
        }

        .faq-heading h2 {
            color:#f4e2c6;
            font-family:'Cormorant Garamond', serif;
            font-size:58px;
            font-weight:500;
        }

        /*=============================*/

        .faq-wrapper {
            max-width:950px;
            margin:auto;
        }

        .faq-item {
            margin-bottom:20px;
            border:1px solid rgba(255, 255, 255, .08);
            background:#111b22;
            overflow:hidden;
            transition:.35s;
        }

        .faq-item.active {
            border-color:#c89a63;
        }

        .faq-question {
            width:100%;
            border:none;
            background:none;
            display:flex;
            justify-content:space-between;
            align-items:center;
            cursor:pointer;
            padding:25px 30px;
            color:#fff;
            font-size:20px;
            font-family:'Cormorant Garamond', serif;
        }

        .faq-question i {
            color:#c89a63;
            font-size:18px;
            transition:.35s;
        }

        .faq-item.active i {
            transform:rotate(45deg);
        }

        .faq-answer {
            display:none;
            padding:0 30px 25px;
        }

        .faq-answer p {
            color:#d8d8d8;
            line-height:2;
            font-size:17px;
        }

        /* Hover */

        .faq-item:hover {
            transform:translateY(-4px);
            box-shadow:0 15px 30px rgba(0, 0, 0, .25);
        }

        /*==========================================
POST NAVIGATION
==========================================*/

        .post-navigation {
            padding:70px 0 100px;
            background:#091117;
        }

        .post-nav-wrapper {
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:30px;
        }

        .post-box {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            text-decoration:none;
            background:#111b22;
            padding:35px;
            border:1px solid rgba(255, 255, 255, .08);
            transition:.35s;
        }

        .post-box:hover {
            border-color:#c89a63;
            transform:translateY(-5px);
        }

        .post-arrow {
            width:60px;
            height:60px;
            border:1px solid #c89a63;
            border-radius:50%;
            display:flex;
            justify-content:center;
            align-items:center;
            color:#c89a63;
            flex-shrink:0;
            transition:.35s;
        }

        .post-box:hover .post-arrow {
            background:#c89a63;
            color:#111;
        }

        .post-content span {
            display:block;
            color:#c89a63;
            font-size:13px;
            letter-spacing:2px;
            text-transform:uppercase;
            margin-bottom:10px;
        }

        .post-content h3 {
            color:#f4e2c6;
            font-family:'Cormorant Garamond', serif;
            font-size:30px;
            line-height:1.4;
            font-weight:500;
        }

        .post-box.next {
            text-align:right;
        }

        /*==========================================
TABLET
==========================================*/

        @media(max-width:991px) {

            .blog-faq {
                padding:80px 0;
            }

            .faq-heading h2 {
                font-size:42px;
            }

            .post-nav-wrapper {
                grid-template-columns:1fr;
            }

            .post-content h3 {
                font-size:26px;
            }

        }

        /*==========================================
MOBILE
==========================================*/

        @media(max-width:767px) {

            .blog-faq {
                padding:60px 0;
            }

            .faq-heading {
                margin-bottom:40px;
            }

            .faq-heading h2 {
                font-size:32px;
            }

            .faq-question {
                padding:18px;
                font-size:18px;
                align-items:flex-start;
                gap:15px;
            }

            .faq-answer {
                padding:0 18px 20px;
            }

            .faq-answer p {
                font-size:15px;
                line-height:1.8;
            }

            .post-navigation {
                padding:50px 0 60px;
            }

            .post-box {
                flex-direction:column;
                text-align:center;
                padding:25px;
            }

            .post-box.next {
                text-align:center;
            }

            .post-content h3 {
                font-size:24px;
            }

            .post-arrow {
                width:52px;
                height:52px;
            }

        }

        /*==========================================
SMALL MOBILE
==========================================*/

        @media(max-width:480px) {

            .faq-heading h2 {
                font-size:28px;
            }

            .faq-question {
                font-size:17px;
            }

            .post-content h3 {
                font-size:21px;
            }

        }

        /*==========================================
PREMIUM ANIMATION
==========================================*/

        .faq-item,
        .post-box {
            animation:fadeUp .8s ease both;
        }

        @keyframes fadeUp {

            from {
                opacity:0;
                transform:translateY(40px);
            }

            to {
                opacity:1;
                transform:translateY(0);
            }

        }