/*
 * OKF Kladno – moderní vrstva vzhledu nad šablonou Live Wire.
 *
 * Mění jen typografii, barvy, rozestupy, zaoblení a stíny. Rozvržení stránky, HTML
 * a obsah zůstávají beze změny. Načítá se až za style.css šablony a za styly pluginu
 * ligy (functions.php, live_wire_okf_modern_style). Odstraněním tohoto souboru se web
 * vrátí do původní podoby.
 */

:root {
	--okf-navy-950: #0a1430;
	--okf-navy-900: #0f1f4b;
	--okf-navy-800: #072b72; /* původní barva odkazů */
	--okf-navy-700: #1b3a7a;
	--okf-navy-600: #2d4a83; /* původní barva hlavičky a tabulek */
	--okf-accent: #1f6fe5;   /* blízko původnímu #006dd2 */
	--okf-accent-soft: #e9f1fd;
	--okf-text: #1f2937;
	--okf-muted: #5b6475;
	--okf-line: #e3e8f0;
	--okf-surface: #ffffff;
	--okf-surface-2: #f5f7fb;
	--okf-radius: 14px;
	--okf-radius-sm: 8px;
	--okf-shadow: 0 1px 2px rgba(10, 20, 48, .08), 0 12px 32px rgba(10, 20, 48, .18);
	--okf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* =Základ
-------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}
body {
	background: radial-gradient(1200px 520px at 50% 0, #1b3266 0%, rgba(27, 50, 102, 0) 70%) no-repeat, var(--okf-navy-950);
	border-bottom: 0;
	color: var(--okf-text);
	font: 400 1rem/1.65 var(--okf-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--okf-font);
	letter-spacing: -.01em;
}
a,
a:visited {
	color: var(--okf-navy-800);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a:hover,
a:focus {
	color: var(--okf-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:focus-visible {
	outline: 3px solid rgba(31, 111, 229, .45);
	outline-offset: 2px;
}
img {
	border: 0;
	padding: 0;
}
abbr[title] {
	border-bottom: 0;
	text-decoration: none;
}
::selection {
	background: var(--okf-accent);
	color: #fff;
}

/* =Hlavička
-------------------------------------------------------------- */
#header {
	background: linear-gradient(180deg, #34558f 0%, var(--okf-navy-700) 100%);
	border-top: 0;
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
#header .wrap {
	background: transparent;
}
#branding {
	padding: 1.5em 0 1.35em;
}
#site-title {
	font: 800 2rem/1.05 var(--okf-font);
	letter-spacing: -.02em;
}
#site-title a,
#site-title a:visited {
	color: #fff;
	text-decoration: none;
}
#site-title a:hover {
	color: #fff;
	opacity: .9;
}
#site-description {
	color: rgba(255, 255, 255, .78);
	font: italic 400 1rem/1.4 var(--okf-font);
	letter-spacing: .01em;
	padding-top: .45em;
}

/* Vyhledávání v hlavičce */
#sidebar-header .widget {
	margin-bottom: 0;
}
#sidebar-header .search-form input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	box-shadow: none;
	box-sizing: border-box;
	color: #fff;
	font: 400 .95rem/1.4 var(--okf-font);
	padding: .65em 1.15em;
	width: 100%;
}
#sidebar-header .search-form input[type="text"]:hover {
	background: rgba(255, 255, 255, .18);
}
#sidebar-header .search-form input[type="text"]:focus {
	background: #fff;
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(31, 111, 229, .45);
	color: var(--okf-text);
	outline: none;
}

/* =Menu
-------------------------------------------------------------- */
#menu-secondary {
	margin-top: 1.25em;
}
#menu-secondary div.menu {
	background: var(--okf-navy-600);
	border-radius: var(--okf-radius) var(--okf-radius) 0 0;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
#menu-secondary li a {
	color: rgba(255, 255, 255, .88);
	font: 600 .72rem/1.3 var(--okf-font);
	letter-spacing: .09em;
}
#menu-secondary li a:hover,
#menu-secondary li.sfHover a,
#menu-secondary li.current-menu-item a {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	text-decoration: none;
}
/* Rozbalovací podmenu jako karta */
#menu-secondary li ul {
	border-radius: 0 0 var(--okf-radius-sm) var(--okf-radius-sm);
	box-shadow: 0 12px 28px rgba(10, 20, 48, .28);
	overflow: hidden;
}
#menu-secondary li li a,
#menu-secondary li.sfHover li a,
#menu-secondary li li.sfHover li a {
	background: #fff;
	border-bottom: 1px solid var(--okf-line);
	border-left: 3px solid transparent;
	color: var(--okf-navy-800);
	letter-spacing: .05em;
}
#menu-secondary li li a:hover,
#menu-secondary li li.sfHover a,
#menu-secondary li li.sfHover li a:hover,
#menu-secondary li li.current-menu-item a {
	background: var(--okf-accent-soft);
	border-left: 3px solid var(--okf-accent);
	color: var(--okf-navy-900);
}

