/*
Green colors for the website
Temporary color for... temporary use
MD3
*/

:root {
	--color-background: #f0f0f0;
	--color-content-main: #333333;
	--color-content-secondary: #666666;
	--color-content-highlight: #ffcc00;
	--color-border: #cccccc;
	--temporary-color: #ff5733;
	--transition-style: cubic-bezier(0.46, 0.03, 0.52, 0.96);

	/* Material Design 3 color variables */
	--md-sys-color-primary: rgb(52 105 64);
	--md-sys-color-surface-tint: rgb(52 105 64);
	--md-sys-color-on-primary: rgb(255 255 255);
	--md-sys-color-primary-container: rgb(181 241 188);
	--md-sys-color-on-primary-container: rgb(26 81 42);
	--md-sys-color-secondary: rgb(80 99 81);
	--md-sys-color-on-secondary: rgb(255 255 255);
	--md-sys-color-secondary-container: rgb(211 232 210);
	--md-sys-color-on-secondary-container: rgb(57 75 59);
	--md-sys-color-tertiary: rgb(57 101 109);
	--md-sys-color-on-tertiary: rgb(255 255 255);
	--md-sys-color-tertiary-container: rgb(189 234 244);
	--md-sys-color-on-tertiary-container: rgb(32 77 85);
	--md-sys-color-error: rgb(186 26 26);
	--md-sys-color-on-error: rgb(255 255 255);
	--md-sys-color-error-container: rgb(255 218 214);
	--md-sys-color-on-error-container: rgb(147 0 10);
	--md-sys-color-background: rgb(246 251 242);
	--md-sys-color-on-background: rgb(24 29 24);
	--md-sys-color-surface: rgb(246 251 242);
	--md-sys-color-on-surface: rgb(24 29 24);
	--md-sys-color-surface-variant: rgb(221 229 218);
	--md-sys-color-on-surface-variant: rgb(65 73 65);
	--md-sys-color-outline: rgb(114 121 112);
	--md-sys-color-outline-variant: rgb(193 201 190);
	--md-sys-color-shadow: rgb(0 0 0);
	--md-sys-color-scrim: rgb(0 0 0);
	--md-sys-color-inverse-surface: rgb(45 50 44);
	--md-sys-color-inverse-on-surface: rgb(238 242 234);
	--md-sys-color-inverse-primary: rgb(154 212 161);
	--md-sys-color-primary-fixed: rgb(181 241 188);
	--md-sys-color-on-primary-fixed: rgb(0 33 10);
	--md-sys-color-primary-fixed-dim: rgb(154 212 161);
	--md-sys-color-on-primary-fixed-variant: rgb(26 81 42);
	--md-sys-color-secondary-fixed: rgb(211 232 210);
	--md-sys-color-on-secondary-fixed: rgb(14 31 17);
	--md-sys-color-secondary-fixed-dim: rgb(183 204 182);
	--md-sys-color-on-secondary-fixed-variant: rgb(57 75 59);
	--md-sys-color-tertiary-fixed: rgb(189 234 244);
	--md-sys-color-on-tertiary-fixed: rgb(0 31 37);
	--md-sys-color-tertiary-fixed-dim: rgb(161 206 216);
	--md-sys-color-on-tertiary-fixed-variant: rgb(32 77 85);
	--md-sys-color-surface-dim: rgb(215 219 211);
	--md-sys-color-surface-bright: rgb(246 251 242);
	--md-sys-color-surface-container-lowest: rgb(255 255 255);
	--md-sys-color-surface-container-low: rgb(241 245 237);
	--md-sys-color-surface-container: rgb(235 239 231);
	--md-sys-color-surface-container-high: rgb(229 234 225);
	--md-sys-color-surface-container-highest: rgb(223 228 220);
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
	:root {
		font-family: InterVariable, sans-serif;
	}
}

@supports (text-wrap: pretty) {
	* {
		text-wrap: pretty;
	}
}

/* Usuwa niebieski overlay i zastępuje go własnym stylem */
a,
button,
[role='button'],
.clickable-element {
	-webkit-tap-highlight-color: transparent; /* Dla WebKit/Blink */
	outline: none; /* Dla focus state */
	user-select: none; /* Zapobiega niebieskiemu zaznaczeniu tekstu */
}

