/* Basistypografie */
body {
    font-family: 'Archivo', sans-serif;
}

@font-face {
    font-family: 'OPSAndEverUltra';
    src: url('../fonts/OPSAndEverUltra-Regular.otf') format('opentype');
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'OPSAndEverUltra';
}

a, button {
    transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

/* Eigen cursor: assets/img/cursor.png verkleind naar 32px (+64px voor retina);
   browsers negeren cursor-afbeeldingen groter dan 128px. Hotspot linksboven. */
*, *::before, *::after {
    cursor: url('../img/cursor-32.png') 2 0, auto;
    cursor: -webkit-image-set(url('../img/cursor-32.png') 1x, url('../img/cursor-64.png') 2x) 2 0, auto;
    cursor: image-set(url('../img/cursor-32.png') 1x, url('../img/cursor-64.png') 2x) 2 0, auto;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea {
    cursor: text;
}

@media (prefers-reduced-motion: no-preference) {
    /* scroll-reveal: verborgen begintoestand alleen als JS beschikbaar is */
    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .6s ease, transform .6s ease;
    }
    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
    /* combineren met een overflow-hidden wrapper om de afbeelding */
    .hover-zoom img {
        transition: transform .6s ease;
    }
    .hover-zoom:hover img {
        transform: scale(1.03);
    }
}

/* torn-paper randen: mask knipt de afbeelding, wrapper tekent een papierrand erachter */
.torn {
    -webkit-mask-image: url('../img/torn.svg');
    mask-image: url('../img/torn.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.torn-paper {
    position: relative;
}

.torn-paper::before {
    content: "";
    position: absolute;
    inset: -4px;
    background: #e8e4da;
    -webkit-mask-image: url('../img/torn-rim.svg');
    mask-image: url('../img/torn-rim.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.torn-paper > * {
    position: relative;
}

/* Lijsten met een play-icoon als opsommingsteken (kleur volgt de tekstkleur) */
.list-play {
    list-style: none;
    padding-left: 0;
}

.list-play li {
    position: relative;
    padding-left: 1.75rem;
}

.list-play li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('../img/favicon-white.png') no-repeat center / contain;
    mask: url('../img/favicon-white.png') no-repeat center / contain;
}

/* Ongeordende lijsten uit de editor krijgen hetzelfde play-icoon */
.the-content ul {
    list-style: none;
    padding-left: 0;
}

.the-content ul > li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.25rem;
}

.the-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('../img/favicon-white.png') no-repeat center / contain;
    mask: url('../img/favicon-white.png') no-repeat center / contain;
}

/* embeds uit Timodo/ACF krijgen geen Tailwind-classes mee */
.embed iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
}

.embed video,
.embed iframe[src^="https://www.youtube.com"] {
    aspect-ratio: 16/9 !important;
}

.embed iframe[src^="https://open.spotify.com"] {
    aspect-ratio: auto !important;
    height: 352px !important;
}

@media (max-width: 767px) {
    .embed iframe[src^="https://open.spotify.com"] {
        height: 211px !important; /* 60% van 352px */
    }
}