/* ==========================================================================
   02-base.css — Základní styly, typografie, globální reset
   seoprakticky.cz
   ==========================================================================
   Základní nastylování elementů: nadpisy, odstavce, tabulky, kód, HR, a-tag.
   Tyto styly platí globálně pro celý web.
   ========================================================================== */


/* ── Nadpisy ────────────────────────────────────────────────────────────── */

h1 {
  text-align: center;
  font-size: 45px;
  margin-top: 40px;
  margin-bottom: 40px;
}

h2 {
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  margin-bottom: 40px;
}

hr {
  display: none;
}


/* ── Obsah článku ───────────────────────────────────────────────────────── */

#content-wrapper p,
#content-wrapper ul,
#content-wrapper ol,
.basic-description ul,
.basic-description ol,
.product {
  font-size: 17px;
}

#content-wrapper p {
  margin-bottom: 25px;
  line-height: 1.8em;
}

/* Výjimka: pk-* komponenty uvnitř #content-wrapper/.basic-description
   nesmí dostat 25px margin-bottom — každá komponenta si spravuje spacing sama. */
#content-wrapper .pk-callout__li-text p,
#content-wrapper .pk-callout__li-text,
#content-wrapper .pk-callout__p,
#content-wrapper .pk-callout__check,
.basic-description .pk-callout__li-text p,
.basic-description .pk-callout__li-text,
.basic-description .pk-callout__p,
.basic-description .pk-callout__check {
  margin-bottom: 0 !important;
  line-height: var(--leading-relaxed);
}


/* ── Odkazy ─────────────────────────────────────────────────────────────── */

a {
  text-decoration: underline;
}


/* ── Globální tabulka (styl01 původní) ──────────────────────────────────── */
/* Poznámka: toto je globální fallback. Pro komponenty použijte .pk-table-head
   nebo .pk-table-simple ze souboru 06-tables.css */

table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  /* min-height: 50vh; — ODSTRANĚNO: způsobovalo obrovské bílé plochy
     na detail stránkách produktů (tabulka Kategorie: SEO knihy apod.) */
}

thead {
  background-color: #f0f0f0;
  color: #333;
}

th {
  font-weight: bold;
  text-align: center;
  padding: 12px 15px;
  border-bottom: 2px solid #ddd;
}

td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
  cursor: default;
}

td code {
  padding: 2px 5px;
  background-color: #e8e8e8;
  border-radius: 3px;
  font-size: 0.9em;
}


/* ── Kód & pre bloky ────────────────────────────────────────────────────── */

.code-container {
  background-color: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-left: 4px solid #007bff;
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #24292e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  white-space: pre-wrap;
}

.code-container code {
  background: none;
  padding: 0;
  color: inherit;
}

pre {
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 1.5em;
  margin: 1.5em 0;
  overflow-x: auto;
  line-height: 1.6;
  font-family: var(--font-code);
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow var(--transition-slow);
}

