/* sirucka.cz — consent bar.
 *
 * Its own file because the two page shells load different stylesheets: _Layout.cshtml loads
 * site.css and Index.cshtml loads frontend.css. The banner is the same on both, so it lives
 * here and both heads link it — the alternative was the same rules duplicated in two files
 * that would drift apart within a release.
 *
 * Every colour comes from tokens.css, which both stylesheets already pull in. */

.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;                 /* over .nav (z-index 100) and the atmos layer */
  background: rgba(10, 15, 28, .82);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2);
  border-top: 1px solid var(--border-accent);
  box-shadow: 0 -18px 48px -28px rgba(0, 0, 0, .9);
  animation: cookiebar-rise .32s cubic-bezier(.2, .7, .3, 1) both;
}

/* The partial ships with the hidden attribute set and cookie-consent.js removes it. Without
   this rule the display below would win and the bar would flash on every page load. */
.cookiebar[hidden] { display: none; }

@keyframes cookiebar-rise {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookiebar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.cookiebar-text { flex: 1; min-width: 0; }

.cookiebar-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: 4px;
}

.cookiebar-text p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.cookiebar-text a {
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookiebar-text a:hover { color: var(--text-primary); }

.cookiebar-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Both buttons are the same size and weight. Only the border and text colour differ, so
   accepting is never the visually easier click. */
.cookiebar-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--weight-medium);
  letter-spacing: .02em;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, .04);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.cookiebar-btn:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, .08);
}

.cookiebar-btn.is-accept {
  border-color: var(--border-accent);
  color: var(--accent-glow);
  background: var(--accent-purple-soft);
}

.cookiebar-btn.is-accept:hover {
  color: var(--text-primary);
  background: var(--accent-gradient-soft);
}

.cookiebar-btn:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

/* The footers reopen the bar through a button, which must not look like one. */
.cookie-settings-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-settings-link:hover { color: var(--accent-glow); }

@media (max-width: 720px) {
  .cookiebar-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px; }
  .cookiebar-actions { justify-content: stretch; }
  .cookiebar-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cookiebar { animation: none; }
}

/* The privacy + cookies pair in the footer. Here rather than in site.css and frontend.css
   because it is the same markup in the Razor layout and in the React footer. */
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal a:hover,
.footer-legal .cookie-settings-link:hover { color: var(--accent-glow); }