/*
	UGG Warehouse landing page styles.
	Deploy target: <child theme>/inc/landing.css (loaded by landing-enqueue.php).
	Every selector is scoped under .ugw-landing so nothing leaks to other
	pages or to WooCommerce templates.
*/

/* Hero */

.ugw-landing .ugw-hero {
	/* Warm dark base, never pure black. Photo: 2026/08 hero-lifestyle upload.
	   Overlay is deliberately light (0.58 to 0.45) so the photo reads; the
	   text-shadow on title/sub carries contrast instead of a heavy wash. */
	background-color: #241a12;
	background-image:
		linear-gradient(rgba(30, 21, 14, 0.58), rgba(30, 21, 14, 0.45)),
		url("https://ugg.website/wp-content/uploads/2026/08/hero-lifestyle.jpg");
	background-size: cover;
	background-position: center;
	color: #f6efe6;
	text-align: center;
	padding: clamp(4rem, 9vw, 7rem) 1.25rem;
	/* Full bleed: relies on the theme's centred container. If a horizontal
	   scrollbar ever appears, change the 50vw values to 50%. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ugw-landing .ugw-hero__inner {
	max-width: 46rem;
	margin: 0 auto;
}

.ugw-landing .ugw-hero__title {
	margin: 0 0 0.6em;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.1;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 2px 16px rgba(20, 12, 7, 0.6);
}

.ugw-landing .ugw-hero__sub {
	margin: 0 auto;
	max-width: 34rem;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.5;
	color: #f6efe6;
	text-shadow: 0 1px 10px rgba(20, 12, 7, 0.55);
}

.ugw-landing .ugw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.9rem;
}

/* Buttons */

.ugw-landing .ugw-btn {
	display: inline-block;
	padding: 0.85rem 1.9rem;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ugw-landing .ugw-btn--primary {
	background-color: #c99a6b;
	color: #2b1a0e;
}

.ugw-landing .ugw-btn--primary:hover,
.ugw-landing .ugw-btn--primary:focus {
	background-color: #b9875a;
	color: #2b1a0e;
}

.ugw-landing .ugw-btn--ghost {
	border: 1px solid rgba(246, 239, 230, 0.85);
	color: #f6efe6;
}

.ugw-landing .ugw-btn--ghost:hover,
.ugw-landing .ugw-btn--ghost:focus {
	background-color: rgba(246, 239, 230, 0.14);
	border-color: #f6efe6;
	color: #ffffff;
}

/* Section headings */

.ugw-landing .ugw-section {
	padding: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.ugw-landing .ugw-section__title {
	margin: 0 0 1.6rem;
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.2;
	font-weight: 700;
	color: #2e2118;
}

.ugw-landing .ugw-section__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: 0.7rem auto 0;
	border-radius: 2px;
	background-color: #c99a6b;
}

/* Category tiles */

.ugw-landing .ugw-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

/* Defensive: if wpautop ever injects stray p or br inside the tiles
   again, they must not render as gaps or extra boxes. The tiles
   themselves contain no p or br elements. */
.ugw-landing .ugw-cats p,
.ugw-landing .ugw-cats br {
	display: none;
}

.ugw-landing .ugw-cats img {
	display: block;
}

.ugw-landing .ugw-cat {
	display: flex;
	flex-direction: column;
	background-color: #f7f1e8;
	border: 1px solid #e6d9c6;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ugw-landing .ugw-cat:hover,
.ugw-landing .ugw-cat:focus {
	border-color: #c99a6b;
	box-shadow: 0 10px 24px rgba(46, 33, 24, 0.08);
	transform: translateY(-3px);
}

/* Real photo per tile; cover crop holds every shot at the same height. */

.ugw-landing .ugw-cat__img {
	display: block;
	width: 100%;
	height: 12rem;
	object-fit: cover;
	object-position: 20% center;
	background-color: #e6d9c6;
	transition: transform 0.3s ease;
}

.ugw-landing .ugw-cat:hover .ugw-cat__img,
.ugw-landing .ugw-cat:focus .ugw-cat__img {
	transform: scale(1.04);
}

.ugw-landing .ugw-cat__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding: 1.15rem 1.3rem 1.25rem;
}

.ugw-landing .ugw-cat__name {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	font-weight: 700;
	color: #2e2118;
}

.ugw-landing .ugw-cat__cta {
	font-size: 0.95rem;
	font-weight: 600;
	color: #8a5a2e;
	white-space: nowrap;
}

.ugw-landing .ugw-cat:hover .ugw-cat__cta,
.ugw-landing .ugw-cat:focus .ugw-cat__cta {
	text-decoration: underline;
}

/* Why shop with us strip */

.ugw-landing .ugw-why {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
	background-color: #f3ece1;
	border-radius: 8px;
}

.ugw-landing .ugw-why__title {
	margin: 0 0 1.4rem;
	text-align: center;
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
	line-height: 1.2;
	font-weight: 700;
	color: #2e2118;
}

.ugw-landing .ugw-why__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ugw-landing .ugw-why__list li {
	position: relative;
	margin: 0;
	padding-left: 1.8rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #4a382a;
}

.ugw-landing .ugw-why__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #8a5a2e;
}

/* Focus and motion */

.ugw-landing a:focus-visible {
	outline: 2px solid #c99a6b;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ugw-landing *,
	.ugw-landing *::before, .ugw-landing *::after {
		transition: none;
	}
}

/* Responsive: tiles 4-up desktop, 2-up tablet, 1-up phone */

@media (max-width: 1024px) {
	.ugw-landing .ugw-cats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ugw-landing .ugw-cats,
	.ugw-landing .ugw-why__list {
		grid-template-columns: 1fr;
	}

	.ugw-landing .ugw-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ugw-landing .ugw-btn {
		text-align: center;
	}
}

/* Hide the theme title banner on the landing page; the hero below carries the H1. */
body.home #static_header_banner { display: none; }