/*
Theme Name:        CUPT Jubilee – XX-lecie
Theme URI:         https://kroniki.cupt.gov.pl
Author:            Centrum Unijnych Projektów Transportowych
Author URI:        https://www.cupt.gov.pl
Description:       Motyw jubileuszowy XX-lecia CUPT. Landing page z zegarem odliczającym do 1 lipca 2027 r., własnym blokiem Gutenberg, glassmorphism UI i animacją pociągów na torach tworzących cyfrę 20.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       cupt-jubilee
Tags:              one-page, custom-block, countdown, anniversary

Paleta CUPT:
  Granat primary  #1C3566
  Granat deep     #0E1F3D
  Granat mid      #2A4A8A
  Szary           #6B7A8D
  Szary jasny     #B8C4D0
  Biały           #FFFFFF
*/

/* Globalne zmienne motywu – dostępne w całym front-endzie */
:root {
	--cupt-navy:        #1C3566;
	--cupt-navy-deep:   #0E1F3D;
	--cupt-navy-mid:    #2A4A8A;
	--cupt-silver:      #6B7A8D;
	--cupt-silver-lt:   #B8C4D0;
	--cupt-white:       #FFFFFF;
	--cupt-off-white:   #F4F6F9;

	/* Glassmorphism */
	--glass-bg:         rgba(255, 255, 255, 0.08);
	--glass-border:     rgba(255, 255, 255, 0.14);
	--glass-shadow:     0 8px 40px rgba(14, 31, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);

	/* Zegar – czarny jak prawdziwa tablica dworcowa */
	--flap-bg:          #080808;
	--flap-gold:        #F0C430;
	--flap-green:       #1a4a2e;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	background: var(--cupt-navy-deep);
	color: var(--cupt-white);
	min-height: 100vh;
	overflow-x: hidden;
}

/* Animowane tło – gradient + pływające cząsteczki */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse 70% 50% at 20% 20%, rgba(42, 74, 138, 0.35) 0%, transparent 60%),
		radial-gradient(ellipse 60% 60% at 80% 80%, rgba(28, 53, 102, 0.40) 0%, transparent 60%),
		linear-gradient(160deg, #0A1628 0%, #0E1F3D 40%, #111D35 100%);
	pointer-events: none;
}

/* Wrapper strony */
.cupt-page-wrap {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 56px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Cząsteczki animowane */
.cupt-particles {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.cupt-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	animation: cupt-float linear infinite;
}
@keyframes cupt-float {
	0%   { transform: translateY(110vh) scale(1);   opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

/* Glassmorphism – klasa bazowa */
.cupt-glass {
	background: var(--glass-bg);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--glass-border);
	border-radius: 8px;
	box-shadow: var(--glass-shadow);
}

/* Akcesja do edytora blokowego */
.wp-block-cupt-jubilee-clock {
	display: block;
}

/* ═══════════════════════════════════════════════════════
   HEADER (NAWIGACJA)
═══════════════════════════════════════════════════════ */
.cupt-header {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: 1200px;
	padding: 16px 24px;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cupt-logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cupt-white);
	text-decoration: none;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 1px;
}

.cupt-logo-link .material-symbols-outlined {
	font-size: 32px;
	color: var(--flap-gold, #F0C430);
}

/* Zwiększenie odstępu dla body, aby header nie zasłaniał zegara */
.cupt-page-wrap {
	padding-top: 120px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER (STOPKA)
═══════════════════════════════════════════════════════ */
.cupt-footer {
	max-width: 1200px;
	width: calc(100% - 32px);
	margin: 0 auto 32px;
	padding: 32px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cupt-footer-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.cupt-footer-links a {
	color: var(--cupt-white);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.cupt-footer-links a:hover {
	color: var(--flap-gold, #F0C430);
}

.cupt-copyright {
	font-size: 14px;
	color: var(--cupt-silver-lt, #B8C4D0);
	font-weight: 300;
}

@media (max-width: 600px) {
	.cupt-footer-links {
		gap: 16px;
		flex-direction: column;
	}
	.cupt-header {
		top: 16px;
		padding: 12px 16px;
	}
	.cupt-page-wrap {
		padding-top: 100px;
	}
}