/* ------- HEADER ------- */

/* Scrolled state: white background */
#riffHeader.is-scrolled{
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Top state: menu links and icons */
#riffHeader a,
#riffHeader .elementor-item,
#riffHeader i{
  color:#fff;
  transition: color .25s ease;
}

/* Divider */
#riffHeader .header-divider .elementor-divider-separator{
  border-color:#fff;
  background-color:#fff;
}

/* Top state: button */
/*#riffHeader .header-btn .elementor-button{ color:#fff; border-color:#fff; background-color: transparent; transition: color .25s ease, border-color .25s ease, background-color .25s ease; } */

/* Top state: icon inside the button */
/*#riffHeader .header-btn .elementor-button i,
#riffHeader .header-btn .elementor-button svg{
  color:#fff;
  fill:#fff;
  transition: color .25s ease, fill .25s ease;
} */


/* Top state hover */
#riffHeader .elementor-item:hover,
#riffHeader .header-btn .elementor-button:hover{
  color:#f15a24;
}

#riffHeader .header-btn .elementor-button:hover i,
#riffHeader .header-btn .elementor-button:hover svg{
  color:#FF5400;
  fill:#FF5400;
}

/* Scrolled state: menu links and icons */
#riffHeader.is-scrolled a,
#riffHeader.is-scrolled .elementor-item,
#riffHeader.is-scrolled i{
  color:#111;
}

/* Scrolled divider */
#riffHeader.is-scrolled .header-divider .elementor-divider-separator{
  border-color:#111;
  background-color:#111;
}

/* Scrolled state: button */
#riffHeader.is-scrolled .header-btn .elementor-button{
  color:#111;
  border-color:#111;

}

/* Scrolled state: icon inside the button */
#riffHeader.is-scrolled .header-btn .elementor-button i,
#riffHeader.is-scrolled .header-btn .elementor-button svg{
  color:#111;
  fill:#111;
}

/* Scrolled state hover */
#riffHeader.is-scrolled .elementor-item:hover,
#riffHeader.is-scrolled .header-btn .elementor-button:hover{
  color:#f15a24;
}

#riffHeader.is-scrolled .header-btn .elementor-button:hover i,
#riffHeader.is-scrolled .header-btn .elementor-button:hover svg{
  color:#FF5400;
  fill:#FF5400;
}



/* TIMELINE */
.timeline {
  position: relative;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
left: calc(50% - 5px);
  width: 10px;
  background: #FFFFFF;
  z-index: 0;
}

.timeline-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: var(--timeline-progress, 0%);
  background: #FF5400;
  z-index: 1;
}

.timeline-line {
	opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-line.visible {
  opacity: 1;
}

#riffHeader.is-scrolled .header-btn .elementor-button svg path,
#riffHeader.is-scrolled .header-btn .elementor-button svg circle,
#riffHeader.is-scrolled .header-btn .elementor-button svg rect {
  fill: #111;
}

* {
  cursor: url('https://ungriff.is/wp-content/uploads/2026/03/puffin_cursor.png'), auto;
}

*:link {cursor: url('https://ungriff.is/wp-content/uploads/2026/03/animal-1-1.png'), auto;
}

#header-logo,
#header-logo-riff {
  cursor: url('https://ungriff.is/wp-content/uploads/2026/03/animal-1-1.png'), auto;
}

#header-logo:hover,
#header-logo-riff:hover {
  filter: invert(59%) sepia(71%) saturate(6466%) hue-rotate(359deg) brightness(100%) contrast(109%);
  transition: filter 0.2s ease;
}

/* Top state: language switcher SVG (white) */
#riffHeader .elementor-menu-toggle svg {
  fill: #fff;
  transition: fill .25s ease;
}

/* Scrolled state: language switcher SVG (black) */
#riffHeader.is-scrolled .elementor-menu-toggle svg {
  fill: #111;
}

/* Hover */
#riffHeader .elementor-menu-toggle:hover svg {
  fill: #f15a24;
}
/* Pravidla se aplikují pouze pro tablety a mobilní telefony (šířka do 1024px) */
@media (max-width: 1024px) {
    
    /* 1. Zarovnání obsahu do levého dolního rohu */
    .slider-hp .elementor-container,
    .slider-hp.e-con,
    .slider-hp .swiper-slide-inner {
        flex-direction: column !important;
        justify-content: flex-end !important; /* Zarovná obsah vertikálně dolů */
        align-items: flex-start !important; /* Drží text zarovnaný doleva */
        padding-top: 0 !important; /* Vynuluje případné horní odsazení */
        padding-bottom: 15vh !important; /* Odsazení zespodu - aby text neklečel na rámečku telefonu */
    }

    /* 2. Ukotvení obrázku na pozadí */
    .slider-hp,
    .slider-hp .elementor-background-overlay,
    .slider-hp .swiper-slide-bg {
        background-position: center bottom !important; /* U spodního zarovnání může vypadat lépe 'left bottom', případně nechat 'left center' */
    }
    
    /* 3. Omezení šířky textu proti přetečení do grafiky */
    .slider-hp .elementor-widget-heading,
    .slider-hp .elementor-widget-text-editor {
        max-width: 85%;
    }
	
	.slider-hp .elementor-container,
    .slider-hp.e-con,
    .slider-hp .swiper-slide-inner {
        display: flex !important; /* Vynutí flexbox */
        height: 100% !important;  /* Zaručí, že kontejner vyplní celý slide */
        flex-direction: column !important;
        justify-content: flex-start !important; 
        align-items: flex-start !important; 
        padding-bottom: 0 !important; 
        padding-top: 15vh !important; 
    }
}
.slider-hp .swiper-slide-contents {padding-left:30px}