/*
Theme Name: Service Nettoyage Orléans — Blog
Theme URI: https://service-nettoyage-orleans.fr
Description: Thème WordPress pour le blog de Service Nettoyage Orléans. Design professionnel avec DM Sans & DM Serif Display.
Version: 1.0
Author: Service Nettoyage Orléans
Author URI: https://service-nettoyage-orleans.fr
Text Domain: service-nettoyage-orleans
License: Proprietary
*/

/* ============================================================
   Service Nettoyage Orléans — Design System & Global Styles
   ============================================================ */

/* 1. DESIGN TOKENS */
:root {
  --c-primary:       #0275d8;
  --c-primary-dark:  #0260b8;
  --c-primary-light: #e8f2fc;
  --c-accent:        #00c2a8;
  --c-accent-light:  #e0f7f4;
  --c-900:   #0f172a; --c-800:   #1e293b; --c-700:   #334155;
  --c-600:   #475569; --c-500:   #64748b; --c-400:   #94a3b8;
  --c-300:   #cbd5e1; --c-200:   #e2e8f0; --c-100:   #f1f5f9;
  --c-50:    #f8fafc; --c-white: #ffffff;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:3.75rem;
  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --r-sm:0.375rem; --r-md:0.625rem; --r-lg:1rem; --r-xl:1.25rem;
  --r-2xl:1.75rem; --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 30px rgba(0,0,0,0.10);
  --shadow-xl:0 24px 48px rgba(0,0,0,0.12);
  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:400ms ease;
  --max-width:1280px; --nav-height:68px;
}

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.7;color:var(--c-800);background:var(--c-white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}

/* 3. TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;color:var(--c-900);font-weight:400}
h1{font-size:clamp(2rem,5vw,var(--text-5xl))}
h2{font-size:clamp(1.5rem,3vw,var(--text-3xl))}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
p{color:var(--c-700)}
.lead{font-size:var(--text-lg);color:var(--c-600);font-weight:300;line-height:1.8}

/* 4. LAYOUT */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--sp-6)}
.section{padding:var(--sp-20) 0}
.section--sm{padding:var(--sp-12) 0}
.section--bg{background:var(--c-50)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:0 var(--sp-4)}}

/* 5. BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border-radius:var(--r-full);font-size:var(--text-sm);font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:all var(--t-base);white-space:nowrap;border:2px solid transparent}
.btn--primary{background:var(--c-primary);color:var(--c-white);box-shadow:0 4px 14px rgba(2,117,216,0.3)}
.btn--primary:hover{background:var(--c-primary-dark);box-shadow:0 6px 20px rgba(2,117,216,0.4);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--c-700);border-color:var(--c-300)}
.btn--outline:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}
.btn--ghost{background:transparent;color:var(--c-primary)}
.btn--ghost:hover{background:var(--c-primary-light)}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs)}
.btn--lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-base)}

/* 6. CARDS */
.card{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--t-base),transform var(--t-base)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--featured{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary),var(--shadow-md)}
.card__icon{width:48px;height:48px;border-radius:var(--r-lg);background:var(--c-primary-light);color:var(--c-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);font-size:22px}
.card__title{font-size:var(--text-lg);font-weight:600;color:var(--c-900);margin-bottom:var(--sp-3);font-family:var(--font-sans)}

