/* Godzilla — forms and things that come from other plugins: shared field look, Contact Form 7, WPForms, the comment form and
   the list of comments, «Не пропусти» boxes of Inline Related Posts in old articles. Both colour themes go through the tokens. */

/* ------------------------------------------------------------------ one look for every text field */
.gz-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea),
.wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], textarea, select),
.wpforms-container :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], textarea, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--gz-input-line);
	border-radius: 12px;
	background: var(--gz-input-bg);
	color: var(--gz-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.gz-comments textarea, .wpcf7 textarea, .wpforms-container textarea { min-height: 0; resize: vertical; }
.gz-comments :is(input, textarea):hover, .wpcf7 :is(input, textarea, select):hover, .wpforms-container :is(input, textarea, select):hover { border-color: var(--gz-muted-2); }
.gz-comments :is(input, textarea):focus, .wpcf7 :is(input, textarea, select):focus, .wpforms-container :is(input, textarea, select):focus { outline: none; border-color: var(--gz-accent); box-shadow: 0 0 0 3px var(--gz-accent-soft); }
.gz-comments ::placeholder, .wpcf7 ::placeholder, .wpforms-container ::placeholder { color: var(--gz-muted-2); opacity: 1; }

/* the one button of a form */
.gz-comments input[type="submit"],
.wpcf7 input[type="submit"], .wpcf7 .wpcf7-submit,
.wpforms-container button[type="submit"], .wpforms-container .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	height: auto;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: var(--gz-accent);
	color: var(--gz-on-accent);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: filter .15s;
}
.gz-comments input[type="submit"]:hover, .wpcf7 input[type="submit"]:hover, .wpforms-container button[type="submit"]:hover { filter: brightness(1.08); }
.gz-comments input[type="submit"]:focus-visible, .wpcf7 input[type="submit"]:focus-visible, .wpforms-container button[type="submit"]:focus-visible { outline: 2px solid var(--gz-accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ Contact Form 7 */
.wpcf7 { max-width: 640px; margin: 8px 0 24px; padding: 24px; border: 1px solid var(--gz-line); border-radius: 20px; background: var(--gz-surface); }
.wpcf7 form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 14px; }
.wpcf7 form > * { grid-column: 1 / -1; margin: 0; }
/* name and email side by side on wide screens (the default fields of Contact Form 7) */
.wpcf7 form > p:has([name="your-name"]), .wpcf7 form > p:has([name="your-email"]) { grid-column: auto; }
.wpcf7 form > .hidden-fields-container, .wpcf7 form > fieldset[hidden] { display: none; }
.wpcf7 label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gz-text-3); }
.wpcf7 label br { display: none; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 textarea { height: 150px; }
.wpcf7 .wpcf7-list-item { margin: 0 14px 0 0; }
.wpcf7 :is(.wpcf7-acceptance, .wpcf7-checkbox, .wpcf7-radio) label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gz-accent); }
.wpcf7 p:has(.wpcf7-submit) { display: flex; align-items: center; gap: 12px; }
.wpcf7 .wpcf7-spinner { margin: 0; background-color: var(--gz-muted-2); }
.wpcf7 .wpcf7-not-valid { border-color: var(--gz-red-text); }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: var(--gz-red-text); font-size: 13px; font-weight: 600; }
body .wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 16px; border: 1px solid var(--gz-line-2); border-radius: 12px; background: var(--gz-surface-2); color: var(--gz-text-2); font-size: 15px; }
body .wpcf7 form.init .wpcf7-response-output, body .wpcf7 form.resetting .wpcf7-response-output, body .wpcf7 form.submitting .wpcf7-response-output { display: none; }
body .wpcf7 form.sent .wpcf7-response-output { border-color: var(--gz-green-line); background: var(--gz-green-bg); color: var(--gz-text); }
body .wpcf7 form.invalid .wpcf7-response-output, body .wpcf7 form.unaccepted .wpcf7-response-output, body .wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--gz-red-line); background: var(--gz-red-bg); color: var(--gz-red-ink); }
body .wpcf7 form.failed .wpcf7-response-output, body .wpcf7 form.aborted .wpcf7-response-output, body .wpcf7 form.spam .wpcf7-response-output { border-color: var(--gz-red-line); background: var(--gz-red-bg); color: var(--gz-red-ink); }
@media (max-width: 600px) {
	.wpcf7 { padding: 18px 16px; border-radius: 16px; }
	.wpcf7 form > p:has([name="your-name"]), .wpcf7 form > p:has([name="your-email"]) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ WPForms (its modern markup reads these variables) */
.wpforms-container {
	--wpforms-field-border-radius: 12px;
	--wpforms-field-background-color: var(--gz-input-bg);
	--wpforms-field-border-color: var(--gz-line-2);
	--wpforms-field-text-color: var(--gz-text);
	--wpforms-field-menu-color: var(--gz-surface);
	--wpforms-label-color: var(--gz-text-3);
	--wpforms-label-sublabel-color: var(--gz-muted);
	--wpforms-label-error-color: var(--gz-red-text);
	--wpforms-button-border-radius: 12px;
	--wpforms-button-background-color: var(--gz-accent);
	--wpforms-button-text-color: var(--gz-on-accent);
	--wpforms-page-break-color: var(--gz-accent);
	max-width: 640px;
	margin: 8px 0 24px !important;
	padding: 24px;
	border: 1px solid var(--gz-line);
	border-radius: 20px;
	background: var(--gz-surface);
	color: var(--gz-text);
}
.wpforms-container .wpforms-field { padding: 8px 0 !important; }
.wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-sublabel { color: var(--gz-text-3) !important; font-weight: 600; font-size: 14px; }
.wpforms-container .wpforms-required-label { color: var(--gz-red-text); }
.wpforms-container label.wpforms-error, .wpforms-container em.wpforms-error { color: var(--gz-red-text) !important; font-size: 13px; font-style: normal; font-weight: 600; }
.wpforms-container input.wpforms-error, .wpforms-container textarea.wpforms-error { border-color: var(--gz-red-text) !important; }
.wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) { max-width: 640px; padding: 16px 20px; border: 1px solid var(--gz-green-line) !important; border-radius: 14px; background: var(--gz-green-bg) !important; color: var(--gz-text) !important; }
.wpforms-confirmation-container-full p { margin: 0; }

