/*
Theme Name: VV — Virginia Della Valentina
Theme URI: https://virdelvalentina.be
Author: Virginia Della Valentina
Description: Block theme (Site Editor) for virdelvalentina.be. Brand tokens live in theme.json (palette, fonts, spacing, shadows, gradients); reusable section looks are block styles (Styles panel) and block patterns (inserter). This stylesheet only carries chrome the block inspector cannot express: fixed header, nav underline, hero orbs/text-shadow, card hover, list bullets.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.1
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: vv
*/

/* =========================================================================
   Keyframes (single owner)
   ========================================================================= */
@keyframes vv-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes vv-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-30px, 30px) rotate(5deg); } }

/* =========================================================================
   Header (template part) — fixed, translucent, slide-down.
   Background/padding/colors remain inspector-editable (palette classes win).
   ========================================================================= */
.vv-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fdfcf9;
	/* opaque: header is fixed over the hero, a translucent bg let the photo bleed through on scroll */
	/* no backdrop-filter: it would become the containing block of the fixed mobile-menu overlay */
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
	animation: vv-slide-down 0.6s ease;
}
.vv-site-header .wp-block-site-title { white-space: nowrap; flex-shrink: 0; }
.vv-site-header .wp-block-site-title a { text-decoration: none; }
.vv-site-header .wp-block-navigation__container { flex-wrap: nowrap; }
.vv-site-header .wp-block-navigation-item__content { position: relative; text-decoration: none; white-space: nowrap; }
.vv-site-header .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--accent-terracotta);
	transition: width 0.3s ease;
}
.vv-site-header .wp-block-navigation-item__content:hover::after { width: 100%; }

/* =========================================================================
   Hero — block style on core/cover ("Héro de page").
   Photo = the Cover image (Replace in the toolbar); tint = Cover overlay
   gradient (Voile crème / sauge / sable / or / bruyère); text color = Cover
   text color. Only the orbs, shadows and paragraph measure live here.
   ========================================================================= */
.wp-block-cover.is-style-vv-hero { text-align: center; }
.wp-block-cover.is-style-vv-hero .wp-block-cover__background::before,
.wp-block-cover.is-style-vv-hero .wp-block-cover__background::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	animation: vv-float 15s ease-in-out infinite;
	pointer-events: none;
}
.wp-block-cover.is-style-vv-hero .wp-block-cover__background::before {
	top: 20%; left: 10%; width: 400px; height: 400px;
	background: radial-gradient(circle, var(--vv-orb-a, rgba(97, 113, 89, 0.1)) 0%, transparent 70%);
}
.wp-block-cover.is-style-vv-hero .wp-block-cover__background::after {
	bottom: 20%; right: 10%; width: 350px; height: 350px;
	animation-direction: reverse; animation-duration: 18s;
	background: radial-gradient(circle, var(--vv-orb-b, rgba(166, 87, 56, 0.1)) 0%, transparent 70%);
}
.wp-block-cover.is-style-vv-hero.has-veil-gold-gradient-background,
.wp-block-cover.is-style-vv-hero .has-veil-gold-gradient-background { --vv-orb-a: rgba(98, 113, 88, 0.1); --vv-orb-b: rgba(130, 106, 28, 0.1); }
.wp-block-cover.is-style-vv-hero .has-veil-sage-gradient-background { --vv-orb-a: rgba(97, 113, 89, 0.2); }
.wp-block-cover.is-style-vv-hero .has-veil-mint-gradient-background { --vv-orb-a: rgba(97, 113, 89, 0.15); }
.wp-block-cover.is-style-vv-hero h1 { text-shadow: 0 2px 20px rgba(255, 255, 255, 0.9); }
.wp-block-cover.is-style-vv-hero p { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9); }
.wp-block-cover.is-style-vv-hero:not(.is-light) h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
.wp-block-cover.is-style-vv-hero:not(.is-light) p { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.wp-block-cover.is-style-vv-hero .wp-block-cover__inner-container > p:not(.is-style-vv-breadcrumb) {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.95;
}
/* Breadcrumb — block style on core/paragraph */
p.is-style-vv-breadcrumb { display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; }
p.is-style-vv-breadcrumb a { text-decoration: none; transition: color 0.3s ease; color: inherit; }
p.is-style-vv-breadcrumb a:hover { color: var(--wp--preset--color--accent-terracotta); }

/* =========================================================================
   Cards — block styles on core/group and core/column
   ========================================================================= */
.is-style-vv-card,
.is-style-vv-panel,
.is-style-vv-option-card {
	background: var(--wp--preset--color--white);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--card);
}
.is-style-vv-card { padding: 4rem 3.5rem; }
.is-style-vv-card p { opacity: 0.9; }
.is-style-vv-option-card > p:not(.is-style-vv-pill):not(.is-style-vv-price) { opacity: 0.85; }
.is-style-vv-panel { padding: 3rem; box-shadow: var(--wp--preset--shadow--soft); }
.is-style-vv-option-card {
	padding: 3.5rem 3rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.is-style-vv-option-card::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-sage), var(--wp--preset--color--accent-terracotta));
	opacity: 0;
	transition: opacity 0.4s ease;
}
.is-style-vv-option-card:hover { transform: translateY(-8px); box-shadow: var(--wp--preset--shadow--lift); }
.is-style-vv-option-card:hover::before { opacity: 1; }
.is-style-vv-option-card > :last-child { margin-top: auto; padding-top: 1rem; }