/* 7. BADGES */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:600;letter-spacing:0.3px}
.badge--primary{background:var(--c-primary-light);color:var(--c-primary)}
.badge--accent{background:var(--c-accent-light);color:#007a6a}
.badge--neutral{background:var(--c-100);color:var(--c-600)}

/* 8. FORMS */
.form-group{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-label{font-size:var(--text-sm);font-weight:500;color:var(--c-700)}
.form-input,.form-select,.form-textarea{width:100%;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--c-200);border-radius:var(--r-lg);font-size:var(--text-sm);font-family:var(--font-sans);color:var(--c-800);background:var(--c-white);transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(2,117,216,0.12)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--c-400)}
.form-textarea{resize:vertical;min-height:120px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* 9. HERO */
.hero{background:linear-gradient(135deg,var(--c-white) 0%,#eef6ff 50%,var(--c-white) 100%);padding:var(--sp-20) 0;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(2,117,216,0.08) 0%,transparent 70%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
.hero__eyebrow{font-size:var(--text-xs);font-weight:600;color:var(--c-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2)}
.hero__eyebrow::before{content:'';display:inline-block;width:24px;height:2px;background:var(--c-primary);border-radius:var(--r-full)}
.hero__title{margin-bottom:var(--sp-6)}
.hero__desc{margin-bottom:var(--sp-8)}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.hero__trust{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4)}
.hero__trust-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--c-600)}
.hero__image-wrap{position:relative}
.hero__image-wrap::before{content:'';position:absolute;inset:-16px;background:linear-gradient(135deg,rgba(2,117,216,0.12),rgba(0,194,168,0.08));border-radius:var(--r-2xl);z-index:0}
.hero__image{position:relative;z-index:1;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-xl)}
.hero__image img{width:100%;height:420px;object-fit:cover}
.hero__stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.hero__stat{background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-4);text-align:center}
.hero__stat-value{display:block;font-size:var(--text-xl);font-weight:700;color:var(--c-primary);line-height:1;margin-bottom:var(--sp-1)}
.hero__stat-label{font-size:var(--text-xs);color:var(--c-500)}
@media(max-width:1024px){.hero__grid{grid-template-columns:1fr}.hero__image-wrap{display:none}}

/* 10. SECTION HEADERS */
.section-header{text-align:center;max-width:640px;margin:0 auto var(--sp-12)}
.section-header .badge{margin-bottom:var(--sp-3)}
.section-header h2{margin-bottom:var(--sp-4)}
.section-header--left{text-align:left;margin:0 0 var(--sp-10)}

/* 11. STATS BAR */
.stats-bar{background:var(--c-primary);padding:var(--sp-8) 0}
.stats-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);text-align:center}
.stats-bar__value{display:block;font-size:var(--text-4xl);font-weight:700;color:var(--c-white);font-family:var(--font-display);margin-bottom:var(--sp-1)}
.stats-bar__label{font-size:var(--text-sm);color:rgba(255,255,255,0.75)}
@media(max-width:768px){.stats-bar__grid{grid-template-columns:repeat(2,1fr)}}

/* 12. MAP */
.map-section{background:var(--c-50);padding:var(--sp-20) 0}
.map-wrap{border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--c-200);height:480px;position:relative}
.map-wrap iframe{width:100%;height:100%;border:none;display:block}
.map-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.map-legend-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-lg);font-size:var(--text-sm);font-weight:500;color:var(--c-700);transition:all var(--t-fast)}
.map-legend-item:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}
@media(max-width:1024px){.map-legend{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.map-legend{grid-template-columns:1fr}.map-wrap{height:320px}}

/* 13. TESTIMONIALS */
.testimonial{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6)}
.testimonial__stars{color:#f59e0b;font-size:var(--text-base);margin-bottom:var(--sp-3)}
.testimonial__text{font-size:var(--text-sm);color:var(--c-700);line-height:1.7;font-style:italic;margin-bottom:var(--sp-4)}
.testimonial__author{font-size:var(--text-xs);color:var(--c-500);font-weight:500}

/* 14. FOOTER */
.nc-footer{background:var(--c-900);color:var(--c-400);padding:var(--sp-16) 0 var(--sp-8)}
.nc-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--sp-10);margin-bottom:var(--sp-12)}
.nc-footer__logo{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.nc-footer__logo-icon{width:40px;height:40px;border-radius:var(--r-lg);background:var(--c-primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm)}
.nc-footer__logo-text{color:var(--c-white);font-size:var(--text-base);font-weight:600}
.nc-footer__logo-sub{color:var(--c-400);font-size:var(--text-xs)}
.nc-footer__desc{font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--sp-5)}
.nc-footer__col-title{font-size:var(--text-xs);font-weight:700;color:var(--c-white);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-5)}
.nc-footer__links{display:flex;flex-direction:column;gap:var(--sp-3)}
.nc-footer__link{font-size:var(--text-sm);color:var(--c-400);transition:color var(--t-fast)}
.nc-footer__link:hover{color:var(--c-white)}
.nc-footer__newsletter-form{display:flex;gap:var(--sp-2)}
.nc-footer__newsletter-input{flex:1;padding:var(--sp-3) var(--sp-4);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-lg);background:rgba(255,255,255,0.06);color:var(--c-white);font-size:var(--text-sm);font-family:var(--font-sans);outline:none}
.nc-footer__newsletter-input::placeholder{color:var(--c-500)}
.nc-footer__newsletter-input:focus{border-color:var(--c-primary)}
.nc-footer__newsletter-btn{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--c-primary);color:white;font-size:var(--text-sm);font-weight:600}
.nc-footer__newsletter-btn:hover{background:var(--c-primary-dark)}
.nc-footer__bottom{padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.nc-footer__copy{font-size:var(--text-sm)}
.nc-footer__socials{display:flex;gap:var(--sp-3)}
.nc-footer__social{width:36px;height:36px;border-radius:var(--r-md);background:rgba(255,255,255,0.06);color:var(--c-400);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast)}
.nc-footer__social:hover{background:var(--c-primary);color:white}
@media(max-width:1024px){.nc-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nc-footer__grid{grid-template-columns:1fr}}

