/* ZÁKLADNÍ NASTAVENÍ */



:root {

  --color-bg: #f9fafb;

  --color-surface: #ffffff;

  --color-primary: #2563eb;

  --color-primary-soft: #dbeafe;

  --color-text: #111827;

  --color-text-muted: #6b7280;

  --color-border: #e5e7eb;

  --shadow-soft: 0 10px 20px rgba(15, 23, 42, 0.08);

  --radius-lg: 1rem;

  --radius-md: 0.75rem;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html,

body {

  margin: 0;

  padding: 0;

}



body {

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

    sans-serif;

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

  color: var(--color-text);

  line-height: 1.6;

}



img {

  max-width: 100%;

  display: block;

}



a,

a:visited {

  color: #0b5ed7;        /* modrá */

  text-decoration: none; /* bez podtržení v klidu */

}



a:hover,

a:focus-visible {

  text-decoration: underline;

}



.page {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



/* LAYOUT KONTEJNER */



.container {

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 1.25rem;

}



/* HLAVIČKA + MENU */



.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background-color: rgba(249, 250, 251, 0.96);

  backdrop-filter: blur(12px);

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

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  padding: 0.75rem 1.25rem;

}



.brand {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.brand img {

  border-radius: 24%;

  flex-shrink: 0;

}



.brand-text {

  display: flex;

  flex-direction: column;

}



.brand-title {

  font-weight: 700;

  font-size: 1.35rem; color: #58AF4E;

  letter-spacing: 0.03em;

}



.brand-subtitle {

  font-size: 0.9rem; color: #0065EA;

  /*color: var(--color-text-muted); */

}



.brand-title,

.brand-subtitle {

  font-family: "Roboto", "Trebuchet MS", "Segoe UI", system-ui, -apple-system,

    BlinkMacSystemFont, sans-serif;

}



/* Tlačítko hamburger menu – skryté na desktopu, viditelné na mobilu */

.menu-toggle {

  display: none; /* zobrazíme v @media */

  align-items: center;

  justify-content: center;

  flex-direction: column;   /* <<< NOVĚ – čárky pod sebou */

  gap: 4px;

  width: 40px;

  height: 40px;

  border-radius: 999px;

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

  background-color: #ffffff;

  cursor: pointer;

}



.menu-toggle-bar {

  width: 18px;

  height: 2px;

  border-radius: 999px;

  background-color: var(--color-text);

}



/* Jemné doladění vzhledu */

.brand-title {

  font-size: 1.5rem;         /* trochu větší než zbytek textu */

  letter-spacing: 0.06em;    /* lehké rozšíření pro „logo“ efekt */

}



.brand-subtitle {

  font-size: 0.9rem;

  font-weight: 500;          /* trochu zvýrazněný, ale ne tučný */

}



.main-nav ul {

  list-style: none;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin: 0;

  padding: 0;

}



.main-nav a {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.45rem 0.9rem;

  border-radius: 999px;

  font-size: 0.95rem;

  color: var(--color-text-muted);

  border: 1px solid transparent;

}



.main-nav a:hover,

.main-nav a:focus-visible {

  background-color: var(--color-primary-soft);

  border-color: var(--color-primary-soft);

  color: var(--color-primary);

  text-decoration: none;

}



.nav-item-active a {

  background-color: var(--color-primary);

  color: #ffffff;

  border-color: var(--color-primary);

}



.nav-item-gpt a {

  background-color: #1FB155;

  color: #ffffff;

  border-color: #98fb98;

}

.nav-icon {

  width: 1.1rem;

  height: 1.1rem;

  display: inline-block;

  flex-shrink: 0;

}





/* HLAVNÍ OBSAH */



.site-main {

  flex: 1 0 auto;

  padding: 1.5rem 0 2.5rem;

}



/* PROMO / REKLAMNÍ BLOKY */



.promo {

  margin: 0.75rem 0;

}



/* Skryje blok, dokud má třídu is-empty */

.promo.is-empty {

  display: none;

}



/* PŘEKLADAČ */



.translator {

  margin: 1rem auto 2rem;

}



.translator-header {

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

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

  padding: 1.5rem 1.75rem 1.25rem;

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

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

  border-bottom: none;

}



.translator-header h1 {

  margin: 0 0 0.5rem;

  font-size: 1.6rem;

}



.translator-intro {

  margin: 0;

  font-size: 0.98rem;

  color: var(--color-text-muted);

}



.translator-form,

.translator-output {

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

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

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

  padding: 1.5rem 1.75rem;

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

}



.translator-form {

  border-top: none;

}



.translator-output {

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

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

}



.mode-select {

  border: none;

  margin: 0 0 1rem;

  padding: 0;

}



.mode-select legend {

  font-weight: 600;

  margin-bottom: 0.35rem;

}



.mode-select label {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  margin-right: 1rem;

  font-size: 0.95rem;

  cursor: pointer;

}



.mode-select input[type="radio"] {

  accent-color: var(--color-primary);

}



.field-group {

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

  margin-top: 0.75rem;

}



.field-group label {

  font-weight: 600;

}



textarea {

  resize: vertical;

  min-height: 200px;

  padding: 0.75rem 0.9rem;

  font-family: inherit;

  font-size: 0.98rem;

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

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

  background-color: #fdfdfd;

}



/* Vstupní pole – výraznější zelené orámování */

#input-text {

  border: 2px solid rgb(88, 175, 78);

}



/* Při fokusu ještě lehký zelený efekt */

#input-text:focus-visible {

  outline: 2px solid rgba(88, 175, 78, 0.35);

  outline-offset: 1px;

  border-color: rgb(72, 150, 64); /* o chlup tmavší varianta */

}





