/**
 * Blogs & News - listing and article pages
 * ---------------------------------------------------------------------------
 * Added alongside the theme's own news.css / blog-details.css / sidebar.css
 * rather than editing them, so the original theme files stay untouched and a
 * future theme update will not wipe these changes.
 */

/* ---------------------------------------------------------------------------
 * Theme fix: news.css ships `.news-block-one .inner-box .image-box img
 * { width: 1400% }` - a typo for 100% that blows the featured image up to
 * fourteen times its container. Corrected here, plus a fixed aspect ratio so
 * every card image crops to the same shape whatever the source file is.
 * ------------------------------------------------------------------------- */
.news-block-one .inner-box .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-block-one .inner-box .image-box {
  aspect-ratio: 16 / 9;
}

/* Cards should feel clickable across the whole image. */
.news-block-one .inner-box .image-box a {
  display: block;
  width: 100%;
  height: 100%;
}

/** listing page **/

.cg-blog-listing {
  padding-top: 110px;
  padding-bottom: 120px;
}

.cg-blog-listing .news-block-one .inner-box .lower-content .excerpt {
  margin-top: 18px;
  margin-bottom: 26px;
}

.cg-blog-listing .news-block-one .inner-box .lower-content h3 {
  font-size: 28px;
  line-height: 38px;
}

.cg-blog-listing .news-block-one .inner-box .lower-content h3 a:hover {
  color: var(--theme-color);
}

/* "Continue Reading" link, styled after the reference layout. */
.cg-read-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--title-font);
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: var(--theme-color);
}

.cg-read-more svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  transition: transform 300ms ease;
}

.cg-read-more:hover {
  color: var(--theme-color);
}

.cg-read-more:hover svg {
  transform: translateX(5px);
}

.rtl .cg-read-more svg {
  transform: scaleX(-1);
}

.rtl .cg-read-more:hover svg {
  transform: scaleX(-1) translateX(5px);
}

/** sidebar widgets **/

.cg-sidebar {
  position: relative;
  display: block;
}

.cg-sidebar .widget {
  position: relative;
  background: #fff;
  border: 1px solid #F0EAFB;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 40px rgba(37, 0, 92, 0.05);
}

.cg-sidebar .widget:last-child {
  margin-bottom: 0;
}

.cg-sidebar .widget-title {
  margin-bottom: 22px;
}

.cg-sidebar .widget-title h3 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}

.cg-sidebar .cg-topic-list li {
  position: relative;
  display: block;
  border-bottom: 1px solid #F3EFFA;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.cg-sidebar .cg-topic-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.cg-sidebar .cg-topic-list li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--title-color);
  transition: color 300ms ease;
}

.cg-sidebar .cg-topic-list li a:hover {
  color: var(--theme-color);
}

.cg-sidebar .cg-topic-list li a span {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-color);
  background: #F3EDFF;
  border-radius: 40px;
  padding: 3px 11px;
}

.cg-sidebar .cg-post {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.cg-sidebar .cg-post:last-child {
  margin-bottom: 0;
}

.cg-sidebar .cg-post .cg-thumb {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
}

.cg-sidebar .cg-post .cg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cg-sidebar .cg-post .cg-date {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #8A8699;
  margin-bottom: 4px;
}

.cg-sidebar .cg-post h5 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.cg-sidebar .cg-post h5 a {
  color: var(--title-color);
  transition: color 300ms ease;
}

.cg-sidebar .cg-post h5 a:hover {
  color: var(--theme-color);
}

.cg-sidebar .cg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cg-sidebar .cg-tags li a {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  color: var(--title-color);
  background: #F7F3FF;
  border-radius: 40px;
  padding: 7px 16px;
  transition: all 300ms ease;
}

.cg-sidebar .cg-tags li a:hover {
  background: var(--theme-color);
  color: #fff;
}

/* Help-me CTA card at the bottom of the sidebar. */
.cg-sidebar .cg-help-widget {
  background: linear-gradient(145deg, #3D0099 0%, #6600FF 62%, #9147FF 100%);
  border-color: transparent;
  text-align: center;
  overflow: hidden;
}

.cg-sidebar .cg-help-widget h3,
.cg-sidebar .cg-help-widget p {
  color: #fff;
}

.cg-sidebar .cg-help-widget h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 12px;
}

.cg-sidebar .cg-help-widget p {
  opacity: 0.88;
  margin-bottom: 24px;
}

.cg-sidebar .cg-help-widget .theme-btn {
  background: #fff !important;
  color: var(--theme-color) !important;
}

/** article page **/

.cg-article {
  padding-top: 110px;
  padding-bottom: 120px;
}

.cg-article .cg-article-body {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.cg-article .cg-hero {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
}

.cg-article .cg-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cg-article .cg-article-inner {
  padding: 40px;
}

.cg-article .cg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-bottom: 20px;
}

.cg-article .cg-meta .category {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  background: #F5F0FF;
  color: var(--theme-color);
  border-radius: 40px;
  padding: 6px 15px;
}

.cg-article .cg-meta li {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  padding-left: 28px;
  color: var(--title-color);
}

.cg-article .cg-meta li i {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 20px;
  color: var(--theme-color);
}

.cg-article h1 {
  font-size: 38px;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 26px;
}

.cg-article h2 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 600;
  color: var(--theme-color);
  margin-top: 40px;
  margin-bottom: 16px;
}

