/* CSS PAGINA WEB MATERIAL DIDACTIC.CAT ----  Revisió 10/04/2025     */

:root {    /* Defineixo les variables per cridar els colors amb var() */

  /* COLORS */

  --negre: #000000;
  --blanc: #ffffff;
  --blau_fluix_MD: #009EE0;
  --blau_fort_MD: #0B72B5;
  --blau_fluix:#c4ddf5; 
  --gris_fluix:#EFEFEF;
  --gris_fort_tipografia:#333333;  


/* ALTURES TIPOGRAFIES */

--text_general: 1rem;
--text_footer_legals: 0.85rem;
--text_atribucio_Freepik: 0.85rem;
--text_enllaços_menu_principal: 1rem;



/* Propietats generals */

html {
  font-size: 62.5%;                           /* Defineixo un font size del 62.5% per ajustar les unitats rem a 1rem = 10px */
}


/* PROPIETATS GENERALS DEL BODY */

body {
  margin: 0 auto;                   /* Centra el contingut horitzontalment */
  font-family: 'Comfortaa', sans-serif;
  color: var(--negre);
 }

 h1, h2, h3 {
  font-family: 'Comfortaa', sans-serif;
}


/* PROPIETATS CONTENIDOR PRINCIPAL */

 .contenidor-principal {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 1rem; /* Per evitar que toqui els marges a pantalles petites */
}


/* FRANJA SUPERIOR */

.franja-superior {
  width: 100%;
  height: 3rem;
  background-color:var(--blau_fort_MD); 
  display: flex;
  align-items: center;
}

.franja-superior .contenidor-principal {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.mail-franja {
  font-size: 0.85rem;
  font-family: 'Comfortaa', sans-serif;
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
}

.mail-franja a {
  all: unset;
  color: var(--blanc);
  font-weight: 500;
  font-family: 'Comfortaa', sans-serif;
  cursor: pointer;
}

.mail-franja a:hover {
  color: var(--blanc);
  text-decoration: none;
}


.icona-mail {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.6rem;
  fill: var(--blanc);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}


.franja-superior .contenidor-principal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}


/* BARRA NAV SUPERIOR */

.menu-superior {
  background-color: var(--blanc);
  padding: 0.5rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 3rem;
  width: 100%;
  z-index: 10;
}


.menu-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.menu-logo {
  flex-shrink: 0;
}


.menu-login .login-icon {
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  transition: transform 0.2s;
  color: var(--blau_fort_MD); /* o un altre color si vols */
}

.menu-login .login-icon:hover {
  transform: scale(1.05);
  color: var(--blau_fluix_MD); /* opcional per a hover */
}


.menu-navegacio {
  display: flex;
  gap: 4rem;              /* Per separar els textos dels enllaços del menu superior */
  align-items: center;
}

.menu-navegacio a {
  text-decoration: none;
  font-weight: 600;
  font-size:var(--text_enllaços_menu_principal);
  font-family: 'Comfortaa', sans-serif;
  color: var(--blau_fort_MD);
  transition: color 0.2s;
}

.menu-navegacio a:hover {
  color: var(--blau_fluix_MD);
}

/* LOGO BARRA SUPERIOR */

.logo {
  height: 4.2rem;             /* Mida logo Material didàctic */ 
  margin-left: 0rem;          /* Distància del logo a la part esquerra -- 0 correspon a mida contenidor 1170 px */
}

/* CONTINGUT PRINCIPAL */

main.contenidor-imatge {
  position: relative;             /* per a posicionar l'atribució */
  padding-top: 5rem;              /* espai pel menú superior */
  height: calc(100vh - 12rem);    /* ocupa tot l'espai restant fins al footer */
  overflow: hidden;
}

main.contenidor-imatge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TEXT ATRIBUCIÓ IMATGE FREEPIK */

.atribucio {
  position: relative;
  bottom: 100px;
  width: 100%;
  text-align: center;
  padding-top: 1rem;                    /* Per ajustar l'altura del text d'atribució, a numero més gran mes avall */
  font-size:var(--text_atribucio_Freepik);
  color:var(--blanc);
  text-shadow: 1px 1px 3px black;
  z-index: 2; 
}

.atribucio a {
  color:var(--blanc);
  text-decoration: underline;
}

/* FOOTER */

.menu-inferior {
  background-color:var(--gris_fluix);
  padding: 1rem 0.5rem;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.menu-inferior a {
  margin: 0 1rem;
  text-decoration: none;
  color:var(--gris_fort_tipografia);
  font-size:var(--text_footer_legals);
  font-weight: 500;
  
}

/* Estil per l’enllaç de configuració de cookies de Iubenda 

.menu-inferior a._iub_cs_activate {
  margin-left: 1rem;
}

*/


.drets-reservats {
  font-size: var(--text_footer_legals);
  margin-top: 1rem;
  color: var(--gris_fort_tipografia);
  font-weight: 500;


/* MEDIA QUERYS */

@media (max-width: 600px) {
  .atribucio {
    font-size: 0.75rem;
  }

  .menu-inferior a {
    display: block;
    margin: 0.5rem 0;
  }

  .menu-superior {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    margin-bottom: 1rem;
    height: 60px;             /* Logo mes petit per smartphone */
  }
}



/* LOGIN */

.login-container {
  max-width: 400px;
  margin: 10rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  background-color:var(--blau_fluix);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  z-index: 10; 
}

.login-container h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.login-container input {
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 1.6rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-sizing: border-box;
}

.login-container button {
  width: 100%;
  padding: 1rem;
  font-size: 1.6rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.login-container button:hover {
  background-color: #333;
}

.login-container .error {
  color: red;
  margin-top: 1rem;
  font-size: 1.4rem;
}

/* ZONA MESTRES */

.zona-mestres-container {
  max-width: 450px;
  margin: 12rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 1.2rem;
  background-color: #f8f8f8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  z-index: 10;
}

.zona-mestres-container h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.zona-mestres-container button {
  width: 100%;
  padding: 1rem;
  font-size: 1.6rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.zona-mestres-container button:hover {
  background-color: #333;
}