/*
Theme Name: Can-j-servis
Theme URI: https://github.com/Marmu-cz/canjservis
Description: Vlastní jednoduchý motiv webu can-j-servis.cz místo Astry. Dodává jen kostru stránky a základní styly; header, patičku, obsah stránek a všechny funkce kreslí plugin Can-j-servis — obsah (canjservis-obsah).
Version: 1.0.0
Author: Marmu.cz
Author URI: https://marmu.cz
Text Domain: canjservis
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Update URI: false
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================================
   CO TADY JE A PROČ

   Motiv je schválně jednoduchý a dělaný jen pro tenhle web: kostra
   stránky, kontejner a základní styly holých prvků (písmo, nadpisy,
   odstavce, pole, tlačítka). Nic víc - všechno ostatní kreslí plugin.

   Základní styly jsou výchozí vzhled, se kterým počítá CSS pluginu
   (homepage, kontakt, servis, portál, ceník): na řadě míst ho přebíjí
   přes !important (PROJECT_KNOWLEDGE.md, sekce 11), jinde na něm staví
   (výška polí 40 px, písmo 16/24, 1rem = 14,592 px pod 922 px…).
   Hodnoty ani specificitu selektorů proto neměnit bez měření - posunulo
   by se, které pravidlo pluginu vyhraje.

   Po každé změně tady změřit: docs/sablona-mereni/ (0 posunutých prvků).
   ===================================================================== */

:root {
	--sablona-modra: #046bd2;        /* odkazy a tlačítka mimo obsah pluginu (v obsahu je plugin přebíjí) */
	--sablona-modra-tmava: #045cb4;  /* totéž při najetí */
	--sablona-nadpis: #1e293b;
	--sablona-text: #334155;
	--sablona-ramecek: #D1D5DB;
	--sablona-cervena: #E0382D;      /* brandová červená - tlačítko nahoru */
}

/* =====================================================================
   1. ZÁKLAD PRVKŮ
   ===================================================================== */

html { box-sizing: border-box; font-size: 100%; -webkit-text-size-adjust: 100%; }
*, :after, :before { box-sizing: inherit; }

address, blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul {
	border: 0;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	margin: 0;
	background: #fff;
	color: var(--sablona-text);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body:not(.logged-in) { position: relative; }

/* Pod 922 px se zmenšuje celé písmo (1rem = 14,592 px) - obsah pluginu s tím počítá. */
@media (max-width: 921px) {
	html { font-size: 91.2%; }
}

a { color: var(--sablona-modra); background-color: transparent; transition: all .2s linear; }
a, a:focus, a:hover, a:visited { text-decoration: none; }
a:hover, a:focus { color: var(--sablona-modra-tmava); }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
a:focus-visible { outline-style: dotted; outline-color: inherit; outline-width: thin; }

b, strong { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: 80%; }
img { border: 0; height: auto; max-width: 100%; vertical-align: middle; }
iframe { max-width: 100%; }
hr { box-sizing: content-box; height: 1px; border: 0; background-color: #ccc; margin-bottom: 1.5em; }

p { margin-bottom: 1.75em; }
ul { margin: 0 0 1.5em 3em; list-style: disc; }
ol { margin: 0 0 1.5em 3em; list-style: decimal; }

/* Nadpisy. Selektor „.entry-content :where(hN), hN" je převzatý i se svou
   specificitou (0,1,0 uvnitř obsahu) - pravidla pluginu se proti ní měří. */
h1, h2, h3, h4, h5, h6 { clear: both; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--sablona-nadpis); }
.entry-content :where(h1, h2, h3, h4, h5, h6) { clear: none; margin-bottom: 20px; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--sablona-nadpis); }
.entry-content :where(h1), h1 { font-size: 36px; font-size: 2.25rem; line-height: 1.4em; }
.entry-content :where(h2), h2 { font-size: 30px; font-size: 1.875rem; line-height: 1.3em; }
.entry-content :where(h3), h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.3em; }
.entry-content :where(h4), h4 { font-size: 20px; font-size: 1.25rem; line-height: 1.2em; }
.entry-content :where(h5), h5 { font-size: 18px; font-size: 1.125rem; line-height: 1.2em; }
.entry-content :where(h6), h6 { font-size: 16px; font-size: 1rem; line-height: 1.25em; }
@media (max-width: 921px) {
	.entry-content :where(h1), h1 { font-size: 30px; font-size: 1.875rem; }
	.entry-content :where(h2), h2 { font-size: 25px; font-size: 1.5625rem; }
	.entry-content :where(h3), h3 { font-size: 20px; font-size: 1.25rem; }
}

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 2px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); clip: auto !important; color: #21759b; display: block; font-size: .875rem; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

