/* ============================================================
   HAVA.SI - cookie/consent bar (.notice shell) + privacy page (legal)
   ============================================================ */

/* ── the notice: a small HUD transmission above the accent hub ── */
.notice {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* above the to-top slot → the two never collide */
  bottom: calc(clamp(1rem, 3vw, 2rem) + 66px);
  z-index: 98;   /* under the nav (100) and the mobile fullscreen menu (99) */
  width: min(372px, calc(100vw - 2rem));
  padding: 1.05rem 1.2rem 1.1rem;
  /* same glass material as the cards - translucent + backdrop blur */
  background:
    linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.006) 44%),
    rgba(10, 10, 14, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 50px rgba(0, 0, 0, .45);
  opacity: 0; translate: 0 18px; pointer-events: none;
  filter: blur(6px);
  transition: opacity .8s var(--e-out), translate .8s var(--e-out), filter .8s var(--e-out);
}
/* end state drops `filter` entirely (not blur(0)): a lingering filter keeps the
   panel on its own compositing layer, which Safari can composite with the wrong
   alpha over the animating starfield. blur(6px) -> none still interpolates. */
.notice.show { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
.notice.out  { opacity: 0; translate: 0 10px; filter: blur(4px); transition-duration: .5s; }

/* mobile: a full-width bottom sheet that reads as a SOLID panel - the glass
   translucency let the stacked cards/chips behind bleed through and looked
   like a mush over the content. Opaque + edge-to-edge = clean, deliberate. */
@media (max-width: 560px) {
  .notice {
    left: max(.8rem, env(safe-area-inset-left));
    right: max(.8rem, env(safe-area-inset-right));
    width: auto;
    bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 66px);
    /* FULLY opaque here: the panel sits on its own compositing layer (translate
       + opacity transition) and Safari composites a near-opaque layer over the
       animating starfield with a visible ghost of the content behind it.
       Verified at DPR2 in WebKit: .975 ghosted, 1.0 is clean. */
    background:
      linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.006) 44%),
      #08080b;
    /* the panel is already opaque here, so the blur buys nothing visually and
       costs Safari a full re-filter every frame (stars animate underneath) */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* sci-fi corner brackets (top-left + bottom-right) */
.notice::before, .notice::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.notice::before { top: -1px; left: -1px; border-top: 1px solid var(--red); border-left: 1px solid var(--red); }
.notice::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--red); border-right: 1px solid var(--red); }

/* live status dot - breathing, accent-driven */
.notice__dot {
  position: absolute; top: .95rem; right: 1.05rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--red) 80%, transparent);
  animation: noticePulse 2.2s var(--e-smooth) infinite;
}
@keyframes noticePulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1); }
}

.notice__head {
  font-size: .58rem; letter-spacing: .26em;
  color: var(--red);
  text-shadow: 0 0 12px color-mix(in srgb, var(--red) 35%, transparent);
  margin-bottom: .6rem;
}
.notice__body {
  font-size: .84rem; line-height: 1.55; color: var(--text-dim);
  margin-bottom: .95rem;
}
.notice__body b { font-weight: 500; color: var(--text); }

.notice__ok {
  position: relative; overflow: hidden;
  padding: .55rem 1.25rem; border-radius: var(--radius);
  background: var(--red-deep); color: #fff;
  font-family: var(--f-body); font-weight: 500; font-size: .8rem; letter-spacing: .02em;
  transition: transform .35s var(--e-spring), box-shadow .35s var(--e-out), background-color .3s;
}
.notice__ok:hover {
  background: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--red) 40%, transparent);
}
.notice__ok.is-pressed { transform: scale(.94); background: var(--red); }
.notice__more.is-pressed { color: var(--neon); }
.notice__more {
  font-size: .6rem; letter-spacing: .2em; color: var(--muted);
  /* grow the tap area without shifting layout (secondary link → page) */
  padding: .45rem .3rem; margin: -.45rem -.3rem;
  transition: color .25s, text-shadow .25s;
}
.notice__more:hover {
  color: var(--neon);
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 45%, transparent);
}

