@font-face {
  font-family: 'ClanFont';
  src: url('font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #e8e8e0;
  font-family: 'ClanFont', Arial, sans-serif;
  margin: 20px;
}

/* --- Huvud-header för klanen --- */
#clan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background-color: #dedad0;
  border: 3px solid #b8b4a8;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 0 #aaa;
}

#clan-banner img {
  width: 100px;
  height: 100px;
  border: 3px solid #aaa;
  border-radius: 12px;
}

#clan-info {
  flex-grow: 1;
  margin-left: 20px;
}

#clan-name {
  margin: 0;
  font-size: 2em;
  color: #333;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

#clan-description {
  white-space: pre-line;
  margin-top: 10px;
  font-size: 1em;
  color: #333;
  /* ----> DENNA RAD ÄR TILLAGD FÖR ATT FIXA LÄNKEN <---- */
  overflow-wrap: break-word;
}

#clan-meta {
  text-align: right;
  font-size: 1.2em;
  color: #444;
  white-space: nowrap;
}

/* --- Datalista (Desktop) --- */
.row {
  display: flex;
  align-items: center;
  background-color: #f8f8f4;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 12px 24px;
  margin-bottom: 10px;
  box-shadow: 0 2px 0 #aaa;
  font-weight: bold;
  font-size: 1em;
  color: #E7E9EA;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 3px 3px 0 black;
}

.rank {
  width: 50px;
  text-align: left;
}

.name {
  flex-grow: 1;
  text-align: left;
  padding-left: 10px;
}

.donations,
.capital,
.games,
.stars,
.score {
  width: 180px;
  text-align: center;
  padding-left: 0;
}

.row.header {
  background-color: #444;
  color: #fff;
  text-shadow: none;
  font-size: 1em;
  font-weight: bold;
  border: 2px solid #222;
  padding: 10px 24px;
}

/* ------------------------------------------- */
/* --- MOBILANPASSNING (MEDIA QUERIES) --- */
/* ------------------------------------------- */
@media (max-width: 768px) {
  body {
    margin: 10px;
    font-size: 14px; /* Justera bas-fontstorlek för bättre läsbarhet */
  }

  /* --- Header anpassning --- */
  #clan-header {
    flex-direction: column; /* Stapla elementen vertikalt */
    align-items: center;   /* Centrera elementen */
    text-align: center;
  }

  #clan-info {
    margin-left: 0;
    margin-top: 15px;
  }
  
  #clan-name {
    font-size: 1.5em; /* Något mindre text på mobilen */
  }

  #clan-description {
    font-size: 0.9em; /* Minskad textstorlek för beskrivningen */
  }

  #clan-meta {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em; /* Samma storlek som beskrivningen för konsistens */
  }

  /* --- Datalista anpassning --- */
  /* Göm desktop-header på mobil */
  .row.header {
    display: none;
  }

  /* Gör om varje rad till ett "kort" */
  .row {
    flex-direction: column; /* Stapla allt innehåll i raden vertikalt */
    align-items: flex-start; /* Vänsterjustera innehållet i kortet */
    padding: 15px;
  }
  
  /* Justera alla kolumner i kortet */
  .row > div {
    width: 100%; /* Ta upp full bredd */
    text-align: left; /* Vänsterjustera all text */
    padding: 5px 0;
    display: flex; /* Använd flex för att placera etikett och värde */
    justify-content: space-between; /* Placera värdet till höger */
    border-bottom: 1px solid #ddd;
  }
  
  .row > div:last-child {
      border-bottom: none;
  }

  /* Rank och Namn visas speciellt */
  .rank {
      font-size: 1.5em;
      font-weight: bold;
      justify-content: flex-start; /* Ta bort space-between för rank */
  }
  .name {
      font-size: 1.2em;
      color: #333; /* Ändra färg för läsbarhet */
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
      justify-content: flex-start;
  }
  
  /* Använd ::before för att lägga till rubriken framför varje värde */
  .donations::before,
  .capital::before,
  .games::before,
  .stars::before,
  .score::before {
    content: attr(data-label); /* Hämta text från data-label attributet */
    font-weight: normal;
    color: #555;
    text-shadow: none;
    margin-right: 10px;
  }
}