/* Fonts — dezelfde combinatie als molentzand.nl: Kreon voor koppen,
   Source Sans Pro voor lopende tekst. De castingpagina dequeue't alle styles
   van het thema, dus de fonts moeten hier meegeleverd worden. */

@font-face {
  font-display: swap;
  font-family: 'Kreon';
  font-style: normal;
  font-weight: 300 700;
  src: url('../fonts/kreon/Kreon-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-sans-pro/SourceSansPro-Light.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-pro/SourceSansPro-SemiBold.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
}

:root {
    --dodocasting-feed-height: 142px;

    /* Huisstijl. Overgenomen van molentzand.nl: body = Source Sans Pro #304F51,
       koppen = Kreon, accent = #D18700. Deze waarden zijn de fallback; de
       instellingen van de site kunnen ze op de castingpagina overschrijven. */
    --dodo-primary: #304F51;
    --dodo-primary-dark: #223739;
    --dodo-primary-10: rgba(48, 79, 81, .10);
    --dodo-primary-04: rgba(48, 79, 81, .04);
    --dodo-accent: #D18700;
    --dodo-light: #F4F3EF;
    --dodo-on-dark: #ffffff;

    --dodo-gradient-start: var(--dodo-primary);
    --dodo-gradient-end: var(--dodo-accent);
    --dodo-gradient: linear-gradient(90deg, var(--dodo-gradient-start) 0%, var(--dodo-gradient-end) 100%);

    --dodo-font-heading: 'Kreon', serif;
    --dodo-font-body: 'Source Sans Pro', sans-serif;
}

body {
    font-family: var(--dodo-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dodo-font-heading);
}

.dodocasting-item {
    background: var(--dodo-gradient);
}

/* Animations */

@keyframes rotateInFromBottomRight {
    0% {
        transform: rotate(-90deg) scale(0.5);
    }

    60% {
        transform: rotate(15deg) scale(1.2);
    }

    80% {
        transform: rotate(-10deg) scale(0.95);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.rotate-in-from-bottom-right {
    animation: rotateInFromBottomRight .5s forwards;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(1920px);
    }
    100% {
        transform: translateX(0)
    }
}

.slide-in-from-right {
    animation: slideInFromRight .5s forwards;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-1920px);
    }
    100% {
        transform: translateX(0)
    }
}

.slide-in-from-left {
    animation: slideInFromLeft .5s forwards;
}

/* Weather */

.dodo-weather {
    display: flex;
    flex-direction: row;
    color: var(--dodo-primary);
    height: 100%;
    background-color: #fff;
}

.dodo-weather-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 200px;
}

.dodo-weather-today {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 60px;
}

.dodo-weather-info h1 {
    color: var(--dodo-primary);
    font-weight: 600;
    font-size: 250px;
    margin: 0;
}

.dodo-weather-today-icon svg {
    width: 250px;
    height: 250px;
}

.dodo-weather-title {
    color: var(--dodo-primary);
    font-weight: 700;
    font-size: 80px;
    margin: 0;
    margin-top: 66px;
    margin-left: 92px;
    margin-right: 100px;
}

.dodo-weather-forecast {
    --item-gap: 100px;
    display: flex;
    flex-direction: row;
    gap: var(--item-gap);
}

.dodo-weather-forecast .forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.dodo-weather-forecast .forecast-day hr {
    margin: 0;
    width: calc(100% + var(--item-gap));
    height: 3px;
    background-color: var(--dodo-primary);
    border-style: none;
}

.dodo-weather-forecast .shortname {
    font-weight: 600;
    font-size: 70px;
    text-transform: uppercase;
    margin: 0;
}

.dodo-weather-forecast .temp {
    font-weight: 400;
    font-size: 85px;
    margin: 0;
}

.dodo-weather-forecast-icon svg {
    width: 105px;
    height: 105px;
}

/* Quote with Caption */

.dodo-quote-caption {
    height: 100%;
    display: flex;
    flex-direction: row;
}

