/* --- Variables base --- */
:root {
  --color-fons: #292929;
  --color-text: #ffffff;
  --font-base: Verdana, Geneva, sans-serif;
}

/* Estils generals */
body {
  font-family: var(--font-base);
  font-size: 16px;
  background-color: var(--color-fons);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
  overflow: hidden; /* Evita scroll general si ja tens scroll intern als contenidors */
}

/* Estils generals pels enllaços */
a {
  text-decoration: none; /* Elimina subratllat */
  color: inherit;        /* Hereta el color del seu element pare, no canvia el color */
}

/* mides tipografia */
h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

p, li {
  font-size: 1rem;
}

.missatge-dreta {
  font-size: 0.75rem;
  color: var(--color-text);
  text-align: right;
}

.petit {
  font-size: 0.7rem;
}

/* Capçalera a tota amplada */
header {
  background-color: var(--color-fons);
  color: white;
  padding: 1rem;
  width: 100%;
  text-align: center;
  overflow: hidden; /* per evitar que la imatge surti fora */
}

.header-image {
  width: 100%;
  height: auto;
  object-fit: cover; /* ajusta la imatge per cobrir tot l’espai sense deformar */
  object-position: bottom; /* 🔹 Alinea la imatge a la base */
  display: block; /* elimina espais blancs sota la imatge */
}

/* Contenidor principal amb 3 columnes */
.main-layout {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: auto;
  min-height: calc(100vh - 100px); /* depèn de l’alçada del header */
  box-sizing: border-box;
  overflow: hidden; /* evita desbordaments inesperats */
}

/* Columnes laterals: COLUMNA ESQUERRA */
.sidebar {
  flex: 0 0 20%;       /* ocupa 20% fix */
  max-width: 20%; /* amplada màxima columna menú */
  background-color: var(--color-fons);
  padding: 5rem 1rem 1rem 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Altura i scroll si cal */
  max-height: calc(100vh - 100px); /* ajusta segons capçalera */
  overflow-y: auto;
}

.sidebar nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
  display: block;
}

.sidebar nav a:hover {
  background-color: #ddd;
}

/* Columnes laterals: COLUMNA DRETA */
.rightbar {
  flex: 0 0 20%;
  max-width: 20%;
  background-color: var(--color-fons);
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: space-between; /* 🔹 Reparteix: part superior i inferior */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* enllaç a xarxes socials */
.x-social {
  margin-bottom: 0.25rem;
  text-align: right;
}

.x-icon {
  width: 60px;
  height: 60px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.x-icon:hover {
  opacity: 1;
}



/* Espai central */
.content {
  flex: 1 1 auto; /* ocupa el que queda */
  min-width: 0;   /* important per evitar desbordaments en flexbox */
  background-color: var(--color-fons);
  padding: 1rem;

  /* Scroll intern */
  overflow-y: auto;
  max-height: calc(101vh - 100px); /* Ajusta segons alçada de capçalera */

  /* Ocultar scrollbar */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+ */
}

.content::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Edge */
}

.content iframe {
  width: 100%;
  height: 100%;
  border: none; /* elimina el contorn */
}

/* Línia separadora de blocs */
.line {
  border: none; /* eliminem el border per defecte de <hr> */
  height: 1px; /* línia fina */
  background-color: rgba(255, 255, 255, 0.7); /* línia blanca amb 70% opacitat */
  padding-bottom: 0; /* eliminem padding perquè no fa falta */
  margin: 1rem 0; /* separació vertical abans i després */
}

/* Evitem la línia a l'últim bloc */
.line:last-child {
  background-color: transparent; /* eliminem el fons */
  margin: 0;
  height: 0;
}



/* Opcional: responsive per mòbils */
@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
  .content {
    border-left: none;
    border-right: none;
  }
}