/**
 * stylepompstation.css — Thema: HET POMPSTATION
 *
 * Tie-dye thema. Kleuren rechtstreeks uit de header-foto:
 *   magenta #dc33b8 · paars #a22ac7 · blauw #2475d8 · zachtroze #f5def1
 *
 * - Achtergrond: de eigen header.jpg van de artiest (zoals standaard)
 * - Menu: vaste witte balk helemaal bovenin met tie-dye kleurstreep
 * - Logo: groter, gecentreerd onder de menubalk
 * - Fonts: Unbounded (koppen) + Outfit (tekst)
 *
 * Wordt NA style/style.css geladen en overschrijft de basisstijl.
 */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&display=swap');

/* ─── Kleuren uit de tie-dye header ────────────────────────────── */
:root {
    --roze:        #dc33b8;
    --paars:       #a22ac7;
    --blauw:       #2475d8;
    --roze-zacht:  #f5def1;

    /* Iets donkerder afgeleiden voor vlakken met witte tekst erop,
       zodat knoppen altijd goed leesbaar blijven */
    --roze-knop:   #b81f97;
    --blauw-knop:  #1c5cab;

    --inkt:        #221733;
    --tiedye:      linear-gradient(90deg, #dc33b8, #a22ac7, #2475d8);

    --text:   var(--inkt);
    --muted:  #6f6379;
    --line:   #eddbea;
    --radius: 18px;
}

/* Achtergrond: geen override — de header.jpg van de artiest blijft staan */

::selection {
    background: var(--roze);
    color: #fff;
}

/* ─── Typografie ───────────────────────────────────────────────── */
h1, h2, h3,
.diensten-card h3,
.press-card h2,
.music-card h2,
.contact-card h2 {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    color: var(--inkt);
}

h1 {
    font-weight: 900;
    letter-spacing: -.02em;
}

/* Tie-dye streep onder de paginatitel */
h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 8px;
    margin-top: 16px;
    border-radius: 999px;
    background: var(--tiedye);
}

h2 {
    font-weight: 700;
    color: var(--paars);
}

#content a {
    color: var(--blauw-knop);
    text-decoration-color: var(--roze);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* ─── Menu: vaste balk helemaal bovenin (desktop) ──────────────── */
@media (min-width: 761px) {
    #menu.main-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        display: flex;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 16px 20px 14px;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(10px);
        border: none;
        border-bottom: 6px solid;
        border-image: linear-gradient(90deg, #dc33b8, #a22ac7, #2475d8) 1;
        border-radius: 0;
        box-shadow: 0 6px 24px rgba(34, 23, 51, .12);
    }

    /* Logo groter en onder de vaste balk geschoven */
    #logo {
        margin-top: 86px;
        padding: 34px 0 26px;
    }

    #logo img {
        max-height: 240px;
        width: auto;
        max-width: min(86vw, 760px);
    }
}

#menu a.linkmenu,
#menu a.linkmenulogin {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--inkt);
    border-radius: 999px;
}

#menu a:hover {
    background: var(--roze-knop);
    color: #fff;
    transform: translateY(-1px);
}

/* Mobiel: menuknop in thema-kleur, menu zelf volgt de basisstijl */
.menu-toggle {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    background: var(--roze-knop);
    color: #fff;
    border: none;
}

/* Admin-menu (tweede balk na inloggen): gewoon in de flow laten */
#menu.admin-menu {
    background: rgba(245, 222, 241, .9);
    border: 1px solid var(--line);
}

/* ─── Content-blok: wit vel met zachtroze rand ─────────────────── */
#content {
    background: rgba(255, 255, 255, .94);
    color: var(--inkt);
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(162, 42, 199, .22);
}

#content p,
#content li,
#content td,
#content span,
#content small {
    color: #3a2f47;
}

/* ─── Formulieren ──────────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="url"],
select,
textarea {
    background: #fff;
    color: var(--inkt);
    border: 2px solid var(--roze-zacht);
    border-radius: 10px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--paars);
    box-shadow: 0 0 0 3px rgba(162, 42, 199, .18);
}

input[type="submit"],
button {
    background: var(--blauw-knop);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
}

input[type="submit"]:hover {
    background: var(--roze-knop);
    color: #fff;
}

/* ─── Kaarten: wit met tie-dye streep bovenlangs ───────────────── */
.music-card,
.work-card,
.press-card,
.contact-card,
.diensten-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 44px rgba(34, 23, 51, .12);
    overflow: hidden;
}