.dodo-quote-caption-left {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.dodo-quote-caption-right {
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: center;

    position: absolute;
    top: 0;
    /* left: 0; */
    right: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    width: 50%;
}

.dodo-quote-caption-text {
    padding-left: 151px;
    padding-top: 133px;
}


.dodo-quote-caption h1 {
    color: #fff;
    font-weight: 700;
    font-size: 115px;
    text-align: left;
    margin: 0;
    line-height: 1.1;
}

.dodo-quote-caption h2 {
    display: inline-flex;
    color: #fff;
    font-weight: 300;
    font-size: 75px;
    text-align: left;
}


/* News */

.dodo-news {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    background-color: #fff;
}

.dodo-news-left,
.dodo-news-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.dodo-news-left {
    padding: 117px 133px 0 133px;
}

.dodo-news-right img {
    margin-top: 117px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dodo-news-text {
    --lines: 8;
    display: -webkit-box;
    -webkit-line-clamp: var(--lines);
    line-clamp: var(--lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 28px;
    line-height: 1.7;
}

.dodo-news-left h1{
    font-size: 45px;
    font-weight: bold;
    color: var(--dodo-primary);
    margin: 0;
    text-align: left;
    white-space: pre-line; /* respecteert handmatige regelafbrekingen uit het NarrowCasting-titelveld */
}

.dodo-news-read-more {
    margin-top: 50px;
    margin-bottom: 0;
    background: var(--dodo-gradient);
    color: #fff;
}

.dodo-news-qr {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
}

.dodo-news-qr.top {
    bottom: unset;
    top: 0;
}

.dodo-news-qr img {
    display: block;
}

.dodo-news-date {
    margin-top: auto;
    margin-left: auto;
}

.dodo-news-date h3 {
    font-size: 36px;
}

/* Gallery */

.dodo-gallery {
    max-height: 100%;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 50%;
    grid-gap: 30px;
    background-color: #fff;
}

.dodo-gallery-item.top {
    transform: translateX(-1920px);
}

.dodo-gallery-item.bottom {
    transform: translateX(1920px);
}

.dodo-gallery-item.item-0 {
    grid-column: 1 / 3;
    grid-row: 1;
}

.dodo-gallery-item.item-1 {
    grid-column: 3 / 7;
    grid-row: 1;
}

.dodo-gallery-item.item-2 {
    grid-column: 7 / 11;
    grid-row: 1;
}

.dodo-gallery-item.item-3 {
    grid-column: 1 / 5;
    grid-row: 2;
}

.dodo-gallery-item.item-4 {
    grid-column: 5 / 9;
    grid-row: 2;
}

.dodo-gallery-item.item-5 {
    grid-column: 9 / 11;
    grid-row: 2;
}

.dodo-gallery-item {
    overflow: hidden;
}

.dodo-gallery-item img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

/* YouTube */

.dodo-youtube-banner {
    height: 142px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-left: 84px;
    background: #fff;
}

.dodo-youtube-banner h1 {
    line-height: 1;
    margin: 0;
    transform-origin: bottom left;
    transform: rotate(-0.56deg);
    color: var(--dodo-primary);
    font-weight: 700;
    font-size: 55px;
    text-transform: none;
}

/* Vacancy */

.dodo-vacancy {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.dodo-vacancy-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 53%;
    padding: 117px 110px 0 110px;
}

.dodo-vacancy-right {
    width: 47%;
    min-width: 47%;
    height: 100%;
    position: relative;
}

.dodo-vacancy-symbol {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    bottom: 120px;
}

.dodo-vacancy-img{
    margin-top: 117px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dodo-vacancy-title {
    color: #fff;
    font-weight: 700;
    font-size: 80px;
    margin: 0;
    line-height: 1;
    margin-bottom: 30px;
}

.dodo-vacancy-caption {
    display: inline-flex;
    color: #fff;
    font-weight: 700;
    font-size: 55px;
    margin: 0;
    margin-bottom: 20px;
    line-height: 1.3;
}

.dodo-vacancy-description {
    font-size: 30px;
    font-weight: 400;
    color: #fff;
}

.dodo-vacancy-read-more {
    margin-top: 50px;
    margin-bottom: 0;
    background-color: #fff;
    color: var(--dodo-primary);
}

.dodo-vacancy-hours,
.dodo-vacancy-location {
    color: #fff;
    font-weight: 600;
    font-size: 40px;
    margin-left: 20px;
}

.dodo-vacancy-table-symbol {
    display: flex;
    align-items: center;
    justify-self: center;
}

.dodo-vacancy td {
    padding-bottom: 20px;
}

/* Contact */

.dodo-contact {
    display: flex;
    height: 100%;
    width: 100%;
}

.dodo-contact-left {
    padding: 117px 110px 0 110px;
}

.dodo-contact-header-text {
    display: inline-flex;
    flex-direction: column;
}

.dodo-contact-title {
    color: #fff;
    font-weight: 700;
    font-size: 115px;
    margin: 0;
    line-height: 1.1;
    margin-bottom: 80px;
}

.dodo-opening-hours {
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

.dodo-contact-phone {
    font-size: 96px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.dodo-contact td:first-child {
    padding-right: 40px;
}

.dodo-contact-right {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: end;
}


/* Fullscreen Image */
.dodo-fullscreen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Birthday */

.dodo-birthday-title,
.dodo-birthday-caption {
    font-size: 80px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.dodo-birthday-caption {
    font-size: 55px;
}

.dodo-birthday-header {
    padding-left: 117px;
    padding-top: 117px;
    margin-bottom: 80px;
}

.dodo-birthday-body {
    margin-left: 117px;
}

.dodo-birthday td {
    padding-bottom: 100px;
}

.dodo-birthday td:first-child {
    padding-right: 120px;
}

.dodo-birthday-entry {
    display: flex;
    gap: 30px;
    align-items: center;
}

.dodo-birthday-entry-right {
    display: flex;
    flex-direction: column;
}

.dodo-birthday-name {
    font-size: 75px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.dodo-birthday-date {
    font-size: 55px;
    font-weight: 300;
    color: #fff;
}

/* Corner Logo */

.dodo-corner-logo {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    height: 183px;
    width: 617px;
    object-fit: contain;
    object-position: bottom right;
    transform: rotate(-90deg);
    transform-origin: bottom right;
}

/* RSS Feed */

.newsticker-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 142px;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    line-height: 142px;
    background: var(--dodo-gradient);
}

.newsticker-wrapper .newsticker {
    display: inline-flex;
    flex-direction: row;
    font-size: 45px;
    color: #fff;
}

.newsticker-wrapper .newsticker div {
    will-change: transform;
}

/* ============================================================
   NIEUWE SLIDES — dodo-styling (foto met titel, sportlink)
   Deze modules hadden nog geen dodo-ontwerp. (Pagina = iframe,
   vult automatisch het scherm en heeft geen CSS nodig.)
   ============================================================ */

/* Foto met titel */
.dodocasting-photo-with-title { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 110px 120px; box-sizing: border-box; }
.dodocasting-photo-with-title::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .3)); }
.dodocasting-photo-with-title h1 { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 120px; line-height: 1.05; margin: 0; text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.dodocasting-photo-with-title h2 { position: relative; z-index: 1; color: #fff; font-weight: 400; font-size: 55px; margin: 24px 0 0; text-shadow: 0 4px 20px rgba(0, 0, 0, .45); }

/* Sportlink tabel */
.dodocasting-sportlink { height: 100%; box-sizing: border-box; padding: 70px; display: flex; }
.dodocasting-sportlink .table { width: 100%; align-self: stretch; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 24px; overflow: hidden; font-size: 40px; color: var(--dodo-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); --dodocasting-feed-bg-color: var(--dodo-gradient); }
.dodocasting-sportlink .table thead th { background: var(--dodocasting-feed-bg-color); color: #fff; font-weight: 700; text-transform: uppercase; text-align: left; padding: 30px 44px; font-size: 34px; }
.dodocasting-sportlink .table tbody td { padding: 24px 44px; border-top: 2px solid var(--dodo-primary-10); }
.dodocasting-sportlink .table tbody tr:nth-child(even) td { background: var(--dodo-primary-04); }
.dodocasting-sportlink > h1 { margin: auto; color: #fff; font-size: 60px; }

/* ============================================================
   VERTICALE WEERGAVE (staand scherm / portrait)
   Actief wanneer de stream-instelling "Verticale weergave" aan staat
   (body.dodocasting-portrait). Alle regels zijn gescoped, zodat de
   normale liggende (landscape) weergave volledig ongemoeid blijft.
   Ontworpen voor 1080x1920 (9:16).
   ============================================================ */

/* NEWS: tekst boven, beeld onder; knop valt half over de foto */
.dodocasting-portrait .dodo-news { flex-direction: column; }
.dodocasting-portrait .dodo-news-right { flex: none; width: 100%; height: 780px; }
.dodocasting-portrait .dodo-news-right img { margin-top: 0; }
.dodocasting-portrait .dodo-news-left { flex: 1; padding: 80px 80px 0; }
.dodocasting-portrait .dodo-news-left h1 { font-size: 64px; }
.dodocasting-portrait .dodo-news-text { font-size: 38px; --lines: 9; }
.dodocasting-portrait .dodo-news-read-more { margin-top: auto; margin-bottom: 0; position: relative; z-index: 3; transform: translateY(50%); }

/* VACATURE: tekst boven, beeld onder */
.dodocasting-portrait .dodo-vacancy { flex-direction: column; }
.dodocasting-portrait .dodo-vacancy-right { width: 100%; min-width: 0; height: 720px; }
.dodocasting-portrait .dodo-vacancy-img { margin-top: 0; }
.dodocasting-portrait .dodo-vacancy-symbol { bottom: 60px; left: auto; right: 80px; transform: none; width: 160px; height: auto; }
.dodocasting-portrait .dodo-vacancy-left { width: 100%; flex: 1; padding: 80px 80px 0; }
.dodocasting-portrait .dodo-vacancy-description { font-size: 38px; }
.dodocasting-portrait .dodo-vacancy-read-more { margin-bottom: 70px; }

/* QUOTE: tekst boven, logo-pill hoger, decoratie verborgen */
.dodocasting-portrait .dodo-quote-caption-text { padding: 90px 80px 0; }
.dodocasting-portrait .dodo-quote-caption h1 { font-size: 95px; }
.dodocasting-portrait .dodo-quote-caption h2 { font-size: 60px; }
.dodocasting-portrait .dodo-quote-caption-right { position: absolute; width: 100%; left: 0; right: 0; justify-content: center; }

/* CONTACT: titel boven, logo-pill hoger */
.dodocasting-portrait .dodo-contact { flex-direction: column; }
.dodocasting-portrait .dodo-contact-left { padding: 90px 80px 0; }
.dodocasting-portrait .dodo-contact-title { font-size: 95px; }
.dodocasting-portrait .dodo-contact-right { justify-content: center; }

/* WEER: gecentreerd, iets hoger */
.dodocasting-portrait .dodo-weather { flex-direction: column; }
.dodocasting-portrait .dodo-weather-info { flex: 1; padding-bottom: 160px; }
.dodocasting-portrait .dodo-weather-info h1 { font-size: 200px; }
.dodocasting-portrait .dodo-weather-today-icon svg { width: 200px; height: 200px; }
.dodocasting-portrait .dodo-weather-forecast { --item-gap: 48px; }
.dodocasting-portrait .dodo-weather-forecast .shortname { font-size: 52px; }
.dodocasting-portrait .dodo-weather-forecast .temp { font-size: 62px; }
.dodocasting-portrait .dodo-weather-forecast-icon svg { width: 80px; height: 80px; }

/* GALLERY: masonry-stijl (2 kolommen, wisselende hoogtes) — afgestemd op 6 foto's */
.dodocasting-portrait .dodo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); grid-gap: 24px; }
.dodocasting-portrait .dodo-gallery-item.item-0 { grid-column: 1 !important; grid-row: 1 / 3 !important; }
.dodocasting-portrait .dodo-gallery-item.item-1 { grid-column: 2 !important; grid-row: 1 / 4 !important; }
.dodocasting-portrait .dodo-gallery-item.item-2 { grid-column: 1 !important; grid-row: 3 / 6 !important; }
.dodocasting-portrait .dodo-gallery-item.item-3 { grid-column: 2 !important; grid-row: 4 / 6 !important; }
.dodocasting-portrait .dodo-gallery-item.item-4 { grid-column: 1 !important; grid-row: 6 / 7 !important; }
.dodocasting-portrait .dodo-gallery-item.item-5 { grid-column: 2 !important; grid-row: 6 / 7 !important; }

/* YOUTUBE: video verticaal gecentreerd, banner eronder */
.dodocasting-portrait .dodo-youtube { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.dodocasting-portrait .dodo-youtube-banner { position: static; }

/* VERJAARDAG: één kolom in portrait */
.dodocasting-portrait .dodo-birthday-header { padding-left: 80px; padding-top: 90px; }
.dodocasting-portrait .dodo-birthday-body { margin-left: 80px; }
.dodocasting-portrait .dodo-birthday table,
.dodocasting-portrait .dodo-birthday tbody,
.dodocasting-portrait .dodo-birthday tr,
.dodocasting-portrait .dodo-birthday td { display: block; width: 100%; }
.dodocasting-portrait .dodo-birthday td:first-child { padding-right: 0; }
.dodocasting-portrait .dodo-birthday td { padding-bottom: 60px; }

/* FOTO MET TITEL (portrait) */
.dodocasting-portrait .dodocasting-photo-with-title { padding: 110px 80px; }
.dodocasting-portrait .dodocasting-photo-with-title h1 { font-size: 96px; }
.dodocasting-portrait .dodocasting-photo-with-title h2 { font-size: 48px; }

/* SPORTLINK (portrait) */
.dodocasting-portrait .dodocasting-sportlink { padding: 50px; }
.dodocasting-portrait .dodocasting-sportlink .table { font-size: 32px; }
.dodocasting-portrait .dodocasting-sportlink .table thead th { font-size: 28px; padding: 24px 28px; }
.dodocasting-portrait .dodocasting-sportlink .table tbody td { padding: 22px 28px; }

/* ============================================================
   VACATURE — fix: tekst tegen de rechterrand
   Dwingt de rechtermarge af en laat (lange) tekst netjes afbreken,
   ook bij de inline-flex caption. Geldt liggend én staand.
   ============================================================ */
.dodo-vacancy-left {
    box-sizing: border-box;
    padding-right: 110px;
}
.dodocasting-portrait .dodo-vacancy-left {
    padding-right: 80px;
}
.dodo-vacancy-title,
.dodo-vacancy-caption,
.dodo-vacancy-description {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* NEWS — "Toon hele afbeelding": volle breedte, hele afbeelding, geen zijbalken.
   Afbeelding onderaan uitgelijnd zodat 'ie tegen de RSS-balk valt. */
.dodo-news-right--full { justify-content: flex-end; }
.dodo-news-right--full img { height: auto; object-fit: contain; }
.dodocasting-portrait .dodo-news-right--full { height: auto; }

/* Confetti-canvas (verjaardagen) — ligt over de slide, vangt geen kliks */
.dodo-confetti {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* ============================================================
   FACEBOOK / SOCIAL — dodo-styling (plugin-template gebruikt .dodocasting-* classes)
   ============================================================ */
.dodocasting-facebook { display: flex; height: 100%; background: #fff; color: var(--dodo-primary); }
.dodocasting-facebook .left { position: relative; width: 58%; height: 100%; overflow: hidden; background: var(--dodo-primary-dark); }
.dodocasting-facebook .right { width: 42%; height: 100%; display: flex; flex-direction: column; background: #fff; }
.dodocasting-facebook .picture-full { width: 100%; height: 100%; object-fit: cover; }
.dodocasting-facebook video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.dodocasting-facebook .right .container { display: flex; flex-direction: column; height: 100%; }
.dodocasting-facebook .right .inner { padding: 80px 70px 0; flex: 1; overflow: hidden; }
.dodocasting-facebook .time-ago { font-size: 30px; font-weight: 700; color: var(--dodo-accent); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 28px; text-align: left; }
.dodocasting-facebook .message { font-size: 44px; line-height: 1.4; font-weight: 400; color: var(--dodo-primary); margin: 0; display: -webkit-box; -webkit-line-clamp: 12; line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.dodocasting-facebook .post-likes { padding: 24px 70px 36px; }
.dodocasting-facebook .post-likes p { position: relative; padding-left: 62px; margin: 0; font-size: 34px; font-weight: 600; color: var(--dodo-primary); }
.dodocasting-facebook .post-likes p::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background-color: var(--dodo-primary); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M2 21h2V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 6.59 7.59C6.22 7.95 6 8.45 6 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/></svg>") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M2 21h2V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 6.59 7.59C6.22 7.95 6 8.45 6 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/></svg>") no-repeat center / contain; }
.dodocasting-facebook .footer { position: relative; display: flex; align-items: center; min-height: 200px; background: var(--dodo-gradient); color: #fff; }
.dodocasting-facebook .footer .inner { padding: 30px 220px 30px 70px; }
.dodocasting-facebook .page-name { font-size: 42px; font-weight: 700; margin: 0; color: #fff; }
.dodocasting-facebook .page-likes { font-size: 28px; font-weight: 400; color: #fff; opacity: .9; }
.dodocasting-facebook .footer .qr { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); height: 160px; width: 160px; background: #fff; padding: 10px; border-radius: 14px; box-sizing: border-box; }
.dodocasting-facebook .album-container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.dodocasting-facebook .album-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.dodocasting-facebook .row-span { grid-row: span 2; }
.dodocasting-facebook .column-span { grid-column: span 2; }

/* FACEBOOK / SOCIAL (portrait) */
.dodocasting-portrait .dodocasting-facebook { flex-direction: column; }
.dodocasting-portrait .dodocasting-facebook .left { width: 100%; height: 880px; }
.dodocasting-portrait .dodocasting-facebook .right { width: 100%; flex: 1; height: auto; }
.dodocasting-portrait .dodocasting-facebook .message { font-size: 40px; -webkit-line-clamp: 12; line-clamp: 12; }

/* WordPress vervangt emoji in de browser door <img class="emoji"> (twemoji). De
   standaard-sizing wordt op de casting-pagina mee-gedequeued -> zonder deze regel
   wordt de emoji BEELDVULLEND. Herstelt de inline-grootte (1em). */
img.emoji {
    display: inline-block !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em;
    vertical-align: -0.1em;
    border: none; box-shadow: none; background: none; padding: 0;
}

/* ============================================================
   LIJST 1 & 2 — aanpassingen klantfeedback (2026-08-04)
   Full HD (1920x1080). Gescoped; landscape/portrait waar nodig.
   ============================================================ */

/* WEER (lijst 2): liggend verticaal centreren — padding-bottom haalde de inhoud
   uit het midden. Portret stond al goed gecentreerd -> die waarde behouden. */
.dodo-weather-info { padding-bottom: 0; }
.dodocasting-portrait .dodo-weather-info { padding-bottom: 160px; }

/* CONTACT (lijst 2): inhoud verticaal centreren i.p.v. bovenaan. */
.dodo-contact-left { display: flex; flex-direction: column; padding-top: 117px; padding-bottom: 117px; }
.dodocasting-portrait .dodo-contact-left { flex: 1; padding-top: 90px; padding-bottom: 90px; }

/* VERJAARDAG STAAND (lijst 1): kleiner + gecentreerd (geen lege ruimte bij 1 jarige). */
.dodocasting-portrait .dodo-birthday { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.dodocasting-portrait .dodo-birthday-header { padding-top: 0; padding-left: 0; margin-bottom: 56px; text-align: center; }
.dodocasting-portrait .dodo-birthday-title { font-size: 64px; }
.dodocasting-portrait .dodo-birthday-caption { font-size: 42px; }
.dodocasting-portrait .dodo-birthday-body { margin-left: 0; }
.dodocasting-portrait .dodo-birthday-entry { justify-content: center; }
.dodocasting-portrait .dodo-birthday-name { font-size: 44px; }
.dodocasting-portrait .dodo-birthday-date { font-size: 32px; }
.dodocasting-portrait .dodo-birthday-entry-left svg { width: 96px; height: 96px; }
.dodocasting-portrait .dodo-birthday td { padding-bottom: 44px; }

/* VERJAARDAG STAAND — zonder taart-icoon: naam + datum gecentreerd in beeld (klantwens). */
.dodocasting-portrait .dodo-birthday.no-cakes .dodo-birthday-entry-right { align-items: center; text-align: center; }

/* ============================================================
   TEKSTBLOK-UITLIJNING (lijst 3) — per slide instelbaar via ACF.
   Verticaal (boven/midden/onder) + horizontaal (links/midden/rechts)
   via CSS-variabelen op de slide-root. Contact/Vacature/Quote/Weer/
   Foto-met-titel. De tekst-container is een flex-kolom over de volle
   hoogte; justify-content stuurt verticaal, align-items horizontaal.
   ============================================================ */
.va-top    { --dodo-va: flex-start; }
.va-center { --dodo-va: center; }
.va-bottom { --dodo-va: flex-end; }
.ta-left   { --dodo-ai: flex-start; --dodo-ta: left; }
.ta-center { --dodo-ai: center;     --dodo-ta: center; }
.ta-right  { --dodo-ai: flex-end;   --dodo-ta: right; }

.dodo-contact-left,
.dodo-vacancy-left,
.dodo-quote-caption-left {
    justify-content: var(--dodo-va, flex-start);
    align-items: var(--dodo-ai, flex-start);
    text-align: var(--dodo-ta, left);
}
body:not(.dodocasting-portrait) .dodo-weather {
    justify-content: var(--dodo-va, center);
    align-items: var(--dodo-ai, center);
}
.dodocasting-photo-with-title {
    justify-content: var(--dodo-va, center);
    align-items: var(--dodo-ai, center);
    text-align: var(--dodo-ta, center);
}
/* Quote: decoratie absoluut onderaan zodat de tekst vrij kan uitlijnen */
.dodo-quote-caption-left { position: relative; }
.dodo-quote-caption h1,
.dodo-quote-caption h2 { text-align: var(--dodo-ta, left); }

/* ============================================================
   INFO-SLIDE (lijst 3, nieuw) — titel/ondertitel/beschrijving +
   optionele afbeelding. Achtergrond + tekstkleur komen inline
   (adaptief o.b.v. gekozen kleur). Uitlijning via va- en ta-klassen.
   ============================================================ */
.dodocasting-info { display: flex; height: 100%; width: 100%; overflow: hidden; }
.dodocasting-info-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 117px 133px;
    justify-content: var(--dodo-va, center);
    align-items: var(--dodo-ai, flex-start);
    text-align: var(--dodo-ta, left);
}
.dodocasting-info-image { flex: 1; min-width: 0; }
.dodocasting-info-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dodocasting-info-title { font-size: 115px; font-weight: 700; margin: 0; line-height: 1.05; color: inherit; }
.dodocasting-info-subtitle { font-size: 60px; font-weight: 400; margin: 24px 0 0; color: inherit; }
.dodocasting-info-description { font-size: 40px; line-height: 1.5; font-weight: 400; margin-top: 44px; color: inherit; max-width: 100%; overflow-wrap: anywhere; }

/* Indeling met afbeelding (liggend): standaard = foto rechts (row). */
body:not(.dodocasting-portrait) .dodocasting-info.layout-left { flex-direction: row-reverse; }
body:not(.dodocasting-portrait) .dodocasting-info.layout-bottom { flex-direction: column; }
body:not(.dodocasting-portrait) .dodocasting-info.layout-top { flex-direction: column-reverse; }
/* Tussenruimte tekst - afbeelding, per indeling */
body:not(.dodocasting-portrait) .dodocasting-info.layout-right.has-image .dodocasting-info-text { padding-right: 90px; }
body:not(.dodocasting-portrait) .dodocasting-info.layout-left.has-image .dodocasting-info-text { padding-left: 90px; }
body:not(.dodocasting-portrait) .dodocasting-info.layout-bottom.has-image .dodocasting-info-text { padding-bottom: 60px; }
body:not(.dodocasting-portrait) .dodocasting-info.layout-top.has-image .dodocasting-info-text { padding-top: 60px; }
/* Afgeronde binnenrand van de afbeelding, per indeling */

/* Portret: standaard tekst boven + afbeelding onder (zoals nieuws); 'foto boven' keert dat om. */
.dodocasting-portrait .dodocasting-info { flex-direction: column; }
.dodocasting-portrait .dodocasting-info.layout-top { flex-direction: column-reverse; }
.dodocasting-portrait .dodocasting-info-text { padding: 90px 80px; }
.dodocasting-portrait .dodocasting-info.has-image .dodocasting-info-image { width: 100%; height: 780px; }
.dodocasting-portrait .dodocasting-info-title { font-size: 95px; }
.dodocasting-portrait .dodocasting-info-subtitle { font-size: 52px; }
.dodocasting-portrait .dodocasting-info-description { font-size: 38px; }

/* GALERIJ STAAND (lijst 1): linker scheidingslijn 1 rij hoger, zodat de onderste
   4 foto's niet allemaal op één punt samenkomen (speelser/rustiger). */
.dodocasting-portrait .dodo-gallery-item.item-2 { grid-row: 3 / 5 !important; }
.dodocasting-portrait .dodo-gallery-item.item-4 { grid-row: 5 / 7 !important; }

/* FULLSCREEN (lijst 1): wrapper vullen zodat een (staande) foto schermvullend is. */
.dodo-fullscreen-img-wrapper { width: 100%; height: 100%; }

/* ============================================================
   UNIFORM LOGO-SYSTEEM (lijst 3)
   Logo op een afgeronde button, per-slide aan/uit via de bestaande
   logo-toggle, VASTE positie (rechtsonder), GEEN invlieg-animatie.
   Kleurlogica: gekleurde achtergrond -> witte button + gekleurd logo;
   witte achtergrond -> gradient-button + wit logo (logo wit via filter).
   Vervangt het oude hoek-logo (.dodo-corner-logo) en de vaste pill.
   ============================================================ */
/* ---- BASIS PILL-BUTTON: gedeeld formaat voor de logo-button ÉN de CTA-knoppen
   (lees meer / solliciteer). Voeg .dodo-pill-btn toe aan elke nieuwe pill-knop,
   dan houden ze allemaal exact dezelfde afmeting + afronding. ---- */
.dodo-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 1000px;
    padding: 44px 84px;
    font-size: 30px;
    font-weight: 700;
    line-height: 56px;   /* = logo-hoogte -> gelijke button-hoogte bij 1 regel */
    text-align: center;
    filter: drop-shadow(8px 8px 30px rgba(0, 0, 0, 0.25));
}
.dodo-pill-btn img { display: block; height: 56px; width: auto; }
.dodocasting-portrait .dodo-pill-btn { padding: 34px 62px; line-height: 46px; }
.dodocasting-portrait .dodo-pill-btn img { height: 46px; }

/* Logo-button = pill-button op vaste positie rechtsonder + kleurlogica. */
.dodo-logo-btn {
    position: absolute;
    right: 90px;
    bottom: 90px;
    z-index: 6;
}
.dodo-logo-btn.on-dark { background: #fff; }                                             /* gekleurde slide */
.dodo-logo-btn.on-light { background: var(--dodo-gradient); } /* witte slide */
.dodo-logo-btn.on-light img { filter: brightness(0) invert(1); }                          /* logo wit */

/* YouTube: onderbalk staat onderaan -> logo net erboven zodat het niet overlapt. */
.dodo-youtube .dodo-logo-btn { bottom: 210px; }

/* Portret: horizontaal gecentreerd (klantwens), onderaan. */
.dodocasting-portrait .dodo-logo-btn { left: 50%; right: auto; transform: translateX(-50%); bottom: 70px; }
.dodocasting-portrait .dodo-youtube .dodo-logo-btn { bottom: 180px; }

/* ============================================================
   WEER LIGGEND — het hele blok (titel + temp + forecast) als groep
   gecentreerd in het midden van het scherm (klantwens). Alleen landscape;
   portret behoudt z'n eigen layout.
   ============================================================ */
body:not(.dodocasting-portrait) .dodo-weather {
    flex-direction: column;
    align-items: var(--dodo-ai, center);
    justify-content: var(--dodo-va, center);
}
body:not(.dodocasting-portrait) .dodo-weather-title {
    margin: 0 0 40px 0;
}

/* Logo-slide — overgenomen uit de basis-thema-CSS, die wij niet laden */

.dodocasting-logo {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.dodocasting-logo img {
    width: 75%;
}

/* Vormlaag — ligt tussen de achtergrondkleur en de tekst.
   De vorm wordt als mask gerenderd en krijgt currentColor, dus hij volgt de
   tekstkleur van de slide en steekt altijd af tegen de achtergrond. */

.dodo-heeft-vorm {
    position: relative;
    isolation: isolate;
}

.dodo-heeft-vorm::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--dodo-vorm-kleur, currentColor);
    opacity: var(--dodo-vorm-dekking, .25);
    -webkit-mask-image: var(--dodo-vorm);
    mask-image: var(--dodo-vorm);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.dodocasting-portrait .dodo-heeft-vorm::before {
    -webkit-mask-image: var(--dodo-vorm-staand, var(--dodo-vorm));
    mask-image: var(--dodo-vorm-staand, var(--dodo-vorm));
}

/* Wind op de weerslide. De pijl waait mee met de wind; de tekst zegt waar
   hij vandaan komt, want dat is wat je als molenaar wilt weten. */

.dodo-weather-wind {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 8px;
}

.dodo-weather-wind-pijl {
    width: 84px;
    height: 84px;
    flex: none;
    /* De tekstkleur van de slide, niet het accent: dat accent kan een kleur
       zijn die op een witte weerslide wegvalt. */
    color: inherit;
}

.dodo-weather-wind-tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.dodo-weather-wind-tekst .kracht {
    font-family: var(--dodo-font-heading);
    font-size: 56px;
    font-weight: 700;
}

.dodo-weather-wind-tekst .richting {
    font-size: 34px;
    font-weight: 400;
    opacity: .75;
}

.dodocasting-portrait .dodo-weather-wind { gap: 34px; margin-top: 16px; }
.dodocasting-portrait .dodo-weather-wind-pijl { width: 104px; height: 104px; }
.dodocasting-portrait .dodo-weather-wind-tekst .kracht { font-size: 68px; }
.dodocasting-portrait .dodo-weather-wind-tekst .richting { font-size: 42px; }

/* Kiosk-gedrag.
   Geen muisaanwijzer: die staat op een scherm dat dag en nacht aan staat stil
   op dezelfde plek en kan inbranden. Geen tekstselectie en geen contextmenu,
   want een lange druk op een touchscreen telt als een rechtermuisklik. */

html,
body,
body * {
    cursor: none !important;
}

body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}