/* ==========================================================
   CHERITAN SITE SYSTEM v4.4 — FINAL INTEGRITY + BLOG UX
   Loaded last. Fixes nested dark CTA contrast, modernizes the
   blog archive/single-post reading experience, and makes the
   mobile social drawer a reliable one-tap control.
   ========================================================== */

/* 1) Makeup + Beauty: dark location CTA cards live inside light
   sections, so older light-section guards must not recolor them. */
.cht-makeup-page .cm-location-cta,
.cht-beauty-page .cb-location-cta{
  background:#3f4551!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 42px rgba(48,54,64,.10)!important;
}
.cht-makeup-page .cm-location-cta h3,
.cht-beauty-page .cb-location-cta h3{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  background:none!important;
}
.cht-makeup-page .cm-location-cta p,
.cht-beauty-page .cb-location-cta p{
  color:#e6e9ed!important;
  -webkit-text-fill-color:#e6e9ed!important;
  opacity:1!important;
  visibility:visible!important;
}
.cht-makeup-page .cm-location-cta .cm-btn-primary,
.cht-beauty-page .cb-location-cta .cb-btn-primary{
  color:#202731!important;
  -webkit-text-fill-color:#202731!important;
}
.cht-makeup-page .cm-location-cta .cm-btn-whatsapp,
.cht-beauty-page .cb-location-cta .cb-btn-whatsapp{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Keep the location section compact and balanced. */
.cht-makeup-page .cm-location-grid,
.cht-beauty-page .cb-location-grid{
  align-items:stretch!important;
}
.cht-makeup-page .cm-location-cta,
.cht-beauty-page .cb-location-cta{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:100%!important;
}

/* 2) Blog archive: cleaner editorial layout. */
.cht-blog-page .cba-hero{
  padding:54px 0 48px!important;
  background:linear-gradient(135deg,#343b46 0%,#454c58 62%,#515965 100%)!important;
}
.cht-blog-page .cba-hero-inner{max-width:900px!important;}
.cht-blog-page .cba-hero h1{
  font-size:clamp(38px,5vw,58px)!important;
  line-height:1.04!important;
  letter-spacing:-1.7px!important;
  margin-bottom:14px!important;
}
.cht-blog-page .cba-hero-text{font-size:15px!important;margin-bottom:22px!important;}
.cht-blog-page .cba-search{
  max-width:660px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
.cht-blog-page .cba-topics{position:relative!important;z-index:2!important;}
.cht-blog-page .cba-content-section{padding:46px 0 62px!important;background:#f5f6f7!important;}
.cht-blog-page .cba-featured{
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;
  min-height:390px!important;
  border-radius:18px!important;
  box-shadow:0 16px 42px rgba(48,54,64,.07)!important;
}
.cht-blog-page .cba-featured-media,
.cht-blog-page .cba-featured-media .cba-image{min-height:390px!important;}
.cht-blog-page .cba-featured-copy{padding:36px!important;}
.cht-blog-page .cba-featured h2{font-size:clamp(28px,3vw,39px)!important;}
.cht-blog-page .cba-section-heading{margin:38px 0 18px!important;}
.cht-blog-page .cba-grid{gap:20px!important;}
.cht-blog-page .cba-card{
  border-radius:14px!important;
  box-shadow:0 8px 24px rgba(48,54,64,.045)!important;
}
.cht-blog-page .cba-card-media{aspect-ratio:16/9!important;}
.cht-blog-page .cba-card-body{padding:20px!important;}
.cht-blog-page .cba-card h3{font-size:19px!important;line-height:1.25!important;}
.cht-blog-page .cba-card-body>p{font-size:13px!important;}
.cht-blog-page .cba-read-link,
.cht-blog-page .cba-card-footer a{touch-action:manipulation!important;}

/* 3) Single post: compact modern hero, comfortable long-form reading. */
.cht-post-page .csp-progress{
  position:fixed!important;left:0!important;right:0!important;top:0!important;
  height:4px!important;z-index:12050!important;pointer-events:none!important;
  background:transparent!important;
}
.cht-post-page .csp-progress>span{
  display:block!important;width:0;height:100%!important;background:#f4a98a!important;
  transition:width .08s linear!important;
}
.cht-post-page .csp-hero{
  padding:24px 0 44px!important;
  background:linear-gradient(180deg,#f7f7f8 0%,#f1f2f4 100%)!important;
}
.cht-post-page .csp-hero-inner{max-width:980px!important;}
.cht-post-page .csp-breadcrumb{margin-bottom:26px!important;}
.cht-post-page .csp-category{margin-bottom:14px!important;}
.cht-post-page .csp-hero h1{
  max-width:880px!important;
  font-size:clamp(38px,5vw,58px)!important;
  line-height:1.06!important;
  letter-spacing:-1.8px!important;
  margin-bottom:16px!important;
}
.cht-post-page .csp-deck{
  max-width:760px!important;font-size:16px!important;line-height:1.65!important;margin-bottom:18px!important;
}
.cht-post-page .csp-featured-wrap{max-width:1060px!important;padding-top:34px!important;}
.cht-post-page .csp-featured{border-radius:18px!important;box-shadow:0 16px 46px rgba(48,54,64,.08)!important;}
.cht-post-page .csp-featured-image{
  width:100%!important;
  aspect-ratio:16/9!important;
  max-height:620px!important;
  object-fit:cover!important;
  object-position:center!important;
}
.cht-post-page .csp-layout{
  grid-template-columns:220px minmax(0,760px)!important;
  gap:52px!important;
  padding-top:50px!important;
  padding-bottom:64px!important;
}
.cht-post-page .csp-sidebar-sticky{top:18px!important;}
.cht-post-page .csp-toc-card,
.cht-post-page .csp-share-card{border-radius:12px!important;background:#f7f7f8!important;}
.cht-post-page .csp-article-content{
  color:#3f4551!important;
  font-size:17px!important;
  line-height:1.82!important;
}
.cht-post-page .csp-article-content>p:first-child{font-size:18px!important;line-height:1.8!important;}
.cht-post-page .csp-article-content p{margin-bottom:23px!important;}
.cht-post-page .csp-article-content h2{
  scroll-margin-top:24px!important;
  margin:44px 0 16px!important;
  font-size:clamp(28px,3.1vw,38px)!important;
  line-height:1.16!important;
  letter-spacing:-.7px!important;
}
.cht-post-page .csp-article-content h3{
  scroll-margin-top:24px!important;
  margin:32px 0 13px!important;
  font-size:clamp(22px,2.4vw,27px)!important;
  line-height:1.22!important;
}
.cht-post-page .csp-article-content :is(img,figure,video,iframe){max-width:100%!important;}
.cht-post-page .csp-article-content figure{margin:30px 0!important;}
.cht-post-page .csp-article-content img{border-radius:12px!important;}
.cht-post-page .csp-article-content figcaption{color:#777f89!important;font-size:12px!important;line-height:1.55!important;margin-top:8px!important;}
.cht-post-page .csp-article-content table{
  display:block!important;width:100%!important;max-width:100%!important;
  overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
  border-collapse:collapse!important;margin:26px 0!important;
}
.cht-post-page .csp-article-content th,
.cht-post-page .csp-article-content td{
  min-width:130px!important;padding:12px 14px!important;border:1px solid #dfe2e7!important;
  text-align:left!important;vertical-align:top!important;
}
.cht-post-page .csp-article-content th{background:#f3f4f5!important;color:#303640!important;}
.cht-post-page .csp-inline-cta{border-radius:16px!important;}
.cht-post-page .csp-author-box{border-radius:16px!important;}
.cht-post-page .csp-related{padding-top:54px!important;padding-bottom:60px!important;}
.cht-post-page .csp-related-card{border-radius:14px!important;overflow:hidden!important;}

/* 4) Reliable social drawer. The arrow is always tappable on mobile,
   even before the rail is open. */
body .cht-social-rail{
  pointer-events:auto!important;
  isolation:isolate!important;
}
body .cht-social-toggle{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  z-index:5!important;
}
@media(max-width:980px), (hover:none) and (pointer:coarse){
  body .cht-social-rail{
    top:52%!important;
    transform:translate3d(-100%,-50%,0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body .cht-social-rail.is-open,
  body .cht-social-rail:focus-within{
    transform:translate3d(0,-50%,0)!important;
  }
  body .cht-social-rail:not(.is-open) .cht-social-link{pointer-events:none!important;}
  body .cht-social-rail.is-open .cht-social-link{pointer-events:auto!important;touch-action:manipulation!important;}
  body .cht-social-toggle{
    display:grid!important;
    width:40px!important;height:58px!important;min-width:40px!important;
    left:100%!important;
    cursor:pointer!important;
  }
}

/* Responsive editorial layouts. */
@media(max-width:980px){
  .cht-blog-page .cba-featured{grid-template-columns:1fr!important;min-height:0!important;}
  .cht-blog-page .cba-featured-media,
  .cht-blog-page .cba-featured-media .cba-image{min-height:0!important;aspect-ratio:16/9!important;height:auto!important;}
  .cht-blog-page .cba-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cht-post-page .csp-layout{grid-template-columns:1fr!important;gap:26px!important;max-width:800px!important;}
  .cht-post-page .csp-sidebar{order:2!important;}
  .cht-post-page .csp-sidebar-sticky{position:static!important;grid-template-columns:1fr 1fr!important;}
  .cht-post-page .csp-course-card{grid-column:1/-1!important;}
}
@media(max-width:650px){
  .cht-makeup-page .cm-location-cta,
  .cht-beauty-page .cb-location-cta{padding:24px 20px!important;}
  .cht-makeup-page .cm-location-cta h3,
  .cht-beauty-page .cb-location-cta h3{font-size:24px!important;}

  .cht-blog-page .cba-hero{padding:40px 0 34px!important;}
  .cht-blog-page .cba-hero h1{font-size:36px!important;letter-spacing:-1px!important;}
  .cht-blog-page .cba-search{grid-template-columns:1fr!important;background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;}
  .cht-blog-page .cba-search input{border-radius:7px!important;}
  .cht-blog-page .cba-search button{width:100%!important;}
  .cht-blog-page .cba-content-section{padding:34px 0 48px!important;}
  .cht-blog-page .cba-featured-copy{padding:24px 20px!important;}
  .cht-blog-page .cba-featured h2{font-size:29px!important;}
  .cht-blog-page .cba-grid{grid-template-columns:1fr!important;}

  .cht-post-page .csp-hero{padding:18px 0 34px!important;}
  .cht-post-page .csp-breadcrumb{margin-bottom:20px!important;}
  .cht-post-page .csp-hero h1{font-size:36px!important;line-height:1.08!important;letter-spacing:-1.1px!important;}
  .cht-post-page .csp-deck{font-size:15px!important;}
  .cht-post-page .csp-featured-wrap{padding-top:22px!important;}
  .cht-post-page .csp-featured{border-radius:12px!important;}
  .cht-post-page .csp-layout{padding-top:32px!important;padding-bottom:46px!important;}
  .cht-post-page .csp-main-column{min-width:0!important;}
  .cht-post-page .csp-article-content{font-size:16px!important;line-height:1.76!important;}
  .cht-post-page .csp-article-content>p:first-child{font-size:17px!important;}
  .cht-post-page .csp-article-content h2{margin-top:36px!important;font-size:29px!important;}
  .cht-post-page .csp-article-content h3{margin-top:28px!important;font-size:23px!important;}
  .cht-post-page .csp-sidebar-sticky{grid-template-columns:1fr!important;}
  .cht-post-page .csp-inline-cta{padding:26px 20px!important;}
}

/* 5) High-specificity contrast authority. Older page/mobile selectors use
   !important, so these selectors intentionally outrank them. */
.cht-makeup-page main .cm-section.cm-dark :is(h2,h3,h4,strong),
.cht-beauty-page main .cb-section.cb-dark :is(h2,h3,h4,strong),
.cht-studio-page main .cs-section.cs-dark :is(h2,h3,h4,strong),
.cht-contact-page main .cc-section.cc-dark :is(h2,h3,h4,strong),
.cht-about-page main .ca-section.ca-dark :is(h2,h3,h4,strong){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
}
.cht-makeup-page main .cm-section.cm-dark :is(p,li),
.cht-beauty-page main .cb-section.cb-dark :is(p,li),
.cht-studio-page main .cs-section.cs-dark :is(p,li),
.cht-contact-page main .cc-section.cc-dark :is(p,li),
.cht-about-page main .ca-section.ca-dark :is(p,li){
  color:#e6e9ed!important;
  -webkit-text-fill-color:#e6e9ed!important;
  opacity:1!important;
  visibility:visible!important;
}

.cht-makeup-page main .cm-section:not(.cm-dark) .cm-location-cta h3,
.cht-beauty-page main .cb-section:not(.cb-dark) .cb-location-cta h3{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.cht-makeup-page main .cm-section:not(.cm-dark) .cm-location-cta p,
.cht-beauty-page main .cb-section:not(.cb-dark) .cb-location-cta p{
  color:#e6e9ed!important;
  -webkit-text-fill-color:#e6e9ed!important;
}

/* Mobile section-head copy can be recolored by older responsive rules; outrank them. */
.cht-makeup-page main .cm-section.cm-dark .cm-section-head>p:last-child,
.cht-beauty-page main .cb-section.cb-dark .cb-section-head>p:last-child,
.cht-studio-page main .cs-section.cs-dark .cs-section-head>p:last-child,
.cht-contact-page main .cc-section.cc-dark .cc-section-head>p:last-child{
  color:#e6e9ed!important;
  -webkit-text-fill-color:#e6e9ed!important;
}