/* SMRA SchaakTools – mini-launcher
   © Schaak maar raak Academy
   Zoals de toolsite, verkleind: houten achtergrond, donkere header, crème panelen (één per groep).
   Links de ZETWERK-groepen, rechts de overige tools. */

/* Lettertype van de eigen server (map fonts/), niet van Google */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
}

/* Zelfde kleuren als de toolsite */
:root {
  --donker:     #34271a;  /* header */
  --donker-2:   #251b11;
  --creme:      #f5eedf;  /* panelen */
  --lichtbeige: #ede4cf;  /* vlakje onder de muis */
  --beige:      #c8b89a;
  --goud:       #b8924a;
  --donkergoud: #7d5c1f;  /* kopjes in de panelen */
  --bruin:      #5a4632;
  --zwartbruin: #1a1209;
}

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

body {
  background: var(--zwartbruin) url('../images/wood/dark.webp') repeat;  /* houten achtergrond, zoals de toolsite */
  color: var(--zwartbruin);
  font-family: Montserrat, system-ui, sans-serif;
  min-height: 100vh;
}

.launcher { width: min(500px, 100%); margin: 24px auto 0; padding: 12px; }

/* Header: donker paneel, zoals de header van de toolsite */
.kop {
  background: linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.kop h1 { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
/* Titel is een link naar de toolsite */
.kop h1 a { display: block; padding: 12px 16px; color: var(--creme); text-decoration: none; border-radius: 8px; }
.kop h1 a:hover, .kop h1 a:focus-visible { background: color-mix(in srgb, var(--goud) 12%, transparent); outline: none; }
.kop h1 span { color: var(--goud); }

/* Twee kolommen met panelen; is één kolom leeg, of het scherm smal, dan één kolom */
.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.kolommen.enkel { grid-template-columns: 1fr; }
.kolom { display: grid; gap: 12px; }
.kolom:empty { display: none; }
@media (max-width: 400px) {
  .kolommen { grid-template-columns: 1fr; }
}

/* Paneel per groep: crème, zonder rand, met zachte schaduw */
.groep {
  background: var(--creme);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  padding: 12px 0 8px;
  overflow: hidden;
}
/* Kopje zoals "NIEUW" op de toolsite */
.groep h2 {
  padding: 0 16px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--donkergoud);
}

/* Eén regel per tool */
.tools { list-style: none; padding: 0; }
.tools a {
  display: block; padding: 5px 16px; font-size: 14px; font-weight: 500;
  color: var(--zwartbruin); text-decoration: none;
}
.tools a:hover, .tools a:focus-visible { background: var(--lichtbeige); color: var(--donkergoud); outline: none; }

.leeg {
  margin-top: 12px; padding: 12px 16px; border-radius: 8px;
  background: var(--creme); font-size: 13px; color: var(--bruin);
}

/* Installeerknop onder de panelen (op het hout), verdwijnt na installeren */
.installeer {
  display: block; margin: 4px auto 16px; padding: 8px 18px; border-radius: 999px;
  background: var(--donkergoud); border: 0; cursor: pointer;
  font: 600 13px Montserrat, sans-serif; color: var(--creme);
}
.installeer:hover, .installeer:focus-visible { filter: brightness(1.15); outline: none; }
.installeer[hidden] { display: none; }

/* Copyrightregel onder de panelen: zelfde donkere balk als de kop, link naar de hoofdsite */
.voet {
  margin-top: 12px;
  background: linear-gradient(135deg, var(--donker), var(--donker-2));
  border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  text-align: center;
}
.voet a {
  display: block; padding: 6px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--creme); text-decoration: none;
}
.voet a:hover, .voet a:focus-visible { background: color-mix(in srgb, var(--goud) 12%, transparent); outline: none; }

/* Als geïnstalleerde app: geen marge bovenaan, het hout vult de rest van het venster */
@media (display-mode: standalone) {
  .launcher { width: auto; margin: 0; }
}