/*
Theme Name: CardQuest
Theme URI: https://cardquest.arteartedesigner.it
Description: Child theme di Storefront per CardQuest.
Author: CardQuest
Template: storefront
Version: 1.0.0
Text Domain: cardquest
*/

/* ============================================================
   CardQuest — Personalizzazioni header
   ============================================================ */

/* Sfondo blu scuro dell'header */
.site-header {
	background-color: #1a2b4a;
	margin-bottom: 0 !important;   /* elimina il grande vuoto bianco sotto l'header */
	border-bottom: 0 !important;   /* toglie la linea di Storefront sotto l'header */
}

/* ============================================================
   CardQuest — Sfondo unificato header + fascia box (mood TCG)
   background-attachment: fixed rende la sfumatura CONTINUA tra le due aree.
   ============================================================ */
.site-header,
.cardquest-feature-boxes {
	background-color: #0b0a14;
	background-image:
		/* aurora magenta in alto a sinistra */
		radial-gradient(720px 460px at 8% -12%, rgba(255, 60, 172, 0.30), transparent 60%),
		/* aurora ciano a destra */
		radial-gradient(760px 480px at 94% -12%, rgba(34, 211, 238, 0.26), transparent 60%),
		/* alone viola al centro (riflettore su logo/ricerca) */
		radial-gradient(900px 420px at 50% -25%, rgba(139, 47, 214, 0.28), transparent 62%),
		/* banda foil IRIDESCENTE animata: ciano -> bianco -> magenta */
		linear-gradient(115deg, transparent 28%,
			rgba(34, 211, 238, 0.10) 43%,
			rgba(255, 255, 255, 0.12) 50%,
			rgba(255, 60, 172, 0.10) 57%, transparent 72%),
		/* base viola-nera verticale */
		linear-gradient(180deg, #17122e 0, #07060e 480px);
	background-repeat: no-repeat;
	/* solo la banda foil (4° layer) è "scroll" e si muove; gli altri restano fissi e continui */
	background-attachment: fixed, fixed, fixed, scroll, fixed;
	background-size: auto, auto, auto, 300% 100%, auto;
	background-position: center, center, center, 150% 50%, center;
	animation: cardquest-holo 7s linear infinite;
}

/* Shimmer olografico: la banda di luce attraversa lentamente header e box */
@keyframes cardquest-holo {
	0%   { background-position: center, center, center, 150% 50%, center; }
	100% { background-position: center, center, center, -50% 50%, center; }
}

/* Accessibilità: niente animazione per chi preferisce meno movimento */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.cardquest-feature-boxes {
		animation: none;
	}
}

/* ============================================================
   CardQuest — Sfondo immagine "space" SOLO sull'header
   (logo, ricerca, menu, carrello). Velo scuro per leggibilità.
   ============================================================ */