/* =====================================================================
   2. FORMULÁŘE A TLAČÍTKA
   Formuláře pluginu si většinu vzhledu nastavují samy, ale počítají
   s tímhle základem (výška polí 40 px, písmo 16/24, zaoblení 4 px…).
   ===================================================================== */

button, input, select, textarea {
	color: #808285;
	font: inherit;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
	vertical-align: baseline;
}
button, select { text-transform: none; }
button, input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; }
button[disabled], input[disabled] { cursor: default; }
input { outline: none; }
input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }
input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: var(--sablona-modra); background-color: var(--sablona-modra); box-shadow: none; }
fieldset { border: 1px solid var(--sablona-ramecek); margin: 0; padding: 30px; border-radius: 4px; }
legend { border: 0; padding: 0; }
fieldset legend { margin-bottom: 1.5em; padding: 0 .5em; }
label, legend { color: var(--sablona-nadpis); font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; }

/* Textová pole. Datum a číslo si nechávají vzhled prohlížeče (bez appearance: none). */
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
	border: 1px solid var(--sablona-ramecek);
	background: #fff;
	box-sizing: border-box;
	transition: all .2s linear;
}
input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea { -webkit-appearance: none; }
input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type=tel], input[type=date], select, textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 4px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	color: #475569;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}
input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type=tel], input[type=date], select { height: 40px; }
input[type="date"] { border: 1px solid var(--sablona-ramecek); background: #F0F5FA; }
textarea { overflow: auto; }
select { padding: 6px 10px; }
input:focus, textarea:focus { border-style: dotted; border-color: inherit; border-width: thin; }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
	background-color: #fff;
	border-color: #046BD2;
	box-shadow: none;
	outline: none;
	color: #475569;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	border: 0 solid var(--sablona-modra);
	border-radius: 4px;
	background-color: var(--sablona-modra);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	color: #fff;
	padding: 15px 30px;
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1em;
}
button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:focus, input[type="submit"]:hover {
	color: #fff;
	background-color: var(--sablona-modra-tmava);
	border-color: var(--sablona-modra-tmava);
	outline: 0;
}
@media (max-width: 921px) {
	button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 14px 28px; }
}
@media (max-width: 544px) {
	button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 12px 24px; }
}

/* =====================================================================
   3. KOSTRA STRÁNKY (header.php, page.php, footer.php)
   Header a patička pluginu leží mimo #page (wp_body_open / wp_footer).
   ===================================================================== */

/* Flex sloupec jako dosud - drží stejné chování okrajů obsahu (margin collapse)
   na hranici #page. Roztažení na výšku okna (min-height: 100vh) záměrně NENÍ:
   patička je mimo #page, takže by na krátké stránce zbyla bílá plocha. */
#page { position: relative; display: flex; flex-direction: column; }

/* Kontejner: obsah 1200 px + 2 × 20 px odsazení. */
.cjs-sablona-kontejner { max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 922px) {
	.cjs-sablona-kontejner { max-width: 1240px; display: flex; }
}

#primary { width: 100%; }

