/* Overrides for dynamic content rendered inside the GenZ template. */
.content-detail { color: var(--bs-gray-500, #94a3b8); font-size: 18px; line-height: 1.7; }
.content-detail p, .content-detail li { color: inherit; margin-bottom: 1.25rem; }
.content-detail h2, .content-detail h3, .content-detail h4, .content-detail h5 { color: #fff; margin: 2rem 0 1rem; }
.content-detail ul, .content-detail ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.content-detail ul { list-style: disc; }
.content-detail ol { list-style: decimal; }
.content-detail a { text-decoration: underline; }
.content-detail img { max-width: 100%; height: auto; border-radius: 16px; }
.content-detail blockquote { border-left: 3px solid #7c3aed; padding-left: 1rem; font-style: italic; }
.theme-day .content-detail h2, .theme-day .content-detail h3, .theme-day .content-detail h4, .theme-day .content-detail h5 { color: #0f172a; }

.ratio-video { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; }
.ratio-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.card-blog-1 .card-image img, .card-list-posts .card-image img, .item-post .image-post img { object-fit: cover; }
.card-blog-1 .card-image img { width: 100%; aspect-ratio: 16 / 10; }
.card-list-posts .card-image img { aspect-ratio: 1 / 1; }
.item-post .image-post img { width: 64px; height: 64px; }
.card-style-1 .card-image img, .card-style-2 .card-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.box-author img { object-fit: cover; }
.banner-img img.hero-image { border-radius: 24px; max-height: 480px; object-fit: cover; width: 100%; }
.hero-image-col { padding-top: 40px; }
.hero-text-col { padding-top: 30px; }
@media (min-width: 992px) {
    .hero-image-col { padding-top: 100px; }
    .hero-text-col { padding-top: 0; }
}

.site-ad { margin: 30px 0; text-align: center; }
.site-ad img { max-width: 100%; height: auto; border-radius: 16px; }
.site-ad .site-ad-text { padding: 20px; border-radius: 16px; text-align: left; }
.site-ad-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }

.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-contact .invalid-feedback { display: block; text-align: left; }
.alert-site { border-radius: 12px; padding: 16px 20px; margin-bottom: 30px; }

/* Contact form as a letter that slides out of an envelope on hover or focus. */
#form_wrap { position: relative; top: 0; overflow: hidden; height: 446px; max-width: 530px; margin: 130px auto 0; transition: all 1s ease-in-out .3s; }
#form_wrap::before, #form_wrap::after { content: ""; position: absolute; left: 0; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
#form_wrap::before { bottom: 128px; height: 316px; background-image: url(../../img/before.png); }
#form_wrap::after { bottom: 0; height: 260px; background-image: url(../../img/after.png); }
#form_wrap:hover, #form_wrap:focus-within, #form_wrap.is-open { height: 836px; top: -110px; }
#form_wrap form { position: relative; top: 120px; overflow: hidden; height: 200px; width: 86%; max-width: 400px; margin: 0 auto; padding: 30px; background: #fff; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); transition: all 1s ease-in-out .3s; }
#form_wrap:hover form, #form_wrap:focus-within form, #form_wrap.is-open form { height: 590px; }
#form_wrap .row { margin-left: -6px; margin-right: -6px; }
#form_wrap .row > * { padding-left: 6px; padding-right: 6px; }
#form_wrap .form-group { margin-bottom: 12px; }
#form_wrap .form-control { height: 44px; padding: 10px 14px; font-size: 14px; color: #495057; background-color: #fff; border-color: #ced4da; border-radius: 4px; }
#form_wrap textarea.form-control { height: 100px; resize: none; }
#form_wrap .form-control:focus { border-color: #0ea5ea !important; }
#form_wrap .form-control.is-invalid { border-color: #dc3545; }
#form_wrap .invalid-feedback { font-size: 12px; margin-top: 2px; }
#form_wrap .captcha-box { display: flex; align-items: center; gap: 6px; }
#form_wrap .captcha-box img { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid #ced4da; border-radius: 4px; object-fit: fill; }
#form_wrap .captcha-reload { flex: 0 0 auto; width: 24px; height: 44px; padding: 0; font-size: 20px; line-height: 1; color: #495057; background: transparent; border: 0; cursor: pointer; }
#form_wrap .captcha-reload:hover { color: #0ea5ea; }
@media (max-width: 575px) {
    #form_wrap form { padding: 20px; }
    #form_wrap .form-control { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #form_wrap, #form_wrap form { transition: none; }
}

.popup-modal .modal-content { border-radius: 20px; overflow: hidden; }
.popup-modal img { width: 100%; height: auto; }

.legal-content h3 { font-size: 26px; }
.legal-content h4 { font-size: 20px; }