/* Homepage: het filtersysteem met de hulpactoren.
   Kleuren, lettertype, header, knoppen en footer staan in huisstijl.css. */

  /* ---------- Welcome ---------- */
  section.welcome{
    background:var(--ms-white);
    padding:48px 24px 32px;
    border-bottom:1px solid var(--ms-border);
  }
  section.welcome h1{font-size:clamp(30px,5vw,46px);}
  section.welcome .sub{
    color:var(--ms-orange);text-transform:uppercase;font-weight:700;
    letter-spacing:.06em;font-size:15px;margin-bottom:10px;
  }
  section.welcome p{margin:0 0 14px;max-width:820px;}

  /* Wegwijzer voor wie hier voor het eerst komt */
  .intro{max-width:820px;margin:18px 0 6px;}
  .intro .lead{
    font-size:clamp(18px,2.2vw,22px);font-weight:600;line-height:1.4;color:var(--ms-navy);
    border-left:4px solid var(--ms-orange);padding-left:18px;margin:0 0 16px;
  }
  .intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px;}
  .intro-note{font-size:14px;color:var(--ms-text);margin:0;}
  #welcome-body{max-width:820px;margin-top:26px;padding-top:22px;border-top:1px solid var(--ms-border);}
  #welcome-body p{margin:0 0 14px;}

  /* ---------- Filter panel ---------- */
  section.filters{background:var(--ms-lightblue);padding:36px 24px;border-bottom:1px solid var(--ms-border);}
  section.filters h2{font-size:26px;margin-bottom:20px;}
  .filter-grid{
    display:grid;gap:20px 24px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
  .fgroup{display:flex;flex-direction:column;}
  .fgroup label{
    font-size:15px;font-weight:700;color:var(--ms-navy);margin-bottom:6px;
  }
  .fgroup label .req{color:var(--ms-orange);}
  select{
    font-family:inherit;font-size:15px;font-weight:500;
    padding:11px 14px;border:1px solid var(--ms-border);border-radius:var(--radius);
    background:var(--ms-white);color:var(--ms-text);
    appearance:none;cursor:pointer;width:100%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23146694'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;
    transition:all .25s ease-in-out;
  }
  select:focus{outline:none;border-color:var(--ms-blue);box-shadow:0 0 0 3px rgba(20,102,148,.15);}
  select:disabled{background:var(--ms-lightgray);color:#9aa5ad;cursor:not-allowed;}

  .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center;}
  .count{font-size:15px;color:var(--ms-text);font-weight:700;margin-left:auto;}

  /* ---------- Results ---------- */
  section.results{padding:40px 24px 60px;}
  section.results .container{max-width:1100px;}
  .results-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
  .results-head h2{font-size:26px;margin:0;}
  .cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
  .card{
    border:1px solid var(--ms-border);border-radius:var(--radius);background:var(--ms-white);
    padding:22px 22px 20px;display:flex;flex-direction:column;
    box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease;
  }
  .card:hover{box-shadow:0 6px 18px rgba(7,58,87,.14);transform:translateY(-2px);}
  .card h3{font-size:20px;margin-bottom:6px;}
  .card .where{
    display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;padding:3px 12px;border-radius:var(--radius-pill);
    margin-bottom:12px;align-self:flex-start;
  }
  .where.op{background:var(--ms-blue);color:var(--ms-white);}
  .where.ext{background:var(--ms-orange);color:var(--ms-white);}
  .card p.excerpt{font-size:15px;line-height:1.6;color:var(--ms-text);margin:0 0 16px;flex:1;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .card button.more{
    align-self:flex-start;font-family:inherit;font-weight:700;font-size:14px;
    background:transparent;border:2px solid var(--ms-blue);color:var(--ms-blue);
    border-radius:var(--radius-pill);padding:8px 22px;cursor:pointer;
    transition:all .2s;text-transform:uppercase;letter-spacing:.02em;
  }
  .card button.more:hover{background:var(--ms-blue);color:var(--ms-white);}

  .empty{text-align:center;padding:50px 20px;color:var(--ms-text);}
  .empty svg{opacity:.5;margin-bottom:14px;}
  .placeholder{text-align:center;padding:40px 20px;color:var(--ms-text);font-size:16px;}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(7,58,87,.6);
    display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
    opacity:0;transition:opacity .25s ease;
  }
  .overlay.open{display:flex;opacity:1;}
  .modal{
    background:var(--ms-white);max-width:645px;width:100%;max-height:88vh;overflow:auto;
    border-radius:var(--radius);box-shadow:0 12px 40px rgba(7,58,87,.3);
    transform:scale(.96);transition:transform .25s ease;
  }
  .overlay.open .modal{transform:scale(1);}
  .modal-head{
    background:var(--ms-blue);color:var(--ms-white);
    padding:22px 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    position:sticky;top:0;
  }
  .modal-head h3{margin:0;font-size:24px;color:var(--ms-white);line-height:1.15;}
  .modal-head .where{margin-top:10px;}
  .modal-close{
    background:transparent;border:none;color:var(--ms-white);font-size:30px;line-height:1;
    cursor:pointer;padding:0 4px;flex-shrink:0;
  }
  .modal-close:hover{color:var(--ms-orange);}
  .modal-body{padding:26px;}
  .modal-body h4{
    font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ms-orange);
    margin:0 0 8px;font-weight:700;
  }
  .modal-body .uitleg{font-size:15px;line-height:1.7;white-space:pre-line;margin:0 0 24px;}
  .modal-body .contact{font-size:15px;line-height:1.7;white-space:pre-line;
    padding:16px 18px;border-radius:var(--radius);background:var(--ms-lightblue);border-left:4px solid var(--ms-orange);}
  .modal-body .contact a{color:var(--ms-blue);word-break:break-word;}

  /* feedback popup trigger */
  .feedback-bar{background:var(--ms-lightgray);color:var(--ms-text);padding:26px 24px;text-align:center;}
  .feedback-bar button{
    font-family:inherit;font-weight:700;font-size:15px;background:transparent;
    color:var(--ms-blue);border:2px solid var(--ms-blue);border-radius:var(--radius-pill);
    padding:9px 26px;cursor:pointer;transition:all .2s;
  }
  .feedback-bar button:hover{background:var(--ms-blue);color:var(--ms-white);}


  @media(max-width:600px){
    .count{margin-left:0;width:100%;}
  }