/* =========================================================================
   FridaPaintings – website: basis, header, menu, footer, Lees verder (galerij en kunstwerken: plugin Frida-Kunstwerken)
   Kleuren en lettertypes volgen de Elementor Site-instellingen, met terugvalwaarden.
   ========================================================================= */

:root {
	--fp-dark: var(--e-global-color-primary, #2B2522);
	--fp-terra: var(--e-global-color-secondary, #B5543A);
	--fp-text: var(--e-global-color-text, #4A423D);
	--fp-gold: var(--e-global-color-accent, #C9A46A);
	--fp-cream: #F7F2EB;
	--fp-sand: #EDE4D8;
	--fp-line: #E3D8C9;
	--fp-white: #FFFFFF;
	--fp-muted: #8A7E74;
	--fp-ok: #4d7a57;
	--fp-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--fp-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--fp-max: 1240px;
	--fp-gutter: clamp(20px, 4vw, 40px);
	--fp-radius: 0px;
	--fp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Plugin Servitweb Evenementen in de huisstijl van Fridapaintings */
:root {
	--swe-dark: var(--fp-dark);
	--swe-accent: var(--fp-terra);
	--swe-text: var(--fp-text);
	--swe-gold: var(--fp-gold);
	--swe-cream: var(--fp-cream);
	--swe-sand: var(--fp-sand);
	--swe-line: var(--fp-line);
	--swe-white: var(--fp-white);
	--swe-muted: var(--fp-muted);
	--swe-serif: var(--fp-serif);
	--swe-sans: var(--fp-sans);
	--swe-max: var(--fp-max);
	--swe-gutter: var(--fp-gutter);
	--swe-radius: var(--fp-radius);
}
.swe-main { font-weight: 300; }

/* ---------- Basis voor pagina's van de plugin ---------- */

.fp-main { display: block; background: var(--fp-cream); color: var(--fp-text); font-family: var(--fp-sans); font-weight: 300; }
.fp-container { width: 100%; max-width: calc(var(--fp-max) + 2 * var(--fp-gutter)); margin-inline: auto; padding-inline: var(--fp-gutter); box-sizing: border-box; }
.fp-container--narrow { max-width: calc(860px + 2 * var(--fp-gutter)); }
.fp-main--artwork { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 110px); }

.fp-eyebrow { font-family: var(--fp-sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fp-terra); margin: 0 0 8px; }
.fp-section-head { margin-bottom: 28px; }
.fp-section-head h2 { font-family: var(--fp-serif); font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: var(--fp-dark); margin: 0; text-wrap: balance; }
.fp-prose { font-family: var(--fp-sans); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--fp-text); }
.fp-prose > :first-child { margin-top: 0; }
.fp-prose > :last-child { margin-bottom: 0; }
.fp-prose p { margin: 0 0 1em; }
.fp-prose img { max-width: 100%; height: auto; }
.fp-prose a { color: var(--fp-terra); }
.fp-empty { font-family: var(--fp-serif); font-size: 22px; color: var(--fp-text); text-align: center; padding: 40px 0; margin: 0; }
.fp-empty a { color: var(--fp-terra); }
.fp-icon { width: 1.15em; height: 1.15em; flex: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.fp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--fp-sans); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
	padding: 17px 30px; border: 1px solid var(--fp-dark); background: var(--fp-dark); color: #fff !important; text-decoration: none;
	border-radius: var(--fp-radius); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s;
}
.fp-btn:hover, .fp-btn:focus-visible { background: var(--fp-terra); border-color: var(--fp-terra); }
.fp-btn--outline { background: transparent; color: var(--fp-dark) !important; }
.fp-btn--outline:hover, .fp-btn--outline:focus-visible { background: var(--fp-dark); border-color: var(--fp-dark); color: #fff !important; }
.fp-btn--block { width: 100%; box-sizing: border-box; }
.fp-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fp-sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-dark); text-decoration: none; }
.fp-link .fp-icon { transition: transform .25s var(--fp-ease); }
.fp-link:hover { color: var(--fp-terra); }
.fp-link:hover .fp-icon { transform: translateX(3px); }
:where(.fp-header, .fp-footer, .fp-main, .fp-gallery, .fp-events, .fp-readmore) :focus-visible { outline: 2px solid var(--fp-gold); outline-offset: 3px; }

/* =========================================================================
   Header en menu
   ========================================================================= */

.fp-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--fp-cream); border-bottom: 1px solid var(--fp-line);
	font-family: var(--fp-sans);
	transition: box-shadow .3s ease;
}
.admin-bar .fp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fp-header { top: 0; } }
.fp-header.is-scrolled { box-shadow: 0 8px 30px rgba(43, 37, 34, .08); }
.fp-header__inner {
	max-width: calc(var(--fp-max) + 2 * var(--fp-gutter)); margin: 0 auto; padding: 16px var(--fp-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box;
}

.fp-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--fp-dark); min-width: 0; }
.fp-brand__logo { height: 52px; width: auto; display: block; }
.fp-brand__text { display: flex; flex-direction: column; min-width: 0; }
.fp-brand__name { font-family: var(--fp-serif); font-size: 30px; font-weight: 500; line-height: 1.05; letter-spacing: .005em; color: var(--fp-dark); }
.fp-brand__sub { font-family: var(--fp-serif); font-style: italic; font-size: 16px; line-height: 1.3; color: var(--fp-text); margin-top: 2px; }
.fp-brand:hover .fp-brand__name { color: var(--fp-terra); }

