/* ============================================================
   EPSA Connect FAQ – stylesheet
   Uitgesplitst uit index.html t.b.v. een strikte Content-Security-Policy
   (CSP verbiedt 'unsafe-inline' voor style-src)
   ============================================================ */

:root {
    --bg-color: #f0f4f8;     /* Lichte EPSA Achtergrond Blauweig #cbd9e7 */
    --card-bg: #ffffff;       /* Witte kaarten */
    --text-main: #00112c;     /* Donkerblauw voor hoofdtekst */
    --text-sub: #475569;      /* Iets lichter donkerblauw/grijs */
    --accent-blue: #00112c;   /* EPSA Donkerblauw (voorheen paars) */
    --accent-yellow: #F2A900; /* EPSA Geel (voorheen groen) */
    --logo-bar-bg: #dbe2ea;   /* Grijze balk achter de logo's */
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0; /* padding zat hier; nu op .container, zodat de logobalk
                   tot de randen van het venster doorloopt */
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

header {
    border-bottom: 3px solid var(--accent-blue);
    padding-bottom: 20px;
    margin-bottom: 40px;
    position: relative;
}

header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background-color: var(--accent-yellow);
}

h1 {
    font-family: 'Urbanist', sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.intro {
    font-size: 18px;
    color: var(--text-sub);
    margin: 0;
}

.category-section {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-top: 0;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent-yellow);
    padding-left: 15px;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

li::before {
    content: "➔";
    color: var(--accent-blue);
    position: absolute;
    left: 0;
    transition: color 0.2s ease;
}

li:hover::before {
    color: var(--accent-yellow);
}

a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
    text-decoration-color: var(--accent-yellow);
    text-decoration-thickness: 2px;
}

footer {
    text-align: center;
    margin-top: 60px;
    color: var(--text-sub);
    font-size: 14px;
}

/* Grijze balk over de volle schermbreedte */
.logo-bar {
    background-color: var(--logo-bar-bg);
    border-bottom: 1px solid rgba(0, 17, 44, 0.08);
    width: 100%;
}

.logo-banner {
    display: flex;
    flex-wrap: wrap; /* Zorgt ervoor dat de logo's onder elkaar springen als het scherm te smal wordt */
    justify-content: center;
    align-items: center;
    max-width: 1000px; /* Zelfde breedte als .container, dus logo's blijven uitgelijnd */
    margin: 0 auto;
    gap: 15px; /* Ruimte tussen de twee logo's */
    padding: 10px 45px;
    box-sizing: border-box;
}

.logo-banner img {
    height: 70px; /* Perfecte hoogte voor desktop */
    width: auto;
    max-width: 95%; /* Voorkomt dat een logo ooit breder wordt dan het scherm zelf */
    object-fit: contain;
    transition: height 0.2s ease; /* Zorgt voor een vloeiende overgang bij het testen */
}

/* Mobiele schermen (kleiner dan 768px breed) */
@media (max-width: 768px) {
    .logo-banner {
        gap: 10px; /* Iets minder tussenruimte op mobiel */
        padding: 15px 20px;
    }

    .logo-banner img {
        height: 75px; /* Een stuk subtieler op mobiel, zodat het een mooie compacte banner blijft */
    }
}

/* Zoekbalk (voorheen inline style="") */
.search-container {
    margin-bottom: 15px;
}

.search-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    color: #00112c;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    box-sizing: border-box;
    outline-color: #F2A900;
}

/* ============================================================
   Chatbot widget
   ============================================================ */

#epsa-chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Trigger knop */
#epsa-chat-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1a2e44;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: background 0.15s, transform 0.15s;
    margin-left: auto;
}
#epsa-chat-btn:hover { background: #2272b5; transform: scale(1.05); }

/* Sluit-icoon standaard verborgen (voorheen inline style="display:none") */
#epsa-icon-close { display: none; }

/* Chatvenster, standaard verborgen (voorheen inline style="display:none") */
#epsa-chat-window {
    display: none;
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 360px;
    max-height: 520px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid #dde3ea;
}
#epsa-chat-window.epsa-open { display: flex; }

/* Header */
#epsa-chat-header {
    background: #1a2e44;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#epsa-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
#epsa-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
#epsa-chat-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
#epsa-chat-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    margin-top: 1px;
}
#epsa-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
}
#epsa-close-btn:hover { color: #fff; }

/* Berichten */
#epsa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f9fb;
}
.epsa-msg { display: flex; }
.epsa-msg-bot { justify-content: flex-start; }
.epsa-msg-user { justify-content: flex-end; }
.epsa-bubble {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.epsa-msg-bot .epsa-bubble {
    background: #fff;
    border: 0.5px solid #dde3ea;
    color: #1a1a18;
    border-bottom-left-radius: 4px;
}
.epsa-msg-user .epsa-bubble {
    background: #2272b5;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.epsa-typing { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.epsa-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #aaa; animation: epsaBlink 1.2s infinite;
}
.epsa-typing span:nth-child(2) { animation-delay: 0.2s; }
.epsa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes epsaBlink { 0%,80%,100%{opacity:0.3} 40%{opacity:1} }

/* Chips */
#epsa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 0;
    background: #f8f9fb;
}
.epsa-chip {
    font-size: 12px;
    background: #fff;
    border: 0.5px solid #c8d5e0;
    border-radius: 20px;
    padding: 4px 11px;
    cursor: pointer;
    color: #1a2e44;
    font-family: inherit;
    transition: background 0.12s;
}
.epsa-chip:hover { background: #dceaf6; border-color: #2272b5; color: #1a4f7a; }

/* Input */
#epsa-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-top: 0.5px solid #dde3ea;
    align-items: flex-end;
}
#epsa-input {
    flex: 1;
    border: 0.5px solid #c8d5e0;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13.5px;
    font-family: inherit;
    resize: none;
    min-height: 36px;
    line-height: 1.5;
    color: #1a1a18;
    outline: none;
    background: #fff;
}
#epsa-input:focus { border-color: #2272b5; }
#epsa-input::placeholder { color: #aaa; }
#epsa-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1a2e44;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}
#epsa-send-btn:hover { background: #2272b5; }
#epsa-send-btn:disabled { background: #ccc; cursor: not-allowed; }

/* Mobiel */
@media (max-width: 480px) {
    #epsa-chat-window {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 92px;
    }
}

/* Links die de chatbot dynamisch in bot-antwoorden invoegt
   (voorheen inline style="" in de JS-string, nu CSS-classes
   zodat een strikte CSP zonder 'unsafe-inline' ze nog steeds stijlt) */
.epsa-link-article {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
    background: #f0f4f8;
    border: 0.5px solid #c8d5e0;
    border-radius: 8px;
    color: #1a2e44;
    font-size: 12.5px;
    text-decoration: none;
    font-weight: 500;
}
.epsa-link-inline {
    color: #2272b5;
    text-decoration: underline;
}