/* 15. SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* 16. UTILITIES */
.text-primary{color:var(--c-primary)} .text-accent{color:var(--c-accent)} .text-muted{color:var(--c-500)} .text-center{text-align:center}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)}
.mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.flex{display:flex} .flex-center{display:flex;align-items:center;justify-content:center}
.gap-2{gap:var(--sp-2)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 17. FAQ */
.faq-item{border:1px solid var(--c-200);border-radius:var(--r-xl);margin-bottom:var(--sp-3);overflow:hidden}
.faq-question{width:100%;padding:var(--sp-5) var(--sp-6);display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base);font-weight:600;color:var(--c-900);cursor:pointer;background:var(--c-white);font-family:var(--font-sans);transition:background var(--t-fast)}
.faq-question:hover{background:var(--c-50)}
.faq-question svg{transition:transform var(--t-base);flex-shrink:0}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--t-slow)}
.faq-answer-inner{padding:0 var(--sp-6) var(--sp-5);color:var(--c-700);font-size:var(--text-sm);line-height:1.7}
.faq-item.is-open .faq-answer{max-height:500px}
.faq-item.is-open .faq-question svg{transform:rotate(180deg)}

/* 18. SIMULATOR */
.simulator{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-8);box-shadow:var(--shadow-md)}
.simulator__results{background:var(--c-50);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-6);margin-top:var(--sp-6)}
.simulator__result-value{font-size:var(--text-3xl);font-weight:700;color:var(--c-primary);font-family:var(--font-display)}

/* 19. BENTO GRID */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-6)}
.bento__item{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.bento__item--7{grid-column:span 7}
.bento__item--5{grid-column:span 5}
.bento__item--6{grid-column:span 6}
.bento__item--4{grid-column:span 4}
.bento__item--12{grid-column:span 12}
@media(max-width:1024px){.bento__item--7,.bento__item--5,.bento__item--6,.bento__item--4{grid-column:span 6}}
@media(max-width:640px){.bento__item--7,.bento__item--5,.bento__item--6,.bento__item--4,.bento__item--12{grid-column:span 12}}

/* 20. BEFORE/AFTER */
.before-after{border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--c-200);box-shadow:var(--shadow-sm)}
.before-after__images{display:grid;grid-template-columns:1fr 1fr}
.before-after__images img{width:100%;height:200px;object-fit:cover}
.before-after__caption{padding:var(--sp-4);font-size:var(--text-sm);color:var(--c-700)}

/* 21. CONTACT INFO */
.contact-info{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.contact-info__item{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-5);text-align:center}
.contact-info__icon{font-size:1.5rem;margin-bottom:var(--sp-3)}
.contact-info__label{font-size:var(--text-xs);color:var(--c-500);margin-bottom:var(--sp-1)}
.contact-info__value{font-size:var(--text-sm);font-weight:600;color:var(--c-900)}
@media(max-width:768px){.contact-info{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.contact-info{grid-template-columns:1fr}}

/* 22. PRICING CARDS */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.pricing-card{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-2xl);padding:var(--sp-8);text-align:center;position:relative;transition:all var(--t-base)}
.pricing-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-card--featured{border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary),var(--shadow-lg)}
.pricing-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--c-primary);color:var(--c-white);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700}
.pricing-card__price{font-size:var(--text-4xl);font-weight:700;color:var(--c-primary);font-family:var(--font-display);margin:var(--sp-4) 0}
.pricing-card__unit{font-size:var(--text-sm);color:var(--c-500);font-weight:400}
.pricing-card__features{list-style:none;text-align:left;margin:var(--sp-6) 0}
.pricing-card__features li{padding:var(--sp-2) 0;font-size:var(--text-sm);color:var(--c-700);display:flex;align-items:center;gap:var(--sp-2)}
.pricing-card__features li::before{content:'\2713';color:var(--c-primary);font-weight:700}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr}}