.cg-article h3 {
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 12px;
}

.cg-article p {
  margin-bottom: 18px;
}

.cg-article .cg-lead {
  font-size: 18px;
  line-height: 32px;
}

/* Numbered process list used in the "How Chill Guide Helps" section. */
.cg-article .cg-steps {
  counter-reset: cgstep;
  margin: 26px 0 10px;
}

.cg-article .cg-steps li {
  position: relative;
  display: block;
  counter-increment: cgstep;
  padding-left: 58px;
  margin-bottom: 22px;
}

.cg-article .cg-steps li:last-child {
  margin-bottom: 0;
}

.cg-article .cg-steps li:before {
  position: absolute;
  content: counter(cgstep);
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 12px;
  background: #F3EDFF;
  color: var(--theme-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 17px;
}

.cg-article .cg-steps li strong {
  display: block;
  font-family: var(--title-font);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 2px;
}

/* Advantages / considerations pair. */
.cg-article .cg-callout {
  position: relative;
  border-radius: 16px;
  padding: 26px 28px;
  margin: 26px 0;
  border-left: 4px solid var(--theme-color);
  background: #F9F6FF;
}

.cg-article .cg-callout.is-note {
  border-left-color: #FFB020;
  background: #FFF8EC;
}

/* "No service charges" - the client's main differentiator, so it gets a
   distinct green treatment and a tick rather than the default purple. */
.cg-article .cg-callout.is-free {
  border-left-color: #00A97F;
  background: #EEFAF6;
}

.cg-article .cg-callout.is-free h3 {
  position: relative;
  padding-left: 34px;
  color: #00805F;
}

.cg-article .cg-callout.is-free h3:before {
  position: absolute;
  content: '';
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00A97F;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
               linear-gradient(#000, #000);
          mask-composite: exclude;
}

.cg-article .cg-callout h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.cg-article .cg-callout p:last-child {
  margin-bottom: 0;
}

/* Bulleted benefits inside the Advantages callout. */
.cg-article .cg-benefits {
  margin: 18px 0;
}

.cg-article .cg-benefits li {
  position: relative;
  display: block;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 27px;
}

.cg-article .cg-benefits li:last-child {
  margin-bottom: 0;
}

.cg-article .cg-benefits li:before {
  position: absolute;
  content: '';
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--theme-color);
}

.cg-article .cg-benefits li strong {
  font-family: var(--title-font);
  font-weight: 600;
  color: var(--title-color);
}

/* Non-breaking spaces, because CSS collapses ordinary leading and trailing
   spaces inside `content` and the dash would sit flush against both words. */
.cg-article .cg-benefits li strong:after {
  content: '\00a0\2014\00a0';
  font-weight: 400;
  color: var(--text-color);
}

.rtl .cg-article .cg-benefits li {
  padding-left: 0;
  padding-right: 30px;
}

.rtl .cg-article .cg-benefits li:before {
  left: auto;
  right: 0;
}

.rtl .cg-article .cg-callout.is-free h3 {
  padding-left: 0;
  padding-right: 34px;
}

.rtl .cg-article .cg-callout.is-free h3:before {
  left: auto;
  right: 0;
}

/* FAQ block - reuses the theme accordion handler in script.js. */
.cg-faq {
  margin-top: 44px;
}

.cg-faq .accordion {
  background: #fff;
  border: 1px solid #ECE4FB;
  border-radius: 14px;
  margin-bottom: 14px;
  transition: box-shadow 400ms ease, border-color 400ms ease;
}

.cg-faq .accordion:hover,
.cg-faq .accordion.active-block {
  border-color: #D9C6FF;
  box-shadow: 0 12px 36px rgba(37, 0, 92, 0.08);
}

.cg-faq .accordion .acc-btn h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  transition: color 300ms ease;
}

