/*
Theme Name: Uncode Child – Tel-it
Description: Child theme voor Uncode (Tel-it ICT & Telecom)
Author: XL Creations
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* =========================================================
   Tel-it – aanvullingen op Uncode
   Kleuren, lettertypen, knoppen, header en footer staan in
   Uncode → Theme Options. Hier alleen wat Uncode niet kan.
   Merkkleuren: navy #081f38 · blauw #47a9df · groen #80b827
                lichtblauw #ecf5fa · tekst #576170
   ========================================================= */

/* 1. Poppins (lokaal, alleen latin) ----------------------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format("woff2"); }

/* 2. Typografie ------------------------------------------- */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
.uncode_text_column,
.uncode_text_column p,
.uncode_text_column li { line-height: 1.9; }

/* Verticaal ritme binnen kolommen, zoals voorheen (Uncode: 36px) */
body .single-internal-gutter .uncont > *:not(.uncode-owl-nav-wrap):not(:first-child) { margin-top: 26px !important; }
body .single-internal-gutter .uncont > .uncode-single-media + .uncode_text_column:not(:first-child) { margin-top: 10px !important; }
body .uncont > :not(.btn-inline) + .btn-inline { margin-top: 26px !important; }
body .single-internal-gutter .uncont > .empty-space + *:not(:first-child),
body .single-internal-gutter .uncont > * + .empty-space:not(:first-child) { margin-top: 0 !important; }

/* Links in lopende tekst: zwart, vet, onderstreept */
.style-light .uncode_text_column a:not(.btn):not(.tl-footer-btn) {
	color: #000;
	font-weight: 600;
	text-decoration: underline;
}

