/* =============================================================
   Aresz Apps: de winkel (index.php). Alleen deze pagina; de beheerapp heeft css/app.css.
   Kleuren komen uit de variabelen die index.php in :root zet (de huisstijl van de omgeving),
   maten, hoeken en schaduwen uit css/style.css. De eigen maten van de winkel staan hieronder
   een keer als token op de body; media queries zetten alleen de tokens om.
   ============================================================= */

/* Huisstijl Aresz: koppen in Kyrial Display Pro Black, altijd in kapitalen. Kyrial komt alleen
   van de eigen machine (local): als webfont uitserveren vraagt een weblicentie. Wie hem mist,
   ziet Archivo Black (Google Fonts, geladen in index.php). Tekst in Public Sans. */
@font-face {
    font-family: 'Aresz Kop'; font-weight: 700;   /* Bold: de grote kop in de banner, zoals aresz.nl */
    src: local('Kyrial Display Pro Bold'), local('KyrialDisplayProBold');
    font-display: swap;
}
@font-face {
    font-family: 'Aresz Kop'; font-weight: 900;   /* Black: de overige koppen */
    src: local('Kyrial Display Pro Black'), local('KyrialDisplayProBlack');
    font-display: swap;
}
.is-publiek {
    --font-kop:           'Aresz Kop', 'Archivo Black', sans-serif;
    --font-tekst:         'Public Sans', sans-serif;
    --hero-h:             260px;              /* minimale hoogte van de banner; groeit mee met de tekst */
    --hero-punt:          24px;               /* hoe diep de punt onder de banner zakt (zoals op aresz.nl) */
    --winkel-rond:        20px;               /* de ronde hoeken van aresz.nl: knoppen en tegels, met een rechte hoek */
    /* De kleuren van aresz.nl: lichtgrijze achtergrond en inkt (donkergroen-zwart) als tekstkleur */
    --bg-body:            #f7f7f7;
    --text-main:          #002424;
    --text-muted:         #4a6464;
    --winkel-breedte:     1200px;             /* de inhoud, gecentreerd */
    --winkel-goot:        var(--ruimte-7);    /* zijgoot: 16px op een telefoon, breder op een scherm */
    --winkel-icoon:       16px;               /* een icoon in de balk of op een knop */
    --winkel-icoon-klein: 14px;               /* het pijltje op de knop Openen */
    --balk-h:             56px;               /* de bovenbalk; op een scherm hoger, zoals aresz.nl */
    --balk-logo-h:        26px;               /* het Aresz-logo in de balk */
    --tegel-beeld:        56px;               /* het vierkant met logo of icoon */
    --tegel-min:          260px;              /* smalste tegel: een kolom op een telefoon, vier op breed */
    --zoek-breedte:       420px;              /* het zoekveld in de balk */
    --naam-breedte:       180px;              /* de naam rechtsboven, daarna puntjes */
    --hero-tekst-breedte: 640px;              /* de leesbreedte van de introductietekst */
    --dicht-tekst-min:    200px;              /* de tekst in het afgesloten blok voor hij onder de knop schuift */
    --hero-tekst:         var(--white);
    --hero-zacht:         rgba(255,255,255,.8);
    --voet-tekst:         rgba(255,255,255,.6);
    --voet-link:          rgba(255,255,255,.85);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-tekst);
}
.is-publiek h1, .is-publiek h2 {
    font-family: var(--font-kop); font-weight: 900;
    font-synthesis: none;   /* Archivo Black heeft een snede: geen nagemaakte vette letter */
    text-transform: uppercase; letter-spacing: .01em;
}
@media (min-width: 900px) {
    .is-publiek { --winkel-goot: var(--ruimte-10); --hero-h: 360px; --hero-punt: 48px; --balk-h: 80px; --balk-logo-h: 38px; }
}