/* =========================================================================
   Text accents — block styles on core/paragraph
   ========================================================================= */
p.is-style-vv-pill {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 0.5rem 1.2rem;
	background: var(--wp--preset--color--primary-sage);
	color: var(--wp--preset--color--white);
	border-radius: 30px;
	font-size: 0.85rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
p.is-style-vv-price {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-terracotta);
}
p.is-style-vv-bank {
	background: var(--wp--preset--color--primary-sage);
	color: var(--wp--preset--color--white);
	padding: 1.5rem;
	border-radius: 5px;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* =========================================================================
   Lists — block styles on core/list
   ========================================================================= */
ul.is-style-vv-check-list { list-style: none; padding-left: 0; }
ul.is-style-vv-check-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.8rem; opacity: 0.85; }
ul.is-style-vv-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--wp--preset--color--primary-sage); font-weight: bold; }

ul.is-style-vv-dot-list { list-style: none; padding-left: 0; margin-left: 1rem; }
ul.is-style-vv-dot-list li { font-size: 1.05rem; line-height: 1.8; opacity: 0.85; margin-bottom: 1rem; }
ul.is-style-vv-dot-list li::before { content: '•'; color: var(--wp--preset--color--accent-terracotta); font-weight: bold; display: inline-block; width: 1.5rem; margin-left: -1.5rem; }

ul.is-style-vv-tile-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}
ul.is-style-vv-tile-list li {
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--secondary-cream);
	border-radius: 5px;
	text-align: center;
	font-weight: 600;
	margin: 0;
}

/* =========================================================================
   Footer (template part)
   ========================================================================= */
.vv-site-footer .wp-block-column p { opacity: 0.7; transition: opacity 0.3s ease; }
.vv-site-footer .wp-block-column p:hover { opacity: 1; }
.vv-site-footer .wp-block-column a { text-decoration: none; }
.vv-footer-bottom { opacity: 0.6; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
	.wp-block-cover.is-style-vv-hero h1 { font-size: 2.5rem; }
	.vv-section-title { font-size: 2rem; }
}
@media (max-width: 1600px) {
	.vv-site-header { padding-left: 3% !important; padding-right: 3% !important; }
	.vv-site-header .wp-block-navigation__container { gap: 1.1rem !important; }
	.vv-site-header .wp-block-navigation { font-size: 0.85rem; }
}
/* Hamburger below 1280px (core only switches at 600px). */
@media (max-width: 1279px) {
	.vv-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.vv-site-header .wp-block-navigation__responsive-container-open { display: flex; }
	.vv-site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100000;
		flex-direction: column;
		align-items: flex-start;
		padding: 6rem 8% 3rem;
		background: var(--wp--preset--color--soft-white);
		overflow: auto;
		font-size: 1.15rem;
	}
	.vv-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
	.vv-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem !important; }
	.vv-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; letter-spacing: 0.5px; }
	.vv-site-header .wp-block-navigation__responsive-container-close { position: absolute; top: 2rem; right: 8%; z-index: 2; }
}