.language-html {
  display: block;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  overflow-x: auto;
  background-color: #282c34;
  color: #abb2bf;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.language-html .token.tag,
.language-html .token.attr-name {
  color: #e06c75;
}

.language-html .token.attr-value {
  color: #98c379;
}

.language-html .line-number {
  color: #5c6370;
  margin-right: 15px;
  user-select: none;
}

.code-wrapper::before {
  content: "Html";
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #5c6370;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 10;
}


/* ── Layout breakpointy (globální container) ─────────────────────────────── */

@media (min-width: 1440px) {
  .container { width: 1418px; }
}

@media (min-width: 1418px) {
  .breadcrumbs                              { width: 1200px; }
  .index-content-wrapper                   { width: 1418px; }
  .ordering-process .content-wrapper-in    { width: 1418px; }
  .type-search .content-wrapper-in         { width: 1418px; }
  .type-manufacturers-listing .content-wrapper-in { width: 1200px; }
  .type-manufacturer-detail .content-wrapper-in   { width: 1200px; }
  .type-posts-listing .content-wrapper-in  { width: 1000px; }
  .type-post .content-wrapper-in           { width: 1000px; }
  .type-page .content-wrapper-in           { width: 1000px; }
  .type-glossary .content-wrapper-in       { width: 1000px; }
  .next-to-carousel-banners                { width: 1200px; }
  .type-category .content                  { width: 1200px; }
  .p-detail-inner                          { width: 1418px; }
  .p-detail-tabs-wrapper                   { width: 1000px; }
}


/* ── Speciální štítky & utility ─────────────────────────────────────────── */

/* Sleva / flag žlutá */
.flag.flag-discount { background-color: #efe41d; }
.flags-extra .flag .price-standard,
.flags-extra .flag .price-save { font-size: 12px; color: black; }

/* Štítek "Doporučeno" – černý */
.badge-recommended-dark {
  background-color: #000000;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  display: inline-block;
  line-height: 1;
  border-radius: var(--radius-none);
}

/* Tlačítko objednávka – černé (legacy) */
.button-objednavka-seo {
  background-color: #000000;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px;
  cursor: pointer;
  border: none;
  border-radius: 1px;
  font-family: Arial, sans-serif;
  transition-duration: 0.4s;
}

.button-objednavka-seo:hover {
  background-color: #555555;
  color: white;
}


/* ==========================================================================
   HOMEPAGE — obsah pod produkty: zúžení na 1000px (shodné s type-post)
   ==========================================================================
   Platí pouze na širokých monitorech (min-width: 1418px), kde je rozdíl
   mezi 1418px (type-index) a 1000px (type-post) viditelný.
   Na menších obrazovkách se chování nemění.

   Komponenty s barevným pozadím přes celou šířku (.cs-wrap, .rv-wrap)
   zůstávají full-width — zužuje se pouze jejich vnitřní obsah
   přes .cs-inner a .rv-inner.
   ========================================================================== */

@media (min-width: 1418px) {

  /* Textový obsah — nadpisy, odstavce, seznamy.
     Bez > aby se zachytily i odstavce zanořené o úroveň hlouběji (Shoptet wrappery).
     Výjimky pro komponenty, které si spravují vlastní layout, jsou níže. */
  .type-index #content-wrapper h1,
  .type-index #content-wrapper h2,
  .type-index #content-wrapper h3,
  .type-index #content-wrapper p,
  .type-index #content-wrapper ol,
  .type-index #content-wrapper ul {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Výjimky: odstavce a seznamy uvnitř komponent nesmí dostat max-width 1000px,
     protože by rozbily jejich vnitřní layout (gridy, flex, atd.) */
  .type-index .pk-stats p,
  .type-index .pk-stats ul,
  .type-index .pk-stats ol,
  .type-index .pk-steps p,
  .type-index .pk-steps ul,
  .type-index .pk-steps ol,
  .type-index .pk-usp--3 p,
  .type-index .pk-usp--3 ul,
  .type-index .pk-usp--3 ol,
  .type-index .pk-social p,
  .type-index .pk-social ul,
  .type-index .pk-social ol,
  .type-index .pk-faq p,
  .type-index .pk-faq ul,
  .type-index .pk-faq ol,
  .type-index .pk-banner-lite p,
  .type-index .pk-banner-lite ul,
  .type-index .pk-banner-lite ol,
  .type-index .effects p,
  .type-index .effects ul,
  .type-index .effects ol,
  .type-index .cs-wrap p,
  .type-index .cs-wrap ul,
  .type-index .cs-wrap ol,
  .type-index .cs-wrap h1,
  .type-index .cs-wrap h2,
  .type-index .cs-wrap h3,
  .type-index .rv-wrap p,
  .type-index .rv-wrap ul,
  .type-index .rv-wrap ol,
  .type-index .rv-wrap h1,
  .type-index .rv-wrap h2,
  .type-index .rv-wrap h3 {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
  }

  /* Kompaktní bloky — centrování na 1000px */
  .type-index .pk-stats,
  .type-index .pk-steps,
  .type-index .pk-usp--3,
  .type-index .pk-social,
  .type-index .pk-faq,
  .type-index .author-card {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Banner lite */
  .type-index .pk-banner-lite {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Effects grid — zúžení vnitřní mřížky
     (sekce .effects nemá vlastní pozadí, lze zúžit celou) */
  .type-index .effects {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

  /* cs-wrap a rv-wrap jsou full-width sekce s barevným pozadím —
     zužujeme pouze jejich vnitřní container, pozadí zůstává přes celou šířku */
  .type-index .cs-inner {
    max-width: 1000px;
  }

  .type-index .rv-inner {
    max-width: 1000px;
  }

  /* Emoji tlačítka — vycentrování */
  .type-index .emoji-button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

}