/* 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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.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://clearflowcms.nl/site-fonts/merriweather/700.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/comfortaa/400.woff2") format("woff2"); }
@font-face { font-family: "Comfortaa"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/comfortaa/700.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/dancing-script/400.woff2") format("woff2"); }
@font-face { font-family: "Dancing Script"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/dancing-script/700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/cormorant-garamond/400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/cormorant-garamond/400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/cormorant-garamond/700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: italic; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/cormorant-garamond/700-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/eb-garamond/400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/eb-garamond/400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/eb-garamond/700.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 700; font-style: italic; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/eb-garamond/700-italic.woff2") format("woff2"); }
@font-face { font-family: "Marcellus SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://clearflowcms.nl/site-fonts/marcellus-sc/400.woff2") format("woff2"); }
:root {
    --color-bg: #f8f2e9;
    --color-text: #2b2119;
    --color-muted: #6d5b4b;
    --color-heading: #2b2119;
    --color-link: #b4531a;
    --color-link-hover: var(--color-link);
    --color-link-visited: var(--color-link);
    --color-accent: #b4531a;
    --color-accent-text: #ffffff;
    --color-line: #e2d3bf;
    --font-body: "Inter", sans-serif;
    --font-heading: "Poppins", sans-serif;
    --font-size: 16px;
    --heading-weight: 700;
    --width: 76rem;
    --button-radius: 10px;
    --image-radius: 12px;
    --image-border-width: 0px;
    --image-border-color: #e0d8cb;
    --image-shadow: none;
    --box-bg: #ecdfcc;
    --box-radius: 16px;
    --box-border-width: 0px;
    --box-border-color: #e0d8cb;
    --box-shadow: 0 4px 14px rgb(0 0 0 / .14);
    --header-bg: #3a2a1e;
    --header-text: #f8f2e9;
    --header-menu-hover: #f0a066;
    --header-menu-hover-own: #f0a066;
    --header-border-width: 0px;
    --header-border-color: #e0d8cb;
    --header-shadow: 0 4px 14px rgb(0 0 0 / .14);
    --footer-bg: #3a2a1e;
    --footer-text: #e8dccb;
    --footer-border-width: 0px;
    --footer-border-color: #e0d8cb;
    --block-heading-size: 1.5em;
    --block-heading-weight: var(--heading-weight);
    --block-heading-style: normal;
    --block-heading-case: none;
    --block-heading-case-variant: normal;
    --block-heading-color: var(--color-heading);
    --block-heading-align: initial;
    --text-heading-size: 1.5em;
    --text-heading-weight: var(--heading-weight);
    --text-heading-style: normal;
    --text-heading-case: none;
    --text-heading-case-variant: normal;
    --text-heading-color: var(--color-heading);
    --text-heading-align: initial;
}

/* Own CSS */
/* clearflowcms.nl (WEB-489): on top of the Look's settings (theme.json). ClearFlow's markup: main > section.block.block-<type>. */

/* Room between the menu bar and the first heading. */
main { padding-top: 2.75rem; }

/* The opening heading of a page reads as its headline. */
main > .block-text:first-of-type h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.15; margin-bottom: .75rem; }

/* More air between blocks. */
main > .block { margin-bottom: 2.25rem; }

/* Boxes: a little more padding, a dark-brown heading, a soft warm shadow. */
.columns.boxes .box { padding: 1.6rem 1.6rem 1.3rem; box-shadow: 0 6px 18px rgb(58 42 30 / .14); }
.columns.boxes .box h3 { color: #3a2a1e; }
.columns.boxes .box img { border-radius: 10px; box-shadow: 0 6px 16px rgb(58 42 30 / .16); margin-bottom: .9rem; }

/* Screenshots beside text: lifted off the page. The diagram (an image block) stays as it is, without anything around it. */
.block-image_text img { box-shadow: 0 14px 34px rgb(58 42 30 / .2); }
.block-image img { box-shadow: none; background: transparent; border: 0; display: block; width: 100%; margin: 0 auto; }

/* A page that ends with a button ends in a dark-brown band. */
main > .block-button:last-child > * {
    background: #3a2a1e; color: #f8f2e9; border-radius: 18px; padding: 2.4rem 2.2rem;
    box-shadow: 4px 4px 6px rgb(58 42 30 / .4);
    border: 4px solid #b4531a;
}
main > .block-button:last-child h2, main > .block-button:last-child h3 { color: #f8f2e9; }
main > .block-button:last-child a:not(.button):not([class*="btn"]) { color: #f0a066; }

.box { border: 2px solid #b4531a; box-shadow: 4px 4px 6px rgb(58 42 30 / .4) !important; }
.rich.box:hover, .rich.box:focus { box-shadow: none !important; }
a.button:hover, a.button:focus { box-shadow: 0px 0px 8px rgb(58 42 30 / .4) !important; }

/* The header and footer in dark brown: the site name and menu in cream. */
footer a { color: #f8f2e9; }