@charset "UTF-8";
/*
 * REDISSENY 2026 — FULL D'ESTILS SOBREPOSAT (en proves)
 * ------------------------------------------------------
 * Es carrega després de css/global.css i només si aquesta carpeta existeix (vegeu header.php).
 * PER TORNAR AL DISSENY ANTERIOR: esborrar la carpeta assets/redisseny/.
 *
 * 3 estils triables amb el botó de la paleta de la capçalera: <html data-estil="fresc|calid|fosc">.
 * Cada estil només defineix variables; la resta de regles són comunes i fan servir les variables.
 * Totes les regles van sota html[data-estil] perquè guanyin al CSS antic sense !important.
 *
 * FASE 1: fonaments (colors, tipografia, capçalera, seccions, targetes, botons, peu, focus).
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

/* ================================================================ */
/* VARIABLES COMUNES                                                */
/* ================================================================ */
html[data-estil] {
	--r-radi: 14px;
	--r-radi-petit: 8px;
	--r-radi-pastilla: 999px;
	--r-ombra: 0 1px 2px rgba(20, 16, 60, .06), 0 8px 24px rgba(20, 16, 60, .08);
	--r-ombra-hover: 0 2px 4px rgba(20, 16, 60, .08), 0 14px 32px rgba(20, 16, 60, .12);
	--r-font: 'Montserrat', system-ui, sans-serif;
	--r-font-titols: 'Montserrat', system-ui, sans-serif;
	--r-transicio: .2s ease;
}

/* ---------------- FRESC: blanc, lila del logo, taronja ---------------- */
html[data-estil="fresc"] {
	--r-fons: #ffffff;
	--r-fons-alt: #f5f4fb;
	--r-superficie: #ffffff;
	--r-text: #1e1b3a;
	--r-text-suau: #5a5874;
	--r-primari: #2e2a8f;
	--r-accent: #ffa500;
	--r-accent-fort: #e08e00;
	--r-sobre-accent: #1e1b3a;
	--r-linia: #e5e3f0;
	--r-capcalera: rgba(255, 255, 255, .92);
	--r-peu: #1f1b5c;
	--r-peu-text: #ecebff;
	--r-peu-titol: #ffc44d;
}

/* ---------------- CÀLID: crema, fusta, taronja ---------------- */
html[data-estil="calid"] {
	--r-fons: #fbf6ec;
	--r-fons-alt: #f3e7d1;
	--r-superficie: #fffdf8;
	--r-text: #2b2118;
	--r-text-suau: #6b5846;
	--r-primari: #8a3b12;
	--r-accent: #f29a1f;
	--r-accent-fort: #d9820b;
	--r-sobre-accent: #2b2118;
	--r-linia: #e8d8bc;
	--r-capcalera: rgba(251, 246, 236, .94);
	--r-peu: #2b2118;
	--r-peu-text: #f3e7d1;
	--r-peu-titol: #f2b25c;
	--r-font-titols: 'Fraunces', Georgia, serif;
	--r-ombra: 0 1px 2px rgba(60, 35, 10, .07), 0 8px 24px rgba(60, 35, 10, .09);
	--r-ombra-hover: 0 2px 4px rgba(60, 35, 10, .09), 0 14px 32px rgba(60, 35, 10, .14);
}

/* ---------------- FOSC: nit, lila clar, taronja neó ---------------- */
html[data-estil="fosc"] {
	--r-fons: #141228;
	--r-fons-alt: #1b1934;
	--r-superficie: #24214a;
	--r-text: #f1effd;
	--r-text-suau: #b9b5d9;
	--r-primari: #c3bdff;
	--r-accent: #ffb020;
	--r-accent-fort: #ffc04d;
	--r-sobre-accent: #141228;
	--r-linia: #37336a;
	--r-capcalera: rgba(20, 18, 40, .92);
	--r-peu: #0d0b1d;
	--r-peu-text: #d9d6f5;
	--r-peu-titol: #ffb020;
	--r-ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--r-ombra-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .45);
	color-scheme: dark;
}

