﻿/* === ODRÁŽKY, SEZNAMY, PRŮVODCE === */






/* === Průvodce krok za krokem === */




.pk-steps{
  --step-bg:#F8F9FA;
  --step-badge:#333333;   /* kolečko */
  --step-num:#ffffff;     /* číslo bílé */
  --step-text:#111111;
  --step-sub:rgba(17,17,17,.78);
  --step-line:#333333;    /* spojnice zpět na #333333 */




  width:100%;
  margin:26px 0;
}




.pk-steps__title{
  margin:0 0 14px;
  color:inherit;
}




.pk-steps__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}




/* blok kroku */
.pk-step{
  position:relative;
  background:var(--step-bg);
  border:0;
  border-radius:0;                 /* ostré rohy */
  padding:14px 18px 2px 60px;
  box-shadow:none;
}




.pk-step > *{
  margin:0;
}




/* číslo v badge (bez žlutého okraje) */
.pk-step__badge{
  position:absolute;
  left:18px;
  top:14px;




  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;




  background:var(--step-badge);
  color:var(--step-num);




  font-weight:600;
  font-size:14px;
  line-height:1;




  box-shadow:none;                 /* bez kroužku/okraje */
}




/* Nadpis kroku – nechte H3 styly z webu */
.pk-step__head{
  margin:0 0 4px;
  padding:0;
  color:var(--step-text);
  /* font:inherit;  <-- SMAZAT */
}






.pk-step__text{
  margin:0;
  padding:0;
  color:var(--step-sub);
  font:inherit;
}




/* spojnice mezi kroky */
.pk-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:32px;
  top:46px;
  bottom:-12px;
  width:2px;
  background:var(--step-line);
  border-radius:0;
}




@media (max-width: 560px){
  .pk-step{
    padding:12px 14px 6px 54px;
    border-radius:0;
  }




  .pk-step__badge{
    left:14px;
    top:12px;
    width:26px;
    height:26px;
    font-size:14px;
    font-weight:600;
  }




  .pk-step:not(:last-child)::after{
    left:27px;
    top:42px;
  }
}














/* === Odrážky šipky - Arrow list === */


.pk-arrowlist{
  list-style:none;
  margin:0;
  padding:0;
}


.pk-arrowlist li{
  position:relative;
  margin:0 0 10px 0;
  padding-left:22px;          /* prostor pro šipku */
  color:#000;                 /* černý text */
  line-height:1.6;
}


.pk-arrowlist li:last-child{
  margin-bottom:0;
}


/* šipka – čistě černá */
.pk-arrowlist li::before{
  content:"→";
  position:absolute;
  left:0;
  top:.05em;
  color:#000;
  font-size:16px;
  line-height:1.6;
}


/* udržet text černý i pro vnořené prvky */
.pk-arrowlist *{
  color:#000;
}














/* === Odrážky žluté tečky s šipkami === */






.content-rail{
  display: table;                          /* shrink-to-fit = šířka podle obsahu */
  margin-inline: auto;                     /* vystředí celý blok */
  max-width: min(100%, 120ch);             /* ochrana proti přetékání na extra širokých */
  padding-inline: clamp(12px, 2vw, 20px);  /* jemná ochranná zóna do stran */
}


/* na mobilu a menších šířkách se chová jako běžný blok */
@media (max-width: 700px){
  .content-rail{
    display: block;
    width: 100%;
  }
}


/* bullet-wrap už neřeší šířku – tu drží content-rail */
.bullet-wrap{
  width: 100%;
  margin: 0;
  padding: 0;
}




.smart-bullets{
  --dot: #eee000;        /* barva tečky */
  --dot-size: 1.08em;    /* lehce větší než font */
  --lh: 1.45;            /* line-height pro výpočet svislého vycentrování */
  list-style: none;
  margin: 0;
  padding: 0;
}


.smart-bullets li{
  position: relative;
  line-height: var(--lh);
  padding-left: calc(var(--dot-size) + 14px); /* místo pro tečku + mezera */
  margin: 0 0 14px 0;
  color: #111827;
  font-size: 16px;
}


/* tečka vycentrovaná k 1. řádku textu */
.smart-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc((1em * var(--lh) - var(--dot-size)) / 2);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 999px;
  background: var(--dot);
}


.smart-bullets strong{
  font-weight: 700;
  letter-spacing: 0.01em;
}


.smart-bullets .arrow{
  display: inline-block;
  margin: 0 0.45em;
  color: #6b7280;        /* minimalistická šipka */
  transform: translateY(-0.02em);
}














/* === Odrážky žluté tečky === */




.bullet-yellow{
    list-style: none;
    padding: 0;
    margin: 0;
  }


  .bullet-yellow li{
    display: flex;
    align-items: flex-start;
    gap: 0.7em;          /* mezera mezi tečkou a textem */
    line-height: 1.45;
    margin: 0 0 0.45em;  /* MEZERA mezi odrážkami */
  }


  .bullet-yellow li:last-child{
    margin-bottom: 0;
  }


  .bullet-yellow li::before{
    content: "";
    flex: 0 0 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: #eee000;
    margin-top: 0.35em;  /* doladění výšky tečky vůči textu */
  }










/* === Číselný seznam === */




ol.pk-steps-guide{
  counter-reset:i;
  list-style:none !important;
  padding-left:0 !important;
  margin:16px 0;


  font-family:"Poppins",sans-serif;
  font-size:17px;
  color:#111;
}


ol.pk-steps-guide > li{
  counter-increment:i;


  display:flex !important;
  align-items:center !important;
  gap:12px;


  margin:0 0 10px;
  line-height:1.6;


  list-style:none !important;
}


/* schová defaultní čísla (marker) i když by je něco nutilo */
ol.pk-steps-guide > li::marker{
  content:"";
}


ol.pk-steps-guide > li::before{
  content:counter(i) !important;


  width:26px;
  height:26px;
  border-radius:999px;


  background:#222222;
  color:#ffffff;


  flex:0 0 26px;
  display:flex;
  align-items:center;
  justify-content:center;


  font-weight:500;   /* tenčí číslo */
  font-size:13px;
  line-height:1;


  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}


/* optická korekce pro 10+ */
ol.pk-steps-guide > li:nth-child(n+10)::before{
  padding-left:1px;
  box-sizing:border-box;
}