/* Gedeelde huisstijl van The Meat Market Portaal.
   Eén set kleuren, lettertypen en afrondingen voor inloggen, portaal en alle modules.
   Pagina's gebruiken alleen deze tokens (--t-...), geen eigen kleuren. */
:root {
  /* vlakken en tekst: neutralen met een lichte groene zweem */
  --t-bg: #f5f7f3; --t-vlak: #ffffff; --t-vlak-2: #eef2ea; --t-lijn: #dfe5d9;
  --t-inkt: #1b2118; --t-grijs: #5d6858;
  /* merk: het groen uit het logo */
  --t-groen: #339b00; --t-groen-donker: #2a8000; --t-groen-zacht: #e5f2db; --t-op-groen: #ffffff;
  /* betekenis */
  --t-warn: #a86200; --t-warn-zacht: #fbeed8; --t-crit: #b42318; --t-crit-zacht: #fbe4e1;
  --t-ok: #2f7d32; --t-ok-zacht: #e1f1e1; --t-info: #33658a; --t-info-zacht: #e2edf5;
  --t-note-bg: #fff4c2; --t-note-fg: #5a4500; --t-casper-bg: #fff7cf; --t-casper-lijn: #e8c84a;
  /* letters en vorm */
  --t-kop: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  --t-tekst: 'Asap', 'Segoe UI', Arial, sans-serif;
  --t-r: 12px; --t-r-klein: 8px;
  --t-schaduw: 0 10px 30px rgba(20, 30, 10, .10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-bg: #10140e; --t-vlak: #181e15; --t-vlak-2: #20281c; --t-lijn: #2f3a2a;
    --t-inkt: #e8ede3; --t-grijs: #a0ab99;
    --t-groen: #5cc22a; --t-groen-donker: #78d548; --t-groen-zacht: #21341a; --t-op-groen: #0e1a07;
    --t-warn: #e3a33a; --t-warn-zacht: #3a2c14; --t-crit: #f07466; --t-crit-zacht: #3d1d19;
    --t-ok: #7bc87e; --t-ok-zacht: #1d3320; --t-info: #86b6d8; --t-info-zacht: #1b2c39;
    --t-note-bg: #3b3315; --t-note-fg: #f3e3a0; --t-casper-bg: #2f2a12; --t-casper-lijn: #8a7424;
    --t-schaduw: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --t-bg: #10140e; --t-vlak: #181e15; --t-vlak-2: #20281c; --t-lijn: #2f3a2a;
  --t-inkt: #e8ede3; --t-grijs: #a0ab99;
  --t-groen: #5cc22a; --t-groen-donker: #78d548; --t-groen-zacht: #21341a; --t-op-groen: #0e1a07;
  --t-warn: #e3a33a; --t-warn-zacht: #3a2c14; --t-crit: #f07466; --t-crit-zacht: #3d1d19;
  --t-ok: #7bc87e; --t-ok-zacht: #1d3320; --t-info: #86b6d8; --t-info-zacht: #1b2c39;
  --t-note-bg: #3b3315; --t-note-fg: #f3e3a0; --t-casper-bg: #2f2a12; --t-casper-lijn: #8a7424;
  --t-schaduw: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- gedeelde kopbalk (portaal en modules) ---------- */
.tmm-balk { background: var(--t-vlak); border-bottom: 1px solid var(--t-lijn); position: sticky; top: 0; z-index: 10; font-family: var(--t-tekst); }
.tmm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 20px; min-height: 58px; flex-wrap: wrap; }
.tmm-merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t-inkt); }
.tmm-merk img { width: 34px; height: 34px; border-radius: 7px; display: block; }
.tmm-merk span { font-family: var(--t-kop); font-weight: 600; font-size: 16px; line-height: 1.1; }
.tmm-merk small { display: block; font-family: var(--t-tekst); font-weight: 400; font-size: 12px; color: var(--t-grijs); }
.tmm-nav { display: flex; gap: 2px; align-items: center; font-size: 14px; }
.tmm-nav a { text-decoration: none; padding: 7px 11px; border-radius: var(--t-r-klein); font-weight: 500; color: var(--t-grijs); transition: background .15s, color .15s; }
.tmm-nav a:hover { color: var(--t-inkt); background: var(--t-vlak-2); }
.tmm-nav a[aria-current="page"] { color: var(--t-groen-donker); background: var(--t-groen-zacht); font-weight: 600; }
.tmm-nav i { font-style: normal; color: var(--t-lijn); padding: 0 2px; }
.tmm-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--t-grijs); }
.tmm-rechts b { color: var(--t-inkt); font-weight: 600; }
.tmm-rechts .tmm-uit { text-decoration: none; color: var(--t-grijs); padding: 6px 10px; border-radius: var(--t-r-klein); border: 1px solid var(--t-lijn); font-weight: 500; transition: background .15s, color .15s; }
.tmm-rechts .tmm-uit:hover { background: var(--t-vlak-2); color: var(--t-inkt); }
.tmm-balk a:focus-visible { outline: 3px solid color-mix(in srgb, var(--t-groen) 45%, transparent); outline-offset: 2px; }
@media (max-width: 760px) { .tmm-rechts { margin-left: 0; width: 100%; justify-content: space-between; padding-bottom: 8px; } }

