/* ═══ DC Dental Blog Styles ═══ */
@import url('fonts.css');

:root{--copper:#C4A882;--copper-light:#D4BAA0;--copper-pale:#F2EDE6;--copper-bg:#F7F2EB;--dark:#141414;--text:#1A1A1A;--muted:#737373;--white:#FAFAF8;--border:rgba(196,168,130,.18);--green:#06C755;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DB Helvethaica X','Sarabun',sans-serif;background:#FFFFFF;color:var(--text);-webkit-font-smoothing:antialiased;}

/* TOPBAR */
.topbar{background:#FFFFFF;border-bottom:1px solid rgba(196,168,130,.2);padding:9px 48px;display:flex;align-items:center;justify-content:space-between;font-size:15px;}
.topbar a{color:#6B5A45;text-decoration:none;transition:color .2s;}.topbar a:hover{color:var(--copper-light);}
.topbar-left,.topbar-right{display:flex;gap:24px;align-items:center;}
.topbar-div{width:1px;height:14px;background:rgba(196,168,130,.2);}
.topbar-lang{display:flex;gap:8px;}.topbar-lang a.active{color:#8B7355;font-weight:600;}

/* HEADER */
header{position:sticky;top:0;z-index:900;background:#FFFFFF;border-bottom:1px solid rgba(196,168,130,.15);box-shadow:0 2px 24px rgba(0,0,0,.07);}
header::before{content:'';display:block;height:3px;background:linear-gradient(90deg,transparent,var(--copper),var(--copper-light),var(--copper),transparent);}
nav{max-width:1320px;margin:0 auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:86px;}
.nav-list{display:flex;list-style:none;}.nav-list>li{position:relative;}
.nav-list>li>a{display:block;padding:0 15px;height:86px;line-height:86px;font-size:19px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap;transition:color .2s;}.nav-list>li>a:hover{color:var(--copper);}
.dropdown{position:absolute;top:100%;left:0;background:var(--white);min-width:220px;border:1px solid var(--border);border-top:2px solid var(--copper);border-radius:0 0 4px 4px;box-shadow:0 16px 40px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s;z-index:200;}
.nav-list li:hover>.dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown li{list-style:none;}.dropdown li a{display:block;padding:11px 18px;font-size:16px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--copper-pale);transition:background .2s,color .2s;}
.dropdown li:last-child a{border-bottom:none;}.dropdown li a:hover,.dropdown li a.active{background:var(--copper-bg);color:var(--copper);}
.btn-nav{background:linear-gradient(125deg,#B09786 0%,#CCB2A0 14%,#937C6B 32%,#6F5949 50%,#937C6B 68%,#CCB2A0 86%,#826B5B 100%);color:#F8EFE0;padding:12px 40px;border-radius:6px;font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap;transition:all .35s cubic-bezier(.16,1,.3,1);border:none;box-shadow:0 2px 10px rgba(60,40,20,.25);position:relative;overflow:hidden;}
.btn-nav>*{position:relative;z-index:1;}
.btn-nav::before{content:'';position:absolute;top:0;left:-130%;width:65%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(255,246,228,.15) 30%,rgba(255,250,236,.7) 50%,rgba(255,246,228,.15) 70%,transparent 100%);transform:skewX(-20deg);transition:left .7s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.btn-nav:hover{background:linear-gradient(125deg,#BFA694 0%,#D8C0AE 14%,#A48C7B 32%,#806959 50%,#A48C7B 68%,#D8C0AE 86%,#937C6B 100%);box-shadow:0 4px 16px rgba(60,40,20,.35);color:#fff;transform:translateY(-1px);}
.btn-nav:hover::before{left:135%;}

/* BLOG INDEX */
.blog-hero{padding:32px 48px 0;position:relative;}
.blog-hero-in::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 5%,#C4A882 30%,#D4BAA0 50%,#C4A882 70%,transparent 95%);border-radius:20px 20px 0 0;}
.blog-hero-in{max-width:1320px;margin:0 auto;background:rgba(255,253,248,.92);border:1px solid rgba(196,168,130,.15);border-radius:20px;padding:44px 52px 40px;box-shadow:0 4px 32px rgba(140,115,85,.06),0 1px 3px rgba(140,115,85,.04);position:relative;overflow:hidden;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#C4A882;font-size:45px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;}
.eyebrow::before{content:'';display:block;width:20px;height:1px;background:var(--copper);}
.blog-hero h1{font-family:'Avenir','Playfair Display',sans-serif;font-size:clamp(40px,5.5vw,72px);font-weight:700;color:#1A1A1A;line-height:1.18;margin-bottom:12px;}
.blog-hero p{font-size:19px;color:#737373;margin-top:6px;}

.blog-grid-wrap{max-width:1320px;margin:0 auto;padding:40px 48px 80px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{background:rgba(255,253,248,.88);backdrop-filter:blur(12px);border:1px solid rgba(196,168,130,.15);border-radius:14px;overflow:hidden;text-decoration:none;transition:all .3s;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(140,115,85,.06);}
.blog-card:hover{border-color:rgba(196,168,130,.3);box-shadow:0 8px 32px rgba(196,168,130,.12);transform:translateY(-4px);}
.blog-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#f0ece5,#e8e2d8);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;}
.blog-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;}
.blog-tag{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--copper);margin-bottom:8px;}
.blog-card h2{font-family:'Avenir','DB Helvethaica X',sans-serif;font-size:18px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:8px;}
.blog-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 12px;flex:1;}
.blog-date{font-size:12px;color:var(--muted);opacity:.7;}

/* ARTICLE PAGE */
.article-hero{padding:32px 48px 0;position:relative;}
.article-hero-in{max-width:1320px;margin:0 auto;background:rgba(255,253,248,.92);border:1px solid rgba(196,168,130,.15);border-radius:20px;padding:44px 52px 40px;box-shadow:0 4px 32px rgba(140,115,85,.06),0 1px 3px rgba(140,115,85,.04);position:relative;overflow:hidden;text-align:center;}
.article-hero-in::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 5%,var(--copper) 30%,var(--copper-light) 50%,var(--copper) 70%,transparent 95%);border-radius:20px 20px 0 0;}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap;}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s;}.breadcrumb a:hover{color:var(--copper);}
.article-hero h1{font-family:'Avenir','Playfair Display',sans-serif;font-size:clamp(34px,4.5vw,64px);font-weight:700;color:var(--text);line-height:1.2;margin-bottom:14px;}
.hero-meta{display:flex;align-items:center;justify-content:center;gap:18px;font-size:15px;color:var(--muted);flex-wrap:wrap;}
.hero-meta .sep{width:1px;height:12px;background:rgba(196,168,130,.25);}

/* ARTICLE LAYOUT */
.article-wrap{max-width:860px;margin:0 auto;padding:44px 48px 80px;}
.article-content h2{font-family:'Avenir','Playfair Display',sans-serif;font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--text);margin:36px 0 14px;line-height:1.3;}
.article-content h3{font-size:26px;font-weight:700;color:var(--text);margin:24px 0 10px;}
.article-content p{font-size:18px;color:#444;line-height:1.9;margin-bottom:16px;}
.article-content ul,.article-content ol{padding-left:22px;margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.article-content li{font-size:18px;color:#444;line-height:1.7;}
.article-content strong{color:var(--text);}
.article-content a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;}
.article-content a:hover{color:#A88A66;}
.divider{height:1px;background:var(--border);margin:32px 0;}
.info-box{background:rgba(255,253,248,.88);backdrop-filter:blur(12px);border:1px solid rgba(196,168,130,.15);border-radius:14px;padding:20px 24px;margin:20px 0 28px;box-shadow:0 4px 20px rgba(140,115,85,.06);}
.info-box h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px;}
.info-box p{font-size:16px;color:var(--muted);line-height:1.7;margin:0;}

/* Steps infographic (ig6) — matches metal-braces */
.ig6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 30px;}
.ig6-card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px 22px 24px;text-align:center;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s;}
.ig6-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--copper),transparent);opacity:0;transition:opacity .3s;}
.ig6-card:hover{border-color:var(--copper);box-shadow:0 12px 34px rgba(196,168,130,.18);transform:translateY(-4px);}
.ig6-card:hover::before{opacity:1;}
.ig6-num{position:absolute;top:14px;right:18px;font-family:'Avenir','Playfair Display',sans-serif;font-size:40px;font-weight:700;color:rgba(196,168,130,.28);line-height:1;}
.ig6-icon{width:78px;height:78px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 10px rgba(255,255,255,.6),0 6px 16px rgba(140,115,85,.18);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;}
.ig6-card:nth-child(1) .ig6-icon{background:linear-gradient(140deg,#F4E3D0,#E7C8A6);}
.ig6-card:nth-child(2) .ig6-icon{background:linear-gradient(140deg,#F1E6D6,#D9BE9A);}
.ig6-card:nth-child(3) .ig6-icon{background:linear-gradient(140deg,#F6E6DC,#E3BBA0);}
.ig6-card:nth-child(4) .ig6-icon{background:linear-gradient(140deg,#EFE4D2,#D2B58C);}
.ig6-card:nth-child(5) .ig6-icon{background:linear-gradient(140deg,#F3E7D4,#DCC09A);}
.ig6-card:nth-child(6) .ig6-icon{background:linear-gradient(140deg,#F5E4D5,#E0B89C);}
.ig6-icon img{width:44px;height:44px;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.34,1.56,.64,1);filter:invert(34%) sepia(38%) saturate(640%) hue-rotate(347deg) brightness(92%) contrast(90%);}
.ig6-card h4{font-size:20px;font-weight:700;color:var(--text);margin-bottom:7px;}
.ig6-card p{font-size:16px;color:var(--muted);line-height:1.55;margin:0;}
.ig6-card:hover .ig6-icon{transform:scale(1.12) translateY(-3px);box-shadow:inset 0 2px 9px rgba(140,115,85,.12),0 6px 16px rgba(196,168,130,.25);}
.ig6-card:hover .ig6-icon img{transform:scale(1.08);}
.ig6-card:nth-child(5):hover .ig6-icon img{transform:rotate(180deg) scale(1.08);}
@media(prefers-reduced-motion:reduce){.ig6-icon,.ig6-icon img{transition:none;}}
@media(max-width:760px){.ig6{grid-template-columns:1fr 1fr;}}
@media(max-width:440px){.ig6{grid-template-columns:1fr;}}

/* FAQ */
.faq-list{display:flex;flex-direction:column;border:1px solid rgba(196,168,130,.15);border-radius:14px;overflow:hidden;margin:20px 0 28px;box-shadow:0 4px 20px rgba(140,115,85,.06);}
.faq-item{border-bottom:1px solid var(--border);}.faq-item:last-child{border-bottom:none;}
.faq-q{width:100%;background:none;border:none;padding:18px 22px;text-align:left;font-family:'DB Helvethaica X','Sarabun',sans-serif;font-size:17px;font-weight:700;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .2s;}
.faq-q:hover{background:var(--copper-bg);}.faq-q[aria-expanded="true"]{background:var(--copper-bg);color:var(--copper);}
.faq-icon{width:20px;height:20px;flex-shrink:0;transition:transform .25s;}.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg);}
.faq-a{display:none;padding:0 22px 18px;font-size:16px;color:var(--muted);line-height:1.8;}.faq-a.open{display:block;}

/* CTA - removed dark box, using copper style */
.line-cta-box{background:var(--copper-bg);border:1px solid var(--border);border-radius:14px;padding:28px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:28px 0;}
.line-cta-box h3{font-size:19px;font-weight:700;color:var(--text);margin-bottom:4px;}
.line-cta-box p{font-size:16px;color:var(--muted);}
.line-btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:13px 26px;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:all .3s;}.line-btn:hover{background:#05A847;transform:translateY(-2px);box-shadow:0 4px 16px rgba(6,199,85,.25);}

/* AUTHOR */
.author-card{display:flex;gap:20px;background:rgba(255,253,248,.88);backdrop-filter:blur(12px);border:1px solid rgba(196,168,130,.15);border-radius:14px;padding:24px 26px;margin-top:28px;align-items:flex-start;flex-wrap:wrap;box-shadow:0 4px 20px rgba(140,115,85,.06);}
.author-photo{width:80px;min-width:80px;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(160deg,#3A3A3A,#1A1A1A);display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,168,130,.2);}
.author-info h4{font-size:18px;font-weight:700;color:var(--text);margin-bottom:2px;}
.author-info .author-title{font-size:15px;color:var(--copper);margin-bottom:8px;}
.author-info p{font-size:15.5px;color:var(--muted);line-height:1.7;}

/* RELATED */
.related-section{background:rgba(255,253,248,.88);backdrop-filter:blur(12px);border:1px solid rgba(196,168,130,.15);border-radius:16px;padding:48px;margin:40px auto 0;max-width:860px;box-shadow:0 4px 20px rgba(140,115,85,.06);}
.related-section h2{font-family:'Avenir','Playfair Display',sans-serif;font-size:24px;font-weight:700;text-align:center;margin-bottom:28px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1320px;margin:0 auto;}

@media(max-width:768px){
  .topbar,.nav-list{display:none;}
  nav{padding:0 20px;height:66px;}
  .blog-hero{padding:36px 20px;}
  .blog-grid-wrap{padding:24px 20px 60px;}
  .blog-grid{grid-template-columns:1fr;}
  .article-hero{padding:36px 20px;}
  .article-wrap{padding:24px 20px 60px;}
  .related-section{padding:28px 20px;}
  .related-grid{grid-template-columns:1fr;}
}


/* ===== Infographic (article diagrams) ===== */
.ig{background:linear-gradient(160deg,#FFFDF9,#F7F2EB);border:1px solid rgba(196,168,130,.28);border-radius:16px;padding:30px 32px 34px;margin:24px 0 30px;box-shadow:0 6px 28px rgba(140,115,85,.09);}
.ig-head{margin-bottom:24px;}
.ig-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--copper);margin-bottom:6px;}
.ig-title{font-family:'Avenir','DB Helvethaica X',sans-serif;font-size:26px;font-weight:700;color:var(--text);line-height:1.25;margin:0;}
.ig-steps{display:flex;flex-direction:column;}
.ig-step{display:flex;gap:18px;padding-bottom:22px;position:relative;}
.ig-step:last-child{padding-bottom:0;}
.ig-step::before{content:'';position:absolute;left:21px;top:46px;bottom:-2px;width:2px;background:linear-gradient(var(--copper),rgba(196,168,130,.22));}
.ig-step:last-child::before{display:none;}
.ig-badge{width:44px;height:44px;min-width:44px;border-radius:50%;background:linear-gradient(135deg,var(--copper-light),#A6835A);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;box-shadow:0 3px 10px rgba(140,115,85,.3);position:relative;z-index:1;}
.ig-body{padding-top:4px;}
.ig-step-title{font-size:19px;font-weight:700;color:var(--text);margin-bottom:3px;}
.ig-step-desc{font-size:16px;color:var(--muted);line-height:1.6;}
@media(max-width:560px){.ig{padding:24px 20px 26px;}.ig-title{font-size:22px;}.ig-step-title{font-size:17px;}.ig-step-desc{font-size:15px;}}


/* ===== Infographic Flow (illustrated, branded) ===== */
.igx{border-radius:18px;overflow:hidden;margin:26px 0 30px;border:1px solid rgba(196,168,130,.3);box-shadow:0 8px 32px rgba(140,115,85,.12);background:#fff;}
.igx-band{background:linear-gradient(125deg,#B09786,#CCB2A0 22%,#937C6B 50%,#6F5949 78%,#826B5B);padding:18px 26px;text-align:center;}
.igx-band h3{font-family:'Avenir','DB Helvethaica X',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:#fff;margin:0;letter-spacing:.5px;text-shadow:0 1px 6px rgba(60,40,20,.25);}
.igx-flow{display:grid;grid-template-columns:repeat(5,1fr);align-items:start;gap:16px 8px;padding:30px 22px;background:linear-gradient(180deg,#FFFDF9,#F7F2EB);}
.igx-step{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;}
.igx-step:not(:nth-child(5n)):not(:last-child)::after{content:'';position:absolute;top:50px;right:-13px;width:14px;height:14px;border-top:2.5px solid var(--copper);border-right:2.5px solid var(--copper);transform:rotate(45deg);opacity:.7;}
.igx-illus{width:104px;height:104px;border-radius:50%;background:#fff;border:2px dashed rgba(196,168,130,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#A98E70;position:relative;box-shadow:inset 0 2px 10px rgba(140,115,85,.07);}
.igx-illus span{font-size:11px;font-weight:600;line-height:1.3;padding:0 12px;opacity:.8;}
.igx-badge{position:absolute;top:-6px;left:-6px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--copper-light),#A6835A);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;box-shadow:0 2px 8px rgba(140,115,85,.35);border:2px solid #fff;}
.igx-step-title{font-size:17px;font-weight:700;color:var(--text);line-height:1.3;}
.igx-step-desc{font-size:14px;color:var(--muted);line-height:1.5;}
.igx-arrow{align-self:center;margin-top:48px;color:var(--copper);flex-shrink:0;}
.igx-note{background:var(--copper-bg);border-top:1px solid var(--border);padding:14px 26px;text-align:center;font-size:16px;font-weight:600;color:#7A5E3E;}
@media(max-width:700px){.igx-flow{grid-template-columns:repeat(3,1fr);}.igx-step:not(:nth-child(3n)):not(:last-child)::after{display:none;}}
@media(max-width:460px){.igx-flow{grid-template-columns:repeat(2,1fr);}.igx-step::after{display:none!important;}}


/* igx photo variant */
.igx--photo .igx-illus{position:relative;width:100%;max-width:152px;aspect-ratio:1/1;height:auto;background:none;border:none;box-shadow:none;overflow:visible;}
.igx--photo .igx-illus img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;border:1px solid rgba(196,168,130,.3);background:#fff;box-shadow:0 4px 14px rgba(140,115,85,.13);}
.igx--photo .igx-badge{top:-8px;left:-8px;z-index:2;}
.igx--photo .igx-step::after{top:64px;}
@media(max-width:700px){.igx--photo .igx-step::after{top:54px;}}