/*
 * Connect IT — basis-typografie en gedeelde component-helpers.
 * Deze helpers (.cit-btn / .cit-txt roll-animatie, roterende pijl) worden door
 * zowel het thema als de Connect IT-widgets hergebruikt, exact zoals in het ontwerp.
 */

body {
	font-family: var(--cit-font-sans);
	color: var(--cit-text);
	background: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cit-font-head);
	color: var(--cit-ink);
	letter-spacing: -0.02em;
}

a {
	color: var(--cit-teal);
}
/* ==================================================================
 * Neutraliseer opinie-rijke kleuren uit Hello Elementor's reset.css:
 *   a { color:#c36 }  |  a:hover,a:active { color:#336 }
 * Die #336 (specificiteit 0,1,1) lekte in álle <a>-knoppen bij hover
 * en won van de knop-klassekleur (0,1,0). Hier centraal opgelost, zodat
 * knoppen hun eigen kleur in élke state houden. Structuur-resets uit
 * reset.css (box-sizing e.d.) blijven intact.
 * ================================================================== */

/* Gewone links: thema-hover. Knoppen (.cit-btn) uitgezonderd. */
a:not(.cit-btn):hover,
a:not(.cit-btn):active {
	color: var(--cit-teal-dark);
}

/* Gevulde/ghost knoppen met witte tekst: wit in élke state
   (hover/active/focus), zodat reset.css a:hover{#336} niet meer lekt.
   Kaarten en mega-links kleuren hun eigen tekst al via een selector met
   hogere specificiteit, dus die hebben dit niet nodig. */
a.cit-btn-primary, a.cit-btn-primary:hover, a.cit-btn-primary:active, a.cit-btn-primary:focus-visible,
a.cit-header__cta,  a.cit-header__cta:hover,  a.cit-header__cta:active,  a.cit-header__cta:focus-visible,
a.cit-link-ghost,   a.cit-link-ghost:hover,   a.cit-link-ghost:active,   a.cit-link-ghost:focus-visible {
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--cit-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Mono-label ("EYEBROW"): kleine hoofdletters boven koppen. */
.cit-eyebrow {
	font-family: var(--cit-font-mono);
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cit-teal);
	margin: 0 0 14px;
}

/* Container met de vaste maximumbreedte uit het ontwerp. */
.cit-container {
	max-width: var(--cit-maxw);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ---- Knop met roterende pijl + tekst-"roll" (signatuur-interactie) ---- */
/* Site-breed: knoplabels zijn niet dikgedrukt (font-weight 400), zoals het ontwerp. */
.cit-btn {
	cursor: pointer;
	font-weight: 400 !important;
}
.cit-btn:hover .cit-arr,
.cit-btn:focus-visible .cit-arr {
	transform: rotate(45deg);
}
.cit-arr {
	display: inline-flex;
	transition: transform .25s ease;
}

.cit-txt {
	display: inline-grid;
	overflow: hidden;
	/* Iets meer verticale ruimte (met compenserende negatieve marge, dus geen
	   layout-verschuiving) zodat het fade-masker rustig kan uitvloeien. */
	padding: 5px 0;
	margin: -5px 0;
	/* Zachte fade aan boven-/onderrand: de tekst vervaagt soepel terwijl hij
	   in/uit rolt i.p.v. hard af te kappen tegen de overflow-rand. De opake
	   band (22–78%) is ruim genoeg zodat de tekst in ruststand crisp blijft. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.cit-txt .cit-t {
	grid-area: 1 / 1;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.cit-txt .cit-t2 {
	transform: translateY(130%);
}
.cit-btn:hover .cit-t,
.cit-btn:focus-visible .cit-t {
	transform: translateY(-130%);
}
.cit-btn:hover .cit-t2,
.cit-btn:focus-visible .cit-t2 {
	transform: translateY(0);
}

/* Herbruikbare primaire pill-knop (gradient). */
.cit-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--cit-grad);
	border: none;
	border-radius: var(--cit-radius-pill);
	padding: 12px 16px 12px 28px;
	text-decoration: none;
}

/* Hello Elementor's paginatitel ("Home", "Contact", ...) verbergen —
   elke pagina heeft in dit thema een eigen ontwerp. */
.page-header,
.elementor-page .page-header {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}