@font-face {
    font-family: "The Serif Hand";
    src: url("/static/fonts/the-serif-hand-light-v2-webfont.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "The Serif Hand";
    src: url("/static/fonts/the-serif-hand-regular-v2-webfont.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "The Serif Hand";
    src: url("/static/fonts/the-serif-hand-bold-v2-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "The Serif Hand";
    src: url("/static/fonts/the-serif-hand-black-v2-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "The Serif Hand";
    src: url("/static/fonts/the-serif-hand-extrablack-v2-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* Dotted variant — unique style: kept as separate family and rendered with slight letter-spacing and a lighter opacity
   so you can instantly tell it's the dotted variant. Use the dotted family directly where needed. */
@font-face {
    font-family: "The Serif Hand Dotted";
    src: url("/static/fonts/the-serif-hand-dotted-v2-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
body{
    --accent-color: #a23a0d;
    --text-accent-color: #e95412;
    --text-color: #333;
    /* Gebruikt bij afbeeldingen headers, etc. in cms */
    --color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.42857143;
    color: var(--text-color);
    font-size: 14px;
    a
    {
        color: #888;
        text-decoration: none;
        &:hover, &:focus
        {
            color: #626262;
            text-decoration: underline;
        }
    }
}
content {
    margin: 0 auto;
    max-width: 95dvw;
    display: block;    
    position: relative;
    &.home{
        text-align: center;
        > q:first-of-type
        {
            font-style: italic;
            display: block;
            margin-top: 1em;
            &::before, &&::after
            {
                color: var(--accent-color);
                font-weight: bold;
            }
        }
        > a:first-of-type
        {
            color: #888;
            text-decoration: none;
            font-size: 1.4em;
            line-height: 2em;
            font-weight: bold;
            &:active
            {
                outline: 0;
            }
            &:hover
            {
                outline: 0;    
                text-decoration: underline;
            }
        }
    }
    &.openingstijden
    {
        max-width: 85dvw;
        margin: 0 auto;
        flex: 1;
        width: 100%;
        > div
        {
            display: flex;
            gap: 4em;
            flex-direction: column;
        }
    }
    &.trouwringen
    {
        > p
        {
            text-align: center;
            font-style: italic;
            > span
            {
                font-size: 1.4em;
                color: var(--accent-color);
            }
        }
    }
    &.eigen-ontwerpen
    {
        > hr
        {
            max-width: 20em;
        }
        eigen-ontwerp
        {
            margin-top: 4em; 
            margin-right: auto; 
            margin-bottom: 4em; 
            margin-left: auto;
        }
        a {text-decoration: none;}
    }
    &.eigen-ontwerp
    {
        eigen-ontwerp
        {
            font-size: 2em;
            margin: 4em auto;
        }
    }
    &.contact
    {
        h3{ font-size: 2em;}
        h4{ font-size: 1.5em;}
        h3, h4
        {
            color: var(--accent-color);
            font-weight: normal;
            margin: 1em 0 0 0;
        }
        > div
        {
            &:nth-of-type(1)
            {
                display: flex;
                > div
                {
                    width: 50%;
                    &:first-of-type
                    {
                        padding: 3em;
                        > iframe
                        {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
footer
{
    clear: both;
    padding: 15px 0 20px 0;
    a
    {
        text-decoration: none;
        color: #888;
        &:hover
        {
            text-decoration: underline;
        }
    }
}
body > juweel-paneel
{
    /* Voor de preview in het CMS. */
    max-width: 600px;
    margin: 20px;
}
#images > ul > .upload-image > div:first-of-type {
    background-color: #fff;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    line-height: 1.42857143;
}
.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
contact-widget + openingstijd-uitzonderingen
{
    display: block;
    margin-top: 3em;
}
@media (min-width: 768px)
{
    content 
    {
        max-width: 750px;
        &.openingstijden
        {
            max-width: calc(min(750px, 85dvw));
            > div
            {
                flex-direction: row;
            }
        }
    }
}
@media (min-width: 922px)
{
    content 
    {
        max-width: 970px;
        &.openingstijden
        {
            max-width: calc(min(970px, 85dvw));
        }
    }
}
@media (min-width: 1200px)
{
    content {
        max-width: 1170px;
        &.openingstijden
        {
            max-width: calc(min(1170px, 85dvw));
        }
    }
}