/*
Theme Name: Stylesoft
Theme URI: https://stylesoft.it
Author: Mauro — Stylesoft
Author URI: https://stylesoft.it
Description: Tema WordPress a blocchi per Stylesoft.it — Atelier digitale dove il codice diventa arte. Design system ispirato a toni caldi, glassmorphism e layout creativi asimmetrici.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stylesoft
Tags: block-patterns, blog, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, wide-blocks
*/

/* ============================================
   STYLESOFT — Custom Styles
   Design System: "The Curated Canvas"
   ============================================ */

/* --- CSS Variables (supplementari a theme.json) --- */
:root {
	--ss-transition-fast: 150ms ease;
	--ss-transition-normal: 300ms ease;
	--ss-transition-slow: 500ms ease;
	--ss-radius-sm: 0.5rem;
	--ss-radius-md: 1rem;
	--ss-radius-lg: 2rem;
	--ss-radius-xl: 3rem;
	--ss-radius-full: 9999px;
	--ss-shadow-ambient: 0 20px 80px -10px rgba(72, 38, 3, 0.08);
	--ss-shadow-card-hover: 0 25px 60px -12px rgba(72, 38, 3, 0.15);
	--ss-shadow-cta: 0 15px 30px -5px rgba(255, 123, 4, 0.3);
}

/* --- Selection --- */
::selection {
	background: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--secondary);
}

/* --- Smooth scroll --- */
html {
	scroll-behavior: smooth;
}

/* --- No-Line Rule: eliminiamo i border di default WP --- */
.wp-block-separator:not(.is-style-dots) {
	border-color: var(--wp--preset--color--outline-variant) !important;
	opacity: 0.3;
}

/* ============================================
   HEADER — Navbar Glassmorphism Floating
   ============================================ */
.ss-header-floating {
	position: sticky;
	top: 1rem;
	z-index: 100;
	max-width: 1280px;
	margin: 1rem auto 0;
	padding: 0.75rem 1.5rem;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: var(--ss-radius-full);
	box-shadow: var(--ss-shadow-ambient);
	transition: box-shadow var(--ss-transition-normal);
}

.ss-header-floating:hover {
	box-shadow: var(--ss-shadow-card-hover);
}

/* --- Nav links active state --- */
.ss-header-floating .wp-block-navigation-item.current-menu-item a {
	color: var(--wp--preset--color--primary-container);
	font-weight: 700;
	border-bottom: 2px solid var(--wp--preset--color--primary-container);
	padding-bottom: 0.25rem;
}

/* ============================================
   BUTTONS — Pill shape + organic hover
   ============================================ */
.wp-block-button .wp-block-button__link {
	border-radius: var(--ss-radius-full);
	transition: transform var(--ss-transition-normal), box-shadow var(--ss-transition-normal);
}

.wp-block-button .wp-block-button__link:hover {
	transform: scale(1.05);
}

.wp-block-button .wp-block-button__link:active {
	transform: scale(0.97);
}

/* Button con glow CTA */
.wp-block-button.is-style-ss-cta .wp-block-button__link {
	box-shadow: var(--ss-shadow-cta);
}

/* Button secondary glassmorphism */
.wp-block-button.is-style-ss-glass .wp-block-button__link {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--wp--preset--color--on-surface);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ============================================
   CARDS — Organic corners + warm shadows
   ============================================ */
.ss-card {
	background: var(--wp--preset--color--surface-container-lowest);
	border-radius: var(--ss-radius-lg);
	padding: 2rem;
	transition: transform var(--ss-transition-slow), box-shadow var(--ss-transition-slow);
	position: relative;
	overflow: hidden;
}

.ss-card:hover {
	box-shadow: var(--ss-shadow-card-hover);
	transform: translateY(-4px);
}

/* Card con leggera rotazione (effetto "sparso") */
.ss-card-tilted:nth-child(odd) {
	transform: rotate(-1deg);
}

