/*
 * Aaryans.cz — Mobilní menu à la Rituals (varianta „Petrol")
 * Version: 1.0 | 2026-07-14
 * PÁRUJE SE S: aaryans-mobile-menu.js v1.0 (vkládá Zpět-lištu, hlavičku
 * podpanelu a servisní blok — bez JS se zobrazí jen přestylovaný akordeon).
 *
 * UPLOAD via FileZilla:
 *   /user/documents/upload/CSSkodyCLAUDE/aaryans-mobile-menu.css
 *
 * Load ORDER: za agenturními styly (jako ostatní aaryans-*.css).
 *
 * CO DĚLÁ (jen @media max-width: 767px — desktop/iPad se NEDOTÝKÁ):
 *   Přestavuje nativní Shoptet mobilní menu (#navigation slide-in okno)
 *   podle UX auditu str. 4 (MidStorm) po vzoru rituals.cz — který je
 *   TAKY Shoptet, takže jde o restyling identické DOM kostry:
 *   - panel: ztmavená brand modrá #06425A (mockup varianta C, vybral Aaryan)
 *   - level 1: Cocogoose 19px bílá, řádek 56px (přesně Rituals metrika),
 *     chevrony vpravo, bez oddělovačů, jednotný boční rytmus 24px
 *   - level 2 = druhý panel (slide zprava přes .exp třídu, viz JS):
 *     položky Bahnschrift 17px bílé
 *   - level 3: ODKRYTÝ (core ho na mobilu skrývá!) — 15px sky #A8D4E8,
 *     odsazený, s levou linkou; audit: „až do 3. řádu přímo v menu"
 *   - Výprodej zlatě (jediný zlatý akcent), Blog přesunut dolů (viz JS)
 *   - servisní blok dole: Bahnschrift 16px tlumená bílá (Rituals používá
 *     na spodní odkazy taky sans ~L1 velikosti — proto nepůsobí přílepkově)
 *
 * MINY Z LADĚNÍ (v2–v6 preview) — číst před úpravou:
 *   1. Agentura: `.navigation-in > .menu-level-1 { height: inherit }`
 *      → UL vysoký jako celý panel → obří mezera před servisním blokem.
 *      Přebito height:auto. NEMAZAT.
 *   2. Shoptet si do každého ul.menu-level-2 kreslí div.menu-level-2-title
 *      (duplicitní nadpis kategorie) — na mobilu skrýváme.
 *   3. V ul.menu-level-3 jsou mezi <li> textové uzly s čárkami („,").
 *      font-size:0 + line-height:0 na li je jediný způsob, jak je schovat
 *      (line-height se jinak dědí jako px z core a čárky tvoří 14px řádky).
 *   4. SPECIFICITA: pravidlo pro L2 odkazy smí mířit JEN na přímé potomky
 *      (`> li > div > a`, `> li > a`) — širší zápis `ul.menu-level-2 li a`
 *      přebije pravidlo pro L3 (víc elementů v selektoru) a zabije hierarchii.
 *   5. Web má načtený JEDINÝ řez Cocogoose — font-weight 400 vs 600 nic
 *      nemění. „Odlehčení" L1 je řešeno velikostí + letter-spacingem.
 *   6. menu-item-2581 = Výprodej (zlatý), menu-item-2087 = Blog (skrytý,
 *      je v servisním bloku). Při změně struktury menu v adminu ID přepsat!
 *   7. Mechanika otevírání je NATIVNÍ Shoptet: body.navigation-window-visible
 *      (hamburger), li.exp + body.submenu-visible (podkategorie). CSS na tom
 *      jen staví — žádné vlastní stavy.
 */

