/* ==========================================================================
   MatNet-IT — warstwa wizualna nad motywem Twenty Seventeen
   1. Tokeny        2. Typografia     3. Nagłówek i hero
   4. Nawigacja     5. Układ          6. Komponenty treści
   7. Blog          8. Stopka         9. Responsywność
   ========================================================================== */

/* 1. TOKENY ---------------------------------------------------------------- */
:root {
	--mn-brand:        #0067b8;
	--mn-brand-dark:   #00518f;
	--mn-brand-tint:   #eef5fb;
	--mn-accent:       #e0a800;
	--mn-accent-tint:  #fff8e6;

	--mn-ink:          #12212e;
	--mn-body:         #3f4b57;
	--mn-muted:        #6c7885;
	--mn-line:         #e3e9ef;
	--mn-surface:      #f6f9fc;
	--mn-white:        #fff;

	--mn-radius:       6px;
	--mn-radius-lg:    10px;
	--mn-shadow:       0 1px 2px rgba(18,33,46,.06), 0 4px 16px rgba(18,33,46,.05);

	--mn-measure:      44rem;   /* szerokość kolumny czytelnej */
	--mn-wrap:         1140px;  /* szerokość kontenera */
}

/* 2. TYPOGRAFIA ------------------------------------------------------------ */
body,
button, input, select, textarea {
	color: var(--mn-body);
}

