/* ===================================================================
   PROM-IN – mobilní menu

   Vzhled vysouvacího menu na mobilu.

   Všechna pravidla visí na třídě .pi-menu, kterou přidává
   menu-mobil.js teprve ve chvíli, kdy menu vypadá očekávaně. Když se
   po aktualizaci struktura menu změní, třída se nepřidá a tenhle
   soubor neudělá vůbec nic – menu zůstane v podobě ze šablony.
   Bez menu-mobil.js je proto tenhle soubor neškodný.

   .pi-menu ......... vysouvací menu jako celek (jen mobil)
   .pi-menu__root ... první panel se seznamem kategorií
   .pi-menu-cat ..... položka, která vede do kategorie
   .pi-menu-link .... ostatní odkaz (Články, O nás, …)

   Nikde není !important – kdyby šablona něco přebila, projeví se to
   jako kus původního vzhledu, ne jako rozbité menu.

   Firemní barvy se berou z nastavení e-shopu (`--color-primary`,
   `--color-secondary-hover`), takže se změnou barev v administraci
   se přebarví i menu. Logo, jeho velikost i výška, na které sedí,
   přicházejí z hlavičky webu přes proměnné od menu-mobil.js.
   Hodnoty za čárkou ve `var()` jsou jen záloha, kdyby zdroj chyběl.

   Pozor při úpravách: plugin menu má pravidlo
   `.mm-menu a, .mm-menu a:link, …  { color: inherit }`, které přebije
   selektor ze dvou tříd. Barva textu u vlastních odkazů se proto píše
   přes tři třídy (`.pi-menu .pi-menu-account .pi-menu-account__btn`).
   =================================================================== */

/* --- barvy a rozměry ----------------------------------------------- */

.pi-menu.mm-menu {
    --mm-color-background: #fff;
    --mm-color-border: rgba(0, 0, 0, .08);
    --mm-color-text: #101010;
    --mm-color-text-dimmed: rgba(0, 0, 0, .4);
    --mm-color-button: #bdbdbd;
    --mm-color-background-emphasis: rgba(122, 184, 0, .1);
    --mm-color-background-highlight: rgba(0, 0, 0, .03);
    --mm-listitem-size: 54px;
}

/* --- hlavička panelu ------------------------------------------------ */

/* Logo doplňuje menu-mobil.js z hlavičky webu – včetně velikosti
   a výšky, na které logo v hlavičce sedí, ať při otevření menu
   neposkočí. Šablona tu má natvrdo starou adresu loga, která vrací
   404; když proměnné nedorazí, zůstane nahoře prázdné místo jako dřív. */
.pi-menu .mm-navbar.mm-navbar_sticky {
    /* Nahoře se drží hledání, ne logo – jinak by se překrývala. */
    position: relative;
    padding-top: calc(var(--pi-menu-logo-top, 16px) + var(--pi-menu-logo-h, 31px) + 12px);
    border-bottom: 0;
    background-image: var(--pi-menu-logo, none);
    background-position: 20px var(--pi-menu-logo-top, 16px);
    background-size: var(--pi-menu-logo-w, 112px) auto;
    background-repeat: no-repeat;
}

/* Na prvním panelu nadpis „Menu“ nepotřebujeme – je tam logo a hledání. */
.pi-menu .pi-menu__root > .mm-navbar .mm-navbar__title span {
    display: none;
}

/* Po skrytém nadpisu zůstávala v šabloně vyhrazená výška 44 px, kvůli
   které bylo hledání zbytečně daleko pod logem. V podmenu se výška
   nechává, tam je v hlavičce šipka zpět a název kategorie. */
.pi-menu .pi-menu__root > .mm-navbar,
.pi-menu .pi-menu__root > .mm-navbar .mm-navbar__title {
    min-height: 0;
}

/* V podmenu logo pryč, název kategorie vedle šipky zpět. */
.pi-menu .mm-panel:not(.pi-menu__root) > .mm-navbar {
    padding-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background-image: none;
}

.pi-menu .mm-panel:not(.pi-menu__root) > .mm-navbar .mm-navbar__title {
    justify-content: flex-start;
    padding: 0 20px 0 0;
    color: #101010;
    font-size: 17px;
    font-weight: 700;
}

/* --- položky menu --------------------------------------------------- */

/* Linky mezi jednotlivými položkami pryč – oddělují se jen skupiny
   (kategorie od ostatních odkazů a odkazy od tlačítek účtu). */
.pi-menu .mm-listitem::after {
    content: none;
}