/* ================================================================ */
/* BASE                                                             */
/* ================================================================ */
html[data-estil] body {
	background-color: var(--r-fons);
	color: var(--r-text);
	font-family: var(--r-font);
	-webkit-font-smoothing: antialiased;
}
html[data-estil] h1,
html[data-estil] h2,
html[data-estil] h3,
html[data-estil] h4 {
	font-family: var(--r-font-titols);
	color: var(--r-text);
	letter-spacing: -.01em;
}
html[data-estil] p,
html[data-estil] li {
	line-height: 1.6;
}
html[data-estil] .m_htmleditor a,
html[data-estil] .backgrounds p a {
	color: var(--r-primari);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
html[data-estil] ::selection {
	background: var(--r-accent);
	color: var(--r-sobre-accent);
}

/* Focus visible per a teclat (WCAG 2.4.7). */
html[data-estil] a:focus-visible,
html[data-estil] button:focus-visible,
html[data-estil] summary:focus-visible,
html[data-estil] input:focus-visible,
html[data-estil] select:focus-visible,
html[data-estil] textarea:focus-visible {
	outline: 3px solid var(--r-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ================================================================ */
/* CAPÇALERA                                                        */
/* ================================================================ */
html[data-estil] header {
	background-color: var(--r-capcalera);
	-webkit-backdrop-filter: saturate(160%) blur(10px);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--r-transicio), border-color var(--r-transicio);
}
html[data-estil] header.barru-scrolled {
	border-bottom-color: var(--r-linia);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
html[data-estil] header nav.main ul.menu li a {
	color: var(--r-text);
	position: relative;
	transition: color var(--r-transicio);
}
html[data-estil] header nav.main ul.menu li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--r-accent);
	transform: scaleX(0);
	transition: transform var(--r-transicio);
}
html[data-estil] header nav.main ul.menu li a:hover,
html[data-estil] header nav.main ul.menu li.current-menu-item > a,
html[data-estil] header nav.main ul.menu li.current-menu-ancestor > a {
	color: var(--r-primari);
}
html[data-estil] header nav.main ul.menu li a:hover::after,
html[data-estil] header nav.main ul.menu li.current-menu-item > a::after,
html[data-estil] header nav.main ul.menu li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}
html[data-estil] .navicon,
html[data-estil] .l_header_social a,
html[data-estil] .cowo_lang_dropdown summary {
	color: var(--r-text);
}
html[data-estil] .m_headerDropdown {
	background-color: var(--r-superficie);
}
html[data-estil] .m_headerDropdown a {
	color: var(--r-text);
}
html[data-estil="fosc"] .logo_header img,
html[data-estil="fosc"] .l_header_social img {
	filter: brightness(0) invert(1);
}

/* Desplegable d'idioma */
html[data-estil] .cowo_wpml_language_switcher .cowo_lang_dropdown ul {
	background: var(--r-superficie);
	color: var(--r-text);
	border: 1px solid var(--r-linia);
	box-shadow: var(--r-ombra);
	border-radius: var(--r-radi-petit);
}
html[data-estil] .cowo_wpml_language_switcher .cowo_lang_dropdown li a {
	color: var(--r-text);
}
html[data-estil] .cowo_wpml_language_switcher .cowo_lang_dropdown li a:hover {
	background: var(--r-fons-alt);
}

