/* =========================================================
   TOPMEDICA / PD MODS / HEADER + MENU

   Soubor:
   assets/css/topmedica-pdmods-header.css

   Účel:
   Samostatný CSS modul Headeru a navigace.
   Načítá se po řídicím souboru topmedica-pdmods.css.

   Obsah:
   04-04 / HEADER ŠÍŘKA A KRAJNÍ ODSAZENÍ
   04-05 / MENU A ASTRA NAVIGAČNÍ MODEL
   ========================================================= */


/* =========================================================
   00-00 / DEBUG / INDIKÁTOR MODULU

   Nastavuje pouze diagnostický indikátor H.
   Funkční pravidla Headeru a Menu začínají v sekci 04-04.
   ========================================================= */

:root { --topmedica-debug-indicator-header: "H"; }



/* =========================================================
   04-04 / HEADER ŠÍŘKA A KRAJNÍ ODSAZENÍ
   ASTRA PRIMARY HEADER

   Sem patří:
   - šířka headerového rámu
   - levé a pravé krajní odsazení headeru
   - optické zarovnání loga, menu, CTA a hamburgeru
   - vztah headeru k obsahu
   - jemné korekce podle Astra breakpointů

   Princip:
   Astra konfigurátor se používá k vyčištění výchozích mezer.
   Astra zůstává šířkovou autoritou Headeru. PDmods drží
   pouze finální levý a pravý edge a společnou osu s BB.

   Aktuálně:
   - ověřený efektivní rám Headeru: 1240 px
   - výsledná vnitřní obsahová osa: 1200 px
   - levý edge: 20 px
   - pravý edge: 20 px
   - hodnoty jsou zatím stejné pro desktop, compact i mobile
   ========================================================= */


/* -------------------------------
   04-04-01 / Header edge proměnné

   Společná osa Header ↔ BB Content.
   Zdroj hodnoty je v řídicím CSS:
   --topmedica-layout-edge-inline

   Hodnota 20 px odpovídá BB paddingu v režimu Large
   a níže; nad 1240 px má BB vlastní padding 0 / 0 px.
   PDmods tato nastavení Beaver Builderu nepřebírá.

   Neměnit zde samostatně bez současného ověření
   BB row paddingu a osy skutečného webu.
   ------------------------------- */

:root {
  --topmedica-header-edge-left:
    var(--topmedica-layout-edge-inline);

  --topmedica-header-edge-right:
    var(--topmedica-layout-edge-inline);
}


/* -------------------------------
   04-04-02 / Astra primary header container
   základní krajní řízení přes padding

   Desktop header toto poslouchá spolehlivě.
   Compact/mobile header potřebuje navíc korekci grid row
   v následujícím bloku.
   ------------------------------- */

.ast-primary-header-bar .site-primary-header-wrap.ast-container[data-section="section-primary-header-builder"],
.ast-mobile-header-wrap .site-primary-header-wrap.ast-container[data-section="section-primary-header-builder"] {
  box-sizing: border-box;
  padding-left: var(--topmedica-header-edge-left) !important;
  padding-right: var(--topmedica-header-edge-right) !important;
}


/* -------------------------------
   04-04-03 / Astra compact/mobile header
   korekce krajního odsazení hamburger režimu

   Ověřená páka:
   V režimu 921 px a méně se pravý okraj hamburgeru
   nepodřizuje spolehlivě pouze paddingu hlavního
   header containeru. Proto se v compact/mobile režimu
   používá margin na vnitřní Astra grid row.

   Hodnoty bere ze stejných proměnných:
   --topmedica-header-edge-left
   --topmedica-header-edge-right
   ------------------------------- */

@media (max-width: 921px) {

  .ast-mobile-header-wrap .ast-builder-grid-row {
    box-sizing: border-box;
    margin-left: var(--topmedica-header-edge-left) !important;
    margin-right: var(--topmedica-header-edge-right) !important;
  }

}


/* -------------------------------
   04-04-04 / Nepoužívat 922 px micro patch

   Dřívější pokus:
   Nucené zobrazení mobile headeru v pásmu kolem 922 px.

   Výsledek:
   - projevil se pravý margin
   - hamburger měl jiný styl
   - off-canvas šířka spadla do nekonzistentního chování
   - vznikl hybridní stav

   Rozhodnutí:
   - záplatu nepoužívat
   - 922 px netestovat jako pracovní náhledovou šířku
   ------------------------------- */






/* ===========================================================================================================================================================================
   04-05 / MENU A ASTRA NAVIGAČNÍ MODEL - BEGIN

   Sem patří:
   - desktopové menu
   - tabletové a mobilní menu
   - hamburger
   - off-canvas panel
   - obsah před hlavním menu
   - samotné tělo off-canvas menu
   - obsah pod hlavním menu
   - CTA prvky
   - ikony
   - zavírání
   - podnabídky

   Základ:
   Header a navigace zůstávají v Astře.
   PDmods upravuje pouze vybrané chování a vzhled.

   Hlavní architektonické pravidlo:
   Každý číslovaný funkční blok je autonomní.

   Každý blok:
   - obsahuje pouze vlastní řídicí proměnné
   - obsahuje pouze vlastní CSS pravidla
   - neřídí jinou část navigace
   - nesmí vyžadovat přegenerování jiné části při běžném ladění

   Výjimky:
   - globální nastavení Astry
   - skutečně globální systémová pravidla
   - nadřazené breakpointové rozhodnutí projektu

   Breakpointový model Astry:
   - Desktop: 922 px a více
   - Tablet / compact: 545–921 px
   - Mobile: 544 px a méně

   Důležité:
   PDmods nepřepisuje pozici ani výšku prvku
   .ast-mobile-popup-inner.

   Ukotvení off-canvas panelu zprava,
   jeho vysouvání a výšku přes viewport
   nadále plně řídí Astra.
   ========================================================================================================================================================================== */



/* =========================================================
   04-05-00 / GLOBAL MENU

   Globální architektura navigace.

   Tento blok neurčuje vzhled jednotlivých částí menu.

   Navigační model:

   DESKTOP
   - Astra desktop menu
   - hlavní položky mohou být přímými odkazy
   - podnabídky se otevírají desktopovým mechanismem Astry

   TABLET + MOBILE
   - Astra hamburger
   - Astra off-canvas panel
   - rodičovské položky s podnabídkou fungují
     jako rozbalovací ovladače
   - vlastní JavaScript PDmods předává kliknutí
     existujícímu Astra .ast-menu-toggle
   - samotné rozbalení a sbalení nadále řídí Astra

   PDmods JavaScript:
   /assets/js/topmedica-pdmods.js

   Tento blok zatím neobsahuje vlastní proměnné
   ani vlastní CSS pravidla.
   ========================================================= */



/* =========================================================
   04-05-01 / TABLET + MOBILE NAVIGATION

   Nadřazená organizační část pro navigaci
   v režimu 921 px a méně.

   Členění:

   04-05-01-01 / Hamburger
   04-05-01-02 / Off-canvas panel
   04-05-01-03 / Before menu
   04-05-01-04 / Off-canvas menu body
   04-05-01-05 / Below menu

   Každá podsekce je autonomní
   a obsahuje vlastní proměnné a vlastní kód.
   ========================================================= */



/* ==============================================================================================================
   04-05-01-01 / HAMBURGER - BEGIN

   Spouštěcí prvek tabletového a mobilního off-canvas menu.

   Základní konstrukci hamburgeru řídí Astra.

   Aktuální projektové chování:
   - Tablet: hamburger + CTA v headeru
   - Mobile: hamburger bez CTA v headeru

   PDmods zde nyní upravuje pouze focus chování.

   Budoucí úpravy mohou zahrnovat:
   - rozměry
   - vlastní ikonu
   - barvy
   - tap stav
   - pozici
   ============================================================================================================== */


