/* Base */
:root {
	--zh-bg: #f2f4f8;
	--zh-nav-bg: transparent;
	--zh-primary: #182a61;
	--zh-primary-strong: #12204a;
	--zh-primary-muted: #182a61d7;
	--zh-secondary: #1f6b42;
	--zh-secondary-strong: #185236;
	--zh-secondary-soft: rgba(31, 107, 66, 0.14);
	--zh-white: #ffffff;
	--zh-white-70: rgba(255, 255, 255, 0.7);

	--zh-color-text-base: #12203f;
	--zh-color-menta: #f8fff9;
	--zh-color-menta-darker: #e8f9ea;
	--zh-color-menta-hover: #eef9f1;
	--zh-color-menta-border: rgba(76, 145, 125, 0.15);
	--zh-color-card-bg: #ffffff;
	--zh-color-main-hero-content-bg: #4c917d;
	--zh-color-audience-organizations-accent: #26788e;
	--zh-color-audience-organizations-accent-strong: #1f6173;
	--zh-color-audience-schools-accent: #e3480d;
	--zh-color-audience-schools-accent-strong: #be3c0d;
	--zh-color-green: #4c917d;
	--zh-color-orange: #d1890b;
	--zh-color-orange-strong: #b67909;
	--zh-color-hashtag-english: var(--zh-color-green);
	--zh-color-hashtag-hungarian: var(--zh-color-orange);
	--zh-color-ugyfelszolgalat-bg: rgba(111, 111, 111, 0.06);
	--zh-color-card-title: #1f6b42;
	--zh-color-card-text: #4c6555;
	--zh-color-aid-menu-bg: #ffffff;
	--zh-color-aid-menu-text: #1f2d23;
	--zh-color-aid-menu-hover-bg: #f3f6f4;
	--zh-color-aid-main-border: rgba(255, 255, 255, 0.3);
	--zh-color-separator-light: rgba(24, 42, 97, 0.12);

	--zh-color-footer-bg: #182a61;
	--zh-color-footer-text: #ffffff;
	--zh-color-footer-muted: rgba(255, 255, 255, 0.9);
	--zh-color-footer-divider: rgba(255, 255, 255, 0.07);
	--zh-color-footer-cta-bg: #ffffff;
	--zh-color-footer-cta-text: #182a61;

	--zh-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.08);
	--zh-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.2);

	--zh-sidebar-width: min(var(--dist_13), 88vw);
	--zh-nav-overlay-color: rgba(7, 16, 42, 0.52);
	--zh-topbar-bg: rgba(255, 255, 255, 0.9);
	--zh-topbar-text: var(--zh-primary);
	--zh-content-border: rgba(24, 42, 97, 0.18);
	--zh-topbar-border: var(--zh-content-border);
	--zh-nav-panel-bg: var(--zh-secondary-strong);
	--zh-nav-panel-bg-accent: var(--zh-secondary);
	--zh-nav-panel-border: var(--zh-content-border);
	--zh-nav-drawer-border: rgba(255, 255, 255, 0.18);
	--zh-nav-item-hover-bg: rgba(255, 255, 255, 0.1);
	--zh-nav-item-active-bg: rgba(255, 255, 255, 0.16);
	--zh-nav-icon-bg: rgba(255, 255, 255, 0.12);
	--zh-topbar-height: calc(var(--dist_2) + var(--dist_1) + var(--dist_3));
	--zh-text-underline-offset: 0.15em;
	--zh-site-min-width: 320px;

	--zh-font-family: "Instrument Sans", "Open Sans", Arial, sans-serif;

	/* Responsive font sizes */
	--zh-font-size-xxs: clamp(0.8125rem, 0.78rem + 0.14vw, 0.9375rem);
	--zh-font-size-xs: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
	--zh-font-size-text: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
	--zh-font-size-sm: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--zh-font-size-normal: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--zh-font-size-normal-plus: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--zh-font-size-md: clamp(1.125rem, 1.03rem + 0.45vw, 1.5rem);
	--zh-font-size-md-plus: clamp(1.25rem, 1.12rem + 0.7vw, 1.75rem);
	--zh-font-size-lg-minus: clamp(1.5rem, 1.24rem + 1.3vw, 2.25rem);
	--zh-font-size-lg: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	--zh-font-size-xxl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);

	/* Fixed (non-responsive) font sizes */
	--zh-font-size-tiny-fixed: 0.70rem;
	--zh-font-size-xxs-fixed: 0.8125rem;
	--zh-font-size-xs-fixed: 0.875rem;
	--zh-font-size-text-fixed: 0.9375rem;
	--zh-font-size-sm-fixed: 1rem;
	--zh-font-size-normal-fixed: 1rem;
	--zh-font-size-normal-plus-fixed: 1.0625rem;
	--zh-font-size-md-fixed: 1.125rem;
	--zh-font-size-md-plus-fixed: 1.25rem;
	--zh-font-size-lg-minus-fixed: 1.5rem;
	--zh-font-size-lg-fixed: 3rem;

	--zh-line-height-tighter: 1.05;
	--zh-line-height-tight: var(--zh-line-height-base);
	--zh-line-height-base: 1.44;
	--zh-line-height-relaxed: 1.5;
	--zh-container-max-width: 1400px;
	--zh-container-gutter: clamp(var(--dist_0), 4vw, var(--dist_2));
	--zh-footer-container-max-width: calc(var(--zh-container-max-width) - var(--zh-container-gutter) * 2);
	--zh-footer-margin-bottom-mobile: var(--dist_4);
	--zh-footer-margin-bottom-lg: var(--dist_8);
	--zh-footer-decoration-width: min(80vw, 72rem);
	--zh-radius-lg: var(--dist_2);
	--zh-radius-md: var(--dist_1);
	--zh-faq-indicator-heading-gap: var(--dist_0);
	--zh-faq-heading-content-gap: var(--dist_1);
	--zh-main-block-separator: clamp(
		var(--distance-responsive-big-sm),
		calc(
			var(--distance-responsive-big-sm) +
				((100vw - 600px) / 900px) * var(--distance-responsive-big-sm) * 0.5
		),
		calc(var(--distance-responsive-big-sm) * 1.5)
	);
	--distance-special-gap: clamp(
		var(--distance-responsive-small),
		calc(
			((100vw - 380px) / 1200px) * var(--distance-responsive-big-sm)
		),
		var(--distance-responsive-big-sm)
	);

	/* Buttons */
	--zh-transition-time-fast: 0.09s;
	--zh-button-font-size: var(--dist-alt_-1);
	--zh-button-font-size-lg: var(--dist-alt_1);
	--zh-button-padding-y: var(--dist_-2);
	--zh-button-padding-x: calc(var(--dist_1) + var(--dist_-3));
	--zh-button-padding-y-lg: var(--dist_-1);
	--zh-button-padding-x-lg: var(--dist_2);
	--zh-button-radius: calc(var(--dist_3) + var(--dist_-3));
	--zh-button-radius-xs: 6px;
	--zh-button-gap: var(--dist_-4);

	/* Override Temahet/Core font variables for Zold Hid */
	--font: var(--zh-font-family);
	--font-news: var(--zh-font-family);
	--font-fat: var(--zh-font-family);
	--font-ultra: var(--zh-font-family);
	--font-ultrablack: var(--zh-font-family);
	--colors-kekbolygo-blue: var(--zh-primary);
	--colors-kekbolygo-blue-text: var(--zh-primary);
}

