/* ==========================================================================
   BLOG.CSS — Kashmir Decor blog article template.
   Reusable for every future blog post — only the article content and the
   KD data inside <script> change per post. Self-contained: loads only
   global.css + this file.
   ========================================================================== */

.kd-home { background: var(--color-linen); color: var(--color-black); }
.kd-home img { max-width: 100%; display: block; object-fit: contain; box-sizing: border-box; }
.kd-home a { color: inherit; text-decoration: none; }
.kd-home h1, .kd-home h2, .kd-home h3, .kd-home h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; }
.kd-container { width: 90%; max-width: var(--global-width); margin: 0 auto; }

.kd-eyebrow {
    display: inline-flex; align-items: center; gap: var(--dim-8px);
    font-size: var(--font-small); letter-spacing: var(--letter-spacing);
    text-transform: uppercase; color: var(--color-gold) !important; margin-bottom: var(--dim-16px);
}
.kd-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-gold); }

/* --- BUTTONS --- */
.kd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--dim-10px);
    padding: var(--dim-16px) var(--dim-24px); border-radius: var(--roundness-full);
    font-size: var(--font-medium); font-weight: 700; cursor: pointer; border: 1px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kd-btn-primary { background: var(--color-emerald); color: var(--color-white) !important; }
.kd-btn-primary:hover { background: var(--color-emerald-dark); transform: translateY(-3px); box-shadow: var(--color-shadow-emerald); }
.kd-btn-whatsapp { background: #1DA851; color: var(--color-white) !important; }
.kd-btn-whatsapp:hover { background: #17903f; transform: translateY(-3px); }
.kd-btn-ghost { border-color: var(--color-stroke-warm); color: var(--color-black); background: var(--color-white); }
.kd-btn-ghost:hover { border-color: var(--color-emerald); transform: translateY(-3px); }

/* --- NAV --- */
.kd-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(246, 241, 231, 0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-stroke-warm);
}
.kd-nav-inner {
    width: 90%; max-width: var(--global-max-width); margin: 0 auto;
    height: var(--dim-nav-size); min-height: 84px;
    display: flex; align-items: center; justify-content: space-between;
}
.kd-nav-brand { font-family: var(--font-display); font-size: var(--font-large); display: flex; align-items: center; gap: var(--dim-16px); }
.kd-nav-brand > img:nth-child(1) { width: 40px; height: 40px; }
.kd-nav-brand > img:nth-child(2) { width: fit-content; height: 24px; }
.kd-nav-links { display: none; align-items: center; gap: var(--dim-40px); font-size: var(--font-medium); }
.kd-nav-links a:hover { color: var(--color-emerald); }
.kd-nav-links a.kd-nav-active { color: var(--color-emerald); }
.kd-nav-actions { display: flex; align-items: center; gap: var(--dim-16px); }
.kd-lang-switch {
    font-size: var(--font-small); border: 1px solid var(--color-stroke-warm);
    border-radius: var(--roundness-full); padding: var(--dim-8px) var(--dim-12px); background: none; cursor: pointer;
}
.kd-lang-switch:hover { border-color: var(--color-emerald); }
@media only screen and (min-width: 960px) { .kd-nav-links { display: flex; } }
@media only screen and (max-width: 1350px) {
    .kd-nav-links > a:nth-child(3), .kd-nav-links > a:nth-child(4), .kd-nav-links > a:nth-child(5) { display: none; }
}
@media only screen and (max-width: 700px) {
    .kd-nav-inner { height: 64px; min-height: 64px; }
    .kd-nav-brand { font-size: var(--font-medium); gap: var(--dim-8px); }
    .kd-nav-brand > img:nth-child(1) { width: 30px; height: 30px; }
    .kd-nav-brand > img:nth-child(2) { height: 18px; }
    .kd-nav-actions .kd-btn { padding: var(--dim-10px) var(--dim-16px); font-size: var(--font-small); }
}
@media only screen and (max-width: 480px) { .kd-nav-actions > a:nth-child(2) { display: none; } }

/* --- READING PROGRESS BAR --- */
.kd-post-progress {
    position: fixed; top: 0; inset-inline-start: 0; height: 3px;
    background: var(--color-gold); z-index: 150; width: 0%;
    transition: width 0.1s linear;
}

/* --- BREADCRUMB --- */
.kd-crumb { padding: var(--dim-16px) 0; background: var(--color-white); border-bottom: 1px solid var(--color-stroke-warm); }
.kd-crumb-inner { display: flex; align-items: center; gap: var(--dim-8px); font-size: var(--font-small); color: var(--color-gray); flex-wrap: wrap; }
.kd-crumb-inner a:hover { color: var(--color-emerald); }
.kd-crumb-current { color: var(--color-emerald); font-weight: 700; }

/* --- POST HEADER --- */
.kd-post-header { padding: var(--dim-48px) 0 var(--dim-32px); background: var(--color-white); }
.kd-post-header h1 { font-size: clamp(28px, 4.5vw, 46px); color: var(--color-emerald); margin: var(--dim-12px) 0 var(--dim-16px); max-width: 820px; }
.kd-post-meta { display: flex; flex-wrap: wrap; gap: var(--dim-16px); font-size: var(--font-small); color: var(--color-gray); }
.kd-post-meta span { display: flex; align-items: center; gap: var(--dim-6px); }
.kd-post-meta i { color: var(--color-gold); }

/* --- HERO IMAGE --- */
.kd-post-hero-wrap { background: var(--color-white); padding-bottom: var(--dim-48px); }
.kd-post-hero-img { 
    
    max-height: 460px; 
    object-fit: cover; 
    border-radius: var(--roundness-28px); 
    box-shadow: var(--color-shadow-emerald); 
    display: flex; 
    object-fit: cover !important; 
    height: 300px;

}

/* --- LAYOUT: TOC + ARTICLE --- */
.kd-post-layout { padding: var(--dim-64px) 0 var(--dim-92px); background: var(--color-linen); }
.kd-post-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-48px); align-items: start; }

