/*!
 * RESET STYLŮ (vychází z moderního resetu + úpravy)
 */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   /* Zde nově nastavíme Lora jako základní font pro "knižní" vzhled */
   font-family: 'Lora', serif;
   font-weight: 400;        /* Základní váha písma */
   line-height: 1.7;        /* Větší řádkování pro knižní dojem */
 }
 
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
 
 /* Základní nastavení těla stránky */
 body {
   background-color: #282E3F; /* Tmavé pozadí */
   color: #424242;           /* Barva písma */
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* Volitelná úprava scrollbaru pro tmavé pozadí */
 body::-webkit-scrollbar {
   width: 12px;
   background-color: transparent;
 }
 body::-webkit-scrollbar-thumb {
   background-color: rgba(207, 148, 85, 1); /* #C79455 */
   border-radius: 5px;
   border: 1px solid #b2b2b2;
 }
 body::-webkit-scrollbar-thumb:hover {
   background-color: rgba(207, 148, 85, 1);
   transform: scale(1.1);
 }
 
 /* Nadpisy (Lora tučněji pro kontrast) */
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Lora', serif; 
   font-weight: 700;          /* silnější řez pro nadpisy */
   color: #212121;            /* kontrastnější odstín */
   margin-bottom: 16px;
 }
 
 /* Základní velikosti pro vybrané nadpisy */
 h2 {
   font-size: 40px;
   line-height: 52px;
 }
 @media (max-width: 768px) {
   h2 {
     font-size: 34px;
     line-height: 44px;
   }
 }
 
 h3 {
   font-size: 28px;
   line-height: 40px;
   margin-bottom: 12px;
 }
 @media (max-width: 768px) {
   h3 {
     font-size: 24px;
     line-height: 32px;
   }
 }
 
 /* Odstavce */
 p {
   margin-bottom: 30px;
   line-height: 1.7; /* ještě jednou definováno, aby bylo zřejmé */
 }
 
 /* Odkazy */
 a {
   color: #C79455; 
   text-decoration: none;
   position: relative;
   padding-bottom: 3px;
   transition: color 0.2s ease;
 }
 
 /* Animované podtržení při hoveru */
 a:before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 1px;
   background-color: #C79455;
   transform: scale3d(0, 1, 1);
   transition: transform 0.3s;
   border-radius: 6px;
 }
 a:hover {
   color: #c38954;
 }
 a:hover:before {
   transform: scale3d(1, 1, 1);
 }
 
 /* Základní nastavení sekcí */
 section {
   background-color: #faf9f8;
   padding: 60px 40px;
   margin-bottom: 40px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   border-radius: 4px;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }
 
/* 1) Základ: desktop verze */
/* Ponecháme vaše .topbar styling pro barvu pozadí, flex atd. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;             /* Desktop: logo vlevo, menu vpravo */
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: #282E3F;
  color: #fff;
}

/* Tlačítko "Menu" – skryté na desktopu */
.menu-toggle {
  display: none;             /* Desktop: neviditelné */
  background-color: #282E3F; /* Ladit s topbarem */
  color: #fff;
  border: 1px solid #C79455; 
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Lora', serif;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-toggle:hover {
  background-color: rgba(40,46,63,0.6);
}

/* Normálně: .topbar-menu se zobrazuje horizontálně na desktopu */
.topbar-menu a {
  color: #fff;
  margin-left: 20px; 
  font-size: 16px;
}

