/* ============================================================
   Flozon — shared stylesheet
   Loaded by index.html, blog.html, blog/ai-wordt-duur.html
   ============================================================ */

/* ===== FONT ===== */
@font-face {
    font-family: 'Manrope';
    src: url('/content/fonts/manrope-v20.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

/* ===== DESIGN TOKENS ===== */
:root {
    --cobalt:      #0047AB;
    --cobalt-600:  #003E96;
    --cobalt-700:  #00337C;
    --navy:        #000080;
    --navy-2:      #00006a;
    --sky:         #82C8E5;
    --sky-2:       #A8DBEF;
    --sky-soft:    rgba(130, 200, 229, 0.16);
    --slate:       #6D8196;
    --slate-lt:    #8a9aad;
    --ink:         #0c1622;
    --paper:       #FFFFFF;
    --paper-2:     #F4F7FB;
    --paper-3:     #EAF0F7;
    --line:        #DCE5EF;
    --line-soft:   #E8EEF5;
    --cobalt-soft: rgba(0, 71, 171, 0.07);
    --f-sans:      'Manrope', system-ui, -apple-system, sans-serif;
    --max-w:       1200px;
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--f-sans); color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
::selection { background: var(--cobalt); color: #fff; }

/* ===== NAVIGATION ===== */

/*  Default nav: always-white — used on blog/static pages  */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: .9rem 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s;
}
nav.elevated { box-shadow: 0 2px 16px rgba(0, 0, 0, .07); }

/*  Hero nav modifier: starts transparent, transitions to white on scroll  */
nav.nav--hero {
    background: transparent;
    border-bottom-color: transparent;
    padding: 1.35rem 0;
    transition: background .3s, box-shadow .3s, padding .3s, border-color .3s;
}
nav.nav--hero.scrolled {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: var(--line);
    padding: .9rem 0;
}

/*  Inner layout  */
.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/*  Logo  */
.nav-logo { display: flex; align-items: center; gap: .6rem; }
.nav-logo img { height: 28px; width: auto; }
nav.nav--hero .nav-logo img { height: 44px; }

/*  Links — default (dark, blog pages)  */
.nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; }
.nav-links a:not(.nav-cta) {
    color: var(--ink);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
    transition: color .2s;
}
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px; width: 100%; height: 2px;
    background: var(--cobalt);
    transform: scaleX(0); transform-origin: right;
    transition: transform .25s;
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

/*  Links — hero modifier (white, dark on scroll)  */
nav.nav--hero .nav-links a:not(.nav-cta) { color: rgba(255, 255, 255, .85); font-size: .92rem; font-weight: 500; }
nav.nav--hero .nav-links a:not(.nav-cta)::after { background: var(--sky); }
nav.nav--hero .nav-links a:not(.nav-cta):hover { color: #fff; }
nav.nav--hero.scrolled .nav-links a:not(.nav-cta) { color: var(--slate); }
nav.nav--hero.scrolled .nav-links a:not(.nav-cta)::after { background: var(--cobalt); }
nav.nav--hero.scrolled .nav-links a:not(.nav-cta):hover { color: var(--cobalt); }

/*  CTA button — default (cobalt, blog pages)  */
.nav-cta {
    background: var(--cobalt);
    color: #fff !important;
    padding: .45rem 1.1rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    transition: background .2s;
}
.nav-cta:hover { background: var(--cobalt-600); }

/*  CTA button — hero modifier (white, inverts on scroll)  */
nav.nav--hero .nav-cta {
    background: #fff !important;
    color: var(--cobalt) !important;
    padding: .62rem 1.4rem !important;
    border-radius: 8px;
    font-weight: 700 !important;
    font-size: .92rem;
    transition: background .2s, transform .2s, color .2s !important;
}
nav.nav--hero.scrolled .nav-cta { background: var(--cobalt) !important; color: #fff !important; }
nav.nav--hero .nav-cta:hover { transform: translateY(-2px); }

/*  Burger  */
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .25rem; z-index: 101; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s, background .3s; }
nav.nav--hero .nav-burger span { width: 26px; background: #fff; }
nav.nav--hero.scrolled .nav-burger span { background: var(--ink); }
.nav-burger.open span { background: var(--ink); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== FOOTER ===== */
footer { background: var(--navy); padding: 3rem 1.75rem; }
.ft-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.ft-logo { display: flex; align-items: center; gap: .6rem; }
.ft-logo img { height: 30px; opacity: .9; }
.ft-meta { font-size: .8rem; color: rgba(255, 255, 255, .5); display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: center; }
.ft-link {
    color: rgba(255, 255, 255, .38);
    font-size: .8rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .2s;
    white-space: nowrap;
}
.ft-link:hover { color: rgba(255, 255, 255, .65); }

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9000;
    background: rgba(0, 0, 80, .97);
    border-top: 1px solid rgba(130, 200, 229, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.1rem 1.75rem;
    font-family: var(--f-sans);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.cookie-banner__text { font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.5; flex: 1 1 260px; }
.cookie-banner__text a { color: var(--sky); text-decoration: none; }
.cookie-banner__text a:hover { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }

.btn-ck {
    font-family: var(--f-sans);
    font-size: .82rem;
    font-weight: 600;
    border-radius: 6px;
    padding: .55rem 1.15rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1;
}
.btn-ck--ghost   { background: transparent; color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.18); }
.btn-ck--ghost:hover { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.38); }
.btn-ck--outline { background: transparent; color: var(--sky); border-color: var(--sky); }
.btn-ck--outline:hover { background: rgba(130, 200, 229, .1); }
.btn-ck--primary { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.btn-ck--primary:hover { background: var(--cobalt-600); border-color: var(--cobalt-600); }

/* ===== COOKIE MODAL ===== */
.cookie-modal {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-sans);
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.cookie-modal__panel {
    position: relative;
    background: var(--paper);
    border-radius: 14px;
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    display: flex; flex-direction: column;
}
.cookie-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.cookie-modal__head h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.cookie-modal__close { background: none; border: none; cursor: pointer; color: var(--slate); font-size: 1.4rem; line-height: 1; padding: .2rem .4rem; border-radius: 4px; transition: color .15s; }
.cookie-modal__close:hover { color: var(--ink); }
.cookie-modal__body { padding: 1.25rem 1.5rem; flex: 1; }
.cookie-modal__intro { font-size: .88rem; color: var(--slate); line-height: 1.6; margin-bottom: 1.25rem; }
.cookie-modal__intro a { color: var(--cobalt); }
.cookie-cat { border: 1px solid var(--line); border-radius: 9px; margin-bottom: .75rem; overflow: hidden; }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; gap: .75rem; }
.cookie-cat__title { font-size: .88rem; font-weight: 700; color: var(--ink); }
.cookie-cat__sub { font-size: .78rem; color: var(--slate); margin-top: .15rem; }
.ck-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.ck-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ck-toggle__track { position: absolute; inset: 0; background: var(--line); border-radius: 24px; cursor: pointer; transition: background .2s; }
.ck-toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ck-toggle input:checked + .ck-toggle__track { background: var(--cobalt); }
.ck-toggle input:checked + .ck-toggle__track::after { transform: translateX(18px); }
.ck-toggle input:disabled + .ck-toggle__track { opacity: .55; cursor: not-allowed; }
.ck-toggle input:focus-visible + .ck-toggle__track { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.cookie-modal__foot { display: flex; gap: .65rem; padding: 1rem 1.5rem 1.4rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cookie-modal__foot .btn-ck--primary { flex: 1 1 auto; justify-content: center; }
.cookie-modal__foot .btn-ck { display: flex; align-items: center; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-burger { display: flex; }

    /* Default mobile nav: dropdown panel */
    .nav-links {
        display: none;
        position: fixed;
        top: 57px; left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.25rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        z-index: 99;
    }
    .nav-links.open { display: flex; }

    /* Hero mobile nav: full-screen overlay */
    nav.nav--hero .nav-links {
        top: 0;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        padding: 0;
    }
    nav.nav--hero .nav-links.open a:not(.nav-cta) { font-size: 1.4rem; color: var(--ink); }
    nav.nav--hero .nav-links.open .nav-cta { background: var(--cobalt) !important; color: #fff !important; }
}

@media (max-width: 600px) {
    .cookie-banner__inner { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .cookie-banner__actions { width: 100%; }
    .btn-ck { flex: 1 1 0; text-align: center; justify-content: center; display: flex; align-items: center; }
}