/* =========================================================
   04-05-01-01 / HAMBURGER / PROMĚNNÉ
   ========================================================= */

:root {

  --topmedica-hamburger-focus-outline-width: 2px;
  /* síla vlastního focus obrysu */

  --topmedica-hamburger-focus-outline-offset: 3px;
  /* vzdálenost focus obrysu od hamburgeru */

  --topmedica-hamburger-focus-outline-color:
    var(--ast-global-color-5);
  /* barva vlastního focus obrysu */

}



/* -------------------------------
   Hamburger / focus

   Běžný klik nebo tap:
   bez browserového a Astra focus obrysu.

   Ovládání klávesnicí:
   vlastní focus přes :focus-visible.
   ------------------------------- */

.ast-button-wrap
.menu-toggle.main-header-menu-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}


.ast-button-wrap
.menu-toggle.main-header-menu-toggle:focus-visible {
  outline:
    var(--topmedica-hamburger-focus-outline-width)
    solid
    var(--topmedica-hamburger-focus-outline-color) !important;

  outline-offset:
    var(--topmedica-hamburger-focus-outline-offset);

  box-shadow: none !important;
}


/* Firefox / odstranění vnitřního focus rámečku */

.ast-button-wrap
.menu-toggle.main-header-menu-toggle::-moz-focus-inner {
  border: 0 !important;
}



/* ==============================================================================================================
   04-05-01-01 / HAMBURGER - END
   ============================================================================================================== */



/* ==============================================================================================================
   04-05-01-02 / OFF-CANVAS PANEL - BEGIN

   Samotné plátno tabletového a mobilního menu.

   Sem patří:
   - šířka panelu
   - případný background
   - border
   - radius panelu
   - shadow
   - případné budoucí úpravy animace

   Důležité:
   Pozici, výšku a vysouvání panelu nadále řídí Astra.

   PDmods nepřepisuje:
   - position
   - height

   prvku:
   .ast-mobile-popup-inner
   ============================================================================================================== */


/* =========================================================
   04-05-01-02 / OFF-CANVAS PANEL / PROMĚNNÉ
   ========================================================= */

:root {

  --topmedica-offcanvas-tablet-width:
    clamp(340px, 52vw, 420px);
  /* šířka panelu v tablet režimu 545–921 px */

  --topmedica-offcanvas-mobile-width:
    min(88vw, 360px);
  /* šířka panelu v mobilním režimu do 544 px */

}



/* -------------------------------
   Off-canvas panel / tablet

   545–921 px
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    width:
      var(--topmedica-offcanvas-tablet-width) !important;

    max-width: none !important;
  }

}



/* -------------------------------
   Off-canvas panel / mobile

   544 px a méně
   ------------------------------- */

@media (max-width: 544px) {

  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    width:
      var(--topmedica-offcanvas-mobile-width) !important;

    max-width: none !important;
  }

}



/* ==============================================================================================================
   04-05-01-02 / OFF-CANVAS PANEL - END
   ============================================================================================================== */



/* ==============================================================================================================
   04-05-01-03 / BEFORE MENU - BEGIN

   Horní vnitřní část off-canvas panelu.

   Tvoří ji:
   - volitelný ikonový řádek vlevo
   - maximálně tři ikonové prvky
   - zavírací tlačítko vpravo

   Aktuálně:
   - prvek 01 = piktogram značky s odkazem na homepage
   - prvky 02 a 03 jsou připravené, ale nepoužité

   HTML modul Astry s ikonovým řádkem
   je přesunut jako celý blok.

   Díky tomu:
   - ikonka
   - její Astra Customizer ovladače
   - skutečný layout modulu

   zůstávají pohromadě.

   Menu začíná až pod touto horní zónou.
   ============================================================================================================== */


/* =========================================================
   04-05-01-03 / BEFORE MENU / PROMĚNNÉ
   ========================================================= */

:root {


  /* ---------------------------------------------------------
     1. Ikonový řádek / pozice tablet
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-row-tablet-offset-top: 10px;
  /* odsazení ikonového řádku od horní hrany panelu */

  --topmedica-offcanvas-icon-row-tablet-offset-left: 20px;
  /* odsazení ikonového řádku od levé hrany panelu */


  /* ---------------------------------------------------------
     2. Ikonový řádek / pozice mobile
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-row-mobile-offset-top: 30px;
  /* odsazení ikonového řádku od horní hrany panelu */

  --topmedica-offcanvas-icon-row-mobile-offset-left: 20px;
  /* odsazení ikonového řádku od levé hrany panelu */


  /* ---------------------------------------------------------
     3. Ikonový řádek / rozestup
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-row-gap: 12px;
  /* vodorovný rozestup mezi prvky 01, 02 a 03 */


  /* ---------------------------------------------------------
     4. Ikonový řádek / prvek 01
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-01-image:
    url("/wp-content/themes/topmedica-child/assets/img/logo-piktogram-off-canvas.svg");
  /* URL obrázku prvku 01 */

  --topmedica-offcanvas-icon-01-width: 40px;
  /* šířka prvku 01 */

  --topmedica-offcanvas-icon-01-height: 40px;
  /* výška prvku 01 */


  /* ---------------------------------------------------------
     5. Ikonový řádek / prvek 02
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-02-image: none;
  /* URL obrázku prvku 02 */

  --topmedica-offcanvas-icon-02-width: 40px;
  /* šířka prvku 02 */

  --topmedica-offcanvas-icon-02-height: 40px;
  /* výška prvku 02 */


  /* ---------------------------------------------------------
     6. Ikonový řádek / prvek 03
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-03-image: none;
  /* URL obrázku prvku 03 */

  --topmedica-offcanvas-icon-03-width: 40px;
  /* šířka prvku 03 */

  --topmedica-offcanvas-icon-03-height: 40px;
  /* výška prvku 03 */


  /* ---------------------------------------------------------
     7. Horní zóna / výška a spodní mezera
     --------------------------------------------------------- */

  --topmedica-offcanvas-icon-row-height:
    max(
      var(--topmedica-offcanvas-icon-01-height),
      var(--topmedica-offcanvas-icon-02-height),
      var(--topmedica-offcanvas-icon-03-height)
    );
  /* výška ikonového řádku podle nejvyšší připravené ikony */

  --topmedica-offcanvas-top-row-bottom-gap: 12px;
  /* mezera mezi horním řádkem a následujícím menu */


  /* ---------------------------------------------------------
     8. Zavírací tlačítko / pozice tablet
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-tablet-offset-top: 30px;
  /* odsazení tlačítka od horní hrany panelu */

  --topmedica-offcanvas-close-tablet-offset-right: 20px;
  /* odsazení tlačítka od pravé hrany panelu */


  /* ---------------------------------------------------------
     9. Zavírací tlačítko / pozice mobile
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-mobile-offset-top: 30px;
  /* odsazení tlačítka od horní hrany panelu */

  --topmedica-offcanvas-close-mobile-offset-right: 20px;
  /* odsazení tlačítka od pravé hrany panelu */


  /* ---------------------------------------------------------
     10. Zavírací tlačítko / tvar
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-button-size: 40px;
  /* šířka a výška celé klikací plochy */

  --topmedica-offcanvas-close-border-width: 0px;
  /* síla obrysu */

  --topmedica-offcanvas-close-border-radius-top-left: 20px;
  /* poloměr levého horního rohu */

  --topmedica-offcanvas-close-border-radius-top-right: 0px;
  /* poloměr pravého horního rohu */

  --topmedica-offcanvas-close-border-radius-bottom-right: 20px;
  /* poloměr pravého spodního rohu */

  --topmedica-offcanvas-close-border-radius-bottom-left: 20px;
  /* poloměr levého spodního rohu */


  /* ---------------------------------------------------------
     11. Zavírací tlačítko / vlastní křížek
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-icon-size: 20px;
  /* délka čar tvořících křížek */

  --topmedica-offcanvas-close-icon-line-width: 3px;
  /* síla čar křížku */

  --topmedica-offcanvas-close-icon-line-radius: 999px;
  /* zakulacení konců čar */


  /* ---------------------------------------------------------
     12. Zavírací tlačítko / základní barvy
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-background-color:
    var(--ast-global-color-7);
  /* pozadí tlačítka */

  --topmedica-offcanvas-close-border-color:
    transparent;
  /* barva obrysu */

  --topmedica-offcanvas-close-icon-color:
    var(--ast-global-color-2);
  /* barva křížku */


  /* ---------------------------------------------------------
     13. Zavírací tlačítko / tap barvy
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-tap-background-color:
    var(--ast-global-color-2);
  /* pozadí při stisknutí */

  --topmedica-offcanvas-close-tap-border-color:
    transparent;
  /* obrys při stisknutí */

  --topmedica-offcanvas-close-tap-icon-color:
    var(--ast-global-color-5);
  /* barva křížku při stisknutí */


  /* ---------------------------------------------------------
     14. Before menu / focus
     --------------------------------------------------------- */

  --topmedica-before-menu-focus-outline-width: 2px;
  /* síla focus obrysu */

  --topmedica-before-menu-focus-outline-offset: 3px;
  /* vzdálenost focus obrysu od ovládaného prvku */

  --topmedica-before-menu-focus-outline-color:
    var(--ast-global-color-5);
  /* barva focus obrysu */


  /* ---------------------------------------------------------
     15. Zavírací tlačítko / přechody
     --------------------------------------------------------- */

  --topmedica-offcanvas-close-transition-duration: 120ms;
  /* rychlost změny barev zavíracího tlačítka */

}