/* Submenús (Cervesa, Activitats...) - substitueix la vora groga de proves del tema */
@media (min-width: 1025px) {
	html[data-estil] header nav.main ul.menu > li {
		position: relative;
	}
	html[data-estil] header nav.main ul.menu > li.menu-item-has-children > a {
		padding-right: 1.1em;
	}
	html[data-estil] header nav.main ul.menu > li.menu-item-has-children > a::before {
		content: "";
		position: absolute;
		right: .15em;
		top: 50%;
		width: .38em;
		height: .38em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-75%) rotate(45deg);
		opacity: .55;
	}
	html[data-estil] header nav.main ul.menu li ul.sub-menu {
		top: calc(100% + 10px);
		left: -.9em;
		z-index: 1002;
		min-width: 15em;
		margin: 0;
		padding: .45em;
		list-style: none;
		background: var(--r-superficie);
		border: 1px solid var(--r-linia);
		border-radius: var(--r-radi);
		box-shadow: var(--r-ombra-hover);
	}
	/* L'últim element (Activitats) s'obre cap a l'esquerra perquè no surti de la pantalla */
	html[data-estil] header nav.main ul.menu > li:last-child > ul.sub-menu {
		left: auto;
		right: -.9em;
	}
	/* Pont invisible: el desplegable no es tanca en baixar el ratolí */
	html[data-estil] header nav.main ul.menu li ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}
	html[data-estil] header nav.main ul.menu li:focus-within > ul.sub-menu {
		display: block;
	}
	html[data-estil] header nav.main ul.menu li ul.sub-menu li a {
		padding: .6em .9em;
		border-radius: var(--r-radi-petit);
		font-size: 16px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--r-text);
		text-decoration: none;
		transition: background var(--r-transicio), color var(--r-transicio);
	}
	html[data-estil] header nav.main ul.menu li ul.sub-menu li a::after,
	html[data-estil] header nav.main ul.menu li ul.sub-menu li a::before {
		display: none;
	}
	html[data-estil] header nav.main ul.menu li ul.sub-menu li a:hover,
	html[data-estil] header nav.main ul.menu li ul.sub-menu li a:focus-visible,
	html[data-estil] header nav.main ul.menu li ul.sub-menu li.current-menu-item > a {
		background: var(--r-fons-alt);
		color: var(--r-primari);
	}
}
/* Mòbil: els submenús sempre visibles (al mòbil no hi ha "hover") */
@media (max-width: 1024px) {
	html[data-estil] nav.main ul.menu li ul.sub-menu {
		display: block;
		position: static;
		margin: 0 0 .4em .9em;
		padding: 0 0 0 1.1em;
		list-style: none;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--r-linia);
	}
	html[data-estil] nav.main ul.menu li ul.sub-menu li a {
		padding: .4em .6em;
		font-size: 18px;
		font-weight: 500;
		color: var(--r-text-suau);
	}
}

/* Icones socials negres (PNG) sobre fons fosc */
html[data-estil="fosc"] .social img[src*="-black"] {
	filter: brightness(0) invert(1);
}

