/* ══════════════════════════════════════════════════════════════════════════
   COOKIE BANNER — Skovbo Byg
   ──────────────────────────────────────────────────────────────────────────
   Why this is a LINKED stylesheet and not part of a page's inline <style>,
   which is how every other rule on this site travels:

     · nav-shell.js's swapStyles() drops every <style> in <head> on a page swap
       and inserts the incoming page's instead. The banner outlives page swaps
       (see cookies.js), so its CSS has to as well — and a <link> is not touched
       by that swap. A JS-injected <style> would vanish on the first navigation
       and leave the banner naked.
     · One copy instead of six. It would otherwise be the seventh thing that
       has to be kept in sync by hand across the five pages plus 404.

   Self-contained on purpose, in two ways:
     · Every token has a literal fallback, because 404.html carries only a
       subset of :root and the banner shows there too.
     · Its own .ck-* classes rather than the site's .btn — partly so 404.html
       gets the same banner, partly because a page-level bare `span{}` rule can
       bleed into anything reused (that is what greyed the FAQ CTA once).
   ══════════════════════════════════════════════════════════════════════════ */

/* The bar sits above the page but BELOW the privacy drawer: that is a <dialog>
   opened with showModal(), which lives in the top layer and therefore always
   wins regardless of z-index. Nothing here needs to fight it. */
.ck-bar {
  position: fixed;
  z-index: 90;
  /* Right, not left, and measured rather than guessed. A left-hand bar covers
     "Start dit projekt" and "Ring til William" — the hero CTA, at the moment of
     arrival — at every laptop height swept (1440x800/900, 1512x850, 1280x720).
     On the right it covers nothing on arrival; the cost is that the footer's
     phone and mail sit under it, and at exactly 1440x900 the first field of the
     kontakt form does too, until the visitor answers. That is the smaller of the
     two, it lasts one tap, and every other fix (padding the footer up while the
     bar is open) means changing the document height under the footer's
     scroll-driven rise — which is not worth it. */
  right: 1.25rem;
  bottom: 1.25rem;
  width: min(28.75rem, calc(100vw - 2.5rem));
  box-sizing: border-box;
  padding: 1.5rem 1.625rem 1.625rem;
  background: var(--paper, #FDFCF8);
  border: 1px solid var(--line, rgba(43, 41, 37, .12));
  border-radius: var(--r-lg, 1.5rem);
  box-shadow: var(--sh-lg, 0 28px 70px -24px rgba(32, 30, 26, .22));
  font-family: var(--font, 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif);
  color: var(--ink-900, #2B2925);
  /* Closed is the resting state, so a visitor who has already chosen never
     sees a frame of it even if the stylesheet lands before the script. */
  opacity: 0;
  transform: translateY(1.5rem);
  visibility: hidden;
  transition: opacity .42s cubic-bezier(.22, .8, .22, 1),
              transform .42s cubic-bezier(.22, .8, .22, 1),
              visibility 0s linear .42s;
}
.ck-bar.is-in {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
@media (prefers-reduced-motion: reduce) {
  .ck-bar { transition: none; }
}

.ck-eyebrow {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ochre-600, #3B2A0E);
  margin: 0 0 0.75rem;
}
.ck-bar h2 {
  font-family: var(--serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.3125rem;
  line-height: 1.22;
  letter-spacing: -.006em;
  font-weight: 560;
  color: var(--ink-900, #2B2925);
  margin: 0 0 0.625rem;
}
.ck-bar p {
  font-size: 0.90625rem;
  line-height: 1.7;
  color: var(--text-2, #746F65);
  margin: 0 0 1.125rem;
}
.ck-bar a {
  color: var(--ochre-300, #705322);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ck-bar a:hover { color: var(--ochre-500, #503A15); }

/* Accept and reject are the same shape and the same size, side by side. That
   equal prominence is the point under the Danish rules, not a design
   preference — and they are the only two answers the banner offers (see the
   note in cookies.js before adding a third). */
.ck-acts {
  display: flex;
  gap: 0.625rem;
}
.ck-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill, 999px);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.ck-btn:active { transform: translateY(1px) scale(.99); }
.ck-accept {
  background: var(--ink-900, #2B2925);
  color: var(--on-dark, #F4F2EC);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(32, 30, 26, .06));
}
.ck-accept:hover {
  background: var(--ink-800, #3A3731);
  box-shadow: var(--sh-md, 0 10px 30px -10px rgba(32, 30, 26, .14));
}
.ck-reject {
  background: transparent;
  border-color: var(--line-strong, rgba(43, 41, 37, .26));
  color: var(--ink-900, #2B2925);
}
.ck-reject:hover { background: var(--ink-50, #EFEDE7); }

/* The link and its full stop travel as one unit, so the phrase never breaks
   across two lines with a single word stranded on the last one. */
.ck-nb { white-space: nowrap; }

.ck-btn:focus-visible {
  outline: 2px solid var(--ochre-300, #705322);
  outline-offset: 2px;
}

/* Phone: full width along the bottom edge, corners squared off where it meets
   the edges. The site's own phone breakpoint is 768px.
   Everything here is height discipline. A bottom sheet on a 844px-tall phone
   sits on top of the hero's "Start dit projekt" / "Ring til William" until it is
   answered, so it is trimmed to the smallest thing that still discloses what it
   has to: the eyebrow goes, the buttons stay on one line, the type comes down. */
@media (max-width: 768px) {
  .ck-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 1.25rem 1.25rem 1.375rem;
    border-radius: var(--r-lg, 1.5rem) var(--r-lg, 1.5rem) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: 82dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ck-eyebrow { display: none; }
  .ck-bar h2 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
  .ck-bar p { font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.9375rem; }
  .ck-btn { font-size: 0.875rem; padding: 0.75rem 0.625rem; }
}
