/* =============================================================================
   PROGRAM-ONLY STYLES
   -----------------------------------------------------------------------------
   This file contains styles required by the PHP application and dynamic content.
   Keep the designer-owned css/main.css synchronized with the latest static design.
   ============================================================================= */

/* Quill output rendered on public pages. */
.editor .ql-align-center{ text-align: center; }
.editor .ql-align-right{ text-align: right; }
.editor .ql-align-justify{ text-align: justify; }
.editor .ql-size-small{ font-size: .8em; }
.editor .ql-size-large{ font-size: 1.5em; }
.editor .ql-size-huge{ font-size: 2.5em; }
.editor .ql-indent-1{ margin-left: 3em; }
.editor .ql-indent-2{ margin-left: 6em; }
.editor .ql-indent-3{ margin-left: 9em; }
.editor .ql-indent-4{ margin-left: 12em; }
.editor .ql-indent-5{ margin-left: 15em; }
.editor .ql-indent-6{ margin-left: 18em; }
.editor .ql-indent-7{ margin-left: 21em; }
.editor .ql-indent-8{ margin-left: 24em; }
.editor .article_body>img{ display: block; width: auto; max-width: 100%; margin: 32px auto; border-radius: 8px; }
.editor .article_body iframe{ display: block; width: min(720px, 100%); min-height: 405px; margin: 32px auto; border: 0; }
.editor .article_body hr{ margin: 40px 0; border: 0; border-top: 1px solid rgba(70, 114, 64, .2); }
.editor .article_body .ql-formula{ display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: middle; }

