/*
Magazine Design System Ráj nehtů v1.0
Společné styly pro články magazínu.
Vkládejte jako samostatný soubor, bez značek <style>.
*/

.rn-article{
  font-family:'Source Sans 3',Arial,sans-serif;
  font-size:12pt;
  line-height:1.65;
  color:#444444;
  margin:0;
  padding:0;
}

.rn-article h1{
  color:#555555;
  font-size:24pt;
  line-height:1.25;
  font-weight:700;
  margin:0 0 16px;
}

.rn-article h2{
  color:#555555;
  font-size:16pt;
  line-height:1.35;
  font-weight:700;
  margin:30px 0 12px;
}

.rn-article h3{
  color:#555555;
  font-size:14pt;
  line-height:1.4;
  font-weight:700;
  margin:22px 0 10px;
}

.rn-article p,
.rn-article li{
  color:#444444;
  font-size:12pt;
  line-height:1.65;
}

.rn-article p{
  margin:0 0 14px;
}

.rn-article strong,
.rn-article b{
  color:#444444;
}

.rn-article a{
  color:#666666;
  text-decoration:underline;
  text-decoration-color:#666666;
  text-underline-offset:2px;
  transition:color .2s ease,text-decoration-color .2s ease;
}

.rn-article a:hover{
  color:#C71C81;
  text-decoration-color:#C71C81;
}

.rn-article img{
  display:block;
  max-width:100%;
  height:auto;
}

.rn-lead{
  font-weight:700;
  margin-bottom:18px;
}

.rn-hero-image{
  margin:20px 0 24px;
}

.rn-hero-image img{
  width:100%;
  height:auto;
}

.rn-toc{
  border:1px solid #ECECEC;
  padding:16px 18px;
  margin:20px 0 24px;
}

.rn-toc-title{
  color:#555555;
  font-weight:700;
  margin:0 0 8px;
}

.rn-toc ul{
  margin:0;
  padding-left:20px;
}

.rn-toc li{
  margin:4px 0;
}

.rn-box-head,
.rn-section-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.rn-box-head{
  margin-bottom:8px;
}

.rn-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.rn-icon svg{
  width:24px;
  height:24px;
  display:block;
}

.rn-box-title{
  color:#C71C81;
  font-size:12pt;
  line-height:1.35;
  font-weight:700;
}

.rn-tip{
  background:#FCEAF4;
  border-left:6px solid #C71C81;
  padding:18px 22px;
  margin:22px 0;
}

.rn-important{
  background:#ECECEC;
  border:1px solid #D9D9D9;
  border-left:4px solid #C71C81;
  padding:16px 18px;
  margin:18px 0;
}

.rn-error-card{
  background:#FFFFFF;
  border:1px solid #ECECEC;
  border-left:4px solid #C71C81;
  padding:16px 18px;
  margin:14px 0;
}

.rn-error-title{
  color:#C71C81;
  font-weight:700;
  margin-bottom:5px;
}

.rn-checklist{
  background:#FFF7FB;
  border:1px solid #ECECEC;
  padding:18px 20px;
  margin:22px 0;
}

.rn-checklist ul{
  margin:8px 0 0;
  padding-left:20px;
}

.rn-checklist li{
  margin:6px 0;
}

.rn-faq{
  background:#FFF7FB;
  border:1px solid #C71C81;
  padding:16px 18px;
  margin:14px 0;
}

.rn-faq strong,
.rn-faq b{
  color:#C71C81;
}

.rn-tools{
  margin:12px 0 0 22px;
  padding:0;
}

.rn-tools li{
  margin-bottom:10px;
}

.rn-cta{
  background:#FFF7FB;
  border:1px solid #ECECEC;
  padding:20px;
  margin:24px 0;
}

.rn-cta-title{
  margin-top:0 !important;
}

.rn-button{
  display:inline-block;
  background:#C71C81;
  color:#FFFFFF !important;
  text-decoration:none !important;
  padding:10px 16px;
  font-weight:700;
}

.rn-button:hover{
  background:#A9176E;
  color:#FFFFFF !important;
}

.rn-mb-0{
  margin-bottom:0 !important;
}

/* Obrázek vedle textu, zarovnaný už k nadpisu */
.rn-step-float{
  display:flow-root;
  margin-top:22px;
}

.rn-step-float h3{
  margin-top:0;
}

.rn-step-float__image{
  float:right;
  height:auto;
  margin:2px 0 14px 24px;
}

@media(max-width:768px){
  .rn-article h1{
    font-size:21pt;
  }

  .rn-article h2{
    font-size:16pt;
  }

  .rn-article h3{
    font-size:14pt;
  }

  .rn-tip,
  .rn-important,
  .rn-error-card,
  .rn-checklist,
  .rn-faq,
  .rn-cta,
  .rn-toc{
    padding:15px 16px;
  }
}

@media(max-width:600px){
  .rn-step-float__image{
    float:none !important;
    width:100% !important;
    max-width:420px !important;
    margin:12px auto 16px !important;
  }
}