/* Selector d'estil (paleta) - provisional */
.barru-estil {
	position: relative;
	margin-right: .5em;
}
.barru-estil summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--r-text, #262626);
	transition: background var(--r-transicio, .2s);
}
.barru-estil summary::-webkit-details-marker {
	display: none;
}
.barru-estil summary:hover {
	background: var(--r-fons-alt, #f2f2f2);
}
.barru-estil__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 1001;
	min-width: 11em;
	padding: .35em;
	background: var(--r-superficie, #fff);
	border: 1px solid var(--r-linia, #ddd);
	border-radius: var(--r-radi-petit, 8px);
	box-shadow: var(--r-ombra, 0 8px 24px rgba(0, 0, 0, .12));
}
.barru-estil__menu button {
	display: flex;
	align-items: center;
	gap: .6em;
	width: 100%;
	padding: .6em .8em;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--r-text, #262626);
	font: 600 15px/1.2 var(--r-font, sans-serif);
	text-align: left;
	cursor: pointer;
}
.barru-estil__menu button:hover {
	background: var(--r-fons-alt, #f2f2f2);
}
.barru-estil__menu button[aria-pressed="true"] {
	background: var(--r-fons-alt, #f2f2f2);
	box-shadow: inset 3px 0 0 var(--r-accent, orange);
}
.barru-estil__mostra {
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .15);
}
.barru-estil__menu button[data-estil="fresc"] .barru-estil__mostra { background: linear-gradient(135deg, #fff 50%, #2e2a8f 50%); }
.barru-estil__menu button[data-estil="calid"] .barru-estil__mostra { background: linear-gradient(135deg, #fbf6ec 50%, #8a3b12 50%); }
.barru-estil__menu button[data-estil="fosc"] .barru-estil__mostra { background: linear-gradient(135deg, #141228 50%, #ffb020 50%); }

/* ================================================================ */
/* TÍTOLS DE PÀGINA I DE SECCIÓ                                     */
/* ================================================================ */
html[data-estil] .page_title h1 {
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: none;
	color: var(--r-primari);
}
html[data-estil] .section_title h2 {
	display: flex;
	align-items: center;
	gap: .45em;
	font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
	font-weight: 800;
	color: var(--r-text);
}
html[data-estil] .section_title h2 .material-icons {
	display: inline-grid;
	place-items: center;
	width: 1.55em;
	height: 1.55em;
	font-size: .75em;
	border-radius: 50%;
	background: var(--r-accent);
	color: var(--r-sobre-accent);
}
html[data-estil="calid"] .page_title h1,
html[data-estil="calid"] .section_title h2 {
	font-weight: 700;
}

/* ================================================================ */
/* SECCIONS                                                         */
/* ================================================================ */
html[data-estil] .backgrounds .background:nth-of-type(odd) {
	background-color: var(--r-fons);
}
html[data-estil] .backgrounds .background:nth-of-type(even) {
	background-color: var(--r-fons-alt);
}

/* ================================================================ */
/* BOTONS                                                           */
/* ================================================================ */
html[data-estil] .cowo_index ul {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	padding: 0;
}
html[data-estil] .cowo_index ul li {
	margin: 0;
	list-style: none;
}
html[data-estil] .cowo_index ul li a,
html[data-estil] .section_header_group .line_link a,
html[data-estil] .combo_info_media .info .cta a,
html[data-estil] .section_link a,
html[data-estil] .button,
html[data-estil] .buttonSmall,
html[data-estil] .buttonMedium,
html[data-estil] .buttonBig,
html[data-estil] .wpcf7-submit,
html[data-estil] input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .65em 1.35em;
	border: 0;
	border-radius: var(--r-radi-pastilla);
	background: var(--r-accent);
	color: var(--r-sobre-accent);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
	transition: background var(--r-transicio), transform var(--r-transicio), box-shadow var(--r-transicio);
}
html[data-estil] .cowo_index ul li a:hover,
html[data-estil] .section_header_group .line_link a:hover,
html[data-estil] .combo_info_media .info .cta a:hover,
html[data-estil] .section_link a:hover,
html[data-estil] .button:hover,
html[data-estil] .buttonSmall:hover,
html[data-estil] .buttonMedium:hover,
html[data-estil] .buttonBig:hover,
html[data-estil] .wpcf7-submit:hover,
html[data-estil] input[type="submit"]:hover {
	background: var(--r-accent-fort);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* Seccions amb fons groc (bg_c): en fosc, fons de superfície perquè el text clar es llegeixi */
html[data-estil="fosc"] section.background.bg_c {
	background-color: var(--r-fons-alt) !important; /* el tema hi posa el groc amb !important */
	border-top: 3px solid var(--r-accent);
}

/* L'animació d'entrada dels títols (io_fadein_left) els desplaçava 100px a la dreta i feia
   aparèixer scroll horitzontal. Entren des de l'esquerra: no surten de la pantalla per la dreta. */
html[data-estil] .io_fadein_left {
	transform: translateX(-40px);
}
html[data-estil] .io_fadein_left.fadeInLeft {
	opacity: 1;
	transform: none;
}

/* ================================================================ */
/* TARGETES (carta, aixetes)                                         */
/* ================================================================ */
html[data-estil] .l_test_grid_blocks .list_block.case_listcard,
html[data-estil] .card_beer {
	background: var(--r-superficie);
	color: var(--r-text);
	border: 1px solid var(--r-linia);
	border-radius: var(--r-radi);
	box-shadow: var(--r-ombra);
	transition: box-shadow var(--r-transicio), transform var(--r-transicio);
}
html[data-estil] .l_test_grid_blocks .list_block.case_listcard:hover,
html[data-estil] .card_beer:hover {
	box-shadow: var(--r-ombra-hover);
}
html[data-estil] .l_test_grid_blocks .list_block h3 {
	font-weight: 800;
	color: var(--r-primari);
	border-bottom-color: var(--r-accent);
}
html[data-estil] .l_test_grid_blocks .list_block li {
	color: var(--r-text);
}
html[data-estil] .l_test_grid_blocks .list_block li::marker {
	color: var(--r-accent);
}
html[data-estil] .card_beer .name {
	color: var(--r-text);
	font-weight: 800;
}
html[data-estil] .card_beer .number {
	display: inline-grid;
	place-items: center;
	min-width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--r-accent);
	color: var(--r-sobre-accent);
	font-size: .8em;
}
html[data-estil] .card_beer hr {
	border: 0;
	border-top: 1px solid var(--r-linia);
}
html[data-estil] .card_beer .style,
html[data-estil] .card_beer .brewery_specs {
	color: var(--r-text-suau);
}
html[data-estil="fosc"] .card_beer .brewery_logo img {
	border-radius: 6px;
	background: #fff;
}

/* ================================================================ */
/* PEU                                                              */
/* ================================================================ */
html[data-estil] footer,
html[data-estil] footer.stickyFooter {
	background-color: var(--r-peu);
	color: var(--r-peu-text);
}
html[data-estil] footer a,
html[data-estil] footer .grid_footer li,
html[data-estil] .footer_bar_bottom {
	color: var(--r-peu-text);
}
html[data-estil] footer a:hover {
	color: var(--r-peu-titol);
}
html[data-estil] footer .grid_footer .item .title {
	color: var(--r-peu-titol);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
html[data-estil] .footer_scrolltotop button {
	border-radius: 50%;
	background: var(--r-accent);
	color: var(--r-sobre-accent);
}

/* ================================================================ */
/* FASE 2: CARTA (el QR de les taules porta a /menjar/)             */
/* ================================================================ */
html[data-estil] .l_test_grid_blocks .list_block ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
html[data-estil] .l_test_grid_blocks .list_block li {
	display: flex;
	align-items: baseline;
	gap: .75em;
	margin: 0;
	padding: .6em 0;
	border-bottom: 1px dashed var(--r-linia);
	list-style: none;
}
html[data-estil] .l_test_grid_blocks .list_block li:last-child {
	border-bottom: 0;
}
html[data-estil] .l_test_grid_blocks .list_block li::before {
	content: none;
}
html[data-estil] .item_nom {
	flex: 1 1 auto;
}
html[data-estil] .item_preu {
	flex: 0 0 auto;
	font-weight: 800;
	color: var(--r-primari);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
html[data-estil] .l_test_grid_blocks .list_block {
	scroll-margin-top: calc(var(--r-cap-h, 0px) + 72px);
}

/* Barra de categories enganxada (la crea redisseny.js) */
.barru-cats {
	position: sticky;
	top: var(--r-cap-h, 0px);
	z-index: 50;
	margin: 0 0 1.5rem;
	padding: .6rem 0;
	background: var(--r-fons-alt, #f5f5f5);
	border-bottom: 1px solid var(--r-linia, #ddd);
}
.barru-cats ul {
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: 0 .25rem .25rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.barru-cats li {
	flex: 0 0 auto;
	margin: 0;
}
.barru-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: .35em 1em;
	border: 1px solid var(--r-linia, #ddd);
	border-radius: 999px;
	background: var(--r-superficie, #fff);
	color: var(--r-text, #262626);
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
	text-decoration: none;
}
.barru-cats a:hover,
.barru-cats a[aria-current="true"] {
	background: var(--r-accent, orange);
	border-color: var(--r-accent, orange);
	color: var(--r-sobre-accent, #000);
}

/* ================================================================ */
/* AJUSTOS                                                          */
/* ================================================================ */
/* Seccions amb foto de fons (sempre clara): títol fosc en tots els estils. */
html[data-estil] .backgrounds section[style*="background-image"] .section_title h2 {
	color: #1e1b3a;
}
/* Icona d'Untappd (negra) visible sobre targeta fosca. */
html[data-estil="fosc"] .card_beer .logo_untappd img {
	filter: invert(1);
}
/* Menys espai buit entre seccions al mòbil. */
@media (max-width: 768px) {
	html[data-estil] .backgrounds .background.padding-4 {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* ================================================================ */
/* MOVIMENT REDUÏT                                                  */
/* ================================================================ */
@media (prefers-reduced-motion: reduce) {
	html[data-estil] *,
	html[data-estil] *::before,
	html[data-estil] *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}