/* ==========================================================================
   Cookie consent bar — styles for assets/cookie-bar.js.

   The bar is cream with berry ink in BOTH themes. On the dark site that makes
   it a clear block against the berry page; on the light site it is told apart
   from the page by its top rule. Nothing here reads a theme token, so there is
   nothing to flip and no [data-theme] override to forget.

   Colours are the brand variables from takumis-base.css only — no new hex.
   The button is the site's own .btn.btn-primary and is not restyled here.
   ========================================================================== */

.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  /* Above the nav (50). */
  z-index: 100;
  background: var(--hp-cream-white);
  color: var(--hp-midnight-berry);
  border-top: 1px solid var(--hp-line-300);
  font-family: var(--font-sans);
  transform: translateY(100%);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar.is-visible { transform: translateY(0); }
/* The slide only exists when motion is welcome; otherwise it simply appears. */
@media (prefers-reduced-motion: no-preference) {
  .cookie-bar { transition: transform var(--dur-slow) var(--ease-standard); }
}

.cookie-bar-inner {
  display: flex; align-items: center; gap: var(--space-8);
  padding-top: var(--space-5); padding-bottom: var(--space-5);
}
.cookie-bar-text { flex: 1; min-width: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.cookie-bar-text p { margin: 0; }
.cookie-bar-text p + p { margin-top: var(--space-2); }
.cookie-bar-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--hp-midnight-berry); }
.cookie-bar-text a { color: var(--hp-blue-violet); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar-text a:hover { color: var(--hp-violet-700); }
.cookie-bar .btn { flex: none; }

/* The site's global focus ring is a pale indigo glow, which is too faint on
   cream. Inside the bar the ring is solid berry. */
.cookie-bar :focus-visible { outline: 2px solid var(--hp-midnight-berry); outline-offset: 2px; box-shadow: none; }

/* Mobile: text first, button full width below. The bar never takes more than
   ~40% of the screen; a long paragraph scrolls inside it instead. */
@media (max-width: 760px) {
  .cookie-bar-inner {
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    padding-top: var(--space-4); padding-bottom: var(--space-4);
    max-height: 40vh; max-height: 40dvh;
  }
  .cookie-bar-text { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .cookie-bar .btn { width: 100%; }
}

/* While the bar is up, leave room under the page so it never hides the last
   lines of the footer. --cookie-bar-h is set by cookie-bar.js. */
html.cookie-bar-open body { padding-bottom: var(--cookie-bar-h, 0px); }

/* The footer's "Cookie settings" control: a <button> that reads as the links
   around it (same size, colour and hover as `.footer li a`). */
.footer li .cookie-settings-link {
  font: inherit; font-size: var(--fs-body-sm); color: var(--dk-muted);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer li .cookie-settings-link:hover { color: var(--hp-tropical-indigo); }
:root[data-theme="light"] .footer li .cookie-settings-link:hover { color: var(--hp-blue-violet); }