/*
Theme Name: Cheetah Chews
Theme URI: https://www.cheetahchews.com
Author: Cascade
Description: Custom WordPress theme for Cheetah Energy Chews - Natural energy chews for clean focus.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cheetah-chews
Tags: e-commerce, woocommerce, block-patterns, full-site-editing

Cheetah Energy Chews - No Sugar, No Crash
*/

/* Hero section - contained within viewport */
.hero-section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	overflow-x: hidden !important;
}

.hero-section > .wp-block-columns {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

.hero-section .wp-block-column {
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
}

.hero-section .hero-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 85vh;
	padding: 4rem 3rem 4rem 4rem !important;
}

.hero-section .hero-image {
	padding: 0 !important;
}

.hero-section .wp-block-cover {
	min-height: 85vh !important;
}

.hero-section .wp-block-cover img {
	object-fit: cover;
	object-position: center;
}

/* Header - push nav to far right */
.site-header {
	padding: 15px 50px !important;
}

.site-header .wp-block-navigation {
	margin-left: auto !important;
}

.site-header .wp-block-navigation__container {
	gap: 30px !important;
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

/* CRITICAL: Prevent horizontal overflow on ALL devices */
html {
	overflow-x: hidden !important;
	max-width: 100vw !important;
	width: 100% !important;
}

body {
	overflow-x: hidden !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Force all major containers to stay within viewport */
.wp-site-blocks,
.wp-block-group,
.wp-block-template-part,
main,
header,
footer,
section,
article,
div {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Prevent any element from causing horizontal scroll */
img, video, iframe, embed, object {
	max-width: 100% !important;
	height: auto !important;
}

/* Fix 100vw causing horizontal scroll (scrollbar width issue) */
.hero-wrapper,
.hero-section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure all content stays within viewport */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Global text containment */
p, h1, h2, h3, h4, h5, h6, span, a, li {
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ========================================
   MOBILE BREAKPOINT (768px and below)
   ======================================== */
@media (max-width: 768px) {
	/* Reduce all horizontal padding */
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	
	/* Stack columns on mobile */
	.wp-block-columns {
		flex-direction: column !important;
		gap: 20px !important;
	}
	
	.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Card containment - prevent overflow */
	.wp-block-column,
	.benefit-card,
	.testimonial-card,
	.product-card {
		max-width: 100% !important;
		overflow: hidden !important;
	}
	
	/* Reduce section padding on mobile */
	.benefits-section,
	.products-section,
	.testimonials-section,
	.cta-section {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	
	/* Typography scaling for mobile */
	h1, .wp-block-heading[style*="gigantic"] {
		font-size: 2rem !important;
		line-height: 1.2 !important;
	}
	
	h2, .wp-block-heading[style*="huge"] {
		font-size: 1.75rem !important;
	}
	
	h3 {
		font-size: 1.25rem !important;
	}
	
	/* Button full width on mobile */
	.wp-block-button__link {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
	}
	
	.wp-block-buttons {
		width: 100% !important;
	}
	
	.wp-block-button {
		width: 100% !important;
	}
	
	/* Form inputs full width */
	input[type="email"],
	input[type="text"],
	button[type="submit"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ========================================
   SMALL MOBILE (480px and below - iPhone)
   ======================================== */
@media (max-width: 480px) {
	/* Even tighter padding for small screens */
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	
	/* Smaller card padding */
	.wp-block-column[style*="padding"] {
		padding: 1.25rem !important;
	}
	
	/* Smaller typography */
	h1 {
		font-size: 1.75rem !important;
	}
	
	h2 {
		font-size: 1.5rem !important;
	}
	
	p {
		font-size: 0.9rem !important;
	}
	
	/* Reduce emoji/icon size */
	.benefit-icon {
		font-size: 2rem !important;
	}
}

/* ========================================
   SPACING COMPACT LAYER
   Reduces vertical white space ~25-40% desktop, ~10-20% mobile
   Does NOT change: fonts, colors, brand, layout structure
   
   TO DISABLE THIS LAYER:
   Comment out everything between START and END markers
   ======================================== */

/* === START SPACING COMPACT LAYER === */

/* --- SECTION PADDING (Desktop) --- */
/* Reduced from ~80px to ~50px vertical (~35% reduction) */
.benefits-section,
.products-section,
.testimonials-section,
.cta-section,
.ingredients-section,
.about-section,
.contact-section {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

/* Generic WP groups - exclude styled background sections */
section.wp-block-group:not(.has-background) {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

/* --- HERO ADJUSTMENTS --- */
/* Reduce hero height from 85vh to 60vh (~29% total reduction) */
/* History: 85vh → 70vh → 65vh → 60vh */
.hero-section .hero-content {
	min-height: 60vh !important;
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
}

.hero-section .wp-block-cover {
	min-height: 60vh !important;
}

/* Tighten CTA proximity to headline (~40% reduction) */
.hero-section .wp-block-buttons {
	margin-top: 1.5rem !important;
}

/* --- TYPOGRAPHY SPACING --- */
/* Reduce heading margins ~25% */
h1, .wp-block-heading[style*="gigantic"] {
	margin-bottom: 0.75rem !important;
}

h2, .wp-block-heading[style*="huge"] {
	margin-bottom: 0.6rem !important;
}

h3 {
	margin-bottom: 0.5rem !important;
}

p {
	margin-bottom: 0.875rem !important;
}

/* --- CARD/GRID GAPS --- */
/* Reduce gaps from ~30-40px to ~20px (~35% reduction) */
.wp-block-columns:not(.hero-section .wp-block-columns) {
	gap: 20px !important;
}

.product-grid,
.benefits-grid,
.testimonials-grid {
	gap: 20px !important;
}

.product-card,
.benefit-card,
.testimonial-card {
	padding: 1.25rem !important;
}

/* --- FOOTER --- */
/* Reduce footer padding ~35% */
footer,
.site-footer,
.wp-block-template-part[data-area="footer"] {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

/* --- MOBILE SPACING COMPACT (10-20% reduction) --- */
@media (max-width: 768px) {
	/* Section padding: reduce modestly */
	.benefits-section,
	.products-section,
	.testimonials-section,
	.cta-section,
	.ingredients-section {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	section.wp-block-group:not(.has-background) {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	/* Hero: slightly shorter, auto height */
	.hero-section .hero-content,
	.hero-section .wp-block-cover {
		min-height: auto !important;
	}

	/* Typography: modest margin reduction */
	h1, .wp-block-heading[style*="gigantic"] {
		margin-bottom: 0.6rem !important;
	}

	h2, .wp-block-heading[style*="huge"] {
		margin-bottom: 0.5rem !important;
	}

	p {
		margin-bottom: 0.75rem !important;
	}

	/* Cards: maintain touch clarity */
	.product-card,
	.benefit-card {
		padding: 1rem !important;
	}

	/* Footer: modest reduction */
	footer,
	.site-footer {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

@media (max-width: 480px) {
	/* Small mobile: minimal additional reduction */
	.benefits-section,
	.products-section,
	.testimonials-section,
	.cta-section,
	.ingredients-section {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	section.wp-block-group:not(.has-background) {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
}

/* === END SPACING COMPACT LAYER === */