/* 23. QUARTIER SPECIFICS */
.quartier-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.quartier-spec{background:var(--c-white);border:1px solid var(--c-200);border-radius:var(--r-xl);padding:var(--sp-5)}
.quartier-spec__icon{font-size:1.25rem;margin-bottom:var(--sp-2)}
.quartier-spec__text{font-size:var(--text-sm);color:var(--c-700)}
@media(max-width:768px){.quartier-specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.quartier-specs{grid-template-columns:1fr}}


/* ============================================================
   WORDPRESS BLOG — Styles spécifiques
   ============================================================ */

/* --- Blog Hero --- */
.blog-hero {
  background: linear-gradient(135deg, var(--c-white) 0%, #eef6ff 50%, var(--c-white) 100%);
  padding: var(--sp-16) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(2,117,216,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.blog-hero h1 {
  margin-bottom: var(--sp-4);
}
.blog-hero p {
  font-size: var(--text-lg);
  color: var(--c-600);
  max-width: 600px;
  margin: 0 auto;
}

/* --- Blog Layout --- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Article Cards (Blog listing) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
.blog-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .blog-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .blog-grid--3 {
    grid-template-columns: 1fr;
  }
}

.article-card {
  background: var(--c-white);
  border: 1px solid var(--c-200);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.article-card__image {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.article-card:hover .article-card__image img {
  transform: scale(1.05);
}
.article-card__image .badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
}
.article-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--c-900);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
  font-weight: 400;
}
.article-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
.article-card__title a:hover {
  color: var(--c-primary);
}
.article-card__excerpt {
  font-size: var(--text-sm);
  color: var(--c-600);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
  flex: 1;
}
.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--c-500);
  margin-bottom: var(--sp-4);
}
.article-card__meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-100);
}
.article-card__read-more {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--t-fast);
}
.article-card__read-more:hover {
  gap: var(--sp-3);
}
.article-card__date {
  font-size: var(--text-xs);
  color: var(--c-400);
}

/* --- No Featured Image Fallback --- */
.article-card__image--placeholder {
  background: linear-gradient(135deg, var(--c-primary-light), #eef6ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-card__image--placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--c-primary);
  opacity: 0.4;
}

/* --- Single Article --- */
.single-article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-8) 0;
}

.single-article__featured-image {
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin-bottom: var(--sp-8);
  box-shadow: var(--shadow-md);
}
.single-article__featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.single-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--c-500);
}
.single-article__meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.single-article__meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-400);
}
.single-article__meta-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-300);
}

/* --- Article Content (the_content) --- */
.single-article__content {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--c-800);
}
.single-article__content h2 {
  font-size: var(--text-2xl);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
}
.single-article__content h3 {
  font-size: var(--text-xl);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.single-article__content h4 {
  font-size: var(--text-lg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.single-article__content p {
  margin-bottom: var(--sp-5);
  color: var(--c-700);
}
.single-article__content a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.single-article__content a:hover {
  color: var(--c-primary-dark);
}
.single-article__content ul,
.single-article__content ol {
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-6);
}
.single-article__content ul {
  list-style: disc;
}
.single-article__content ol {
  list-style: decimal;
}
.single-article__content li {
  margin-bottom: var(--sp-2);
  color: var(--c-700);
  line-height: 1.7;
}
.single-article__content img {
  border-radius: var(--r-xl);
  margin: var(--sp-6) 0;
}
.single-article__content blockquote,
.single-article__content .wp-block-quote {
  border-left: 4px solid var(--c-primary);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-6) 0;
  background: var(--c-50);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-style: italic;
  color: var(--c-600);
}
.single-article__content blockquote p {
  margin-bottom: 0;
  color: var(--c-600);
}
.single-article__content blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--c-500);
}
.single-article__content pre,
.single-article__content code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--text-sm);
}
.single-article__content code {
  background: var(--c-100);
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
  color: var(--c-primary-dark);
}
.single-article__content pre {
  background: var(--c-900);
  color: var(--c-200);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  overflow-x: auto;
  margin: var(--sp-6) 0;
}
.single-article__content pre code {
  background: none;
  padding: 0;
  color: inherit;
}
.single-article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
}
.single-article__content th,
.single-article__content td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-200);
  text-align: left;
  font-size: var(--text-sm);
}
.single-article__content th {
  background: var(--c-50);
  font-weight: 600;
  color: var(--c-900);
}
.single-article__content hr {
  border: none;
  border-top: 1px solid var(--c-200);
  margin: var(--sp-8) 0;
}