.kd-post-toc {
    display: flex; flex-direction: column; gap: var(--dim-10px);
    background: var(--color-white); border: 1px solid var(--color-stroke-warm);
    border-radius: var(--roundness-28px); padding: var(--dim-24px);
}
.kd-post-toc-label { font-size: var(--font-small); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing); color: var(--color-gray); margin-bottom: var(--dim-4px); }
.kd-post-toc a { font-size: var(--font-small); color: var(--color-gray); padding: var(--dim-6px) 0; border-inline-start: 2px solid transparent; padding-inline-start: var(--dim-12px); transition: color 0.2s ease, border-color 0.2s ease; }
.kd-post-toc a:hover { color: var(--color-emerald); }
.kd-post-toc a.active { color: var(--color-emerald); font-weight: 700; border-inline-start-color: var(--color-gold); }

@media only screen and (min-width: 960px) {
    .kd-post-grid { grid-template-columns: 0.85fr 2fr; }
    .kd-post-toc { position: sticky; top: 112px; }
}

/* --- ARTICLE BODY --- */
.kd-post-body h2 { font-size: clamp(22px, 3vw, 30px); color: var(--color-emerald); margin: var(--dim-40px) 0 var(--dim-16px); scroll-margin-top: 112px; }
.kd-post-body h2:first-child { margin-top: 0; }
.kd-post-body h3 { font-size: var(--font-large); color: var(--color-black); margin: var(--dim-24px) 0 var(--dim-10px); }
.kd-post-body p { font-size: var(--font-medium); color: var(--color-gray); line-height: var(--line-height); margin-bottom: var(--dim-16px); }
.kd-post-body ul, .kd-post-body ol { margin: 0 0 var(--dim-16px); padding-inline-start: var(--dim-24px); color: var(--color-gray); font-size: var(--font-medium); line-height: var(--line-height); }
.kd-post-body li { margin-bottom: var(--dim-8px); }
.kd-post-body strong { color: var(--color-black); }

