/* html elementy */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
    font-family: 'Urbanist', sans-serif;
}

a {
    color: #6b6b6b;
    text-decoration: none !important;
}

h1 {
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
}

h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}

:focus,
:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


section {
    margin-top: 3rem !important;
    padding: 2rem 0 !important;
    position: relative;
}


.section-success::after {
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.00rem;
    z-index: 10;
    content: "\f26a";
    color: #198754;
}

.section-failure::after {
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.00rem;
    z-index: 10;
    content: "\F82B";
    color: #ca0e0e;
}

@media (min-width: 992px) {
    section {
        margin-top: 10rem !important;
    }
}


/* obecné styly */
.text-bg-light {
    background-color: hsl(210 40% 96%) !important;
}
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.glass-background {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Pro Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
}
.text-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-8-lines {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.w-lg-50 {
    width: 100%;
}

@media (min-width: 992px) {
    .w-lg-50 {
        width: 50%;
    }
}



@media (min-width: 992px) {
    .sidebar-sticky-lg {
        position: sticky;
        top: 108px;
        height: fit-content;
    }
}






/* navigace */
.menu-wrapper {
    position: sticky;
    top: 15px;
    z-index: 1020;
}





/* ikona pro skrolování */
#scrollToTopBtn.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

#scrollToTopBtn.fade.show {
  opacity: 1;
}



