/* Kalendarz świąt typowych i nietypowych — builds on the redesign theme tokens. */

.hc {
	--hc-line: 1.5px solid var(--color-ink, #25231f);
	--hc-soft: var(--color-ink-soft, #5e5a53);
	padding-bottom: clamp(56px, 8vw, 110px);
}

.hc-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.hc [hidden] {
	display: none !important;
}

/* Hero ----------------------------------------------------------------- */

.hc-hero {
	padding-block: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 32px);
	text-align: center;
}

.hc-hero__title {
	margin-bottom: 10px;
	font-size: clamp(2rem, 4vw, 3.2rem);
}

.hc-hero__lead {
	margin: 0 auto;
	color: var(--hc-soft);
	font-size: 1.08rem;
}

/* Keep whatever the browser scrolls to (links, keyboard focus) clear of the
   sticky site header; element offsets below are relative to this. */
html {
	scroll-padding-top: 110px;
}

/* Month panel ----------------------------------------------------------- */

/* Wider than the theme's 1180px container, so holiday names in the grid
   fit as whole words. */
@media (min-width: 900px) {
	.hc-hero.site-container,
	.hc-app.site-container {
		width: min(calc(100% - 40px), 1400px);
	}
}


.hc-month {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 32px);
	align-items: start;
	margin-bottom: 40px;
}

.hc-month__calendar {
	padding: clamp(16px, 2.4vw, 28px);
	border: var(--hc-line);
	border-radius: var(--radius-md, 24px);
	background: var(--color-white, #fff);
	box-shadow: var(--shadow, 0 16px 40px rgba(81, 64, 44, 0.1));
}

@media (min-width: 1280px) {
	.hc-month__calendar {
		position: sticky;
		top: 112px;
	}
}

.hc-month__header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
}

.hc-month__heading {
	display: grid;
	justify-items: center;
	gap: 2px;
	text-align: center;
}