.site-header {
	background-color: #0b0a14;
	background-image:
		/* velo che parte leggero in alto (si vede lo spazio) e diventa
		   scuro pieno in basso, così sfuma nel buio dietro i 5 box */
		linear-gradient(180deg,
			rgba(11, 10, 20, 0.12) 0%,
			rgba(11, 10, 20, 0.38) 42%,
			rgba(13, 10, 24, 0.90) 82%,
			#0d0a18 100%),
		url("assets/images/space-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	animation: none;   /* niente shimmer sull'header con l'immagine */
}

/* Fascia box: sfondo scuro pieno, senza aurora/shimmer, in continuità con l'header */
.cardquest-feature-boxes {
	background-color: #0d0a18;
	background-image: none;
	animation: none;
}

/* Testo e link bianchi dentro l'header */
.site-header,
.site-header a,
.site-title a,
.main-navigation a {
	color: #ffffff;
}

/* ============================================================
   CardQuest — Layout liquid (full-width 100%)
   ============================================================ */

/* Contenitore principale di Storefront a tutta larghezza */
.col-full {
	max-width: 100%;
	padding-left: 2em;
	padding-right: 2em;
	box-sizing: border-box;
}

/* Header e footer allineati al resto */
.site-header .col-full,
.site-footer .col-full {
	max-width: 100%;
}

/* ============================================================
   CardQuest — Riga di 5 box sotto il menu
   ============================================================ */

.cardquest-feature-boxes {
	padding: 2.2em 0 1.5em;   /* più respiro tra menu e box (top) */
	margin-top: -1px;         /* sormonta l'header di 1px: elimina l'hairline tra le due aree */
}

.cardquest-feature-boxes__row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.cardquest-feature-box {
	flex: 1 1 calc(20% - 0.8em);
	min-width: 150px;
	aspect-ratio: 3 / 2;          /* proporzione tipo carta/box */
	box-sizing: border-box;
	padding: 1.2em;               /* spazio interno per i loghi */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #171233;
	border: 2px solid #2a2350;
	border-radius: 8px;
	color: #ffffff;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Logo del box: mostrato INTERO (niente taglio), centrato */
.cardquest-feature-box__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: transform .2s ease;
}

/* Hover: si solleva, ombra più marcata, bordo giallo brand e logo che ingrandisce un po' */
/* Al click/focus col mouse: niente contorno viola del browser.
   Il focus da tastiera resta visibile (outline giallo). */
.cardquest-feature-box:focus {
	outline: none;
}
.cardquest-feature-box:focus-visible {
	outline: 2px solid #ffd54a;
	outline-offset: 3px;
}

.cardquest-feature-box:hover,
.cardquest-feature-box:focus {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(34, 211, 238, 0.45), 0 0 22px rgba(34, 211, 238, 0.32);   /* ciano (fallback) */
	border-color: #22d3ee;
}

/* Aloni nel colore di ogni set (enfatizzati: alone ampio + bagliore ravvicinato) */
.cardquest-feature-box--buio-pesto:hover,
.cardquest-feature-box--buio-pesto:focus {
	border-color: #8b2fd6;
	box-shadow: 0 10px 32px rgba(139, 47, 214, 0.60), 0 0 24px rgba(139, 47, 214, 0.45);   /* viola */
}
.cardquest-feature-box--caos-nascente:hover,
.cardquest-feature-box--caos-nascente:focus {
	border-color: #38bdf8;
	box-shadow: 0 10px 32px rgba(56, 189, 248, 0.60), 0 0 24px rgba(56, 189, 248, 0.45);   /* azzurro */
}
.cardquest-feature-box--equilibrio-perfetto:hover,
.cardquest-feature-box--equilibrio-perfetto:focus {
	border-color: #22c55e;
	box-shadow: 0 10px 32px rgba(34, 197, 94, 0.60), 0 0 24px rgba(34, 197, 94, 0.45);     /* verde */
}
.cardquest-feature-box--ascesa-eroica:hover,
.cardquest-feature-box--ascesa-eroica:focus {
	border-color: #ffd54a;
	box-shadow: 0 10px 32px rgba(255, 213, 74, 0.60), 0 0 24px rgba(255, 213, 74, 0.45);   /* oro */
}
.cardquest-feature-box--fiamme-spettrali:hover,
.cardquest-feature-box--fiamme-spettrali:focus {
	border-color: #ff3cac;
	box-shadow: 0 10px 32px rgba(255, 60, 172, 0.60), 0 0 24px rgba(255, 60, 172, 0.45);   /* magenta */
}
.cardquest-feature-box:hover .cardquest-feature-box__img {
	transform: scale(1.06);
}

.cardquest-feature-box__label {
	font-weight: 700;
	letter-spacing: .05em;
}

/* Su schermi piccoli i box vanno a 2 per riga */
@media (max-width: 768px) {
	.cardquest-feature-box {
		flex: 1 1 calc(50% - 0.5em);
	}
}

/* ============================================================
   CardQuest — Logo in alto a sinistra
   ============================================================ */

.cardquest-logo {
	display: inline-block;
	line-height: 0;
}

.cardquest-logo img {
	max-height: 80px;   /* dimensione nell'header; regolabile */
	width: auto;
	height: auto;
}

/* ============================================================
   CardQuest — Header: logo a sinistra, ricerca e menu centrati (robusto)
   Regole applicate globalmente (non in @media min-width, che non mordeva);
   lo stack mobile è ripristinato in fondo con @media (max-width: 767px).
   ============================================================ */

/* Logo */
.cardquest-logo img {
	max-height: 150px !important;
}

/* --- 1ª riga: logo a sinistra (fuori dal flusso), ricerca al centro --- */
.woocommerce-active .site-header > .col-full,
.site-header > .col-full {
	position: relative !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 170px;              /* spazio per il logo da 150px */
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.woocommerce-active .site-header .site-branding,
.site-header .site-branding {
	position: absolute !important;
	left: 2em !important;           /* allineato al padding del layout liquid */
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* Barra di ricerca: centrata in modo ASSOLUTO (immune a float/branding) */
.woocommerce-active .site-header .site-search,
.site-header .site-search {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	float: none !important;
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Reset del widget contenitore */
.site-header .site-search .widget_product_search {
	padding: 0 !important;
	background: transparent !important;
}

/* Form = riga flex: [lente]  [pillola input]  [X]  (icone FUORI dalla pillola) */
.site-header .site-search form {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.9em !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Campo pillola al centro (si allunga per riempire lo spazio tra le icone) */
.site-header .site-search .search-field,
.site-header .site-search input[type="search"] {
	order: 0;
	flex: 1 1 auto !important;
	box-sizing: border-box !important;
	width: auto !important;
	-webkit-appearance: none !important;   /* toglie la lente nativa di Safari */
	appearance: none !important;
	background-color: #14112b !important;   /* scuro coerente col near-black */
	color: #ffffff !important;
	border: 1px solid #ffd54a !important;   /* linea gialla fine */
	border-radius: 999px !important;         /* stondato a pillola */
	padding: 0.75em 1.4em !important;
	box-shadow: none !important;
	outline: none !important;
}
/* Al focus: niente doppia linea del browser, resta solo il bordo giallo */
.site-header .site-search .search-field:focus,
.site-header .site-search input[type="search"]:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: #ffd54a !important;
}
.site-header .site-search .search-field::placeholder {
	color: rgba(255, 255, 255, 0.65) !important;
}
/* Nasconde la X nativa del campo search (usiamo la nostra) */
.site-header .site-search .search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Nasconde il pulsante submit ORIGINALE di Storefront (usiamo la nostra lente) */
.site-header .site-search form > button[type="submit"]:not(.cardquest-search-lens),
.site-header .site-search form > input[type="submit"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Lente (nostra) — FUORI a sinistra, gialla, più grande (SVG inline) */
.site-header .site-search .cardquest-search-lens {
	order: -1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffd54a;            /* colore della lente (SVG usa currentColor) */
	cursor: pointer;
}
.site-header .site-search .cardquest-search-lens svg {
	width: 1.5em;
	height: 1.5em;
	display: block;
}
.site-header .site-search .cardquest-search-lens:hover {
	color: #ffffff;
}

/* X (nostra) — FUORI a destra, gialla, più grande */
.site-header .site-search .cardquest-search-clear {
	order: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	margin: 0 0 0 -0.35em;   /* avvicina la X alla pillola (simmetrica alla lente) */
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffd54a;
	font-size: 2em;
	cursor: pointer;
}
.site-header .site-search .cardquest-search-clear:hover {
	color: #ffffff;
}

/* --- 2ª riga: menu centrato in ASSOLUTO, carrello ancorato a destra --- */
.site-header .storefront-primary-navigation > .col-full {
	position: relative !important;
	min-height: 48px;
}
.site-header .storefront-primary-navigation .main-navigation {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	float: none !important;
	width: max-content !important;   /* larghezza naturale: le voci non vanno a capo */
	max-width: 94vw !important;      /* ma mai oltre la finestra */
	margin: 0 !important;
}
.site-header .storefront-primary-navigation .main-navigation > div,
.site-header .storefront-primary-navigation .main-navigation ul {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.site-header .storefront-primary-navigation .main-navigation ul {
	display: flex !important;
	flex-wrap: nowrap;              /* tutte su una riga */
	justify-content: center;
	align-items: center;
}
.site-header .storefront-primary-navigation .site-header-cart {
	position: absolute !important;
	right: 2em !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	float: none !important;
	margin: 0 !important;
}

/* Carrello: testo bianco, icona gialla */
.site-header .site-header-cart,
.site-header .site-header-cart a,
.site-header .site-header-cart .amount,
.site-header .site-header-cart .count {
	color: #ffffff !important;
}
.site-header .site-header-cart .cart-contents::after {
	color: #ffd54a !important;   /* icona carrello gialla (Font Awesome, è ::after) */
}
.site-header .site-header-cart a:hover,
.site-header .site-header-cart a:hover .amount {
	color: #ffd54a !important;
}

/* --- Mobile: ripristina lo stack verticale di Storefront --- */
@media (max-width: 767px) {
	.site-header > .col-full,
	.site-header .storefront-primary-navigation > .col-full {
		display: block !important;
		min-height: 0 !important;
	}
	.site-header .site-branding,
	.site-header .site-header-cart {
		position: static !important;
		transform: none !important;
	}
	.cardquest-logo img {
		max-height: 70px !important;
	}
}

/* ============================================================
   CardQuest — Menu: testo bianco in grassetto
   ============================================================ */
.storefront-primary-navigation .main-navigation ul li a {
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.95em;               /* compatto, così le 6 voci stanno su una riga */
	padding: 0.4em 0.7em !important; /* spazio per il rettangolo di hover */
	border-radius: 8px;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Hover / focus: testo giallo + rettangolo arrotondato leggermente colorato dietro */
.storefront-primary-navigation .main-navigation ul li a:hover,
.storefront-primary-navigation .main-navigation ul li a:focus {
	color: #ffd54a !important;
	background-color: rgba(255, 213, 74, 0.14);
	box-shadow: 0 0 0 1px rgba(255, 213, 74, 0.35);   /* bordino tenue */
}

/* Niente contorno del browser al click; focus da tastiera comunque visibile */
.storefront-primary-navigation .main-navigation ul li a:focus {
	outline: none;
}
.storefront-primary-navigation .main-navigation ul li a:focus-visible {
	outline: 2px solid #ffd54a;
	outline-offset: 2px;
}