.kd-post-pullquote {
    border-inline-start: 3px solid var(--color-gold);
    padding-inline-start: var(--dim-24px);
    margin: var(--dim-24px) 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--font-large);
    color: var(--color-emerald);
    line-height: 1.4;
}

.kd-post-table { width: 100%; border-collapse: collapse; margin: var(--dim-16px) 0 var(--dim-24px); background: var(--color-white); border-radius: var(--roundness); overflow: hidden; border: 1px solid var(--color-stroke-warm); }
.kd-post-table th, .kd-post-table td { padding: var(--dim-12px) var(--dim-16px); text-align: start; font-size: var(--font-small); border-bottom: 1px solid var(--color-stroke-warm); }
.kd-post-table th { background: var(--color-sand); color: var(--color-emerald-dark); font-weight: 700; }
.kd-post-table tr:last-child td { border-bottom: none; }

.kd-post-img-inline { border-radius: var(--roundness); margin: var(--dim-16px) 0 var(--dim-24px); width: 100%; object-fit: cover; max-height: 340px; }

/* --- MID-ARTICLE CTA --- */
.kd-post-cta {
    background: var(--color-emerald); color: var(--color-white);
    border-radius: var(--roundness-28px); padding: var(--dim-32px);
    margin: var(--dim-40px) 0; display: flex; flex-direction: column; gap: var(--dim-16px);
}
.kd-post-cta h3 { color: var(--color-white); font-size: var(--font-large); margin: 0; }
.kd-post-cta p { color: rgba(255, 255, 255, 0.8); margin: 0; }
.kd-post-cta-actions { display: flex; flex-wrap: wrap; gap: var(--dim-12px); }
@media only screen and (min-width: 700px) { .kd-post-cta { flex-direction: row; align-items: center; justify-content: space-between; } }

/* --- FAQ --- */
.kd-post-faq { margin-top: var(--dim-48px); }
.kd-post-faq-list { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-stroke-warm); border-radius: var(--roundness-28px); overflow: hidden; }
.kd-post-faq-item { border-bottom: 1px solid var(--color-stroke-warm); }
.kd-post-faq-item:last-child { border-bottom: none; }
.kd-post-faq-question {
    width: 100%; text-align: start; background: none; border: none; padding: var(--dim-20px) var(--dim-24px);
    display: flex; justify-content: space-between; align-items: center; gap: var(--dim-16px);
    font-family: inherit; font-size: var(--font-medium); font-weight: 600; color: var(--color-black); cursor: pointer;
}
.kd-post-faq-question .kd-icon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-stroke-warm);
    display: flex; align-items: center; justify-content: center; font-size: var(--font-small);
    color: var(--color-emerald); transition: transform 0.25s ease, background 0.25s ease;
}
.kd-post-faq-item.active .kd-post-faq-question .kd-icon { background: var(--color-emerald); transform: rotate(45deg); }
.kd-post-faq-item.active .kd-post-faq-question .kd-icon i { color: var(--color-white) !important; }
.kd-post-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.kd-post-faq-answer p { padding: 0 var(--dim-24px) var(--dim-20px); color: var(--color-gray); font-size: var(--font-medium); line-height: var(--line-height); margin: 0; }
.kd-post-faq-item.active .kd-post-faq-answer { max-height: 300px; }

/* --- RELATED SERVICES --- */
.kd-post-related { margin-top: var(--dim-48px); }
.kd-post-related h3 { font-size: var(--font-large); color: var(--color-emerald); margin-bottom: var(--dim-16px); }
.kd-post-related-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-12px); }
.kd-post-related-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--dim-12px);
    background: var(--color-white); border: 1px solid var(--color-stroke-warm); border-radius: var(--roundness);
    padding: var(--dim-16px) var(--dim-20px); font-weight: 700; color: var(--color-black);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.kd-post-related-item:hover { border-color: var(--color-emerald); transform: translateY(-2px); }
.kd-post-related-item i { color: var(--color-gold); }
@media only screen and (min-width: 700px) { .kd-post-related-grid { grid-template-columns: 1fr 1fr; } }