/* -------------------------------
   Before menu / základní horní zóna
   ------------------------------- */


/* Hlavička Astry s křížkem */

#ast-mobile-popup .ast-mobile-popup-header {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  box-sizing: border-box;

  pointer-events: none;
}


/* Křížek zůstává klikací */

#ast-mobile-popup .ast-mobile-popup-header .menu-toggle-close {
  pointer-events: auto;
}


/* Celý Astra HTML modul s ikonovým řádkem */

#ast-mobile-popup .ast-header-html-1 {
  position: relative;
  z-index: 2;

  display: block !important;

  width: 100%;
  min-width: 0;

  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  padding: 0 !important;

  box-sizing: border-box;
}


/* Vnitřní obaly HTML modulu */

#ast-mobile-popup .ast-header-html-1 .ast-header-html,
#ast-mobile-popup .ast-header-html-1 .ast-builder-html-element {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


/* Ikonový řádek uvnitř HTML modulu */

#ast-mobile-popup .topmedica-offcanvas-icon-row {
  position: static;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;
  height: 100%;

  gap:
    var(--topmedica-offcanvas-icon-row-gap);

  margin: 0;

  box-sizing: border-box;

  font-size: 0;
  line-height: 0;
}



/* -------------------------------
   Before menu / tablet

   545–921 px
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup {
    --topmedica-offcanvas-top-zone-height:
      max(
        calc(
          var(--topmedica-offcanvas-close-tablet-offset-top)
          + var(--topmedica-offcanvas-close-button-size)
          + var(--topmedica-offcanvas-top-row-bottom-gap)
        ),
        calc(
          var(--topmedica-offcanvas-icon-row-tablet-offset-top)
          + var(--topmedica-offcanvas-icon-row-height)
          + var(--topmedica-offcanvas-top-row-bottom-gap)
        )
      );
  }


  #ast-mobile-popup .ast-mobile-popup-header {
    min-height:
      var(--topmedica-offcanvas-top-zone-height) !important;

    padding:
      var(--topmedica-offcanvas-close-tablet-offset-top)
      var(--topmedica-offcanvas-close-tablet-offset-right)
      0
      0;
  }


  #ast-mobile-popup .ast-header-html-1 {
    height:
      var(--topmedica-offcanvas-top-zone-height);

    margin-top:
      calc(
        0px
        - var(--topmedica-offcanvas-top-zone-height)
      ) !important;
  }


  #ast-mobile-popup .topmedica-offcanvas-icon-row {
    padding:
      var(--topmedica-offcanvas-icon-row-tablet-offset-top)
      0
      0
      var(--topmedica-offcanvas-icon-row-tablet-offset-left);
  }

}



/* -------------------------------
   Before menu / mobile

   544 px a méně
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup {
    --topmedica-offcanvas-top-zone-height:
      max(
        calc(
          var(--topmedica-offcanvas-close-mobile-offset-top)
          + var(--topmedica-offcanvas-close-button-size)
          + var(--topmedica-offcanvas-top-row-bottom-gap)
        ),
        calc(
          var(--topmedica-offcanvas-icon-row-mobile-offset-top)
          + var(--topmedica-offcanvas-icon-row-height)
          + var(--topmedica-offcanvas-top-row-bottom-gap)
        )
      );
  }


  #ast-mobile-popup .ast-mobile-popup-header {
    min-height:
      var(--topmedica-offcanvas-top-zone-height) !important;

    padding:
      var(--topmedica-offcanvas-close-mobile-offset-top)
      var(--topmedica-offcanvas-close-mobile-offset-right)
      0
      0;
  }


  #ast-mobile-popup .ast-header-html-1 {
    height:
      var(--topmedica-offcanvas-top-zone-height);

    margin-top:
      calc(
        0px
        - var(--topmedica-offcanvas-top-zone-height)
      ) !important;
  }


  #ast-mobile-popup .topmedica-offcanvas-icon-row {
    padding:
      var(--topmedica-offcanvas-icon-row-mobile-offset-top)
      0
      0
      var(--topmedica-offcanvas-icon-row-mobile-offset-left);
  }

}



/* -------------------------------
   Before menu / ikonové prvky
   ------------------------------- */


/* Společná konstrukce */

#ast-mobile-popup .topmedica-offcanvas-icon-item {
  display: block;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  border: 0;
  box-shadow: none;

  font-size: 0;
  line-height: 0;
  text-decoration: none;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* Prvek 01 */

#ast-mobile-popup .topmedica-offcanvas-icon-item-01 {
  width:
    var(--topmedica-offcanvas-icon-01-width);

  height:
    var(--topmedica-offcanvas-icon-01-height);

  background-image:
    var(--topmedica-offcanvas-icon-01-image);
}


/* Prvek 02 */

#ast-mobile-popup .topmedica-offcanvas-icon-item-02 {
  width:
    var(--topmedica-offcanvas-icon-02-width);

  height:
    var(--topmedica-offcanvas-icon-02-height);

  background-image:
    var(--topmedica-offcanvas-icon-02-image);
}


/* Prvek 03 */

#ast-mobile-popup .topmedica-offcanvas-icon-item-03 {
  width:
    var(--topmedica-offcanvas-icon-03-width);

  height:
    var(--topmedica-offcanvas-icon-03-height);

  background-image:
    var(--topmedica-offcanvas-icon-03-image);
}



/* -------------------------------
   Before menu / zavírací tlačítko
   ------------------------------- */

