/*
Theme Name: Cool Your Brand — QR Portaal
Theme URI: https://www.krachtinternetmarketing.nl
Author: Kracht Internet Marketing
Author URI: https://www.krachtinternetmarketing.nl
Description: Maatwerkthema voor het QR-statistiekenportaal van Cool Your Brand (qr.coolyourbrand.nl). Verzorgt de huisstijl rondom de KIM QR Tracker-plugin: gradient-achtergrond, Organetto/Inter-typografie en een witte kaartlayout.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: cyb-qr-portal
*/

/* ======================================================================
   Lettertypes
   Inter (SIL OFL) wordt lokaal meegeleverd — geen externe CDN, AVG-vriendelijk.
   Organetto komt van Adobe Fonts (Typekit) en wordt in functions.php ingeladen
   als "organetto-variable" (variabel: assen 'wght' en 'wdth').
   ====================================================================== */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }

/* ======================================================================
   Basis & achtergrond-gradient
   Standaard: Cool blue (#3C50D2) linksboven → Pink pop (#F03291) linksonder,
   onder -60°. De kleuren/hoek zijn overschrijfbaar via ACF (zie functions.php).
   ====================================================================== */
:root {
    --cyb-top:    #3C50D2; /* Cool blue  */
    --cyb-bottom: #F03291; /* Pink pop   */
    --cyb-angle:  -60deg;
    --cyb-ink:    #14142B;
    /* Organetto (variabel): UltraBold Condensed. Pas hier zo nodig de assen aan. */
    --cyb-head-axes: 'wght' 800, 'wdth' 75;
}
html { box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; }

body.cyb {
    margin:0;
    min-height:100vh;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color:var(--cyb-ink);
    background:var(--cyb-top);
    background:linear-gradient(var(--cyb-angle), var(--cyb-bottom), var(--cyb-top)) no-repeat fixed;
}

/* ======================================================================
   Paginakop met logo
   ====================================================================== */
.cyb-topbar { padding:34px 40px 0; }
.cyb-logo { display:inline-block; width:180px; max-width:45vw; line-height:0; }
.cyb-logo img { display:block; width:100%; height:auto; }

/* ======================================================================
   Portaal-kaart (omhult de plugin-output .qrt-front)
   ====================================================================== */
.cyb-shell { padding:24px 20px 64px; display:flex; justify-content:center; }

.cyb .qrt-front {
    background:#fff;
    border-radius:24px;
    padding:40px 44px 48px;
    width:100%;
    max-width:760px;
    margin:0;
    box-shadow:0 30px 80px rgba(20,20,43,0.28);
}
.cyb .qrt-front--login { max-width:440px; }

/* Inter binnen het hele portaal */
.cyb .qrt-front,
.cyb .qrt-front input,
.cyb .qrt-front select,
.cyb .qrt-front button { font-family:'Inter', sans-serif; }

/* ======================================================================
   Kop: H1 in Organetto, klantnaam eronder
   ====================================================================== */
.cyb .qrt-front__head { border-bottom:2px solid var(--cyb-top); padding-bottom:18px; margin-bottom:24px; }

.cyb .qrt-front__title {
    font-family:'organetto-variable', 'Arial Narrow', sans-serif;
    font-weight:800;
    font-variation-settings:var(--cyb-head-axes);
    font-size:3.4rem;
    line-height:1;
    transform:scaleY(0.9);          /* Organetto op 90% hoogte */
    transform-origin:center;
    text-transform:uppercase;
    letter-spacing:.005em;
    color:var(--cyb-ink);
    margin:0 0 16px;
}

.cyb .qrt-front__subhead { display:flex; align-items:center; gap:14px; }
.cyb .qrt-front__client { font-family:'Inter', sans-serif; font-weight:500; font-size:1.15rem; color:var(--cyb-ink); }
.cyb .qrt-front__logout { margin-left:auto; font-weight:500; text-decoration:none; }

/* Badge: QR-icoon als er geen klantlogo is; anders het klantvignet zelf. */
.cyb .qrt-front__badge { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.cyb .qrt-front__badge--icon {
    width:46px; height:46px;
    border-radius:12px;
    background:var(--cyb-top);
}
.cyb .qrt-front__badge--icon::before {
    content:'';
    width:24px; height:24px;
    background:url('assets/img/cyb-qr-icon.svg') center/contain no-repeat;
}
.cyb .qrt-front__badge--logo { background:none; }
.cyb .qrt-front__badge--logo img { max-height:46px; width:auto; display:block; }

/* ======================================================================
   Loginweergave
   ====================================================================== */
.cyb .qrt-front--login h2 {
    font-family:'organetto-variable', 'Arial Narrow', sans-serif;
    font-weight:800; font-variation-settings:var(--cyb-head-axes);
    text-transform:uppercase; line-height:1;
    transform:scaleY(0.9); transform-origin:center;
    font-size:2.6rem; margin:0 0 10px; color:var(--cyb-ink);
}
.cyb .qrt-front__login-intro { color:#5b6070; margin:0 0 22px; font-size:1rem; }
.cyb .qrt-front--login label { display:block; font-size:.85rem; font-weight:500; margin-bottom:6px; }
.cyb .qrt-front--login input[type=text],
.cyb .qrt-front--login input[type=password] {
    width:100%; padding:11px 13px; border:1px solid #cbd2dd; border-radius:8px; margin-bottom:14px; font-size:.95rem;
}
.cyb .qrt-front--login .login-remember { font-weight:400; }
.cyb .qrt-front--login #wp-submit,
.cyb .qrt-front--login input[type=submit] {
    background:var(--cyb-top); color:#fff; border:none; border-radius:8px;
    padding:12px 22px; font-weight:600; cursor:pointer; font-size:.95rem;
}

/* ======================================================================
   Responsief
   ====================================================================== */
@media (max-width:600px) {
    .cyb-topbar { padding:22px 20px 0; }
    .cyb .qrt-front { padding:28px 22px 34px; border-radius:18px; }
    .cyb .qrt-front__title { font-size:2.5rem; }
}