body {
  overflow-x: hidden
}

/* =========================================================
   Hierarchie cílů – Elementor-look skin
   (Matches your existing PHP classes)
   ========================================================= */

/* ---------- Design tokens (map to Elementor vars where possible) ---------- */
.hierarchie-cilu {
  /* try to inherit Elementor globals, otherwise fall back */
  --hc-primary: var(--e-global-color-accent, #2362A2);
  --hc-summary-bg: var(--e-global-color-14c3f91, #F6FAFF);
  /* outer container bg in your loop */
  --hc-text: #111827;
  --hc-muted: #6b7280;

  --hc-node-radius: 8px;
  /* per Elementor container (8px) */
  --hc-card-radius: 16px;
  /* per Elementor card containers (16px) */
  --hc-gap-row: 16px;
  --hc-gap-col: 24px;

  /* cards (from your Elementor snippet) */
  --hc-alloc-bg: #E5EEF9;
  --hc-spend-bg: #FEF0D0;
  --hc-resp-bg: #E7E7E7;

  --hc-border: #E5E7EB;
  --hc-border-strong: #D1D5DB;

  --hc-progress-track: #F3F4F6;
  --hc-progress-fill-low: #ef4444;
  /* gradient start */
  --hc-progress-fill-mid: #f59e0b;
  /* gradient mid */
  --hc-progress-fill-hi: #22c55e;
  /* high completion optional */
  color: var(--hc-text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------- Tree container ---------- */
.hierarchie-cilu .hc-tree {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Node (accordion item) ---------- */
.hierarchie-cilu .hc-node {
  border-radius: var(--hc-node-radius);
  background: var(--hc-summary-bg);
  /* like .elementor-element-f1f6b06 */
  /* overflow: hidden; */
  border: none;
  padding: 0 16px;
}

/* remove default marker + base layout for summary */
.hierarchie-cilu .hc-node__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 44px;
  cursor: pointer;
  list-style: none;
  font-family: "Roboto", Sans-serif;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.225px;
  align-items: center;
  font-size: 18px;
  color: var(--e-global-color-accent);
  position: relative;
  flex-direction: column;
  align-items: flex-start;
}

.hierarchie-cilu .hc-node__summary::-webkit-details-marker {
  display: none;
}

/* typography like Elementor headings (18/700/150%, letter-spacing .225px) */
.hierarchie-cilu .hc-node__number {
  color: var(--hc-primary);
  font-weight: 700;
  letter-spacing: .225px;
}

.hierarchie-cilu .hc-node__label {
  color: var(--hc-primary);
  font-weight: 700;
  letter-spacing: .225px;
  font-size: 18px;
  line-height: 150%;
}

.hierarchie-cilu .hc-node__title {
  font-weight: 700;
  letter-spacing: .225px;
  font-size: 18px;
  line-height: 150%;
  color: var(--e-global-color-primary, #1d2939);
}

/* chevron like Elementor icon (blue, 16px) */
.hierarchie-cilu .hc-node__summary::before {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--hc-primary);
  border-bottom: 2px solid var(--hc-primary);
  transform: translateY(-25%) rotate(-135deg);
  transition: transform .25s ease;
  position: absolute;
  top: 50%;
  left: 16px;
}

.hierarchie-cilu .hc-node__summary:has(+ :empty) {
  pointer-events: none;
}

.hierarchie-cilu .hc-node__summary:has(+ :empty)::before {
  display: none;
}


.hierarchie-cilu .hc-node[open]>.hc-node__summary::before {
  transform: translateY(-75%) rotate(45deg);
}

/* ---------- Node body (inner container spacing like 16px) ---------- */
.hierarchie-cilu .hc-node__body {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
}

/* subtle inner section wrapper card (optional): uncomment if you want an inner white panel
.hierarchie-cilu .hc-node--level-1 .hc-node__body{
  background:#fff; border-radius:12px; border:1px solid var(--hc-border); padding:16px;
}
*/

/* ---------- Cards grid (3 cols desktop, 1 col mobile) ---------- */
.hc-node__cards,
.hc-progress,
.hc-temata {
  max-width: 850px;
}

.hierarchie-cilu .hc-node__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--hc-gap-row) var(--hc-gap-col);
  /* row gap 16, column gap 24 */
}

@media (max-width: 1024px) {
  .hierarchie-cilu .hc-node__cards {
    grid-auto-flow: row;
  }
}

@media (max-width: 767px) {
  .hierarchie-cilu .hc-node__cards {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
}

/* ---------- Card (Allocation / Spending / Responsibility) ---------- */
.hierarchie-cilu .hc-card {
  border-radius: var(--hc-card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  border: 1px solid transparent;
  /* Elementor cards are flat, keep subtle border only for contrast variants */
}

.hierarchie-cilu .hc-card--allocation {
  background: var(--hc-alloc-bg);
}

.hierarchie-cilu .hc-card--spending {
  background: var(--hc-spend-bg);
}

.hierarchie-cilu .hc-card--responsibility {
  background: var(--hc-resp-bg);
}

.hc-card__title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.hierarchie-cilu .hc-card__title {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: .225px;
  color: var(--e-global-color-primary, #1d2939);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hc-card__title-box svg.tooltip_svg {
  margin-left: auto;
}

.tooltip_box {
  position: relative;
  margin-left: auto;
  height: 16px;
}

.tooltip_hover-box {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: max-content;
  max-width: min(90vw, 550px);
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  background: #E5EEF9;
  padding: 12px;
  z-index: 99999;
  border-radius: 8px;
  height: fit-content;
}


/* Above: arrow at bottom, pointing DOWN */
.tooltip_hover-box::before {
  content: "";
  position: absolute;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%) rotate(90deg);
  width: 20px;
  height: 20px;
  bottom: -20px;
  /* right-pointing triangle rotated to point down */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #E5EEF9;
  z-index: 0;
}

/* Below: arrow at top, pointing UP */
.tooltip_hover-box.is-bottom::before {
  top: -10px;
  bottom: auto;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%) rotate(-90deg);
  width: 20px;
  height: 20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #E5EEF9;
  z-index: 0;
}

.tooltip_box:hover .tooltip_hover-box,
.tooltip_box:focus-within .tooltip_hover-box {
  opacity: 1;
  visibility: visible;
}

p.tooltip_text {
  font-family: Roboto;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #4F4F4F;
}

.tooltip_text {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing);
  color: var(--e-global-color-text);
}

.hierarchie-cilu .hc-card__meta {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing);
  color: var(--e-global-color-text);
}

.hierarchie-cilu .hc-card__meta span {
  font-weight: 400;
}

.hierarchie-cilu .hc-card__value {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing);
  font-weight: 700;
  color: var(--e-global-color-text);
}

