/* ==========================================================================
   Pfizer Afterwork — End of Summer Edition (Puurs, 25/09/2026)
   Design system: navy + Pfizer sky blue + warm sunset accent.
   Professional summer-evening look; no image assets required.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
	/* Brand */
	--pf-blue: #0096d6;        /* Pfizer sky */
	--pf-blue-dark: #0072b0;
	--pf-blue-soft: #e8f6fd;
	--pf-blue-light: #7fd0f4;
	--navy: #0b1c3f;           /* deep evening navy */
	--navy-2: #123064;
	--ink: #16205c;

	/* Summer accent */
	--sunset: #ff8a3d;
	--sunset-deep: #f2661f;
	--sunset-soft: #fff1e6;

	/* Neutrals */
	--body: #3a4256;
	--gray-50: #f7f9fc;
	--gray-100: #eef2f7;
	--gray-200: #e2e8f1;
	--gray-300: #cdd6e3;

	/* Surface + shape */
	--bg: #f4f7fb;
	--card: #ffffff;
	--radius: 10px;
	--radius-lg: 16px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(11, 28, 63, .08), 0 1px 2px rgba(11, 28, 63, .05);
	--shadow-md: 0 6px 18px rgba(11, 28, 63, .12), 0 2px 6px rgba(11, 28, 63, .06);
	--shadow-focus: 0 0 0 4px rgba(0, 150, 214, .18);

	--t-fast: .18s ease;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: none; }

body {
	background: var(--bg);
	color: var(--body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.01em; }
a { color: var(--pf-blue-dark); }
a:hover { color: var(--navy-2); }
hr { border-top: 1px solid var(--gray-200); opacity: 1; }
hr.small { margin-top: 0; margin-bottom: 0; }
p { color: var(--body); }

.container.mt-4 { margin-top: 1.75rem !important; }

/* ==========================================================================
   HERO — layered navy sky with setting sun (pure CSS/SVG)
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1200px 500px at 82% -10%, rgba(0, 150, 214, .35), transparent 60%),
		radial-gradient(900px 420px at 85% 108%, rgba(255, 138, 61, .28), transparent 65%),
		linear-gradient(158deg, var(--navy) 0%, var(--navy-2) 55%, #0e3a78 100%);
	color: #fff;
	padding: 3.4rem 1rem 2.9rem;
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; }

/* setting sun — pure CSS circle with soft glow */
.hero .sun {
	position: absolute;
	right: 6%;
	bottom: -84px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #ffd9a3 0%, var(--sunset) 46%, rgba(255, 138, 61, 0) 74%);
	filter: blur(1px);
	opacity: .9;
	z-index: 1;
}
/* water ripples below the sun */
.hero .sun::before,
.hero .sun::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 2px solid rgba(255, 196, 140, .35);
	border-top-color: transparent;
}
.hero .sun::before { bottom: -34px; width: 340px; height: 90px; }
.hero .sun::after  { bottom: -74px; width: 480px; height: 130px; border-color: rgba(255, 196, 140, .18); border-top-color: transparent; }

