/**

 * JERGONLAB - Základní styly pro web.php

 */



/* Reset */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  /* Základní barvy */

  --primary: #ff3c2a;          /* Červeno-oranžová */

  --primary-hover: #ff5945;    /* Světlejší varianta primární */

  --primary-dark: #e82918;     /* Tmavší varianta primární */

  --accent: #ff6a00;           /* Oranžová akcentní */

  --primary-light: #ff7b6a;    /* Ještě světlejší varianta primární */

  

  /* Tmavé pozadí - odstíny */

  --dark: #111111;             /* Téměř černá */

  --dark-2: #161616;           /* O něco světlejší než dark */

  --dark-3: #222222;           /* Ještě světlejší */

  

  /* Světlé barvy pro text */

  --light: #ffffff;            /* Čistě bílá */

  --light-2: rgba(255, 255, 255, 0.85);  /* Lehce průhledná bílá */

  --light-3: rgba(255, 255, 255, 0.65);  /* Více průhledná bílá */

  

  /* Gradienty */

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));

  --gradient-dark: linear-gradient(135deg, var(--dark), var(--dark-2));

  

  /* Světlé a tmavé barvy */

  --bg-light: #ffffff;

  --text-light: #111111;

  --surface-light: #f8f8f8;

  --border-light: #e2e2e2;

  --muted-light: #777777;

  

  /* Tmavý režim základní barvy */

  --bg-dark: var(--dark);

  --text-dark: var(--light);

  --surface-dark: var(--dark-3);

  --border-dark: rgba(255, 255, 255, 0.1);

  --muted-dark: var(--light-3);

  

  /* Aktivní barvy dle režimu */

  --bg: var(--bg-dark);

  --text: var(--text-dark);

  --surface: var(--surface-dark);

  --border: var(--border-dark);

  --muted: var(--muted-dark);

  

  /* Stíny a efekty */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  

  /* Rozměry a mezery */

  --container-width: 1200px;

  --border-radius: 12px;

  --border-radius-sm: 8px;

  --border-radius-lg: 16px;

  --border-radius-full: 9999px;

  

  /* Animace */

  --transition-fast: 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-slow: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  

  /* Z-indexy */

  --z-header: 100;

  --z-footer: 100;

  --z-modal: 1000;

  --z-dropdown: 150;

  --z-tooltip: 300;

  

  /* Výšky pro layout */

  --header-height: 70px;

  --footer-height: 80px; 

}



/* Světlý režim */

.light-mode {

  --bg: var(--bg-light);

  --text: var(--text-light);

  --surface: var(--surface-light);

  --border: var(--border-light);

  --muted: var(--muted-light);

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

}



body {

  font-family: 'Inter', 'Satoshi', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  background-color: var(--bg);

  color: var(--text);

  line-height: 1.6;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  transition: background-color var(--transition), color var(--transition);

  padding: 0;

  margin: 0;

  overflow-x: hidden;

}



main {

  flex: 1;

  width: 100%;

  padding-top: var(--header-height);

  padding-bottom: calc(var(--footer-height) + 20px);

}



/* Typografie */

h1, h2, h3, h4, h5, h6 {

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: 1rem;

  letter-spacing: -0.02em;

}



h1 {

  font-size: 2.5rem;

  font-weight: 800;

}



h2 {

  font-size: 2rem;

  font-weight: 700;

}



h3 {

  font-size: 1.5rem;

  font-weight: 600;

}



p {

  margin-bottom: 1rem;

}



a {

  color: var(--primary);

  text-decoration: none;

  transition: color var(--transition-fast);

}



a:hover {

  color: var(--primary-dark);

}



/* Container */

.container {

  width: 100%;

  max-width: var(--container-width);

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* Header */

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--header-height);

  background-color: var(--dark);

  border-bottom: 1px solid rgba(255, 60, 42, 0.1);

  display: flex;

  align-items: center;

  z-index: var(--z-header);

  transition: all var(--transition);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);

}



.light-mode .header {

  background-color: var(--bg-light);

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

}



.header__content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  height: 100%;

}



.logo {

  font-size: 1.5rem;

  font-weight: 900;

  color: var(--light);

  display: inline-block;

  transition: var(--transition);

  text-transform: uppercase;

  letter-spacing: 1px;

}



.light-mode .logo {

  color: var(--dark);

}



.logo:hover {

  color: var(--primary);

}



.theme-toggle {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: var(--border-radius-full);

  background-color: var(--surface);

  border: 1px solid var(--border);

  color: var(--text);

  cursor: pointer;

  transition: all var(--transition-fast);

}



.theme-toggle:hover {

  border-color: var(--primary);

  transform: translateY(-1px);

  color: var(--primary);

}



.theme-toggle svg {

  width: 1.25rem;

  height: 1.25rem;

}



/* Footer */

.footer {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: var(--footer-height);

  background-color: var(--dark);

  border-top: 1px solid rgba(255, 60, 42, 0.1);

  display: flex;

  align-items: center;

  z-index: var(--z-footer);

  transition: all var(--transition);

  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);

  padding: 0;

}



.light-mode .footer {

  background-color: var(--bg-light);

  border-top: 1px solid rgba(0, 0, 0, 0.1);

  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

}



.footer__content {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  gap: 5rem;

  padding: 0.75rem 0;

  height: 100%;

}