.ss-card-tilted:nth-child(even) {
	transform: rotate(1.5deg);
}

.ss-card-tilted:hover {
	transform: rotate(0deg) translateY(-4px) !important;
}

/* ============================================
   ARTISTIC BLOTS — Blob decorativi sfumati
   ============================================ */
.ss-blot {
	position: absolute;
	border-radius: 100%;
	filter: blur(80px);
	opacity: 0.35;
	pointer-events: none;
	z-index: -1;
}

.ss-blot-primary {
	background: var(--wp--preset--color--primary-container);
}

.ss-blot-secondary {
	background: var(--wp--preset--color--secondary);
}

.ss-blot-tertiary {
	background: var(--wp--preset--color--tertiary-container);
}

/* ============================================
   CHIPS / TAGS — Paint swatch style
   ============================================ */
.ss-chip {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border-radius: var(--ss-radius-full);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform var(--ss-transition-fast);
}

.ss-chip:hover {
	transform: scale(1.05);
}

/* ============================================
   LABEL CATEGORY — Uppercase tracking
   ============================================ */
.ss-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* ============================================
   FOOTER — Rounded top
   ============================================ */
.ss-footer {
	border-radius: var(--ss-radius-xl) var(--ss-radius-xl) 0 0;
}

/* ============================================
   CTA BANNER — Full-bleed warm gradient
   ============================================ */
.ss-cta-banner {
	border-radius: var(--ss-radius-xl);
	position: relative;
	overflow: hidden;
}

.ss-cta-banner::before {
	content: '';
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 24rem;
	height: 24rem;
	background: var(--wp--preset--color--tertiary-container);
	opacity: 0.25;
	border-radius: 100%;
	filter: blur(100px);
	pointer-events: none;
	transition: transform 1s ease;
}

.ss-cta-banner:hover::before {
	transform: scale(1.3);
}

/* ============================================
   HERO IMAGE FRAME — Tilted with decorative circles
   ============================================ */
.ss-hero-frame {
	position: relative;
	border-radius: var(--ss-radius-lg);
	padding: 1rem;
	background: var(--wp--preset--color--surface-container-low);
	box-shadow: 0 25px 60px -15px rgba(72, 38, 3, 0.12);
	transform: rotate(1deg);
	transition: transform var(--ss-transition-slow);
}

.ss-hero-frame:hover {
	transform: rotate(0deg);
}

.ss-hero-frame img {
	border-radius: var(--ss-radius-md);
}

/* ============================================
   PROCESS STEPS — Numbered circles
   ============================================ */
.ss-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-weight: 800;
	font-size: 1.125rem;
	color: #fff;
	flex-shrink: 0;
}

/* ============================================
   ANIMATIONS — Entrance (opzionali, richiedono JS)
   ============================================ */
.ss-fade-up {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ss-fade-up.ss-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children */
.ss-stagger > *:nth-child(1) { transition-delay: 0ms; }
.ss-stagger > *:nth-child(2) { transition-delay: 100ms; }
.ss-stagger > *:nth-child(3) { transition-delay: 200ms; }
.ss-stagger > *:nth-child(4) { transition-delay: 300ms; }
.ss-stagger > *:nth-child(5) { transition-delay: 400ms; }

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 781px) {
	.ss-header-floating {
		margin: 0.5rem 1rem 0;
		padding: 0.5rem 1rem;
	}

	.ss-card-tilted:nth-child(odd),
	.ss-card-tilted:nth-child(even) {
		transform: none;
	}

	.ss-hero-frame {
		transform: none;
	}
}

/* ============================================
   STACKABLE PLUGIN — Overrides di stile
   ============================================ */
.stk-block .stk-button {
	border-radius: var(--ss-radius-full) !important;
}

/* ============================================
   EDITOR STYLES
   ============================================ */
.editor-styles-wrapper {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--on-surface);
}