.hierarchie-cilu .hc-card__subvalue {
  font-size: 14px;
  font-weight: 700;
  color: var(--hc-primary);
}

/* ---------- Progress (matches your UI accents) ---------- */
.hierarchie-cilu .hc-progress {
  display: flex;
  flex-direction: column;
  background: #F6F6F6;
  border-radius: 8px;
  border: 1px solid #B0B0B0;
  padding: 8px;
  gap: 8px;
}

.hierarchie-cilu .hc-progress__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--e-global-color-primary, #1d2939);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.hierarchie-cilu .hc-progress__label span {
  color: #991b1b;
  font-weight: 800;
}

.hierarchie-cilu .hc-progress__track {
  position: relative;
  height: 10px;
  background: var(--hc-progress-track);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(5, minmax(1px, 1fr));
  gap: 8px;
}

.hierarchie-cilu .hc-progress__fill {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  transition: width .4s ease;
  background: #D1D1D1;
}

.hc-progress__track.hc-progress_20 .hc-progress__fill:first-child {
  background: #C62828;
}

.hc-progress__track.hc-progress_40 .hc-progress__fill:first-child,
.hc-progress__track.hc-progress_40 .hc-progress__fill:nth-child(2) {
  background: #E49400;
}

.hc-progress__track.hc-progress_60 .hc-progress__fill:first-child,
.hc-progress__track.hc-progress_60 .hc-progress__fill:nth-child(2),
.hc-progress__track.hc-progress_60 .hc-progress__fill:nth-child(3) {
  background: #FAC615;
}