.music-card::before,
.press-card::before,
.contact-card::before,
.diensten-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--tiedye);
}

/* ─── Muziekpagina ─────────────────────────────────────────────── */
.music-card small {
    color: var(--muted);
}

/* ─── Showspagina ──────────────────────────────────────────────── */
.table_shows td {
    border-bottom: 1px solid var(--line);
}

.table_shows h3,
.table_shows big {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    color: var(--inkt);
}

/* ─── Werkpagina ───────────────────────────────────────────────── */
.work-button {
    background: var(--blauw-knop);
    color: #fff;
    border-radius: 999px;
}

.work-button:hover {
    background: var(--roze-knop);
    color: #fff;
    box-shadow: none;
}

/* ─── Perspagina ───────────────────────────────────────────────── */
.press-card time {
    background: var(--paars);
    color: #fff;
    border-radius: 999px;
}

.press-card a {
    background: var(--blauw-knop);
    color: #fff;
    border-radius: 999px;
}

.press-card a:hover {
    background: var(--roze-knop);
    color: #fff;
    box-shadow: none;
}

/* ─── Dienstenpagina ───────────────────────────────────────────── */
.diensten-card-uitgelicht {
    border-color: var(--paars);
}

.diensten-sticker {
    background: var(--roze-knop);
    color: #fff;
}

.diensten-prijs {
    font-family: 'Unbounded', 'Outfit', sans-serif;
    color: var(--inkt);
}

.diensten-subtitel,
.diensten-prijs-info {
    color: var(--muted);
}

.diensten-punten li {
    border-top: 1px dashed var(--roze-zacht);
}

.diensten-punten li::before {
    color: var(--roze);
}

.diensten-cta {
    background: var(--blauw-knop);
    color: #fff;
}

.diensten-cta:hover {
    background: var(--roze-knop);
    color: #fff;
    box-shadow: none;
}

/* ─── Admin-paneel in thema-kleuren ────────────────────────────── */
.admin-form-card,
.admin-list-row {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(34, 23, 51, .08);
}

.admin-tab,
.admin-artist-btn {
    background: #fff;
    color: var(--inkt);
    border: 2px solid var(--roze-zacht);
    border-radius: 999px;
}

.admin-tab-active,
.admin-tab:hover,
.admin-artist-btn:hover,
.admin-artist-btn.active {
    background: var(--paars);
    color: #fff;
    border-color: var(--paars);
}

.af-btn-save {
    background: var(--blauw-knop);
    color: #fff;
    border-radius: 999px;
}

.af-btn-save:hover {
    background: var(--roze-knop);
}

/* ─── CV in tie-dye thema ──────────────────────────────────────── */
.cv-section { border-top: 1px solid var(--line); }
.cv h2.cv-section-title { color: var(--paars); }
.cv h2.cv-section-title::after { content: ""; display: block; width: 70px; height: 6px; margin-top: 12px; border-radius: 999px; background: var(--tiedye); }
.cv-entry-title { color: var(--inkt); }
.cv-text, .cv-list li { color: #3a2f47; }
.cv-list li::before { background: var(--roze); }
.cv-list li b, .cv-entry-title { color: var(--inkt); }
.cv-export-btn { background: var(--blauw-knop); border-color: var(--blauw-knop); color: #fff; }
.cv-export-btn:hover { background: var(--roze-knop); border-color: var(--roze-knop); color: #fff; }

/* CV-EXPORT (losse PDF-pagina) in tie-dye thema */
.cv-cover-name { font-family: 'Unbounded', 'Outfit', sans-serif; }
.cv-cover-name::after { display: none; }   /* geen tie-dye streep op de band */
.cv-paper { border: 3px solid transparent; border-image: var(--tiedye) 1; }
.cv-paper .cv-section:first-child { border-top: none; }