/* --- Bovenbalk --- */
.winkel-balk {
    position: sticky; top: 0; z-index: 50;
    background: var(--primary);
    --balk-wit-zacht: rgba(255,255,255,.75);
    --balk-wit-lijn:  rgba(255,255,255,.4);
}
.has-dev-banner .winkel-balk { top: var(--devbanner-h); }
.balk-inhoud {
    max-width: var(--winkel-breedte); margin: 0 auto;
    padding: 0 var(--winkel-goot); min-height: var(--balk-h);
    display: flex; align-items: center; gap: var(--ruimte-7);
}
.balk-merk {
    display: inline-flex; align-items: center; gap: var(--ruimte-5);
    color: var(--white); font-weight: 700; font-size: var(--tekst-kop); white-space: nowrap;
}
.balk-merk img { height: var(--balk-logo-h); width: auto; filter: brightness(0) invert(1); }   /* het logo in wit */
.balk-zoek {
    flex: 1; max-width: var(--zoek-breedte); margin-left: auto;
    display: flex; align-items: center; gap: var(--ruimte-4);
    min-height: var(--veld-h); padding: 0 var(--ruimte-5);
    border: var(--lijn-mid) solid var(--balk-wit-lijn); border-radius: var(--radius-sm);
    background: rgba(255,255,255,.12); color: var(--balk-wit-zacht);
    transition: border-color var(--transition), background var(--transition);
}
.balk-zoek:focus-within { border-color: var(--white); background: rgba(255,255,255,.2); }
.balk-zoek svg { width: var(--winkel-icoon); height: var(--winkel-icoon); flex-shrink: 0; }
.balk-zoek input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--tekst-ui); color: var(--white);
}
.balk-zoek input::placeholder { color: var(--balk-wit-zacht); }
.balk-zoek input::-webkit-search-cancel-button { cursor: pointer; }
.balk-acties { display: flex; align-items: center; gap: var(--ruimte-4); white-space: nowrap; }
.balk-acties .btn-ghost { color: var(--white); border-color: var(--balk-wit-lijn); background: transparent; }
@media (hover: hover) { .balk-acties .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); } }
/* Inloggen zoals de knop Contact op aresz.nl: wit met inkt, rond met een rechte hoek linksboven */
.balk-acties .btn-ms { border-color: transparent; border-radius: 0 var(--winkel-rond) var(--winkel-rond); }
.balk-acties .btn svg { width: var(--winkel-icoon-klein); height: var(--winkel-icoon-klein); }
.balk-naam {
    display: inline-flex; align-items: center; gap: var(--ruimte-3);
    font-size: var(--tekst-ui); color: var(--balk-wit-zacht);
    max-width: var(--naam-breedte); overflow: hidden; text-overflow: ellipsis;
}
.balk-naam svg { width: var(--winkel-icoon-klein); height: var(--winkel-icoon-klein); flex-shrink: 0; }

/* --- Hero: de bannerfoto in een groene waas, met een punt onderaan, zoals op aresz.nl ---
   De foto blijft in kleur met het groen er doorschijnend over (aresz.nl: 30%); links iets voller,
   omdat daar de witte tekst staat. */
.winkel-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    min-height: var(--hero-h);
    background: var(--primary-dark);
    color: var(--hero-tekst);
    padding: var(--ruimte-10) 0 calc(var(--ruimte-10) + var(--hero-punt));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-punt)), 50% 100%, 0 calc(100% - var(--hero-punt)));
}
.hero-foto {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 75% 40%;
}
.winkel-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 78%, transparent) 0%,
        color-mix(in srgb, var(--primary) 55%, transparent) 45%,
        color-mix(in srgb, var(--primary) 30%, transparent) 75%);
}
.hero-inhoud h1 { font-weight: 700; }
/* De zijgoot staat binnen de breedte, net als bij de balk en de inhoud: zo begint de kop op
   dezelfde lijn als het logo en de tegels. */
.hero-inhoud { position: relative; z-index: 1; width: 100%; max-width: var(--winkel-breedte); margin: 0 auto; padding: 0 var(--winkel-goot); }
.hero-inhoud h1 {
    color: var(--hero-tekst);
    font-size: clamp(var(--tekst-hero), 4vw, calc(1.5 * var(--tekst-hero)));
    line-height: 1.1;
}
.hero-tekst { max-width: var(--hero-tekst-breedte); margin-top: var(--ruimte-8); color: var(--hero-zacht); font-size: var(--tekst-titel); line-height: 1.7; }
.hero-tekst.md-output strong { color: var(--hero-tekst); }
.hero-tekst.md-output a, .hero-tekst .md-link { color: var(--hero-tekst); }