/* ------------------------------------------------------------------ comments */
.gz-comments { margin-top: 36px; padding-top: 4px; }
.gz-comments .wp-block-comments-title, .gz-comments .comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--gz-font-display); font-size: 21px; line-height: 1.25; }
.gz-comments .comment-reply-title small { font-family: var(--gz-font-text); font-size: 13px; font-weight: 600; }
.gz-comments .comment-reply-title small a { color: var(--gz-muted); }
/* the list: name and date on one line, the text under them, «Відповісти» small */
.gz-comments .wp-block-comment-template { list-style: none; margin: 0 0 8px; padding: 0; }
.gz-comments .wp-block-comment-template ol { list-style: none; margin: 0; padding-left: 18px; border-left: 2px solid var(--gz-line); }
.gz-comment { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--gz-line); font-size: 15px; line-height: 1.55; }
.gz-comment .wp-block-comment-author-name { font-weight: 700; font-size: 15px; }
.gz-comment .wp-block-comment-author-name a { color: var(--gz-text); }
.gz-comment .wp-block-comment-date { font-size: 13px; color: var(--gz-muted); }
.gz-comment .wp-block-comment-date a { color: var(--gz-muted); }
.gz-comment .wp-block-comment-content { flex: 1 1 100%; color: var(--gz-text-2); }
.gz-comment .wp-block-comment-content p { margin: 2px 0 4px; }
.gz-comment .wp-block-comment-reply-link { flex: 1 1 100%; font-size: 13px; font-weight: 700; }
.gz-comment .wp-block-comment-reply-link a { color: var(--gz-accent); }
.gz-comments .wp-block-comments-pagination { margin: 8px 0 16px; font-weight: 600; gap: 8px; }
/* the form: two fields in a row, a short text field, no «Сайт» */
.gz-comments .wp-block-post-comments-form { margin-top: 14px; padding: 20px; border: 1px solid var(--gz-line); border-radius: 18px; background: var(--gz-surface); }
.gz-comments .comment-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.gz-comments .comment-form > * { grid-column: 1 / -1; margin: 0; }
.gz-comments .comment-form > .comment-form-author, .gz-comments .comment-form > .comment-form-email { grid-column: auto; }
.gz-comments .comment-form-url { display: none; }
.gz-comments .comment-form label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--gz-muted); }
.gz-comments .comment-form .required { color: var(--gz-red-text); }
.gz-comments .comment-form textarea { height: 96px; }
.gz-comments .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gz-muted); }
.gz-comments .comment-form-cookies-consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--gz-accent); }
.gz-comments .comment-form-cookies-consent label { margin: 0; font-weight: 500; }
.gz-comments .comment-notes, .gz-comments .logged-in-as { font-size: 13px; color: var(--gz-muted); }
.gz-comments .form-submit { display: flex; }
.gz-comments .form-submit .wp-block-button__link { width: auto; }
@media (max-width: 600px) {
	.gz-comments .comment-form > .comment-form-author, .gz-comments .comment-form > .comment-form-email { grid-column: 1 / -1; }
	.gz-comments .wp-block-post-comments-form { padding: 16px; }
}

