/* =========================================================
   Kermis.nu — Organizer styles (globaal voor alle pagina's)
   ========================================================= */

/* ---------- Kleuren & variabelen ---------- */
:root{
  --bg-image: url("/kermisorganisator/background.jpg");
  --pink:   #e6007e;
  --purple: #5b2ea6;
  --green:  #35e06e;
  --orange: #ff9d2f;
  --card-bg: rgba(255,255,255,.12);
  --card-brd: rgba(255,255,255,.30);
  --glass: blur(10px) saturate(120%);
}

/* ---------- Basis / reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: #fff;
  background: #1b0b30;
}
body::before{
  content:"";
  position: fixed; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,0,42,.85) 0%, rgba(24,0,42,.65) 30%, rgba(24,0,42,.85) 100%),
    var(--bg-image) center/cover no-repeat fixed;
  z-index: -1;
}

/* Focus zichtbaar maar subtiel */
:focus-visible{
  outline: 2px dashed #ffd18f;
  outline-offset: 2px;
}

/* ---------- Containers & Cards ---------- */
.wrap{ max-width:1100px; margin:40px auto; padding:20px; }

.card{
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  margin-bottom: 30px;
}

header, .header{
  position: relative;
  padding: 24px;
  background: linear-gradient(135deg, rgba(230,0,126,.35), rgba(90,46,166,.35));
  border-bottom: 1px solid var(--card-brd);
}
header img.logo, .header img.logo{
  position: absolute; right: 16px; top: 16px;
  height: 40px; width: auto;
}
@media (max-width:600px){
  header img.logo, .header img.logo{ height: 28px; right: 12px; top: 12px; }
}
main, .section{ padding: 20px; }

