.sw-menu {
position: relative;
z-index: 40;
border-bottom: var(--t-ramecek);
background: var(--t-pozadi);
}
.sw-menu__nav {
display: flex;
gap: var(--t-mezera);
align-items: center;
justify-content: space-between;
min-height: 68px;
}
.sw-menu__znacka {
display: inline-flex;
align-items: center;
color: var(--t-text);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.sw-menu__znacka img {
display: block;
width: auto;
max-height: 44px;
}
.sw-menu__list,
.sw-menu__submenu {
margin: 0;
padding: 0;
list-style: none;
}
.sw-menu__list {
display: flex;
margin-left: auto;
flex-wrap: wrap;
gap: 0 4px;
align-items: center;
justify-content: flex-end;
}
.sw-menu__item {
position: relative;
}
.sw-menu__link {
display: block;
padding: 10px 12px;
color: var(--t-text);
font-weight: 700;
text-decoration: none;
}
.sw-menu__link:hover {
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 2px;
}
.sw-menu__link.is-active {
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 2px;
text-decoration-color: var(--t-akcent);
}
.sw-menu__item.has-children > .sw-menu__link::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-3px) rotate(45deg);
}
.sw-menu__submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 2;
min-width: 220px;
border: var(--t-ramecek);
background: var(--t-pozadi);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--t-rychlost) ease,
transform var(--t-rychlost) var(--t-krivka),
visibility 0s linear var(--t-rychlost);
border-radius: var(--t-zaobleni);
}
.sw-menu__item.has-children:hover > .sw-menu__submenu,
.sw-menu__item.has-children:focus-within > .sw-menu__submenu {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.sw-menu__submenu li + li {
border-top: var(--t-delici-linka);
}
.sw-menu__submenu .sw-menu__link {
font-weight: 400;
white-space: nowrap;
}
.sw-menu__submenu .sw-menu__link:hover {
background: var(--t-pozadi-jemne);
text-decoration: none;
}
.sw-menu__hledani {
display: grid;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
border: 0;
background: none;
color: var(--t-text);
}
.sw-menu__hledani:hover {
background: var(--t-pozadi-jemne);
}
.sw-menu__item:not(.sw-menu__item--jazyk) + .sw-menu__item--jazyk {
margin-left: 8px;
padding-left: 8px;
border-left: var(--t-ramecek);
}
.sw-jazyk {
padding: 6px 8px;
font-size: 0.8125rem;
letter-spacing: 0.04em;
}
.sw-jazyky {
display: inline-flex;
gap: 2px;
}
.sw-menu__toggle {
display: none;
flex-direction: column;
gap: 5px;
justify-content: center;
width: 44px;
height: 44px;
padding: 0 10px;
border: var(--t-ramecek);
background: var(--t-pozadi);
border-radius: var(--t-zaobleni);
}
.sw-menu__toggle-bar {
display: block;
height: 2px;
background: var(--t-text);
transition: transform var(--t-rychlost) var(--t-krivka), opacity var(--t-rychlost) ease;
}
.sw-menu__toggle[aria-expanded="true"] .sw-menu__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sw-menu__toggle[aria-expanded="true"] .sw-menu__toggle-bar:nth-child(2) { opacity: 0; }
.sw-menu__toggle[aria-expanded="true"] .sw-menu__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
.sw-menu__nav {
flex-wrap: wrap;
gap: 0 var(--t-mezera);
}
.sw-menu__toggle {
display: flex;
}
.sw-menu__list {
display: none;
flex-basis: 100%;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding-bottom: 12px;
border-top: var(--t-ramecek);
}
.sw-menu__list.is-open {
display: flex;
animation: t-rozbal var(--t-rychlost-pomala) var(--t-krivka);
}
.sw-menu__item:not(.sw-menu__item--jazyk):not(.sw-menu__item--hledani) {
flex: 0 0 100%;
border-bottom: var(--t-delici-linka);
}
.sw-menu__link {
padding: 12px 0;
}
.sw-menu__item.has-children > .sw-menu__link::after {
display: none;
}
.sw-menu__submenu {
position: static;
display: block;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
padding-left: 16px;
border: 0;
}
.sw-menu__submenu li + li {
border-top: 0;
}
.sw-menu__submenu .sw-menu__link {
padding: 8px 0;
}
.sw-menu__item--jazyk,
.sw-menu__item--hledani,
.sw-menu__item:not(.sw-menu__item--jazyk) + .sw-menu__item--jazyk {
margin: 10px 0 0;
padding: 0;
border-left: 0;
}
.sw-jazyk {
padding: 10px 12px 10px 0;
}
}