/* ==========================================================================
   Glevv — responsive tuning (desktop / tablet / mobile)
   Loaded via mu-plugin so it survives theme & plugin updates.
   Breakpoints: 1024px (small desktop), 921px (Astra tablet), 782px (WP blocks),
                600px (large phone), 480px (small phone)
   ========================================================================== */

/* ---------- 1. Global safety ---------- */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

body {
	overflow-x: hidden;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- 2. Fluid typography (replaces the hard-coded inline sizes) ---------- */
/* base headline for every page */
.entry-content h1.wp-block-heading {
	font-size: clamp(1.6rem, 4.2vw, 2.9rem);
	line-height: 1.24;
	letter-spacing: -0.01em;
}

/* HOME hero headline — a long two-line sentence, so a touch smaller and tighter */
.entry-content .wp-block-cover[style*="min-height:560px"] h1,
.entry-content .wp-block-cover[style*="min-height:560px"] h1.wp-block-heading {
	font-size: clamp(1.45rem, 3.3vw, 2.6rem);
	line-height: 1.28;
	letter-spacing: -0.012em;
	max-width: 26ch;
	margin: 0 auto 0.85rem;
	text-align: center;
}

/* INNER-PAGE banner headline — one or two words, so it can carry more weight */
.entry-content .wp-block-cover[style*="min-height:320px"] h1,
.entry-content .wp-block-cover[style*="min-height:260px"] h1,
.entry-content .wp-block-cover[style*="min-height:240px"] h1 {
	font-size: clamp(1.8rem, 4.4vw, 3.05rem);
	line-height: 1.18;
	letter-spacing: 0.005em;
	margin: 0 auto 0.6rem;
	text-align: center;
}

/* every sub-heading line that sits under a banner / hero headline */
/* px units on purpose: Astra shrinks the root font-size below 921px,
   so rem-based minimums would collapse on tablet / phone */
.entry-content .wp-block-cover .wp-block-cover__inner-container > p {
	font-size: clamp(14px, 1.5vw, 18px) !important;
	line-height: 1.62;
	max-width: 66ch;
	margin: 0 auto 1.5rem;
	opacity: 0.95;
	text-align: center;
}

/* the very last paragraph inside a cover CTA carries no trailing gap */
.entry-content .wp-block-cover .wp-block-cover__inner-container > p:last-child {
	margin-bottom: 0;
}

.entry-content h2 {
	font-size: clamp(1.35rem, 2.9vw, 2rem);
	line-height: 1.3;
}

.entry-content h3 {
	font-size: clamp(1.05rem, 2.1vw, 1.5rem);
}

/* ---------- 2b. Vertical rhythm: the inline "margin-top:3rem" was too airy on phones ---------- */
.entry-content h2 {
	margin-top: clamp(1.7rem, 3.2vw, 2.9rem) !important;
}

.entry-content h2 + p {
	margin-top: -0.4rem;
}

@media (max-width: 600px) {

	.entry-content h2 {
		margin-top: 1.55rem !important;
	}

	/* hero headline: smaller, but never a one-word-per-line sliver */
	.entry-content .wp-block-cover[style*="min-height:560px"] h1,
	.entry-content .wp-block-cover[style*="min-height:560px"] h1.wp-block-heading {
		font-size: clamp(21px, 5.9vw, 27px);
		line-height: 1.3;
		max-width: 100%;
		margin-bottom: 0.6rem;
	}

	.entry-content .wp-block-cover .wp-block-cover__inner-container > p {
		font-size: 14px !important;
		line-height: 1.55;
		margin-bottom: 1.1rem;
	}
}

@media (max-width: 420px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] h1,
	.entry-content .wp-block-cover[style*="min-height:560px"] h1.wp-block-heading {
		font-size: 21px;
	}
}

/* ---------- 17. Hero buttons: centre them under the centred hero copy ---------- */
.entry-content .wp-block-cover .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 600px) {

	/* full-width stacked buttons are already centred; keep spacing tight */
	.entry-content .wp-block-cover .wp-block-buttons {
		gap: 0.6rem;
	}
}