@media (min-width: 801px) {
	:root {
		--zh-line-height-tight: 1.2;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-width: var(--zh-site-min-width);
	background: var(--zh-bg);
	color: var(--zh-color-text-base);
	font-family: var(--zh-font-family);
}

#Body {
	padding-top: calc(var(--dist_2) + var(--distance-responsive-small)) !important;
}

#Body.zh-main--top-aligned {
	padding-top: 0 !important;
}

.zh-container {
	width: min(var(--zh-container-max-width), 100%);
	margin: 0 auto;
	padding-left: var(--zh-container-gutter);
	padding-right: var(--zh-container-gutter);
}

.zh-container-narrow {
	width: min(var(--dist_17), 100%);
	margin: 0 auto;
}

.zh-container-narrow-plus {
	width: min(var(--dist_18), 100%);
	margin: 0 auto;
}

.zh-container-narrow-wider {
	width: min(calc(var(--dist_18) + var(--dist_2)), 100%);
	margin: 0 auto;
}

.zh-nowrap {
	white-space: nowrap;
}

.zh-card-rounded {
	border-radius: var(--zh-radius-lg);
}

.zh-heading-primary {
	margin: 0;
	color: var(--zh-primary);
	font-size: var(--zh-font-size-lg);
	font-weight: 400;
	line-height: var(--zh-line-height-tight);
	text-wrap: balance;
	text-align: center;
}

