@font-face {
  font-family: Kazeta;
  src: url("./Fonts/RGKKazeta2.0-Regular.otf");
}
@font-face {
  font-family: Ozone;
  src: url("./Fonts/Ozone-Regular.otf");
}
@font-face {
  font-family: Really Grotesk;
  src: url("./Fonts/ReallyGrotesk-Regular.otf");
}
@font-face {
  font-family: Really Grotesk_SB;
  src: url("./Fonts/ReallyGrotesk-Semibold.otf");
}
@font-face {
  font-family: Qarel;
  src: url("./Fonts/Qarel-Medium.otf");
}
@font-face {
  font-family: Tide;
  src: url("./Fonts/RGKTide2.0-Regular.otf");
}
@font-face {
  font-family: Tide-Heavy;
  src: url("./Fonts/RGKTide2.0-Heavy.otf");
}
@font-face {
  font-family: Opuntia-Book;
  src: url("./Fonts/Opuntia-Book.otf");
}
@font-face {
  font-family: Opuntia-Italic;
  src: url("./Fonts/Opuntia-Italic.otf");
}
@font-face {
  font-family: Tulsa;
  src: url("./Fonts/TulsaGrotesk-Bold.otf");
}
@font-face {
  font-family: Món;
  src: url("./Fonts/Mon-Regular.otf");
}
@font-face {
  font-family: Món-Bold;
  src: url("./Fonts/Mon-Bold.otf");
}
@font-face {
  font-family: Món-Medium;
  src: url("./Fonts/Mon-Medium.otf");
}
@font-face {
  font-family: Marz;
  src: url("./Fonts/MarzGrotesk-Medium.otf");
}

a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Prevents color change, inherits from the parent element */
  background: transparent; /* Removes any background that may be applied by default */
  border: none; /* Removes any borders around the link */
  outline: none; /* Removes any outline when the link is focused (e.g., keyboard navigation) */
  cursor: pointer; /* Keeps the pointer cursor to indicate it's clickable */
  font-weight: normal;
}

a:hover,
a:active,
a:focus {
  text-decoration: none; /* Ensures no underline on hover/focus/active */
  color: inherit; /* Prevents color change on hover/focus/active */
  background: transparent; /* Ensures no background color change on hover/focus/active */
  border: none; /* Removes borders on hover/focus/active */
}

/* Global styles */
body {
  font-family: Really Grotesk;
  font-size: 15px;
  margin: 0;
  padding: 0;
  background-color: #eeeeee;
  color: #000000;
  margin-top: 8%;
  font-variant-ligatures: discretionary-ligatures;
}

.text-serif {
  font-family: Opuntia-Book;
  font-size: 200%;
  margin: 0;
  padding: 3%;
  background-color: #eeeeee;
  color: #00ac00;
  margin-top: 8%;
  font-variant-ligatures: discretionary-ligatures;
}

h1 {
  font-family: Really Grotesk;
  font-size: 15px;
  letter-spacing: 2%;
  margin: 0;
  padding: 3%;
  color: #000000;
  font-variant-ligatures: discretionary-ligatures;
}

/* Navigation bar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 10%;
  z-index: 1000;
  overflow: visible;
}

nav::after {
  display: none;
}

.nav-blend {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-color: #ff0000; /* ← change this color to whatever you want */
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 999;
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  width: 95%;
  margin-left: 1.5%;
  position: relative;
  height: 100%;
  background: transparent; /* add this */
}

/* Center the logo */
.logo {
  position: absolute;
  height: 50px;
  mix-blend-mode: difference;
}

.logo svg {
  height: 50px;
  opacity: 100%;
}

.logo:hover svg {
  fill: white;
}

/* Menu links */
.menu-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  gap: 50px; /* Adds space between links */
  margin-left: auto; /* Pushes the links to the right */
  font-family: Really Grotesk_SB;
}

.menu-links li {
  display: inline;
}

.menu-links a {
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.2s;
}

.menu-links a:hover {
  color: #ffffff;
}

/*font-microsite*/
.tester-easy {
  height: 80%;
  background-color: #efefef;
  padding: 1%;
  padding-bottom: 0%;
  overflow: hidden;
  width: 47.5%;
  margin-bottom: 0.4%;
  position: relative;
}

