/* Copyright (c) 2026 Franciszek Kępski */

/* Licensed under the MIT License */

/* Common variables, reset, shared shell, language switcher, footer, and utility basics */

:root {
	/* colors */
	--bg: #f5f6f8;
	--bg-soft: #fafbfc;
	--surface: #fff;
	--surface-2: #f1f3f5;
	--surface-3: #fcfcfd;
	--text: rgb(65, 64, 66);
	--text-strong: #1f2937;
	--muted: #5f6b76;
	--muted-2: #374151;
	--muted-3: #4b5563;
	--muted-4: #6b7280;
	--muted-5: #b2b2b2;
	--border: #d8dce1;
	--border-strong: #bfc5cc;
	--border-soft: #eceff2;
	--tree-line: #cfd5db;
	--accent: #d40511;
	--accent-dark: #aa0410;
	--accent-soft: #fff1f2;
	--accent-soft-2: #fde7e9;
	--accent-rgb: 212, 5, 17;
	--danger-rgb: 220, 0, 50;
	--shadow-rgb: 17, 24, 39;
	--black-rgb: 0, 0, 0;
	/* sizing */
	--panel-min: 270px;
	--drawer-width: 360px;
	--drawer-handle-width: 46px;
	--drawer-top: 116px;
	/* radius */
	--radius-sm: 12px;
	--radius-md: 14px;
	--radius: 18px;
	--radius-lg: 20px;
	--radius-xl: 22px;
	--radius-2xl: 24px;
	--radius-pill: 999px;
	/* motion */
	--transition-fast: .15s ease;
	--transition: .18s ease;
	--transition-slow: .26s ease;
	/* shadows */
	--shadow: 0 10px 30px rgba(var(--shadow-rgb), .08);
	--shadow-soft: 0 6px 18px rgba(var(--shadow-rgb), .05);
	--shadow-card: 0 8px 24px rgba(15, 23, 42, .04);
	--shadow-panel:0 10px 20px rgba(var(--shadow-rgb), .08),0 6px 0 rgba(var(--danger-rgb), .6);
	--shadow-panel-hover:0 22px 40px rgba(var(--shadow-rgb), .16),0 12px 0 rgba(var(--danger-rgb), .8);
	--shadow-panel-active:0 6px 12px rgba(var(--shadow-rgb), .08),0 3px 0 rgba(var(--danger-rgb), .25);
	/* gradients */
	--hero-bg:radial-gradient(circle at top right, rgba(var(--accent-rgb), .08), transparent 220px),linear-gradient(135deg, #fff 0%, #fff8f8 100%);
	--surface-gradient: linear-gradient(180deg, #fff 0%, var(--surface-3) 100%);
	--surface-gradient-soft: linear-gradient(180deg, #fbfbfc 0%, #f4f5f7 100%);
	--code-bg:radial-gradient(circle at top right, rgba(var(--accent-rgb), .08), transparent 28%),linear-gradient(180deg, #0b1020 0%, #070c18 100%);
	/* focus */
	--focus-ring: 0 0 0 4px rgba(var(--accent-rgb), .08);
	--focus-outline: 3px solid rgba(var(--accent-rgb), .18);
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	font: 400 1rem/1.5 "Segoe UI", Tahoma, sans-serif;
	background: var(--bg);
	color: var(--text);
	counter-reset: h2;
}

strong {
	font-weight: 500;
}

section {
	padding-inline-start: 0;
}

section section {
	padding-inline-start: 1.5rem;
	/*border-inline-start: 1px solid var(--border-soft);*/
}

section > section {
	margin-top: 1rem;
}

.link {
	position: relative;
	color: var(--text);
	text-decoration: none;
	transition: color .2s ease;
	font-weight: 600;
	cursor: pointer;
}

.link::after {
	content: "";
	position: absolute;
	left: 0;
	width: 0;
	background: var(--accent);
	transition: width .25s ease;
	bottom: -2px;
	height: 2px;
}

.link:hover {
	color: var(--accent);
}

.link:hover::after {
	width: 100%;
}

.page {
	margin: 0 auto;
	padding: 28px 24px 48px;
}

.hero-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow);
}

.hero-top {
	position: relative;
	padding: 34px 32px 26px;
	background: var(--hero-bg);
}

.hero-top::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 16px;
	bottom: 0;
	height: 3px;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--accent), rgba(220, 0, 60, 0));
}

.lang-switcher {
	position: absolute;
	top: 6px;
	right: 7px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--shadow-soft);
}

.lang-switcher button {
	position: relative;
	z-index: 1;
	border: 0;
	background: transparent;
	color: var(--muted);
	padding: 4px 6px;
	border-radius: 100px;
	font-weight: 700;
	font-size: 0.7rem;
	cursor: pointer;
	transition:color 0.18s ease,transform 0.18s ease;
}

.lang-switcher button:hover {
	background: var(--surface-2);
	color: var(--text);
	-font-weight: 800;
	border-color: var(--border-soft);
}

.lang-switcher button:active {
	transform: translateY(1px);
}

.lang-switcher button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.lang-switcher button.active {
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
	color: #fff;
	border-color: rgba(var(--accent-rgb), 0.28);
	box-shadow:0 8px 18px rgba(var(--accent-rgb), 0.18),inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lang-switcher button.active {
	background: var(--accent);
	color: #fff;
	border-color: #000;
}

.hero-bottom {
	position: relative;
	padding: 0 32px;
	background: var(--surface);
	border-top: 1px solid var(--border-soft);
}

.hero-bottom h3 {
	margin: 1em 0;
	text-align: end;
	color: var(--muted-5);
	font-size: .95rem;
	font-weight: 600;
}

.hero-bottom h3::before {
	content: "";
}

.hero-top .link {
	font-weight: 750;
}

.hero-bottom a {
	position: relative;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-top .link::after {
	bottom: -6px;
	height: 4px;
}

h1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0 0 8px;
	color: var(--muted);
	font-size: clamp(2.6rem, 2.6vw, 2.7rem);
	font-weight: 600;
	letter-spacing: -.03em;
}

.subtitle {
	max-width: 760px;
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
}

.section-header {
	margin-bottom: 18px;
}

.section-header h2 {
	margin: 0 0 6px;
	font-size: 1.35rem;
	letter-spacing: -.02em;
}

.section-header p {
	margin: 0;
	color: var(--muted);
	font-size: .96rem;
}

.utility-card {
	overflow: hidden;
	background: var(--surface-gradient);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.utility-card-header {
	padding: 9px 16px;
	border-bottom: 1px solid var(--border-soft);
}

.utility-card-body {
	padding: 18px;
	max-height: 80vh;
    overflow: auto;
}

.utility-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.status {
	padding: 6px 2px;
	color: var(--muted);
	font-size: .93rem;
}

.dpd-logo {
	width: 140px;
}

.subtitle {
	font-size: 0.9rem;
	color: var(--muted);
}