/* ==========================================================
   CHERITAN SITE SYSTEM v4.0 — FINAL POLISH
   Loaded after all legacy/fix stylesheets.
   Goals: balanced About typography, compact Courses hero,
   single footer social icons, and no accidental page-top gaps.
   ========================================================== */

/* ---------- 1. BASE / PAGE-EDGE SAFETY ---------- */
html,body{margin:0!important;padding:0!important;}
body.cheritan-designed-page{margin:0!important;padding:0!important;}

:where(.cht-site,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-blog-page,.cht-post-page,.cht-privacy-page) > main{
  margin-top:0!important;
  padding-top:0!important;
}

/* Keep the shared header directly attached to the first page section. */
:where(.cht-site,.cht-about-page,.cht-courses-page,.cht-makeup-page,.cht-beauty-page,.cht-studio-page,.cht-contact-page,.cht-blog-page,.cht-privacy-page) .cr-header{
  margin-bottom:0!important;
}

/* ---------- 2. ABOUT PAGE — professional, less oversized hero ---------- */
.cht-about-page .ca-intro{
  padding:18px 0 34px!important;
}
.cht-about-page .ca-breadcrumb{
  width:100%!important;
  padding-left:0!important;
  margin:0!important;
}
.cht-about-page .ca-title{
  max-width:940px!important;
  margin:0 auto!important;
  padding:24px 0 8px!important;
}
.cht-about-page main .ca-meet{
  font-size:clamp(30px,3.2vw,43px)!important;
  margin:0 0 7px!important;
  line-height:1.12!important;
}
.cht-about-page .ca-title h1{
  max-width:900px!important;
  margin:0 auto 14px!important;
  font-size:clamp(44px,5.25vw,72px)!important;
  line-height:1.04!important;
  letter-spacing:-2px!important;
  text-wrap:balance!important;
}
.cht-about-page main .ca-role{
  font-size:15px!important;
  line-height:1.55!important;
}

/* ---------- 3. ALL COURSES — remove the oversized blank hero zone ---------- */
.cht-courses-page main,
.cht-courses-page .cc-hero{
  margin:0!important;
  padding-top:0!important;
}
.cht-courses-page .cc-hero-grid{
  min-height:0!important;
  padding-top:46px!important;
  padding-bottom:46px!important;
  align-items:center!important;
  gap:54px!important;
}
.cht-courses-page .cc-hero-copy{
  align-self:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.cht-courses-page .cc-hero h1{
  max-width:620px!important;
  font-size:clamp(48px,5.1vw,68px)!important;
  line-height:1.01!important;
  letter-spacing:-2.4px!important;
  margin-bottom:18px!important;
  text-wrap:balance!important;
}
.cht-courses-page .cc-hero-text{
  margin-bottom:24px!important;
}
.cht-courses-page .cc-hero-points{
  margin-top:22px!important;
}
/* Critical: reference-fixes.css applies height:100% to all data-focal images.
   The Courses portrait is intentionally a fixed-height hero on desktop. */
.cht-courses-page .cc-hero-image{
  min-height:0!important;
  height:auto!important;
  align-self:center!important;
}
.cht-courses-page .cc-hero-image img{
  display:block!important;
  width:100%!important;
  height:520px!important;
  min-height:0!important;
  max-height:520px!important;
  object-fit:cover!important;
  object-position:52% 25%!important;
}

/* ---------- 4. FOOTER — exactly ONE icon per social button ---------- */
.cr-footer .cr-footer-social{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.cr-footer .cr-footer-social > a{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  text-indent:0!important;
  font-size:0!important;
  line-height:0!important;
  overflow:hidden!important;
}
/* Older page HTML contains a span icon while fallback CSS also draws ::before.
   Hide the legacy span and keep the pseudo icon only. */
.cr-footer .cr-footer-social > a .cr-social-icon{
  display:none!important;
  width:0!important;
  height:0!important;
  background-image:none!important;
}
.cr-footer .cr-footer-social > a::before{
  content:""!important;
  display:block!important;
  width:19px!important;
  height:19px!important;
  background-image:var(--cr-social-icon)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
}

/* ---------- 5. CONSISTENT DESKTOP HEADING SCALE ---------- */
@media (min-width:981px){
  .cht-makeup-page .cm-hero h1,
  .cht-beauty-page .cb-hero h1,
  .cht-studio-page .cs-hero h1{
    font-size:clamp(52px,4.8vw,64px)!important;
    line-height:1.03!important;
    letter-spacing:-2px!important;
  }
  .cht-contact-page .cc-hero h1{
    font-size:clamp(50px,4.5vw,62px)!important;
    line-height:1.05!important;
    letter-spacing:-1.9px!important;
  }
  .cht-privacy-page h1{
    font-size:clamp(48px,4.6vw,62px)!important;
    line-height:1.05!important;
  }
}

/* ---------- 6. TABLET ---------- */
@media (min-width:651px) and (max-width:980px){
  .cht-about-page .ca-title h1{
    font-size:clamp(48px,7vw,60px)!important;
    letter-spacing:-1.5px!important;
  }
  .cht-courses-page .cc-hero-grid{
    padding-top:38px!important;
    padding-bottom:40px!important;
    gap:32px!important;
  }
  .cht-courses-page .cc-hero h1{
    font-size:clamp(40px,5.8vw,50px)!important;
    letter-spacing:-1.3px!important;
  }
  .cht-courses-page .cc-hero-image img{
    height:460px!important;
    max-height:460px!important;
  }
}

/* ---------- 7. MOBILE ---------- */
@media (max-width:650px){
  .cht-about-page .ca-intro{
    padding:12px 0 26px!important;
  }
  .cht-about-page .ca-title{
    padding:20px 0 6px!important;
  }
  .cht-about-page main .ca-meet{
    font-size:29px!important;
  }
  .cht-about-page .ca-title h1{
    max-width:92%!important;
    font-size:clamp(36px,10.5vw,44px)!important;
    line-height:1.06!important;
    letter-spacing:-1px!important;
    margin-bottom:12px!important;
  }
  .cht-about-page main .ca-role{
    font-size:13px!important;
  }

  .cht-courses-page .cc-hero-grid{
    min-height:0!important;
    padding-top:30px!important;
    padding-bottom:34px!important;
    gap:26px!important;
  }
  .cht-courses-page .cc-hero-copy{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .cht-courses-page .cc-hero h1{
    font-size:clamp(31px,9vw,37px)!important;
    line-height:1.07!important;
    letter-spacing:-.8px!important;
    margin-bottom:16px!important;
  }
  .cht-courses-page .cc-hero-image img{
    height:350px!important;
    max-height:350px!important;
    object-position:52% 23%!important;
  }

  .cr-footer .cr-footer-social > a{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  .cr-footer .cr-footer-social > a::before{
    width:18px!important;
    height:18px!important;
  }
}