/* CMS content guideline utility classes. */
/* Use the `cms-guideline-*` naming convention for all new CMS content. */

/* Heading hierarchy */
.cms-guideline-display-1 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-display-2 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-heading-1 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-heading-2 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}
.cms-guideline-heading-3 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.cms-guideline-heading-4 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.cms-guideline-heading-5 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.cms-guideline-heading-6 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 2px !important;
}

/* Body typography */
.cms-guideline-body-1-emphasis {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-body-1 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-body-2-emphasis {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-body-2 {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.cms-guideline-caption {
  font-family: 'Roboto', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei' !important;
  color: #333 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

/* Inline text-size utilities used by the editor toolbar. */

.cms-guideline-text-size-40 {
  font-size: 40px !important;
}

.cms-guideline-text-size-36 {
  font-size: 36px !important;
}

.cms-guideline-text-size-32 {
  font-size: 32px !important;
}

.cms-guideline-text-size-28 {
  font-size: 28px !important;
}

.cms-guideline-text-size-24 {
  font-size: 24px !important;
}

.cms-guideline-text-size-20 {
  font-size: 20px !important;
}

.cms-guideline-text-size-16 {
  font-size: 16px !important;
}

.cms-guideline-text-size-14 {
  font-size: 14px !important;
}

.cms-guideline-text-size-12 {
  font-size: 12px !important;
}

@media (max-width: 768px) {
  .cms-guideline-text-size-40,
  .cms-guideline-display-1 { font-size: 32px !important; }
  .cms-guideline-text-size-36,
  .cms-guideline-display-2 { font-size: 28px !important; }
  .cms-guideline-text-size-32,
  .cms-guideline-heading-1 { font-size: 24px !important; }
  .cms-guideline-text-size-28,
  .cms-guideline-heading-2 { font-size: 20px !important; }
  .cms-guideline-text-size-24,
  .cms-guideline-text-size-20,
  .cms-guideline-heading-3,
  .cms-guideline-heading-4 { font-size: 18px !important; }
  .cms-guideline-heading-5,
  .cms-guideline-body-1-emphasis,
  .cms-guideline-body-1 { font-size: 16px !important; }
  .cms-guideline-heading-6,
  .cms-guideline-body-2-emphasis,
  .cms-guideline-body-2 { font-size: 14px !important; }
  .cms-guideline-caption { font-size: 12px !important; }
}

/* Text colors */
/* Palette colors used by the shared CMS editor. */
.cms-guideline-text-ink {
  color: #0c0e1f !important;
}

.cms-guideline-text-slate {
  color: #494a57 !important;
}

.cms-guideline-text-note {
  color: #5e5f6b !important;
}

.cms-guideline-text-link {
  color: #007aa7 !important;
}

.cms-guideline-text-success {
  color: #008578 !important;
}

.cms-guideline-text-warning {
  color: #994000 !important;
}

.cms-guideline-text-error {
  color: #d7333d !important;
}

/* Background colors */
.cms-guideline-bg-light-blue {
  background-color: #f4fbff;
}

.cms-guideline-bg-light-green {
  background-color: #dff2f1;
}

.cms-guideline-bg-sky-blue {
  background-color: #e1f4fb;
}

.cms-guideline-bg-light-cyan {
  background-color: #e6fbfe;
}

.cms-guideline-bg-mint {
  background-color: #e6fef8;
}

.cms-guideline-bg-light-yellow {
  background-color: #fffae9;
}

.cms-guideline-bg-light-pink {
  background-color: #fcedef;
}

.cms-guideline-bg-light-orange {
  background-color: #ffeae6;
}

.cms-guideline-bg-light-purple {
  background-color: #f5eef7;
}