.controls-easy {
  display: flex;
  align-items: center;
  gap: 50px;
  color: #000000;
}

.slider-background-easy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.slider-easy {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 2px;
  background: #000000;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider-easy::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #000000;
  border-radius: 50%;
  cursor: pointer;
}

.slider-easy::-moz-range-thumb-easy {
  width: 12px;
  height: 12px;
  background: #000000;
  border-radius: 50%;
  cursor: pointer;
}
/*konec-microsite*/

.tester {
  height: 30%;
  background-color: #ffffff;
  padding: 1%;
  margin: 2.5%;
  overflow: hidden;
  width: 93%;
  border-radius: 10px;
  position: relative;
}

/* Container styling */
.info_tester {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 20px;
  white-space: nowrap;
}

/* Author section */
.author {
  justify-self: start;
}

/* Font name centered */
.font_name {
  justify-self: center;
  margin: auto 10px;
  text-align: center;
  font-family: Really Grotesk_SB;
  font-size: 120%;
}

.font-style {
  display: flex;
  width: 98%;
  color: #000000;
  font-size: 400%;
  justify-content: space-between;
  margin-left: 1%;
  margin-right: 1%;
}

/* Controls container */
.controls {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #999999;
  justify-self: end;
}

/* Dropdown menu */
.controls select {
  display: block;
  margin: 0 auto;
  padding: 5px 10px;
  border: none;
  border-radius: 999em;
  cursor: pointer;
  appearance: none; /* Remove default dropdown styling */
  -webkit-appearance: none;
  outline: none;
  position: relative;
  font-size: 15px;
  color: #ffffff;
  background-color: #00ac00;
  font-family: inherit;
  text-align: center;
  text-align-last: center; /* Firefox */
}

/* Sliders */
.slider-background {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 2px;
  background: #ddd;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #00ac00;
  border-radius: 50%;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #00ac00;
  border-radius: 50%;
  cursor: pointer;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  color: #ffffff;
  border: none;
  border-radius: 999em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  margin-left: 50%;
  transform: translateX(-50%); /* Keeps the button centered */
  transition: all 0.3s ease;
}

