/* kantsir.eu — consent banner styling.
 * Scope: everything here is banner-only (.rk-consent*). No global element or
 * utility selectors are redefined, so this file cannot alter the rest of the site.
 * Palette/type tokens come from style.css (:root); fallbacks are given so the
 * banner still reads correctly if it is ever loaded on its own.
 * Design: dark cinematic, on the site's own pattern for a scrolled nav
 * (surface veil + blur) — no gradients, no drop shadows.
 * Provenance: gdpr-data-handling skill (consent management pattern). */

.rk-consent{
  position:fixed;
  left:0;right:0;bottom:0;
  /* 50 = above page content, below .nav (60) and .lightbox (100).
     The mobile menu overlay lives inside .nav's stacking context, so it
     always paints over the banner; the rule at the bottom hides it anyway. */
  z-index:50;
  background:rgba(22,22,22,.94);              /* --surface, veiled   */
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.10);  /* --hair              */
  color:#F2F0EB;                               /* --fg                */
  font-family:var(--display,"Archivo",system-ui,sans-serif);
  transform:translateY(0);
  transition:transform .45s ease,opacity .45s ease;
}
.rk-consent[hidden]{display:none}
.rk-consent.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .rk-consent{transition:none}
  .rk-consent.is-hidden{transform:none;opacity:0}
}

/* When the notice is on screen, reserve space at the bottom of the document so
   it can never sit on top of the contact form's Send button (or any footer link).
   --rk-consent-h is measured by consent.js. */
html.rk-consent-visible body{padding-bottom:var(--rk-consent-h,0px)}
html{scroll-padding-bottom:calc(var(--rk-consent-h,0px) + 10px)}

.rk-consent__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"text actions" "status status";
  gap:14px clamp(20px,3vw,48px);
  align-items:center;
  padding-block:clamp(16px,2.2vw,22px);
}
.rk-consent__text{grid-area:text;min-width:0}
.rk-consent__title{margin-bottom:7px}
.rk-consent__desc{
  font-size:14.5px;line-height:1.55;color:#D8D4CD;max-width:78ch;margin:0;
}
.rk-consent__more{
  font-size:12.5px;line-height:1.5;color:#9A9791;margin:7px 0 0;
}
.rk-consent__desc a,.rk-consent__more a{
  color:#E8A33D;text-decoration:underline;text-underline-offset:3px;
}
.rk-consent__desc a:hover,.rk-consent__more a:hover{color:#F2F0EB}

/* Explicit two-column grid. Do NOT use grid-auto-flow here: combining it with a
   full-width child (grid-column:1/-1) produces an unstable grid that can shift the
   hit target away from the buttons, so a real click lands in the gap between them. */
.rk-consent__actions{
  grid-area:actions;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px;
  align-items:center;
}

/* Equal prominence for accept and reject: same element, same class, same size,
   weight and contrast. Only the label differs. */
.rk-consent__btn{
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#F2F0EB;
  border:1px solid rgba(255,255,255,.22);
  padding:13px clamp(14px,2vw,22px);
  min-height:44px;                 /* touch target */
  white-space:nowrap;
  text-align:center;
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
}
.rk-consent__btn:hover{border-color:#E8A33D;color:#E8A33D;background:rgba(232,163,61,.08)}
.rk-consent__btn:focus-visible{outline:1px solid #E8A33D;outline-offset:3px}

/* "Later" records no choice at all (state stays unset, the notice returns on the
   next page view) — it is deliberately not a third equal option. */
.rk-consent__dismiss{
  grid-column:1 / -1;
  justify-self:end;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#9A9791;
  padding:6px 2px;
  transition:color .3s ease;
}
.rk-consent__dismiss:hover{color:#F2F0EB}
.rk-consent__dismiss:focus-visible{outline:1px solid #E8A33D;outline-offset:3px}

.rk-consent__status{
  grid-area:status;
  margin:0;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  font-size:11.5px;letter-spacing:.06em;
  color:#9A9791;
  min-height:1em;
}
.rk-consent__status:empty{min-height:0}
.rk-consent__status--warn{color:#E8A33D}

@media (max-width:880px){
  .rk-consent__inner{
    grid-template-columns:1fr;
    grid-template-areas:"text" "actions" "status";
    gap:10px;
    padding-block:14px;
    max-height:70vh;
    overflow-y:auto;
  }
  .rk-consent__desc{font-size:13.5px;line-height:1.5}
  .rk-consent__actions{grid-template-columns:minmax(0,1fr);gap:8px}
  .rk-consent__btn{padding:12px 16px}
  .rk-consent__dismiss{grid-column:auto;justify-self:start;padding-top:2px}
}

/* Compact state: entered while the visitor's focus is inside a form (see consent.js),
   so the notice can never cover a field or the Send button. It stays visible, both
   choices stay equally prominent, and it cannot be dismissed by accident — it only
   drops the long explanation. The line with the privacy-policy link STAYS, so the
   choice is never presented without the route to the full information.
   Nothing here may be triggered by focus on the notice's own buttons: resizing on
   mousedown would move the button out from under the cursor and swallow the click. */
.rk-consent.is-compact .rk-consent__inner{padding-block:11px;gap:9px}
.rk-consent.is-compact .rk-consent__desc,
.rk-consent.is-compact .rk-consent__status{display:none}
.rk-consent.is-compact .rk-consent__more{margin-top:0}
.rk-consent.is-compact .rk-consent__actions{grid-template-columns:minmax(0,1fr)}
.rk-consent.is-compact .rk-consent__title{margin-bottom:4px}

/* Reserve the scrollbar gutter only while the notice is up, so introducing its
   bottom padding can never itself change the layout width (which would rewrap the
   text and change the height again — a measurement feedback loop). */
html.rk-consent-visible{scrollbar-gutter:stable}

/* Never sit over the full-screen mobile menu. */
body.nav-open .rk-consent{display:none!important}