#ast-mobile-popup .menu-toggle-close {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width:
    var(--topmedica-offcanvas-close-button-size) !important;

  height:
    var(--topmedica-offcanvas-close-button-size) !important;

  min-width:
    var(--topmedica-offcanvas-close-button-size);

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--topmedica-offcanvas-close-icon-color) !important;

  background-color:
    var(--topmedica-offcanvas-close-background-color) !important;

  border-width:
    var(--topmedica-offcanvas-close-border-width) !important;

  border-style:
    solid !important;

  border-color:
    var(--topmedica-offcanvas-close-border-color) !important;

  border-top-left-radius:
    var(--topmedica-offcanvas-close-border-radius-top-left) !important;

  border-top-right-radius:
    var(--topmedica-offcanvas-close-border-radius-top-right) !important;

  border-bottom-right-radius:
    var(--topmedica-offcanvas-close-border-radius-bottom-right) !important;

  border-bottom-left-radius:
    var(--topmedica-offcanvas-close-border-radius-bottom-left) !important;

  box-sizing: border-box;
  appearance: none;

  font-size: 0;
  line-height: 1;

  box-shadow: none !important;
  cursor: pointer;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    color
    var(--topmedica-offcanvas-close-transition-duration)
    ease,

    background-color
    var(--topmedica-offcanvas-close-transition-duration)
    ease,

    border-color
    var(--topmedica-offcanvas-close-transition-duration)
    ease;
}



/* -------------------------------
   Before menu / vlastní křížek
   ------------------------------- */


/* Skrytí původního SVG Astry */

#ast-mobile-popup .menu-toggle-close .ast-svg-iconset {
  display: none !important;
}


/* Dvě čáry vlastního křížku */

#ast-mobile-popup .menu-toggle-close::before,
#ast-mobile-popup .menu-toggle-close::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width:
    var(--topmedica-offcanvas-close-icon-size);

  height:
    var(--topmedica-offcanvas-close-icon-line-width);

  background-color:
    currentColor;

  border-radius:
    var(--topmedica-offcanvas-close-icon-line-radius);

  transform-origin: center;
  pointer-events: none;
}


#ast-mobile-popup .menu-toggle-close::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


#ast-mobile-popup .menu-toggle-close::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}



/* -------------------------------
   Before menu / zavírací tlačítko / tap
   ------------------------------- */

#ast-mobile-popup .menu-toggle-close:active {
  color:
    var(--topmedica-offcanvas-close-tap-icon-color) !important;

  background-color:
    var(--topmedica-offcanvas-close-tap-background-color) !important;

  border-color:
    var(--topmedica-offcanvas-close-tap-border-color) !important;
}



/* -------------------------------
   Before menu / focus

   Týká se:
   - zavíracího tlačítka
   - volitelných ikonových odkazů

   Běžný klik nebo tap:
   bez browserového a Astra focus obrysu.

   Ovládání klávesnicí:
   vlastní focus přes :focus-visible.
   ------------------------------- */

#ast-mobile-popup
.menu-toggle-close:focus,

#ast-mobile-popup
.topmedica-offcanvas-icon-item:focus {
  outline: none !important;
  box-shadow: none !important;
}


#ast-mobile-popup
.menu-toggle-close:focus-visible,

#ast-mobile-popup
.topmedica-offcanvas-icon-item:focus-visible {
  outline:
    var(--topmedica-before-menu-focus-outline-width)
    solid
    var(--topmedica-before-menu-focus-outline-color) !important;

  outline-offset:
    var(--topmedica-before-menu-focus-outline-offset);

  box-shadow: none !important;
}


/* Firefox / odstranění vnitřního focus rámečku */

#ast-mobile-popup
.menu-toggle-close::-moz-focus-inner {
  border: 0 !important;
}



/* ==============================================================================================================
   04-05-01-03 / BEFORE MENU - END
   ============================================================================================================== */









/* ==============================================================================================================
   04-05-01-04 / OFF-CANVAS SENDVIČOVÉ MENU BODY - BEGIN

   Samotné tělo tabletového a mobilního menu uvnitř off-canvas panelu.

   Astra Customizer označuje tuto část jako:
   „Sendvičové menu“.

   PDmods v této sekci přebírá kompletní vizuální řízení
   tabletového a mobilního sendvičového menu.

   Astra nadále zajišťuje:
   - HTML strukturu menu
   - základní navigační mechaniku
   - otevírání a zavírání submenu
   - stavové třídy a atributy
   - zobrazení a skrytí .sub-menu

   PDmods řídí:
   - vnitřní odsazení celého menu
   - rozdílný spacing pro tablet a mobile
   - hlavní položky
   - barvy textu a pozadí
   - stavy normal / hover / active
   - rodičovské položky
   - rozbalovací tlačítka
   - vlastní rozbalovací ikonku
   - otevřený stav rodičovské položky
   - společný vizuální blok rodič + submenu
   - background, border a radius otevřeného bloku
   - submenu layout
   - odsazení submenu
   - podpoložky
   - volitelné odrážky podpoložek
   - focus a interakční stavy

   Po převzetí těchto parametrů do PDmods
   se vzhled této části dále neladí
   v Astra Customizeru.

   Navigační logiku rodičovských položek doplňuje:
   /assets/js/topmedica-pdmods.js

   Navigační model tablet + mobile:
   - rodičovská položka s podnabídkou není přímým odkazem
   - celý rodičovský řádek slouží k rozbalení a sbalení
   - vlastní JavaScript PDmods předává akci
     existujícímu Astra .ast-menu-toggle
   - samotné otevření a zavření nadále provádí Astra

   Astra stav otevřeného submenu označuje:
   - .ast-submenu-expanded na rodičovském <li>
   - aria-expanded="true" na .ast-menu-toggle
   ============================================================================================================== */



/* =========================================================
   04-05-01-04 / OFF-CANVAS SENDVIČOVÉ MENU BODY / PROMĚNNÉ
   ========================================================= */