/* Desktop */
.fp-nav__head, .fp-nav__foot { display: none; }
.fp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.fp-nav__item { position: relative; }
.fp-nav__row { display: flex; align-items: center; }
.fp-nav__link {
	display: block; padding: 12px 14px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--fp-dark); text-decoration: none; position: relative; white-space: nowrap;
}
.fp-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--fp-terra); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--fp-ease); }
.fp-nav__item:hover > .fp-nav__row .fp-nav__link::after,
.fp-nav__item.is-current > .fp-nav__row .fp-nav__link::after { transform: scaleX(1); }
.fp-nav__item.is-current > .fp-nav__row .fp-nav__link { color: var(--fp-terra); }
.fp-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -8px; padding: 0; border: 0; background: none; color: var(--fp-dark); cursor: pointer; border-radius: 50%; }
.fp-nav__toggle .fp-icon { width: 14px; height: 14px; transition: transform .25s; }
.fp-sub {
	position: absolute; top: 100%; left: 0; min-width: 230px; padding-top: 8px;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.fp-sub__list { list-style: none; margin: 0; padding: 8px; background: var(--fp-white); box-shadow: 0 18px 40px rgba(43, 37, 34, .14); border: 1px solid var(--fp-line); }
.fp-sub__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; font-size: 15px; color: var(--fp-dark); text-decoration: none; }
.fp-sub__link .fp-icon { width: 14px; opacity: 0; transform: translateX(-4px); transition: .2s; color: var(--fp-terra); }
.fp-sub__link:hover, .fp-sub__item.is-current .fp-sub__link { background: var(--fp-cream); color: var(--fp-terra); }
.fp-sub__link:hover .fp-icon { opacity: 1; transform: none; }
.fp-header:not(.is-mobile) .fp-nav__item:hover > .fp-sub,
.fp-header:not(.is-mobile) .fp-nav__item:focus-within > .fp-sub,
.fp-header:not(.is-mobile) .fp-nav__item.is-open > .fp-sub { opacity: 1; visibility: visible; transform: none; }
.fp-header:not(.is-mobile) .fp-nav__item.is-open .fp-nav__toggle .fp-icon { transform: rotate(180deg); }

