/* Griff Media child theme */
:root {
	--gm-ink: #1b1b1b;
	--gm-cream: #f8f6f5;
	--gm-muted: #7a7672;
}

/* ---------- Buttons ---------- */
.gm-btn {
	display: inline-block;
	padding: 15px 34px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid #fff;
	transition: background .25s, color .25s;
}
.gm-btn--light { background: #fff; color: var(--gm-ink) !important; }
.gm-btn--light:hover { background: transparent; color: #fff !important; }
.gm-btn--outline { background: transparent; color: #fff !important; }
.gm-btn--outline:hover { background: #fff; color: var(--gm-ink) !important; }

/* ---------- Hero ---------- */
.gm-hero {
	position: relative;
	height: calc(100vh - 90px); /* refined in gm.js to end exactly at the fold */
	min-height: 420px;
	overflow: hidden;
	background: #111 center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.gm-hero__video { position: absolute; inset: 0; pointer-events: none; }
.gm-hero__video iframe,
.gm-hero__video--mp4 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;          /* 16:9 */
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
	object-fit: cover;
}
.gm-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25) 50%, rgba(0,0,0,.55)); }
.gm-hero__content { position: relative; z-index: 2; padding: 0 20px; max-width: 900px; }
.gm-hero__eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 18px; opacity: .9; }
.gm-hero__title {
	color: #fff;
	font-size: clamp(34px, 6vw, 72px);
	line-height: 1.1;
	font-weight: 400;
	margin: 0 0 36px;
	letter-spacing: .02em;
}
.gm-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gm-hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #fff !important; font-size: 30px; z-index: 2; animation: gm-bob 2.4s ease-in-out infinite; }
@keyframes gm-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (max-width: 767px) {
	.gm-hero__video { display: none; }
	.gm-hero { height: calc(100svh - 70px); }
}

/* ---------- Film tiles ---------- */
.gm-film { margin: 0 0 40px; }
.gm-film__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #111; }
.gm-film--large .gm-film__media { aspect-ratio: 2.39 / 1; }
.gm-film__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; display: block; }
.gm-film__media:hover img { transform: scale(1.04); }
.gm-film__play {
	position: absolute; top: 50%; left: 50%;
	width: 76px; height: 76px; margin: -38px 0 0 -38px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.85);
	background: rgba(0,0,0,.2);
	color: #fff; font-size: 30px; line-height: 76px; text-align: center;
	padding-left: 5px;
	transition: background .25s, transform .25s;
}
.gm-film__media:hover .gm-film__play { background: rgba(255,255,255,.2); transform: scale(1.08); }
.gm-film figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.gm-film__title { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gm-ink); }
.gm-film__caption { font-size: 13px; color: var(--gm-muted); }