:root {


  /* ---------------------------------------------------------
     1. Celé menu / vnitřní odsazení / tablet

     Tablet:
     545–921 px
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-tablet-padding-top: 0px;
  /* horní vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-tablet-padding-right: 20px;
  /* pravé vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-tablet-padding-bottom: 0px;
  /* spodní vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-tablet-padding-left: 20px;
  /* levé vnitřní odsazení celého menu */


  /* ---------------------------------------------------------
     2. Celé menu / vnitřní odsazení / mobile

     Mobile:
     544 px a méně
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-mobile-padding-top: 0px;
  /* horní vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-mobile-padding-right: 20px;
  /* pravé vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-mobile-padding-bottom: 0px;
  /* spodní vnitřní odsazení celého menu */

  --topmedica-offcanvas-menu-mobile-padding-left: 20px;
  /* levé vnitřní odsazení celého menu */


  /* ---------------------------------------------------------
     3. Hlavní položky / rozestup
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-item-gap: 4px;
  /* svislá mezera mezi hlavními položkami menu */


  /* ---------------------------------------------------------
     4. Hlavní položky / rozměry / tablet
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-item-tablet-min-height: 52px;
  /* minimální výška řádku hlavní položky */

  --topmedica-offcanvas-menu-main-item-tablet-padding-left: 16px;
  /* levé odsazení textu hlavní položky */

  --topmedica-offcanvas-menu-main-item-tablet-padding-right: 16px;
  /* pravé odsazení běžné hlavní položky */

  --topmedica-offcanvas-menu-parent-tablet-padding-right: 64px;
  /* pravé odsazení rodičovské položky s místem pro rozbalovací tlačítko */


  /* ---------------------------------------------------------
     5. Hlavní položky / rozměry / mobile
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-item-mobile-min-height: 52px;
  /* minimální výška řádku hlavní položky */

  --topmedica-offcanvas-menu-main-item-mobile-padding-left: 16px;
  /* levé odsazení textu hlavní položky */

  --topmedica-offcanvas-menu-main-item-mobile-padding-right: 16px;
  /* pravé odsazení běžné hlavní položky */

  --topmedica-offcanvas-menu-parent-mobile-padding-right: 64px;
  /* pravé odsazení rodičovské položky s místem pro rozbalovací tlačítko */


  /* ---------------------------------------------------------
     6. Hlavní položky / normal
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-color:
    var(--ast-global-color-3);
  /* barva textu hlavní položky */

  --topmedica-offcanvas-menu-main-background-color:
    transparent;
  /* pozadí hlavní položky */


  /* ---------------------------------------------------------
     7. Hlavní položky / hover
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-hover-color:
    var(--ast-global-color-2);
  /* barva textu při hoveru */

  --topmedica-offcanvas-menu-main-hover-background-color:
    transparent;
  /* pozadí při hoveru */


  /* ---------------------------------------------------------
     8. Hlavní položky / active

     Používá se pro:
     - aktuální stránku
     - aktuální rodičovskou sekci
     - skutečný :active tap stav
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-main-active-color:
    var(--ast-global-color-2);
  /* barva textu aktivní položky */

  --topmedica-offcanvas-menu-main-active-background-color:
    transparent;
  /* pozadí aktivní položky */


  /* ---------------------------------------------------------
     9. Rozbalovací tlačítko / klikací plocha
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-toggle-width: 52px;
  /* šířka klikací plochy rozbalovacího tlačítka */

  --topmedica-offcanvas-menu-toggle-tablet-offset-right: 0px;
  /* odsazení tlačítka zprava v tablet režimu */

  --topmedica-offcanvas-menu-toggle-mobile-offset-right: 0px;
  /* odsazení tlačítka zprava v mobile režimu */


  /* ---------------------------------------------------------
     10. Rozbalovací ikonka
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-toggle-icon-size: 10px;
  /* velikost vlastního chevronu */

  --topmedica-offcanvas-menu-toggle-icon-line-width: 2px;
  /* síla čar chevronu */

  --topmedica-offcanvas-menu-toggle-icon-color:
    var(--ast-global-color-3);
  /* barva ikonky v zavřeném stavu */

  --topmedica-offcanvas-menu-toggle-icon-open-color:
    var(--ast-global-color-2);
  /* barva ikonky v otevřeném stavu */

  --topmedica-offcanvas-menu-toggle-icon-vertical-shift: -2px;
  /* jemný svislý posun ikonky */

  --topmedica-offcanvas-menu-toggle-transition-duration: 180ms;
  /* rychlost otočení a změny barvy ikonky */


  /* ---------------------------------------------------------
     11. Otevřený blok rodič + submenu / pozadí
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-open-block-background-color:
    var(--ast-global-color-7);
  /* společné pozadí otevřeného rodiče a submenu */


  /* ---------------------------------------------------------
     12. Otevřený blok rodič + submenu / border
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-open-block-border-width: 1px;
  /* síla obrysu otevřeného bloku */

  --topmedica-offcanvas-menu-open-block-border-color:
    var(--ast-global-color-6);
  /* barva obrysu otevřeného bloku */


  /* ---------------------------------------------------------
     13. Otevřený blok rodič + submenu / radius
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-open-block-radius-top-left: 16px;
  /* levý horní roh */

  --topmedica-offcanvas-menu-open-block-radius-top-right: 16px;
  /* pravý horní roh */

  --topmedica-offcanvas-menu-open-block-radius-bottom-right: 16px;
  /* pravý spodní roh */

  --topmedica-offcanvas-menu-open-block-radius-bottom-left: 16px;
  /* levý spodní roh */


  /* ---------------------------------------------------------
     14. Otevřený rodičovský řádek
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-open-parent-color:
    var(--ast-global-color-2);
  /* barva textu rodičovské položky v otevřeném stavu */

  --topmedica-offcanvas-menu-open-parent-background-color:
    transparent;
  /* samostatné pozadí rodičovského řádku */


  /* ---------------------------------------------------------
     15. Submenu / pozadí
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-background-color:
    transparent;
  /* pozadí samotné části submenu */


  /* ---------------------------------------------------------
     16. Submenu / layout / tablet
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-tablet-padding-top: 0px;
  /* horní odsazení submenu */

  --topmedica-offcanvas-submenu-tablet-padding-right: 0px;
  /* pravé odsazení submenu */

  --topmedica-offcanvas-submenu-tablet-padding-bottom: 10px;
  /* spodní odsazení submenu */

  --topmedica-offcanvas-submenu-tablet-padding-left: 0px;
  /* levé odsazení celého submenu */


  /* ---------------------------------------------------------
     17. Submenu / layout / mobile
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-mobile-padding-top: 0px;
  /* horní odsazení submenu */

  --topmedica-offcanvas-submenu-mobile-padding-right: 0px;
  /* pravé odsazení submenu */

  --topmedica-offcanvas-submenu-mobile-padding-bottom: 10px;
  /* spodní odsazení submenu */

  --topmedica-offcanvas-submenu-mobile-padding-left: 0px;
  /* levé odsazení celého submenu */


  /* ---------------------------------------------------------
     18. Podpoložky / rozměry / tablet
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-item-tablet-min-height: 42px;
  /* minimální výška řádku podpoložky */

  --topmedica-offcanvas-submenu-item-tablet-padding-left: 16px;
  /* levé odsazení obsahu podpoložky */

  --topmedica-offcanvas-submenu-item-tablet-padding-right: 16px;
  /* pravé odsazení obsahu podpoložky */


  /* ---------------------------------------------------------
     19. Podpoložky / rozměry / mobile
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-item-mobile-min-height: 42px;
  /* minimální výška řádku podpoložky */

  --topmedica-offcanvas-submenu-item-mobile-padding-left: 16px;
  /* levé odsazení obsahu podpoložky */

  --topmedica-offcanvas-submenu-item-mobile-padding-right: 16px;
  /* pravé odsazení obsahu podpoložky */


  /* ---------------------------------------------------------
     20. Podpoložky / normal
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-item-color:
    var(--ast-global-color-3);
  /* barva textu podpoložky */

  --topmedica-offcanvas-submenu-item-background-color:
    transparent;
  /* pozadí podpoložky */


  /* ---------------------------------------------------------
     21. Podpoložky / hover
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-item-hover-color:
    var(--ast-global-color-2);
  /* barva textu podpoložky při hoveru */

  --topmedica-offcanvas-submenu-item-hover-background-color:
    transparent;
  /* pozadí podpoložky při hoveru */


  /* ---------------------------------------------------------
     22. Podpoložky / active
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-item-active-color:
    var(--ast-global-color-2);
  /* barva textu aktivní podpoložky */

  --topmedica-offcanvas-submenu-item-active-background-color:
    transparent;
  /* pozadí aktivní podpoložky */


  /* ---------------------------------------------------------
     23. Podpoložky / volitelná odrážka

     Pro úplné vypnutí:
     none

     Pro zapnutí:
     inline-flex
     --------------------------------------------------------- */

  --topmedica-offcanvas-submenu-marker-display: inline-flex;
  /* zapnutí nebo vypnutí vlastní odrážky */

  --topmedica-offcanvas-submenu-marker-content: "•";
  /* znak nebo symbol odrážky */

  --topmedica-offcanvas-submenu-marker-width: 12px;
  /* rezervovaná šířka pro odrážku */

  --topmedica-offcanvas-submenu-marker-gap: 8px;
  /* mezera mezi odrážkou a textem */

  --topmedica-offcanvas-submenu-marker-color:
    var(--ast-global-color-2);
  /* barva odrážky */

  --topmedica-offcanvas-submenu-marker-font-size: 14px;
  /* velikost textového symbolu odrážky */

  --topmedica-offcanvas-submenu-marker-vertical-shift: 0px;
  /* jemný svislý posun odrážky */


  /* ---------------------------------------------------------
     24. Focus
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-focus-outline-width: 2px;
  /* síla focus obrysu */

  --topmedica-offcanvas-menu-focus-outline-offset: 3px;
  /* vzdálenost focus obrysu od ovládaného prvku */

  --topmedica-offcanvas-menu-focus-outline-color:
    var(--ast-global-color-2);
  /* barva focus obrysu */

  /* ---------------------------------------------------------
     25. Přechody
     --------------------------------------------------------- */

  --topmedica-offcanvas-menu-transition-duration: 160ms;
  /* rychlost změny barev a pozadí */



  /* ---------------------------------------------------------
     26. Submenu / UX animace

     Výška submenu není pevně omezena.

     JavaScript při každém otevření změří skutečnou
     aktuální výšku konkrétního submenu a předá ji CSS.

     Výsledek:
     - žádný obsah nemůže být uříznutý
     - každé submenu se rozbalí na vlastní skutečnou výšku
     - systém zůstává pružný při budoucích změnách menu

     Zavření:
     rychlejší, ale stále viditelné.

     Otevření:
     pomalejší a zřetelně rozvinuté shora dolů.
     --------------------------------------------------------- */
--topmedica-offcanvas-submenu-open-duration: 380ms;
/* délka animace otevření submenu */

--topmedica-offcanvas-submenu-close-duration: 380ms;
/* délka animace zavření submenu */

--topmedica-offcanvas-menu-open-block-transition-duration: 240ms;
/* délka změny pozadí a obrysu otevřeného bloku */

--topmedica-offcanvas-submenu-open-easing:
  cubic-bezier(0.2, 0.8, 0.2, 1);
/* průběh otevření */

--topmedica-offcanvas-submenu-close-easing:
  cubic-bezier(0.2, 0.8, 0.2, 1);
/* průběh zavření */

}

