/*
Theme Name: Winskoop Toere
Theme URI: https://winskooptoere.co.za/
Author: Edge Communications
Description: Winskoop Toere
Version: 1.0
Text Domain: winskoop
*/

/* =========================================
   WINSKOOP TOERE – GLOBAL STYLES
   ========================================= */

@font-face {
	font-family: "Opulent Brush";
	src: url("assets/font/OpulentBrush.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "FuturaBook";
	src: url("assets/font/FuturaPTBook.otf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/*--sand: #e5ccb3;*/
	--sand: #f5edd6;
	/*--cream: #f7f2e9;*/
	--cream: #f7f7f7;
	/*--cream: #f4ead3;*/
	--ligblou: #215d8a;
	--donkerblou: #002241;
	--text: #002241;
	--wit: #ffffff;
	--groen: #01572b;
	--donkergroen: #034d25;
	--rooi: #9d050b;
	--goud: #be9a43;
	--lig-grys: #666;
	--font-small: 20px;
	--font-body: 22px;
	--font-large: 25px;
	--font-h2: clamp(28px, 3vw, 5rem);
	--font-h1: 42px;
	--font-2em: 2em;
	--font-special: 2em;
	--font-special-4: 4em;
	--font-special-6: 6em;
}

html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: 120px;
}

.gfield_select,
.ginput_container input,
.gchoice label,
.gfield_label {
	font-size: var(--font-body) !important;
}

.ginput_container input:hover {
	cursor: pointer !important;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

body {
	font-family: "FuturaBook";
	color: var(--text);
	padding: 0;
	margin: 0;
	background-color: var(--cream);
	font-size: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "FuturaBook";
}

/* =========================================
   GLOBAL
   ========================================= */

a {
	color: var(--donkerblou);
}

a:hover {
	cursor: pointer !important;
}

button,
.button {
	background: var(--donkerblou);
}

.button-goud {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 14px 18px;

	background: linear-gradient(
		90deg,
		#b68b36 0%,
		#dfbf68 20%,
		#f5e5a5 42%,
		#e5c873 58%,
		#c69b43 82%,
		#dfbd65 100%
	);

	border: 1px solid #c29a46;
	border-radius: 3px;

	color: var(--donkerblou) !important;
	font-size: var(--font-body);
	font-weight: 500;

	text-decoration: none;
	text-transform: uppercase;

	box-shadow: 0 3px 0 #98752f;

	transition: all 0.3s ease;
	width: max-content;
}

.button-goud i {
	margin-left: 10px;
	font-size: var(--font-body);
	line-height: 1;

	transition: transform 0.3s ease;
}

/* HOVER EFFECT */
.button-goud:hover {
	background: linear-gradient(
		90deg,
		#c69c48 0%,
		#ecd58c 25%,
		#fff0b9 50%,
		#e5ca7b 75%,
		#c69c48 100%
	);

	transform: translateY(-2px);
	box-shadow: 0 5px 0 #98752f;

	color: var(--donkerblou) !important;
}

.button-goud:hover i {
	transform: translateX(4px);
}

.button-goud a {
	text-decoration: none;
}

.button-rooi,
.button-rooi a,
.portal-tour-leader-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	min-width: 385px;
	padding: 13px 28px;
	background: var(--rooi);
	border-radius: 5px;
	color: var(--wit);
	font-size: var(--font-body);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.2s ease;
}

.gform_next_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 25px !important;
	min-width: 385px;
	padding: 13px 28px !important;
	background: var(--rooi) !important;
	border-radius: 5px !important;
	color: var(--wit) !important;
	font-size: var(--font-body) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: transform 0.2s ease !important;
}

.gform_save_link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 25px !important;
	min-width: 385px;
	padding: 13px 28px !important;
	background: var(--donkerblou) !important;
	border-radius: 5px !important;
	color: var(--wit) !important;
	font-size: var(--font-body) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: transform 0.2s ease !important;
}

.page-section {
	background: var(--cream);
	padding: 25px 0;
}

.page-container {
	width: min(90%, calc(100% - 40px));
	margin-inline: auto;
}

.pill-button-groen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 30px;
	background: var(--wit);
	border-radius: 30px;
	color: var(--donkergroen);
	border: solid 1px var(--donkergroen);
	font-size: var(--font-body);
	font-weight: 500;
	text-decoration: none;
}

.pill-button-groen:hover {
	background-color: var(--rooi);
	border: solid 1px var(--rooi);
	color: var(--wit);
}

form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--rooi) !important;
	color: #ffffff;
}

/* =========================================
   404 ERROR PAGE
   ========================================= */

.error-404 {
	min-height: 55vh;
	display: flex;
	align-items: center;
	background: var(--cream);
}

.error-404-section {
	width: 100%;
	padding: 80px 20px;
}

.error-404-container {
	width: min(90%, 900px);
	margin-inline: auto;
	text-align: center;
}

/* Big 404 */

.error-404-number {
	font-family: "FuturaBook";
	font-size: clamp(100px, 18vw, 220px);
	font-weight: 700;
	line-height: 0.85;
	color: var(--goud);
	margin-bottom: 25px;
}

/* Heading */

.error-404-container h1 {
	font-size: clamp(32px, 5vw, 58px);
	line-height: 1.1;
	color: var(--donkerblou);
	margin: 0 0 25px;
}

/* Text */

.error-404-container p {
	max-width: 700px;
	margin: 0 auto 15px;
	font-size: var(--font-body);
	line-height: 1.5;
	color: var(--text);
}

/* Buttons */

.error-404-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 35px;
}

.error-404-buttons .button-goud {
	min-width: 190px;
}

/* Secondary button */

.button-404-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	padding: 14px 24px;
	background: var(--donkerblou);
	color: var(--wit);
	border-radius: 3px;
	font-size: var(--font-body);
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 3px 0 #00152a;
	transition:
		transform 0.2s ease,
		background 0.2s ease;
}

.button-404-secondary:hover {
	transform: translateY(-2px);
	background: var(--ligblou);
	color: var(--wit);
}

/* Mobile */

@media (max-width: 600px) {
	.page-id-328 .gform_next_button,
	.page-id-328 .gform_save_link {
		width: 100% !important;
	}

	.button-goud {
		width: auto;
		justify-content: space-between;
	}
	.error-404-section {
		padding: 60px 20px;
	}

	.error-404-container {
		width: 100%;
	}

	.error-404-number {
		margin-bottom: 20px;
	}

	.error-404-container p {
		font-size: 19px;
	}

	.error-404-buttons {
		flex-direction: column;
	}

	.error-404-buttons .button-goud,
	.button-404-secondary {
		width: 100%;
		max-width: 320px;
	}
}

.wc-block-components-product-details {
	display: none !important;
}

#mandjie,
#mandjie p,
#mandjie a,
#mandjie span,
#mandjie h2,
.wc-block-components-totals-coupon.wc-block-components-panel {
	font-size: 22px !important;
}

.term-57 .hero-image {
	background-image: url("https://winskoop.edgedev.co.za/wp-content/uploads/2026/11/10-1.jpg") !important;
}

.term-58 .hero-image {
	background-image: url("https://winskoop.edgedev.co.za/wp-content/uploads/2026/11/1-scaled.jpg") !important;
}

.page-id-328 .hero-image {
	background-image: url("https://winskoop.edgedev.co.za/wp-content/uploads/2026/09/Bosnie.jpg") !important;
}

.flatpickr-day:hover {
	cursor: pointer;
	outline: 0;
	background: var(--donkerblou);
	border-color: var(--donkerblou);
	color: var(--wit);
}
