/* =========================================================
   PIKRAVETKA MOBILE FIX v1.0
   Global responsive cleanup
   ========================================================= */

/* ---------- GLOBAL SAFETY ---------- */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

input,
select,
textarea,
button {
	max-width: 100%;
}

table {
	max-width: 100%;
}

/*
 * Keep desktop behavior intact.
 * Most strong fixes only activate below 900px.
 */


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

	html,
	body,
	#page,
	.site,
	.site-container,
	.content-container,
	.site-main,
	.content-area,
	.entry-content,
	.entry,
	.wp-site-blocks {
		width: 100% !important;
		max-width: 100% !important;
	}

	body {
		overflow-x: hidden !important;
	}

	/* Never allow a child to force the entire page wider. */
	.site *,
	.entry-content * {
		min-width: 0;
	}

	/* Common Kadence / Gutenberg wrappers */
	.kt-row-column-wrap,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-columns,
	.wp-block-column,
	.wp-block-kadence-rowlayout,
	.kt-inside-inner-col,
	.kb-row-layout-wrap {
		max-width: 100% !important;
	}

	/* Desktop viewport-width tricks must not survive on mobile. */
	.entry-content [style*="100vw"],
	.entry-content [style*="translateX"],
	.entry-content [style*="margin-left: 50%"] {
		max-width: 100% !important;
	}

	/* Default mobile content gutters */
	.site-main,
	.content-area {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.entry-content > *:not(.alignfull):not(.alignwide),
	.entry-header > * {
		max-width: calc(100vw - 32px);
		margin-left: auto;
		margin-right: auto;
	}

	.alignwide,
	.alignfull {
		max-width: 100% !important;
	}

	.alignwide {
		width: calc(100% - 32px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.alignfull {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ---------- TYPOGRAPHY ---------- */

	body {
		font-size: 16px;
		line-height: 1.55;
	}

	h1,
	.entry-title {
		font-size: clamp(30px, 8vw, 36px) !important;
		line-height: 1.1 !important;
		overflow-wrap: anywhere;
	}

	h2 {
		font-size: clamp(24px, 6.5vw, 29px) !important;
		line-height: 1.15 !important;
	}

	h3 {
		font-size: clamp(19px, 5.3vw, 23px) !important;
		line-height: 1.2 !important;
	}

	p,
	li {
		overflow-wrap: anywhere;
	}

	/* ---------- HEADER ---------- */

	.site-header,
	.site-header-wrap,
	.site-header-row-container-inner,
	.site-header-row-container-inner > .site-container,
	.site-header-row {
		max-width: 100% !important;
		overflow: visible !important;
	}

	.site-header-row-container-inner > .site-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.site-branding,
	.site-branding a,
	.site-branding-container {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.site-branding .site-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.custom-logo,
	.site-logo img {
		max-height: 74px !important;
		width: auto !important;
	}

	.header-navigation,
	.main-navigation {
		max-width: 100% !important;
	}

	/* ---------- HERO / HOMEPAGE ---------- */

	.home .entry-content > .wp-block-group,
	.home .entry-content > .kb-row-layout-wrap,
	.home .entry-content > .wp-block-cover,
	.home .entry-content > section {
		max-width: 100%;
	}

	/* If the hero uses an inner container, center the whole block in viewport. */
	.home .entry-content .kt-row-column-wrap,
	.home .entry-content .wp-block-cover__inner-container,
	.home .entry-content .wp-block-group__inner-container {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Search / CTA rows must shrink instead of overflowing */
	.home form,
	.home .wp-block-search,
	.home .search-form {
		width: 100%;
		max-width: 100%;
	}

	.home input[type="search"],
	.home input[type="text"] {
		min-width: 0;
	}

	.wp-block-search__inside-wrapper,
	.search-form {
		display: flex;
		width: 100% !important;
		max-width: 100% !important;
	}

	.wp-block-search__inside-wrapper input,
	.search-form input {
		flex: 1 1 auto;
		min-width: 0 !important;
		width: auto !important;
	}

	.wp-block-search__button,
	.search-submit {
		flex: 0 0 auto;
	}

	/* ---------- COLUMNS / CARDS ---------- */

	.wp-block-columns {
		gap: 16px !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* ---------- ARTICLE / SINGLE POST ---------- */

	.single-post .entry-content,
	.single-post .entry-content > * {
		max-width: 100%;
	}

	.single-post .pea-article-layout {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		transform: none !important;
	}

	.single-post .pea-article-layout__toc,
	.single-post .pea-article-layout__content {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.single-post .pea-auto-toc {
		position: relative !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* ---------- PORTAL SECTIONS ---------- */

	.pea-portal-section {
		width: calc(100% - 24px) !important;
		max-width: calc(100% - 24px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.pea-portal-tabs-shell,
	.pea-portal-articles-shell {
		width: 100%;
		max-width: 100%;
	}

	.pea-portal-tabs,
	.pea-portal-section__content,
	.pea-portal-cards {
		min-width: 0;
		max-width: 100%;
	}

	.pea-portal-card {
		min-width: 0;
	}

	/* ---------- FORMS ---------- */

	form,
	.wpcf7,
	.wpforms-container,
	.gform_wrapper {
		max-width: 100%;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	select,
	textarea {
		width: 100%;
		max-width: 100%;
	}

	/* ---------- TABLES ---------- */

	.entry-content table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- DIRECTORY ---------- */

	.pkdir-featured-grid,
	.pkdir-pricing-grid {
		grid-template-columns: 1fr !important;
	}

	.pkdir-promo-card {
		grid-template-columns: 1fr !important;
	}

	.pkdir-search,
	.pkdir-search-form,
	.pkdir-directory-grid,
	.pkdir-provider-grid,
	.pkdir-provider-list {
		max-width: 100% !important;
	}

	/* ---------- VET / WEATHER ---------- */

	.pvet-grid,
	.pvet-layout,
	.pvet-qa-grid,
	.pikravetka-weather,
	.pikravetka-pet-weather,
	.pk-weather-card {
		max-width: 100% !important;
	}

	/* ---------- PREVENT ACCIDENTAL OFFSCREEN POSITIONING ---------- */

	.entry-content [class*="absolute"],
	.entry-content [class*="translate"] {
		max-width: 100%;
	}
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 600px) {

	.entry-content > *:not(.alignfull):not(.alignwide),
	.entry-header > * {
		max-width: calc(100vw - 28px);
	}

	.alignwide {
		width: calc(100% - 28px) !important;
	}

	.site-header-row-container-inner > .site-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.custom-logo,
	.site-logo img {
		max-height: 64px !important;
	}

	.site-branding .site-title {
		font-size: 22px !important;
	}

	/* Homepage spacing */
	.home .entry-content > * {
		margin-top: 0;
	}

	.home .wp-block-group,
	.home .kb-row-layout-wrap {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Buttons should not force the row wider */
	.wp-block-button,
	.wp-block-button__link,
	button,
	.button {
		max-width: 100%;
	}

	/* Portal sections a little tighter */
	.pea-portal-section {
		width: calc(100% - 16px) !important;
		max-width: calc(100% - 16px) !important;
	}

	.pea-portal-section__title-row h2 {
		font-size: 24px !important;
	}

	.pea-portal-card h3 {
		font-size: 15px !important;
	}
}


/* =========================================================
   EXTRA SMALL
   ========================================================= */

@media (max-width: 420px) {

	body {
		font-size: 15px;
	}

	.site-branding .site-title {
		font-size: 20px !important;
	}

	h1,
	.entry-title {
		font-size: 30px !important;
	}

	.entry-content > *:not(.alignfull):not(.alignwide),
	.entry-header > * {
		max-width: calc(100vw - 24px);
	}
}