/**
 * Huisstijl: Stip-t
 * ---------------------------------------------------------------------------
 * Wordt na alle basis-CSS geladen en overschrijft alleen wat per merk
 * verschilt. De rest van de vormgeving is gedeeld met de andere huisstijlen.
 * Overgenomen uit de statische Stip-t-site (HTML Stip-t).
 */

:root {
	/* Primair kleurenpalet */
	--color-primary-50:  #edf9ff;
	--color-primary-100: #d6f1ff;
	--color-primary-200: #b5e8ff;
	--color-primary-300: #83dbff;
	--color-primary-400: #48c5ff;
	--color-primary-500: #1ea5ff;
	--color-primary-600: #0686ff;
	--color-primary-700: #0072ff; /* Primary */
	--color-primary-800: #0857c5;
	--color-primary-900: #0d4c9b;
	--color-primary-950: #0e2f5d;

	--color-primary-50-rgb:  237, 249, 255;
	--color-primary-100-rgb: 214, 241, 255;
	--color-primary-200-rgb: 181, 232, 255;
	--color-primary-300-rgb: 131, 219, 255;
	--color-primary-400-rgb: 72, 197, 255;
	--color-primary-500-rgb: 30, 165, 255;
	--color-primary-600-rgb: 6, 134, 255;
	--color-primary-700-rgb: 0, 114, 255; /* Primary */
	--color-primary-800-rgb: 8, 87, 197;
	--color-primary-900-rgb: 13, 76, 155;
	--color-primary-950-rgb: 14, 47, 93;

	/* Signaalkleuren */
	--color-warning: #F99662;
	--color-warning-rgb: 249, 150, 98;
	--color-alert: #e22f4a;
	--color-alert-rgb: 241, 57, 37;
	--color-light: #edf9ff;
}

/* --- Logo in de navigatie ------------------------------------------------ */
.logo {
	width: 200px;
	background-size: auto 60px;
	background-position: 50% 70%;
	background-image: url('../../images/logo-stip-t.svg');
}
/* in de Stip-t-opmaak groeit het logo niet bij hover */
.logo:hover {
	transform: translateY(-50%) scale(1);
}

/* --- Navigatiebalk ------------------------------------------------------- */
.menu-wrapper {
	box-shadow: 0px 5px 38px rgba(var(--color-primary-950-rgb), 0.13);
	border: 0;
}

/* --- Knoppen -------------------------------------------------------------- */
.button.primary,
.button.primary:hover {
	border-color: var(--color-primary-800);
	background-image: linear-gradient(to bottom,
		rgba(var(--color-primary-700-rgb), 1) 0%,
		rgba(var(--color-primary-700-rgb), 1) 100%);
}

/* extra knopvariant die alleen in de Stip-t-opmaak voorkomt */
.button.warning,
.button.warning:hover {
	color: var(--color-white);
	border-color: var(--color-warning);
	background-image: linear-gradient(to bottom,
		rgba(var(--color-warning-rgb), 1) 0%,
		rgba(var(--color-warning-rgb), 1) 100%);
}
.button.secondary:hover {
	color: var(--color-white);
	transform: translateY(-1px);
	box-shadow:
		inset 0px 3px 0px rgba(255, 255, 255, 0.2),
		0px 3px 30px rgba(var(--color-secondary-500-rgb), 0.6);
}

/* --- Cover / hero --------------------------------------------------------- */
.circle-wrapper {
	margin-left: -630px;
}
.circle {
	border: 6px solid var(--color-warning);
}
/* Stip-t laat de cover meegroeien met de inhoud in plaats van schermhoog */
.cover-height-full .cover-slider-slide {
	height: auto !important;
	max-height: none;
}

/* --- Secties -------------------------------------------------------------- */
.pricingbox.highlight {
	border: 1px solid var(--color-primary-800);
	box-shadow: 0 10px 30px rgba(var(--color-primary-900-rgb), 0.3);
}
.section-icon-shape .icon-shape,
.icon-shape.c-primary-950 {
	fill: var(--color-primary-50);
}

/* --- Losse onderdelen ----------------------------------------------------- */
.section-divider div {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	background-color: var(--color-primary-700);
}

/* --- Homepage-achtergrond ------------------------------------------------- */
/* Stip-t gebruikt een warme tint achter de hero (in de statische site
   'bg-warning/10'), in plaats van het blauw van TimeWriter. */
:root {
	--tw-home-bg: linear-gradient(180deg,
		rgba(var(--color-warning-rgb), 0.18) 0%,
		rgba(var(--color-warning-rgb), 0.11) 26%,
		rgba(var(--color-warning-rgb), 0.05) 48%,
		#ffffff 70%);
}

/* --- Accentkleur voor de sectiemodules ------------------------------------ */
/* De modules (cover, USP, pricing, testimonials, FAQ) lezen --wb-accent uit.
   Stip-t gebruikt daarvoor oranje, zoals de badges op de live site. */
:root {
	--wb-accent: var(--color-warning);
}