/* ════════════════════════════════════════════════════════════
   COOKIE NOTICE - same glass HUD shell as .notice, three lines tall:
   label / one sentence / action row. The site has nothing to consent
   to (zero cookies, zero third parties), so this is an acknowledgement,
   not a choice - one button, and the details link sits beside it on the
   same baseline instead of eating another row.
   ════════════════════════════════════════════════════════════ */
/* z 101: above the SCROLL hint (--z-nav 100), which sits bottom-centre and
   would otherwise print straight through the bar on narrow screens. */
.consent {
  width: min(336px, calc(100vw - 2rem)); z-index: 101;
  padding: .9rem 1.05rem .95rem;
}
.consent .notice__head { margin-bottom: .45rem; }
.consent .notice__body {
  font-size: .78rem; line-height: 1.5;
  margin-bottom: .8rem;
  /* the pulsing dot lives top-right: keep the first line clear of it */
  padding-right: .6rem;
}
/* ...but the fullscreen mobile menu still wins (the bar is appended to <body>
   after .mobile-menu, so a sibling selector reaches it) */
.mobile-menu.open ~ .consent { opacity: 0; pointer-events: none; }

.consent__actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem .9rem;
}
.consent__btn {
  min-height: 40px; min-width: 118px;
  display: grid; place-items: center;
  padding: .5rem 1.1rem; font-size: .78rem;
}
/* privacy page: the "DETAILS →" link is dropped there, so the lone button
   takes the full row instead of leaving a dead gap beside it */
.consent__btn:only-child { flex: 1 1 auto; }
/* kept for the day ASK flips back on in consent.js: the refuse option gets
   identical size + placement, outline instead of fill */
.consent__btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid rgba(255, 255, 255, .2);
}
.consent__btn--ghost:hover {
  background: rgba(255, 255, 255, .05);
  border-color: var(--red); color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--red) 20%, transparent);
}
.consent__btn--ghost.is-pressed {
  background: rgba(255, 255, 255, .09);
  border-color: var(--red);
}

@media (max-width: 560px) {
  .consent { width: auto; }
  .consent .notice__body { font-size: .8rem; }
}

/* footer trigger that re-opens the bar (withdrawal path) - a <button>
   styled exactly like the neighbouring privacy link */
.contact__cookies {
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}

/* ════════════════════════════════════════════════════════════
   PRIVACY PAGE - quiet editorial reading mode in the same void
   ════════════════════════════════════════════════════════════ */
.legal {
  position: relative; z-index: var(--z-content);
  max-width: 760px; margin-inline: auto;
  padding: clamp(7.5rem, 14vh, 10rem) var(--gut) 6rem;
}
.legal > * { animation: legalUp .9s var(--e-out) backwards; }
.legal > *:nth-child(1) { animation-delay: .05s; }
.legal > *:nth-child(2) { animation-delay: .12s; }
.legal > *:nth-child(3) { animation-delay: .19s; }
.legal > *:nth-child(4) { animation-delay: .26s; }
.legal > *:nth-child(n+5) { animation-delay: .33s; }
@keyframes legalUp {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.legal__title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: .5rem 0 .9rem; }
.legal__meta { font-size: .6rem; letter-spacing: .26em; color: var(--muted-2); margin-bottom: 2.6rem; }

/* TL;DR transmission box */
.legal__tldr {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  background: color-mix(in srgb, var(--red) 5%, transparent);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}
.legal__tldr::before, .legal__tldr::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.legal__tldr::before { top: -1px; left: -1px; border-top: 1px solid var(--red); border-left: 1px solid var(--red); }
.legal__tldr::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--red); border-right: 1px solid var(--red); }
.legal__tldr .mono {
  display: block; font-size: .58rem; letter-spacing: .26em;
  color: var(--red); margin-bottom: .55rem;
}
.legal__tldr p { color: var(--text); font-size: .95rem; line-height: 1.6; }

