:root {
    --accent-color: #2872fa;      /* Blauw accent */
    --secondary-color: #8B0000;   /* Donkerrood voor contrast */
    --text-color: #333;
    --bg-light: #f9f9f9;
    --bg-hover: #e6ecf5;
    --info-bg: #f0f4fa;
}

/* Styling voor een gedicht */
.gedicht {
    font-family: 'Georgia', 'Times New Roman', serif; /* Klassiek lettertype */
    font-size: 1.2em;
    line-height: 1.8;
    color: var(--text-color);
    max-width: 600px;
    margin: 2em auto;
    padding: 1.5em;
    background-color: var(--bg-light);
    border-left: 4px solid var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* vloeiende overgang bij hover */
}

/* Styling voor individuele strofen */
.gedicht p {
    margin-bottom: 1.5em;
}

/* Stijl voor titel */
.gedicht-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.7em;
    font-weight: bold;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 1em;
    margin-top: -1em;
}

/* Hover-effect */
.gedicht:hover {
    background-color: var(--bg-hover);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-left: 4px solid var(--accent-color);
}

/* Info-blok onder het gedicht */
.gedicht-info {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
    margin: 2em auto;
    padding: 1em;
    max-width: 600px;
    background-color: var(--info-bg);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Labels binnen infoblok */
.gedicht-info strong {
    color: var(--accent-color);
}

:root {
    --accent-color: #2872fa;
    --secondary-color: #8B0000;
    --bg-light: #f9f9f9;
    --bg-hover: #e6ecf5;
}

/* Container voor de afbeelding bij een gedicht */
.gedicht-afbeelding {
    max-width: 600px;                /* Zelfde breedte als gedicht */
    margin: 2em auto;                /* Centraal uitgelijnd */
    border-left: 4px solid var(--secondary-color);
    background-color: var(--bg-light);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;                /* Zodat afgeronde hoeken zichtbaar zijn */
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Stijl voor de afbeelding zelf */
.gedicht-afbeelding img {
    display: block;
    width: 100%;
	aspect-ratio: 2 / 1;        /* breedte 2x hoogte */
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}


/* Hover-effect voor meer diepte */
.gedicht-afbeelding:hover {
    background-color: var(--bg-hover);
    border-left: 4px solid var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gedicht-afbeelding:hover img {
    transform: scale(1.03);         /* Subtiele zoom bij hover */
    filter: brightness(1.05);
}

/* Onderschrift onder de afbeelding (optioneel) */
.gedicht-afbeelding figcaption {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    padding: 0.8em 1em;
    background-color: #f0f4fa;
    border-top: 1px solid #ddd;
}





:root {
    --lied-accent-color: #2872fa;     /* Blauw accentkleur (zoals bij gedicht) */
    --lied-secondary-color: #a855f7;  /* Paars als contrast */
    --lied-bg: #f8f7ff;
    --lied-bg-hover: #f3f0ff;
    --lied-text-color: #222;
}

/* ========================== */
/* LIED - TEKST */
/* ========================== */

.lied {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.15em;
    line-height: 1.8;
    color: var(--lied-text-color);
    max-width: 800px;
    margin: 2.5em auto;
    padding: 1.8em 2em;
    background: linear-gradient(180deg, var(--lied-bg) 0%, #ffffff 100%);
    border-left: 5px solid var(--lied-accent-color);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Titel van het lied */
.lied-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.9em;
    font-weight: bold;
    color: var(--lied-accent-color); /* blauw (#2872fa) */
    text-align: center;
    margin-bottom: 1em;
    margin-top: -0.5em;
    letter-spacing: 0.5px;
}

/* Strofes / coupletten */
.lied p {
    margin-bottom: 1.3em;
}

/* Hover-effect */
.lied:hover {
    background: linear-gradient(180deg, var(--lied-bg-hover) 0%, #ffffff 100%);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
    border-left-color: var(--lied-secondary-color);
}

/* ========================== */
/* INFOBLOK */
/* ========================== */

.lied-info {
    font-size: 0.9em;
    line-height: 1.6;
    color: #444;
    max-width: 800px;
    margin: 2em auto;
    padding: 1em 1.2em;
    background-color: #faf8ff;
    border-left: 4px solid var(--lied-secondary-color);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.lied-info strong {
    color: var(--lied-accent-color);
}

/* ========================== */
/* LIED - AFBEELDING */
/* ========================== */

.lied-afbeelding {
    max-width: 800px;
    margin: 2em auto;
    border-left: 5px solid var(--lied-accent-color);
    background: linear-gradient(180deg, #fff, var(--lied-bg));
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Afbeelding met vaste verhouding 2:1 */
.lied-afbeelding img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;        /* breedte 2x hoogte */
    object-fit: cover;          /* vult het vlak netjes op */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover-effect afbeelding */
.lied-afbeelding:hover {
    background: linear-gradient(180deg, var(--lied-bg-hover), #fff);
    border-left-color: var(--lied-secondary-color);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
}

.lied-afbeelding:hover img {
    transform: scale(1.04);
    filter: brightness(1.06);
}

/* Onderschrift */
.lied-afbeelding figcaption {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    padding: 0.8em 1em;
    background-color: #f9f6ff;
    border-top: 1px solid #e2e2e2;
}



:root {
    --verhaal-accent-color: #4a3f35;  /* Warme boekkleur */
    --verhaal-bg: #fbfaf8;            /* Zacht papierwit */
    --verhaal-border: #dcd2c5;        /* Randkleur */
    --verhaal-shadow: rgba(0, 0, 0, 0.1);
}

/* ========================== */
/* KORT VERHAAL */
/* ========================== */

.kortverhaal {
    font-family: inherit;             /* Gebruik thema-lettertype */
    font-size: 1.00em;                /* Iets kleiner voor boekgevoel */
    line-height: 1.9;
    color: #2b2b2b;
    max-width: 800px;
    margin: 3em auto;
    padding: 3em 2.5em;
    background-color: var(--verhaal-bg);
    border: 1px solid var(--verhaal-border);
    border-radius: 6px;
    box-shadow: 0 4px 10px var(--verhaal-shadow);
    position: relative;
    transition: all 0.3s ease;
}

/* Titel */
.kortverhaal-title {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--verhaal-accent-color);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1.2em auto;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--verhaal-border);
    padding-bottom: 0.4em;
}

/* Tekst */
.kortverhaal p {
    margin-bottom: 1.5em;
    text-align: justify;
    text-indent: 1.5em;
}

/* Citaat of dialoog */
.kortverhaal blockquote {
    font-style: italic;
    margin: 1.5em 2em;
    color: #555;
    border-left: 3px solid var(--verhaal-accent-color);
    padding-left: 1em;
}

/* Hover-effect */
.kortverhaal:hover {
    background-color: #fefdfc;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* ========================== */
/* AFBEELDING */
/* ========================== */

.kortverhaal-afbeelding {
    max-width: 800px;
    margin: 2em auto 1em;
    border: 1px solid var(--verhaal-border);
    background: #fff;
    box-shadow: 0 2px 6px var(--verhaal-shadow);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Afbeelding zelf */
.kortverhaal-afbeelding img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;        /* breedte 2x hoogte */
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Hover */
.kortverhaal-afbeelding:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.kortverhaal-afbeelding:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* Onderschrift */
.kortverhaal-afbeelding figcaption {
    font-size: 0.9em;
    color: #555;
    text-align: center;
    padding: 0.8em 1em;
    background-color: #f6f4f2;
    border-top: 1px solid var(--verhaal-border);
}

/* ========================== */
/* INFOBLOK (Auteur / Context) */
/* ========================== */

.kortverhaal-info {
    font-size: 0.9em;
    line-height: 1.7;
    color: #444;
    max-width: 800px;
    margin: 2em auto;
    padding: 1.2em 1.5em;
    background-color: #f7f6f3;
    border-left: 4px solid var(--verhaal-accent-color);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* labels */
.kortverhaal-info strong {
    color: var(--verhaal-accent-color);
}

/* hover subtiel papiergevoel */
.kortverhaal-info:hover {
    background-color: #fffdf9;
}

/* ========================== */
/* FRAGMENT EINDE */
/* ========================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols&display=swap');

.fragment-einde {
    text-align: center;
    margin: 3em auto 1em;
    font-style: italic;
    color: #777;
    position: relative;
    white-space: nowrap;
    max-width: 800px;
}

/* Symbol before text */
.fragment-einde::before {
    content: " ⚜ ";
    display: inline-block;
    font-family: "Noto Sans Symbols", "Segoe UI Symbol", "Arial", sans-serif;
    color: var(--verhaal-accent-color);
    font-size: 1.8em; /* Increased size */
    vertical-align: middle;
    margin-right: 0.6em;
}

/* Symbol after text */
.fragment-einde::after {
    content: " ⚜ ";
    font-family: "Noto Sans Symbols", "Segoe UI Symbol", "Arial", sans-serif;
    color: var(--verhaal-accent-color);
    font-size: 1.8em; /* Increased size */
    vertical-align: middle;
    margin-left: 0.6em;
}



/* Versierde eerste hoofdletter van een paragraaf */
/* Drop Cap for <p class="drop-cap"> */
p.drop-cap::first-letter {
    float: left !important;
    font-size: 4em !important;
    line-height: 0.7 !important;
    margin: 0.1em 0.0em 0 0 !important;
    font-family: "Garamond", "Times New Roman", serif !important;
    color: var(--verhaal-accent-color, #b22222) !important; /* Fallback color */
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding-right: 0.01em !important;
    display: inline-block !important;
    visibility: visible !important;
   /* border: 0px solid red; Temporary for debugging */
}

/* Ensure paragraph wraps correctly */
p.drop-cap {
    overflow: hidden !important;
}

/* 1. Afbeelding links boven – 50x50px */
p.versiering1 {
    position: relative;
}
p.versiering1::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/Boek-Versiering-Rand2.png')
                no-repeat center / contain;
    z-index: 1;
}

/* 2. Afbeelding boven midden – 150x50px */
p.versiering2 {
    position: relative;
}
p.versiering2::before {
    content: "";
    position: absolute;
    display: block;
    left: 95%;
    top: 0cm;
    transform: translateX(-50%);
    width: 150px;
    height: 50px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/Boek-Versiering-Bloem1.png')
                no-repeat center / contain;
    z-index: -1;
}

/* 3. Afbeelding rechtsonder – 50x100px */
p.versiering3 {
    position: relative;
}
p.versiering3::after {
    content: "";
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 50px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/Icon-Schrijver2a.png')
                no-repeat center / contain;
    z-index: 1;
}

/* 4. Afbeelding rechtsonder – 50x100px (zelfde als 3) */
p.versiering4 {
    position: relative;
}
p.versiering4::after {
    content: "";
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    width: 75px;
    height: 150px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/Schrijver-Pen1.png')
                no-repeat center / contain;
    z-index: 1;
}

/* 5. Afbeelding onder midden – 150x50px */
p.versiering5 {
    position: relative;
}
p.versiering5::after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    bottom: -1cm; /* verplaatst de afbeelding 1 cm onder de onderrand */
    transform: translateX(-50%);
    width: 150px;
    height: 50px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/denhaag-fleuron2.png')
                no-repeat center / contain;
    z-index: 1;
}

/* 6. Afbeelding onder midden – 150x50px */
p.versiering6 {
    position: relative;
}
p.versiering6::after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    bottom: -1cm; /* verplaatst de afbeelding 1 cm onder de onderrand */
    transform: translateX(-50%);
    width: 150px;
    height: 50px;
    background: url('https://denhaag.help/wp-content/uploads/2025/10/denhaag-ooievaar2.png')
                no-repeat center / contain;
    z-index: 1;
}