.hc-month__title {
	margin: 0;
	outline-offset: 4px;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.hc-month__arrow {
	display: inline-grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border: var(--hc-line);
	border-radius: 50%;
	background: var(--color-paper, #fffdf8);
	color: var(--color-ink, #25231f);
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hc-month__arrow .hc-icon {
	width: 22px;
	height: 22px;
}

a.hc-month__arrow:hover,
a.hc-month__arrow:focus-visible {
	background: var(--color-yellow, #f4cc63);
	box-shadow: 2px 3px 0 var(--color-ink, #25231f);
	transform: translateY(-1px);
}

.hc-month__arrow.is-disabled {
	opacity: 0.25;
}

/* "wróć do dziś" keeps its space when hidden, so the grid doesn't jump. */
.hc-today-button {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 2px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hc-soft);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hc-today-button:hover,
.hc-today-button:focus-visible {
	background: var(--color-cream, #fffaf0);
	color: var(--color-ink, #25231f);
}

.hc-today-button .hc-icon {
	width: 15px;
	height: 15px;
}

.hc-app:not(.is-ready) .hc-today-button,
.hc-today-button.is-hidden {
	visibility: hidden;
}

.hc-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
}

.hc-grid__weekday {
	padding-bottom: 4px;
	color: var(--hc-soft);
	font-size: 0.75rem;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hc-grid__weekday.is-weekend {
	color: #b9473a;
}

.hc-day {
	position: relative;
	display: flex;
	/* Six week rows have to fit under the sticky site header on a laptop,
	   so the row height follows the viewport height. */
	min-height: clamp(54px, calc((100vh - 300px) / 6), 92px);
	padding: 6px;
	flex-direction: column;
	gap: 3px;
	border-radius: 12px;
	background: var(--color-cream, #fffaf0);
	transition: background 200ms ease, box-shadow 200ms ease;
}

.hc-day.is-blank {
	background: transparent;
}

.hc-day.is-weekend {
	background: #fbf3e6;
}

.hc-day.is-off {
	background:
		repeating-linear-gradient(-45deg, rgba(239, 193, 198, 0.5) 0 6px, rgba(248, 223, 225, 0.5) 6px 12px);
}

.hc-day__number {
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.5;
}

.hc-day.is-weekend .hc-day__number,
.hc-day.is-off .hc-day__number {
	color: #b9473a;
}

.hc-day.is-today {
	box-shadow: inset 0 0 0 2px var(--color-ink, #25231f);
}

.hc-day.is-today .hc-day__number {
	display: inline-grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-coral, #f07d6d);
	color: var(--color-ink, #25231f);
}

.hc-day.is-flash {
	box-shadow: inset 0 0 0 2px var(--color-ink, #25231f), 0 0 0 4px var(--color-yellow, #f4cc63);
}

.hc-pill {
	display: block;
	padding: 2px 5px;
	border: 1px solid rgba(37, 35, 31, 0.55);
	border-radius: 7px;
	background: var(--c);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	/* Whole words only: a hyphenated holiday name is hard to read. */
	hyphens: manual;
	overflow-wrap: normal;
	transition: transform 140ms ease;
}

.hc-pill__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hc-pill:hover,
.hc-pill:focus-visible {
	transform: translateY(-1px);
	border-color: var(--color-ink, #25231f);
}

/* Event list ------------------------------------------------------------ */

.hc-events {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-event {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	padding: 16px;
	border: var(--hc-line);
	border-radius: 20px;
	background: var(--color-white, #fff);
	scroll-margin-top: 10px;
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.hc-event.is-flash {
	box-shadow: 5px 6px 0 var(--c);
	transform: translateY(-2px);
}

.hc-event__date {
	display: grid;
	width: 50px;
	height: 56px;
	place-content: center;
	border: var(--hc-line);
	border-radius: 14px;
	background: var(--c);
	line-height: 1;
	text-align: center;
}

.hc-event__day {
	font-family: var(--font-display, sans-serif);
	font-size: 1.45rem;
	font-weight: 700;
}

.hc-event__weekday {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.hc-event__title:focus {
	outline: none;
}

.hc-event__title:focus-visible {
	outline: 2px solid var(--color-ink, #25231f);
	outline-offset: 3px;
}

.hc-event__title {
	margin: 2px 0 6px;
	font-size: 1.18rem;
	line-height: 1.15;
}




.hc-related {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.hc-related__link {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px 12px 8px 8px;
	border: var(--hc-line);
	border-radius: 14px;
	background: var(--color-mint-light, #dcefe8);
	text-decoration: none;
	transition: box-shadow 160ms ease, transform 160ms ease;
}

.hc-related__link:hover,
.hc-related__link:focus-visible {
	box-shadow: 2px 3px 0 var(--color-ink, #25231f);
	transform: translateY(-1px);
}

.hc-related__thumb {
	display: grid;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 10px;
	background: var(--color-white, #fff);
	object-fit: cover;
}

.hc-related__text {
	display: grid;
	min-width: 0;
	line-height: 1.3;
}

.hc-related__kind {
	color: #2f6b5a;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hc-related__title {
	font-size: 0.92rem;
	font-weight: 700;
}

.hc-related__note {
	margin-top: 2px;
	color: var(--color-ink, #25231f);
	font-size: 0.8rem;
	line-height: 1.35;
}

/* Free blog posts: plain links under the product, so the paid pack leads. */
.hc-free {
	margin-top: 12px;
	font-size: 0.88rem;
}

.hc-free__label {
	color: var(--hc-soft);
	font-weight: 700;
}

.hc-free__list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.hc-free__list li {
	position: relative;
	padding-left: 16px;
	line-height: 1.45;
}

.hc-free__list li + li {
	margin-top: 3px;
}

.hc-free__list li::before {
	position: absolute;
	left: 0;
	color: var(--color-coral, #f07d6d);
	content: "→";
	font-weight: 800;
}

.hc-free__list a {
	text-decoration-color: rgba(37, 35, 31, 0.35);
}

.hc-free__list a:hover,
.hc-free__list a:focus-visible {
	text-decoration-color: currentColor;
}

/* One-month view (only when the script is running) --------- */

.hc-app.is-ready .hc-month:not(.is-active) {
	display: none;
}

.hc-app.is-ready .hc-month.is-active {
	animation: hc-in 260ms ease both;
}

@keyframes hc-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* SEO / about text ------------------------------------------------------ */

.hc-about {
	padding-top: clamp(30px, 5vw, 60px);
}

.hc-about .entry-content h2 {
	margin-top: 1.6em;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
}

/* Responsive ------------------------------------------------------------ */

/* Laptops: keep the whole month on screen. */
@media (min-width: 900px) and (max-height: 860px) {
	.hc-month__calendar {
		top: 104px;
		padding: 16px 20px 20px;
	}

	.hc-month__header {
		margin-bottom: 8px;
	}

	.hc-month__title {
		font-size: 1.8rem;
	}

	.hc-month__arrow {
		width: 40px;
		height: 40px;
	}

	.hc-day {
		min-height: clamp(48px, calc((100vh - 290px) / 6), 92px);
		padding: 4px 5px;
	}

	.hc-day__number {
		line-height: 1.3;
	}

	.hc-pill {
		padding: 1px 4px;
		font-size: 0.62rem;
		line-height: 1.15;
	}
}

@media (max-width: 1279px) {
	.hc-month {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phones and small tablets: day cells are too narrow for names, so only the
   month header stays and the holiday cards below act as the list. */
@media (max-width: 899px) {
	.hc-grid {
		display: none;
	}

	/* The month header stays pinned under the site header while the cards
	   scroll past, so the arrows are always at hand. Focused links and
	   cards must land below both headers (63 + 9 + ~85 px). */
	html {
		scroll-padding-top: 170px;
	}

	/* …but a month itself starts right under the site header. */
	.hc-month {
		scroll-margin-top: -94px;
	}

	.hc-month__calendar {
		position: sticky;
		z-index: 5;
		top: 72px;
		padding: 10px 12px;
	}

	/* The site header's soft shadow would fall on the pinned month header
	   and make its top edge look cut off; its border is enough here. */
	.site-header,
	.site-header.is-scrolled {
		box-shadow: none;
	}

	/* Hide the cards scrolling through the gap under the site header. */
	.hc-month__calendar::before {
		position: absolute;
		right: -2px;
		/* Offsets are from the padding box; +1px keeps the top border visible. */
		bottom: calc(100% + 1px);
		left: -2px;
		height: 9px;
		background: var(--color-cream, #fffaf0);
		content: "";
	}

	.hc-month__header {
		margin-bottom: 0;
	}

}

@media (max-width: 640px) {
	.hc-month__calendar {
		padding: 14px 10px;
	}

	.hc-month__arrow {
		width: 40px;
		height: 40px;
	}

	.hc-event {
		padding: 14px;
		gap: 12px;
	}

	.hc-event__date {
		width: 48px;
		height: 54px;
	}

	.hc-event__day {
		font-size: 1.35rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	.hc-app.is-ready .hc-month.is-active {
		animation: none;
	}
}