/* =========================================================
   OFF-CANVAS SENDVIČOVÉ MENU BODY / ZÁKLADNÍ LAYOUT
   ========================================================= */


/* Astra modul mobilního menu */

#ast-mobile-popup
.ast-builder-menu-mobile {
  width: 100%;
  min-width: 0;
}


/* Hlavní seznam menu */

#ast-mobile-popup
#ast-hf-mobile-menu {
  display: block !important;

  width: 100%;

  margin: 0;

  list-style: none;

  box-sizing: border-box;
}



/* -------------------------------
   Celé menu / tablet

   545–921 px
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu {
    padding:
      var(--topmedica-offcanvas-menu-tablet-padding-top)
      var(--topmedica-offcanvas-menu-tablet-padding-right)
      var(--topmedica-offcanvas-menu-tablet-padding-bottom)
      var(--topmedica-offcanvas-menu-tablet-padding-left);
  }

}



/* -------------------------------
   Celé menu / mobile

   544 px a méně
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu {
    padding:
      var(--topmedica-offcanvas-menu-mobile-padding-top)
      var(--topmedica-offcanvas-menu-mobile-padding-right)
      var(--topmedica-offcanvas-menu-mobile-padding-bottom)
      var(--topmedica-offcanvas-menu-mobile-padding-left);
  }

}



/* =========================================================
   HLAVNÍ POLOŽKY MENU
   ========================================================= */


/* Přímé položky první úrovně */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item {
  position: relative;

  width: 100%;

  margin:
    0
    0
    var(--topmedica-offcanvas-menu-main-item-gap)
    0;

  padding: 0;

  box-sizing: border-box;
}


/* Poslední položka bez spodní mezery */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item:last-child {
  margin-bottom: 0;
}


/* Společná konstrukce hlavního odkazu */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item
> .menu-link {
  display: flex;
  align-items: center;

  width: 100%;

  margin: 0;

  color:
    var(--topmedica-offcanvas-menu-main-color) !important;

  background-color:
    var(--topmedica-offcanvas-menu-main-background-color) !important;

  border: 0;

  box-sizing: border-box;

  text-decoration: none;

  transition:
    color
    var(--topmedica-offcanvas-menu-transition-duration)
    ease,

    background-color
    var(--topmedica-offcanvas-menu-transition-duration)
    ease;
}



/* -------------------------------
   Hlavní položky / tablet
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item
  > .menu-link {
    min-height:
      var(--topmedica-offcanvas-menu-main-item-tablet-min-height);

    padding:
      0
      var(--topmedica-offcanvas-menu-main-item-tablet-padding-right)
      0
      var(--topmedica-offcanvas-menu-main-item-tablet-padding-left);
  }


  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .menu-link {
    padding-right:
      var(--topmedica-offcanvas-menu-parent-tablet-padding-right);
  }

}



/* -------------------------------
   Hlavní položky / mobile
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item
  > .menu-link {
    min-height:
      var(--topmedica-offcanvas-menu-main-item-mobile-min-height);

    padding:
      0
      var(--topmedica-offcanvas-menu-main-item-mobile-padding-right)
      0
      var(--topmedica-offcanvas-menu-main-item-mobile-padding-left);
  }


  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .menu-link {
    padding-right:
      var(--topmedica-offcanvas-menu-parent-mobile-padding-right);
  }

}



/* -------------------------------
   Hlavní položky / hover

   Pouze zařízení se skutečným hoverem.
   ------------------------------- */

@media (hover: hover) and (pointer: fine) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item
  > .menu-link:hover {
    color:
      var(--topmedica-offcanvas-menu-main-hover-color) !important;

    background-color:
      var(--topmedica-offcanvas-menu-main-hover-background-color) !important;
  }

}



/* -------------------------------
   Hlavní položky / active
   ------------------------------- */

#ast-mobile-popup
#ast-hf-mobile-menu
> .current-menu-item
> .menu-link,

#ast-mobile-popup
#ast-hf-mobile-menu
> .current-menu-ancestor
> .menu-link,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item
> .menu-link:active {
  color:
    var(--topmedica-offcanvas-menu-main-active-color) !important;

  background-color:
    var(--topmedica-offcanvas-menu-main-active-background-color) !important;
}



/* =========================================================
   RODIČOVSKÉ POLOŽKY S PODNABÍDKOU
   ========================================================= */


/* Rodičovská položka */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children {
  position: relative;

  border-width:
    var(--topmedica-offcanvas-menu-open-block-border-width);

  border-style: solid;

  border-color:
    transparent;

  border-top-left-radius:
    var(--topmedica-offcanvas-menu-open-block-radius-top-left);

  border-top-right-radius:
    var(--topmedica-offcanvas-menu-open-block-radius-top-right);

  border-bottom-right-radius:
    var(--topmedica-offcanvas-menu-open-block-radius-bottom-right);

  border-bottom-left-radius:
    var(--topmedica-offcanvas-menu-open-block-radius-bottom-left);

  background-color:
    transparent;

  box-sizing: border-box;
transition:
  background-color
  var(--topmedica-offcanvas-menu-open-block-transition-duration)
  ease-out,

  border-color
  var(--topmedica-offcanvas-menu-open-block-transition-duration)
  ease-out;
}


/* Celý rodičovský řádek je ovladač */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .menu-link {
  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}



/* =========================================================
   PŮVODNÍ INLINE ASTRA ŠIPKA
   ========================================================= */


/*
 * Astra vytváří jednu šipku uvnitř rodičovského odkazu
 * a druhé samostatné tlačítko .ast-menu-toggle.
 *
 * PDmods používá pouze samostatné Astra tlačítko
 * jako technický mechanismus rozbalování.
 *
 * Vnitřní šipka v odkazu se proto vizuálně skryje.
 */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .menu-link