/* Własny styl aktywności */
a:active,
button:active,
[role='button']:active {
	opacity: 0.8; /* Delikatny efekt wciśnięcia */
	transform: scale(0.98); /* Subtelne pomniejszenie */
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: white;
	color: var(--color-content-main);
	height: 100%;
}

body {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	word-break: break-word;
	line-height: 1.5;
	text-rendering: optimizeLegibility; /* Lepsze kerningowanie */
	font-kerning: normal; /* Spójne odstępy między literami */
}

nav {
	display: flex;
	background-color: var(--md-sys-color-secondary);
	justify-content: space-around;
	align-items: center;
	height: 10vh;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 20px;
	padding: 1rem;
	width: 100%;
}

.nav-links li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10rem;
}

.nav-links a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	background-color: unset;
	/*temporary bg-color for testing*/
	background-color: var(--md-sys-color-on-secondary-container);
	color: var(--color-content-main);
	font-weight: bold;
	padding: 1rem;
	border-radius: 1.875rem;
	width: 20vw;
	transition: 150ms var(--transition-style);
}

nav a:hover {
	color: var(--color-content-highlight);
	background-color: var(--md-sys-color-secondary-container);
}

picture.logo {
	width: 100px;
	height: auto;
}

header {
	height: calc(100vh - 10vh); /* Adjust based on nav height */
	background-color: var(--md-sys-color-background);
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

footer {
	background-color: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	text-align: center;
	padding: 1rem 2rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	gap: 1rem;
}

.footer-top {
	width: 100%;
	font-family: 'Noto Serif', serif;
}

.footer-top::after {
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--md-sys-color-outline);
	margin-top: 0.5rem;
	border-radius: 1rem;
}

.footer-block {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

p {
	margin: 0;
	padding: 0.5rem;
}

a.outbound {
	color: color-mix(in srgb, currentColor 80%, var(--md-sys-color-tertiary) 20%);
	transition: all 150ms var(--transition-style);
	text-decoration-line: underline;
	text-decoration-style: wavy;
}

a.outbound:hover {
	color: white;
	background-color: var(--md-sys-color-tertiary);
}

.anta-regular {
	font-family: 'Anta', sans-serif;
	font-weight: 400;
	font-style: normal;
}

.anta-bold {
	font-family: 'Anta', sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* Mobile menu styles */
.hamburger {
	display: none;
	padding: 15px;
	cursor: pointer;
	background: transparent;
	border: none;
	z-index: 1000;
}

.hamburger-box {
	width: 30px;
	height: 24px;
	display: inline-block;
	position: relative;
}

.hamburger-inner {
	width: 100%;
	height: 3px;
	background-color: var(--md-sys-color-inverse-on-surface);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 0.2s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
	content: '';
	width: 100%;
	height: 3px;
	background-color: var(--md-sys-color-inverse-on-surface);
	position: absolute;
	left: 0;
	transition: transform 0.2s ease;
}

.hamburger-inner::before {
	top: -8px;
}

.hamburger-inner::after {
	top: 8px;
}

/* Active state for hamburger */
.hamburger.active .hamburger-inner {
	background-color: transparent;
}

.hamburger.active .hamburger-inner::before {
	transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-inner::after {
	transform: translateY(-8px) rotate(-45deg);
}

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background-color: var(--md-sys-color-primary);
	color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	cursor: pointer;
	z-index: 999;
	font-size: 1.2rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
	opacity: 1;
}

/* Responsive styles */
@media (max-width: 768px) {
	.hamburger {
		display: block;
	}

	nav {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.nav-list {
		position: fixed;
		top: 10vh;
		left: 0;
		width: 100%;
		background-color: var(--md-sys-color-secondary);
		flex-direction: column;
		align-items: center;
		padding: 0;
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
		pointer-events: none;
		z-index: 999;
	}

	.nav-list.active {
		transform: translateY(0);
		opacity: 1;
		pointer-events: all;
	}

	.nav-links {
		flex-direction: column;
		width: 100%;
		padding: 0;
	}

	.nav-links li {
		width: 100%;
		text-align: center;
	}

	.nav-links a {
		width: 100%;
		border-radius: 0;
		padding: 1rem 0;
		display: block;
	}
}