/* Viikkonumerot Core – pää-CSS. Kaikki .vn-prefiksillä jotta ei sotke teemaa. */

.vn-wrap {
	--vn-bg:#f7f5f0; --vn-ink:#0a2540; --vn-accent:#d64545; --vn-gold:#c9a961;
	--vn-muted:#6b7a8f; --vn-card:#ffffff; --vn-line:#e6e1d7;
	font-family:'Charter','Iowan Old Style','Georgia',serif;
	color:var(--vn-ink); line-height:1.5; -webkit-font-smoothing:antialiased;
	background:var(--vn-bg);
}
@media (prefers-color-scheme:dark) {
	.vn-wrap {
		--vn-bg:#0a1018; --vn-ink:#f0ead6; --vn-card:#131b26;
		--vn-line:#1f2a38; --vn-muted:#8fa0b7; --vn-accent:#e55c5c; --vn-gold:#d4b876;
	}
}
.vn-wrap *, .vn-wrap *::before, .vn-wrap *::after { box-sizing:border-box; }
.vn-wrap h1, .vn-wrap h2, .vn-wrap h3 { margin:0; }

/* Nav */
.vn-nav {
	display:flex; justify-content:space-between; align-items:center;
	padding:14px 24px; border-bottom:1px solid var(--vn-line);
	font-family:'Inter','Helvetica Neue',sans-serif; font-size:13px; letter-spacing:0.02em;
}
.vn-nav a { color:var(--vn-muted); text-decoration:none; margin-right:20px; }
.vn-nav nav a:last-child { margin-right:0; }
.vn-nav a:hover { color:var(--vn-ink); }
.vn-nav .vn-nav-current { color:var(--vn-accent); }
.vn-brand { font-family:'Charter',serif !important; font-weight:700; font-size:16px; color:var(--vn-ink) !important; margin-right:0 !important; }
.vn-brand b { color:var(--vn-accent); }

/* Breadcrumb */
.vn-breadcrumb {
	max-width:960px; margin:24px auto 0; padding:0 24px;
	font-family:'Inter',sans-serif; font-size:12px; color:var(--vn-muted); letter-spacing:0.02em;
}
.vn-breadcrumb a { color:var(--vn-muted); text-decoration:none; }
.vn-breadcrumb a:hover { color:var(--vn-accent); }

/* Hero (homepage) */
.vn-hero { min-height:calc(100vh - 100px); display:grid; place-items:center; padding:40px 24px; }
.vn-hero-grid { display:grid; gap:32px; max-width:960px; width:100%; text-align:center; }
.vn-eyebrow { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--vn-muted); margin-bottom:8px; }
.vn-bignum {
	font-family:'Charter',serif; font-weight:700;
	font-size:clamp(120px, 28vw, 320px); line-height:0.85;
	letter-spacing:-0.04em; color:var(--vn-ink);
	display:flex; align-items:baseline; justify-content:center; gap:0.15em;
}
.vn-word { font-size:0.28em; font-weight:400; color:var(--vn-muted); letter-spacing:0; align-self:end; margin-bottom:0.4em; }
.vn-daterange { font-size:clamp(18px,2.4vw,26px); color:var(--vn-ink); margin-top:8px; font-style:italic; }
.vn-dash { color:var(--vn-accent); font-style:normal; margin:0 0.3em; }

/* Search */
.vn-search { display:flex; gap:8px; justify-content:center; font-family:'Inter',sans-serif; }
.vn-search input {
	font-family:inherit; border:1px solid var(--vn-line); background:var(--vn-card);
	color:var(--vn-ink); padding:12px 16px; border-radius:4px; font-size:15px; width:280px;
}
.vn-search button {
	font-family:inherit; background:var(--vn-ink); color:var(--vn-bg);
	border:none; padding:12px 24px; border-radius:4px; font-size:14px;
	font-weight:500; cursor:pointer; letter-spacing:0.02em;
}
.vn-search button:hover { background:var(--vn-accent); }
.vn-search-hint { font-size:12px; color:var(--vn-muted); margin-top:10px; font-family:'Inter',sans-serif; }
.vn-search-hint a { color:var(--vn-muted); border-bottom:1px dotted var(--vn-muted); text-decoration:none; }