.hc-progress__track.hc-progress_80 .hc-progress__fill:first-child,
.hc-progress__track.hc-progress_80 .hc-progress__fill:nth-child(2),
.hc-progress__track.hc-progress_80 .hc-progress__fill:nth-child(3),
.hc-progress__track.hc-progress_80 .hc-progress__fill:nth-child(4) {
  background: #265529;
}

.hc-progress__track.hc-progress_100 .hc-progress__fill:first-child,
.hc-progress__track.hc-progress_100 .hc-progress__fill:nth-child(2),
.hc-progress__track.hc-progress_100 .hc-progress__fill:nth-child(3),
.hc-progress__track.hc-progress_100 .hc-progress__fill:nth-child(4),
.hc-progress__track.hc-progress_100 .hc-progress__fill:nth-child(5) {
  background: #2E7D32;
}

/* ---------- Topics / Project ---------- */
.hierarchie-cilu .hc-temata {
  display: grid;
  gap: 8px;
  font-size: 16px;
  color: #374151;
}

.hierarchie-cilu .hc-temata__item strong {
  display: block;
  font-weight: 700;
  color: var(--e-global-color-primary, #1d2939);
}

.hierarchie-cilu .hc-project {
  font-size: 16px;
  color: var(--e-global-color-primary, #1d2939);
}

.hierarchie-cilu .hc-project__link {
  color: var(--hc-primary);
  text-decoration: underline;
  font-weight: 700;
}

/* ---------- Children indentation (thin guideline like nested accordion sections) ---------- */
.hierarchie-cilu .hc-node__children {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Accessibility focus ---------- */
.hierarchie-cilu .hc-node__summary:focus-visible {
  outline: 3px solid rgba(35, 98, 162, .25);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Responsive summary tweaks ---------- */
@media (max-width: 768px) {
  .hierarchie-cilu .hc-node__summary {
    padding: 14px 16px;
  }
}

/* ---------- Print ---------- */
@media print {
  .hierarchie-cilu .hc-node {
    break-inside: avoid;
    box-shadow: none;
  }

  .hierarchie-cilu .hc-progress__fill {
    transition: none;
  }
}

.hierarchie-cilu .hc-temata__item strong {
  display: inline;
  font-weight: 700;
}

.hc-temata__item {
  font-family: "Roboto", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.175px;
  color: var(--e-global-color-primary, #1d2939);
  padding: 0 0 8px;
}


@media (max-width: 768px) {
  .rel-legend {
    gap: 20px !important;
    align-items: flex-start !important;
    flex-direction: column;
  }

  .hc-node.hc-node--level-1.hc-type--strategicka_oblast {
    padding: 8px;
  }

  .hierarchie-cilu .hc-node,
  .hierarchie-cilu .hc-node {
    padding: 0 4px;
  }

  .hierarchie-cilu .hc-node__summary {
    padding: 8px 8px 8px 25px;
    font-size: 16px;
    align-items: self-start;
  }

  .hierarchie-cilu .hc-node__summary::before {
    top: 8px;
    left: 8px;
    transform: translateY(100%) rotate(-135deg);
    width: 10px;
    height: 10px;
  }

  .hierarchie-cilu .hc-node[open]>.hc-node__summary::before {
    transform: translateY(50%) rotate(45deg);
    top: 8px;
  }

  .hierarchie-cilu .hc-node__body {
    padding: 0 0 16px;
  }

  .hierarchie-cilu .hc-progress__label {
    align-items: flex-start;
  }
}