.cg-faq .accordion .acc-btn.active h4,
.cg-faq .accordion .acc-btn:hover h4 {
  color: var(--theme-color);
}

/* The article pages do not load faq.css, so the accordion row and its +/-
   toggle are defined in full here. Glyphs come from the theme's icomoon font
   (loaded via flaticon.css): \e904 is the plus, \e905 the minus. */
.cg-faq .accordion .acc-btn {
  position: relative;
  padding: 20px 68px 20px 26px;
  cursor: pointer;
}

.cg-faq .accordion .acc-content {
  position: relative;
  padding: 0 68px 22px 26px;
}

.cg-faq .accordion .acc-btn .icon-box {
  position: absolute;
  display: inline-block;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #D9C6FF;
  border-radius: 50%;
  background: #fff;
  color: var(--theme-color);
  transition: all 300ms ease;
}

.cg-faq .accordion .acc-btn .icon-box:before {
  position: absolute;
  content: '\e904';
  font-family: 'icomoon';
  font-weight: 400;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
}

.cg-faq .accordion .acc-btn.active .icon-box:before {
  content: '\e905';
}

.rtl .cg-faq .accordion .acc-btn {
  padding: 20px 26px 20px 68px;
}

.rtl .cg-faq .accordion .acc-btn .icon-box {
  right: auto;
  left: 26px;
}

/* The theme sets color:#fff on the open state but no background, which would
   leave a white glyph on a white circle. Give it the brand fill. */
.cg-faq .accordion .acc-btn.active .icon-box {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
}

/* Closed until clicked; jQuery's slideUp/slideDown then writes an inline
   display value that takes over from here. */
.cg-faq .accordion .acc-content {
  display: none;
}

.cg-faq .accordion.active-block .acc-content {
  display: block;
}

.cg-faq .accordion .acc-content p:last-child {
  margin-bottom: 0;
}

/* Bottom-of-article share + back row. */
.cg-article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid #F0EAFB;
  margin-top: 44px;
  padding-top: 28px;
}

.cg-article-footer .cg-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cg-article-footer .cg-share span {
  font-family: var(--title-font);
  font-weight: 600;
  color: var(--title-color);
}

.cg-article-footer .cg-share a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: #F5F0FF;
  color: var(--theme-color);
  font-size: 15px;
  transition: all 300ms ease;
}

.cg-article-footer .cg-share a:hover {
  background: var(--theme-color);
  color: #fff;
}

/** rtl-css **/

.rtl .cg-article .cg-meta li,
.rtl .cg-article .cg-steps li {
  padding-left: 0;
}

.rtl .cg-article .cg-meta li {
  padding-right: 28px;
}

.rtl .cg-article .cg-meta li i {
  left: auto;
  right: 0;
}

.rtl .cg-article .cg-steps li {
  padding-right: 58px;
}

.rtl .cg-article .cg-steps li:before {
  left: auto;
  right: 0;
}

.rtl .cg-article .cg-callout {
  border-left: none;
  border-right: 4px solid var(--theme-color);
}

.rtl .cg-article .cg-callout.is-note {
  border-right-color: #FFB020;
}

/** responsive-css **/

@media only screen and (max-width: 991px) {
  .cg-blog-listing,
  .cg-article {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .cg-sidebar {
    margin-top: 50px;
  }

  .cg-article h1 {
    font-size: 32px;
    line-height: 44px;
  }
}

@media only screen and (max-width: 767px) {
  .cg-blog-listing,
  .cg-article {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .cg-article .cg-article-inner {
    padding: 28px 24px;
  }

  .cg-article h1 {
    font-size: 28px;
    line-height: 38px;
  }

  .cg-article h2 {
    font-size: 24px;
    line-height: 34px;
  }

  .cg-blog-listing .news-block-one .inner-box .lower-content h3 {
    font-size: 23px;
    line-height: 32px;
  }
}

@media only screen and (max-width: 599px) {
  .cg-sidebar .widget {
    padding: 24px 20px;
  }

  .cg-article .cg-steps li {
    padding-left: 0;
    padding-top: 52px;
  }

  .rtl .cg-article .cg-steps li {
    padding-right: 0;
  }
}