.entry-content { word-wrap: break-word; }
.entry-content p { margin-bottom: 1.6em; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content ul, .entry-content ol { padding: revert; margin: revert; padding-left: 20px; }
.entry-content::after { display: table; clear: both; content: ''; }

/* =====================================================================
   4. VLASTNÍ STRÁNKY MOTIVU (hledání, archiv, 404, výpis)
   Na webu skoro nejsou vidět - obsah dělá plugin. Proto jen jednoduchý
   sloupec v barvách webu, bez blogových karet a drobečkové navigace.
   ===================================================================== */

.cjs-sablona-stranka { padding: 60px 0 80px; max-width: 800px; }
.cjs-sablona-stranka-nadpis { margin-bottom: 24px; }
.cjs-sablona-stranka-nadpis span { color: var(--sablona-cervena); }
.cjs-sablona-stranka .entry-content a:not(.cjs-sablona-tlacitko) { color: var(--sablona-cervena); text-decoration: underline; }
.cjs-sablona-stranka blockquote { margin: 0 0 1.6em; padding: 4px 0 4px 20px; border-left: 4px solid var(--sablona-cervena); font-style: italic; }
.cjs-sablona-stranka .entry-content h2, .cjs-sablona-stranka .entry-content h3 { margin-top: 1.4em; }
.cjs-sablona-seznam { list-style: none; margin: 0 0 32px; padding: 0; }
.cjs-sablona-seznam li { padding: 16px 0; border-bottom: 1px solid #E0E0E0; }
.cjs-sablona-seznam a { color: var(--sablona-nadpis); font-weight: 600; font-size: 1.125rem; }
.cjs-sablona-seznam a:hover, .cjs-sablona-seznam a:focus { color: var(--sablona-cervena); }
.cjs-sablona-seznam p { margin: 4px 0 0; }
.cjs-sablona-strankovani .nav-links { display: flex; gap: 16px; margin-bottom: 32px; }
.cjs-sablona-hledani { display: flex; gap: 10px; max-width: 480px; margin: 0 0 32px; }
.cjs-sablona-hledani input[type="search"] { flex: 1 1 auto; height: 48px; border-radius: 45px; padding: 12px 20px; }
/* Tlačítko v barvách webu (stejný gradient jako tlačítka pluginu). */
.cjs-sablona-tlacitko,
.cjs-sablona-hledani button {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 45px;
	background: linear-gradient(90deg, #E0382D 51.75%, #BB2530 100%);
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}
.cjs-sablona-tlacitko:hover, .cjs-sablona-tlacitko:focus,
.cjs-sablona-hledani button:hover, .cjs-sablona-hledani button:focus { color: #fff; background: #BB2530; }

/* =====================================================================
   5. TLAČÍTKO „PŘEJÍT NAHORU" (js/nahoru.js, objeví se po 300 px)
   Stejné jako dosud: kulaté 32 px, brandová červená, vpravo dole.
   ===================================================================== */

.cjs-sablona-nahoru {
	display: none;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 99;
	width: 32px;
	height: 32px;
	font-size: 15px;
	line-height: 2.1;
	text-align: center;
	cursor: pointer;
	color: #fff;
	background-color: var(--sablona-cervena);
	border-radius: 45px;
	outline: inherit;
}
.cjs-sablona-nahoru:focus { border-style: dotted; border-color: inherit; border-width: thin; }
.cjs-sablona-nahoru svg { position: relative; height: .6em; width: 1.6em; margin-left: 0; vertical-align: middle; transform: translate(0, -20%) rotate(180deg); fill: currentColor; }
/* Pod 923 px je šipka vyšší a pod 922 px užší - hranice o pixel posunuté
   jsou záměrné, tak to na webu vypadalo vždycky. */
@media (max-width: 922px) {
	.cjs-sablona-nahoru svg { height: .85em; }
}
@media (max-width: 921px) {
	.cjs-sablona-nahoru svg { width: 1em; }
}