/* ClearFlow CMS: the website's look (Look in the backoffice). */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/inter/400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/inter/700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/roboto/400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/roboto/700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/open-sans/400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/open-sans/700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/lato/400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/lato/700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/montserrat/400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/montserrat/700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/poppins/400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/poppins/700.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/raleway/400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/raleway/700.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/oswald/400.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/oswald/700.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/playfair-display/400.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/playfair-display/700.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/merriweather/400.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://arlettefokker.tijnsnijders.nl/site-fonts/merriweather/700.woff2") format("woff2"); }
:root {
    --color-bg: #cccccc;
    --color-text: #212529;
    --color-muted: #6c757d;
    --color-heading: #212529;
    --color-link: #007bff;
    --color-accent: #343a40;
    --color-accent-text: #ffffff;
    --color-line: #343a40;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size: 16px;
    --heading-weight: 400;
    --width: 76rem;
    --button-radius: 4px;
    --image-radius: 8px;
    --image-border-width: 0px;
    --image-border-color: #e3d6cc;
    --image-shadow: none;
    --box-bg: #e3d6cc;
    --box-radius: 8px;
    --box-border-width: 0px;
    --box-border-color: #343a40;
    --box-shadow: none;
    --header-bg: #343a40;
    --header-text: #ffffff;
    --header-border-width: 0px;
    --header-border-color: #343a40;
    --header-shadow: none;
    --footer-bg: #aaaaaa;
    --footer-text: #212529;
    --footer-border-width: 0px;
    --footer-border-color: #aaaaaa;
}

/* Own CSS */
/* arlettefokker.nl: her design (WEB-361), on top of ClearFlow's Look. Values from the old site (Bootstrap 4 + default.css). */

body { line-height: 1.5; }

/* Header: dark, full width, her logo far left (80px high), the menu centred, white dropdowns. */
header .wrap { max-width: none; padding: .5rem 1rem; justify-content: flex-start; }
header .site-name img { height: auto; max-height: 80px; max-width: 320px; }
header nav { margin: 0 auto; }
header nav > ul > li > a { color: rgba(255, 255, 255, .5); }
header nav > ul > li > a:hover, header nav > ul > li > a[aria-current], header nav > ul > li:hover > a { color: #fff; }
header nav li ul { background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: .25rem; }
header nav li ul a { color: #212529; }
header nav li ul a:hover, header nav li ul a[aria-current] { color: #16181b; background: #f8f9fa; }

/* The content in one panel: #e3d6cc, 8px corners, the deep dark edge all round. */
main { box-sizing: border-box; max-width: 1140px; min-height: 400px; margin: 72px auto 200px; padding: 30px; background: #e3d6cc; border-radius: 8px; box-shadow: 0 0 24px 16px #343a40; }
main > .wrap, main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
main > .wrap:first-child { padding-top: 0; }
.top-image { padding-top: 0; }
/* Text over the full width of the panel (not ClearFlow's narrower reading width). */
.narrow > * { max-width: none; }
.block { margin: 1rem 0; }

/* Headings as the old site had them (one level up there: h3 was the big one). */
main h2 { font-size: 1.75rem; font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
main h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
main h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
main p { margin: 0 0 1rem; }

/* Images in the text: 8px corners and a small hard shadow; an image beside text sits at the top, as the floating images did. */
.split img, .gallery img, .single-image img { border-radius: 8px; box-shadow: 3px 3px 4px #444; }
.split { align-items: start; grid-template-columns: auto minmax(0, 1fr); gap: 25px; }
.split.image-right { grid-template-columns: minmax(0, 1fr) auto; }
.split img { max-width: 400px; }

/* Buttons (the bol.com links) in the header's dark colour. */
a.button { background: #343a40; border-color: #343a40; color: #fff; }

/* Footer: grey, centred, one line: © 2018 - year | Disclaimer | Instagram. */
footer { margin-top: 0; padding: 30px 0; min-height: 80px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .5rem; text-align: center; }
footer .footer-text p { margin: 0; }
footer .footer-text a { color: #007bff; text-decoration: none; }
footer .footer-text a:hover { text-decoration: underline; }
footer .social { margin: 0; }
footer .social svg { width: 30px; height: 30px; }
footer p:has(.consent-open) { flex-basis: 100%; font-size: .85em; }

/* Phones: the panel full width, a smaller logo. */
@media (max-width: 40rem) {
    header .site-name img { max-height: 50px; }
    main { margin: 0 0 100px; padding: 30px 15px; border-radius: 0 0 8px 8px; }
    .split, .split.image-right { grid-template-columns: minmax(0, 1fr); }
    .split img { max-width: 100%; }
}