/* Look and feel of the library theme (BibliotekaDostepnaCyfrowo/website,
   wordpress/theme/biblioteka-zukowo):
   Montserrat, its palette, headings, buttons, cards and footer. */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--black: #000021;
	--blue: #015d96;
	--white: #fff;
	--gray-light: #f5f5f5;
	--gray: #ebebea;
	--small: 0.8125rem;
	--large: 1.125rem;
	--x-large: 1.375rem;
	--xx-large: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
	--huge: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
	--width: 1280px;
	--text-width: 768px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

html {
	scrollbar-gutter: stable;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--black);
	background: var(--white);
}

h1,
h2,
h3 {
	margin: 0 0 1rem;
	color: var(--black);
	font-weight: 900;
	line-height: 1.2;
}

h1 {
	font-size: var(--huge);
}

h2 {
	font-size: var(--xx-large);
}

h3 {
	font-size: var(--x-large);
}

p,
ul,
ol {
	margin: 0 0 1rem;
}

a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -10rem;
	z-index: 10;
	padding: 0.75rem 1.25rem;
	background: var(--white);
	color: var(--black);
	font-weight: 600;
}

.skip-link:focus {
	top: 1rem;
}

.wrap {
	max-width: calc(var(--width) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.lead {
	max-width: var(--text-width);
	font-size: var(--large);
}

.button {
	display: inline-block;
	padding: 1rem 1.75rem;
	border: 2px solid var(--blue);
	border-radius: 6px;
	background: var(--blue);
	color: var(--white);
	font: inherit;
	font-size: var(--large);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	border-color: var(--black);
	background: var(--black);
	color: var(--white);
}

.button:focus-visible {
	outline-color: var(--black);
}

.button--outline {
	background: transparent;
	color: var(--blue);
}

.button--outline:hover {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--white);
}

/* The wordmark: "BIBLIOTEKA" over a letter-spaced "DOSTĘPNA CYFROWO" of the
   same width. Real text, so it stays sharp and screen readers read it as words.
   Its size is set by the font-size of the element that holds it. */
.wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.wordmark-top {
	color: var(--black);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.wordmark-bottom {
	margin-top: 0.3em;
	color: var(--blue);
	font-size: 0.355em;
	font-weight: 600;
	letter-spacing: 0.435em;
	/* The last letter's spacing would stick out past "BIBLIOTEKA". */
	margin-right: -0.435em;
}

/* Header */

.site-header {
	position: relative;
	z-index: 1;
	background: var(--white);
	box-shadow: 0 10px 20px #0000001a;
}

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 3rem;
	min-height: 100px;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.site-header .wordmark {
	font-size: 1.95rem;
}

.site-nav {
	margin-right: auto;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--black);
	font-size: var(--large);
	font-weight: 600;
	text-decoration: none;
	/* Blue fill rising from the middle on hover, as on the library sites. */
	background-image: linear-gradient(var(--blue), var(--blue));
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% 0%;
	transition: background-size 0.3s ease-out, color 0.3s ease-out;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--white);
	background-size: 100% 100%;
	text-decoration: underline;
}

.site-nav li:first-child a {
	margin-left: -1.25rem;
}

.site-header .button {
	padding: 0.75rem 1.25rem;
	font-size: 1rem;
}

/* Phones: wordmark and button on one row, the menu in a full-width row below. */
@media (max-width: 52rem) {
	.site-header .wrap {
		justify-content: space-between;
		gap: 0.5rem 1rem;
		min-height: 0;
	}

	.site-nav {
		order: 1;
		flex-basis: 100%;
		margin: 0;
	}

	.site-nav ul {
		justify-content: space-between;
	}

	.site-nav a {
		padding: 0.5rem 0.25rem;
		font-size: 0.9375rem;
	}

	.site-nav li:first-child a {
		margin-left: -0.25rem;
	}

	.site-header .button {
		padding: 0.6rem 1rem;
		font-size: 0.9375rem;
	}
}

/* Sections */