/* --- FINAL CTA BAND --- */
.kd-post-final-cta { padding: var(--dim-64px) 0; background: var(--color-sand); text-align: center; }
.kd-post-final-cta h2 { font-size: clamp(26px, 4vw, 36px); color: var(--color-emerald); margin-bottom: var(--dim-12px); }
.kd-post-final-cta p { font-size: var(--font-medium); color: var(--color-gray); max-width: 480px; margin: 0 auto var(--dim-24px); }
.kd-post-final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dim-12px); }

/* --- FOOTER --- */
.kd-footer { background: var(--color-black); color: rgba(255, 255, 255, 0.7); padding: var(--dim-64px) 0 var(--dim-16px); }
.kd-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--dim-40px); padding-bottom: var(--dim-40px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kd-footer-brand { font-family: var(--font-display); font-size: var(--font-large); color: var(--color-white); margin-bottom: var(--dim-16px); }
.kd-footer-col p { font-size: var(--font-medium); line-height: var(--line-height); max-width: 320px; color: var(--color-white); }
.kd-footer-col h5 { font-size: var(--font-small); font-weight: 700; letter-spacing: var(--letter-spacing); text-transform: uppercase; color: var(--color-white); margin-bottom: var(--dim-16px); }
.kd-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--dim-10px); font-size: var(--font-small); color: var(--color-white); }
.kd-footer-col a { color: var(--color-white); }
.kd-footer-col ul a:hover { color: var(--color-gold-light); }
.kd-footer-social { display: flex; gap: var(--dim-10px); margin-top: var(--dim-16px); }
.kd-footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; }
.kd-footer-social a:hover { background: var(--color-gold); color: var(--color-black); }
.kd-footer-bottom { display: flex; flex-direction: column; gap: var(--dim-16px); justify-content: space-between; align-items: center; padding-top: var(--dim-24px); font-size: var(--font-small); }
.kd-footer-bottom * { color: var(--color-white); }
@media only screen and (min-width: 800px) { .kd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .kd-footer-bottom { flex-direction: row; } }

/* --- FLOATING WHATSAPP --- */
.kd-whatsapp-float {
    position: fixed; bottom: var(--dim-24px); inset-inline-end: var(--dim-24px); z-index: 200;
    width: 58px; height: 58px; border-radius: 50%; background: #1DA851; color: var(--color-white);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.25s ease;
}
.kd-whatsapp-float:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) { .kd-home * { transition: none !important; } }

/* --- RESPONSIVE --- */
@media only screen and (max-width: 700px) {
    .kd-post-header { padding: var(--dim-32px) 0 var(--dim-24px); }
    .kd-post-layout { padding: var(--dim-48px) 0; }
    .kd-post-cta { padding: var(--dim-24px); }
    .kd-whatsapp-float { width: 50px; height: 50px; font-size: 20px; }
}

/* --- RTL --- */
[dir="rtl"] .kd-home { font-family: var(--font-body-ar); }
[dir="rtl"] .kd-home h1, [dir="rtl"] .kd-home h2, [dir="rtl"] .kd-home h3, [dir="rtl"] .kd-home h4,
[dir="rtl"] .kd-nav-brand, [dir="rtl"] .kd-footer-brand, [dir="rtl"] .kd-post-pullquote {
    font-family: var(--font-display-ar);
}
[dir="rtl"] .kd-post-progress { inset-inline-start: auto; inset-inline-end: 0; }
.fa-whatsapp{
    color: var(--color-white) !important;
}
.kd-whatsapp-float{
    text-decoration: none !important;
}

.kd-work{ 
    height: fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;

}

.kd-work img{
    border-radius: var(--roundness-28px);
}
.kd-work p{
    font-size: var(--font-medium);
    margin: 0px;
    padding: 0px;
    color: var(--color-emerald-dark);
    margin-top: var(--dim-16px);
}
.kd-work i{
   
    margin-inline-end: var(--dim-4px);
}