/* --- WordPress Block Styles --- */
.wp-block-image {
  margin: var(--sp-6) 0;
}
.wp-block-image img {
  border-radius: var(--r-xl);
}
.wp-block-image figcaption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--c-500);
  margin-top: var(--sp-2);
}
.wp-block-quote {
  border-left: 4px solid var(--c-primary);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-6) 0;
  background: var(--c-50);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.wp-block-quote cite {
  font-size: var(--text-sm);
  color: var(--c-500);
  font-style: normal;
}
.wp-block-pullquote {
  border-top: 3px solid var(--c-primary);
  border-bottom: 3px solid var(--c-primary);
  padding: var(--sp-6) 0;
  margin: var(--sp-8) 0;
  text-align: center;
}
.wp-block-pullquote blockquote p {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  color: var(--c-900);
}
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--c-200);
  margin: var(--sp-8) 0;
}
.wp-block-cover {
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin: var(--sp-6) 0;
}
.wp-block-gallery {
  margin: var(--sp-6) 0;
}
.wp-block-gallery .wp-block-image {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wp-block-columns {
  margin: var(--sp-6) 0;
}
.wp-block-button__link {
  background: var(--c-primary);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all var(--t-base);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.wp-block-button__link:hover {
  background: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2,117,216,0.3);
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-200);
  font-size: var(--text-sm);
}
.wp-block-table th {
  background: var(--c-50);
  font-weight: 600;
}
.wp-block-embed {
  margin: var(--sp-6) 0;
}
.wp-block-embed iframe {
  border-radius: var(--r-xl);
}

/* --- Tags --- */
.single-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-200);
}
.single-article__tags a {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-100);
  color: var(--c-600);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all var(--t-fast);
}
.single-article__tags a:hover {
  background: var(--c-primary-light);
  color: var(--c-primary);
}

/* --- Author Box --- */
.author-box {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: var(--r-2xl);
  margin-top: var(--sp-8);
}
.author-box__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-box__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-box__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-900);
  margin-bottom: var(--sp-1);
}
.author-box__bio {
  font-size: var(--text-sm);
  color: var(--c-600);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  font-size: var(--text-sm);
  color: var(--c-500);
}
.breadcrumb a {
  color: var(--c-500);
  transition: color var(--t-fast);
}
.breadcrumb a:hover {
  color: var(--c-primary);
}
.breadcrumb__separator {
  color: var(--c-400);
}
.breadcrumb__current {
  color: var(--c-800);
  font-weight: 500;
}

/* --- Related Articles --- */
.related-articles {
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--c-200);
}
.related-articles h2 {
  margin-bottom: var(--sp-6);
  text-align: center;
}

/* --- Sidebar --- */
.sidebar .widget {
  margin-bottom: var(--sp-6);
}
.sidebar .widget:hover {
  transform: none;
}
.sidebar .widget ul {
  list-style: none;
  padding: 0;
}
.sidebar .widget ul li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-100);
}
.sidebar .widget ul li:last-child {
  border-bottom: none;
}
.sidebar .widget ul li a {
  font-size: var(--text-sm);
  color: var(--c-700);
  transition: color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar .widget ul li a:hover {
  color: var(--c-primary);
}
.sidebar .widget .post-count,
.sidebar .widget ul li span.count {
  font-size: var(--text-xs);
  color: var(--c-400);
  background: var(--c-100);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-full);
}
.sidebar .widget.card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--sp-4);
}
.sidebar .widget input[type="search"] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-200);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--c-800);
  background: var(--c-white);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sidebar .widget input[type="search"]:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(2,117,216,0.12);
}

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-700);
  background: var(--c-white);
  border: 1px solid var(--c-200);
  transition: all var(--t-fast);
}
.pagination .page-numbers:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-light);
}
.pagination .page-numbers.current {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}
.pagination .page-numbers.dots {
  border: none;
  background: none;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  width: auto;
  padding: 0 var(--sp-4);
  gap: var(--sp-2);
}