/* --- Inhoud: secties per categorie --- */
.winkel-inhoud {
    flex: 1; width: 100%; max-width: var(--winkel-breedte); margin: 0 auto;
    padding: var(--ruimte-10) var(--winkel-goot) var(--ruimte-11);
}
.winkel-sectie + .winkel-sectie { margin-top: var(--ruimte-11); }
.sectie-kop {
    display: flex; align-items: baseline; gap: var(--ruimte-3) var(--ruimte-6); flex-wrap: wrap;
    margin-bottom: var(--ruimte-8);
}
.sectie-kop h2 { font-size: var(--tekst-kop-2xl); }
.sectie-kop p  { color: var(--text-muted); font-size: var(--tekst-titel); }

.tegel-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--tegel-min), 100%), 1fr));
    gap: var(--ruimte-7);
}

/* --- Een tegel: de hele kaart is de link, "Openen" is daarom tekst en geen knop --- */
.app-tegel {
    position: relative;
    display: flex; flex-direction: column; gap: var(--ruimte-6);
    padding: var(--ruimte-8);
    background: var(--bg-card);
    border: var(--lijn) solid var(--border);
    border-radius: var(--winkel-rond) var(--winkel-rond) var(--winkel-rond) 0;   /* zoals aresz.nl */
    box-shadow: var(--shadow-sm);
    color: var(--text-main); text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
a.app-tegel:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }
@media (hover: hover) {
    a.app-tegel:hover { box-shadow: var(--shadow-md); transform: translateY(calc(-1 * var(--ruimte-1))); border-color: var(--primary-a25); }
    a.app-tegel:hover .tegel-knop { color: var(--accent); }
}
a.app-tegel:active { transform: var(--druk); }

.tegel-kop { display: flex; align-items: center; gap: var(--ruimte-6); }
.tegel-beeld {
    width: var(--tegel-beeld); height: var(--tegel-beeld); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); overflow: hidden;
}
.tegel-beeld.is-logo { background: var(--bg-body); border: var(--lijn) solid var(--border); padding: var(--ruimte-3); }
.tegel-beeld.is-logo img { width: 100%; height: 100%; object-fit: contain; }
.tegel-beeld.is-icoon { background: var(--tegel-kleur, var(--primary)); color: var(--tegel-tekst, var(--white)); }
.tegel-beeld.is-icoon svg { width: calc(var(--tegel-beeld) / 2); height: calc(var(--tegel-beeld) / 2); }
.tegel-naam { font-size: var(--tekst-kop); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tegel-oms  { font-size: var(--tekst-titel); color: var(--text-muted); line-height: 1.55; flex: 1; overflow-wrap: anywhere; }
.tegel-labels { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.tegel-label {
    font-size: var(--tekst-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: var(--ruimte-1) var(--ruimte-4); border-radius: var(--radius-pil);
    background: color-mix(in srgb, var(--label-kleur, var(--primary)) 14%, transparent);
    color: var(--label-kleur, var(--primary));
}
.tegel-voet { display: flex; justify-content: flex-end; margin-top: auto; }
.tegel-knop {
    display: inline-flex; align-items: center; gap: var(--ruimte-3);
    min-height: var(--veld-h-klein);
    font-family: var(--font-kop); font-size: var(--tekst-klein); font-weight: 400;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--primary);
    transition: color var(--transition);
}
.tegel-knop svg { width: var(--winkel-icoon-klein); height: var(--winkel-icoon-klein); }
.app-tegel.is-zonder-adres { cursor: default; }
.app-tegel.is-zonder-adres .tegel-knop, .tegel-knop.is-uit { color: var(--text-light); }

/* --- Een interne categorie zonder login: het slot --- */
.dicht-blok {
    display: flex; align-items: center; gap: var(--ruimte-8); flex-wrap: wrap;
    padding: var(--ruimte-9);
    background: var(--bg-card);
    border: var(--lijn-mid) dashed var(--border-strong);
    border-radius: var(--winkel-rond) var(--winkel-rond) var(--winkel-rond) 0;
}
.dicht-icoon {
    width: var(--tegel-beeld); height: var(--tegel-beeld); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--primary-a12); color: var(--primary);
}
.dicht-icoon svg { width: calc(var(--tegel-beeld) / 2); height: calc(var(--tegel-beeld) / 2); }
.dicht-tekst { flex: 1; min-width: var(--dicht-tekst-min); }
.dicht-tekst strong { display: block; font-size: var(--tekst-kop); }
.dicht-tekst p { color: var(--text-muted); font-size: var(--tekst-titel); margin-top: var(--ruimte-2); }
/* De Microsoft-knop blijft licht, zoals Microsoft hem voorschrijft (zelfde als login.php) */
.btn-ms {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-5);
    min-height: var(--veld-h); padding: 0 var(--ruimte-8);
    background: var(--bg-card); color: var(--text-main);
    border: var(--lijn-mid) solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: var(--tekst-ui); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--snel) var(--ease-uit);
}
.btn-ms svg { width: var(--winkel-icoon); height: var(--winkel-icoon); flex-shrink: 0; }
.btn-ms.is-klein { min-height: var(--veld-h-klein); padding: 0 var(--ruimte-6); gap: var(--ruimte-4); }
.btn-ms.is-klein svg { width: var(--winkel-icoon-klein); height: var(--winkel-icoon-klein); }
@media (hover: hover) { .btn-ms:hover { background: var(--bg-body); border-color: var(--text-light); } }
.btn-ms:active { transform: var(--druk); }