@media (max-width: 767px) {

  /* zámek scrollu stránky pod otevřeným menu */
  body.navigation-window-visible { overflow: hidden !important; }

  /* ── PANEL ─────────────────────────────────────────────────── */
  #navigation { background: #06425A !important; }
  #navigation .navigation-in {
    background: #06425A !important;
    padding-top: 64px !important;   /* pruh pro ✕ */
    box-sizing: border-box !important;
  }

  /* MINA 1: agenturní height:inherit na menu-level-1 */
  #navigation .navigation-in > ul.menu-level-1 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ✕ zavřít — kroužek, vždy nad podpanelem */
  .navigation-close {
    color: #FFFFFF !important;
    z-index: 1005 !important;
    padding: 13px !important;
    margin: 9px 10px 0 0 !important;
    background: rgba(4, 50, 69, .9) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }

  /* nativní odkazy připnuté k patce menu (top-bar) — nahrazuje #aa-mm-servis */
  .navigation-window-visible .top-navigation-bar .container > div.top-navigation-menu,
  .navigation-window-visible .top-navigation-bar .container > div.top-navigation-contacts { display: none !important; }
  /* MINA 2: duplicitní nadpis kategorie od Shoptetu */
  #navigation .menu-level-2 .menu-level-2-title { display: none !important; }

  /* ── LEVEL 1: Cocogoose 19px, řádek 56px, bez oddělovačů ───── */
  #navigation .navigation-in > ul.menu-level-1 > li {
    background: transparent !important;
    border: 0 !important;
  }
  #navigation .navigation-in > ul.menu-level-1 > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 14px 24px !important;   /* ruší agenturní centrovací hack calc(15px+30px) */
    color: #FFFFFF !important;
    font-family: cocogoose, sans-serif !important;
    font-weight: 400 !important;     /* MINA 5: jediný řez, ale 600 by syntetizoval bold */
    font-size: 19px !important;
    letter-spacing: .03em !important;
    line-height: 1.25 !important;
    text-transform: none !important; /* audit: žádný Caps Lock */
  }
  #navigation .navigation-in > ul.menu-level-1 > li > a b { font-weight: 400 !important; }
  #navigation .navigation-in > ul.menu-level-1 > li > a:hover,
  #navigation .navigation-in > ul.menu-level-1 > li.exp > a {
    background: rgba(255, 255, 255, .06) !important;
    color: #FFFFFF !important;
  }
  #navigation .navigation-in > ul.menu-level-1 > li:first-child > a { padding-top: 18px !important; }

  /* MINA 6: zlatý Výprodej + skrytý Blog (je v servisním bloku) */
  #navigation .navigation-in > ul.menu-level-1 > li.menu-item-2581 > a { color: #EBB21C !important; }
  #navigation .navigation-in > ul.menu-level-1 > li.menu-item-2087 { display: none !important; }

  /* chevron místo icon-fontové šipky (\e90e) */
  #navigation .menu-level-1 .submenu-arrow {
    padding: 0 !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
    width: 12px; height: 12px;
  }
  #navigation .menu-level-1 .submenu-arrow:after {
    content: "" !important;
    display: block !important;
    width: 9px; height: 9px;
    border: solid rgba(255, 255, 255, .65);
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg) !important;
    transition: none !important;
  }
  /* core rotuje šipku o 180° při .exp (akordeon) — u panel-slide nechceme */
  .submenu-visible #navigation li.exp > a .submenu-arrow:after { transform: rotate(45deg) !important; }

  /* ── LEVEL 2 = druhý panel (slide zprava, jezdí na nativní .exp) ──
     Vždy display:block (kvůli animaci), zavřený = translateX(105%)
     + visibility:hidden (zpožděná při zavírání, aby doběhl transform). */
  #navigation .navigation-in > ul.menu-level-1 > li.ext > ul.menu-level-2 {
    display: block !important;
    position: absolute;              /* containing block = #navigation (fixed) */
    top: 0; right: 0; bottom: 0; left: 0;
    margin: 0 !important;
    padding: 0 0 48px !important;
    background: #06425A;
    z-index: 1003;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  #navigation .navigation-in > ul.menu-level-1 > li.ext.exp > ul.menu-level-2 {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease;
  }

  /* ── hlavička podpanelu — ROZDĚLENÁ:
     sticky lišta jen se „Zpět" (zarovnaná výškou na ✕),
     nadpis + „Zobrazit vše" scrollují s obsahem, pod nimi 26px vzduch. */
  #navigation .menu-level-2 > li.aa-mm-backrow {
    position: sticky; top: 0; z-index: 2;
    background: #06425A;
    border: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .aa-mm-back {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    background: none; border: 0; cursor: pointer;
    color: #A8D4E8;
    font-family: "Bahnschrift Regular", Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif;
    font-weight: 400; font-size: 15px;
    padding: 22px 68px 14px 24px;    /* vpravo prostor pro ✕ */
    text-align: left;
  }
  .aa-mm-back::before {
    content: ""; display: block; flex: 0 0 auto;
    width: 8px; height: 8px;
    border: solid #A8D4E8;
    border-width: 1.5px 0 0 1.5px;
    transform: rotate(-45deg);
  }
  #navigation .menu-level-2 > li.aa-mm-headrow {
    border: 0 !important;
    padding: 4px 24px 26px !important;
    display: block !important;
  }
  .aa-mm-headrow .aa-mm-l2name {
    display: block;
    font-family: cocogoose, sans-serif;
    font-weight: 400; font-size: 24px;
    letter-spacing: .02em; line-height: 1.2;
    color: #FFFFFF;
  }
  #navigation .menu-level-2 a.aa-mm-shopall {
    display: inline-flex !important;
    align-items: center; gap: 7px;
    margin-top: 10px;
    font-family: "Bahnschrift Regular", Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    color: #A8D4E8 !important;
    text-decoration: none !important;
    padding: 0 !important;
    text-transform: none !important;
  }
  #navigation .menu-level-2 a.aa-mm-shopall::after {
    content: ""; display: block;
    width: 7px; height: 7px;
    border: solid #A8D4E8;
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg);
  }

  /* ── LEVEL 2 položky: Bahnschrift 17px bílá ──
     MINA 4: jen PŘÍMÉ odkazy (li > div > a, li > a) — širší selektor
     by přebil L3 pravidlo specificitou. */
  #navigation .navigation-in ul.menu-level-2 > li { border: 0 !important; }
  #navigation .navigation-in ul.menu-level-2 > li:not(.aa-mm-backrow):not(.aa-mm-headrow) > div > a,
  #navigation .navigation-in ul.menu-level-2 > li:not(.aa-mm-backrow):not(.aa-mm-headrow) > a:not(.menu-image) {
    display: block !important;
    padding: 12px 24px !important;
    color: #FFFFFF !important;
    font-family: "Bahnschrift Regular", Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-transform: none !important;  /* ruší agenturní uppercase (audit: Caps Lock) */
  }

  /* ── LEVEL 3: sky modrá, menší, odsazená s linkou ──
     Core na mobilu L3 SKRÝVÁ (.has-third-level ul {display:none}) — odkrýváme. */
  #navigation .navigation-in .menu-level-2 li.has-third-level ul.menu-level-3 {
    display: block !important;
    margin: 0 0 20px 24px !important;
    padding: 0 !important;
    position: static !important;
    border: 0 !important;
    border-left: 2px solid rgba(168, 212, 232, .4) !important;
  }
  /* MINA 3: čárkové textové uzly mezi <li> */
  #navigation .menu-level-3 li {
    font-size: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
  }
  #navigation .navigation-in ul.menu-level-2 ul.menu-level-3 li a {
    display: block !important;
    font-size: 15px !important;
    font-family: "Bahnschrift Regular", Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    color: #A8D4E8 !important;
    padding: 8px 20px 8px 14px !important;
    text-transform: none !important;
    line-height: 1.4 !important;
  }

  /* ── SERVISNÍ BLOK (vkládá JS): sans, skoro velikost L1 ─────── */
  #aa-mm-servis {
    margin-top: 16px;
    padding: 0 0 calc(38px + env(safe-area-inset-bottom, 0px));
  }
  #aa-mm-servis a {
    display: block;
    padding: 10px 24px;
    color: rgba(255, 255, 255, .7) !important;
    font-family: "Bahnschrift Regular", Bahnschrift, "DIN Alternate", "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px;
    text-decoration: none;
  }

}

/* ≥768 px: JS-vložené prvky nesmí existovat vizuálně — desktop/iPad
   (vč. hover megamenu, které používá stejné ul.menu-level-2!) beze změny */
@media (min-width: 768px) {
  .aa-mm-backrow, .aa-mm-headrow, #aa-mm-servis { display: none !important; }
}