/* CMS additions to the sitebuild styles: blog article / plain content pages, blog covers with an
   uploaded image, form error state. Uses the tokens of css/style.css. */

.cms-article { max-width: 820px; }
.cms-article-hero { padding: 64px 0 56px; }
.cms-article-hero .post__meta { margin-bottom: 18px; }
.cms-article-hero .h1 { margin: 0; }
.cms-article__back { display: inline-flex; margin-bottom: 28px; }
.cms-article__lead { margin-top: 20px; color: var(--muted); }
.cms-article__lead p { margin: 0; }
.cms-article-body { padding-block: 72px; }
.cms-article__cover { display: block; width: 100%; height: auto; border-radius: 24px; margin-bottom: 48px; }

.cms-prose { font: 400 18px/1.7 var(--font-text); color: var(--navy); }
.cms-prose > :first-child { margin-top: 0; }
.cms-prose > :last-child { margin-bottom: 0; }
.cms-prose h2 { font: 600 30px/1.25 var(--font-head); margin: 48px 0 16px; }
.cms-prose h3 { font: 600 23px/1.3 var(--font-head); margin: 36px 0 12px; }
.cms-prose p, .cms-prose ul, .cms-prose ol { margin: 0 0 20px; }
.cms-prose ul, .cms-prose ol { padding-left: 1.3em; }
.cms-prose li + li { margin-top: 6px; }
.cms-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cms-prose a:hover { color: var(--blue-dark); }
.cms-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.cms-prose blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--blue); color: var(--muted); }
.cms-prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.cms-prose th, .cms-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }

.post__cover.has-image, .featured__cover.has-image { padding: 0; overflow: hidden; }
.post__cover.has-image img, .featured__cover.has-image img { display: block; width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 767px) {
  .cms-article-hero { padding: 40px 0 32px; }
  .cms-article-body { padding-block: 48px; }
  .cms-prose { font-size: 17px; }
  .cms-prose h2 { font-size: 25px; }
}

/* footer bottom links: CoreMenuWidget renders them as a list */
.site-footer__bottom nav ul { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }

/* blog pager: ViPaginationWidget markup on the sitebuild .pager__btn style */
.pager .pager__btn.actual { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pager .pager__btn.previous, .pager .pager__btn.next { font-size: 0; background: var(--bg-2); border-color: var(--bg-2); }
.pager .pager__btn.previous::before, .pager .pager__btn.next::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5.5 8.5 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5.5 8.5 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pager .pager__btn.next::before { transform: scaleX(-1); }
.pager span.pager__btn.previous, .pager span.pager__btn.next { opacity: .55; }

/* contact form: FormBoxWidget markup (form > .row > .label + .field + .error_msg) on the sitebuild form style.
   A field whose container options have class "half" takes half of the row. */
.cms-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cms-form .row { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.cms-form .row:has(> .field.half) { grid-column: auto; }
.cms-form .row:has(> .field > input[type="hidden"]) { display: none; }
.cms-form .label label { font: 600 16px/1.2 var(--font-text); color: var(--navy); }
.cms-form .field select {
  color: var(--navy);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23171a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 20px no-repeat;
}
.cms-form .field:has(input[type="checkbox"]), .cms-form .field:has(input[type="radio"]) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cms-form .field input[type="checkbox"], .cms-form .field input[type="radio"] {
  width: 22px; height: 22px; padding: 0; margin: 0; flex: none;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--blue); cursor: pointer;
}
.cms-form .field input[type="checkbox"] + span, .cms-form .field input[type="radio"] + span { font: 400 15px/1.5 var(--font-text); color: var(--slate); }
.cms-form .field button.btn { border: 0; padding: 8px 28px; cursor: pointer; align-self: flex-start; }
.cms-form .field input.error, .cms-form .field textarea.error, .cms-form .field select.error { border-color: var(--pink); }
.cms-form .error_msg { font: 400 14px/1.4 var(--font-text); color: var(--pink); }
.cms-form .error_msg:empty { display: none; }
.cms-form .common_error { grid-column: 1 / -1; font: 600 16px/1.4 var(--font-text); }
.cms-form .common_error.success { color: var(--green); }
.cms-form .errorListBox { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .cms-form form { grid-template-columns: 1fr; }
  .cms-form .row:has(> .field.half) { grid-column: 1 / -1; }
}