.dropdown-menu-toggle {
  display: none !important;
}



/* =========================================================
   ROZBALOVACÍ TLAČÍTKO
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle {
  position: absolute;

  top: 0;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width:
    var(--topmedica-offcanvas-menu-toggle-width);

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--topmedica-offcanvas-menu-toggle-icon-color) !important;

  background:
    transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  appearance: none;

  font-size: 0;
  line-height: 1;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  z-index: 2;

  transition:
    color
    var(--topmedica-offcanvas-menu-toggle-transition-duration)
    ease;
}



/* -------------------------------
   Rozbalovací tlačítko / tablet
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .ast-menu-toggle {
    right:
      var(--topmedica-offcanvas-menu-toggle-tablet-offset-right);

    height:
      var(--topmedica-offcanvas-menu-main-item-tablet-min-height);
  }

}



/* -------------------------------
   Rozbalovací tlačítko / mobile
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .ast-menu-toggle {
    right:
      var(--topmedica-offcanvas-menu-toggle-mobile-offset-right);

    height:
      var(--topmedica-offcanvas-menu-main-item-mobile-min-height);
  }

}



/* Skrytí původní Astra SVG ikonky */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle
.ast-icon {
  display: none !important;
}






/* =========================================================
   VLASTNÍ ROZBALOVACÍ IKONKA

   Stav ikonky se řídí podle skutečného
   otevřeného stavu rodičovské položky Astry:

   bez .ast-submenu-expanded
   = ikonka směřuje dolů

   s .ast-submenu-expanded
   = ikonka směřuje nahoru

   Tento stav je pro vizuální synchronizaci spolehlivější
   než aria-expanded na technickém Astra ovladači,
   protože Astra třídu .ast-submenu-expanded aktualizuje
   také při automatickém zavření předchozího submenu.

   Důležité:
   Astra může na svém technickém ovladači
   .ast-menu-toggle používat vlastní transformaci.

   PDmods tuto transformaci ruší pomocí:
   transform: none !important;

   Otáčí se proto pouze vlastní ikonka vytvořená
   pomocí pseudoelementu ::before.

   Tím se zabrání dvojité rotaci:
   - rotaci Astra ovladače
   - současné rotaci vlastní PDmods ikonky
   ========================================================= */


/* ---------------------------------------------------------
   Astra ovladač / zrušení vlastní transformace Astry

   .ast-menu-toggle zůstává technickým mechanismem,
   který Astra používá pro rozbalení a sbalení submenu.

   PDmods pouze ruší jeho vizuální transformaci.
   --------------------------------------------------------- */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded
> .ast-menu-toggle {
  transform: none !important;
}



/* ---------------------------------------------------------
   Vlastní ikonka / základní zavřený stav

   Rodič bez .ast-submenu-expanded
   = ikonka směřuje dolů.
   --------------------------------------------------------- */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle {
  color:
    var(--topmedica-offcanvas-menu-toggle-icon-color) !important;
}


#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle::before {
  content: "";

  display: block;

  width:
    var(--topmedica-offcanvas-menu-toggle-icon-size);

  height:
    var(--topmedica-offcanvas-menu-toggle-icon-size);

  border-right:
    var(--topmedica-offcanvas-menu-toggle-icon-line-width)
    solid
    currentColor;

  border-bottom:
    var(--topmedica-offcanvas-menu-toggle-icon-line-width)
    solid
    currentColor;

  transform:
    translateY(
      var(--topmedica-offcanvas-menu-toggle-icon-vertical-shift)
    )
    rotate(45deg) !important;

  transform-origin: center;

  transition:
    transform
    var(--topmedica-offcanvas-menu-toggle-transition-duration)
    ease,

    color
    var(--topmedica-offcanvas-menu-toggle-transition-duration)
    ease;
}



/* ---------------------------------------------------------
   Vlastní ikonka / otevřený stav

   Rodič s .ast-submenu-expanded
   = ikonka směřuje nahoru.
   --------------------------------------------------------- */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded
> .ast-menu-toggle {
  color:
    var(--topmedica-offcanvas-menu-toggle-icon-open-color) !important;
}


#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded
> .ast-menu-toggle::before {
  transform:
    translateY(
      calc(
        0px
        - var(--topmedica-offcanvas-menu-toggle-icon-vertical-shift)
      )
    )
    rotate(-135deg) !important;
}







/* =========================================================
   OTEVŘENÝ BLOK RODIČ + SUBMENU
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded {
  border-color:
    var(--topmedica-offcanvas-menu-open-block-border-color);

  background-color:
    var(--topmedica-offcanvas-menu-open-block-background-color);
}



/* Otevřený rodičovský řádek */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded
> .menu-link {
  color:
    var(--topmedica-offcanvas-menu-open-parent-color) !important;

  background-color:
    var(--topmedica-offcanvas-menu-open-parent-background-color) !important;
}




/* =========================================================
   SUBMENU

   Astra nadále řídí skutečný stav rodičovské položky
   pomocí:

   .ast-submenu-expanded

   PDmods přebírá skutečné vizuální rozbalení
   a sbalení submenu.

   Důležité:
   Výška submenu není pevně definována.

   JavaScript změří skutečnou výšku konkrétního submenu
   pomocí scrollHeight a předá ji CSS do proměnné:

   --topmedica-offcanvas-submenu-measured-height

   Každé submenu proto může mít libovolnou výšku
   podle svého skutečného obsahu.

   Výsledek:
   - obsah není možné uříznout pevným limitem
   - budoucí delší submenu funguje automaticky
   - zavření je rychlejší
   - otevření je pomalejší a zřetelně rozvinuté
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu {
  position: static !important;

  display: block !important;

  width: 100% !important;

  height: 0;

  margin: 0 !important;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background-color:
    var(--topmedica-offcanvas-submenu-background-color) !important;

  border: 0 !important;

  box-shadow: none !important;

  box-sizing: border-box;

  transition:
    height
    var(--topmedica-offcanvas-submenu-close-duration)
    var(--topmedica-offcanvas-submenu-close-easing),

    opacity
    var(--topmedica-offcanvas-submenu-close-duration)
    linear,

    visibility
    0s
    linear
    var(--topmedica-offcanvas-submenu-close-duration);
}



/* =========================================================
   SUBMENU / OTEVŘENÝ STAV

   Otevření se řídí podle skutečného Astra stavu:

   .ast-submenu-expanded

   Výška je dynamická a pochází z JavaScriptového
   měření skutečného obsahu konkrétního submenu.
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children.ast-submenu-expanded
> .sub-menu {
  height:
    var(
      --topmedica-offcanvas-submenu-measured-height,
      0px
    );

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transition:
    height
    var(--topmedica-offcanvas-submenu-open-duration)
    var(--topmedica-offcanvas-submenu-open-easing),

    opacity
    var(--topmedica-offcanvas-submenu-open-duration)
    ease,

    visibility
    0s
    linear
    0s;
}



/* -------------------------------
   Submenu / tablet
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu {
    padding:
      var(--topmedica-offcanvas-submenu-tablet-padding-top)
      var(--topmedica-offcanvas-submenu-tablet-padding-right)
      var(--topmedica-offcanvas-submenu-tablet-padding-bottom)
      var(--topmedica-offcanvas-submenu-tablet-padding-left);
  }

}



/* -------------------------------
   Submenu / mobile
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu {
    padding:
      var(--topmedica-offcanvas-submenu-mobile-padding-top)
      var(--topmedica-offcanvas-submenu-mobile-padding-right)
      var(--topmedica-offcanvas-submenu-mobile-padding-bottom)
      var(--topmedica-offcanvas-submenu-mobile-padding-left);
  }

}



/* =========================================================
   SUBMENU / OMEZENÍ ANIMACÍ V SYSTÉMU

   Pokud má uživatel v operačním systému
   omezené animace, přechod se vypne.

   Dynamická skutečná výška submenu zůstává zachována.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu {
    transition: none !important;
  }

}






/* =========================================================
   PODPOLOŽKY
   ========================================================= */