/* ---------- 3. Cover / hero blocks ---------- */
@media (max-width: 921px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] {
		min-height: 430px !important;
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.entry-content .wp-block-cover[style*="min-height:320px"] {
		min-height: 260px !important;
	}

	.entry-content .wp-block-cover[style*="min-height:260px"],
	.entry-content .wp-block-cover[style*="min-height:240px"] {
		min-height: 200px !important;
		padding-top: 2.4rem !important;
		padding-bottom: 2.4rem !important;
	}

	.entry-content .wp-block-cover[style*="padding-top:6rem"] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.entry-content .wp-block-cover[style*="padding-top:4rem"] {
		padding-top: 2.4rem !important;
		padding-bottom: 2.4rem !important;
	}
}

@media (max-width: 600px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] {
		min-height: 360px !important;
		padding-top: 2.2rem !important;
		padding-bottom: 2.2rem !important;
	}

	.entry-content .wp-block-cover[style*="min-height:320px"] {
		min-height: 210px !important;
	}

	.entry-content .wp-block-cover[style*="min-height:260px"],
	.entry-content .wp-block-cover[style*="min-height:240px"] {
		min-height: 170px !important;
		padding-top: 1.8rem !important;
		padding-bottom: 1.8rem !important;
	}

	/* keep the hero text off the very edge of the image */
	.entry-content .wp-block-cover .wp-block-cover__inner-container {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

}

/* ---------- 4. Columns ---------- */
@media (max-width: 921px) {

	.entry-content .wp-block-columns {
		gap: 1.1rem !important;
	}
}

@media (max-width: 782px) {

	.entry-content .wp-block-columns {
		flex-wrap: wrap !important;
		margin-bottom: 1.2rem;
	}

	.entry-content .wp-block-column {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}

	/* cards built as cover blocks inside columns */
	.entry-content .wp-block-column .wp-block-cover {
		margin-bottom: 0;
	}
}

/* ---------- 5. Buttons ---------- */
@media (max-width: 600px) {

	.entry-content .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.entry-content .wp-block-buttons .wp-block-button {
		width: 100%;
		margin: 0;
	}

	.entry-content .wp-block-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
		padding: 0.75rem 1rem;
	}
}

/* ---------- 6. Forms (B2B inquiry form built with inline flex) ---------- */
.b2b-inquiry-form {
	max-width: 100% !important;
}

@media (max-width: 600px) {

	.b2b-inquiry-form div[style*="display:flex"],
	.b2b-inquiry-form div[style*="display: flex"] {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.b2b-inquiry-form div[style*="flex:1"],
	.b2b-inquiry-form div[style*="flex: 1"] {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.b2b-inquiry-form input,
	.b2b-inquiry-form textarea,
	.b2b-inquiry-form select {
		width: 100% !important;
		box-sizing: border-box;
	}

	.b2b-inquiry-form button,
	.b2b-inquiry-form input[type="submit"] {
		width: 100%;
	}
}

/* ---------- 7. Tables ---------- */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 782px) {

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

/* ---------- 8. WooCommerce listings ---------- */
@media (max-width: 921px) {

	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem;
	}

	.woocommerce ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
}

@media (max-width: 520px) {

	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
	}
}

/* ---------- 9. Header / footer fine tuning ---------- */
@media (max-width: 600px) {

	.site-footer,
	.ast-footer-copyright {
		text-align: center;
	}

	.ast-container {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}
}

/* ---------- 10. Category / feature cards: equal image height so rows align ---------- */
.entry-content .wp-block-column .wp-block-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

@media (max-width: 921px) {
	.entry-content .wp-block-column .wp-block-image img { height: 220px; }
}

@media (max-width: 600px) {
	.entry-content .wp-block-column .wp-block-image img { height: 200px; }
}

/* ---------- 11. Four-column rows: 2 x 2 on tablets instead of 4 squeezed columns ---------- */
@media (max-width: 921px) and (min-width: 601px) {

	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
		flex-wrap: wrap !important;
	}

	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
		flex: 1 1 calc(50% - 0.6rem) !important;
		min-width: 260px;
	}
}

/* ---------- 12. Hero outline button: make it readable on photos ---------- */
.entry-content .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
	color: #ffffff !important;
	background-color: transparent !important;
	border: 2px solid #ffffff !important;
}

.entry-content .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.18) !important;
}