.field-group input[type="file"] {

  font-size: 0.9rem;

}



textarea:focus-visible {

  outline: 2px solid var(--color-primary-soft);

  outline-offset: 1px;

  border-color: var(--color-primary);

}



.field-hint {

  font-size: 0.85rem;

  color: var(--color-text-muted);

}



.form-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-top: 1rem;

}



/* TLAČÍTKA */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.55rem 1.1rem;

  border-radius: 999px;

  border: 1px solid transparent;

  font-size: 0.95rem;

  cursor: pointer;

  background-color: transparent;

  color: var(--color-text);

}



.btn-primary {

  background-color: var(--color-primary);

  color: #ffffff;

  border-color: var(--color-primary);

}



.btn-primary:hover {

  background-color: #1d4ed8;

  border-color: #1d4ed8;

}



.btn-ghost {

  border-color: var(--color-border);

  background-color: #f9fafb;

}



.btn-ghost:hover {

  background-color: #e5e7eb;

}



.btn:focus-visible {

  outline: 2px solid var(--color-primary-soft);

  outline-offset: 2px;

}



/* VÝSTUP */



.translator-output h2 {

  margin: 0 0 0.75rem;

  font-size: 1.25rem;

}



.output-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 0.25rem;

}



.output-header-main {

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



.output-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.btn-small {

  padding: 0.35rem 0.8rem;

  font-size: 0.85rem;

}



/* Hláška pod titulkem – vždy rezervované místo, aby nic neskákalo */

/* Hláška je samostatný řádek pod headerem */

.copy-feedback {

  font-size: 0.85rem;

  color: var(--color-text-muted);

  min-height: 1.2em;         /* rezerva pro 1 řádek, ať nic neskáče když je prázdná */

  margin: 0 0 0.75rem;       /* trochu odsazení od headeru a od obsahu */

}



.output-content {

  border-radius: 0.75rem;

  border: 1px dashed var(--color-border);

  padding: 1rem;

  font-size: 0.95rem;

  color: var(--color-text);

  background-color: #fdfdfd;

}



.output-table-wrapper {

  width: 100%;

  overflow-x: auto; /* na mobilu umožní posouvat tabulku do strany */

}



.output-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 100%;

}



.output-table th,