/* Položka submenu */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item {
  margin: 0;
  padding: 0;
}


/* Odkaz podpoložky */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link {
  display: flex;
  align-items: center;

  width: 100%;

  margin: 0;

  color:
    var(--topmedica-offcanvas-submenu-item-color) !important;

  background-color:
    var(--topmedica-offcanvas-submenu-item-background-color) !important;

  border: 0;

  box-sizing: border-box;

  text-decoration: none;

  transition:
    color
    var(--topmedica-offcanvas-menu-transition-duration)
    ease,

    background-color
    var(--topmedica-offcanvas-menu-transition-duration)
    ease;
}



/* -------------------------------
   Podpoložky / tablet
   ------------------------------- */

@media (max-width: 921px) and (min-width: 545px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu
  > .menu-item
  > .menu-link {
    min-height:
      var(--topmedica-offcanvas-submenu-item-tablet-min-height);

    padding:
      0
      var(--topmedica-offcanvas-submenu-item-tablet-padding-right)
      0
      var(--topmedica-offcanvas-submenu-item-tablet-padding-left);
  }

}



/* -------------------------------
   Podpoložky / mobile
   ------------------------------- */

@media (max-width: 544px) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu
  > .menu-item
  > .menu-link {
    min-height:
      var(--topmedica-offcanvas-submenu-item-mobile-min-height);

    padding:
      0
      var(--topmedica-offcanvas-submenu-item-mobile-padding-right)
      0
      var(--topmedica-offcanvas-submenu-item-mobile-padding-left);
  }

}



/* Skrytí původních Astra ikon podpoložek */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link
> .ast-icon {
  display: none !important;
}



/* =========================================================
   PODPOLOŽKY / VOLITELNÁ ODRÁŽKA
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link::before {
  content:
    var(--topmedica-offcanvas-submenu-marker-content);

  display:
    var(--topmedica-offcanvas-submenu-marker-display);

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    var(--topmedica-offcanvas-submenu-marker-width);

  width:
    var(--topmedica-offcanvas-submenu-marker-width);

  margin-right:
    var(--topmedica-offcanvas-submenu-marker-gap);

  color:
    var(--topmedica-offcanvas-submenu-marker-color);

  font-size:
    var(--topmedica-offcanvas-submenu-marker-font-size);

  line-height: 1;

  transform:
    translateY(
      var(--topmedica-offcanvas-submenu-marker-vertical-shift)
    );
}



/* =========================================================
   PODPOLOŽKY / HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  #ast-mobile-popup
  #ast-hf-mobile-menu
  > .menu-item-has-children
  > .sub-menu
  > .menu-item
  > .menu-link:hover {
    color:
      var(--topmedica-offcanvas-submenu-item-hover-color) !important;

    background-color:
      var(--topmedica-offcanvas-submenu-item-hover-background-color) !important;
  }

}



/* =========================================================
   PODPOLOŽKY / ACTIVE
   ========================================================= */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .current-menu-item
> .menu-link,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link:active {
  color:
    var(--topmedica-offcanvas-submenu-item-active-color) !important;

  background-color:
    var(--topmedica-offcanvas-submenu-item-active-background-color) !important;
}



/* =========================================================
   FOCUS
   ========================================================= */


/* Běžný klik nebo tap bez browserového a Astra focus obrysu */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item
> .menu-link:focus,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle:focus,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link:focus {
  outline: none !important;
  box-shadow: none !important;
}



/* Vlastní focus pouze při ovládání klávesnicí */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item
> .menu-link:focus-visible,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle:focus-visible,

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .sub-menu
> .menu-item
> .menu-link:focus-visible {
  outline:
    var(--topmedica-offcanvas-menu-focus-outline-width)
    solid
    var(--topmedica-offcanvas-menu-focus-outline-color) !important;

  outline-offset:
    var(--topmedica-offcanvas-menu-focus-outline-offset);

  box-shadow: none !important;
}



/* Firefox / odstranění vnitřního focus rámečku tlačítka */

#ast-mobile-popup
#ast-hf-mobile-menu
> .menu-item-has-children
> .ast-menu-toggle::-moz-focus-inner {
  border: 0 !important;
}



/* ==============================================================================================================
   04-05-01-04 / OFF-CANVAS SENDVIČOVÉ MENU BODY - END
   ============================================================================================================== */







/* ==============================================================================================================
   04-05-01-05 / BELOW MENU - BEGIN

   Spodní část pod hlavním tabletovým a mobilním menu.

   Aktuálně zde Astra zobrazuje:
   - CTA button „Objednat se“

   Budoucí využití může zahrnovat:
   - další CTA
   - kontaktní informace
   - doplňkové odkazy
   - informační blok
   - banner
   - další vlastní obsah

   Tento blok je připraven jako samostatná
   autonomní část off-canvas panelu.
   ============================================================================================================== */


/* =========================================================
   04-05-01-05 / BELOW MENU / PROMĚNNÉ

   Zatím bez vlastních parametrů.
   ========================================================= */



/* -------------------------------
   Below menu / Astra CTA button
   ------------------------------- */

/*
#ast-mobile-popup .ast-builder-button-wrap {
}
*/



/* ==============================================================================================================
   04-05-01-05 / BELOW MENU - END
   ============================================================================================================== */



/* ==============================================================================================================
   04-05-02 / DESKTOP MENU - BEGIN

   Desktopová navigace Astry.

   Aktivní od:
   922 px a více.

   Sem patří:
   - hlavní položky
   - hover stavy
   - aktivní stavy
   - dropdown menu
   - pozice submenu
   - případné další desktopové úpravy

   Desktopový blok je autonomní
   a nepoužívá parametry tabletového
   ani mobilního off-canvas menu.
   ============================================================================================================== */


/* =========================================================
   04-05-02 / DESKTOP MENU / PROMĚNNÉ
   ========================================================= */

:root {

  --topmedica-desktop-submenu-y-shift: -30px;
  /* svislý posun desktopové podnabídky */

}



/* -------------------------------
   Desktop menu / submenu pozice

   Astra desktop režim:
   922 px a více.
   ------------------------------- */

@media (min-width: 922px) {

  .ast-desktop
  .ast-builder-menu-1
  .main-header-menu
  > .menu-item
  > .sub-menu {
    margin-top: 0 !important;

    transform:
      translateY(
        var(--topmedica-desktop-submenu-y-shift)
      );

    z-index: 99999;
  }

}



/* -------------------------------
   Desktop menu / hlavní položky
   ------------------------------- */

/*
.main-header-menu
> .menu-item
> .menu-link {
}
*/



/* -------------------------------
   Desktop menu / hover a active
   ------------------------------- */

/*
.main-header-menu
> .menu-item:hover
> .menu-link,

.main-header-menu
> .current-menu-item
> .menu-link {
}
*/



/* -------------------------------
   Desktop menu / dropdown
   ------------------------------- */

/*
.main-header-menu .sub-menu {
}
*/



/* ==============================================================================================================
   04-05-02 / DESKTOP MENU - END
   ============================================================================================================== */



/* ===========================================================================================================================================================================
   04-05 / MENU A ASTRA NAVIGAČNÍ MODEL - END
   ========================================================================================================================================================================== */