/* ------------------------------------------------------------------ «Читайте також» inside old articles (Inline Related Posts) */
.gz-content .gz-irp { margin: 26px 0; }
.gz-irp__link { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid var(--gz-line); border-left: 4px solid var(--gz-accent); border-radius: 14px; background: var(--gz-surface); color: var(--gz-text); text-decoration: none !important; transition: border-color .15s, background .15s; }
.gz-irp__link:hover { border-color: var(--gz-accent); background: var(--gz-surface-2); color: var(--gz-text); }
.gz-irp__img { flex: 0 0 76px; width: 76px; height: 56px; position: relative; border-radius: 10px; overflow: hidden; background: var(--gz-surface-2); }
.gz-irp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.gz-irp__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gz-irp__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gz-accent); }
.gz-irp__title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.gz-irp__go { flex: none; color: var(--gz-accent); font-weight: 800; font-size: 18px; }
/* the plugin's own box, should its markup ever differ from what includes/article.php rewrites */
.gz-content div[style*="clear:both"] > a[class^="u"] { display: block; padding: 14px 18px !important; border: 1px solid var(--gz-line) !important; border-left: 4px solid var(--gz-accent) !important; border-radius: 14px; background: var(--gz-surface) !important; color: var(--gz-text) !important; text-decoration: none !important; opacity: 1 !important; }
.gz-content div[style*="clear:both"] > a[class^="u"] > div { padding: 0 !important; }
.gz-content div[style*="clear:both"] > a[class^="u"] .ctaText { color: var(--gz-accent) !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .06em; }
.gz-content div[style*="clear:both"] > a[class^="u"] .postTitle { color: var(--gz-text) !important; text-decoration: none !important; font-size: 16px !important; }
@media (max-width: 600px) {
	.gz-irp__img { flex-basis: 64px; width: 64px; height: 52px; }
	.gz-irp__title { font-size: 15px; }
}

/* ------------------------------------------------------------------ old texts: things the editor of the old site left */
.gz-content h1 { font-size: 30px; line-height: 1.2; margin: 32px 0 14px; }
.gz-content pre.wp-block-preformatted { white-space: pre-wrap; font-family: inherit; font-size: inherit; line-height: inherit; background: none; border: 0; padding: 0; color: inherit; }
.gz-content .wp-block-separator { border: 0; border-top: 1px solid var(--gz-line); margin: 28px 0; opacity: 1; }