/* ---------- Small helpers ---------- */
.gm-intro { max-width: 720px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.8; }
.gm-intro p { margin-bottom: 30px; }
.gm-note { text-align: center; font-size: 14px; color: var(--gm-muted); font-style: italic; margin-top: 24px; }
.gm-center { text-align: center; }
.gm-btn--dark { background: var(--gm-ink); color: #fff !important; border-color: var(--gm-ink); }
.gm-btn--dark:hover { background: transparent; color: var(--gm-ink) !important; }
.gm-cta { text-align: center; max-width: 680px; margin: 0 auto; }
.gm-cta h2 { margin-bottom: 18px; }
.gm-cta p { margin-bottom: 32px; font-size: 17px; line-height: 1.8; }
/* Row background set from page content (WPBakery only generates vc_custom CSS when saving in its editor) */
.vc_custom_gm_cream { background-color: var(--gm-cream) !important; }

/* ---------- Readability: the theme's body copy is very light ---------- */
.gm-intro p, .gm-cta p, .gm-about p, .wpb_text_column p,
.faqs-wrap .answer, .faq-item .answer, [class*="faq"] .answer,
.services-item .description, .service-item .description, [class*="service"] .description { color: #55514d !important; }
.gm-intro p { font-size: 18px; line-height: 1.8; margin-top: 24px; }

/* ---------- About ---------- */
.gm-about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.gm-about__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.gm-about__eyebrow { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gm-muted); margin-bottom: 14px; }
.gm-about h1 { margin: 0 0 28px; font-size: clamp(34px, 4vw, 52px); line-height: 1.15; }
.gm-about p { font-size: 17px; line-height: 1.85; margin-bottom: 20px; }
.gm-about blockquote { border-left: 2px solid var(--gm-ink); margin: 34px 0; padding: 4px 0 4px 24px; font-size: 22px; font-style: italic; line-height: 1.5; color: var(--gm-ink); }
@media (max-width: 991px) { .gm-about { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Contact form ---------- */
.gm-form label { display: block; width: 100%; }
.gm-form select { width: 100%; }

.gm-form input:not([type=submit]), .gm-form select, .gm-form textarea { width: 100% !important; max-width: none !important; }
.gm-form select { min-height: 40px; border: 0; border-bottom: 1px solid #d9d4cf; background: transparent; }
.gm-form .wpcf7-form-control-wrap { width: 100% !important; display: block; }

/* ---------- cal.com ---------- */
.gm-cal__embed { width: 100%; min-height: 640px; overflow: auto; margin-top: 10px; }

/* ---------- Landing pages ---------- */
.gm-lp { max-width: 760px; margin: 0 auto; }
.gm-lp h2 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 36px); line-height: 1.25; }
.gm-lp h3 { margin: 36px 0 12px; font-size: 20px; }
.gm-lp p, .gm-lp li { font-size: 17px; line-height: 1.85; color: #55514d !important; }
.gm-lp ul { margin: 0 0 24px 20px; }
.gm-lp li { margin-bottom: 8px; }
.gm-price-card { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid #e7e2dd; padding: 44px 40px; text-align: center; }
.gm-price-card__label { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gm-muted); }
.gm-price-card__price { font-size: 44px; margin: 10px 0 24px; color: var(--gm-ink); }
.gm-price-card ul { list-style: none; margin: 0 0 28px; padding: 0; }
.gm-price-card li { padding: 10px 0; border-bottom: 1px solid #efebe7; color: #55514d; }
.gm-price-card small { display: block; margin-top: 18px; color: var(--gm-muted); font-style: italic; }

/* ---------- Page headers (Tarieven, Contact, landing pages): max 50vh ---------- */
.top-banner.classic { height: 50vh !important; min-height: 320px !important; max-height: 50vh !important; }
.top-banner.classic .content-wrap { height: 100% !important; min-height: 0 !important; display: flex; align-items: center; justify-content: center; }
.top-banner.classic .title { font-size: clamp(34px, 5vw, 68px) !important; line-height: 1.1 !important; }
.top-banner.classic .subtitle { font-size: clamp(18px, 2vw, 26px) !important; }

.gm-price-card ul li { list-style: none !important; padding-left: 0 !important; }
.gm-price-card ul li::before { display: none !important; content: none !important; }

/* Keep the theme's fitVids from re-wrapping the header video (it overrides the cover positioning). */
.gm-hero .gm-hero__video .fluid-width-video-wrapper { position: static !important; padding: 0 !important; }
.gm-hero .gm-hero__video iframe {
	position: absolute !important;
	top: 50% !important; left: 50% !important;
	width: 100vw !important; height: 56.25vw !important;
	min-height: 100% !important; min-width: 177.78vh !important;
	transform: translate(-50%, -50%) !important;
}

/* ---------- Reviews carousel: quotes vertically centred between Vorige / Volgende ---------- */
.main-header-testimonial .swiper-wrapper { align-items: stretch !important; }
.main-header-testimonial .swiper-slide { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; }
.main-header-testimonial .swiper-slide .description p { margin-bottom: 0 !important; }
.main-header-testimonial .swiper-btn-wrap .swiper-button { top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; }

/* Self-hosted header video: simple cover fill (started from JS on tablet and up). */
.gm-hero video.gm-hero__video--mp4 { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; transform: none !important; object-fit: cover; }

/* ---------- No site search ---------- */
.search-icon-wrapper, .site-search, .open-search { display: none !important; }

/* ---------- cal.com: month overview first ---------- */
.gm-cal__months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 900px; margin: 30px auto 0; }
.gm-cal__months[hidden], .gm-cal__picker[hidden] { display: none; }
.gm-cal__month {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 22px 10px; background: #fff; border: 1px solid #e3ded9; cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}
.gm-cal__month:hover, .gm-cal__month:focus-visible { border-color: var(--gm-ink); background: var(--gm-ink); color: #fff; outline: none; }
.gm-cal__month-name { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.gm-cal__month-year { font-size: 13px; color: var(--gm-muted); }
.gm-cal__month:hover .gm-cal__month-year, .gm-cal__month:focus-visible .gm-cal__month-year { color: rgba(255,255,255,.7); }
.gm-cal__back { display: block; margin: 20px auto 10px; background: none; border: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gm-ink); cursor: pointer; }
.gm-cal__back:hover { text-decoration: underline; }
@media (max-width: 767px) { .gm-cal__months { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) and (max-width: 991px) { .gm-cal__months { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cookie banner ---------- */
.gm-consent {
	position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 9999;
	max-width: 520px; margin-left: auto;
	background: #fff; color: var(--gm-ink); padding: 22px 24px;
	box-shadow: 0 10px 40px rgba(0,0,0,.18); font-size: 14px; line-height: 1.7;
}
.gm-consent[hidden] { display: none; }
.gm-consent p { margin: 0 0 16px; color: #55514d; }
.gm-consent a { color: var(--gm-ink); text-decoration: underline; }
.gm-consent__buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.gm-consent .gm-btn { padding: 12px 22px; font-size: 11px; }
.gm-btn--outline-dark { background: transparent; color: var(--gm-ink) !important; border-color: var(--gm-ink); }
.gm-btn--outline-dark:hover { background: var(--gm-ink); color: #fff !important; }