.section {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.section--gray {
	background: var(--gray-light);
}

.section-head {
	max-width: var(--text-width);
	margin: 0 auto 2.5rem;
	text-align: center;
}

.section-head .lead {
	margin-left: auto;
	margin-right: auto;
}

.kicker {
	margin: 0 0 0.5rem;
	color: var(--blue);
	font-size: var(--small);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem 4rem;
}

.hero-logo {
	width: clamp(13rem, 22vw, 18rem);
	height: auto;
}

@media (max-width: 52rem) {
	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-logo {
		display: none;
	}
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 2rem;
}

.cards + .actions {
	justify-content: center;
	margin-top: 3rem;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	padding: 2.5rem;
	background: var(--white);
	box-shadow: 0 25px 50px -12px #00000040;
}

.card h3 {
	font-size: var(--large);
}

.card p:last-child {
	margin-bottom: 0;
}

.card-label {
	margin-bottom: 0.75rem;
	font-size: var(--small);
	font-weight: 600;
}

/* Pilot in numbers: four equal columns (2×2 on phones), a small label
   above each number, as in "Biblioteka w liczbach". */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: end;
	gap: 2rem 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

@media (max-width: 48rem) {
	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.stats li {
	text-align: center;
	font-weight: 600;
}

.stats strong {
	display: block;
	color: var(--blue);
	font-size: var(--huge);
	font-weight: 900;
	line-height: 1.1;
	white-space: nowrap;
}

.stats strong span {
	display: block;
	color: var(--black);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.note {
	max-width: var(--text-width);
	margin-left: auto;
	margin-right: auto;
	font-size: var(--small);
	text-align: center;
}

.center {
	text-align: center;
}

/* Sign-up: the big e-mail form on a blue band */

.signup {
	background: var(--blue);
	color: var(--white);
}

.signup h2 {
	color: var(--white);
}

.signup-form {
	max-width: 56rem;
	margin: 0 auto;
}

.signup-form label[for="email"] {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--large);
	font-weight: 700;
}

.signup-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.signup-form input[type="email"] {
	flex: 1 1 20rem;
	min-width: 0;
	min-height: 4.5rem;
	padding: 0 1.25rem;
	border: 2px solid var(--white);
	border-radius: 6px;
	background: var(--white);
	color: var(--black);
	font: inherit;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
}

.signup-form input[type="email"]::placeholder {
	color: #5c5c70;
}

.signup a {
	color: var(--white);
}

.signup :focus-visible {
	outline: 3px solid var(--white);
	outline-offset: 3px;
}

.signup-form .button {
	flex: 0 0 auto;
	min-height: 4.5rem;
	padding: 0 2.25rem;
	border-color: var(--white);
	background: var(--white);
	color: var(--blue);
	font-size: 1.25rem;
	font-weight: 700;
}

.signup-form .button:hover {
	border-color: var(--black);
	background: var(--black);
	color: var(--white);
}

@media (max-width: 40rem) {
	.signup-form .button {
		flex-basis: 100%;
	}
}

.consent {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-top: 1.5rem;
}

.consent input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--black);
}

.signup .note {
	max-width: none;
	margin-top: 1rem;
	text-align: left;
}

/* Visually hidden, and kept out of the accessibility tree by aria-hidden on
   the wrapper. Only bots fill it. */
.trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Contact */

.contact-email {
	display: inline-block;
	margin: 0 0 1.5rem;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	font-weight: 800;
	overflow-wrap: anywhere;
}

/* Footer, laid out like the library sites' footer */

.site-footer {
	padding: 50px 0;
	background: var(--gray);
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem 4rem;
}

.site-footer .wordmark {
	margin-bottom: 1.25rem;
	font-size: 1.95rem;
}

.footer-contact {
	margin: 0;
	font-size: var(--small);
	font-weight: 700;
}

.footer-contact a {
	color: var(--black);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav {
	padding-top: 52px;
}

.footer-nav a {
	display: inline-block;
	padding: 0.2rem 0;
	color: var(--black);
	font-size: var(--large);
	font-weight: 700;
	text-decoration: none;
}

.footer-nav a:hover {
	text-decoration: underline;
}

.footer-links {
	padding-top: 52px;
	font-size: var(--small);
	font-weight: 700;
}

.footer-links a {
	color: var(--black);
	text-decoration: none;
}

.footer-links a:hover {
	text-decoration: underline;
}

.footer-links li + li {
	margin-top: 0.5rem;
}

.copyright {
	margin: 2.5rem 0 0;
	font-size: var(--small);
}

@media (max-width: 40rem) {
	.footer-nav,
	.footer-links {
		padding-top: 0;
	}
}

/* Text pages (privacy policy, thank-you, errors) */

.page {
	max-width: calc(var(--text-width) + 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}

.page h2 {
	margin-top: 2.5rem;
	font-size: var(--x-large);
}