/* Bovenkopjes boven een titel */
.titel_blauw,
.titel_groen {
	margin-bottom: 2px !important;
	font-size: 18px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #47a9df !important;
}
.titel_groen { color: #80b827 !important; }
:is(.titel_blauw, .titel_groen) + :is(h1, h2, h3, h4) { margin-top: 0 !important; }

.pagina_intro { font-size: 24px; line-height: 1.4; color: #081f38; }
h2.klein { font-size: 25px; }
.grotetekst { color: #000; font-size: 17px; font-weight: 600; }
.dienst_link { font-weight: 700; color: #000; text-decoration: underline; }
.tl-usp p { color: #081f38; }
.tl-usp img { display: block; margin: 0 0 10px; }


/* Landingspagina's (berichten): koppen + inhoudsopgave */
.landingspage h2 { font-size: 30px; }
.landingspage_tekst h2,
.landingspage_tekst h3 { margin-top: 20px; }

/* Tabellen in tekst (openingstijden, reviews): zonder lijnen */
.uncode_text_column table,
.uncode_text_column td,
.uncode_text_column th { border: 0; padding: 0; background: none; vertical-align: top; }
.uncode_text_column td img { margin: 0; }

/* 3. Header -------------------------------------------------- */
@media (min-width: 960px) {
	/* Menu gecentreerd en items dichter op elkaar, zoals voorheen */
	.menu-horizontal .navbar-main > .menu-primary-inner { display: flex; justify-content: center; }
	.menu-horizontal .menu-primary-inner > li > a { padding-left: 8px; padding-right: 8px; }

	/* CTA-knoppen rechts, gestapeld en tegen de rand "geplakt" */
	.navbar-cta .menu-cta-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 9px -36px 0 0; }
	.navbar-cta .menu-cta-inner > li { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
	.navbar-cta .menu-cta-inner > li > a { padding: 0 !important; height: auto !important; }
	.navbar-cta .menu-btn-cell > div span { font-weight: 600; }
	.navbar-cta .menu-btn-cell > div {
		display: flex; align-items: center; gap: 10px;
		padding: 7px 25px 7px 30px !important;
		border: 0 !important;
		border-radius: 50px 0 0 50px !important;
		box-shadow: none !important;
		font-size: 14px; font-weight: 600 !important; line-height: 22px;
	}
	/* hover: subtiel oplichten (zonder breedteverandering, anders schuift het menu mee) */
	.navbar-cta .menu-cta-inner > li > a:hover .menu-btn-cell > div:not(.btn-color-telgrad) { filter: brightness(1.1); }
}
.tl-menu-cta::before {
	content: ""; flex: 0 0 18px; width: 18px; height: 18px;
	background: no-repeat center / contain;
}
.tl-menu-cta--tel::before { background-image: url(../../uploads/2026/09/telefoon-1.svg); }
.tl-menu-cta--hulp::before { background-image: url(../../uploads/2026/03/hulp_op_afstand-1.svg); }

/* 4. Afbeeldingen ------------------------------------------ */
/* Tekstballon-masker (headerfoto's) */
.tl-mask-bubble img {
	-webkit-mask: url(../../uploads/2024/02/image_mask.svg) center / contain no-repeat;
	mask: url(../../uploads/2024/02/image_mask.svg) center / contain no-repeat;
}
.tl-img-spaced { margin: 40px 0; }
/* Afbeeldingen met vaste verhouding blijven bijgesneden, ook na Uncode's srcset-wissel */
.uncode-single-media-wrapper:has(.dummy) img { height: 100% !important; object-fit: cover; }

/* CTA-banner: alleen linkerhoeken rond (mobiel: boven) */
.tl-cta-img img { border-radius: 20px 0 0 20px; }
@media (max-width: 959px) { .tl-cta-img img { border-radius: 20px 20px 0 0; } }
.tl-cta { box-shadow: 0 1px 0 rgba(219, 235, 246, .5), 0 2px 7px rgba(219, 235, 246, .6), 0 12px 22px rgba(219, 235, 246, .7); border-radius: 20px; }

/* Decoratieve bollen + raster rond foto's */
.tl-deco-blauw .t-entry-visual,
.tl-deco-groen .t-entry-visual { position: relative; overflow: visible; }
.tl-deco-blauw .uncode-single-media-wrapper,
.tl-deco-groen .uncode-single-media-wrapper { position: relative; z-index: 2; }
.tl-deco-blauw .t-entry-visual::before,
.tl-deco-blauw .t-entry-visual::after,
.tl-deco-groen .t-entry-visual::before,
.tl-deco-groen .t-entry-visual::after {
	content: "";
	position: absolute;
	background: no-repeat center / contain;
	pointer-events: none;
}
.tl-deco-blauw .t-entry-visual::before,
.tl-deco-groen .t-entry-visual::before { width: 318px; height: 318px; bottom: 50px; z-index: 0; }
.tl-deco-blauw .t-entry-visual::after,
.tl-deco-groen .t-entry-visual::after { width: 152px; height: 152px; bottom: -30px; z-index: 3; }
.tl-deco-blauw .t-entry-visual::before { left: -140px; background-image: url(../../uploads/2026/01/bol_blauw.svg); }
.tl-deco-blauw .t-entry-visual::after { left: 65px; background-image: url(../../uploads/2026/01/grid_blauw.svg); }
.tl-deco-groen .t-entry-visual::before { right: -140px; background-image: url(../../uploads/2026/01/bol_groen.svg); }
.tl-deco-groen .t-entry-visual::after { right: 65px; background-image: url(../../uploads/2026/01/grid_groen.svg); }
@media (max-width: 959px) {
	.tl-deco-blauw .t-entry-visual::before,
	.tl-deco-groen .t-entry-visual::before { width: 200px; height: 200px; }
	.tl-deco-blauw .t-entry-visual::before { left: -60px; }
	.tl-deco-groen .t-entry-visual::before { right: -60px; }
}

.profiel_shadow { width: 78px !important; filter: drop-shadow(0 4px 20px rgba(82, 168, 225, .25)); }
.partner_logo { border: 20px solid #fff !important; background: #fff; border-radius: 10px; }
img.review_sterren { width: 90px !important; height: 15px !important; }
img.profielfoto { width: 45px !important; height: 45px !important; }

/* 5. Kolommen / kaarten ------------------------------------- */
/* Lichtblauwe schaduw i.p.v. Uncode's grijze bij kaarten */
.uncell.unshadow-sm,
.tl-posts .tmb-shadowed-sm > .t-inside {
	box-shadow: 0 1px 0 rgba(219, 235, 246, .5), 0 2px 7px rgba(219, 235, 246, .6), 0 12px 22px rgba(219, 235, 246, .7) !important;
}
.tl-zoom { transition: transform .2s; }
.tl-zoom:hover { transform: scale(1.1); }
.tl-row-round > .row-container,
.tl-row-round .row-background,
.tl-row-round .background-wrapper { border-radius: 20px; overflow: hidden; }
@media (max-width: 959px) { .tl-hide-bg-mobile .row-background { display: none; } }

/* 6. Afbeelding met hotspots (home "Wij zijn alles-in-1") --- */
.tl-hotspots { position: relative; }
.tl-hotspots__img { display: block; width: 100%; height: auto; }
.tl-hotspot { position: absolute; z-index: 1; transform: translate(-50%, -50%); }
.tl-hotspot.is-open { z-index: 5; }
.tl-hotspot__btn {
	position: relative;
	width: 30px; height: 30px;
	padding: 0; border: 0; border-radius: 50%;
	background: #081f38;
	box-shadow: 0 0 0 6px rgba(8, 31, 56, .15);
	cursor: pointer;
	transition: transform .2s;
}
.tl-hotspot__btn::before,
.tl-hotspot__btn::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 12px; height: 2px; margin: -1px 0 0 -6px;
	background: #fff; transition: transform .2s;
}
.tl-hotspot__btn::after { transform: rotate(90deg); }
.tl-hotspot.is-open .tl-hotspot__btn { transform: rotate(45deg); }
.tl-hotspot__tip {
	position: absolute; bottom: calc(100% + 14px); left: 50%;
	width: 260px; padding: 20px 22px;
	background: #fff; color: #081f38; border-radius: 10px;
	box-shadow: 0 12px 30px rgba(8, 31, 56, .18);
	font-size: 15px; line-height: 1.6;
	opacity: 0; visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.tl-hotspot.is-open .tl-hotspot__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tl-hotspot--left .tl-hotspot__tip { left: -10px; transform: translate(0, 6px); }
.tl-hotspot--left.is-open .tl-hotspot__tip { transform: none; }
.tl-hotspot--right .tl-hotspot__tip { left: auto; right: -10px; transform: translate(0, 6px); }
.tl-hotspot--right.is-open .tl-hotspot__tip { transform: none; }
.tl-hotspot__tip p { margin: 0 0 8px; line-height: 1.6; }
.tl-hotspot__tip h4 { margin: 0 0 6px; font-size: 17px; }
.tl-hotspot__tip hr { margin: 10px 0; border-color: #ecf5fa; }
@media (max-width: 569px) { .tl-hotspot__btn { width: 22px; height: 22px; } .tl-hotspot__tip { width: 210px; } }

/* 7. Formulieren (Gravity Forms) ----------------------------- */
.gform_wrapper.gform-theme {
	--gf-form-gap-y: 12px;
	--gf-form-gap-x: 12px;
	--gf-color-primary: #47a9df;
	--gf-color-primary-rgb: 71, 169, 223;
	--gf-ctrl-border-color: #dde4ea;
	--gf-radius: 5px;
	--gf-ctrl-label-color-primary: #081f38;
}
.gfield_required_text { display: none; }
.gform_wrapper .gfield input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	margin: 0;
	padding: 0 16px;
	height: 45px;
	border: 1px solid #dde4ea;
	border-radius: 5px;
	background: #fff;
	box-shadow: none;
	font-size: 15px;
	color: #081f38;
	transition: border-color .2s, box-shadow .2s;
}
.gform_wrapper .gfield textarea { height: 110px !important; min-height: 0; padding: 14px 16px; }
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
	border-color: #47a9df;
	box-shadow: 0 0 0 3px rgba(71, 169, 223, .15);
	outline: 0;
}
.gform_wrapper .gfield ::placeholder { color: #8a96a3; opacity: 1; }
.gform_wrapper .gfield .gfield-choice-input { border-color: #d9e6ee !important; box-shadow: none !important; }
.gform_wrapper .gfield .gchoice label { font-size: 14px; }
.gform_wrapper .gfield_label { font-size: 15px; font-weight: 600; color: #081f38; }
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer { margin-top: 18px !important; padding: 0 !important; }
.gform_wrapper .gform_footer .gform_button { flex: 1 1 100%; width: 100% !important; }
/* Knoppen zijn Uncode-knoppen: klassen + GF-uitzondering (gform-theme__disable) via functions.php.
   Uncode haalt achtergrondafbeeldingen weg van button[type=submit]; het verloop uit het palet terugzetten. */
.gform_wrapper button[type="submit"].btn-color-telgrad { background-image: linear-gradient(125deg, #47a9df 0%, #3673af 100%); }
.gform_wrapper .gform_page_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_next_button,
.gform_wrapper .gform_page_footer .gform_previous_button { width: auto; }
.gform_wrapper .gf_progressbar .percentbar_blue { background-color: #80b827; }

/* 8. Over ons: tags, quote, kleine knop ---------------------- */
.telit-pills_2026 { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.telit-pills_2026 > a,
.style-light .uncode_text_column .telit-pills_2026 > a {
	display: inline-flex; align-items: center;
	padding: 7px 16px;
	background: #ecf5fa; border: 1px solid #c5dbe8; border-radius: 999px;
	font-size: 14px; line-height: 1.2; font-weight: 500;
	color: #1d2937; text-decoration: none; white-space: nowrap;
	transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.telit-pills_2026 > a:hover,
.style-light .uncode_text_column .telit-pills_2026 > a:hover { background: #fff; border-color: #47a9df; color: #47a9df; transform: translateY(-2px); }

blockquote.telit-quote_2026 {
	position: relative;
	max-width: 640px; margin: 0 auto 20px; padding: 54px 20px 0;
	border: 0; background: none;
	font-size: 19px; font-style: italic; line-height: 1.6; text-align: center; color: #576170;
}
blockquote.telit-quote_2026::before {
	content: "\201C"; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	font: normal 56px/1 Georgia, "Times New Roman", serif; color: #47a9df;
}
blockquote.telit-quote_2026 p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* 9. Footer ------------------------------------------------- */
.tl-footer,
.tl-footer p { color: #abb3bc; }
.tl-footer .uncode_text_column a { color: #abb3bc; text-decoration: underline; }
.tl-footer .uncode_text_column a:hover { color: #fff; }
.tl-footer h4 { margin: 30px 0 15px; font-size: 17px; color: #fff; }
.tl-footer h4:first-child { margin-top: 0; }
.tl-footer-logo { display: block; margin-bottom: 20px; }
.tl-footer .uncode_text_column a.tl-footer-btn {
	display: flex; align-items: center; gap: 10px;
	width: fit-content; margin-top: 10px; padding: 10px 24px 10px 20px;
	border: 1px solid #334356; border-radius: 50px;
	color: #fff; text-decoration: none;
}
.tl-footer-btn img { width: 20px; margin: 0; }

/* 10. Knoppen met verloop: Uncode tekent de rand met border-image,
       wat niet samengaat met ronde hoeken (puntjes in de hoeken). */
.btn-color-telgrad { border-color: transparent !important; border-image: none !important; }

/* Knoppen met verloop (ook formulierknoppen en de CTA in het menu) hebben in Uncode geen hover:
   bij hover wordt de knop iets lichter en schuift er één keer een lichtstreep overheen. */
.btn-color-telgrad { position: relative; overflow: hidden; box-shadow: none !important; transition: filter .3s ease; }
.btn-color-telgrad:hover,
.navbar-cta a:hover .btn-color-telgrad { filter: brightness(1.12); }
.btn-color-telgrad::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg); pointer-events: none;
}
.btn-color-telgrad:hover::after,
.navbar-cta a:hover .btn-color-telgrad::after { animation: tl-shine .45s ease-out; }
@keyframes tl-shine { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn-color-telgrad { transition: none; } .btn-color-telgrad:hover::after, .navbar-cta a:hover .btn-color-telgrad::after { animation: none; } }

/* 11. Nieuws/referenties-overzicht: datum in accentkleur boven de titel */
.tl-posts .tmb .t-entry p.t-entry-meta .t-entry-date { color: #47a9df !important; font-size: 15px; font-weight: 400; }
.tl-posts .tmb .t-entry .t-entry-title { font-size: 25px; }
.tl-posts .cssgrid-container { row-gap: 72px; }

/* 12. Vetgedrukt in lopende tekst houdt de tekstkleur (Salient-gedrag) */
.style-light .uncode_text_column p strong { color: inherit; }

/* 13. Lijstoverzichten (informatie-onderwerpen, vacatures): titels met lijnen ertussen;
       vacatures in het groen met groene hover */
.tl-list-index .tmb .t-inside { border-bottom: 1px solid #e6eaee; transition: background-color .2s; }
.tl-list-index .tmb .t-entry .t-entry-title { margin: 0; padding: 15px 12px; transition: transform .2s; }
.tl-list-index .tmb .t-entry .t-entry-title a { color: #000; transition: color .2s; }
.tl-list-index .tmb:hover .t-entry .t-entry-title { transform: translateX(6px); }
.tl-list-index--accent .tmb .t-entry .t-entry-title a { color: #81d742; }
.tl-list-index--accent .tmb:hover .t-inside { background: #81d742; }
.tl-list-index--accent .tmb:hover .t-entry .t-entry-title { transform: none; }
.tl-list-index--accent .tmb:hover .t-entry .t-entry-title a { color: #fff; }

/* 14. Reviews (Uncode content slider) */
.tl-reviews .owl-stage-outer { padding: 10px 0 30px; }

/* 15. Popup Maker: inhoud als witte, afgeronde kaart */
.popup_scherm .uncell { padding: 35px !important; background: #fff; border-radius: 30px; }

/* 16. Mobiel: zijmarge 6% (zoals voorheen) i.p.v. Uncode's vaste 36px; kopgroottes */
@media (max-width: 569px) {
	.main-container .row-container .single-h-padding,
	.menu-container .row-menu-inner { padding-left: 6vw; padding-right: 6vw; }
	/* Kopgroottes op mobiel zoals voorheen */
	body h2:not([class*="fontsize-"]), body .h2:not([class*="fontsize-"]) { font-size: 30px; }
	body h3:not([class*="fontsize-"]), body .h3:not([class*="fontsize-"]) { font-size: 23px; }
	body h4:not([class*="fontsize-"]), body .h4:not([class*="fontsize-"]) { font-size: 18px; }
}

/* 17. Landingspagina-headers (Figma) ------------------------- */
.tl-lp-header h1 { line-height: 1.1; }
.tl-lp-crumb + h1 { margin-top: 4px !important; } /* titel dicht onder de kruimels */
.tl-lp-intro p { opacity: .8; }
.tl-lp-rating { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tl-lp-rating img { margin: 0; }
.style-dark .tl-lp-rating a { color: #fff; text-decoration: underline; }

/* Kaart met formulier/foto */
/* Uncode zet de header (Page options → First row) in een wrapper met overflow: hidden;
   de kaart/foto moet eronder uit kunnen steken (Off-grid shift) en boven de inhoud liggen */
.header-wrapper:has(.tl-lp-header) { overflow: visible; z-index: 2; }
.tl-lp-card > .uncol > .uncoltable > .uncell { box-shadow: 0 4px 20px rgba(35, 82, 138, .2); }
.tl-lp-card { position: relative; z-index: 2; }
.tl-card-head { display: flex; align-items: center; gap: 20px; }
.tl-card-head .tl-card-avatar { width: 61px; height: 61px; margin: 0; border-radius: 50%; box-shadow: 0 4px 4px rgba(35, 82, 138, .2); }
.tl-card-head h3 { margin: 0; font-size: 25px; }
.tl-card-head p { margin: 0; opacity: .8; }
.tl-lp-card--photo > .uncol > .uncoltable > .uncell { overflow: hidden; }
.tl-card-photo { position: relative; }
.tl-card-photo::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
	background: linear-gradient(to top, #fff 25%, rgba(255, 255, 255, 0));
	z-index: 2; /* boven Uncode's afbeelding (z-index 1) */
}
body .single-internal-gutter .uncont > .tl-card-photo + .tl-card-body:not(:first-child) { margin-top: -70px !important; position: relative; z-index: 3; padding: 0 33px 33px; }
.tl-card-body h3 { font-size: 25px; }

/* Vinkjes-lijst (blauw) */
.tl-checks { list-style: none; margin: 0; padding: 0; }
h1 + .tl-checks { margin-top: 18px; } /* zelfde afstand als een introtekst onder de titel */
.tl-checks li { position: relative; padding-left: 26px; }
.tl-checks li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 15px; height: 12px;
	background: url(../../uploads/2026/10/check-kaart.svg) no-repeat center / contain;
}
.tl-checks--inline { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; color: #000; }
.tl-checks--inline li { padding-left: 22px; }

.tl-lp-content .toc-widget .toc-heading { font-size: 30px; color: #0f2030; }
.tl-lp-content h2 { font-size: 30px; }
.tl-lp-card--photo .tl-card-photo,
.tl-lp-card--photo .tl-card-photo img { border-radius: 27px 27px 0 0; }