/* --- Comments --- */
.comments-area {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-200);
}
.comments-area h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-6);
}
.comment-list {
  list-style: none;
  padding: 0;
}
.comment-list .comment {
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--c-50);
  border: 1px solid var(--c-200);
  border-radius: var(--r-xl);
}
.comment-list .comment .children {
  list-style: none;
  padding-left: var(--sp-6);
  margin-top: var(--sp-4);
}
.comment-list .comment .children .comment {
  background: var(--c-white);
}
.comment-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.comment-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.comment-author .fn {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--c-900);
}
.comment-metadata {
  font-size: var(--text-xs);
  color: var(--c-400);
  margin-bottom: var(--sp-3);
}
.comment-metadata a {
  color: var(--c-400);
}
.comment-metadata a:hover {
  color: var(--c-primary);
}
.comment-content {
  font-size: var(--text-sm);
  color: var(--c-700);
  line-height: 1.7;
}
.comment-content p {
  margin-bottom: var(--sp-3);
}
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-primary);
  margin-top: var(--sp-2);
  transition: color var(--t-fast);
}
.comment-reply-link:hover {
  color: var(--c-primary-dark);
}

/* --- Comment Form --- */
.comment-respond {
  margin-top: var(--sp-8);
}
.comment-respond h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-4);
}
.comment-form {
  display: grid;
  gap: var(--sp-4);
}
.comment-form label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-700);
  display: block;
  margin-bottom: var(--sp-1);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-200);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--c-800);
  background: var(--c-white);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(2,117,216,0.12);
}
.comment-form textarea {
  resize: vertical;
  min-height: 150px;
}
.comment-form .form-submit input[type="submit"] {
  background: var(--c-primary);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2,117,216,0.3);
  transition: all var(--t-base);
}
.comment-form .form-submit input[type="submit"]:hover {
  background: var(--c-primary-dark);
  box-shadow: 0 6px 20px rgba(2,117,216,0.4);
  transform: translateY(-1px);
}

/* --- CTA Box --- */
.cta-box {
  background: linear-gradient(135deg, #0275d8 0%, #0260b8 100%);
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  text-align: center;
  margin-top: var(--sp-12);
  color: var(--c-white);
}
.cta-box h2 {
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.cta-box p {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--sp-6);
  font-size: var(--text-lg);
}
.cta-box .btn {
  background: var(--c-white);
  color: var(--c-primary);
  font-weight: 700;
}
.cta-box .btn:hover {
  background: var(--c-100);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* --- 404 Page --- */
.page-404 {
  text-align: center;
  padding: var(--sp-24) 0;
}
.page-404 h1 {
  font-size: var(--text-6xl);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}
.page-404 p {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-6);
}
.page-404__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* --- Archive Header --- */
.archive-header {
  text-align: center;
  padding: var(--sp-16) 0 var(--sp-8);
  background: linear-gradient(135deg, var(--c-white) 0%, #eef6ff 50%, var(--c-white) 100%);
}
.archive-header .badge {
  margin-bottom: var(--sp-3);
}
.archive-header h1 {
  margin-bottom: var(--sp-3);
}
.archive-header p {
  color: var(--c-600);
  font-size: var(--text-lg);
}

/* --- Reading Time Badge --- */
.reading-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--c-500);
}

/* --- Nav dropdown (duplicated for WP theme) --- */
.nc-nav__dd.is-open .nc-nav__dd-panel { display: block !important; }
.nc-nav__dd.is-open .nc-nav__arrow { transform: rotate(180deg); }
.nc-nav__dd.is-open .nc-nav__dd-toggle { color: #0275d8; background: #eff6ff; }
#navMobile.is-open { display: block !important; }

@media (max-width: 1023px) {
  .nc-nav__desktop { display: none !important; }
  .nc-nav__right { display: none !important; }
  .nc-nav__burger { display: block !important; }
}
@media (min-width: 1024px) {
  .nc-nav__burger { display: none !important; }
  #navMobile { display: none !important; }
}