/* Dynamic news listings and article content. */
.news_empty{ display: grid; min-height: 320px; place-items: center; align-content: center; gap: 24px; padding: 60px 20px; color: var(--muted-color); text-align: center; }
.news_empty p, .home-news-empty{ margin: 0; color: var(--muted-color); font-size: 16px; line-height: 28px; text-align: center; }
.home-news-empty{ padding: 24px 0; }
.article_meta a{ color: var(--main-color); text-decoration: none; }
.article_meta a::after{ margin-left: 12px; color: #aab7a6; content: "/"; }
.article_body{ margin-top: 28px; }
.editor .article_body>strong{ display: block; margin: 0 0 20px; color: var(--second-color); font-size: inherit; font-weight: 700; }
.article_video_trigger{ display: flex; width: min(520px, 100%); align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid rgba(70, 114, 64, .22); border-radius: 16px; background: rgba(255, 255, 255, .68); color: var(--text-color); cursor: pointer; font: inherit; text-align: left; transition: border-color .25s, background-color .25s, transform .25s; }
.article_video_icon{ display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 50%; background: var(--main-color); color: #fff; }
.article_video_trigger>span:last-child{ display: grid; gap: 3px; }
.article_video_trigger strong{ color: var(--second-color); font-size: 17px; }
.article_video_trigger small{ color: var(--muted-color); font-size: 13px; }
.article_video_trigger:focus-visible{ outline: 3px solid var(--main-color); outline-offset: 4px; }
.download_list .file_name small{ display: block; color: #7a8778; font-size: 12px; font-weight: 400; }

/* Dynamic content wrappers. */
.sdg_note p{ margin: 0; }
.faq_empty{ display: grid; min-height: 280px; place-items: center; align-content: center; gap: 24px; color: var(--muted-color); text-align: center; }
.faq_empty p{ margin: 0; font-size: 16px; line-height: 28px; }
.faq_list .pagination{ margin-top: 48px; padding: 0; }

/* Contact form validation, privacy notice and spam protection. */
.required_note{ margin: -10px 0 0; color: #68716a; font-size: 13px; line-height: 1.7; }
.required_note span{ color: #a63c36; font-weight: 700; }
.contact_alert{ padding: 16px 18px; border: 1px solid; border-radius: 10px; outline: 0; font-size: 14px; line-height: 1.7; }
.contact_alert strong{ display: block; margin-bottom: 4px; font-size: 16px; }
.contact_alert p{ margin: 0; }
.contact_alert.is-error{ border-color: #e2b7b3; background: #fff1ef; color: #893b35; }
.contact-modal-open{ overflow: hidden; }
.contact_success_modal{ position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(29, 45, 35, .58); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.contact_success_modal[hidden]{ display: none; }
.contact_success_card{ width: min(520px, 100%); padding: 44px 42px 40px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 24px; background: rgba(255, 255, 255, .98); box-shadow: 0 24px 70px rgba(15, 35, 23, .28); color: var(--text-color); text-align: center; }
.contact_success_icon{ display: grid; width: 72px; height: 72px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: #e5f1e2; color: var(--second-color); font-size: 30px; }
.contact_success_eyebrow{ margin: 0 0 8px; color: var(--main-color); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.contact_success_card h2{ margin: 0 0 16px; color: var(--second-color); font: 700 30px/1.4 var(--font-serif); letter-spacing: .08em; }
.contact_success_card>p{ line-height: 1.8; }
.contact_success_card #contact-success-description{ margin: 0; font-size: 16px; }
.contact_success_reference{ display: grid; gap: 3px; margin: 22px 0 16px; padding: 14px 18px; border-radius: 12px; background: #f0f5ed; }
.contact_success_reference span{ color: #6a756b; font-size: 13px; }
.contact_success_reference strong{ color: var(--second-color); font-size: 19px; letter-spacing: .06em; }
.contact_success_card .contact_success_note{ margin: 0; color: #6a756b; font-size: 13px; }
.contact_success_close{ display: inline-flex; min-width: 150px; min-height: 44px; align-items: center; justify-content: center; margin-top: 26px; padding: 10px 28px; border-radius: 24px; background: var(--main-color); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color .25s; }
.contact_success_close:focus-visible{ outline: 3px solid var(--second-color); outline-offset: 4px; }
.contact_honeypot{ position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-field{ min-width: 0; }
.form-control[aria-invalid="true"], .form_group[aria-invalid="true"] .check_list, .privacy_consent input[aria-invalid="true"]{ border-color: #b9564e; }
.field_error{ display: block; margin-top: 7px; color: #a63c36; font-size: 13px; line-height: 1.6; }
.other-source-field{ margin-top: 18px; }
.other-source-field[hidden]{ display: none; }
.privacy_notice{ padding: 18px; border: 1px solid #d5dfd2; border-radius: 10px; background: rgba(246, 249, 244, .92); }
.privacy_notice h3{ margin: 0 0 9px; }
.privacy_notice>p{ margin: 0 0 14px; color: #566158; font-size: 13px; line-height: 1.8; }
.privacy_notice>p strong{ color: #34483a; }
.privacy_consent{ display: flex; align-items: flex-start; gap: 10px; color: #34483a; font-size: 14px; font-weight: 700; line-height: 1.7; cursor: pointer; }
.privacy_consent input{ width: 18px; height: 18px; flex: 0 0 18px; margin: 3px 0 0; accent-color: var(--second-color); }
.recaptcha_notice{ margin: -8px 0 0; color: #737b74; font-size: 11px; line-height: 1.7; }
.contact_submit{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.contact_submit:disabled{ opacity: .6; cursor: wait; }

/* Optional product content managed in the CMS. */
.fit_inner.is-without-videos{ grid-template-columns: minmax(0, 1fr); }
.fit_inner.is-without-videos .fit_list{ max-width: 620px; }
.use_area_item .media.is-contain img{ object-fit: contain; }

@media only screen and (max-width: 576px) {
	/* Five page numbers plus first/previous/next/last controls must fit on mobile. */
	.pagination{ gap: 2px; padding-inline: 4px; }
	.pagination a{ width: 28px; height: 28px; font-size: 14px; }
	.article_video_trigger{ padding: 16px; }
	.contact_success_modal{ padding: 18px; }
	.contact_success_card{ padding: 36px 22px 30px; border-radius: 20px; }
	.contact_success_icon{ width: 64px; height: 64px; margin-bottom: 16px; font-size: 26px; }
	.contact_success_card h2{ font-size: 26px; }
}

@media only screen and (min-width: 993px) {
	.article_video_trigger:hover{ border-color: rgba(70, 114, 64, .48); background: rgba(232, 242, 229, .82); transform: translateY(-2px); }
	.contact_success_close:hover{ background: #286b6d; }
}