/* 2) Mobilní verze: */
@media (max-width: 768px) {
  /* Skrytí původní horizontální menu */
  .topbar-menu {
    display: none;  /* schované, dokud neklikneme na "Menu" */
    flex-direction: column; /* aby odkazy byly pod sebou */
    background: #282E3F;
    position: absolute;
    top: 100%;       /* pod topbarem – upravte podle reálné výšky */
    right: 0;
    left: 0;
    padding: 20px;
    z-index: 998;       /* aby bylo pod logem (z-index: 999) nebo nad – dle potřeby */

  }

  /* Tlačítko "Menu" se nyní zobrazí */
  .menu-toggle {
    display: inline-block; 
  }

  /* Po otevření menu, přidáme třídu .open => zobrazíme */
  .topbar-menu.open {
    display: flex;
  }

  /* Menu odkazy se zarovnají vlevo, se svislým spacingem */
  .topbar-menu a {
    margin: 10px 0;  
    font-size: 18px; /* mírně větší na mobilu, dle vkusu */
  }
}

 
 /* Styl loga v topbaru */
 .topbar-logo {
   display: inline-block;                 
   font-family: 'Lora', serif;
   font-weight: 700;
   font-size: 16px; 
   color: #fff;                           
 
   /* Vzhled rámečku: */
   /*border: 2px solid #C79455;  
   border-radius: 4px;       
   background-color: rgba(40, 46, 63, 0.6);
   padding: 8px 12px;    
 
   box-shadow: 0 2px 4px rgba(0,0,0,0.3);
   */
 }
 

 
 /* Hero obrázek */
 .hero {
   position: relative;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   height: 60vh;
   background-image: url('heroimage-advokatni-kancelar.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 .hero h1 {
   position: absolute;
   bottom: 10%;
   left: 10%;
   color: white;
   font-size: 3rem;
   text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
 }
 
 /* Accordion */
 .accordion-container {
  /* Mírné odsazení apod. */
  margin-top: 20px;
}

/* Nadpis togglu */
.accordion-toggle {
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  color: #212121;
  background-color: transparent;  /* Bez rámečku / pozadí */
  border: none;
  /*border-bottom: 2px solid #C79455;*/ /* Spodní linka ve zlatavé barvě */
  position: relative;              /* Pro pseudo-element ::before */
  transition: color 0.2s ease;
}

/* Zavřený stav => plus před nadpisem */
.accordion-toggle::before {
  position: absolute;
  left: 0;                      /* Vlevo */
  top: 50%;                     /* Napůl cesty vertikálně */
  transform: translateY(-50%);  /* Vertikální centrování */
  color: #C79455;               /* Zlatavě ladící barva */
  font-size: 1.2rem;
  margin-right: 8px;            /* Mezera za ikonu (pokud text navazuje) */
}

/* Při otevřeném stavu => "minus" před nadpisem */
.accordion-toggle.open::before {
  content: "-";
}

/* Hover efekt */
.accordion-toggle:hover {
  color: #444;
}

/* Skryjeme symbol plus/mínus tam, kde JS řídí ikony jinak? 
   Případně se to řeší jen jedním způsobem, dle potřeby. */

/* Obsah accordionu */
/* Zavřený stav – maxHeight 0, bez vnitřního odsazení */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 0 15px;     /* při zavřeném stavu 0 nahoře/dole */
  background-color: #faf9f8; 
  border-bottom: 2px solid #C79455;
  border-top: none;
  border-radius: 0 0 4px 4px;
  transition: max-height 0.3s ease;
}

/* Otevřený stav – větší odsazení (zde 20px nahoře/dole, 15px po stranách) */
.accordion-content.open {
  max-height: 600px;  
  padding: 20px 15px; 
}

 
 /* Tabulky */
 table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
   margin-bottom: 20px;
   background-color: #f9f9f9;
 }
 table th,
 table td {
   padding: 12px 16px;
   border: 1px solid #ddd;
   text-align: left;
 }
 table th {
   background-color: #282E3F;
   color: #fff;
 }
 table tr:nth-child(even) {
   background-color: #f2f2f2;
 }
 table tr:hover {
   background-color: #e6f7ff;
 }
 
 /* Větší odsazení pro všechny <ul> */
 ul {
   margin-left: 2em;
   margin-bottom: 2em;
   list-style: none;
 }
 
 /* Každá položka seznamu */
 ul li {
   position: relative;       
   padding-left: 30px;       
   margin-bottom: 8px;
   line-height: 1.5;         
 }
 
 /* Pseudo-element s ikonou (např. "task_alt") */
 ul li::before {
   content: "task_alt";
   font-family: "Material Symbols Outlined";
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
   
   position: absolute;
   left: 0;            
   top: 50%;           
   transform: translateY(-50%); 
 
   color: #C79455;     
   line-height: 1;     
 }
 
 /* Tlačítko "Zpět nahoru" */
 #backToTopBtn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   font-size: 1.5rem;
   cursor: pointer;
   display: none; 
   padding: 10px 15px;
   background-color: #C79455;
   color: #fff;
   border: none;
   border-radius: 4px;
   transition: opacity 0.2s ease;
   z-index: 999;
 }
 #backToTopBtn:hover {
   background-color: #c38954;
 }
 
 /* Footer */
 footer {
   background: #282E3F;
   color: #fff;
   text-align: center;
   padding: 30px 10px;
 }
 footer a {
   color: #C79455;
   transition: color 0.2s ease;
 }
 footer a:hover {
   color: #b5784c;
 }
 
 /* MEDIA QUERIES: zmenšíme padding sekcí, fonty, atd. při menších šířkách */
 @media (max-width: 768px) {
   section {
     padding: 30px 20px;
     margin-bottom: 20px;
   }
   .topbar-menu a {
     margin-left: 10px;
     font-size: 14px;
   }
   .hero h1 {
     font-size: 2rem;
   }
 }
 /* Omezovač textu (jako kniha) pro desktop a tablet */
.page-limiter {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* Výchozí styl pro menší obrazovky (mobily) = 100% šířka */
}

@media (min-width: 768px) {
  /* Od 768px (typický tablet) už budeme omezovat šířku textu */
  .page-limiter {
    max-width: 700px; 
    /* 700px je příjemná šířka pro lepší čitelnost,
       můžete zkusit 650–800px dle preference */
  }
}

@media (min-width: 1200px) {
  /* Na větších desktop displejích můžete ještě malinko navýšit,
     nebo ponechat 700px. Je to na vkusu. */
  .page-limiter {
    max-width: 800px;
  }
}