/* Cards */
.vn-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; max-width:720px; margin:0 auto; }
.vn-card {
	background:var(--vn-card); border:1px solid var(--vn-line);
	padding:18px 20px; border-radius:6px; text-align:left;
	text-decoration:none; color:inherit;
	transition:transform 0.15s, border-color 0.15s; font-family:'Inter',sans-serif;
}
.vn-card:hover { transform:translateY(-2px); border-color:var(--vn-accent); }
.vn-kicker { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--vn-muted); margin-bottom:4px; }
.vn-cardtitle { font-size:15px; font-weight:500; color:var(--vn-ink); }

/* Week strip */
.vn-weekstrip {
	border-top:1px solid var(--vn-line); border-bottom:1px solid var(--vn-line);
	padding:16px 24px; display:flex; justify-content:center; gap:4px;
	font-family:'Inter',sans-serif; font-size:13px; overflow-x:auto;
}
.vn-weekstrip a { padding:8px 14px; color:var(--vn-muted); text-decoration:none; border-radius:4px; white-space:nowrap; }
.vn-weekstrip a.vn-now { background:var(--vn-ink); color:var(--vn-bg); font-weight:600; }
.vn-weekstrip a:hover:not(.vn-now) { background:var(--vn-line); }

/* Page hero (sub-pages) */
.vn-pagehero {
	max-width:960px; margin:16px auto 40px; padding:0 24px;
	display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
}
.vn-label { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--vn-muted); margin-bottom:8px; }
.vn-bignum-sm { font-size:clamp(60px,12vw,140px); line-height:0.9; letter-spacing:-0.04em; font-weight:700; }
.vn-holiday-title { font-size:clamp(40px,6vw,72px); font-weight:700; letter-spacing:-0.02em; line-height:1; }
.vn-sub { font-size:20px; font-style:italic; color:var(--vn-muted); margin-top:12px; }
.vn-meta { border-left:2px solid var(--vn-accent); padding-left:20px; font-family:'Inter',sans-serif; font-size:14px; }
.vn-meta dl { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0; }
.vn-meta dt { color:var(--vn-muted); text-transform:uppercase; letter-spacing:0.1em; font-size:11px; align-self:center; margin:0; }
.vn-meta dd { color:var(--vn-ink); font-weight:500; margin:0; }
.vn-meta dd a { color:var(--vn-accent); text-decoration:none; }
.vn-meta dd a:hover { text-decoration:underline; }
.vn-status-now { color:var(--vn-accent); }

@media (max-width:640px) {
	.vn-pagehero { grid-template-columns:1fr; gap:20px; }
	.vn-meta { border-left:none; border-top:2px solid var(--vn-accent); padding-left:0; padding-top:16px; }

	/* Etusivun mobiili-fix */
	.vn-hero { padding: 24px 16px; min-height: auto; }
	.vn-hero-grid { gap: 20px; }

	/* Iso "Viikko 18" -teksti pienemmäksi mobiilissa */
	.vn-bignum {
		font-size: clamp(72px, 22vw, 140px) !important;
		gap: 0.1em;
		flex-wrap: wrap;
	}

	/* Päivämääräriville salli wrap useammalle riville */
	.vn-daterange {
		font-size: clamp(14px, 4vw, 18px);
		line-height: 1.4;
		word-spacing: 0;
	}
	.vn-daterange .vn-dash { display: inline-block; margin: 0 4px; }

	/* Hakukenttä: input ja nappi pinotaan päällekkäin pienillä näytöillä */
	.vn-search {
		flex-direction: column;
		gap: 8px;
		max-width: 320px;
		margin: 0 auto;
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}
	.vn-search input { width: 100%; box-sizing: border-box; }
	.vn-search button { width: 100%; padding: 12px; }

	/* Korttisarja: yksi sarake mobiilissa */
	.vn-cards {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 0 16px;
		max-width: 100%;
		box-sizing: border-box;
	}
	.vn-card {
		padding: 14px;
		min-height: 0;
	}
	.vn-cardtitle { font-size: 16px; }
	.vn-kicker { font-size: 10px; }

	/* Header: brändi ja navigaatio joustavat mobiilissa */
	.vn-nav {
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		text-align: center;
	}
	.vn-nav nav {
		display: flex;
		justify-content: center;
		gap: 12px;
		flex-wrap: wrap;
	}
	.vn-nav nav a { font-size: 13px; }

	/* Viikkonauha — vaakavieritettävä mobiilissa */
	.vn-weekstrip {
		overflow-x: auto;
		gap: 6px;
		padding: 12px 16px;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
	}
	.vn-weekstrip a { font-size: 12px; padding: 8px 10px; flex-shrink: 0; }

	/* Sisältöalueille pienempi paddings */
	.vn-info, .vn-faq, .vn-context, .vn-related, .vn-days {
		padding: 0 16px;
		margin: 24px auto;
	}

	/* FAQ-detaljit pienempi */
	.vn-faq summary { font-size: 15px; padding: 12px 0; }
	.vn-faq p { font-size: 14px; }

	/* Footer */
	.vn-footer { padding: 20px 16px; font-size: 11px; }
	.vn-footer a { display: inline-block; margin: 4px 6px; }
}

