/* -------------------------------------------------------
   TIPOGRAFIA — LOCALS
------------------------------------------------------- */

/* EB Garamond */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Regular.woff2') format('woff2'),
       url('../fonts/EBGaramond-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Italic.woff2') format('woff2'),
       url('../fonts/EBGaramond-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Bold.woff2') format('woff2'),
       url('../fonts/EBGaramond-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto (per al menú lateral) */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
       url('../fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------
   VARIABLES GLOBALS
------------------------------------------------------- */

:root {
  --text-max: 65ch;
  --text-max-mobile: 50ch;
  --lh-desktop: 1.15;
  --lh-mobile: 1.15;
  --fs-desktop: clamp(1.5rem, 2vw, 2rem);
  --fs-mobile: 1.3rem;
  --menu-grey: #B4B4A8;
  --accent:#FF3C00;
  --topbar-h-desktop: 88px;
  --topbar-h-mobile: 56px;
  --hero-height: 180px;
}

/* -------------------------------------------------------
   RESET
------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-desktop);
  line-height: var(--lh-desktop);
  color: #111;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.loaded {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------------------------------------
   LAYOUT
------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: 1fr 38%;
  max-width: 1400px;
  margin: 0 auto;
  height: 100vh;              /* important: ocupa tota l’alçada del viewport */
  overflow: hidden;           /* evita que la dreta faci scroll */
}

.accent {
  color: var(--accent);
}

/* -------------------------------------------------------
   COLUMNA DE TEXT
------------------------------------------------------- */

.text .site-header {
  margin-bottom: 1.3em;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* contingut a dalt per defecte */
  
  max-width: var(--text-max);
  padding: 1rem;
  overflow-y: auto;           /* només aquesta columna fa scroll */
  height: 100vh;              /* garanteix que l’scroll funcioni correctament */
}

.text,
.text * {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  line-height: var(--lh-desktop);
  font-size: var(--fs-desktop);
}

.text * { margin-bottom: 0.5em; }

.index-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.index-links a {
  text-decoration: none;
  color: inherit;
}

.index-links a:hover,
.back-link:hover {
  color: var(--accent) !important;
}

.back-link {
  text-decoration: none;
  color: inherit;
}

.text .back-link {
  align-self: flex-start;
  margin-top: auto;              /* això és la clau: “baixa” el botó si hi ha espai */
  padding-top: 2rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

/* Nom del lloc a les pàgines interiors */

.site-title {
  text-decoration: none;
  color: inherit;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: var(--fs-desktop);
  line-height: var(--lh-desktop);
}

/* -------------------------------------------------------
   COLUMNA DRETA
------------------------------------------------------- */

.right-column {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  position: sticky;           /* o fixed per a total immobilitat */
  top: 0;
  overflow: hidden;           /* evita que faci scroll */
}

/* Franja gris superior (menú) */



/* Icona hamburguesa */



/* Posicions inicials */

/* Estat obert → forma una X exactament centrada */



/* Imatge de fons */
.visual {
  background-size: cover;
  background-position: center;
  height: 100%;
}

/* -------------------------------------------------------
   MENÚ MÒBIL
------------------------------------------------------- */





/* -------------------------------------------------------
   FONS PER A CADA PÀGINA
------------------------------------------------------- */

.page-home h1 {
  margin-bottom: 0;
}

.page-home .index-links a {
  color: var(--menu-grey);
}


/* .page-home .visual {
  background-image: url("../img/bg-home.png");
}

.page-crafting .visual {
  background-image: url("../img/bg-crafting.png");
} */

.visual {
  /* La imatge de fons s'aplica via JavaScript de forma aleatòria */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* -------------------------------------------------------
   FORMULARI DE CONTACTE
------------------------------------------------------- */

.contact-form { margin: 1.25rem 0 0; }
.contact-form .form-row { display: flex; align-items: center; gap: 0.75rem; }
.contact-form .email-input {
  flex: 0 1 22rem;
  max-width: 100%;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 0.6rem;
  background: #e9e9e3;
  font-size: 1.05rem;
}
.contact-form .send-button {
  border: 0;
  border-radius: 999px;
  background: #e9e9e3;
  color: #333;
  padding: 0.8rem 1.1rem;
  font-size: 1.05rem;
  cursor: pointer;
}
.contact-form .send-button:hover { filter: brightness(0.96); }
.contact-form .form-disclaimer {
  margin-top: 0.6rem;
  color: #9a9a92;
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* -------------------------------------------------------
   RESPONSIVE — MÒBIL (FRANJA SUPERIOR)
------------------------------------------------------- */

@media (max-width: 650px) {

  .layout {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* La imatge de fons (franja superior) */
  .right-column {
    order: -1;
    height: auto;
    overflow: visible;
    z-index: 50; /* perquè es vegi l'aspa */
  }

  .visual {
    height: var(--hero-height);
    /* La imatge de fons s'aplica via JavaScript de forma aleatòria */
  }

  /* Zona de text amb la hamburguesa a la dreta */
  .text {
    position: relative;
    padding: 1.5rem 4rem 3rem 1.5rem;
    max-width: var(--text-max-mobile);
  }

  .text,
  .text * {
    line-height: var(--lh-mobile);
    font-size: var(--fs-mobile);
  }

  /* El que abans era la franja gris ara és transparent */



  /* Menú mòbil: sorgeix des de sota la imatge */




}




/* -------------------------------------------------------
   TRANSICIÓ ENTRE PÀGINES (SLIDE)
------------------------------------------------------- */

body {
  transition: opacity 0.4s ease, transform 0.5s ease;
}

body.loaded {
  opacity: 1;
  transform: translateX(0);
}