body { color: #3f4b57; font-size: 1.0625rem; line-height: 1.75; }

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .site-title {
	color: var(--mn-ink);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.22;
}

.entry-content h2 { font-size: 1.75rem; margin: 2.4em 0 .7em; }
.entry-content h3 { font-size: 1.28rem; margin: 2em 0 .5em; font-weight: 650; }
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

/* akcent pod nagłówkami sekcji */
.entry-content h2::after {
	background: var(--mn-brand);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin-top: .5rem;
	width: 46px;
}

.entry-content p { margin: 0 0 1.4em; }

.entry-content ul,
.entry-content ol { margin: 0 0 1.6em 1.35em; padding: 0; }
.entry-content li { margin-bottom: .55em; padding-left: .15em; }
.entry-content li > ul,
.entry-content li > ol { margin-top: .5em; margin-bottom: .5em; }

.entry-content ul { list-style: none; margin-left: 0; }
.entry-content ul > li { padding-left: 1.5em; position: relative; }
.entry-content ul > li::before {
	background: var(--mn-brand);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: .25em;
	position: absolute;
	top: .72em;
	width: 6px;
}
.entry-content ul ul > li::before { background: #a9bccd; }

.entry-content a {
	box-shadow: inset 0 -1px 0 rgba(0,103,184,.35);
	color: var(--mn-brand);
	text-decoration: none;
	transition: box-shadow .15s ease, color .15s ease;
}
.entry-content a:hover,
.entry-content a:focus {
	box-shadow: inset 0 -2px 0 var(--mn-brand);
	color: var(--mn-brand-dark);
}
/* .entry-content a ma wyzsza specyficznosc niz .mn-btn i nadpisywalo kolor tekstu
   (niebieski na niebieskim = przycisk czytelny dopiero po najechaniu).
   Kolory przyciskow ustawiamy wiec na .entry-content a.mn-btn. */
.entry-content a.mn-btn,
.entry-content a.mn-btn:hover,
.entry-content a.mn-btn:focus {
	box-shadow: none;
	color: #fff;
}
.entry-content a.mn-btn-alt {
	color: #0067b8;
	color: var(--mn-brand);
}
.entry-content a.mn-btn-alt:hover,
.entry-content a.mn-btn-alt:focus { color: #fff; }

.entry-content strong { color: var(--mn-ink); font-weight: 650; }

.entry-content code {
	background: var(--mn-surface);
	border: 1px solid var(--mn-line);
	border-radius: 4px;
	color: #0b4f7a;
	font-size: .92em;
	padding: .12em .4em;
}
.entry-content pre {
	background: #12212e;
	border-radius: var(--mn-radius);
	color: #e8eef4;
	font-size: .92rem;
	line-height: 1.6;
	margin: 0 0 1.6em;
	overflow-x: auto;
	padding: 1em 1.2em;
}
.entry-content pre code {
	background: none; border: 0; color: inherit; padding: 0;
}

/* 3. NAGŁÓWEK I HERO ------------------------------------------------------- */
.site-header { background: var(--mn-white); }

/* Obraz nagłówka to jasny diagram techniczny, a logo jest ciemne —
   przyciemniający overlay ukryłby logo. Stosujemy jasną zasłonę,
   która zmienia diagram w delikatne tło i utrzymuje kontrast tekstu. */
.custom-header-media::before {
	background: -webkit-linear-gradient(top,
		rgba(255,255,255,.60) 0%,
		rgba(255,255,255,.44) 32%,
		rgba(255,255,255,.78) 80%,
		rgba(255,255,255,.94) 100%);
	background: linear-gradient(180deg,
		rgba(255,255,255,.60) 0%,
		rgba(255,255,255,.44) 32%,
		rgba(255,255,255,.78) 80%,
		rgba(255,255,255,.94) 100%);
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header {
	height: 52vh;
	max-height: 480px;
	min-height: 340px;
}

.twentyseventeen-front-page .site-branding,
.home.blog .site-branding { padding-bottom: 3.2em; }

/* Tresc hero wysrodkowana i z lokalna biala poswiata - tlo jest animowane
   i zbyt zajete, zeby ciemny tekst byl na nim czytelny bez podbicia. */
.twentyseventeen-front-page .site-branding .wrap,
.home.blog .site-branding .wrap { text-align: center; }

.twentyseventeen-front-page .site-branding::before,
.home.blog .site-branding::before {
	background: radial-gradient(ellipse 55% 130% at 50% 55%,
		rgba(255,255,255,.97) 0%,
		rgba(255,255,255,.85) 45%,
		rgba(255,255,255,0) 100%);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: -1.5em;
	z-index: -1;
}

/* opis witryny jako podtytul hero (motyw domyslnie go przycina) */
.title-tagline-hidden.home .site-description {
	clip: auto;
	clip-path: none;
	color: #12212e;
	color: var(--mn-ink);
	display: block;
	font-size: clamp(1.15rem, .85rem + 1.3vw, 1.75rem);
	font-weight: 600;
	height: auto;
	letter-spacing: -.01em;
	line-height: 1.35;
	margin: .7em auto 0;
	max-width: 24ch;
	opacity: 1;
	position: static;
	text-shadow: 0 1px 2px rgba(255,255,255,.98), 0 0 22px rgba(255,255,255,.95);
	width: auto;
}

/* Strzalka przewijania nachodzila na pasek menu jako niebieska kropka - zbedna. */
body .site-header .menu-scroll-down { display: none; }

/* Nagłówek na podstronach — niski pasek zamiast dużego zdjęcia.
   Motyw pozycjonuje .navigation-top absolutnie na dole nagłówka i kompensuje to
   marginesem dokładanym z JavaScriptu. Po ukryciu zdjęcia menu nachodziłoby na logo,
   dlatego na podstronach układamy nagłówek i menu normalnym przepływem. */
body:not(.home) .custom-header-media { display: none; }
body:not(.home) .custom-header {
	background: #fff;
	background: var(--mn-white);
	margin-bottom: 0 !important;
}
body:not(.home) .site-branding { padding: 1.15em 0; }
body:not(.home) .custom-logo-link img { max-height: 48px; }

@media screen and (min-width: 48em) {
	/* :not(.site-navigation-fixed) zostawia motywowi przyklejanie menu przy przewijaniu */
	body:not(.home) .navigation-top:not(.site-navigation-fixed) {
		bottom: auto;
		left: auto;
		position: static;
		right: auto;
	}
	body:not(.home) .site-branding { margin-bottom: 0 !important; }
}

/* tytuły stron i wpisów — motyw robi z nich drobne wersaliki,
   przywracamy normalną hierarchię nagłówków */
.page .panel-content .entry-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title,
body .site-content .entry-title,
body .site-content .page-title {
	color: var(--mn-ink);
	font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-transform: none;
}

/* 4. NAWIGACJA ------------------------------------------------------------- */
.navigation-top {
	background: var(--mn-white);
	border-top: 1px solid var(--mn-line);
	border-bottom: 1px solid var(--mn-line);
}
.navigation-top .wrap { max-width: var(--mn-wrap); }

.main-navigation a { color: var(--mn-ink); font-weight: 550; }
.main-navigation a:hover,
.main-navigation a:focus { color: var(--mn-brand); }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a { color: var(--mn-brand); }

.menu-toggle { border-radius: var(--mn-radius); font-weight: 600; }

/* Układ poziomy dopiero od progu, na którym motyw pokazuje pełne menu.
   Poniżej 48em działa hamburger motywu i nie wolno ruszać `display`. */
@media screen and (min-width: 48em) {
	.navigation-top { font-size: .875rem; }
	.navigation-top .wrap { padding: 0 2em; }

	.navigation-top .main-navigation > div > ul {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		justify-content: center;
	}
	.navigation-top .main-navigation > div > ul > li { white-space: nowrap; }

	.main-navigation a {
		letter-spacing: .005em;
		padding: 1.05em .72em;
		transition: color .15s ease;
	}

	.main-navigation > div > ul > li::after {
		background: var(--mn-brand);
		bottom: 0;
		content: "";
		height: 2px;
		left: .72em;
		position: absolute;
		right: .72em;
		transform: scaleX(0);
		transition: transform .18s ease;
	}
	.main-navigation > div > ul > li:hover::after,
	.main-navigation > div > ul > li.current-menu-item::after,
	.main-navigation > div > ul > li.current-menu-ancestor::after { transform: scaleX(1); }

	/* podmenu */
	.main-navigation ul ul {
		background: var(--mn-white);
		border: 1px solid var(--mn-line);
		border-radius: var(--mn-radius);
		box-shadow: var(--mn-shadow);
		min-width: 15rem;
		padding: .35em 0;
	}
	.main-navigation ul ul li { border: 0; }
	.main-navigation ul ul a { padding: .55em 1.1em; white-space: nowrap; width: auto; }
	.main-navigation ul ul a:hover,
	.main-navigation ul ul a:focus { background: var(--mn-brand-tint); }
	.main-navigation ul ul::before,
	.main-navigation ul ul::after { display: none; }

	/* wyróżniona pozycja Portal B2B */
	.main-navigation li.mn-nav-cta { margin-left: .6rem; }
	.main-navigation li.mn-nav-cta > a {
		background: #0067b8;
		background: var(--mn-brand);
		border-radius: var(--mn-radius);
		color: #fff;
		padding: .55em 1.1em;
	}
	.main-navigation li.mn-nav-cta > a:hover,
	.main-navigation li.mn-nav-cta > a:focus { background: var(--mn-brand-dark); color: #fff; }
	.main-navigation li.mn-nav-cta::after { display: none; }

	.site-navigation-fixed.navigation-top { box-shadow: 0 2px 12px rgba(18,33,46,.08); }
}

@media screen and (min-width: 48em) and (max-width: 1180px) {
	.navigation-top { font-size: .84rem; }
	.main-navigation a { padding-left: .55em; padding-right: .55em; }
	.main-navigation > div > ul > li::after { left: .55em; right: .55em; }
}

@media screen and (min-width: 48em) and (max-width: 1010px) {
	.navigation-top { font-size: .8rem; }
	.navigation-top .wrap { padding: 0 1em; }
	.main-navigation a { padding-left: .42em; padding-right: .42em; }
	.main-navigation > div > ul > li::after { left: .42em; right: .42em; }
}

/* 5. UKŁAD ----------------------------------------------------------------- */
.site-content .wrap { max-width: var(--mn-wrap); }

/* jedna kolumna wszędzie — spójny rytm stron, wpisów i archiwum */
body .site-content .entry-header,
body .site-content .entry-content,
body .site-content .page-header,
body .site-content .entry-footer,
body .panel-content .entry-header,
body .panel-content .entry-content,
body .site-content .mn-blog-intro,
body.blog:not(.has-sidebar) #primary article,
body.archive:not(.has-sidebar) #primary article,
body.search:not(.has-sidebar) #primary article,
body #comments {
	float: none;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--mn-measure);
	width: auto;
}

.site-content { padding: 3em 0 1em; }

body .site-content .entry-header,
body.page.page-one-column .entry-header,
body.archive.page-one-column:not(.has-sidebar) .page-header { margin-bottom: 1.5em; }
.entry-title, .page-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }

body.singular .site-content .entry-header,
body.page .site-content .entry-header {
	border-bottom: 1px solid #e3e9ef;
	border-bottom-color: var(--mn-line);
	padding-bottom: 1em;
}
body .site-content .entry-content { margin-top: 0; }

/* 6. KOMPONENTY TREŚCI ----------------------------------------------------- */
.mn-lead {
	border-left: 3px solid var(--mn-brand);
	color: var(--mn-ink);
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0 0 2.2em;
	padding: .15em 0 .15em 1.15em;
}

.mn-crumbs {
	border-bottom: 1px solid var(--mn-line);
	color: var(--mn-muted);
	font-size: .85rem;
	margin-bottom: 1.8em;
	padding-bottom: .7em;
}
.mn-crumbs a { box-shadow: none; color: var(--mn-muted); text-decoration: none; }
.mn-crumbs a:hover { box-shadow: none; color: var(--mn-brand); }
.mn-crumbs .separator { color: #b9c4cf; margin: 0 .45em; }
.mn-crumbs .last { color: var(--mn-ink); }

.mn-btn {
	background: #0067b8;
	background: var(--mn-brand);
	border: 1px solid var(--mn-brand);
	border-radius: var(--mn-radius);
	color: #fff;
	display: inline-block;
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.3;
	margin: .3em .45em .3em 0;
	padding: .78em 1.5em;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.mn-btn:hover, .mn-btn:focus {
	background: var(--mn-brand-dark);
	border-color: var(--mn-brand-dark);
	color: #fff;
}
.mn-btn:active { transform: translateY(1px); }
.mn-btn-alt { background: transparent; color: var(--mn-brand); }
.mn-btn-alt:hover, .mn-btn-alt:focus { background: var(--mn-brand); color: #fff; }
.mn-btn-lg { font-size: 1.02rem; padding: .9em 1.8em; }

.mn-cta {
	background: var(--mn-surface);
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius-lg);
	margin: 3em 0 1em;
	padding: 1.9em 2em;
}
.mn-cta h2 { font-size: 1.4rem; margin: 0 0 .5em; }
.mn-cta h2::after { display: none; }
.mn-cta p { margin: 0 0 .9em; }
.mn-cta p:last-child { margin-bottom: 0; }
.mn-cta-meta { color: var(--mn-muted); font-size: .9rem; margin-top: 1.2em !important; }
.mn-cta-inline { margin: 1.9em 0; }

.mn-note {
	background: var(--mn-accent-tint);
	border: 1px solid #f0dca8;
	border-left: 3px solid var(--mn-accent);
	border-radius: var(--mn-radius);
	font-size: .97rem;
	margin: 1.9em 0;
	padding: 1.1em 1.35em;
}
.mn-note p:last-child { margin-bottom: 0; }

.mn-table {
	border: 1px solid var(--mn-line);
	border-collapse: separate;
	border-radius: var(--mn-radius);
	border-spacing: 0;
	font-size: .95rem;
	margin: 1.9em 0;
	overflow: hidden;
	width: 100%;
}
.mn-table th,
.mn-table td {
	border: 0;
	border-bottom: 1px solid var(--mn-line);
	padding: .8em 1em;
	text-align: left;
	vertical-align: top;
}
.mn-table thead th {
	background: var(--mn-surface);
	color: var(--mn-ink);
	font-weight: 650;
	white-space: nowrap;
}
.mn-table tbody tr:last-child td { border-bottom: 0; }
.mn-table tbody tr:hover td { background: #fafcfe; }

.mn-table-scroll { margin: 1.9em 0; overflow-x: auto; }
.mn-table-scroll .mn-table { margin: 0; }

/* szerokie elementy wychodza poza kolumne czytelna na duzych ekranach */
@media screen and (min-width: 62em) {
	.entry-content > .mn-table,
	.entry-content > .mn-table-scroll {
		margin-left: -3rem;
		margin-right: -3rem;
		width: calc(100% + 6rem);
	}
}

/* 7. BLOG ------------------------------------------------------------------ */
.mn-blog-intro { margin-bottom: 3em; padding: 0; }

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	border-bottom: 1px solid var(--mn-line);
	margin-bottom: 2.2em;
	padding-bottom: 2.2em;
}
.blog .site-main > article:last-of-type,
.archive .site-main > article:last-of-type { border-bottom: 0; }

body.blog .site-content .entry-title,
body.archive .site-content .entry-title,
body.search .site-content .entry-title {
	font-size: 1.42rem;
	letter-spacing: -.012em;
	line-height: 1.3;
}
.blog .entry-title a,
.archive .entry-title a { box-shadow: none; color: var(--mn-ink); text-decoration: none; }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--mn-brand); }

body.blog .site-content .entry-header,
body.archive .site-content .entry-header,
body.search .site-content .entry-header {
	border-bottom: 0;
	margin-bottom: .45em;
	padding-bottom: 0;
}

/* Blog jednoautorski, a archiwa autora sa wylaczone — motyw renderuje
   "przez" z pustym linkiem /author/, wiec podpis chowamy. */
.entry-meta .byline { display: none; }
.entry-meta { color: #6c7885; color: var(--mn-muted); font-size: .82rem; letter-spacing: .02em; }
.entry-meta a { box-shadow: none; color: var(--mn-muted); }
.entry-meta a:hover { color: var(--mn-brand); }

.blog .entry-footer,
.archive .entry-footer { border: 0; padding: 0; }

.navigation.pagination { border-top: 1px solid var(--mn-line); padding-top: 1.5em; }
.nav-links .page-numbers {
	border-radius: var(--mn-radius);
	padding: .35em .75em;
}
.nav-links .page-numbers.current { background: var(--mn-brand); color: #fff; }

/* 8. STOPKA ---------------------------------------------------------------- */
.site-footer {
	background: var(--mn-surface);
	border-top: 1px solid var(--mn-line);
	margin-top: 4em;
}
.site-footer .wrap { max-width: var(--mn-wrap); padding-top: 2.5em; padding-bottom: 2.5em; }
.site-info { color: var(--mn-muted); font-size: .87rem; }
.site-info a { color: var(--mn-muted); }
.site-info a:hover { color: var(--mn-brand); }

/* 9. RESPONSYWNOŚĆ --------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.mn-cta { padding: 1.4em 1.3em; }
	.mn-btn { display: block; margin-right: 0; text-align: center; }
	.mn-cta-meta .mn-btn { display: inline-block; }

	.mn-table { display: block; overflow-x: auto; white-space: nowrap; }
	.mn-table th, .mn-table td { white-space: normal; min-width: 9rem; }

	.has-header-image.twentyseventeen-front-page .custom-header { height: 56vh; min-height: 320px; }
	.title-tagline-hidden.home .site-description { font-size: 1.05rem; max-width: 26ch; }
}