.hero .badge-edition {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: linear-gradient(90deg, var(--sunset), var(--sunset-deep));
	color: #fff;
	font-weight: 700;
	letter-spacing: .14em;
	font-size: .74rem;
	text-transform: uppercase;
	padding: .42rem 1.05rem;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(242, 102, 31, .4);
	margin-bottom: 1.1rem;
}
.hero h1 {
	color: #fff;
	font-weight: 900;
	letter-spacing: -.02em;
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	line-height: 1.05;
	margin-bottom: .35rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.hero .hero-sub {
	color: rgba(255, 255, 255, .85);
	font-size: 1.06rem;
	font-weight: 300;
	margin-bottom: 1.6rem;
}
/* fact chips: date / time / location */
.hero .facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hero .facts li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(4px);
	border-radius: 999px;
	padding: .45rem 1rem;
	font-size: .88rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.hero .facts li svg { flex: 0 0 auto; opacity: .9; }

/* compact hero on inner pages (register / confirmation / success) */
.hero.hero-compact { padding: 2.3rem 1rem 2.1rem; }
.hero.hero-compact .sun { width: 210px; height: 210px; bottom: -72px; right: 2%; }
.hero.hero-compact .sun::before { width: 280px; height: 74px; bottom: -28px; }
.hero.hero-compact .sun::after  { width: 400px; height: 110px; bottom: -62px; }

@media (max-width: 575.98px) {
	.hero { padding: 2.6rem 1rem 2.4rem; }
	.hero .sun { width: 190px; height: 190px; right: -34px; bottom: -66px; }
	.hero .sun::before { width: 250px; height: 66px; bottom: -26px; }
	.hero .sun::after  { width: 350px; height: 96px; bottom: -56px; }
	.hero .facts li { font-size: .8rem; padding: .38rem .8rem; }
	.hero.hero-compact { padding: 1.9rem 1rem 1.7rem; }
	.hero.hero-compact .sun { width: 150px; height: 150px; bottom: -54px; right: -28px; }
	.hero.hero-compact .sun::before { width: 210px; height: 56px; bottom: -22px; }
	.hero.hero-compact .sun::after  { width: 300px; height: 82px; bottom: -48px; }
}

/* ==========================================================================
   STEP INDICATOR (3 steps: Aanmelden → Gegevens → Bevestigen)
   ========================================================================== */
.steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 560px;
	margin: 0 auto 1.5rem;
	padding: 0 .5rem;
}
.steps .step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.steps .step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 17px;
	left: calc(50% + 19px);
	right: calc(-50% + 19px);
	height: 2px;
	background: var(--gray-200);
	z-index: 0;
}
.steps .step.done:not(:last-child)::after { background: var(--pf-blue); }
.steps .step .dot {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	font-weight: 700;
	background: #fff;
	color: #8a93a6;
	border: 2px solid var(--gray-300);
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.steps .step.done .dot {
	background: var(--pf-blue);
	border-color: var(--pf-blue);
	color: #fff;
	font-size: 0;
}
.steps .step.done .dot::before { content: "\2713"; font-size: 1rem; }
.steps .step.active .dot {
	background: #fff;
	border-color: var(--pf-blue);
	color: var(--pf-blue);
	box-shadow: var(--shadow-focus);
}
.steps .step .label {
	margin-top: .45rem;
	font-size: .78rem;
	color: #8a93a6;
	font-weight: 600;
	line-height: 1.1;
}
.steps .step.active .label { color: var(--pf-blue); }
.steps .step.done .label { color: #4a5468; }
.steps.all-done .step .dot { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; font-size: 0; }
.steps.all-done .step .dot::before { content: "\2713"; font-size: 1rem; }
.steps.all-done .step:not(:last-child)::after { background: var(--pf-blue); }
.steps.all-done .step .label { color: #4a5468; }
@media (max-width: 575.98px) {
	.steps .step .label { display: none; }
	.steps { max-width: 220px; }
}

/* ==========================================================================
   SECTION CARDS
   ========================================================================== */
.s-card {
	background: var(--card);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 1.75rem;
}
@media (max-width: 575.98px) {
	.s-card { padding: 1.15rem; border-radius: 12px; }
}
.s-heading { color: var(--pf-blue-dark); font-weight: 700; }

/* highlighted intro line on the register page */
.highligh-text {
	color: var(--pf-blue-dark);
	font-weight: 700;
	font-size: 1.08rem;
	border-left: 4px solid var(--sunset);
	padding-left: .6rem;
}

/* "card-with-icon" rows on the home page (programme highlights) */
.info-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.info-tile {
	flex: 1 1 200px;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	padding: .9rem 1rem;
	display: flex;
	align-items: flex-start;
	gap: .65rem;
}
.info-tile .ico {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--pf-blue-soft);
	color: var(--pf-blue-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
}
.info-tile .t { font-weight: 700; color: var(--ink); font-size: .95rem; }
.info-tile .d { font-size: .84rem; color: var(--body); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-control {
	border-color: var(--gray-300);
	border-radius: 8px;
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus {
	border-color: var(--pf-blue);
	box-shadow: var(--shadow-focus);
}
.form-label-strong { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.form-hint { font-size: .82rem; color: #8a93a6; }

@media (max-width: 575.98px) {
	.form-control[style*="max-width"] { max-width: 100% !important; }
}

/* message box for Luc */
.msg-box {
	background: linear-gradient(180deg, #fffdf9 0%, var(--sunset-soft) 100%);
	border: 1px solid #ffd9bd;
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
}
.msg-box textarea.form-control {
	border-color: #f3c9a8;
	min-height: 130px;
	resize: vertical;
}
.msg-box textarea.form-control:focus {
	border-color: var(--sunset);
	box-shadow: 0 0 0 4px rgba(255, 138, 61, .18);
}

/* SharePoint upload button */
.sharepoint-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	border: 2px solid #2f6fb5;
	color: #2f6fb5;
	background: #fff;
	border-radius: 999px;
	padding: 10px 26px;
	font-weight: 700;
	transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.sharepoint-btn:hover, .sharepoint-btn:focus {
	background: #2f6fb5;
	color: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.submit-btn,
.next-btn {
	border: 2px solid var(--pf-blue);
	border-radius: 999px;
	background: #fff;
	padding: 11px 38px;
	color: var(--pf-blue-dark);
	font-weight: 700;
	letter-spacing: .02em;
	transition: background var(--t-fast), color var(--t-fast),
	            box-shadow var(--t-fast), transform var(--t-fast);
}
.submit-btn:hover, .submit-btn:focus,
.next-btn:hover, .next-btn:focus {
	background: var(--pf-blue);
	border-color: var(--pf-blue);
	color: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}
/* filled variant for the primary CTA */
.submit-btn.btn-filled {
	background: var(--pf-blue);
	color: #fff;
}
.submit-btn.btn-filled:hover, .submit-btn.btn-filled:focus {
	background: var(--pf-blue-dark);
	border-color: var(--pf-blue-dark);
	color: #fff;
}

.back-btn {
	border: 2px solid var(--gray-300);
	border-radius: 999px;
	background: #fff;
	padding: 11px 38px;
	color: #5b6478;
	font-weight: 700;
	transition: background var(--t-fast), color var(--t-fast),
	            box-shadow var(--t-fast), transform var(--t-fast);
}
.back-btn:hover, .back-btn:focus {
	background: #5b6478;
	color: #fff;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert { border-radius: var(--radius); }
.alert-danger {
	border-color: #f3c2bd;
	background: #fdeeec;
	color: #a23a2f;
}
.alert-info {
	border-color: #bcd9ec;
	background: var(--pf-blue-soft);
	color: #14577c;
}
.alert-success {
	border-color: #bfe3c6;
	background: #edf9ef;
	color: #23643a;
}

/* success page check */
.success-check {
	width: 84px;
	height: 84px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: var(--pf-blue-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.success-check svg { width: 44px; height: 44px; }

/* ==========================================================================
   LOGIN (WorkDay ID)
   ========================================================================== */
.login-card { max-width: 560px; margin: 0 auto; }
.login-note {
	font-size: .84rem;
	color: #8a93a6;
	background: var(--gray-50);
	border: 1px dashed var(--gray-200);
	border-radius: var(--radius);
	padding: .6rem .8rem;
}
.login-note a { word-break: break-all; }

/* ==========================================================================
   FOOTER + ANIMATION
   ========================================================================== */
footer .text-muted, footer small { color: #98a0b3 !important; }
footer a { color: #98a0b3 !important; text-decoration: underline; }

.fade-in { animation: sFadeIn .32s ease-out both; }
@keyframes sFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	.fade-in { animation: none; }
}