.fp-burger {
	display: none; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px;
	background: var(--fp-sand); color: var(--fp-dark); cursor: pointer; font-family: var(--fp-sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.fp-burger .fp-icon { width: 22px; height: 22px; }
.fp-burger:hover { background: var(--fp-terra); color: #fff; }
.fp-backdrop { position: fixed; inset: 0; background: rgba(30, 25, 22, .45); opacity: 0; transition: opacity .3s; z-index: 1001; }
.fp-backdrop.is-visible { opacity: 1; }

/* Gsm en tablet: uitschuifmenu */
.fp-header.is-mobile .fp-brand__name { font-size: 26px; }
.fp-header.is-mobile .fp-brand__sub { font-size: 14px; }
.fp-header.is-mobile .fp-burger { display: inline-flex; }
.fp-header.is-mobile .fp-nav {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002;
	width: min(420px, 90vw); height: 100vh; height: 100dvh;
	display: flex; flex-direction: column; background: var(--fp-cream);
	box-shadow: -20px 0 50px rgba(30, 25, 22, .18);
	clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .42s var(--fp-ease), visibility .42s;
	padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fp-header.is-mobile.is-open .fp-nav { clip-path: inset(0 0 0 -60px); visibility: visible; }
.fp-header.is-mobile .fp-nav__list, .fp-header.is-mobile .fp-nav__foot { transition: transform .5s var(--fp-ease), opacity .4s; transform: translateX(24px); opacity: 0; }
.fp-header.is-mobile.is-open .fp-nav__list, .fp-header.is-mobile.is-open .fp-nav__foot { transform: none; opacity: 1; }
.fp-header.is-mobile .fp-nav__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fp-line); }
.fp-header.is-mobile .fp-nav__head .fp-brand__name { font-size: 24px; }
.fp-header.is-mobile .fp-nav__head .fp-brand__sub { font-size: 13px; }
.fp-header.is-mobile .fp-nav__head .fp-brand__logo { height: 40px; }
.fp-nav__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fp-sand); color: var(--fp-dark); cursor: pointer; }
.fp-nav__close:hover { background: var(--fp-terra); color: #fff; }
.fp-header.is-mobile .fp-nav__list { flex: 1; overflow-y: auto; display: block; padding: 14px 12px; -webkit-overflow-scrolling: touch; }
.fp-header.is-mobile .fp-nav__item { border-radius: 0; }
.fp-header.is-mobile .fp-nav__row { justify-content: space-between; border-radius: 6px; }
.fp-header.is-mobile .fp-nav__link { flex: 1; padding: 14px 12px; font-family: var(--fp-serif); font-size: 24px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: normal; }
.fp-header.is-mobile .fp-nav__link::after { display: none; }
.fp-header.is-mobile .fp-nav__item.is-current > .fp-nav__row .fp-nav__link::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-terra); margin: 0 10px 4px 0; vertical-align: middle; }
.fp-header.is-mobile .fp-nav__toggle { width: 44px; height: 44px; margin: 0 4px 0 0; background: var(--fp-sand); }
.fp-header.is-mobile .fp-nav__toggle .fp-icon { width: 18px; height: 18px; }
.fp-header.is-mobile .fp-nav__item.is-open > .fp-nav__row { background: var(--fp-sand); }
.fp-header.is-mobile .fp-nav__item.is-open .fp-nav__toggle { background: var(--fp-terra); color: #fff; }
.fp-header.is-mobile .fp-nav__item.is-open .fp-nav__toggle .fp-icon { transform: rotate(180deg); }
.fp-header.is-mobile .fp-sub { position: static; min-width: 0; padding: 0; opacity: 1; visibility: visible; transform: none; display: none; }
.fp-header.is-mobile .fp-nav__item.is-open > .fp-sub { display: block; }
.fp-header.is-mobile .fp-sub__list { background: none; box-shadow: none; border: 0; padding: 4px 0 10px 22px; }
.fp-header.is-mobile .fp-sub__link { font-size: 17px; padding: 10px 12px; }
.fp-header.is-mobile .fp-nav__foot { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 22px; border-top: 1px solid var(--fp-line); background: var(--fp-sand); }
html.fp-menu-open, html.fp-menu-open body { overflow: hidden; }

@media (max-width: 480px) {
	.fp-header__inner { padding-block: 12px; gap: 12px; }
	.fp-header.is-mobile .fp-brand__name { font-size: 22px; }
	.fp-header.is-mobile .fp-brand__sub { font-size: 13px; }
	.fp-burger__label { display: none; }
	.fp-burger { width: 46px; padding: 0; justify-content: center; }
}

/* Sociale iconen */
.fp-socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.fp-socials a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid currentColor; color: inherit; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.fp-socials .fp-icon { width: 18px; height: 18px; }
.fp-socials--nav { color: var(--fp-dark); justify-content: center; }
.fp-socials--nav a:hover { background: var(--fp-dark); color: #fff; border-color: var(--fp-dark); }

/* =========================================================================
   Footer
   ========================================================================= */

.fp-footer { background: var(--fp-dark); color: #D9CEC2; font-family: var(--fp-sans); font-weight: 300; }
.fp-footer a { color: inherit; }
.fp-footer__main {
	max-width: calc(var(--fp-max) + 2 * var(--fp-gutter)); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--fp-gutter) clamp(40px, 6vw, 64px); box-sizing: border-box;
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: end;
}
.fp-footer__name { display: inline-block; font-family: var(--fp-serif); font-size: clamp(40px, 6vw, 68px); font-weight: 500; line-height: 1; color: var(--fp-cream); text-decoration: none; letter-spacing: -.005em; }
.fp-footer__name:hover { color: var(--fp-gold); }
.fp-footer__title { font-family: var(--fp-serif); font-style: italic; font-size: clamp(18px, 2vw, 22px); color: #D9CEC2; margin: 10px 0 26px; max-width: 46ch; }
.fp-socials--footer { color: var(--fp-cream); }
.fp-socials--footer a { border-color: rgba(247, 242, 235, .35); }
.fp-socials--footer a:hover { background: var(--fp-gold); border-color: var(--fp-gold); color: var(--fp-dark); }
.fp-footer__contact { font-style: normal; display: grid; gap: 14px; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid rgba(247, 242, 235, .14); font-size: 16px; line-height: 1.6; }
.fp-footer__contact p { display: flex; gap: 12px; margin: 0; }
.fp-footer__contact .fp-icon { color: var(--fp-gold); margin-top: 3px; }
.fp-footer__contact a { text-decoration: none; }
.fp-footer__contact a:hover { color: var(--fp-gold); }
.fp-footer__bar {
	max-width: calc(var(--fp-max) + 2 * var(--fp-gutter)); margin: 0 auto; padding: 22px var(--fp-gutter) calc(22px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
	border-top: 1px solid rgba(247, 242, 235, .14); font-size: 13px; color: #A89C92;
}
.fp-footer__copy { margin: 0; }
.fp-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.fp-footer__legal a { text-decoration: none; }
.fp-footer__legal a:hover { color: var(--fp-cream); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
	.fp-footer__main { grid-template-columns: 1fr; align-items: start; }
	.fp-footer__contact { border-left: 0; padding-left: 0; border-top: 1px solid rgba(247, 242, 235, .14); padding-top: 26px; }
	.fp-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Lees verder-blok
   ========================================================================= */

.fp-readmore { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; background: var(--fp-white); padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--fp-line); font-family: var(--fp-sans); }
.fp-readmore--links { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.fp-readmore--rechts { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.fp-readmore--rechts .fp-readmore__media { order: 2; }
.fp-readmore--boven, .fp-readmore--zonder { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .fp-readmore--links, .fp-readmore--rechts { grid-template-columns: minmax(0, 1fr); } .fp-readmore--rechts .fp-readmore__media { order: 0; } }
.fp-readmore__media { margin: 0; }
.fp-readmore__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.fp-readmore--boven .fp-readmore__media img { aspect-ratio: 16 / 7; }
.fp-readmore__title { font-family: var(--fp-serif); font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.15; color: var(--fp-dark); margin: 0 0 12px; text-wrap: balance; }
.fp-readmore__more { overflow: hidden; transition: height .45s var(--fp-ease); }
.fp-readmore__inner { padding-top: 1em; }
.fp-readmore__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 18px; border: 1px solid var(--fp-dark); background: none; color: var(--fp-dark); font-family: var(--fp-sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.fp-readmore__btn .fp-icon { width: 16px; height: 16px; transition: transform .3s; }
.fp-readmore__btn:hover { background: var(--fp-dark); color: #fff; }
.fp-readmore.is-open .fp-readmore__btn .fp-icon { transform: rotate(180deg); }

/* =========================================================================
   Kleine verbeteringen voor Elementor-pagina's op tablet en gsm
   ========================================================================= */

@media (max-width: 1024px) {
	.elementor .e-con > .e-con-inner { max-width: 100%; }
}
@media (max-width: 767px) {
	.elementor-widget-image img { max-width: 100%; }
	.elementor-widget-button .elementor-button { max-width: 100%; white-space: normal; text-align: center; }
	.elementor-widget-heading .elementor-heading-title { overflow-wrap: break-word; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-header *, .fp-card *, .fp-stage *, .fp-readmore *, .fp-event { transition: none !important; }
}
