/* Skytrain Dental — single post (design 1c, recoloured to site cyan/navy).
   Scoped #sk-post. The parent theme sets fonts with id-level specificity, so a
   catch-all !important keeps Noto Sans Thai across the article. */
#sk-post,#sk-post *{font-family:'Noto Sans Thai',sans-serif!important}
#sk-post *{box-sizing:border-box}
#sk-post{color:#34505A;background:#fff}
#sk-post a{text-decoration:none}
/* If the parent theme injects its own page-title band on posts, hide it. */
.single .title_box,.single-post .title_box{display:none}

#sk-post .skp-wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
@media(max-width:640px){#sk-post .skp-wrap{padding-left:20px;padding-right:20px}}

/* BREADCRUMB */
.skp-crumbbar{background:#F4FAFC;border-bottom:1px solid #E4EDF0}
#sk-post .skp-crumb{padding-top:14px;padding-bottom:14px;font-size:13px;color:#6B838C;display:flex;gap:8px;flex-wrap:wrap}
.skp-crumb a{color:#6B838C}
.skp-crumb a:hover{color:#0E8CAE}
.skp-crumb span{color:#C2D4DA}

/* TITLE BAND */
.skp-titleband{background:#F4FAFC}
#sk-post .skp-title-in{max-width:840px;margin:0 auto;padding:52px 32px 40px;display:flex;flex-direction:column;gap:18px;text-align:center;align-items:center}
@media(max-width:640px){#sk-post .skp-title-in{padding:32px 20px 26px;text-align:left;align-items:flex-start}}
.skp-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.skp-tag{background:#E4F6FB;color:#0E8CAE;font-size:13px;padding:6px 13px;border-radius:6px;font-weight:500}
.skp-tag:hover{background:#17B0D4;color:#fff}
.skp-h1{margin:0;font-size:40px;line-height:1.4;font-weight:700;color:#0B3A47;letter-spacing:-.01em}
@media(max-width:640px){.skp-h1{font-size:27px;line-height:1.45}}
.skp-dek{margin:0;font-size:18px;line-height:1.9;color:#4A6570;max-width:720px}
@media(max-width:640px){.skp-dek{font-size:15.5px}}
.skp-meta{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#6B838C;flex-wrap:wrap}
.skp-dot{color:#C2D4DA}

/* HERO */
#sk-post .skp-hero-wrap{padding-top:0}
/* Show the featured image at its own ratio (these are often title banners), so
   it fits fully instead of being cropped into a fixed hero box. */
.skp-hero{overflow:hidden;border-radius:20px;margin-top:8px;background:#EAF7FB;max-width:1000px;margin-left:auto;margin-right:auto}
.skp-hero img{width:100%;height:auto;display:block}
@media(max-width:640px){.skp-hero{border-radius:14px}}

/* BODY GRID */
/* Named grid areas so the article ALWAYS sits in the middle column — even when
   the TOC is hidden (display:none removes a plain grid item from the flow and
   would otherwise let the article fall into the 200px TOC column and squish). */
#sk-post .skp-body{padding-top:52px;padding-bottom:64px;display:grid;grid-template-columns:200px minmax(0,1fr) 300px;grid-template-areas:"toc article side";gap:56px;align-items:start}
#sk-post .skp-toc{grid-area:toc}
#sk-post .skp-article{grid-area:article}
#sk-post .skp-side{grid-area:side}
/* No desktop TOC on this post (single.js adds .is-notoc) — drop the empty column. */
#sk-post .skp-body.is-notoc{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"article side"}
@media(max-width:1100px){#sk-post .skp-body,#sk-post .skp-body.is-notoc{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"article side";gap:40px}.skp-toc{display:none}}
@media(max-width:820px){#sk-post .skp-body,#sk-post .skp-body.is-notoc{grid-template-columns:1fr;grid-template-areas:"article" "side";gap:0}.skp-side{margin-top:40px}}

/* TOC (JS-generated from H2) */
.skp-toc{position:sticky;top:24px}
.skp-side-h{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6B838C;font-weight:700}
.skp-toc-list{display:flex;flex-direction:column}
.skp-toc-list a{font-size:14px;line-height:1.6;color:#5B7680;padding:9px 0 9px 14px;border-left:2px solid #E4EDF0}
.skp-toc-list a:hover,.skp-toc-list a.is-active{color:#0E8CAE;border-left-color:#0E8CAE}

/* Mobile collapsible TOC — shown only where the sidebar TOC is hidden (<1100px),
   collapsed by default, sits at the top of the article. */
.skp-mtoc{display:none;border:1px solid #E4EDF0;border-radius:14px;overflow:hidden;background:#F4FAFC;margin:0 0 26px}
@media(max-width:1100px){.skp-mtoc{display:block}}
#sk-post .skp-mtoc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;cursor:pointer;padding:14px 18px;font-size:15px;font-weight:600;color:#0B3A47;text-align:left}
.skp-mtoc-caret{color:#0E8CAE;font-size:13px;transition:transform .2s}
.skp-mtoc.is-open .skp-mtoc-caret{transform:rotate(180deg)}
.skp-mtoc-list{display:none;flex-direction:column;padding:0 18px 14px}
.skp-mtoc.is-open .skp-mtoc-list{display:flex}
.skp-mtoc-list a{font-size:14.5px;line-height:1.55;color:#5B7680;padding:9px 0 9px 12px;border-left:2px solid #E4EDF0;text-decoration:none}
.skp-mtoc-list a:hover{color:#0E8CAE;border-left-color:#0E8CAE}

/* ARTICLE TYPOGRAPHY (also styles WPBakery-rendered content inside) */
.skp-article{font-size:17.5px;line-height:2;color:#34505A;min-width:0}
#sk-post .skp-article p{margin:0 0 22px;line-height:1.95}
/* color forced with !important — the parent theme colours WPBakery headings
   orange with higher specificity, and the renovated look wants navy. */
#sk-post .skp-article h2{margin:36px 0 14px;font-size:28px!important;line-height:1.5;font-weight:700;color:#0B3A47!important;scroll-margin-top:90px}
#sk-post .skp-article h3{margin:28px 0 10px;font-size:21px!important;line-height:1.5;font-weight:700;color:#0B3A47!important;scroll-margin-top:90px}
@media(max-width:640px){#sk-post .skp-article h2{font-size:22px!important}#sk-post .skp-article h3{font-size:18.5px!important}.skp-article{font-size:16.5px}}
#sk-post .skp-article a{color:#0E8CAE;text-decoration:underline}
#sk-post .skp-article a:hover{color:#17B0D4}
#sk-post .skp-article img{max-width:100%;height:auto;border-radius:14px}
#sk-post .skp-article ul,#sk-post .skp-article ol{margin:0 0 22px;padding-left:24px;line-height:1.95}
#sk-post .skp-article li{margin-bottom:8px;font-size:17.5px!important}
@media(max-width:640px){#sk-post .skp-article li{font-size:16.5px!important}}
#sk-post .skp-article blockquote{margin:26px 0;border-left:3px solid #17B0D4;padding:6px 0 6px 24px}
#sk-post .skp-article blockquote p{font-family:'Noto Serif Display',serif!important;font-style:italic;font-size:22px;line-height:1.75;color:#0B3A47;margin:0}
#sk-post .skp-article table{width:100%;border-collapse:collapse;margin:0 0 22px}
#sk-post .skp-article th,#sk-post .skp-article td{border:1px solid #E4EDF0;padding:10px 14px;text-align:left}
#sk-post .skp-article th{background:#0B3A47;color:#fff;font-weight:600}
/* The parent theme forces a huge cell font (~26px) on in-content tables — bring
   it back to a readable size. */
#sk-post .skp-article table td,#sk-post .skp-article table th{font-size:15px!important;line-height:1.6}
@media(max-width:640px){#sk-post .skp-article table td,#sk-post .skp-article table th{font-size:14px!important}}

/* Old posts bake a manual booking CTA box (Ultimate Addons buttons) and a
   "Share This" widget into the body — both duplicate the sidebar booking card
   and the post's own share buttons, and the CTA buttons render broken here.
   Hide them; the migration removes them from the content permanently later. */
#sk-post .skp-article .vc_row:has(.ubtn-link){display:none}
#sk-post .the_champ_sharing_container{display:none}
/* Fallback for browsers without :has() — keep those buttons at least legible. */
#sk-post .skp-article .ubtn-link{display:inline-block;width:auto!important;padding:12px 22px!important;border-radius:999px;white-space:nowrap;font-weight:600}

/* WPBakery / Ultimate buttons inside articles: the generic
   `.skp-article a{color:#0E8CAE;underline}` rule above tints their label the same
   as the (light) button fill, so the text disappears. Force every in-article
   button to a solid brand pill with WHITE text, no underline — readable on any
   of WPBakery's colour variants. */
#sk-post .skp-article a.vc_btn3,
#sk-post .skp-article a.ubtn-link,
#sk-post .skp-article .wpb_button,
#sk-post .skp-article a.vc_general.vc_btn3{
	background:#0E8CAE!important;color:#fff!important;text-decoration:none!important;
	border:0!important;box-shadow:none!important;display:inline-block;padding:12px 24px!important;
	border-radius:999px!important;font-weight:600;line-height:1.4}
#sk-post .skp-article a.vc_btn3:hover,
#sk-post .skp-article a.ubtn-link:hover,
#sk-post .skp-article .wpb_button:hover,
#sk-post .skp-article a.vc_general.vc_btn3:hover{background:#0B3A47!important;color:#fff!important}

/* Optional in-article helper blocks (shortcodes, added later) */
.skp-box{border-radius:16px;padding:26px;margin:0 0 22px;display:flex;flex-direction:column;gap:12px}
.skp-box-sum{background:#F4FAFC;border:1px solid #E4EDF0}
.skp-box-warn{background:#FDF4EE;border:1px solid #F8D3BE}
.skp-box-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.skp-box-sum .skp-box-k{color:#0E8CAE}.skp-box-warn .skp-box-k{color:#C4551A}

/* ARTICLE FOOTER */
.skp-artfoot{margin-top:16px;padding-top:22px;border-top:1px solid #EEF3F5;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.skp-disc{font-size:13px;color:#8AA2AB;line-height:1.7;flex:1;min-width:220px}
.skp-share{display:flex;gap:10px}
.skp-share-btn{border:1px solid #DCE7EB;border-radius:999px;padding:8px 16px;font-size:13.5px;color:#4A6570;cursor:pointer;background:#fff}
.skp-share-btn:hover{border-color:#0E8CAE;color:#0E8CAE}

/* SIDEBAR */
.skp-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:24px}
@media(max-width:820px){.skp-side{position:static}}
.skp-card{border:1px solid #E4EDF0;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.skp-side-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6B838C;font-weight:700}
.skp-rev-row{display:flex;align-items:center;gap:14px}
#sk-post .skp-rev-ava{width:56px;height:56px;border-radius:999px;background:#E4F6FB;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif Display',serif!important;font-size:18px;color:#0E8CAE;flex-shrink:0}
.skp-rev-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.skp-rev-name{font-size:15px;font-weight:600;color:#0B3A47;line-height:1.4}
.skp-rev-sub{font-size:13px;color:#6B838C}
.skp-rev-link{font-size:14px;color:#0E8CAE}
/* Booking card — soft light tone (matches the site's other light panels). */
.skp-book{background:#EAF7FB;border-color:#CDE9F1}
#sk-post .skp-book-k{font-family:'Noto Serif Display',serif!important;font-style:italic;font-size:16px;color:#0E8CAE}
.skp-book-body{margin:0;font-size:15.5px;line-height:1.8;color:#2F4A54;font-weight:500}
.skp-book-line{background:#06C755;color:#fff;text-align:center;font-size:15px;font-weight:600;padding:14px 20px;border-radius:999px;margin-top:2px}
.skp-book-line:hover{filter:brightness(1.05)}
.skp-book-tel{color:#5B7680;text-align:center;font-size:14px}
.skp-more{gap:0}
.skp-more .skp-side-k{margin-bottom:12px}
.skp-more-item{font-size:15px;line-height:1.65;color:#0B3A47;font-weight:500;padding:12px 0;border-bottom:1px solid #EEF3F5}
.skp-more-item:last-child{border-bottom:0}
.skp-more-item:hover{color:#0E8CAE}
.skp-allcats .skp-side-k{margin-bottom:12px}
.skp-catlinks{display:flex;flex-direction:column}
.skp-catlinks a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #EEF3F5;color:#2A3B38;font-size:15px}
.skp-catlinks a:last-child{border-bottom:0}
.skp-catlinks a:hover{color:#0E8CAE}
.skp-catlinks a span{font-size:13px;color:#8AA2AB}

/* RELATED */
.skp-relband{background:#F4FAFC;border-top:1px solid #E4EDF0;padding:60px 0}
.skp-rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}
.skp-rel-h{margin:0;font-size:28px;font-weight:700;color:#0B3A47}
@media(max-width:640px){.skp-rel-h{font-size:22px}}
.skp-rel-all{font-size:15px;color:#0E8CAE;white-space:nowrap}
.skp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.skp-rel-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:600px){.skp-rel-grid{grid-template-columns:1fr}}
.skp-rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E4EDF0;border-radius:16px;overflow:hidden;transition:.16s}
.skp-rel-card:hover{border-color:#BFE6F0;box-shadow:0 12px 30px rgba(11,58,71,.10);transform:translateY(-2px)}
.skp-rel-thumb{aspect-ratio:1200/630;overflow:hidden;background:#EAF7FB}
.skp-rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.skp-rel-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#EAF7FB,#F4FAFC)}
.skp-rel-info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.skp-rel-cat{font-size:13px;font-weight:600;color:#0E8CAE}
.skp-rel-t{margin:0;font-size:18px;line-height:1.6;font-weight:600;color:#0B3A47}
.skp-rel-date{font-size:13px;color:#8AA2AB}

/* MOBILE STICKY CTA */
.skp-mbar{display:none}
@media(max-width:820px){
	.skp-mbar{display:grid;position:sticky;bottom:0;z-index:40;background:#fff;border-top:1px solid #E4EDF0;padding:12px 20px;grid-template-columns:1fr 1fr;gap:10px}
	.skp-mbar a{text-align:center;font-size:15px;font-weight:600;padding:14px 12px;border-radius:999px}
	.skp-mbar-tel{border:1.5px solid #0B3A47;color:#0B3A47}
	.skp-mbar-line{background:#06C755;color:#fff}
}