/* Mobilní menu (TinyNav) */
select.tinynav {
	-webkit-appearance: none;
	appearance: none;
	background: var(--okf-navy-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1em center;
	border: 0;
	border-radius: var(--okf-radius-sm);
	color: #fff;
	font: 600 1rem/1.3 var(--okf-font);
	padding: .8em 2.6em .8em 1em;
}

/* =Obsah
-------------------------------------------------------------- */
#main .wrap {
	background: var(--okf-surface);
	border-radius: 0 0 var(--okf-radius) var(--okf-radius);
	box-shadow: var(--okf-shadow);
	padding-bottom: .5em;
	padding-top: 1.75em;
}
#content {
	text-align: left;
}
.hentry {
	border-bottom: 1px solid var(--okf-line);
	margin-bottom: 2em;
	padding-bottom: 2em;
}
.singular .hentry {
	border-bottom: 0;
}
.entry-title {
	color: var(--okf-navy-800);
	font: 700 1.2rem/1.3 var(--okf-font);
	letter-spacing: .02em;
	margin-bottom: .45em;
}
.singular .entry-title {
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: 1.2;
}
.entry-title a,
.entry-title a:visited {
	color: var(--okf-navy-800);
}
.entry-title a:hover {
	color: var(--okf-accent);
	text-decoration: none;
}
.byline,
.entry-meta {
	color: var(--okf-muted);
	font: 400 .85rem/1.5 var(--okf-font);
}
.byline {
	margin-bottom: 1.1em;
}
.byline a {
	font-weight: 500;
}
.entry-content,
.entry-summary {
	font-size: 1rem;
}
.entry-content p,
.entry-summary p {
	margin-bottom: 1em;
}
.entry-content img,
.entry-summary img,
.hentry .live-wire-thumbnail {
	border-radius: var(--okf-radius-sm);
	box-shadow: 0 1px 2px rgba(10, 20, 48, .08), 0 4px 12px rgba(10, 20, 48, .08);
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--okf-navy-900);
	line-height: 1.3;
}
.entry-content blockquote {
	background: var(--okf-surface-2);
	border-left: 4px solid var(--okf-accent);
	border-radius: 0 var(--okf-radius-sm) var(--okf-radius-sm) 0;
	color: var(--okf-text);
	font-style: normal;
}

/* Odkaz „Celý článek“ */
.entry-summary > a:last-of-type {
	align-items: center;
	background: var(--okf-accent-soft);
	border-radius: 999px;
	color: var(--okf-navy-800);
	display: inline-flex;
	font: 600 .85rem/1 var(--okf-font);
	gap: .4em;
	margin-top: .35em;
	padding: .6em 1em;
}
.entry-summary > a:last-of-type::after {
	content: "→";
	transition: transform .15s ease;
}
.entry-summary > a:last-of-type:hover {
	background: var(--okf-navy-800);
	color: #fff;
	text-decoration: none;
}
.entry-summary > a:last-of-type:hover::after {
	transform: translateX(3px);
}

/* Nadpisy výpisů (rubriky, vyhledávání) */
.loop-meta .loop-title {
	color: var(--okf-navy-900);
	font-weight: 800;
}

/* =Tlačítka, stránkování, navigace mezi články
-------------------------------------------------------------- */
.pagination .page-numbers,
.page-links a,
.loop-nav .previous,
.loop-nav .next,
a.more-link,
input[type="submit"],
#respond #submit {
	background: var(--okf-navy-800);
	border: 0;
	border-radius: var(--okf-radius-sm);
	box-shadow: 0 1px 2px rgba(10, 20, 48, .15);
	color: #fff;
	font: 600 .8rem/1.2 var(--okf-font);
	letter-spacing: .04em;
	padding: .75em 1.1em;
}
.pagination .page-numbers:hover,
.page-links a:hover,
.loop-nav a:hover span,
a.more-link:hover,
input[type="submit"]:hover,
#respond #submit:hover {
	background: var(--okf-accent);
	color: #fff;
	text-decoration: none;
}
.pagination .current {
	background: var(--okf-accent);
}
.pagination .dots,
.pagination .dots:hover {
	background: transparent;
	box-shadow: none;
	color: var(--okf-muted);
}

/* =Formuláře (komentáře, vyhledávání v obsahu)
-------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	border: 1px solid #cfd6e2;
	border-radius: var(--okf-radius-sm);
	font-family: var(--okf-font);
	padding: .6em .8em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--okf-accent);
	box-shadow: 0 0 0 3px rgba(31, 111, 229, .2);
	outline: none;
}

/* =Postranní panel
-------------------------------------------------------------- */
#sidebar-primary .widget {
	background: var(--okf-surface-2);
	border: 1px solid var(--okf-line);
	border-radius: var(--okf-radius);
	box-shadow: none;
	margin: 0 0 1.25em;
	padding: 0;
}
#sidebar-primary .widget .widget-wrap {
	padding: 1.1em 1.2em 1.2em;
}
.widget {
	color: var(--okf-text);
	font-size: .92rem;
}
.widget-title,
#sidebar-primary .widget-title {
	border-bottom: 2px solid var(--okf-line);
	color: var(--okf-navy-900);
	font: 700 .78rem/1.35 var(--okf-font);
	letter-spacing: .09em;
	margin: 0 0 .9em;
	padding-bottom: .65em;
	position: relative;
	text-transform: uppercase;
}
.widget-title::after {
	background: var(--okf-accent);
	bottom: -2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 2.5em;
}
.widget ul li {
	border-bottom: 1px solid var(--okf-line);
	padding: .35em 0;
}