/* ---------- achtergrond (portaal en modules): zachte groene gloed, stippenraster en een vage koe ---------- */
body.tmm-achtergrond {
  background:
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--t-groen) 13%, transparent), transparent 70%),
    radial-gradient(760px 520px at 0% 100%, color-mix(in srgb, #8a5a2b 11%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--t-grijs) 22%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--t-bg);
  background-attachment: fixed;
}
body.tmm-achtergrond::before {
  content: ""; position: fixed; z-index: -1; right: -4vw; bottom: -6vh; width: min(58vw, 820px); aspect-ratio: 4 / 3;
  background: url('https://www.themeatmarket.eu/wp-content/uploads/2025/05/koe.webp') center / cover no-repeat;
  filter: grayscale(1) contrast(1.1); opacity: .07; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
          mask-image: radial-gradient(closest-side, #000 45%, transparent);
}
:root[data-theme="dark"] body.tmm-achtergrond::before { opacity: .10; filter: grayscale(1) brightness(1.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.tmm-achtergrond::before { opacity: .10; filter: grayscale(1) brightness(1.4); } }

/* ---------- Made by Trimessa (linksonder) ---------- */
.tmm-door { position: fixed; left: 14px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
  font: 500 12px/1 var(--t-tekst); color: var(--t-grijs); text-decoration: none; padding: 6px 10px 6px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--t-vlak) 80%, transparent); border: 1px solid var(--t-lijn); backdrop-filter: blur(6px);
  opacity: .8; transition: opacity .15s, color .15s; }
.tmm-door:hover { opacity: 1; color: var(--t-inkt); }
.tmm-door img { display: block; }
@media (max-width: 1400px) { .tmm-door:not(.vast) { position: static; margin: 8px 16px 18px; width: max-content; } }

/* ---------- taalknop NL | EN ---------- */
.tmm-taal { display: inline-flex; border: 1px solid var(--t-lijn); border-radius: 999px; padding: 2px; background: var(--t-vlak); font-family: var(--t-tekst); }
.tmm-taal button { font: 600 12px/1 var(--t-tekst); border: 0; background: none; color: var(--t-grijs); padding: 5px 9px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.tmm-taal button:hover { color: var(--t-inkt); }
.tmm-taal button[aria-pressed="true"] { background: var(--t-groen); color: var(--t-op-groen); }
.tmm-taal button:focus-visible { outline: 3px solid color-mix(in srgb, var(--t-groen) 45%, transparent); outline-offset: 1px; }
.kop .tmm-taal { margin-left: auto; align-self: flex-start; }
/* de knop mag geen opmaak van gewone knoppen op de pagina overnemen (bijv. de brede inlogknop) */
.tmm-taal { flex: none; }
.tmm-taal button, .kaart .tmm-taal button { width: auto; height: auto; min-height: 0; margin: 0; box-shadow: none; transform: none; letter-spacing: 0; padding: 5px 9px; font-size: 12px; border-radius: 999px; }
.tmm-taal button:not([aria-pressed="true"]), .kaart .tmm-taal button:not([aria-pressed="true"]) { background: none; color: var(--t-grijs); }