/* ==========================================================================
   Kind Kitchen — estils propis
   ========================================================================== */

/* Logos a amplada completa (substitueix l'estil inline que trencava el bloc) */
.kk-logo img,
.kk-footer-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* L'enllaç del logo també a amplada completa (si no, l'<a> inline l'encongeix) */
.kk-logo a {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Capçalera: el logo puja a dalt i el menú queda per sobre (cantonada dreta)
   -------------------------------------------------------------------------- */
.kk-header {
	position: relative;
}

.kk-header .kk-logo {
	/* separació del logo respecte de dalt — ajusta el valor al gust */
	margin-top: 10px;
	padding-top: 0;
}

.kk-header-menu {
	position: absolute;
	top: 25px;
	right: 32px;
	z-index: 2;
	text-align: right;
}

/* Mòbil i tauleta: el menú es manté ABSOLUT a la cantonada (igual que
   escriptori) i el logo passa a la versió vertical (logo-kind-mobile.svg).
   Aquest logo JA porta dissenyat l'espai buit a dalt a la dreta per al menú,
   així que va a AMPLE COMPLET (100%) i el menú absolut cau just sobre aquell
   buit, sense trepitjar-se. */
@media (max-width: 900px) {
	/* El menú ja hereta position:absolute / top / right del desktop.
	   Només alineem la vora dreta amb el padding reduït de mòbil (16px). */
	.kk-header-menu {
		right: 16px;
	}

	/* Substituïm la imatge ample per la vertical (mateix <img>, sense tocar
	   el marcatge). Hereta width:100% / height:auto → ocupa tot l'ample. */
	.kk-header .kk-logo img {
		content: url(/wp-content/themes/kind-kitchen/assets/images/logo-kind-mobile.svg);
	}

	/* Menú una mica més gran en tauleta/mòbil (18px). El gap entre ítems
	   torna a ser semblant a escriptori (10px), amb un pèl més: 12px.
	   !important perquè la mida i el blockGap vénen inline del bloc Navigation. */
	.kk-header-menu .wp-block-navigation {
		font-size: 18px !important;
	}

	.kk-header-menu .wp-block-navigation__container {
		gap: 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Selector d'idiomes (Polylang) — horitzontal, al peu, sobre "@Kind Kitchen 2026"
   Escriptori: alineat a la dreta · Mòbil (≤781px): centrat
   -------------------------------------------------------------------------- */
/* La llista del switcher: en fila, alineada a la dreta */
.kk-lang .wp-block-polylang-language-switcher {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ordre desitjat: CAT · ESP · ENG (Polylang els serveix ca, en, es) */
.kk-lang .lang-item-ca { order: 1; }
.kk-lang .lang-item-es { order: 2; }
.kk-lang .lang-item-en { order: 3; }

/* Separador "·" entre idiomes (no abans del primer, per ordre visual) */
.kk-lang .lang-item + .lang-item::before {
	content: "·";
	margin-right: 8px;
	color: inherit;
	opacity: 0.5;
}
.kk-lang .lang-item-ca::before { content: none; } /* mai porta separador (és el 1r) */

.kk-lang .lang-item {
	display: flex;
	align-items: center;
	line-height: 1;
}

.kk-lang .lang-item a {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.2px;
	text-decoration: none;
	color: inherit;
}

/* Substituïm el nom llarg (Català/Español/English) per l'abreviatura */
.kk-lang .lang-item a { font-size: 0; }          /* amaga el text original */
.kk-lang .lang-item a::after {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.2px;
	text-transform: uppercase;
}
.kk-lang .lang-item-ca a::after { content: "CAT"; }
.kk-lang .lang-item-es a::after { content: "ESP"; }
.kk-lang .lang-item-en a::after { content: "ENG"; }

/* Hover taronja com la resta de links */
.kk-lang .lang-item a:hover { color: #F1A744; }

/* Mòbil: el selector es centra */
@media (max-width: 781px) {
	.kk-lang,
	.kk-lang > .wp-block-group__inner-container,
	.kk-lang .wp-block-polylang-language-switcher {
		justify-content: center !important;
	}
}

/* --------------------------------------------------------------------------
   Contingut: espaiat entre paràgrafs més ajustat
   -------------------------------------------------------------------------- */
.wp-block-post-content p {
	margin-top: 0;
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Carrusel d'inici (scroll horitzontal, sense JS)
   -------------------------------------------------------------------------- */
.kk-carousel.wp-block-gallery {
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: 16px;
	/* FULL-BLEED: el carrusel surt dels marges del layout i arriba a les
	   vores de la finestra del navegador. Marges negatius centrats que
	   trenquen el contenidor "constrained" i ocupen tot l'ample del viewport
	   (100vw), independentment de l'ample del contingut. Padding lateral 0
	   perquè les imatges toquin la cantonada. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 4px 0;
	/* scrollbar amagada (Firefox + WebKit) */
	scrollbar-width: none;
}

/* El 100vw del carrusel inclou l'ample de la barra de scroll vertical, cosa
   que provocaria una barra horitzontal a escriptori. La retallem al <main>
   (no a l'html) per no trencar el scroll-timeline del parallax. */
main.wp-block-group {
	overflow-x: clip;
}

.kk-carousel.wp-block-gallery::-webkit-scrollbar {
	display: none;
}

.kk-carousel.wp-block-gallery .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
	/* Desktop: 3 fotos. !important per guanyar a l'especificitat del bloc
	   Galeria, que usa el truc :not(#individual-image) (especificitat d'ID). */
	width: calc(33.333% - var(--wp--style--unstable-gallery-gap, 16px) * .66667) !important;
}

.kk-carousel.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 16px;
}

/* Tauleta: dues fotos */
@media (max-width: 900px) {
	.kk-carousel.wp-block-gallery.has-nested-images .wp-block-image {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * .66667) !important;
	}
}

/* Mòbil: només una foto (+ un tast de la següent) */
@media (max-width: 600px) {
	.kk-carousel.wp-block-gallery.has-nested-images .wp-block-image {
		width: calc(100% - var(--wp--style--unstable-gallery-gap, 16px) / 2) !important;
	}

	.kk-carousel.wp-block-gallery.has-nested-images .wp-block-image img {
		height: 72vh;
	}
}

/* "Olá!" — centrat i una mica en diagonal */
.kk-ola {
	transform: rotate(-7deg);
	transform-origin: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.kk-footer-contact {
	width: 100%;
}

.kk-footer-logo {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* Subratllar els links del menú legal en hover + color taronja (#F1A744) */
.kk-footer-legal a:hover {
	text-decoration: underline;
	color: #F1A744 !important;
}

/* --------------------------------------------------------------------------
   Hover: botons → fons taronja (#F1A744) · links → color taronja (#F1A744)
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-block-post-content a,
.kk-header-menu a,
.kk-footer-contact a,
.kk-footer-legal a {
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Botons (Reservar mesa / Ver carta): el nou color com a FONS.
   Text verd fosc per llegibilitat sobre el taronja. */
.wp-block-post-content .wp-block-button > .wp-block-button__link:hover {
	background-color: #F1A744 !important;
	border-color: #F1A744 !important;
	color: var(--wp--preset--color--custom-color-1) !important;
}

/* Links (menú d'inici, dades de contacte, "primer restaurante"…): el nou
   color com a COLOR de text. S'exclouen els botons. */
.wp-block-post-content a:not(.wp-block-button__link):hover,
.kk-header-menu a:hover,
.kk-footer-contact a:hover {
	color: #F1A744 !important;
}

/* --------------------------------------------------------------------------
   Negretes dins .kind-text (bloc BE KIND): font dels titulars (Denim INK),
   mateix pes que el text normal i sense cursiva. La resta queda com està.
   -------------------------------------------------------------------------- */
.kind-text strong,
#kind-text strong {
	font-family: var( --wp--preset--font-family--denim-ink-trial );
	font-weight: inherit;
	font-style: normal;
}

/* --------------------------------------------------------------------------
   Padding lateral a la meitat (32px → 16px) en tauleta i mòbil.
   Cobreix les dues fonts: la variable global (Estilos → Estructura) i els
   paddings inline de 32px de les seccions. !important per guanyar a l'inline.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	body {
		--wp--style--root--padding-left: 16px !important;
		--wp--style--root--padding-right: 16px !important;
	}

	[style*="padding-left:32px"] {
		padding-left: 16px !important;
	}

	[style*="padding-right:32px"] {
		padding-right: 16px !important;
	}

	/* El carrusel és full-bleed també en tauleta/mòbil: sense padding lateral
	   perquè les imatges arribin a la vora de la finestra. */
	.kk-carousel.wp-block-gallery {
		padding-left: 0;
		padding-right: 0;
	}

	.kind-text,
	#kind-text {
		font-size: 62px !important;
		letter-spacing: -2px !important;
	}
}

/* --------------------------------------------------------------------------
   Mòbil: mides de tipografia (la mida de desktop es manté a l'editor;
   aquí només s'ajusta el mòbil). !important perquè a l'editor la mida
   s'escriu com a estil inline.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.kind-text,
	#kind-text {
		font-size: 54px !important;
		letter-spacing: -2px !important;
	}

	.kk-ola {
		font-size: 64px !important;
	}
}

/* --------------------------------------------------------------------------
   Botons (hero): apilar-los un sobre l'altre quan no caben de costat.
   Tenen 90px de padding lateral, així que desborden en pantalles petites.
   Passen a columna i amplada completa.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-post-content .wp-block-buttons {
		flex-direction: column;
		align-items: center;
	}

	.wp-block-post-content .wp-block-buttons > .wp-block-button {
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Footer: en tauleta/mòbil, els dos menús (contacte i legal) centrats i
   horitzontals (en comptes de space-between estirat a les vores).
   Es targeten per <footer> per no dependre de classes del template part.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	footer .wp-block-navigation__container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Fons amb efecte PARALLAX real i DINÀMIC: el fons es mou gairebé com el
   contingut, però una mica més lent. Aquesta petita diferència és la sensació
   de profunditat. La quantitat de moviment (--kk-move) la calcula parallax.js
   a partir de l'alçada real de la pàgina (s'adapta a mòbil/resize); per defecte
   és el 90% de l'scroll → molt suau. Per ajustar la suavitat, toca LAG a
   parallax.js, no aquí.
   Tècnica: pseudo-element position:fixed + scroll-driven animation de CSS pur
   (animation-timeline: scroll()). On el navegador no suporti scroll-timeline,
   simplement es queda quiet (degradació elegant). Imatge desktop i mòbil.
   -------------------------------------------------------------------------- */
body::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	/* Sobredimensionem el fons (meitat per dalt, meitat per baix) perquè en
	   moure's no apareguin mai franges buides als extrems.
	   var(..., 90vh): el 90vh és el valor de seguretat si parallax.js no corre;
	   normalment el JS sobreescriu --kk-move a :root amb el càlcul en píxels. */
	top: calc(var(--kk-move, 90vh) / -2);
	bottom: calc(var(--kk-move, 90vh) / -2);
	z-index: -1;
	background-image: url(/wp-content/themes/kind-kitchen/assets/images/fondo2.webp);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	will-change: transform;
	/* L'animació avança del 0% al 100% segons el progrés d'scroll de la pàgina. */
	animation: kk-parallax linear both;
	animation-timeline: scroll(root block);
}

@keyframes kk-parallax {
	/* Recorregut simètric de +meitat a −meitat: en total es desplaça --kk-move. */
	from { transform: translateY(calc(var(--kk-move, 90vh) / 2)); }
	to   { transform: translateY(calc(var(--kk-move, 90vh) / -2)); }
}

/* Respecta qui té activat "reduir moviment": deixem el fons quiet. */
@media (prefers-reduced-motion: reduce) {
	body::before {
		animation: none;
		inset: 0;
	}
}

@media (max-width: 781px) {
	body::before {
		background-image: url(/wp-content/themes/kind-kitchen/assets/images/bg-mobile.webp);
	}
}