/* --------------------------------------------------------------------------
   busifind.css - BusiFind, de zoeklaag van het BusiMatch Network.

   Twee huisregels van de site zitten hier bewust in:
   1. alles gecentreerd (ook de kaarten), en
   2. elk blok een zachte gekleurde uitloop in zijn eigen kleur.

   De niveau-kleuren (Free/Plus/Pro/Business) staan vast en zijn overal op het
   netwerk dezelfde. Niet aanpassen zonder dat het overal aangepast wordt.

   Server: /public_html/assets/busifind.css
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    --wit:        #ffffff;
    --zwart:      #111111;
    --grijs:      #6b7280;
    --lijn:       #e6e8ee;
    --veld:       #f7f8fb;

    --oranje:     #f97316;   /* BUSI - de merkkleur */
    --blauw:      #2563eb;
    --paars:      #7c3aed;
    --turkoois:   #14b8a6;   /* de eigen accentkleur van FIND */
    --marine:     #1e3a8a;

    /* de drie secties */
    --connect:    var(--oranje);
    --learn:      var(--blauw);
    --tools:      var(--paars);

    --radius:     16px;
    --breedte:    1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--wit);
    color: var(--zwart);
    font: 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    text-align: center;                 /* huisregel: alles gecentreerd */
    overflow-x: hidden;
}

/* de zachte gloed bovenaan, in de kleuren van het logo */
body::before {
    content: "";
    position: fixed;
    inset: -30vh 0 auto 0;
    height: 70vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(45vw 30vh at 30% 40%, rgba(249, 115, 22, .13), transparent 70%),
        radial-gradient(45vw 30vh at 70% 35%, rgba(20, 184, 166, .13), transparent 70%);
}

a { color: var(--marine); }

.wrap {
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Netwerkbalk
   -------------------------------------------------------------------------- */

.net {
    padding: 14px 0 0;
}

.net ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.net a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--lijn);
    background: var(--wit);
    color: var(--grijs);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .15s, border-color .15s, background .15s;
}

.net a:hover,
.net a:focus-visible { color: var(--zwart); border-color: #cfd4e0; }

.net a[aria-current="page"] {
    color: var(--wit);
    background: var(--turkoois);
    border-color: var(--turkoois);
}

/* --------------------------------------------------------------------------
   Kop met het logo
   -------------------------------------------------------------------------- */

.kop { padding: 26px 0 4px; }

.kop img {
    width: 100%;
    max-width: 300px;                   /* duidelijk aanwezig, maar niet dominant */
    height: auto;
    display: block;
    margin: 0 auto;
}

.kop h1 {
    margin: 18px 0 6px;
    font-size: clamp(21px, 3.4vw, 29px);
    font-weight: 800;
    letter-spacing: -.01em;
}

.kop p {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--grijs);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   De zoekbalk
   -------------------------------------------------------------------------- */

.zoek {
    margin: 22px auto 0;
    max-width: 660px;
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.zoek input {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    font-size: 16px;                    /* niet kleiner: iOS zoomt anders in */
    color: var(--zwart);
    background: var(--veld);
    border: 2px solid var(--lijn);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.zoek input::placeholder { color: #9aa1ad; }

.zoek input:focus {
    background: var(--wit);
    border-color: var(--turkoois);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .18);
}

.zoek button {
    flex: 0 0 auto;
    height: 54px;
    min-width: 116px;
    padding: 0 24px;
    font: inherit;
    font-weight: 700;
    color: var(--wit);
    background: var(--oranje);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .28);
    transition: filter .15s, transform .05s;
}

.zoek button:hover { filter: brightness(1.06); }
.zoek button:active { transform: translateY(1px); }
.zoek button[disabled] { opacity: .6; cursor: default; box-shadow: none; }

.tip {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--grijs);
    min-height: 20px;
}

/* --------------------------------------------------------------------------
   Resultaten
   -------------------------------------------------------------------------- */

#uitslag { padding: 8px 0 10px; }
#uitslag[hidden] { display: none; }

.sectie {
    margin: 34px auto 0;
    padding: 22px 18px 24px;
    border: 1px solid var(--lijn);
    border-radius: 22px;
    background: var(--wit);
}

/* huisregel 2: elk blok zijn eigen zachte uitloop */
.sectie[data-src="busimatch"] { box-shadow: 0 10px 34px -18px rgba(249, 115, 22, .55); }
.sectie[data-src="busilearn"] { box-shadow: 0 10px 34px -18px rgba(37, 99, 235, .55); }
.sectie[data-src="busitools"] { box-shadow: 0 10px 34px -18px rgba(124, 58, 237, .55); }

.sectie > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lijn);
    margin-bottom: 18px;
}

.sectie > header img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sectie h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sectie[data-src="busimatch"] h2 { color: var(--connect); }
.sectie[data-src="busilearn"] h2 { color: var(--learn); }
.sectie[data-src="busitools"] h2 { color: var(--tools); }