.output-table td {

  padding: 0.5rem 0.75rem;

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

  vertical-align: top;

}



.output-table th {

  text-align: left;

  font-weight: 600;

  background-color: var(--color-primary-soft);

  white-space: nowrap;

}



.output-table td {

  white-space: pre-wrap;     /* zachová řádkování */

  overflow-wrap: anywhere;   /* zalamuje i extrémně dlouhé tokeny */

  word-break: break-word;    /* pojistka pro starší prohlížeče */

}



/* Čitelnější tabulka: střídání řádků + zvýraznění při přejetí */

.output-table tbody tr:nth-child(even) td {

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

}



.output-table tbody tr:hover td {

  background-color: var(--color-primary-soft);

}



.output-section {

  margin-top: 1.25rem;

}



.output-section h3 {

  margin: 0 0 0.35rem;

  font-size: 1rem;

}



.output-section ul {

  margin: 0;

  padding-left: 1.25rem;

}



.output-section li + li {

  margin-top: 0.25rem;

}



/* ADMIN/DEBUG panel (skrytý, zapíná ho JS) */

.admin-debug {

  margin-top: 0.85rem;

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

  border-radius: 0.75rem;

  background: #ffffff;

  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);

  overflow: hidden;

}



.admin-debug summary {

  cursor: pointer;

  user-select: none;

  padding: 0.65rem 0.9rem;

  font-weight: 650;

  color: var(--color-text);

  background: #f3f4f6;

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

}



.admin-debug[open] summary {

  background: #eef2ff;

}



.admin-debug-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 0.5rem 1rem;

  padding: 0.85rem 0.9rem;

  font-size: 0.9rem;

  color: var(--color-text);

}



.admin-debug-grid span {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

    "Liberation Mono", "Courier New", monospace;

  font-size: 0.88rem;

  color: var(--color-text-muted);

}



/* PATIČKA */



.site-footer {

  margin-top: auto;

  background-color: #111827;

  color: #e5e7eb;

}



.footer-main {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 1.5rem;

  padding: 2rem 1.25rem 1.25rem;

}



.footer-column h2 {

  font-size: 1rem;

  margin: 0 0 0.6rem;

}



.footer-column p {

  margin: 0;

  font-size: 0.9rem;

}



.footer-column ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-column li + li {

  margin-top: 0.35rem;

}



.footer-column a {

  color: #e5e7eb;

  font-size: 0.9rem;

}



.footer-column a:hover,

.footer-column a:focus-visible {

  color: #fbbf24;

  text-decoration: none;

}



.copyright {

  border-top: 1px solid #1f2937;

  padding: 0.75rem 0;

  font-size: 0.8rem;

}



.copyright .container {

  display: flex;

  justify-content: center;

}



/* RESPONSIVITA */



@media (max-width: 768px) {

  .header-inner {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding-bottom: 0.75rem;

    flex-wrap: wrap;              /* <<< NOVĚ – logo + ikonka nahoře, menu se může zlomit pod ně */

  }



  /* Tlačítko menu je viditelné na mobilu */

  .menu-toggle {

    display: inline-flex;

  }



  /* Menu je na mobilu skryté, dokud není otevřené */

  .main-nav {

    display: none;

    width: 100%;

    order: 99;                    /* <<< NOVĚ – menu až pod logem + ikonkou */

  }



  .main-nav.is-open {

    display: block;

  }



  .main-nav ul {

    flex-direction: column;

    align-items: flex-start;

    gap: 0.25rem;

    margin-top: 0.5rem;

  }



  .main-nav a {

    width: 100%;

    justify-content: flex-start;

  }



  .translator-header,

  .translator-form,

  .translator-output {

    padding: 1.1rem 1.1rem;

  }

}





/* Odkaz v hlavičce (logo + název) se nemá podtrhávat */

.brand,

.brand:hover,

.brand:focus-visible {

  text-decoration: none;

}

/* Testovací klíč – nechceme přes celou šířku */

#tester-key {

  max-width: 340px;

}