/* ==========================================================================
   GLOBAL.CSS
   Fonty, CSS proměnné (barvy, velikosti písma, spacing) a základní reset.
   Tento soubor je sdílený napříč celým webem (šablona, eshop, články).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font faces (Roboto)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_100.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_300.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_400.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_500.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_700.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_italic_900.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_100.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_300.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_400.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_500.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_700.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_content/fonts/roboto/roboto_900.woff) format('woff');
}

/* --------------------------------------------------------------------------
   CSS Custom Properties (proměnné)
   Pojmenování podle účelu, ne podle konkrétního odstínu/hodnoty.
   -------------------------------------------------------------------------- */
:root {

  /* Brand colors - modrá je hlavní brand barva, zelená doplňková */
  --color-primary: #087dcd;
  --color-accent: #02914f;
  --color-accent-hover: #5da547;
  --color-chip-border: #ff8700; /* oranžová - chipList (kategorie, rubriky) */

  /* Text colors */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-muted: #9f9f9f;

  /* Borders & backgrounds */
  --color-border: #b8b8b8;
  --color-bg-light: #f0f0f0;
  --color-bg-footer: #e0e0e0;
  --color-white: #ffffff;

  /* Status colors */
  --color-error: #ff0000;
  --color-link-special: #ff741e;

  /* Message severity colors - použito v systému zpráv (messageBox, toast, notificationBar) */
  --color-warning: var(--color-chip-border); /* #ff8700 */
  --color-ok: var(--color-accent);           /* #02914f */
  --color-info: var(--color-primary);        /* #087dcd */
  --color-question: #7c4dcf;

  /* Message severity - pastelové pozadí (info záměrně bez pozadí, zůstává bílé) */
  --color-error-bg: #fff0f0;
  --color-warning-bg: #fff2e0;
  --color-ok-bg: #e4f5ec;
  --color-question-bg: #efeafb;

  /* Font sizes - podle účelu, minimum pro běžný text je --font-size-body */
  --font-size-small: 0.9375rem;   /* 15px - drobné poznámky, copyright (zatím nepoužito) */
  --font-size-body: 1rem;         /* 16px - základní text, menu, odkazy */
  --font-size-medium: 1.25rem;    /* 20px - horní menu (desktop), zvýrazněný text */
  --font-size-h2: 1.5rem;         /* 24px - podnadpisy, zápatí kontakt (desktop) */
  --font-size-h1: 2rem;           /* 32px - hlavní nadpis stránky */

  /* Spacing scale - základní stupnice, použít jako vodítko, ne přísné pravidlo */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* Shadows */
  --shadow-hover: 0 1px 6px rgba(0, 0, 0, 0.06);

  /* Layout */
  --content-max-width: 1550px;
  --sidebar-width: 12.5rem;       /* 200px při výchozím nastavení fontu */
  --sidebar-width-max: 200px;     /* pojistka proti extrémně zvětšenému fontu */

  /* Header */
  --header-height: 103px;
}

/* Sidebar - užší varianta na středních šířkách (970-1279px), viz web.css */
@media screen and (min-width: 970px) and (max-width: 1279px) {
  :root {
    --sidebar-width: 10.625rem;     /* 170px při výchozím nastavení fontu */
    --sidebar-width-max: 170px;
  }
}

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

html {
  font-size: 100%; /* respektuje uživatelské nastavení velikosti písma v prohlížeči */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, tahoma, arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   .defaultText - běžný textový obsah (články, popisy, contentWrapper).
   Záměrně NENÍ globální na tagy p/a/h1 - menu, zápatí a tlačítka mají
   vlastní barvy/styly a tato třída by je jen zbytečně přebíjela.
   Použití: <div class="contentWrapper defaultText"> nebo obdobně
   v modulu článků.
   -------------------------------------------------------------------------- */
.defaultText {
  font-size: var(--font-size-body);
  font-weight: 300;
  color: var(--color-text);
}

.defaultText p,
.defaultText ul,
.defaultText ol {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.defaultText ul,
.defaultText ol {
  padding-left: var(--space-lg);
}

.defaultText a:link,
.defaultText a:visited,
.defaultText a:active {
  color: var(--color-primary);
  text-decoration: none;
}

.defaultText a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.defaultText h1,
.defaultText h2,
.defaultText h3,
.defaultText h4,
.defaultText h5,
.defaultText h6 {
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
}

.defaultText h1 {
  font-size: var(--font-size-h1);
}

.defaultText h2 {
  font-size: var(--font-size-h2);
}

.defaultText b,
.defaultText strong {
  font-weight: 500;
}

.finisher {
  clear: both;
}


/*třída pozicování obrázků v extech*/
.image-right {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
}