/* Tlačítka */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.85rem 1.85rem;

  border-radius: var(--border-radius);

  font-weight: 700;

  cursor: pointer;

  transition: all var(--transition);

  border: none;

  outline: none;

  font-size: 1rem;

  text-align: center;

  box-shadow: 0 8px 20px rgba(255, 60, 42, 0.3);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  position: relative;

  color: white;

  overflow: visible;

  z-index: 5;

}



.btn:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(255, 60, 42, 0.4);

}



.btn:active {

  transform: translateY(-2px);

}



.btn svg {

  width: 1.25rem;

  height: 1.25rem;

  position: relative;

  z-index: 3;

}



.btn-primary {

  background: var(--gradient-primary);

  color: white;

  position: relative;

  overflow: hidden;

}



.btn-primary::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);

  transform: translateX(-100%);

  transition: transform 0.6s;

  z-index: 0;

  pointer-events: none;

}



.btn-primary:hover::after {

  transform: translateX(100%);

}



.btn-primary span,

.btn-primary svg {

  position: relative;

  z-index: 2;

  color: white;

}



.btn-large {

  padding: 1rem 2.2rem;

  font-size: 1.1rem;

  font-weight: 700;

}



/* Kontaktní tlačítka */

.contact-button {

  position: relative;

  z-index: 150;

}



.contact-button button {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 52px;

  height: 52px;

  border-radius: 18px;

  background: var(--gradient-primary);

  color: white;

  border: none;

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-shadow: 0 8px 20px rgba(255, 60, 42, 0.3);

  position: relative;

  overflow: visible;

  z-index: 150;

  transform: translateY(0);

  margin: 0;

  padding: 0;

}



.contact-button button:hover {

  transform: translateY(-8px); 

  background: linear-gradient(135deg, var(--accent), var(--primary));

  box-shadow: 0 15px 30px rgba(255, 60, 42, 0.4);

}



.contact-button.active button {

  background: linear-gradient(135deg, var(--accent), var(--primary));

  box-shadow: 0 15px 30px rgba(255, 60, 42, 0.4);

}



.contact-button svg {

  width: 22px;

  height: 22px;

  stroke: white;

  stroke-width: 2px;

  transition: transform 0.3s ease;

  position: relative;

  z-index: 2;

}



.contact-button button:hover svg {

  transform: scale(1.1);

}



.contact-button button:active {

  transform: translateY(-5px);

  transition: all 0.15s ease;

}



/* Kontaktní modál */

.contact-modal {

  position: fixed;

  bottom: calc(var(--footer-height) + 30px);

  left: 50%;

  transform: translateX(-50%);

  background-color: var(--surface);

  border-radius: var(--border-radius);

  border: 1px solid var(--border);

  box-shadow: var(--shadow-lg);

  padding: 2rem;

  display: none;

  z-index: var(--z-modal);

  min-width: 300px;

  text-align: center;

  opacity: 0;

  transition: all var(--transition);

  max-width: 90vw;

}



.light-mode .contact-modal {

  background-color: var(--surface-light);

  border: 1px solid var(--border-light);

}



.contact-modal.active {

  display: block;

  opacity: 1;

}



.contact-modal__title {

  margin-bottom: 1rem;

  font-size: 1.5rem;

  color: var(--text);

  font-weight: 700;

}



.contact-modal__value {

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem;

  color: var(--primary);

  word-break: break-word;

}



.contact-modal__close {

  position: absolute;

  top: 0.75rem;

  right: 0.75rem;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  border-radius: var(--border-radius-full);

  background-color: var(--bg);

  border: 1px solid var(--border);

  color: var(--text);

  cursor: pointer;

  transition: all var(--transition-fast);

  z-index: 2;

}



.contact-modal__close:hover {

  border-color: var(--primary);

  color: var(--primary);

  transform: rotate(90deg);

}



.contact-modal__close svg {

  width: 1rem;

  height: 1rem;

}



/* Responsivní úpravy */

@media (max-width: 768px) {

  .contact-button button {

    width: 48px;

    height: 48px;

    border-radius: 16px;

  }

  

  .contact-button svg {

    width: 20px;

    height: 20px;

  }

  

  .footer__content {

    gap: 4rem;

  }

  

  .contact-modal {

    padding: 1.5rem;

    min-width: 280px;

    bottom: calc(var(--footer-height) + 20px);

  }

  

  .contact-modal__title {

    font-size: 1.3rem;

  }

  

  .contact-modal__value {

    font-size: 1.2rem;

  }

}



@media (max-width: 576px) {

  .contact-button button {

    width: 45px;

    height: 45px;

    border-radius: 14px;

  }

  

  .contact-button svg {

    width: 18px;

    height: 18px;

  }

  

  .footer__content {

    gap: 3.5rem;

  }

  

  .contact-modal {

    padding: 1.25rem;

    min-width: 260px;

    bottom: calc(var(--footer-height) + 15px);

  }

  

  .contact-modal__title {

    font-size: 1.2rem;

    margin-bottom: 0.75rem;

  }

  

  .contact-modal__value {

    font-size: 1.1rem;

  }

}



/* Vlastní scrollbar */

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: rgba(255, 60, 42, 0.05);

}

::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--primary-hover);

}



.light-mode ::-webkit-scrollbar-track {

  background: rgba(255, 60, 42, 0.02);

}