/* =============================================================
       ZÁKLAD
       - čistý, snadno upravitelný kód
       - žádné externí závislosti
       - layout a chování vycházejí z biogator.webnode.cz (jedna stránka)
       ============================================================= */

    /* Reset a tokeny */
    *,*::before,*::after{box-sizing:border-box}
    
    @font-face {
      font-family: 'Quicksand';
      src: url('/asset/Quicksand-VariableFont_wght.ttf') format('truetype-variations');
      font-weight: 300 700;      /* celý rozsah osy wght */
      font-style: normal;
      font-display: swap;
    }
    
    html{scroll-behavior:smooth}
    :root{
      /* Rozměry */
      --header-h: 64px;              /* výška sticky hlavičky */
      --container: 1120px;           /* vnější šířka */
      --reading: 74ch;               /* šířka textového sloupce (souvislý text) */

      /* Barvy a vzhled */
      --brand: #16a34a;              /* akcent – zelená */
      --text: #0b0b0b;               /* primární text */
      --muted: #4b5563;              /* sekundární text */
      --line: #e5e7eb;               /* jemná linka */
      --bg: #fff;                    /* pozadí */
      --shadow: 0 8px 28px rgba(0,0,0,.06);
      --ease: .28s cubic-bezier(.2,.7,.3,1);

      /* Hero pruh: vlastní obrázek snadno nahraditelný */
      /*
      --hero-bg: radial-gradient(120% 100% at 100% 0%, rgba(22,163,74,.10), transparent 40%),
                 radial-gradient(100% 120% at 0% 100%, rgba(22,163,74,.14), transparent 40%),
                 linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.05));
      */
    }

    body{margin:0; color:var(--text); background:var(--bg); font:16px/1.7 "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
    .container{max-width:var(--container); margin-inline:auto; padding-inline:1rem}
    .flow{max-width:var(--reading); margin-inline:auto}
    .sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

    /* =============================================================
       HLAVIČKA + NAVIGACE
       ============================================================= */
    .site-header{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 0 var(--line)}
    .site-header__row{min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1rem}

    .brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit}
    .brand__mark{width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800}
    .brand__mark::after{content:"L"; transform:rotate(45deg)}
    .brand__wrap{display:flex; flex-direction:column; line-height:1}
    .brand__title{font-weight:800; letter-spacing:.02em}
    .brand__tag{font-size:.72rem; color:var(--brand); text-transform:uppercase; letter-spacing:.35em}
    #img-header {
      max-height: 3.25rem;
    }

    .nav{display:flex}
    .nav__list{display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0; font-weight: 550;}
    .nav__list a{display:inline-block; padding:.25rem .25rem; color:inherit; text-decoration:none}
    .nav__list a:hover,.nav__list a:focus-visible{color:var(--brand)}

    .menu-toggle{display:none; padding:.55rem .9rem; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); cursor:pointer}
    .menu-toggle:focus-visible{outline:3px solid rgba(22,163,74,.25)}

    /* =============================================================
       HERO (horní ilustrační pás)
       ============================================================= */
    .hero{background:url(../asset/hero-image.webp) center / cover no-repeat; min-height:480px; display:grid; align-items:end}
    .hero__inner{padding:4rem 0 3rem}

    /* =============================================================
       HLAVNÍ OBSAH – souvislý text se subsekcemi
       ============================================================= */
    main{padding:3rem 0}
    main h2{color: #38c0da; font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); margin:3rem 0 1rem; scroll-margin-top:calc(var(--header-h) + 12px)}
    main p{color: #888;margin:0 0 1rem}
    .contact-block{padding-top:.75rem; border-top:1px solid var(--line); margin-top:2rem}

    /* =============================================================
       PATIČKA
       ============================================================= */
    .site-footer{border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}
    .site-footer__row{padding:1.5rem 0; display:flex; flex-direction: column; align-items:center; justify-content:space-between; gap:0rem; flex-wrap:wrap}

    /* =============================================================
       MOBILNÍ DRAWER (menu „Více“)
       ============================================================= */
    .drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.36); opacity:0; pointer-events:none; transition:opacity var(--ease)}
    .drawer{position:fixed; right:0; top:0; bottom:0; width:min(86vw, 360px); background:#fff; box-shadow: -20px 0 60px rgba(0,0,0,.15); transform: translateX(100%); transition: transform var(--ease); display:flex; flex-direction:column}
    .drawer__header{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:1rem 1.25rem}
    .drawer__title{font-weight:700}
    .drawer__close{border:none; background:#fff; padding:.6rem .9rem; border-radius:10px; cursor:pointer}
    .drawer__nav{padding:1rem 1.25rem}
    .drawer__nav ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
    .drawer__nav a{text-decoration:none; color:inherit; padding:.4rem 0}
    .drawer__nav a:hover{color:var(--brand)}
    .drawer--open .drawer{transform: translateX(0)}
    .drawer--open .drawer-overlay{opacity:1; pointer-events:auto}

    /* =============================================================
       COOKIE LIŠTA
       ============================================================= */
    .cookie{position:fixed; inset:auto 0 0 0; background:#fff; border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(0,0,0,.08); padding:1rem; z-index:60}
    .cookie__row{display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
    .cookie__txt{max-width:70ch}
    .cookie__actions{display:flex; gap:.5rem; align-items:center}
    .btn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:.6rem 1rem; cursor:pointer}
    .btn--primary{background:var(--brand); border-color:var(--brand); color:#fff}
    .cookie__advanced{display:none; margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--line); color:#374151}

    /* =============================================================
       RESPONSIVE
       ============================================================= */
    @media (max-width: 900px){
      .nav{display:none}
      .menu-toggle{display:inline-flex; align-items:center; gap:.5rem}
      .hero{min-height:360px}
      .flow{max-width:90vw}
    }

    @media (prefers-reduced-motion: reduce){
      html:focus-within{scroll-behavior:auto}
      .drawer,.drawer-overlay{transition:none}
    }