/* pozadi section */
.bg-section {
    background-image: linear-gradient(
            to bottom,
            hsl(210 20% 98%),
            hsl(210 20% 98% / 0.7),
            transparent 70%
        ), var(--bg-image-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}




/* navigace */
.nav-link {
    color: hsl(215 16% 46%);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.nav-link.active,
.nav-link:focus,
.nav-link:hover {
    color: hsl(222 47% 11%);
}







/* tlačítka */
.btn {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.btn-calmory {
    opacity: 1;
    background-image: linear-gradient(135deg, rgb(144, 1, 173), rgb(10, 96, 255));
    color: #f8fafc;
    border-color: rgba(10, 96, 255, 0.15);
    border-radius: 10px;
    box-shadow: rgba(10, 96, 255, 0.35) 0 10px 30px -10px;
}

.btn.btn-calmory:hover,
.btn.btn-calmory:focus,
.btn.btn-calmory:active {
    color: #f8fafc;
    opacity: 0.9;
}

.btn-outline-secondary:hover {
    background-color: #9001ad;
}





/* ikony */
#scrollToTopBtn {
    transition: opacity 0.3s ease-in-out;
}

.icon-wrapper {
    width: 50px;
    height: 50px;
}

.icon-wrapper .bi {
    font-size: 1.5rem;
}







/* štítky */
.badge {
    padding: 0.25rem 0.75rem;
    font-weight: 500;
}
.badge-dychani {color: #fff; background-color: #3F51B5}
.badge-meditace {color: #fff; background-color: #673AB7}
.badge-detske-meditace {color: #673AB7; background-color: #F4EDFF}
.badge-pribehy-na-spani {color: #fff; background-color: #A68A79}
.badge-detske-pohadky {color: #7A9E7E; background-color: #E0F7FA}
.badge-hudba {color: #fff; background-color: #7A9E7E}
.badge-zvuky-prirody {color: #7A9E7E; background-color: #A8D5BA}
.badge-afirmace {color: #7A9E7E; background-color: #F5F5DC}
.badge-pribehy-ze-zivota {color: #7A9E7E; background-color: #FFB74D}
.badge-vyzvy-a-ukoly {color: #fff; background-color: #FF5722}
.badge-techniky {color: #fff; background-color: #BDBDBD}









/* karty */
.card {
    transition: all 0.2s ease-in-out;
    border-color: hsl(214 31% 91%);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.card-mobile {
    border: 0;
    color: white;
}
.card-mobile .card-body {

    background-color: #01042e;
}
.card-mobile .card-text {
    color: whitesmoke;
    font-size: 80%;
}

.card-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.card.shadow-sm:hover {
    transform: scale(1.03);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}














/* recenze */
.recenze {
    width: 50px;
    height: 50px;
}














/* skládačka */
.accordion-calmory .accordion-button::after {
    width: 0.75rem;
    height: 0.75rem;
    background-size: 0.75rem;
}

.accordion-calmory .accordion-button:not(.collapsed) {
    color: var(--bs-body-color);
    background-color: rgb(248, 249, 250);
    box-shadow: none;
}




















/* swiper */
.swiper-container-gallery {
    position: relative;
    padding: 0 60px; /* Vytvoří místo pro šipky po stranách */
}

.swiper-container-gallery .swiper-slide {
    height: auto; /* Důležité pro karty s různou výškou obsahu */
    padding-bottom: 10px; /* Rezerva pro stín */
}

.swiper-container-gallery .swiper-pagination {
    position: static;
    margin-top: 2.5rem;
}

.swiper-container-gallery .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #aab2bd;
    opacity: 1;
    transition: background-color 0.3s ease;
}

.swiper-container-gallery .swiper-pagination-bullet-active {
    background-color: rgba(144, 1, 173, 0.65);
}

/* Komentář: Vlastní styl pro navigační šipky */
.swiper-container-gallery .swiper-button-prev,
.swiper-container-gallery .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    color: rgba(144, 1, 173, 0.65);
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.swiper-container-gallery .swiper-button-prev:hover,
.swiper-container-gallery .swiper-button-next:hover {
    background-color: rgba(144, 1, 173, 0.65);
    color: #fff;
}

.swiper-container-gallery .swiper-button-prev { left: 0; }
.swiper-container-gallery .swiper-button-next { right: 0; }

.swiper-container-gallery .swiper-button-prev::after,
.swiper-container-gallery .swiper-button-next::after {
    font-size: .8rem;
    font-weight: bold;
}

/* Komentář: Skrytí šipek na mobilních zařízeních, kde se používá swipe */
@media (max-width: 767.98px) {
    .swiper-container-gallery {
        padding: 0 !important;
    }
    .swiper-container-gallery .swiper-container-wrapper {
        padding: 0 15px; /* Menší padding na mobilu */
    }
    .swiper-container-gallery .swiper-button-prev,
    .swiper-container-gallery .swiper-button-next {
        display: none;
    }
}









/* detail článku */
.article-container .article-detail {
    font-size: 18px;
    line-height: 32px;
}
.article-container .description {
    color: #6b6b6b;
    font-size: 22px;
    line-height: 36px;
    letter-spacing: normal;
}
.article-container .article-detail p {
    margin-top: 0.94em;
}
.article-container .article-detail h1 {
    font-size: 42px !important;
    /*font-family: 'bold';*/
    line-height: 1.2;
}
.article-container .article-detail h2 {
    font-size: 22px;
    margin-top: 1.95em;
}

.article-container .article-detail h3,
.article-container .article-detail h4,
.article-container .article-detail h5,
.article-container .article-detail h6 {
    font-size: 20px;
    padding-top: 0 !important;
    padding-bottom: 1em !important;
    margin-top: 1.95em !important;
}

.image-container {
    position: relative;
    display: inline-block;
}

.info-source {
  position: absolute;
  bottom: 25px;
  right: 10px;
  height: 24px;
  width: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.info-icon, .info-text {
  color: white;
  min-width: 30px;
  transition: opacity 0.3s, width 0.3s;
}

.info-icon {
  opacity: 1;
  font-weight: bold;
  min-width: 24px;
  text-align: center;
}

.info-text {
  opacity: 0;
  width: 0;
  font-size: 13px;
  font-family: sans-serif;
  white-space: nowrap;
}

.info-source:hover {
  width: auto;
  padding: 0 10px;
}

.info-source:hover .info-icon {
  opacity: 0;
  width: 0;
  min-width: 0;
}

.info-source:hover .info-text {
  opacity: 1;
  width: auto;
  transition-delay: 0.1s;
}

.article-container .article-detail blockquote {
    margin: 2.5em 0;
    padding-left: 35px;
    font-family: "Merriweather",Georgia,serif;
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    color: #797979;
    margin-left: 20px;
}
.article-container .article-detail blockquote::before {
    content: "\F6B0";
    float: left;
    margin-left: -35px;
    font-family: "bootstrap-icons";
    font-style: normal;
    font-size: 22px;
    line-height: 1.33;
    color: #82af7c;
    opacity: .88;
}