/* =Tabulky ligy (články i widgety)
-------------------------------------------------------------- */
body table.leaguemanager {
	background: #fff;
	border: 1px solid var(--okf-line);
	border-collapse: separate;
	border-radius: var(--okf-radius-sm);
	border-spacing: 0;
	font: 400 .875rem/1.35 var(--okf-font);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	width: 100%;
}
body table.leaguemanager th {
	background: var(--okf-navy-600);
	border: 0;
	color: #fff;
	font: 600 .72rem/1.2 var(--okf-font);
	letter-spacing: .05em;
	padding: .7em .5em;
	text-transform: uppercase;
}
body table.leaguemanager td {
	border: 0;
	border-top: 1px solid var(--okf-line);
	padding: .55em .5em;
	vertical-align: middle;
}
body table.leaguemanager tr.alternate td {
	background: var(--okf-surface-2);
}
body table.leaguemanager tr:hover td {
	background: var(--okf-accent-soft);
}
body table.leaguemanager td.rank {
	color: var(--okf-navy-900);
	font-weight: 700;
	padding: .55em .5em;
	text-align: center;
	width: 2em;
}
body table.leaguemanager td:nth-child(2) {
	color: var(--okf-muted);
	font-size: .8em;
}
body table.leaguemanager td a,
body table.leaguemanager td a:visited {
	color: var(--okf-navy-800);
	font-weight: 600;
}
body table.leaguemanager td:last-child {
	color: var(--okf-navy-900);
	font-weight: 700;
}
body table.leaguemanager tr.homeTeam td {
	background: #fff7e0;
}

/* Tabulka ve widgetu */
.leaguemanager_widget {
	width: 100%;
}
body .leaguemanager_widget table.leaguemanager {
	font-size: .8rem;
	margin: 0;
}
body .leaguemanager_widget table.leaguemanager th,
body .leaguemanager_widget table.leaguemanager td {
	border-bottom: 0;
	padding: .45em .4em;
}
body .leaguemanager_widget table.leaguemanager th {
	background: var(--okf-navy-600);
}

/* Karta týmu (?team=): plovoucí bloky se uzavřou, aby do karty nevnikla navigace článků
   (vada i původního webu); odsazení pro logo, které žádný tým nemá, se ruší. */
div.teampage {
	display: flow-root;
	margin-bottom: 1.5em;
}
div.teampage .matches {
	margin-top: .5em;
	min-width: 45%;
}
div.teampage dl dt {
	color: var(--okf-muted);
	font-weight: 600;
}
div.teampage .matches > div {
	background: var(--okf-surface-2);
	border: 1px solid var(--okf-line);
	border-radius: var(--okf-radius-sm);
	margin-bottom: 1em;
	padding: .9em 1.1em;
}
div.teampage .matches h4 {
	color: var(--okf-navy-900);
	font-size: .78rem;
	letter-spacing: .08em;
	margin-top: 0;
	text-transform: uppercase;
}

/* =Patička
-------------------------------------------------------------- */
#footer {
	background: transparent;
	color: rgba(255, 255, 255, .65);
	font: 400 .85rem/1.5 var(--okf-font);
	padding-bottom: 2em;
	padding-top: 1.25em;
}
#footer a,
#footer a:visited {
	color: #9cc2ff;
}
#footer a:hover {
	color: #fff;
}

/* =Desktop
-------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	#site-title {
		font-size: 2.75rem;
	}
	#site-description {
		font-size: 1.1rem;
	}
	#sidebar-header {
		padding-top: 1.9em;
	}
}

/* =Mobil
-------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	#header .wrap {
		padding-left: 0;
		padding-right: 0;
	}
	#site-title {
		font-size: 1.75rem;
	}
	#sidebar-header .widget {
		float: none;
		width: 100%;
	}
	#menu-secondary {
		margin-top: 0;
	}
	#menu-secondary div.menu {
		background: transparent;
		box-shadow: none;
	}
	select.tinynav {
		background-color: var(--okf-navy-600);
		margin: .75em 0;
	}
	#main .wrap {
		border-radius: var(--okf-radius);
		padding-top: 1.25em;
	}
	.entry-title {
		font-size: 1.1rem;
	}
	.singular .entry-title {
		font-size: 1.35rem;
	}
	/* Široká tabulka v článku se posouvá do strany místo přetečení */
	.entry-content table.leaguemanager {
		display: block;
		font-size: .8rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.entry-content table.leaguemanager th,
	.entry-content table.leaguemanager td {
		padding: .55em .45em;
		white-space: nowrap;
	}
}