/* ---------- Typografie & links ---------- */
h1,h2,h3{ margin-top:0; }
a, a:visited{ color:#fff; text-decoration: underline; }
a:hover{ color:#ffd18f; }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--pink), #ff4fb0);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  transition: background .2s ease, color .2s ease, transform .08s ease;
}
.btn:hover{
  background: linear-gradient(135deg, #ff4fb0, var(--pink));
  color:#fff; /* expliciet zodat de tekstkleur goed blijft op hover */
}
.btn:active{ transform: translateY(1px); }
.btn + .btn{ margin-left: 8px; }

/* ---------- Grid voor homepage (tegels) ---------- */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card-tile{ padding:16px; }

/* ---------- Topgrid (Belangrijk + Promo naast elkaar) ---------- */
.topgrid{
  display:flex; flex-wrap:wrap; gap:20px; margin-bottom:30px;
}
.topgrid > div{
  flex:1 1 300px;
  background: var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:12px;
  padding:20px;
}

/* ---------- Notities / Alerts ---------- */
.note{
  margin:14px 0; padding:12px;
  background: rgba(255,255,255,.12);
  border:1px solid var(--card-brd);
  border-radius:12px;
}

/* ---------- Belangrijk-blok met waarschuwing bullets ---------- */
.belangrijk ul{ margin:10px 0; padding:0; list-style:none; }
.belangrijk li{
  position:relative; padding-left:26px; margin:6px 0;
}
.belangrijk li::before{
  content:"⚠"; position:absolute; left:0; top:0;
  color:#ffd66e; font-weight:bold;
}

/* ---------- Promo-blok met groene vinkjes ---------- */
.promo h3{ margin:0 0 6px; }
.promo ul{ margin:6px 0 0 0; padding:0; list-style:none; }
.promo li{
  position:relative; padding-left:28px; margin:8px 0;
}
.promo li::before{
  content:"✔"; position:absolute; left:0; top:0;
  color: var(--green); font-weight:bold;
}

/* ---------- Formulieren ---------- */
label{ display:block; margin:10px 0 4px; font-weight:600; }

input:not([type=checkbox]):not([type=radio]),
textarea,
select{
  width:100%; max-width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:1rem;
  color:#111; background:#fff;
}

/* Zorg dat checkboxes niet 100% breed worden */
input[type="checkbox"],
input[type="radio"]{
  width:auto; height:auto; display:inline-block; margin:0;
}

/* Grids in formulieren */
.row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-2{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(240px,1fr)); }
.pair{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width:720px){
  .grid-2{ grid-template-columns:1fr; }
}

/* Fieldset/legend */
fieldset{
  border:1px solid var(--card-brd);
  border-radius:12px;
  padding:16px;
  margin:18px 0;
}
legend{ padding:0 8px; font-weight:700; }

/* Grote selectielijst / multiselect container */
.selectbox{
  height:380px; overflow:auto;
  border:1px solid #ccc; border-radius:8px;
  background:#fff; color:#111; padding:10px;
}

/* Lijst met checkboxes (data-toevoegen) */
.klist label{
  display:flex; align-items:center; gap:8px;
  padding:6px 4px; border-bottom:1px solid #eee;
  margin:0;
}
.klist label:last-child{ border-bottom:0; }

/* Filterveld */
.filter{
  width:100%; padding:10px; border-radius:8px;
  border:1px solid #ccc; background:#fff; color:#111;
}

/* ---------- Accordion (data-toevoegen) ---------- */
.accordion{
  border:1px solid var(--card-brd);
  border-radius:10px;
  margin:12px 0;
  background: rgba(255,255,255,.08);
}
.acc-head{
  padding:12px 14px; font-weight:700; cursor:pointer;
  display:flex; justify-content:space-between;
}
.acc-head span{ opacity:.8; font-weight:400; }
.acc-body{ display:none; padding:14px; }

/* ---------- Bestandsupload-knop netjes stylen ---------- */
input[type="file"]{
  color:#111; background:#fff; border:1px solid #ccc; border-radius:8px; padding:6px;
}
input[type="file"]::file-selector-button{
  margin-right:10px;
  border:0;
  border-radius:8px;
  padding:8px 12px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color:#fff; font-weight:700; cursor:pointer;
}
input[type="file"]:hover::file-selector-button{
  background: linear-gradient(135deg, var(--pink), var(--purple));
}

/* ---------- Kleine utilities ---------- */
.center{ text-align:center; }
.muted{ color:#eee; font-size:.92rem; }
.hidden{ display:none !important; }

/* ---------- Bedanktpagina mini-tweaks ---------- */
.thanks .btn{ margin-top:10px; }

/* ---------- Specifiek: knoppen binnen formulieren op mobiel niet full-width forceren */
button{ font: inherit; }

/* ===== Organizer top nav ===== */
.org-nav{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  background: linear-gradient(135deg, rgba(230,0,126,.28), rgba(90,46,166,.28));
  border-bottom: 1px solid var(--card-brd);
}
.org-nav__inner{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.org-nav__brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:6px 8px; border-radius:10px;
}
.org-nav__brand img{ height:28px; width:auto; display:block; }
.org-nav__brand span{ font-weight:800; color:#fff; letter-spacing:.2px; }

.org-nav__links{
  display:flex; gap:10px; margin-left:auto; flex-wrap:wrap;
}
.org-nav__links a{
  display:inline-block; padding:8px 12px; border-radius:10px;
  color:#fff; text-decoration:none; font-weight:700;
  border:1px solid transparent; transition: .15s ease;
}
.org-nav__links a:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--card-brd);
}
.org-nav__links a.active{
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
}
.org-nav__links a.pill{
  border:1px dashed rgba(255,255,255,.45);
  opacity:.9;
}

/* Brand compact: logo boven 'Organisator' */
.org-nav__brand{
  display:flex; 
  flex-direction:column; 
  align-items:flex-start; 
  gap:6px;
}
.org-nav__brand img{ height:32px; width:auto; display:block; }
.org-nav__brand span{ line-height:1; font-weight:800; color:#fff; }

/* Hou links compact op één regel */
.org-nav__links{ display:flex; gap:10px; flex-wrap:nowrap; }
.org-nav__links a{
  white-space:nowrap;
  padding:8px 12px;
  font-weight:700;
}

/* Lange/korte labels voor krappe layouts */
.lbl-short{ display:none; }
@media (max-width: 1040px){
  .lbl-long{ display:none; }
  .lbl-short{ display:inline; }
}


/* Stap 1: een tikje compacter */
@media (max-width: 1200px){
  .org-nav__links a{ padding:7px 10px; font-size:0.95rem; }
  .org-nav__links{ gap:8px; }
}

/* Stap 2: nog iets compacter */
@media (max-width: 1120px){
  .org-nav__links a{ padding:6px 9px; font-size:0.92rem; }
  .org-nav__links{ gap:7px; }
}

/* Stap 3: laatste duwtje */
@media (max-width: 1060px){
  .org-nav__links a{ padding:6px 8px; font-size:0.9rem; }
  .org-nav__links{ gap:6px; }
}

/* Mobiel: wrap/cards full width zonder grote marges */
@media (max-width: 720px){
  .wrap{
    max-width: 100%;
    margin: 0;
    padding: 10px;
  }
  .card{
    border-radius: 0;
    margin-bottom: 20px;
  }
  .promo li{
    margin:4px 0;
    padding-left: 20px; 
    font-size: .9rem;
    line-height: 1.4;
  }
  .promo li::before{ top: 2px; }
  .features{ margin-top: 6px; padding-left: 0; }

  .features li{
    /* override desktop flex-gedrag */
    display: block !important;
    position: relative;
    margin: 4px 0;
    padding-left: 22px;          /* ruimte voor het vinkje */
    font-size: .92rem;
    line-height: 1.45;
    gap: 0 !important;           /* voor de zekerheid */
  }

  .features li::before{
    position: absolute;
    left: 0;
    top: .25em;                  /* vinkje netjes uitlijnen */
    margin: 0;
  }

  .features li strong{
    font-weight: 700;
    display: inline;             /* geen kunstmatige kolom */
  }
}

@media (max-width:680px){
  .org-nav__inner{ padding:8px 10px; }
  .org-nav__links{ gap:6px; }
  .org-nav__links a{ padding:7px 10px; font-weight:700; }
}

/* ==== Organizer nav (mobile polish) ==== */
.org-nav { position: sticky; top: 0; z-index: 50; width: 100%; }
.org-nav__inner{
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
}
.org-nav__brand{ gap: 10px; text-decoration: none; }
.org-nav__brand img{ height: 32px; }
.org-nav__brand span{ display:block; line-height:1; }

.org-nav__toggle{
  display:none; margin-left: 8px;
  width: 38px; height: 34px; border: 1px solid var(--card-brd);
  background: rgba(255,255,255,.10); border-radius: 8px; cursor: pointer;
}
.org-nav__toggle span{
  display:block; height:2px; background:#fff; margin:6px 7px;
}

.org-nav__links{
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

@media (max-width: 820px){
  .org-nav__inner{
    grid-template-columns: 1fr auto; grid-template-areas:
      "brand toggle"
      "links links";
  }
  .org-nav__brand{ grid-area: brand; display:flex; flex-direction:column; align-items:flex-start; }
  .org-nav__brand img{ height: 30px; }
  .org-nav__brand span{ font-size:.95rem; opacity:.95; }
  .org-nav__toggle{ display:block; grid-area: toggle; }
  .org-nav__links{
    grid-area: links;
    display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px;
    max-height:0; overflow:hidden; transition:max-height .2s ease;
  }
  .org-nav__links.open{ max-height: 360px; } /* toggled open */
  .org-nav__links a{ text-align:center; }
}
@media (max-width: 420px){
  .org-nav__links{ grid-template-columns: 1fr; }
}


/* Einde stylesheet */