/* --- Lege toestanden en de zoekmelding --- */
.winkel-leeg {
    text-align: center; color: var(--text-muted); font-size: var(--tekst-titel);
    padding: var(--ruimte-11) var(--ruimte-7);
    background: var(--bg-card);
    border: var(--lijn) dashed var(--border-strong); border-radius: var(--radius-lg);
}
.winkel-leeg + .winkel-sectie { margin-top: var(--ruimte-11); }

/* --- Voet --- */
.winkel-voet {
    background: var(--sidebar-bg); color: var(--voet-tekst);
    padding: var(--ruimte-9) var(--winkel-goot); font-size: var(--tekst-ui);
}
.voet-inhoud {
    max-width: var(--winkel-breedte); margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ruimte-4) var(--ruimte-8);
}
.winkel-voet a { color: var(--voet-link); }

/* --- Telefoon: logo zonder naam, zoekveld op een eigen regel, knoppen over de breedte --- */
@media (max-width: 640px) {
    .balk-inhoud { flex-wrap: wrap; row-gap: var(--ruimte-4); padding-top: var(--ruimte-4); padding-bottom: var(--ruimte-4); }
    .balk-merk span { display: none; }
    .balk-acties { margin-left: auto; }
    .balk-zoek { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
    .balk-naam { display: none; }
    .winkel-hero { padding: var(--ruimte-9) 0 calc(var(--ruimte-9) + var(--hero-punt)); }
    .dicht-icoon { display: none; }
    .dicht-blok .btn-ms { width: 100%; }
    .voet-inhoud { flex-direction: column; }
}

/* --- Knop naar het platform van een app, alleen voor een beheerder van de winkel --- */
.tegel-houder { position: relative; display: flex; }
.tegel-houder > .app-tegel { flex: 1; min-width: 0; }
.tegel-platform {
    position: absolute; left: var(--ruimte-8); bottom: var(--ruimte-8); z-index: 1;
    display: inline-flex; align-items: center; gap: var(--ruimte-3);
    min-height: var(--veld-h-klein); padding: 0 var(--ruimte-5);
    border: var(--lijn) solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text-muted);
    font-size: var(--tekst-ui); font-weight: 600; text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.tegel-platform svg { width: var(--winkel-icoon-klein); height: var(--winkel-icoon-klein); }
.tegel-platform:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) { .tegel-platform:hover { color: var(--primary); border-color: var(--primary-a25); } }