/*
Theme Name: Twenty Twenty-Five Sunshine
Theme URI: https://vgs1st.com/
Author: Site Admin
Author URI: https://vgs1st.com/
Description: A pretty golden-yellow child theme of Twenty Twenty-Five, tuned for WooCommerce stores. Warm cream background, sunflower yellow buttons, amber accents and polished product cards.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty25-sunshine
Template: twentytwentyfive
Tags: e-commerce, blog, one-column, custom-colors, full-site-editing, block-patterns
*/

/* =====================================================================
   Sunshine homepage
   ===================================================================== */

/* Sticky header */
.sunshine-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 253, 245, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(138, 109, 18, 0.14);
}

.sunshine-header .wp-block-site-title,
.sunshine-header .wp-block-site-title a {
	color: #261e06;
	font-weight: 800;
}

.sunshine-header .wp-block-navigation a {
	color: #4a3c10;
}

/* Hero */
.sunshine-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #ffc400 0%, #ffe38a 52%, #fff3c4 100%);
}

.sunshine-hero::before,
.sunshine-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.sunshine-hero::before {
	top: -140px;
	left: -120px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), rgba(255, 196, 0, 0) 70%);
}

.sunshine-hero::after {
	bottom: -200px;
	right: -140px;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(255, 145, 0, 0.35), rgba(255, 145, 0, 0) 70%);
}

.sunshine-hero > * {
	position: relative;
	z-index: 1;
}

.sunshine-eyebrow {
	margin-bottom: -0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	font-weight: 700;
	color: #8a6d12;
}

.sunshine-hero-title {
	color: #261e06;
	letter-spacing: -0.03em;
}

.sunshine-hero-sub {
	max-width: 42rem;
	color: #5a4a12;
}

.sunshine-hero .wp-block-button__link {
	box-shadow: 0 10px 24px rgba(38, 30, 6, 0.18);
}

/* Feature cards */
.sunshine-features .wp-block-column {
	background: #ffffff;
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 6px 20px rgba(38, 30, 6, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sunshine-features .wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(38, 30, 6, 0.12);
}

.sunshine-features h3 {
	font-weight: 700;
}

.sunshine-feature-num {
	font-weight: 800;
	color: #ffc400;
}

/* CTA banner */
.sunshine-cta {
	background: #261e06;
}

.sunshine-cta-inner {
	background: #fffdf5;
	border-radius: 28px;
}

.sunshine-cta h2 {
	letter-spacing: -0.03em;
}

.sunshine-cta .has-text-align-center {
	max-width: 38rem;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 782px) {
	.sunshine-hero-title {
		font-size: clamp(2.4rem, 9vw, 3.4rem) !important;
	}

	.sunshine-features .wp-block-column:not(:last-child) {
		margin-bottom: 1.25rem;
	}
}

/* =====================================================================
   Mobile navigation: hamburger that opens a dropdown panel
   (instead of WordPress' fullscreen overlay "frame")
   ===================================================================== */

@media (max-width: 600px) {
	html.has-modal-open {
		overflow: auto !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 68px !important;
		right: 14px !important;
		left: auto !important;
		bottom: auto !important;
		width: min(320px, calc(100vw - 28px)) !important;
		max-height: calc(100dvh - 86px) !important;
		height: auto !important;
		overflow-y: auto !important;
		flex-direction: column !important;
		z-index: 100001 !important;
		padding: 8px !important;
		border: 1px solid rgba(138, 109, 18, 0.15);
		border-radius: 16px !important;
		background: #fffdf5 !important;
		box-shadow: 0 18px 50px rgba(38, 30, 6, 0.28);
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
		padding: 8px 4px 8px 4px !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		padding: 0.6rem 0.9rem !important;
		border-radius: 10px;
		font-weight: 600;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
		background: #fff3c4;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		top: 16px !important;
		right: auto !important;
		left: 16px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #ffe38a;
	}

	/* Hamburger button in the header */
	.sunshine-header
	.wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: #ffe38a;
		transition: background 0.2s ease;
	}

	.sunshine-header
	.wp-block-navigation__responsive-container-open:hover {
		background: #ffc400;
	}
}