/* =========================================================
   Business Center Bratislava — cookies.css
   Cookie lišta + panel nastavení súkromia.
   Nadväzuje na tokeny zo style.css (--surface, --accent, --line…).

   CLS: lišta aj panel sú position:fixed, teda mimo toku dokumentu —
   ich zobrazenie neposunie ani pixel obsahu (Cumulative Layout Shift 0).
   ========================================================= */

/* ---------- spoločné tlačidlá lišty aj panela ---------- */
/* Rovnaký dôvod ako pri touch-action v style.css: opakované ťuknutie
   nesmie prehliadač vyhodnotiť ako „priblíž". */
.cc-btn,.cc-fab,.cc-panel__close{touch-action:manipulation}
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:var(--body);font-weight:500;line-height:1.2;
  /* pilulka + dotykový cieľ 44 px podľa WCAG 2.5.5 */
  padding:11px 26px;min-height:44px;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background var(--t-small) var(--ease-ui),
             border-color var(--t-small) var(--ease-ui),
             color var(--t-small) var(--ease-ui);
}

/* ROVNOCENNOSŤ VOLIEB — požiadavka dozorného orgánu, nie estetika:
   „Prijať všetko" a „Povoliť len nevyhnutné" majú rovnakú veľkosť, rovnaký tvar,
   rovnakú plnú výplň a stoja vedľa seba. Líšia sa len farbou plochy, aby bola
   akcia značky rozpoznateľná — ani jedna z nich nie je potlačená do „ghost" štýlu. */
.cc-btn--accept{background:var(--accent);color:#fff}
.cc-btn--reject{background:#fff;color:#0F0F0F}

/* „Nastavenia" nie je voľba súhlasu, preto smie byť tichšie — nesmie však
   klesnúť pod dotykový cieľ ani pod kontrast 4,5:1 (biela na #0F0F0F = 19:1). */
.cc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.34)}

@media (hover:hover){
  .cc-btn--accept:hover{background:var(--accent-hover)}
  .cc-btn--reject:hover{background:#E6E6E6}
  .cc-btn--ghost:hover{border-color:#fff}
}

/* =========================================================
   LIŠTA
   ========================================================= */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -18px 40px rgba(0,0,0,0.45);
  padding:22px 0 calc(22px + env(safe-area-inset-bottom));
  transform:translateY(101%);
  transition:transform var(--t-panel) var(--ease-ui);
}
.cc.is-in{transform:none}

/* Lišta je vysoká až 331 px (39 % obrazovky pri 390×844) a prekrývala prekryvy,
   ktoré si vyvolal sám návštevník — bottom-sheet s tlačidlom „Mám záujem",
   mobilné menu aj lightbox. Na čas prekryvu ju schováme; showBar/hideBar sa
   nemenia, takže po zavretí prekryvu sa lišta sama vráti a čaká na voľbu. */
body.sheet-open .cc,
body.menu-open .cc,
body.lb-open .cc{display:none}

.cc__in{
  width:min(2000px, 100% - 2*var(--pad-x));margin-inline:auto;
  display:flex;align-items:center;gap:28px 40px;flex-wrap:wrap;
  justify-content:space-between;
}
.cc__text{max-width:74ch;min-width:min(100%, 320px);flex:1 1 420px}
.cc__title{font-size:var(--h4);font-weight:400;line-height:1.25;margin-bottom:8px}
.cc__desc{font-size:var(--small);line-height:1.65;color:var(--text-2)}
.cc__desc a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.cc__actions{display:flex;gap:12px;flex-wrap:wrap;flex:0 1 auto}

/* =========================================================
   PANEL NASTAVENÍ (modálny dialóg)
   ========================================================= */
.cc-modal{position:fixed;inset:0;z-index:210}
/* pri otvorenom paneli sa pozadie nesmie skrolovať (rovnako ako pri mobilnom menu) */
body.cc-open{overflow:hidden}

.cc-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0.72);
  opacity:0;transition:opacity var(--t-small) ease;
}
.cc-modal.is-in .cc-modal__backdrop{opacity:1}