/* Erittäin pienet näytöt (< 380px) */
@media (max-width:380px) {
	.vn-bignum { font-size: clamp(60px, 18vw, 100px) !important; }
	.vn-cards { grid-template-columns: 1fr; }
}

/* Days table */
.vn-days, .vn-context, .vn-related, .vn-info, .vn-faq { max-width:960px; margin:40px auto; padding:0 24px; }
.vn-days h2, .vn-related h3 {
	font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.25em;
	text-transform:uppercase; color:var(--vn-muted); margin-bottom:16px; font-weight:500;
}
.vn-daytable {
	width:100%; border-collapse:collapse; background:var(--vn-card);
	border:1px solid var(--vn-line); border-radius:8px; overflow:hidden;
	font-family:'Inter',sans-serif;
}
.vn-daytable td { padding:14px 20px; border-bottom:1px solid var(--vn-line); font-size:15px; }
.vn-daytable tr:last-child td { border-bottom:none; }
.vn-daytable tr.vn-today { background:rgba(214,69,69,0.08); }
.vn-daytable tr.vn-today td { font-weight:600; }
.vn-dayname { width:140px; color:var(--vn-muted); text-transform:uppercase; font-size:12px; letter-spacing:0.1em; }
.vn-daydate { width:200px; color:var(--vn-ink); }
.vn-daynote, .vn-dayholiday a, .vn-dayweek a { color:var(--vn-ink); text-decoration:none; }
.vn-dayholiday a:hover, .vn-dayweek a:hover { color:var(--vn-accent); }
.vn-weeknum a { color:var(--vn-ink); font-weight:600; text-decoration:none; }
.vn-weeknum a:hover { color:var(--vn-accent); }
.vn-tag-today { color:var(--vn-accent); font-weight:600; font-size:13px; }
.vn-tag-holiday { color:var(--vn-accent); font-weight:500; font-size:13px; }
.vn-tag-virallinen { background:var(--vn-accent); color:var(--vn-bg); padding:2px 8px; border-radius:3px; font-size:11px; }
.vn-tag-liputus { background:var(--vn-gold); color:var(--vn-ink); padding:2px 8px; border-radius:3px; font-size:11px; }
.vn-tag-defacto { background:var(--vn-muted); color:var(--vn-bg); padding:2px 8px; border-radius:3px; font-size:11px; }
.vn-tag-merkki { background:transparent; color:var(--vn-muted); padding:2px 8px; border-radius:3px; font-size:11px; border:1px solid var(--vn-line); }

/* Pager */
.vn-pager { max-width:960px; margin:40px auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vn-pager a {
	background:var(--vn-card); border:1px solid var(--vn-line);
	padding:20px 24px; border-radius:8px; text-decoration:none; color:inherit;
	font-family:'Inter',sans-serif; transition:border-color 0.15s, transform 0.15s;
}
.vn-pager a:hover { border-color:var(--vn-accent); transform:translateY(-2px); }
.vn-arrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--vn-muted); }
.vn-ptitle { font-size:18px; font-weight:600; margin-top:4px; color:var(--vn-ink); }
.vn-psubtitle { font-size:13px; color:var(--vn-muted); margin-top:2px; }
.vn-pager .vn-next { text-align:right; }

/* Context */
.vn-context h2 {
	font-size:clamp(22px,2.5vw,30px); font-weight:700; margin-bottom:16px; letter-spacing:-0.01em;
}
.vn-context h2::before {
	content:""; display:inline-block; width:8px; height:8px;
	background:var(--vn-accent); margin-right:12px; vertical-align:middle; transform:translateY(-3px);
}
.vn-context p { margin-bottom:14px; }
.vn-context p strong { color:var(--vn-ink); font-weight:700; }
.vn-muted { color:var(--vn-muted); }

