/* =====================================================================================================================================================================
   SDILENA HLAVICKA E-SHOPU (bot16, 2026-10-10) - CSS
   Robert 2026-10-10 (pres bot9): "fotogalerie musi mit stejnou hlavicku jako homepage". Zdroj pravdy pro vzhled hlavicky: TENTO soubor (pravidla jsou prevzata beze zmeny z index.html),
   markup = scripts/shop_header/partial.html (do stranek ho vklada scripts/shop_header_sync.py mezi znacky SHOP-HEADER:BEGIN / END), chovani = /js/shop-header.js. Postup, jak pridat stranku
   nebo upravit hlavicku: docs/SDILENA_HLAVICKA.md. NEPSAT pravidla hlavicky (header, .brand, .home-hud-btn, .foto-btn, .search-*, #cartBtn, #cartCount, #themeToggleBtn, #areaSwitch,
   #userBox, .hamburger-btn) do <style> jednotlivych stranek - kopie se rozjedou (presne to se stalo galerii, kontaktu a poptavce).
   Barvy: promenne stranky / motivu (--panel-bg, --border, --accent ...); chybejici dostanou nize vychozi hodnoty (stranka je smi prebit; paleta z /api/theme-colors je prebije vzdy).
   ===================================================================================================================================================================== */

/* vychozi hodnoty promennych, ktere nektere starsi stranky nemaji (stejne hodnoty jako index.html) */
:root { --panel-bg-alt: #1a1d23; --control-bg: #2b3038; --btn-bg: #3a5a7a; --btn-bg-hover: #4a6a8a; --error: #e07070; --warn: #e0a070; --bg: #494b50; --panel-bg: #22262e; --border: #3a3f4a;
        --border-soft: #333333; --text: #e8eaed; --text2: #c7ccd4; --text-muted: #8b93a1; --accent: #9fd0ff; }
[data-theme="light"] { --panel-bg-alt: #f3f5f8; --control-bg: #e7eaef; --btn-bg: #2f6690; --btn-bg-hover: #3a76a0; --error: #c23b3b; --warn: #b8721f; --bg: #eef1f5; --panel-bg: #ffffff; --border: #d7dce3;
        --border-soft: #e3e7ec; --text: #1b1e24; --text2: #3a3f4a; --text-muted: #5c6570; --accent: #1a6fd4; }

/* ---- lista a hlavicka ---- */
  /* PISMO: hlavicka a lista berou --font-main (volba pisma webu v adminu, site_font.py; stranky renderovane serverem ho nastavi samy). Staticke stranky bez SSR ho nemaji -> nahradni sada
     nize MUSI odpovidat aktualni volbe pisma (ted Manrope; stejny <link> na Google Fonts maji staticke stranky v <head>). Zmena volby pisma = upravit TENTO radek, QA static_page_font_stale to ohlasi. */
  header { font-family:var(--font-main, "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif); }
  header {
    height:56px; background:var(--panel-bg); border-bottom:1px solid var(--border-soft); display:flex;
    align-items:center; justify-content:space-between; padding:0 20px; position:relative; z-index:100; flex-shrink:0;
  }
  /* .brand je na homepage <h1> (SEO), jinde odkaz <a> - margin:0 rusi UA odsazeni h1, text-decoration:none podtrzeni odkazu */
  header .brand { font-size:14px; color:var(--text); font-weight:600; margin:0; text-decoration:none; }

  /* HOME tlacitko, odkaz Foto realizaci, hledani, kosik: HUD vzor (obrys v barve akcentu, useknuty roh, vyplnovaci animace pri hoveru) */
  .home-hud-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; flex:none; box-sizing:border-box;
    background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:0;
    clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    font-size:15px; line-height:1; text-decoration:none; cursor:pointer;
    transition:background-color .15s ease, color .15s ease;
  }
  .home-hud-btn:hover { background:var(--accent); color:#06140c; }

  .foto-btn {
    position:relative; background-color:transparent;
    background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-size:0% 100%;
    color:var(--accent); border:1px solid var(--accent); border-radius:0;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    padding:8px 14px; font-family:"SF Mono","Cascadia Code","Consolas",monospace; font-size:12px; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer;
    display:inline-flex; align-items:center;
    transition:background-size .22s cubic-bezier(.7,0,.3,1), color .22s ease;
  }
  .foto-btn:hover { background-size:100% 100%; color:#06140c; }
  /* odkaz na stranku, na ktere se prave je (napr. Foto realizaci na galerii): vyplneny */
  .foto-btn[aria-current="page"] { background-size:100% 100%; color:#06140c; }

  .search-widget { position:relative; }
  /* Robert 2026-08-11 (screenshot lupy: "uprav do hud stylu") - stejny
     HUD vzor jako #cartBtn vedle: obrys v akcentove barve, useknuty
     roh (clip-path), vyplnovaci animace zleva doprava pri hoveru.
     Misto barevneho emoji 🔍 (nejde obarvit do HUD palety) monospace
     glyf ⌕ v barve akcentu. */
  #searchToggleBtn {
    position:relative; background-color:transparent;
    background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-size:0% 100%;
    color:var(--accent); border:1px solid var(--accent); border-radius:0;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    padding:7px 12px; font-family:"SF Mono","Cascadia Code","Consolas",monospace; font-size:16px; font-weight:800; line-height:1;
    cursor:pointer;
    transition:background-size .22s cubic-bezier(.7,0,.3,1), color .22s ease;
  }
  #searchToggleBtn:hover { background-size:100% 100%; color:#06140c; }
  .search-panel {
    display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:90vw;
    background:var(--control-bg); border:1px solid var(--border); border-radius:0;
    box-shadow:0 8px 24px rgba(0,0,0,.35); padding:12px; z-index:500;
    clip-path:polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }
  .search-panel.open { display:block; }
  /* mobil / tablet (bot16, 2026-10-09): hlavicka se zalomi a tlacitko hledani je vlevo, panel s right:0 pak vyjel z obrazovky (x = -270, hledani na telefonu nepouzitelne) - panel se vaze na hlavicku a ma sirku obrazovky */
  @media (max-width:860px) {
    .search-widget { position:static; }
    .search-panel { right:8px; top:calc(100% + 6px); width:min(420px, calc(100vw - 16px)); max-width:none; }
  }
  .search-panel::before, .search-panel::after { content:""; position:absolute; width:14px; height:14px; pointer-events:none; }
  .search-panel::before { top:-1px; right:-1px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
  .search-panel::after { bottom:-1px; left:-1px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
  .search-panel input[type=text] {
    width:100%; box-sizing:border-box; background:var(--bg); color:var(--text); border:1px solid var(--border);
    border-radius:0; padding:8px 10px; font-size:13.5px; margin-bottom:8px;
  }
  /* Robert 2026-08-11 (screenshot vyhledavaciho panelu: "vsechno chceme
     ladit do naseho stylu") - HUD doladeni panelu: misto vychoziho
     modreho fokusu prohlizece akcentovy ramecek se slabou zari, useknuty
     roh panelu + rohove zavorky jako u dlazdic (.announcement-preview-card),
     zatrzitka v akcentove barve (accent-color misto vychozi modre),
     popisky rozsahu v monospace verzalkach jako HUD stitky. */
  .search-panel input[type=text]:focus {
    outline:none; border-color:var(--accent);
    box-shadow:0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .search-scope { display:flex; gap:14px; margin-bottom:10px; }
  .search-scope label {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    font-family:"SF Mono","Cascadia Code","Consolas",monospace; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
  }
  .search-scope input[type=checkbox] { accent-color:var(--accent); }
  .search-results { max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
  .search-results .sr-group-label { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin:8px 0 2px; }
  .search-results .sr-group-label:first-child { margin-top:0; }
  .search-results a.sr-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:0; text-decoration:none; color:var(--text); font-size:13px; }
  .search-results a.sr-item:hover { background:var(--control-bg); }
  .search-results .sr-thumb { width:32px; height:32px; border-radius:0; object-fit:cover; flex-shrink:0; background:var(--panel-bg-alt); }
  .search-results .sr-text { min-width:0; }
  .search-results a.sr-item .sr-sub { display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
  .search-results .sr-empty { font-size:12.5px; color:var(--text-muted); padding:8px 0; text-align:center; }

  #cartBtn {
    position:relative; background-color:transparent;
    background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-size:0% 100%;
    color:var(--accent); border:1px solid var(--accent); border-radius:0;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    padding:8px 14px; font-family:"SF Mono","Cascadia Code","Consolas",monospace; font-size:12px; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; cursor:pointer; text-decoration:none;
    display:flex; align-items:center; gap:6px;
    transition:background-size .22s cubic-bezier(.7,0,.3,1), color .22s ease;
  }
  #cartBtn:hover { background-size:100% 100%; color:#06140c; }
  #cartCount { display:none; background:var(--error); color:#fff; border-radius:0; padding:0 6px; font-size:11px; font-weight:700; min-width:16px; text-align:center; line-height:16px; }

  /* prepinac motivu (drive inline style v kazde strance) */
  #themeToggleBtn { background:var(--panel-bg-alt); color:var(--text-muted); border:1px solid var(--border); border-radius:0; padding:5px 10px; cursor:pointer; font-size:13px; }

  /* prepinac Eshop / 3D scena / Administrace a uzivatel (po prihlaseni) */
  #areaSwitch { display:flex; align-items:center; gap:2px; background:rgba(127,127,127,.15); border-radius:0; padding:3px; }
  #areaSwitch .as-item { padding:5px 10px; border-radius:0; font-size:12px; text-decoration:none; color:var(--text2); }
  #areaSwitch a.as-item:hover { color:var(--accent); }
  #areaSwitch .as-item.active { background:var(--btn-bg); color:#fff; font-weight:600; }
  #userBox { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted); }
  #userBox a, #userBox button { color:#fff; background:var(--btn-bg); border:none; border-radius:0; padding:7px 14px; cursor:pointer; font-size:12.5px; text-decoration:none; }
  #userBox a:hover, #userBox button:hover { background:var(--btn-bg-hover); }
  #userBox .logout-btn { background:none; border:1px solid var(--border); color:var(--text2); }
  #userBox .logout-btn:hover { background:var(--control-bg); }

  /* tlacitko menu kategorii (jen stranky s levym menu; na siroke obrazovce skryte) */
  .hamburger-btn { display:none; background:none; border:1px solid var(--border); color:var(--text2); border-radius:0; width:34px; height:34px; font-size:14px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }

  /* ---- responzivita hlavicky: pod 860 px se hlavicka lame do vice radku, hledani se vaze na hlavicku, 3D scena (jen pocitac) se skryje ---- */
  @media (max-width:860px) {
    .hamburger-btn { display:flex; }
    a.as-item[href="/scene.html"] { display:none; }
    header { flex-wrap:wrap; height:auto; min-height:56px; padding:10px 14px; row-gap:8px; }
    header > div:last-of-type { flex-wrap:wrap; row-gap:6px; }
    #userBox span { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  }
  @media (max-width:600px) { header .brand { font-size:14.5px; } }