.cc-panel{
  position:absolute;left:50%;bottom:0;
  width:min(680px, 100%);
  max-height:min(88vh, 860px);
  transform:translate(-50%, 24px);
  opacity:0;
  background:var(--surface);
  border:1px solid var(--line);border-bottom:0;
  padding:30px var(--pad-x) calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  transition:transform var(--t-panel) var(--ease-ui),opacity var(--t-small) ease;
}
.cc-modal.is-in .cc-panel{transform:translate(-50%, 0);opacity:1}
/* po otvorení dávame fokus na samotný dialóg, aby ho čítačka prečítala celý —
   rámik okolo panela by tam ale bol len na ozdobu, ovládacie prvky vnútri
   majú vlastný viditeľný focus-visible */
.cc-panel:focus,.cc-panel:focus-visible{outline:none}

@media (min-width:768px){
  .cc-panel{
    top:50%;bottom:auto;
    transform:translate(-50%, calc(-50% + 24px));
    border:1px solid var(--line);
    padding:36px 40px 32px;
  }
  .cc-modal.is-in .cc-panel{transform:translate(-50%, -50%)}
}

.cc-panel__head{display:flex;align-items:flex-start;gap:20px;margin-bottom:10px}
.cc-panel__title{font-size:var(--h3);font-weight:300;line-height:1.15;flex:1}
.cc-panel__close{
  flex:none;width:44px;height:44px;margin:-10px -10px 0 0;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);
  transition:color var(--t-micro) ease,background var(--t-micro) ease;
}
.cc-panel__close svg{width:16px;height:16px}
@media (hover:hover){
  .cc-panel__close:hover{color:#fff;background:rgba(255,255,255,0.08)}
}

.cc-panel__desc{font-size:var(--small);line-height:1.65;color:var(--text-2);margin-bottom:26px}
.cc-panel__desc a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- kategórie ---------- */
.cc-cats{display:flex;flex-direction:column;gap:2px;margin-bottom:28px}
.cc-cat{
  padding:18px 0;border-top:1px solid var(--line);
}
.cc-cat:last-child{border-bottom:1px solid var(--line)}
.cc-cat__head{display:flex;align-items:center;gap:16px;justify-content:space-between}
.cc-cat__name{font-size:var(--body);font-weight:500}
.cc-cat__always{font-size:var(--small);color:var(--text-dim);flex:none}
.cc-cat__desc{
  font-size:var(--small);line-height:1.65;color:var(--text-2);
  margin-top:8px;max-width:56ch;
}

/* ---------- prepínač ---------- */
.cc-sw{
  display:flex;align-items:center;gap:14px;
  min-height:44px;cursor:pointer;flex:1;
}
.cc-sw--fixed{cursor:default}
/* input je fokusovateľný, len opticky skrytý — klávesnica ho ovláda medzerníkom */
.cc-sw__input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.cc-sw__track{
  /* Jediné zámerne zaoblené miesto na celom webe. Prepínač tvarom hovorí
     „dá sa prepnúť"; hranatý by splynul so zaškrtávacím políčkom. */
  flex:none;position:relative;width:46px;height:26px;border-radius:100px;
  background:rgba(255,255,255,0.18);
  transition:background var(--t-small) var(--ease-ui);
}
.cc-sw__thumb{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;
  transition:transform var(--t-small) var(--ease-ui);
}
.cc-sw__input:checked + .cc-sw__track{background:var(--accent)}
.cc-sw__input:checked + .cc-sw__track .cc-sw__thumb{transform:translateX(20px)}
.cc-sw__input:disabled + .cc-sw__track{opacity:0.55}
.cc-sw__input:focus-visible + .cc-sw__track{outline:2px solid var(--accent);outline-offset:3px}

.cc-panel__actions{display:flex;gap:12px;flex-wrap:wrap}
.cc-panel__actions .cc-btn{flex:1 1 auto}

/* ---------- ovládač v pätičke ---------- */
/* vyzerá aj sa správa presne ako ostatné odkazy v .footer__links,
   len je to <button> — nikam nenaviguje, otvára panel */
.footer__cc{
  display:inline-flex;align-items:center;min-height:44px;width:fit-content;
  font:inherit;background:none;border:0;padding:0;
  color:var(--text-2);text-align:left;cursor:pointer;
  transition:color var(--t-small) ease;
}
@media (hover:hover){
  .footer__cc:hover{color:#fff}
}

/* =========================================================
   Malé šírky
   ========================================================= */
/* Na širokej obrazovke platí plné znenie, skrátené je skryté. */
.cc__desc--kratky{display:none}

@media (max-width:640px){
  /* LIŠTA NA TELEFÓNE.
     Merané 5. 8. 2026 pri 375×812: lišta mala 373 px, teda 46 % obrazovky,
     a úplne zakrývala druhé tlačidlo v hero („Zavolať na správu budovy")
     aj perex. Návštevník teda začínal stránku odmietaním niečoho, čo si
     nepýtal, a telefónne CTA nikdy neuvidel.
     Skracujeme tromi vecami naraz: kratším znením (obsah ostáva celý, viď
     barDescKratky v cookies.js), dvomi tlačidlami vedľa seba namiesto troch
     pod sebou, a menšími odstupmi. Nastavenia sú textovým odkazom pod nimi —
     je to najmenej používaná voľba a nemusí mať plochu tlačidla. */
  .cc{padding:16px 0 calc(14px + env(safe-area-inset-bottom))}
  .cc__in{gap:14px}
  /* Nadpis „Cookies na tomto webe" je na telefóne len vizuálne skrytý, nie
     odstránený: je cieľom aria-labelledby, takže bez neho by oblasť stratila
     prístupný názov. Text pod ním začína slovom „cookies", takže o čo ide,
     je jasné aj bez neho — a ušetrených 25 px je práve toľko, aby lišta
     prestala prekrývať perex v hero. */
  .cc__title{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;margin:0;
  }
  .cc__desc{font-size:12px;line-height:1.5}
  .cc__desc--plny{display:none}
  .cc__desc--kratky{display:block}

  .cc__actions{
    width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .cc__actions .cc-btn{width:100%;padding-inline:10px;font-size:13px}
  /* Nastavenia cez celú šírku pod dvojicu, tichšie než ostatné dve */
  .cc__actions .cc-btn--ghost{grid-column:1 / -1;padding-block:6px}

  .cc-panel__actions{flex-direction:column}
  .cc-panel__actions .cc-btn{width:100%}
  .cc-cat__head{flex-wrap:wrap}
}

/* NÍZKE OKNO, NIE ÚZKE. Lišta sa dosiaľ skracovala len podľa ŠÍRKY, takže
   notebook 1366x768 (okno ~657 px), 1280x800 (~610) aj 1024x600 dostali plné
   znenie na 190–232 px a schovali pod seba obe tlačidlá v hero. Skracuje sa
   tým istým spôsobom ako na telefóne: krátkym znením a menšími odstupmi.
   min-width:641px preto, aby sa to nebilo s blokom pre úzke displeje — ten
   už krátku verziu zapína sám. Odmerané pri 1024x600: lišta 232 -> 147 px,
   začína na 453 namiesto 368, tlačidlá (406–452) sú nad ňou. */
@media (min-width:641px) and (max-height:740px){
  .cc{padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
  .cc__in{gap:12px 24px}
  .cc__title{font-size:var(--body);margin-bottom:4px}
  .cc__desc{font-size:13px;line-height:1.45}
  .cc__desc--plny{display:none}
  .cc__desc--kratky{display:block}
}

/* =========================================================
   prefers-reduced-motion — plná funkčnosť, žiadny pohyb
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .cc,.cc-panel,.cc-modal__backdrop,.cc-sw__track,.cc-sw__thumb,.cc-btn,.cc-panel__close{
    transition:none !important;
  }
  .cc{transform:none}
  .cc-panel{opacity:1;transform:translate(-50%, 0)}
  @media (min-width:768px){
    .cc-panel{transform:translate(-50%, -50%)}
  }
}

/* =========================================================
   PLÁVAJÚCA SUŠIENKA — trvalý prístup k voľbe
   ---------------------------------------------------------
   GDPR čl. 7 ods. 3: odvolať súhlas musí byť rovnako ľahké ako ho dať.
   Dať ho je jeden klik na lište uprostred obrazovky, odvolať ho bolo
   dovtedy treba hľadať v pätičke na konci jednostránky.
   Objaví sa až po zmiznutí lišty (rieši cookies.js), takže na prvej
   návšteve dve tlačidlá o tom istom nesúperia.
   ========================================================= */
.cc-fab{
  position:fixed;z-index:190;
  left:max(16px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:0;
  height:44px;padding:0 12px;              /* 44 px = dotyková norma */
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text-2);
  transition:color var(--t-small) ease, border-color var(--t-small) ease,
             background var(--t-small) ease, gap var(--t-small) var(--ease-ui);
}
.cc-fab svg{width:20px;height:20px;flex:none;display:block}
/* Popis je skrytý za nulovou šírkou, nie display:none — pri hoveri a fokuse
   sa vysunie, ale čítačka ho číta vždy (ovládač má aj aria-label). */
.cc-fab__txt{
  font-size:var(--small);white-space:nowrap;overflow:hidden;
  max-width:0;opacity:0;
  transition:max-width var(--t-small) var(--ease-ui), opacity var(--t-small) ease;
}
.cc-fab:focus-visible{color:#fff;border-color:var(--accent)}
.cc-fab:focus-visible{gap:8px}
.cc-fab:focus-visible .cc-fab__txt{max-width:8em;opacity:1}
@media (hover:hover){
  .cc-fab:hover{color:#fff;border-color:#fff;gap:8px}
  .cc-fab:hover .cc-fab__txt{max-width:8em;opacity:1}
}
/* SVETLÉ A MAGENTOVÉ SEKCIE.
   Tmavá sušienka na bielej sekcii pôsobila ako klaksón cez text. Triedu
   prepína scrollová slučka v main.js podľa sekcie POD sušienkou (nie pod
   navigáciou — tá rieši svoju vlastnú tému hore). */
.fab--light .cc-fab{
  background:#fff;
  /* Obrys 0,16 dával nad svetlou plochou 1,30 : 1 a sušienka na nej nebola
     vidieť ako tlačidlo, len ako voľne položená ikona. Na bielych sekciách to
     platilo odjakživa, so svetlým hero to vidno hneď po otvorení stránky.
     0,55 dá 4,25 : 1 nad hero a 4,76 : 1 nad bielou sekciou; WCAG 1.4.11
     žiada pre ovládač 3 : 1. Tá istá hodnota ako obrys vedľajšieho tlačidla. */
  border-color:rgba(0,0,0,0.55);
  color:var(--ink-2, #4a4a4a);
}
@media (hover:hover){
  .fab--light .cc-fab:hover{color:#000;border-color:#000}
}
.fab--light .cc-fab:focus-visible{color:#000;border-color:var(--accent)}

/* MAGENTOVÁ SEKCIA.
   Pôvodne tu bola priehľadná plocha s 55 % bielym obrysom — vraj aby biely
   štvorec nesvietil viac než sekcia. V praxi sa sušienka na magente stratila
   úplne. Zmerané: obrys aj plocha v magentových odtieňoch dávajú voči
   #d31145 nanajvýš 1,27 : 1, kým WCAG 1.4.11 žiada pre grafický prvok 3 : 1.
   Magenta na magente sa teda nedá zachrániť odtieňom, nech je akýkoľvek.

   Biela dáva 5,34 : 1 a navyše kopíruje tlačidlá v tej istej sekcii
   (.sec--peach .btn je tiež biele s magentovým textom), takže sušienka
   nevyzerá ako cudzí prvok, ale ako súčasť tej istej sady. */
.fab--peach .cc-fab{
  background:#fff;
  border-color:#fff;
  color:var(--accent);
}
@media (hover:hover){
  .fab--peach .cc-fab:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
}
.fab--peach .cc-fab:focus-visible{color:var(--accent);border-color:var(--accent-hover)}

/* Rovnako ako lišta ustúpi prekryvom, ktoré si vyvolal sám návštevník —
   bottom-sheet s „Mám záujem", mobilné menu, lightbox aj samotný panel
   súkromia (tam by tlačidlo otváralo to, čo je už otvorené). */
body.sheet-open .cc-fab,
body.menu-open .cc-fab,
body.lb-open .cc-fab,
body.cc-open .cc-fab{display:none}

@media (prefers-reduced-motion: reduce){
  .cc-fab,.cc-fab__txt{transition:none !important}
}