/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
*/

:root {
  --color-principal: #DC873A;
  --color-boto-hover: #e7ac10;
  --color-fons: #ffffff;
  --color-text: #333333;
  --color-negre: #313131;
  --color-gris: #f9f9f9;
  --color-titol-pagina: #111111;

  --height-capcalera: 76px;
  --breakpoint-mobile: 768px;

  --color-text-footer: #fff;
  --color-text-footer-secundari: #bbb;

  --padding-general:2rem 18rem; */ /* Variable per cambiar el padding de tota la web */
}

/* Inicialització de valors per a tot */
* { margin:0; padding:0; box-sizing:border-box; font-family: "Inter", 'Segoe UI', Roboto, sans-serif; }

body {
	background:var(--color-fons); 
	color:var(--color-text); 
	line-height:1.7; 
	font-size: 1rem;
	cursor: default;
}




/* ===================== */
/* Estils del peu de pàgina */
/* ===================== */
peu-pagina {
  display:block;
  background: var(--color-negre);
  color: var(--color-text-footer);
  padding: 2rem 1rem 0;
  font-size:0.9rem;
}

footer-contenidor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 2rem clamp(1rem, 5vw, 10rem);
}

footer-columna h4 {
  font-size:1rem;
  color: var(--color-principal);
  margin-bottom:1rem;
}

footer-columna ul {
  list-style:none;
  padding:0;
}

footer-columna li {
  margin:0.4rem 0;
}

footer-columna a {
  color: var(--color-text-footer-secundari);
  text-decoration:none;
}

footer-columna a:hover, footer-columna a:visited {
  color: white;
}

footer-columna[social] a{
  font-size:1.5rem;
  padding-right:5px;
}

footer-baix {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: center; /* ? per quan es fa una sola columna */
}

footer-baix p{
  color: var(--color-text-footer-secundari);
}


/* ===================== */
/* = Botó d'anar cap a dalt */
/* ===================== */
body .generate-back-to-top {
  background-color:var(--color-principal);
  color: #fff;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
   transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

body .generate-back-to-top:hover {
  background-color:var(--color-principal);
  transform: translateY(-3px);
  opacity: 0.9;
}