/*
Theme Name: Twenty Twenty Dogchow
Template: twentytwenty
Text Domain: twentytwenty-dogchow
Version: 1.0.0
Description: Дочерняя тема Twenty Twenty для проекта anketa.av-group.pro (Dog Chow).
Author:
*/

/* Design tokens -------------------------------
Chow Blue sampled directly from the client's Dog Chow logo
(assets/images/logo-purina_dog-chow.png). The 15%-on-white tint
is the official secondary treatment from the brand book (p.8). */

:root {
	--chow-blue: #164685;
	--chow-blue-deep: #0f3568;
	--chow-blue-tint: #dce3ed;
	--chow-blue-tint-strong: #c5d1e1;
	--error-red: #c0392b;
	--paper: #fff;
	--header-bg: rgb(50, 70, 124);
	--content-bg: rgb(231, 223, 192);
}

body {
	background: var(--paper);
}

/* Typography ---------------------------------
Century Gothic everywhere (the brand book calls for Regular on body
copy, Bold caps on headings; only the Bold cut is available/licensed
for this project, so weight is constant and case does the work).
Text is set in Chow Blue throughout, not black — the brand book's own
pages are laid out this way, and it keeps the whole site reading as
one consistent, branded voice instead of borrowing a generic gray. */

@font-face {
	font-family: 'Century Gothic';
	src: url('assets/fonts/CenturyGothic-Bold.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body,
input,
textarea,
select,
button {
	font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
	color: var(--chow-blue);
	font-size: 1.8rem;
}

/* Form controls don't inherit font-size from the page by default in
browsers (only font-family/color do), so without the rule above they
render at a tiny UA default — the actual reason the survey was hard to
read. Bumped further on phones, where it matters most. */

@media (max-width: 600px) {
	body,
	input,
	textarea,
	select,
	button {
		font-size: 2.2rem;
	}
}

.entry-content,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content cite,
.entry-content figcaption,
.entry-content table,
.entry-content address,
.entry-content .wp-caption-text,
.entry-content .wp-block-file,
.widget_text p,
.widget_text ol,
.widget_text ul,
.widget_text dl,
.widget_text dt,
.widget-content .rssSummary,
.widget-content cite,
.widget-content figcaption,
.widget-content .wp-caption-text,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
	color: var(--chow-blue);
}

a,
.entry-content a {
	color: var(--chow-blue);
	text-decoration-color: var(--chow-blue-tint-strong);
}

a:hover,
a:focus,
.entry-content a:hover,
.entry-content a:focus {
	color: var(--chow-blue-deep);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.site-title {
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* Visible keyboard focus, kept in the brand blue instead of the
browser default so it doesn't fight the palette. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.gform_button:focus-visible {
	outline: 0.2rem solid var(--chow-blue);
	outline-offset: 0.2rem;
}

/* Header --------------------------------------
Quiet, generous, logo-led: the brand book treats the Cat Chow / Dog
Chow lockup as the key visual attribute, so nothing competes with it. */

#site-header {
	background: var(--header-bg);
}

/* Neutralise the parent's left/right split (logo vs. nav) so the logo
can sit dead-center in the header regardless of whether a nav menu is
assigned — this page is logo-only. */

#site-header .header-inner {
	justify-content: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#site-header .header-titles-wrapper,
body:not(.enable-search-modal) #site-header .header-titles-wrapper {
	justify-content: center;
	text-align: center;
	max-width: 100%;
	margin-right: 0;
	padding-left: 4rem;
}

#site-header .site-logo img {
	max-height: 16.5rem;
}

@media (max-width: 480px) {
	#site-header .site-logo img {
		max-height: 12rem;
	}
}

/* No nav menu on this survey page — drop the hamburger toggle
entirely so the header is just the logo. */

#site-header .nav-toggle,
#site-header .mobile-nav-toggle {
	display: none !important;
}

/* Content card ---------------------------------
The page sits on a soft Chow Blue tint (the brand book's official
"15% on white" swatch), with the survey itself as a white panel —
a quiet nod to the key visual's shield-of-care idea without
reproducing the photography we don't have licensed for the web. */

#site-content {
	background-color: var(--content-bg);
	background-image: url('assets/images/bg.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding: 4rem 1.5rem 6rem;
}

.post-inner {
	max-width: 84rem;
	margin: 0 auto;
	padding: 4rem 5rem 3rem;
	background: var(--paper);
	border-radius: 1.6rem;
	box-shadow: 0 1.5rem 4rem rgba(22, 70, 133, 0.14);
}