/* ---------- 13. Text shadow on cover text for readability over photos ---------- */
.entry-content .wp-block-cover .wp-block-cover__inner-container h1,
.entry-content .wp-block-cover .wp-block-cover__inner-container h2,
.entry-content .wp-block-cover .wp-block-cover__inner-container h3,
.entry-content .wp-block-cover .wp-block-cover__inner-container p {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* ---------- 14. Home hero: slightly brighter ---------- */
.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__image-background {
	filter: brightness(1.16) saturate(1.06);
}

.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__background {
	opacity: 0.28 !important;
}

/* ---------- 15. Mobile hero: shorter, dog fully visible, framed right of centre ---------- */
@media (max-width: 600px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] {
		min-height: 300px !important;
	}

	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__image-background {
		object-position: 72% center;
	}
}

@media (max-width: 420px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] {
		min-height: 270px !important;
	}
}

/* ---------- 18. Home hero: copy anchored LEFT, dog stays visible on the right —
   same composition on desktop / tablet / phone ---------- */
.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 620px;
	margin: 0 auto 0 0;
	padding-left: clamp(0.75rem, 5vw, 5.5rem);
	text-align: left;
}

.entry-content .wp-block-cover[style*="min-height:560px"] h1,
.entry-content .wp-block-cover[style*="min-height:560px"] h1.wp-block-heading {
	text-align: left;
	margin-left: 0;
	max-width: 24ch;
}

.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__inner-container > p {
	text-align: left;
	margin-left: 0;
	max-width: 50ch;
}

.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-buttons {
	justify-content: flex-start;
}

/* keep the dog clear of the copy on tablets too */
@media (max-width: 921px) {

	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__image-background {
		object-position: 45% center;
	}
}

@media (max-width: 600px) {

	/* stacked buttons: auto width, left aligned, so they never reach the dog */
	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-button,
	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-button__link {
		width: auto;
	}

	/* dog framed right, fully visible beside the left copy */
	.entry-content .wp-block-cover[style*="min-height:560px"] .wp-block-cover__image-background {
		object-position: 55% center;
	}
}

/* ---------- 16. Every piece of copy sitting on an image is white ---------- */
.entry-content .wp-block-cover .wp-block-cover__inner-container,
.entry-content .wp-block-cover .wp-block-cover__inner-container h1,
.entry-content .wp-block-cover .wp-block-cover__inner-container h2,
.entry-content .wp-block-cover .wp-block-cover__inner-container h3,
.entry-content .wp-block-cover .wp-block-cover__inner-container h4,
.entry-content .wp-block-cover .wp-block-cover__inner-container h5,
.entry-content .wp-block-cover .wp-block-cover__inner-container h6,
.entry-content .wp-block-cover .wp-block-cover__inner-container p,
.entry-content .wp-block-cover .wp-block-cover__inner-container li,
.entry-content .wp-block-cover .wp-block-cover__inner-container span,
.entry-content .wp-block-cover .wp-block-cover__inner-container strong,
.entry-content .wp-block-cover .wp-block-cover__inner-container em,
.entry-content .wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link) {
	color: #ffffff !important;
}

/* ---------- 17. Header site title: never wrap next to the logo ---------- */
/* keep the brand name on a single line at every viewport */
.site-title,
.site-title a,
.site-branding .site-title a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* below the desktop breakpoint the title shares one row with logo + toggle:
   scale it down fluidly so "Glevv Pet Supplies Wholesale" fits on one line */
@media (max-width: 921px) {
	.site-title,
	.site-title a {
		font-size: clamp(14px, 4.1vw, 22px) !important;
		line-height: 1.15 !important;
	}
	.site-branding {
		max-width: calc(100% - 120px);
	}
	/* long translated brand names must be truncated, never push the toggle out */
	.ast-site-title-wrap,
	.site-branding,
	.ast-site-identity {
		min-width: 0;
	}
	.site-title a {
		display: block;
		max-width: 100%;
	}
}

@media (max-width: 420px) {
	.site-title,
	.site-title a {
		font-size: clamp(13px, 3.9vw, 16px) !important;
	}
}

/* long translated brand names (e.g. Spanish) must never push the hamburger
   toggle off-screen: cap the branding and let the ellipsis truncate */
@media (max-width: 600px) {
	.site-branding {
		max-width: calc(100vw - 200px) !important;
	}
	.site-title,
	.site-title a {
		max-width: 100%;
	}
}