.button:hover {
  color: #ffffff;
  animation: shake 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes shake {
  0% {
    transform: translateX(-50%) rotate(0);
  }
  25% {
    transform: translateX(-50%) rotate(-5deg);
  }
  50% {
    transform: translateX(-50%) rotate(5deg);
  }
  75% {
    transform: translateX(-50%) rotate(-5deg);
  }
  100% {
    transform: translateX(-50%) rotate(0);
  }
}

/* Active effect */
.button:active {
  background-color: #000;
  transition: all 0.3s ease;
  text-decoration: none;
  font-weight: normal;
}

/* Editable sample text */
.sample1 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample2 {
  font-family: "Opuntia-Italic"; /* Default font */
  font-size: 220px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample3 {
  font-family: "Tulsa"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample3_1 {
  font-family: "Ozone"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample3_2 {
  font-family: "Marz"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample4 {
  font-family: "Tide"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample5 {
  font-family: "Món"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample5_1 {
  font-family: "Món-Medium"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample5_2 {
  font-family: "Món-Bold"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample7 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 200px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #005723;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample8 {
  font-family: "Opuntia-Italic"; /* Default font */
  font-size: 200px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample9 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 16px; /* Default size */
  line-height: 120%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: left;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample10 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 400px; /* Default size */
  line-height: 120%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample11 {
  font-family: "Opuntia-Italic"; /* Default font */
  font-size: 200px; /* Default size */
  line-height: 120%; /* Default line height */
  color: #005723;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
  font-feature-settings: "onum";
}

.sample12 {
  font-family: "Opuntia-Italic"; /* Default font */
  font-size: 16px; /* Default size */
  line-height: 120%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: left;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample13 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #005723;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample13_1 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #005723;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample14 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 9vw; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

/*Opuntia */

.sample-opuntia {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 140px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample-opuntia2 {
  font-family: "Opuntia-Italic"; /* Default font */
  font-size: 250px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.sample-opuntia3 {
  font-family: "Opuntia-Book"; /* Default font */
  font-size: 140px; /* Default size */
  line-height: 100%; /* Default line height */
  color: #000;
  padding: 20px;
  border-radius: 5px;
  outline: none;
  word-break: none;
  min-height: 150px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

.slider {
  height: fit-content;
  width: auto;
}

.footer {
  width: 94%;
  height: 400px;
  font-size: 200%;
  color: #006eff;
  padding: 3%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center; /* Centers the items horizontally */
  font-family: Opuntia-Book;
}

.footer-container {
  width: 49%; /* Makes each container take up 45% of the footer width */
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: start; /* Centers content vertically */
  align-items: start; /* Centers content horizontally */
  font-family: Opuntia-Book;
}

.footer-item a {
  text-decoration: none;
}

.footer-item a:hover {
  text-decoration: underline;
}

.text {
  margin: 3%;
}

H2 {
  font-size: 300%;
  color: #00ac00;
  font-weight: normal;
  text-align: center;
  line-height: 110%;
  font-family: Opuntia-Book;
}

.button_big {
  margin-bottom: 2%;
  font-size: 400%;
  color: #00ac00;
  text-align: center;
  font-family: Opuntia-Book;
}

.button_big a {
  text-decoration: none;
}

.button_big a:hover {
  text-decoration: underline;
}

/*Headinfo-font*/
.headinfo-font {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  text-align: left;
  width: 45%;
}

.headinfo-mail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  text-align: right;
  width: 45%;
  font-family: Opuntia-Book;
}

.headinfo-container {
  display: flex;
  flex-direction: row;
}

/*FONTY*/
.font-ozone {
  font-size: 800%;
  color: #000000;
  font-weight: normal;
  text-align: center;
  line-height: 110%;
  font-family: Ozone;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 2%;
}

.font-opuntia {
  font-size: 200%;
  color: #000000;
  font-weight: normal;
  text-align: left;
  line-height: 110%;
  font-family: Opuntia-Book;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 2%;
}

.tt {
  display: inline-flex;
  width: 100%;
  gap: 10px;
  flex-grow: 1;
  margin-bottom: 2%;
}

.photo {
  width: 30%;
  alignment: center;
  margin: 2.5%;
}

.toggle-color-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #999999;
  padding: 0;
}

.toggle-color-btn:hover {
  color: #00ac00;
}

.tester .slider::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 3px;
}

.tester .controls .slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}

.tester .controls .slider::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}

// INDEX.HTML - COLOR STYLED BOXES
// opuntia style
.opuntia.tester .controls select {
  background-color: #005723;
}

.opuntia.tester .controls .slider-background {
  color: #005723;
}

.opuntia.tester .slider::-webkit-slider-runnable-track {
  background-color: #00572380;
}

.opuntia.tester .controls .slider::-moz-range-thumb {
  background: #005723;
}

.opuntia.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #005723;
}

//tide style
.tide.tester .controls select {
  background-color: #258228;
}

.tide.tester .controls .slider-background {
  color: #258228;
}

.tide.tester .slider::-webkit-slider-runnable-track {
  background-color: #25822880;
}

.tide.tester .controls .slider::-moz-range-thumbm {
  background: #258228;
}

.tide.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #258228;
}

//tulsa style
.tulsa.tester .controls select {
  background-color: #bb2626;
}

.tulsa.tester .controls .slider-background {
  color: #bb2626;
}

.tulsa.tester .slider::-webkit-slider-runnable-track {
  background-color: #bb262680;
}

.tulsa.tester .controls .slider::-moz-range-thumb {
  background: #bb2626;
}

.tulsa.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #bb2626;
}

//mon style
.mon.tester .controls select {
  background-color: #1040c4;
}

.mon.tester .controls .slider-background {
  color: #1040c4;
}

.mon.tester .slider::-webkit-slider-runnable-track {
  background-color: #1040c480;
}

.mon.tester .controls .slider::-moz-range-thumb {
  background: #1040c4;
}

.mon.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #1040c4;
}

//ozone style
.ozone.tester .controls select {
  background-color: #9e7734;
}

.ozone.tester .controls .slider-background {
  color: #9e7734;
}

.ozone.tester .slider::-webkit-slider-runnable-track {
  background-color: #9e773480;
}

.ozone.tester .controls .slider::-moz-range-thumb {
  background: #9e7734;
}

.ozone.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #9e7734;
}

//marz style
.marz.tester .controls select {
  background-color: #ff5100;
}

.marz.tester .controls .slider-background {
  color: #ff5100;
}

.marz.tester .slider::-webkit-slider-runnable-track {
  background-color: #ff510080;
}

.marz.tester .controls .slider::-moz-range-thumb {
  background: #ff5100;
}

.marz.tester .controls .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #ff5100;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   Přidáno pro mobilní zobrazení
   ======================================== */

/* Tablet a mobil (768px a menší) */
@media screen and (max-width: 768px) {
  
  /* BODY */
  body {
    margin-top: 120px;
  }

  .text-serif {
    margin-top: 120px;
  }

  /* NAVIGACE */
  nav {
    min-height: 100px;
  }

  .nav-blend {
    height: 100px;
  }

  .menu-container {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
  }

  .logo {
    position: relative;
    margin-bottom: 0;
  }

  .menu-links {
    margin-left: 0;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* TESTER BOXY - pod sebou - ALL same width */
  .tester,
  div[style*="display: flex"] .tester,
  .tester[style*="width"] {
    width: 90% !important;
    margin: 5% auto !important;
    padding: 3%;
    height: auto !important;
  }

  /* ===========================================
     INDIVIDUÁLNÍ VÝŠKY PRO RŮZNÉ TESTERY
     Každý tester může mít jinou výšku
     =========================================== */
  
  /* Testery s velkými texty (sample1, sample2, atd.) */
  .tester:has(.sample1),
  .tester:has(.sample2),
  .tester:has(.sample3),
  .tester:has(.sample3_1),
  .tester:has(.sample3_2),
  .tester:has(.sample4),
  .tester:has(.sample5) {
    min-height: 300px; /* ← ZMĚŇ pro velké texty */
  }

  /* Testery se středně velkými texty (sample6-11) */
  .tester:has(.sample6),
  .tester:has(.sample7),
  .tester:has(.sample8),
  .tester:has(.sample10),
  .tester:has(.sample11) {
    min-height: 350px; /* ← ZMĚŇ pro střední texty */
  }

  /* Testery s DLOUHÝM TEXTEM (sample9, sample12) */
  .tester:has(.sample9),
  .tester:has(.sample12) {
    max-height: 400px; /* ← max-height, not min-height */
  }

  /* Testery s malými texty (sample13, 14) */
  .tester:has(.sample13),
  .tester:has(.sample13_1),
  .tester:has(.sample14) {
    min-height: 280px; /* ← ZMĚŇ pro malé texty */
  }

  /* Wrapper divy s inline style height - přepíše */
  .tester[style*="height"] {
    height: auto !important;
  }

  /* DŮLEŽITÉ - Wrapper divy které mají 2 testery vedle sebe */
  div[style*="display: flex"][style*="margin: 2.5%"] {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Sample9 a Sample12 text - JEDEN SLOUPEC na mobilu */
  .sample9,
  .sample12 {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }

  /* NAVIGATION ARROWS - center them vertically on mobile */
  .slider button[onclick*="changeSlide"],
  button[onclick*="changeSlide"] {
    top: 40% !important; /* Adjusted to center on image, not container */
    width: 30px !important;
    height: 30px !important;
    font-size: 1rem !important;
    left: 20px !important;
  }
  
  .slider button[onclick*="changeSlide(1)"],
  button[onclick*="changeSlide(1)"] {
    left: auto !important;
    right: 20px !important;
  }

  /* Info tester - pod sebou */
  .info_tester {
    grid-template-columns: 1fr;
    gap: 15px;
    text-align: center;
  }

  .author,
  .font_name {
    justify-self: center;
  }

  /* CONTROLS - pod sebou */
  .controls {
    flex-direction: column;
    gap: 15px;
    justify-self: center;
    width: 100%;
  }

  .slider-background {
    width: 100%;
    justify-content: center;
  }

  .slider {
    width: 60%;
  }

  /* FOOTER - pod sebou */
  .footer {
    flex-direction: column;
    height: auto;
  }

  .footer-container {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  /* TEXT SEKCE */
  H2 {
    font-size: 180%;
  }

  .button_big {
    font-size: 250%;
  }

  /* HEADINFO - pod sebou */
  .headinfo-container {
    flex-direction: column;
  }

  .headinfo-font,
  .headinfo-mail {
    width: 100%;
  }

  /* PHOTO */
  .photo {
    width: 90%;
  }

  /* INTRO TEXT - keep 2 columns side by side on mobile */
  /* Only targets the .h1 container, NOT tester wrappers */
  .h1 > div > div[style*="display: flex"][style*="gap: 2rem"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    font-size: 14px;
  }

  .h1 div[style*="column-count: 2"] {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }

  /* OBRÁZKY - responzivní výška */
  img {
    height: auto !important;
    max-width: 100%;
    object-fit: contain !important;
  }

  /* Obrázky v style atributu - přepíše fixní výšku */
  img[style*="height"] {
    height: auto !important;
  }

  /* Wrapper divy s obrázky vedle sebe - POD SEBOU a na střed */
  div[style*="display: flex"] img {
    margin: 0 auto !important;
    display: block !important;
  }

  /* Divy které mají obrázky - POD SEBOU */
  div[style*="display: flex"][style*="margin: 2.5%"]:has(img) {
    flex-direction: column !important;
    align-items: center !important;
  }

  div[style*="display: flex"][style*="margin: 2.5%"] img {
    width: 90% !important;
    margin: 2.5% auto !important;
  }

  /* ===========================================
     VÝCHOZÍ VELIKOSTI SAMPLE TEXTŮ NA MOBILU
     Toto nastaví velikost při načtení stránky.
     Controls (slidery) BUDOU FUNGOVAT a přepíšou tyto hodnoty!
     =========================================== */
  
  /* Sample9 a Sample12 - text ve sloupcích - MUSÍ BÝT 1 SLOUPEC */
  .sample9 {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }

  .sample12 {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
  }

  /* VÝCHOZÍ velikosti při načtení (controls je přepíšou) */
  .sample1 { 
    font-size: 80px; /* ← ZMĚŇ výchozí velikost */
  }

  .sample2 { 
    font-size: 60px; /* ← ZMĚŇ výchozí velikost */
  }

  .sample3 { 
    font-size: 70px;
  }

  .sample3_1 { 
    font-size: 70px;
  }

  .sample3_2 { 
    font-size: 70px;
  }

  .sample4 { 
    font-size: 70px;
  }

  .sample5 { 
    font-size: 70px;
  }

  .sample6 { 
    font-size: 90px;
  }

  .sample7 { 
    font-size: 140px;
  }

  .sample8 { 
    font-size: 130px;
  }

  .sample9 {
    font-size: 30px; /* Text ve sloupcích */
  }

  .sample10 { 
    font-size: 200px;
  }

  .sample11 { 
    font-size: 140px;
  }

  .sample12 {
    font-size: 32px; /* Text ve sloupcích */
  }

  .sample13 { 
    font-size: 120px;
  }

  .sample13_1 { 
    font-size: 115px;
  }

  .sample14 { 
    font-size: 70px;
  }

  .sample-opuntia { 
    font-size: 70px;
  }

  .sample-opuntia2 { 
    font-size: 100px;
  }

  .sample-opuntia3 { 
    font-size: 70px;
  }
}

/* Mobil (480px a menší) */
@media screen and (max-width: 480px) {
  
  body {
    margin-top: 140px;
  }

  .text-serif {
    margin-top: 140px;
  }

  nav {
    min-height: 120px;
  }

  .nav-blend {
    height: 120px;
  }

  .menu-links {
    gap: 8px;
    font-size: 13px;
  }

  .tester {
    width: 95%;
  }

  /* Wrapper divy s 2 testery - POD SEBOU */
  div[style*="display: flex"][style*="margin: 2.5%"] {
    flex-direction: column !important;
  }

  div[style*="display: flex"][style*="margin: 2.5%"] .tester {
    width: 95% !important;
    margin: 5% auto !important;
  }

  /* Text v 1 sloupci */
  .sample12 {
    column-count: 1 !important;
  }

  H2 {
    font-size: 140%;
  }

  .button_big {
    font-size: 180%;
  }

  .footer {
    font-size: 110%;
  }

  /* Obrázky - responzivní */
  img {
    height: auto !important;
    max-width: 100%;
  }
}