@media (max-width: 600px) {
	.post-inner {
		padding: 2.5rem 2rem 2rem;
		border-radius: 1.2rem;
	}
}

/* Gravity Forms -------------------------------- */

.gform_wrapper .gform_heading .gform_title,
.gform_wrapper .gsection .gsection_title {
	border-left: 0.3rem solid var(--chow-blue);
	padding-left: 1.5rem;
	line-height: 1.3;
}

.gform_wrapper .gform_description {
	color: rgba(22, 70, 133, 0.72);
	text-transform: none;
}

.gform_wrapper .gsection {
	border-bottom-color: var(--chow-blue-tint-strong);
	margin-top: 3rem;
	padding-bottom: 0.5rem;
}

.gform_wrapper .gfield_label {
	color: var(--chow-blue);
	text-transform: none;
	font-weight: 400;
}

.gform_wrapper .gfield_required {
	color: var(--error-red);
}

.gform_wrapper .gfield_description {
	color: rgba(22, 70, 133, 0.65);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
	background: var(--paper);
	color: var(--chow-blue);
	border: 0.15rem solid var(--chow-blue-tint-strong);
	border-radius: 0.6rem;
	padding: 1rem 1.2rem;
	transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--chow-blue);
	box-shadow: 0 0 0 0.3rem var(--chow-blue-tint);
	outline: none;
}

.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
	accent-color: var(--chow-blue);
	width: 1.1em;
	height: 1.1em;
}

.gform_wrapper .gfield_radio li label,
.gform_wrapper .gfield_checkbox li label {
	color: var(--chow-blue);
}

/* Buttons: primary action in Chow Blue, "Previous" as a quiet outline
so the eye always lands on the one action that moves the survey on. */

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
	background-color: var(--chow-blue) !important;
	border-color: var(--chow-blue) !important;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 0.6rem !important;
	padding: 1.1rem 2.4rem !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer button[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover {
	background-color: var(--chow-blue-deep) !important;
	border-color: var(--chow-blue-deep) !important;
	color: #fff !important;
}

.gform_wrapper .gform_previous_button {
	background-color: transparent !important;
	border: 0.15rem solid var(--chow-blue) !important;
	color: var(--chow-blue) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 0.6rem !important;
	padding: 1rem 2.2rem !important;
}

.gform_wrapper .gform_previous_button:hover {
	background-color: var(--chow-blue-tint) !important;
}

/* Progress bar */

.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {
	color: var(--chow-blue);
	text-transform: uppercase;
}

.gform_wrapper .gf_progressbar {
	background-color: var(--chow-blue-tint) !important;
	border-radius: 999px;
	overflow: hidden;
}

.gform_wrapper .gf_progressbar_percentage {
	background-color: var(--chow-blue) !important;
	background-image: none !important;
}

/* Validation & confirmation */

.gform_wrapper .validation_error {
	color: var(--error-red);
	border-color: var(--error-red);
	background: rgba(192, 57, 43, 0.06);
	border-radius: 0.6rem;
	text-transform: none;
}

.gform_wrapper li.gfield_error {
	background: rgba(192, 57, 43, 0.05);
	border-top-color: rgba(192, 57, 43, 0.25);
	border-bottom-color: rgba(192, 57, 43, 0.25);
}

.gform_wrapper li.gfield_error input,
.gform_wrapper li.gfield_error textarea,
.gform_wrapper li.gfield_error select {
	border-color: var(--error-red) !important;
}

.gform_wrapper .validation_message {
	color: var(--error-red);
}

.gform_wrapper .gform_confirmation_message {
	color: var(--chow-blue);
	background: var(--chow-blue-tint);
	border-radius: 0.8rem;
	padding: 2rem;
	text-align: center;
}

/* Footer ---------------------------------------
Kept as-is on purpose: this is Purina's own corporate ribbon image,
required at the foot of every Chow key visual (brand book p.3),
and the exact red was specified by the client directly. */

.footer-top-visible .footer-nav-widgets-wrapper,
.footer-top-hidden #site-footer {
	margin-top: 0;
}

#site-footer {
	font-size: 1.8rem;
	padding: 0;
	background: #de2a1b; /* fallback for browsers without CSS Color 4 color() support */
	background: color(srgb 0.8701 0.1644 0.1065);
}

#site-footer .section-inner {
	display: flex;
	justify-content: center;
}

#site-footer .footer-logo {
	display: block;
	width: 100%;
	max-width: 84rem; /* matches .post-inner, the content card's max-width */
	height: auto;
}