/* layout.css gives every <section> huge padding-block - reading page resets it */
.legal section { border-top: 1px solid var(--border); margin-top: 2.6rem; padding-block: 2.1rem 0; }
.legal h2 {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .01em;
  margin-bottom: 1rem;
}
.legal h2 .mono {
  font-size: .68rem; letter-spacing: .18em; color: var(--red);
  text-shadow: 0 0 10px color-mix(in srgb, var(--red) 30%, transparent);
}
.legal p { color: var(--text-dim); font-size: .95rem; margin-bottom: .8rem; }
.legal p strong { color: var(--text); font-weight: 500; }
.legal a:not(.legal__back):not(.nav__logo) { color: var(--neon-soft); border-bottom: 1px solid color-mix(in srgb, var(--neon) 35%, transparent); transition: color .25s, border-color .25s; }
.legal a:not(.legal__back):not(.nav__logo):hover { color: var(--neon); border-color: var(--neon); }
.legal ul { margin: .4rem 0 .9rem; padding-left: 0; }
.legal ul li {
  position: relative; padding-left: 1.3rem; margin-bottom: .45rem;
  color: var(--text-dim); font-size: .95rem;
}
.legal ul li::before {
  content: '·'; position: absolute; left: .2rem;
  color: var(--red); font-weight: 700;
}

/* storage table */
.legal table { width: 100%; border-collapse: collapse; margin: 1.1rem 0 .6rem; }
.legal th {
  font-family: var(--f-mono); font-weight: 400; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); text-align: left;
  padding: 0 .9rem .55rem 0;
}
.legal td {
  border-top: 1px solid var(--border);
  padding: .7rem .9rem .7rem 0;
  font-size: .85rem; color: var(--text-dim); vertical-align: top;
}
.legal td code {
  font-family: var(--f-mono); font-size: .74rem;
  color: var(--neon-soft);
  background: color-mix(in srgb, var(--neon) 9%, transparent);
  padding: .15rem .45rem; border-radius: 3px; white-space: nowrap;
}

/* privacy page top bar (right side of the shared .nav) */
.pnav__right { display: flex; align-items: center; gap: 1.6rem; }

/* ── back to the site ──
   A real button at the top-LEFT of the reading column, not a whisper in the
   top bar: leaving a legal page must never feel like a dead end. */
.legal__back {
  /* flex + fit-content, not inline-flex: as an inline box the "Právne info"
     label ran along beside it on the same line */
  display: flex; width: fit-content; align-items: center; gap: .6rem;
  margin-bottom: 2rem; padding: .68rem 1.15rem .68rem 1rem;
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--f-body); font-size: .84rem; font-weight: 500; letter-spacing: .01em;
  color: var(--text);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%), rgba(12,12,17,.45);
  transition: border-color .35s, box-shadow .35s, transform .35s var(--e-spring), color .25s;
}
.legal__back:hover {
  border-color: color-mix(in srgb, var(--neon) 60%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--red) 20%, transparent);
  transform: translateX(-3px);
}
.legal__back-arr {
  font-family: var(--f-mono); color: var(--red);
  transition: transform .35s var(--e-spring);
}
.legal__back:hover .legal__back-arr { transform: translateX(-3px); }

.legal__foot {
  margin-top: 3.2rem; padding-top: 1.6rem; border-top: 1px solid var(--border);
  font-family: var(--f-mono); font-size: .68rem; color: var(--muted-2);
}

/* privacy link in the contact footer */
.contact__privacy { color: var(--muted); transition: color .25s; border-bottom: 1px solid transparent; }
.contact__privacy:hover { color: var(--neon-soft); }

@media (max-width: 560px) {
  .legal th:nth-child(3), .legal td:nth-child(3) { display: none; }   /* drop the "kde" column */
}

/* inline "change your choice" trigger inside the privacy text - reads as the
   surrounding links do (.legal a is a selector, a <button> needs its own) */
.legal__consent {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--neon-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
  transition: color .25s, border-color .25s;
}
.legal__consent:hover { color: var(--neon); border-color: var(--neon); }