/* Ve třetí úrovni menu zůstávají v šabloně za odkazy čárky (na počítači
   je skrývá stejným způsobem i Albertův styl). Velikost písma si každá
   viditelná část řádku nastavuje sama níž. */
.pi-menu .mm-listitem {
    font-size: 0;
}

.pi-menu .mm-listitem__text {
    display: flex;
    align-items: center;
    min-height: var(--mm-listitem-size);
    /* Svislé odsazení kvůli delším názvům, které se zalomí na dva řádky. */
    padding: 10px 12px 10px 20px;
    color: #101010;
    font-size: 16px;
    line-height: 20px;
    white-space: normal;
}

.pi-menu .mm-listitem__text b {
    font-weight: 700;
}

/* Kategorie výraznější než ostatní odkazy. */
.pi-menu .pi-menu-cat > .mm-listitem__text {
    min-height: 58px;
    font-size: 18px;
}

.pi-menu .pi-menu-link > .mm-listitem__text {
    color: rgba(0, 0, 0, .62);
    font-size: 15px;
}

/* --- oddělení kategorií od ostatních odkazů ------------------------- */

.pi-menu .pi-menu-cat + .pi-menu-link {
    margin-top: 16px;
}

/* Linka jde přes celou šířku panelu. */
.pi-menu .pi-menu-cat + .pi-menu-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* --- šipky ----------------------------------------------------------- */

/* Svislá čárka před šipkou pryč, šipka tenčí a dál od kraje. */
.pi-menu .mm-listitem__btn:not(.mm-listitem__text) {
    border-left: 0;
}

.pi-menu .mm-btn_next::after {
    right: 20px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.pi-menu .mm-btn_prev::before {
    left: 20px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

/* --- vyhledávání ----------------------------------------------------- */

/* Hledání zůstává nahoře i při posouvání menu. Plné pozadí je důležité –
   položky se pod ním posouvají a nesmí přes něj prosvítat. */
.pi-menu .pi-menu-search {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: 8px 16px 12px;
    background: #fff;
}

.pi-menu .pi-menu-search__box {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 5px 0 18px;
    border-radius: 999px;
    background: #f2f2f2;
}

.pi-menu .pi-menu-search__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    fill: none;
    stroke: #8a8a8a;
    stroke-width: 2;
    stroke-linecap: round;
}

.pi-menu .pi-menu-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #101010;
    font: inherit;
    /* 16 px schválně – při menší velikosti si iPhone při psaní přiblíží stránku */
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
}

.pi-menu .pi-menu-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.pi-menu .pi-menu-search__input::placeholder {
    color: #8a8a8a;
}

/* Šablona dává zaostřenému poli bílý „nimbus“ (box-shadow 8 px kolem
   dokola). V bílé hlavičce webu ho není vidět, v našem šedém poli
   vypadá jako rámeček navíc. Tři třídy + :focus, aby to přebilo
   pravidlo šablony (to je na CDN a nedá se přečíst) i bez !important. */
.pi-menu .pi-menu-search .pi-menu-search__input:focus,
.pi-menu .pi-menu-search .pi-menu-search__input:focus-visible {
    box-shadow: none;
    outline: none;
}

.pi-menu .pi-menu-search__submit {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary, #101010);
}

/* U tlačítka je šipka, ne lupa – ta je vlevo v poli a stačí jednou. */
.pi-menu .pi-menu-search__submit svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pi-menu .pi-menu-search__submit:active {
    background: var(--color-secondary-hover, #7ab800);
}

/* --- účet -------------------------------------------------------------- */

.pi-menu .pi-menu-account {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 16px 28px;
}

/* Linka nad tlačítky účtu – taky přes celou šířku, proto záporné
   odsazení o boční okraje bloku. */
.pi-menu .pi-menu-account::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.pi-menu .pi-menu-account .pi-menu-account__btn {
    display: flex;
    flex: 1 1 120px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    color: #101010;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* Ikona se barví podle textu tlačítka, takže tmavá varianta ani stav
   po stisknutí nepotřebují nic navíc. */
.pi-menu .pi-menu-account .pi-menu-account__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pi-menu .pi-menu-account .pi-menu-account__btn--primary {
    border-color: var(--color-primary, #101010);
    background: var(--color-primary, #101010);
    color: #fff;
}

.pi-menu .pi-menu-account .pi-menu-account__btn:active {
    border-color: var(--color-secondary-hover, #7ab800);
    background: var(--color-secondary-hover, #7ab800);
    color: #fff;
}