.zh-heading-primary-xxl {
	font-size: var(--zh-font-size-xxl);
	line-height: var(--zh-line-height-tighter);
}

.zh-main-block {
}

.zh-main-block + .zh-main-block {
	margin-top: var(--zh-main-block-separator);
}

.zh-audience-indicator-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: var(--zh-faq-indicator-heading-gap);
}

.zh-audience-indicator {
	border-radius: var(--dist_-3);
	margin: 0;
	display: inline-block;
	color: var(--zh-primary);
	font-size: var(--zh-font-size-tiny-fixed);
	padding: var(--dist_-3) var(--dist_0);
	font-weight: 600;
	line-height: var(--zh-line-height-base);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid var(--zh-nav-panel-border);
}

.zhbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zh-button-gap);
	min-height: calc(var(--dist_3) + var(--dist_-1));
	padding: var(--zh-button-padding-y) var(--zh-button-padding-x);
	border-radius: var(--zh-button-radius);
	border: 1px solid transparent;
	font-family: var(--zh-font-family);
	font-size: var(--zh-button-font-size);
	font-weight: 500;
	line-height: var(--zh-line-height-tight);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--zh-transition-time-fast) ease, color var(--zh-transition-time-fast) ease, border-color var(--zh-transition-time-fast) ease;

	&:hover,
	&:focus-visible,
	&:visited,
	&:active {
		text-decoration: none;
	}

	&:focus-visible {
		outline: 2px solid var(--zh-primary);
		outline-offset: 2px;
	}

	&[disabled],
	&.is-disabled {
		opacity: 0.6;
		pointer-events: none;
	}
}


.zhbutton-lg {
	min-height: calc(var(--dist_4) + var(--dist_0));
	padding: var(--zh-button-padding-y-lg) var(--zh-button-padding-x-lg);
	font-size: var(--zh-button-font-size-lg);
}

.zhbutton-min-width-md {
	min-width: 260px;
	justify-content: center !important;
	text-align: center;
}

.zhbutton-with-icon {
	justify-content: flex-start;
	gap: var(--dist_-1);
}

.zhbutton__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
	line-height: 1;
}

.zhbutton__icon-img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
}

.zhbutton-primary {
	background: var(--zh-primary);
	border-color: var(--zh-primary);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-primary);
		border-color: var(--zh-primary);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-primary-strong);
		border-color: var(--zh-primary-strong);
		color: var(--zh-white);
	}
}

.zhbutton-contact,
.btn-contact {
	background: var(--zh-color-orange);
	border-color: var(--zh-color-orange);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-color-orange);
		border-color: var(--zh-color-orange);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-color-orange-strong);
		border-color: var(--zh-color-orange-strong);
		color: var(--zh-white);
	}
}

.zhbutton-contact-transparent {
	background: transparent;
	border-width: 2px;
	border-color: var(--zh-color-orange);
	color: var(--zh-color-orange);

	&:visited,
	&:active {
		background: transparent;
		border-color: var(--zh-color-orange);
		color: var(--zh-color-orange);
	}

	&:hover {
		background: var(--zh-color-orange);
		border-color: var(--zh-color-orange);
		color: var(--zh-white);
	}
}