/* Related */
.vn-related-grid {
	display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:8px; font-family:'Inter',sans-serif; font-size:14px;
}
.vn-related-grid a {
	padding:12px 16px; background:var(--vn-card); border:1px solid var(--vn-line);
	border-radius:4px; color:var(--vn-ink); text-decoration:none;
}
.vn-related-grid a:hover { border-color:var(--vn-accent); }
.vn-related-grid .vn-related-strong { font-weight:600; }

/* Info & FAQ */
.vn-info { max-width:720px; }
.vn-info h2 {
	font-size:clamp(22px,2.5vw,30px); font-weight:700; margin-bottom:16px; letter-spacing:-0.01em;
}
.vn-info h2::before {
	content:""; display:inline-block; width:8px; height:8px;
	background:var(--vn-accent); margin-right:12px; vertical-align:middle; transform:translateY(-3px);
}
.vn-info p { margin-bottom:14px; }
.vn-faq { max-width:720px; }
.vn-faq details { border-bottom:1px solid var(--vn-line); padding:16px 0; }
.vn-faq summary {
	cursor:pointer; font-weight:600; list-style:none;
	display:flex; justify-content:space-between; align-items:center;
}
.vn-faq summary::-webkit-details-marker { display:none; }
.vn-faq summary::after { content:"+"; font-size:20px; color:var(--vn-accent); font-family:'Inter',sans-serif; }
.vn-faq details[open] summary::after { content:"−"; }
.vn-faq summary:hover { color:var(--vn-accent); }
.vn-faq details p { margin-top:12px; color:var(--vn-muted); line-height:1.6; }

/* Calendar grid (vuosikalenteri) */
.vn-calendar-grid {
	max-width:1200px; margin:40px auto; padding:0 24px;
	display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:24px;
}
.vn-month { background:var(--vn-card); border:1px solid var(--vn-line); border-radius:8px; padding:16px; }
.vn-monthtitle { font-size:14px; font-weight:600; letter-spacing:0.05em; margin-bottom:12px; color:var(--vn-ink); font-family:'Inter',sans-serif; }
.vn-monthtable { width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; font-size:13px; }
.vn-monthtable td { padding:3px 4px; vertical-align:middle; border:none; }
.vn-monthtable .vn-mc-wd { color:var(--vn-muted); width:14px; text-align:center; font-size:11px; text-transform:uppercase; }
.vn-monthtable .vn-mc-d { width:24px; text-align:right; padding-right:6px; font-weight:500; }
.vn-monthtable .vn-mc-name { color:var(--vn-accent); font-size:11px; }
.vn-monthtable .vn-mc-name a { color:var(--vn-accent); text-decoration:none; }
.vn-monthtable .vn-mc-w { width:24px; text-align:center; }
.vn-monthtable .vn-mc-w a {
	background:var(--vn-line); padding:2px 5px; border-radius:3px;
	font-size:11px; color:var(--vn-muted); text-decoration:none; font-weight:600;
}
.vn-monthtable .vn-mc-w a:hover { background:var(--vn-accent); color:var(--vn-bg); }
.vn-monthtable tr.vn-sat { color:var(--vn-muted); }
.vn-monthtable tr.vn-sun, .vn-monthtable tr.vn-holiday { background:rgba(214,69,69,0.05); }
.vn-monthtable tr.vn-today { background:rgba(214,69,69,0.15); font-weight:600; }

/* Footer */
.vn-footer {
	border-top:1px solid var(--vn-line);
	padding:30px 24px; margin-top:60px; text-align:center;
	font-family:'Inter',sans-serif; font-size:12px; color:var(--vn-muted);
}
.vn-footer a { color:var(--vn-muted); margin:0 6px; text-decoration:none; }
.vn-footer a:hover { color:var(--vn-accent); }

/* Accessibility: skip-link ja screen-reader-text (WP:n core) */
.screen-reader-text,
.skip-link {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden;
	margin: -1px; padding: 0;
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto; height: auto;
	display: block;
	background: var(--vn-bg);
	color: var(--vn-ink);
	padding: 12px 20px;
	left: 12px; top: 12px;
	z-index: 100000;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
}