/* =========================================================
   KEPT QUILL CONTENT STYLE
   ใช้ร่วมทั้ง Editor และ Frontend Details
   Source of Truth สำหรับเนื้อหา Quill
========================================================= */

:root{
  --kept-content-width:1480px;
  --kept-reading-width:1280px;

  --kept-font-family:'Sarabun','Noto Sans Thai','Tahoma',system-ui,sans-serif;

  --kept-font-body:18px;
  --kept-line-height:1.78;

  --kept-h1:42px;
  --kept-h2:34px;
  --kept-h3:28px;
  --kept-h4:24px;
}

/* =========================================================
   MAIN CONTENT
========================================================= */

.kept-quill-content,
.ql-editor.kept-quill-content{
  font-family:var(--kept-font-family);
  font-size:var(--kept-font-body);
  line-height:var(--kept-line-height);
  font-weight:400;
  color:#222b36;
  word-break:break-word;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   PARAGRAPH
========================================================= */

.kept-quill-content p{
  font-family:var(--kept-font-family);
  font-size:var(--kept-font-body);
  line-height:var(--kept-line-height);
  font-weight:400;
  margin:0 0 18px;
  padding:0;
  color:#222b36;
}

/* =========================================================
   HEADINGS
========================================================= */

.kept-quill-content h1,
.kept-quill-content h2,
.kept-quill-content h3,
.kept-quill-content h4,
.kept-quill-content h5,
.kept-quill-content h6{
  font-family:var(--kept-font-family);
  color:#1d2b3a;
  font-weight:700;
  letter-spacing:-.01em;
}

.kept-quill-content h1{
  font-size:var(--kept-h1);
  line-height:1.35;
  margin:34px 0 22px;
}

.kept-quill-content h2{
  font-size:var(--kept-h2);
  line-height:1.4;
  margin:30px 0 20px;
}

.kept-quill-content h3{
  font-size:var(--kept-h3);
  line-height:1.45;
  margin:26px 0 18px;
}

.kept-quill-content h4{
  font-size:var(--kept-h4);
  line-height:1.5;
  margin:22px 0 14px;
}

.kept-quill-content h5{
  font-size:20px;
  line-height:1.5;
  margin:20px 0 12px;
}

.kept-quill-content h6{
  font-size:18px;
  line-height:1.5;
  margin:18px 0 10px;
}

/* =========================================================
   BASIC TEXT
========================================================= */

.kept-quill-content strong,
.kept-quill-content b{
  font-weight:700;
}

.kept-quill-content em,
.kept-quill-content i{
  font-style:italic;
}

.kept-quill-content u{
  text-decoration:underline;
}

.kept-quill-content s{
  text-decoration:line-through;
}

/* =========================================================
   LINK
========================================================= */

.kept-quill-content a{
  color:#0077cc;
  text-decoration:underline;
  text-underline-offset:3px;
}

.kept-quill-content a:hover{
  color:#005fa3;
}

/* =========================================================
   IMAGE / MEDIA
========================================================= */

.kept-quill-content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:28px auto;
  border-radius:8px;
}

.kept-quill-content iframe,
.kept-quill-content video{
  max-width:100%;
}

/* =========================================================
   BLOCKQUOTE
========================================================= */

.kept-quill-content blockquote{
  border-left:4px solid #168a16;
  background:#f7fff4;
  padding:16px 20px;
  margin:24px 0;
  color:#234;
  font-size:18px;
  line-height:1.75;
}

/* =========================================================
   CODE
========================================================= */

.kept-quill-content code{
  font-family:Consolas, Monaco, monospace;
  background:#f2f2f2;
  padding:2px 5px;
  border-radius:4px;
  font-size:.92em;
}

.kept-quill-content pre,
.kept-quill-content pre.ql-syntax{
  font-family:Consolas, Monaco, monospace;
  background:#1e1e1e;
  color:#fff;
  border-radius:8px;
  padding:18px;
  margin:20px 0;
  overflow:auto;
  line-height:1.6;
}

/* =========================================================
   LIST
========================================================= */

.kept-quill-content ul,
.kept-quill-content ol{
  padding-left:1.8em;
  margin:18px 0 22px;
}

.kept-quill-content li{
  margin-bottom:8px;
  line-height:1.75;
}

.kept-quill-content li > ul,
.kept-quill-content li > ol{
  margin-top:8px;
  margin-bottom:8px;
}

/* =========================================================
   QUILL ALIGN
========================================================= */

.kept-quill-content .ql-align-center{
  text-align:center;
}

.kept-quill-content .ql-align-right{
  text-align:right;
}

.kept-quill-content .ql-align-left{
  text-align:left;
}

.kept-quill-content .ql-align-justify{
  text-align:justify;
}

.kept-quill-content .ql-align-center img{
  margin-left:auto;
  margin-right:auto;
}

.kept-quill-content .ql-align-right img{
  margin-left:auto;
  margin-right:0;
}

.kept-quill-content .ql-align-left img{
  margin-left:0;
  margin-right:auto;
}

/* =========================================================
   QUILL INDENT
========================================================= */

.kept-quill-content .ql-indent-1{ padding-left:3em; }
.kept-quill-content .ql-indent-2{ padding-left:6em; }
.kept-quill-content .ql-indent-3{ padding-left:9em; }
.kept-quill-content .ql-indent-4{ padding-left:12em; }

/* =========================================================
   QUILL SIZE
========================================================= */

.kept-quill-content .ql-size-small{
  font-size:.75em;
}

.kept-quill-content .ql-size-large{
  font-size:1.5em;
}

.kept-quill-content .ql-size-huge{
  font-size:2.5em;
}

/* =========================================================
   QUILL FONT
========================================================= */

.kept-quill-content .ql-font-serif{
  font-family:Georgia,'Times New Roman',serif;
}

.kept-quill-content .ql-font-monospace{
  font-family:Consolas,Monaco,monospace;
}

/* =========================================================
   MINI CANVA SAFETY
========================================================= */

.kept-quill-content .kept-box-canvas,
.kept-quill-content .kept-figure,
.kept-quill-content figure{
  max-width:100%;
}

.kept-quill-content figure{
  margin:28px auto;
}

/* =========================================================
   FRONTEND DETAILS WIDTH
========================================================= */

.description.kept-quill-content{
  max-width:var(--kept-content-width);
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}

.description.kept-quill-content > *{
  max-width:var(--kept-reading-width);
  margin-left:auto;
  margin-right:auto;
}

.description.kept-quill-content img,
.description.kept-quill-content figure,
.description.kept-quill-content .kept-grid,
.description.kept-quill-content .kept-box-canvas,
.description.kept-quill-content .kept-figure{
  max-width:100%;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1200px){
  .description.kept-quill-content{
    padding-left:24px;
    padding-right:24px;
  }

  .description.kept-quill-content > *{
    max-width:100%;
  }
}

@media (max-width:768px){
  :root{
    --kept-font-body:17px;
    --kept-h1:32px;
    --kept-h2:28px;
    --kept-h3:24px;
    --kept-h4:21px;
  }

  .kept-quill-content,
  .ql-editor.kept-quill-content{
    line-height:1.85;
  }

  .kept-quill-content p{
    line-height:1.85;
    margin-bottom:18px;
  }

  .description.kept-quill-content{
    padding-left:16px;
    padding-right:16px;
  }

  .kept-quill-content .ql-indent-1,
  .kept-quill-content .ql-indent-2,
  .kept-quill-content .ql-indent-3,
  .kept-quill-content .ql-indent-4{
    padding-left:1.5em;
  }
}