.zhbutton-resource-green {
	background: var(--zh-color-green);
	border-color: var(--zh-color-green);
	color: var(--zh-white);

	&:visited,
	&:active,
	&:hover {
		background: var(--zh-color-green);
		border-color: var(--zh-color-green);
		color: var(--zh-white);
	}
}

.zhbutton-program-green {
	background: var(--zh-color-green);
	border-color: var(--zh-color-green);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-color-green);
		border-color: var(--zh-color-green);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-secondary-strong);
		border-color: var(--zh-secondary-strong);
		color: var(--zh-white);
	}
}

.zhbutton-secondary {
	background: var(--zh-secondary);
	border-color: var(--zh-secondary);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-secondary);
		border-color: var(--zh-secondary);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-secondary-strong);
		border-color: var(--zh-secondary-strong);
		color: var(--zh-white);
	}
}

.zhbutton-szerervezetekcolor {
	background: var(--zh-color-audience-organizations-accent);
	border-color: var(--zh-color-audience-organizations-accent);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-color-audience-organizations-accent);
		border-color: var(--zh-color-audience-organizations-accent);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-color-audience-organizations-accent-strong);
		border-color: var(--zh-color-audience-organizations-accent-strong);
		color: var(--zh-white);
	}
}

.zhbutton-iskolakcolor {
	background: var(--zh-color-audience-schools-accent);
	border-color: var(--zh-color-audience-schools-accent);
	color: var(--zh-white);

	&:visited,
	&:active {
		background: var(--zh-color-audience-schools-accent);
		border-color: var(--zh-color-audience-schools-accent);
		color: var(--zh-white);
	}

	&:hover {
		background: var(--zh-color-audience-schools-accent-strong);
		border-color: var(--zh-color-audience-schools-accent-strong);
		color: var(--zh-white);
	}
}

.zhbutton-white {
	background: var(--zh-white);
	border-color: var(--zh-white);
	color: var(--zh-primary);

	&:visited,
	&:active {
		background: var(--zh-white);
		border-color: var(--zh-white);
		color: var(--zh-primary);
	}

	&:hover {
		background: rgba(255, 255, 255, 0.92);
		border-color: rgba(255, 255, 255, 0.92);
		color: var(--zh-primary);
	}
}

.zhbutton-transparent {
	background: transparent;
	border-width: 2px;
	border-color: currentColor;
	color: var(--zh-primary);

	&:visited,
	&:active {
		background: transparent;
		border-color: var(--zh-primary);
		color: var(--zh-primary);
	}

	&:hover {
		background: var(--zh-primary);
		border-color: var(--zh-primary);
		color: var(--zh-white);
	}
}

.zhbutton-text {
	background: transparent;
	border-color: transparent;
	color: var(--zh-secondary);

	&:visited,
	&:active {
		background: transparent;
		border-color: transparent;
		color: var(--zh-secondary);
	}

	&:hover {
		background: var(--zh-secondary-soft);
		border-color: transparent;
		color: var(--zh-secondary-strong);
	}
}

.zh-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dist_1);
}

.zh-simple-link {
	color: var(--zh-primary);
	text-decoration: none;
	text-underline-offset: var(--zh-text-underline-offset);
	transition: opacity var(--zh-transition-time-fast) ease;

	&:hover,
	&:focus-visible {
		color: var(--zh-primary);
		opacity: 0.78;
		text-decoration: underline;
	}

	&:visited,
	&:active {
		color: var(--zh-primary);
	}
}

.zh-nav__placeholder {
	height: var(--zh-topbar-height);
}

.zh-anchor-offset {
	scroll-margin-top: var(--zh-topbar-height);
}

a[name].zh-anchor-offset {
	display: block;
	position: relative;
	top: calc(-1 * var(--zh-topbar-height));
	visibility: hidden;
}