.telling {
    font-size: 13px;
    color: var(--grijs);
}

/* de kaarten */
.kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px 18px;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--wit);
    text-decoration: none;
    color: inherit;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

.kaart:hover,
.kaart:focus-visible {
    transform: translateY(-2px);
    border-color: #d7dbe5;
    box-shadow: 0 12px 26px -16px rgba(17, 17, 17, .45);
}

.kaart .beeld {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--veld);
    border: 1px solid var(--lijn);
}

.kaart .icoon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--veld);
    border: 1px solid var(--lijn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}

/* een tool heeft geen ronde foto maar een tegel; dat leest sneller als "ding" */
.kaart[data-kind="tool"] .icoon,
.kaart[data-kind="course"] .beeld,
.kaart[data-kind="course"] .icoon { border-radius: 14px; }

.kaart .naam {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.kaart .regel {
    font-size: 13.5px;
    color: var(--grijs);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kaart .cta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--marine);
}

.kaart[data-kind="member"] .cta { color: var(--connect); }
.kaart[data-kind="course"] .cta { color: var(--learn); }
.kaart[data-kind="tool"]   .cta { color: var(--tools); }

/* de badge. Deze kleuren liggen netwerkbreed vast. */
.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 1px solid rgba(0, 0, 0, .12);
}

.badge[data-lvl="FREE"]     { background: #ffcc00; color: #000000; }
.badge[data-lvl="PLUS"]     { background: #06ff00; color: #000000; }
.badge[data-lvl="PRO"]      { background: #0006ff; color: #ffffff; }
.badge[data-lvl="BUSINESS"] { background: #d4af37; color: #1a1400; }

/* categorie-badge van een tool of cursus: geen niveau, dus rustig grijs */
.badge.cat { background: var(--veld); color: var(--grijs); }

/* meldingen binnen een sectie */
.melding {
    margin: 6px auto 0;
    max-width: 52ch;
    color: var(--grijs);
    font-size: 14.5px;
}

.melding.fout { color: #b91c1c; }

.meer {
    margin-top: 18px;
}

.meer button {
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 22px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--lijn);
    background: var(--wit);
    color: var(--zwart);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.meer button:hover { background: var(--veld); border-color: #cfd4e0; }
.meer button[disabled] { opacity: .55; cursor: default; }

/* laadstand: drie rustige skeletjes, geen draaiend wiel */
.skelet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.skelet div {
    height: 168px;
    border-radius: var(--radius);
    background: linear-gradient(100deg, #f2f3f7 30%, #e9ebf1 50%, #f2f3f7 70%);
    background-size: 220% 100%;
    animation: bfglans 1.1s linear infinite;
}

@keyframes bfglans { to { background-position: -220% 0; } }

@media (prefers-reduced-motion: reduce) {
    .skelet div { animation: none; }
    .kaart { transition: none; }
    html { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Voet
   -------------------------------------------------------------------------- */

footer {
    margin-top: 46px;
    padding: 26px 0 34px;
    border-top: 1px solid var(--lijn);
    color: var(--grijs);
    font-size: 13.5px;
}

footer .merk { font-weight: 700; color: var(--zwart); }

footer nav {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
}

footer nav a { color: var(--grijs); text-decoration: none; }
footer nav a:hover { color: var(--zwart); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Klein scherm
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .wrap { padding: 0 14px; }
    .kop { padding: 18px 0 2px; }
    .kop img { max-width: 230px; }
    .zoek { flex-direction: column; }
    .zoek button { width: 100%; }
    .sectie { padding: 18px 12px 20px; border-radius: 18px; }
    .kaarten, .skelet { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .kaart { padding: 16px 10px 14px; }
    .net a { padding: 5px 11px; font-size: 12px; }
}

/* toetsenbord blijft zichtbaar */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(20, 184, 166, .5);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Ingebed in een andere pagina (?embed=1)

   Didier, 16-09-2026: BusiFind moet in het midden van busimatch.club komen.
   Dan hoort dit venster geen eigen achtergrond, geen eigen marges en geen
   eigen kleurwereld te hebben: het neemt die van de gastheer over. Alles wat
   hieronder staat is er dus om iets WEG te halen, niet om iets toe te voegen.
   -------------------------------------------------------------------------- */

body.embed {
    background: transparent;
    margin: 0;
    padding: 0;
    /* Een ingebed venster mag nooit zelf schuiven: de gastheer laat het
       meegroeien met de hoogte die de pagina doorgeeft. */
    overflow: hidden;
}
body.embed .wrap { max-width: none; padding: 10px 14px 18px; margin: 0; }
body.embed .zoek { margin-top: 0; }
body.embed footer.kaal {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
    opacity: .7;
}
body.embed footer.kaal p { margin: 0; }