/* ==========================================================================
   Artcestry: cookie consent banner (built by consent.js; nothing here matches without it).
   Tokens and the .btn / .btn--cream look come from styles.css (parts/00-base.css), which loads
   first. Only the banner's own elements and two html classes that consent.js sets are styled:
   no existing element changes layout.
   ========================================================================== */

/* Fixed bottom bar on the site's dark ink, like the header and the motion control. It sits under
   the motion pause control (z-index 150 in motion.css), which stays visible and usable on top of
   it; the bar leaves room for that control instead (see "Pause control" below). */
.cc {
  --focus: var(--gold-light);   /* the base focus ring colour for dark surfaces */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 140;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--ink);
  color: var(--sand);
  border-top: 1px solid rgba(233, 221, 190, .2);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .16);
}
.cc[hidden], .cc-spacer[hidden] { display: none !important; }
/* The bar itself takes focus only when opened from Cookie settings; the ring sits inside it. */
.cc:focus { outline: none; }
.cc:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -4px; }

.cc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 18px var(--gutter);
}
.cc__copy { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.cc__text { font: 400 14px/1.6 var(--sans); color: var(--sand); }
.cc__status { margin-top: 4px; font: 600 13px/1.5 var(--sans); color: var(--on-dark); }
.cc__status[hidden] { display: none; }
.cc__link {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cc__link:hover { color: var(--on-dark); }

/* Reject and Accept: the same classes (.btn .btn--cream .cc__btn), so equal size and weight. */
.cc__actions { flex: none; display: flex; gap: 12px; }
.cc__btn { min-width: 132px; }

/* Stacked from 768px down: copy on top, the two buttons sharing the row below. */
@media (max-width: 768px) {
  .cc__inner { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 16px; }
  .cc__copy { max-width: none; }
  .cc__btn { flex: 1 1 0; min-width: 0; max-width: 200px; padding-inline: 16px; }
}
@media (max-width: 480px) {
  .cc__text { font-size: 13px; line-height: 1.55; }
}

/* Short viewports (landscape phones, zoomed windows). The open bar sets scroll-padding-bottom to its
   own height, and the fixed header takes scroll-padding-top (76px at 768px and below, 84px above),
   so a tall bar would leave keyboard focus no room at all. Here the bar is capped so that at least
   64px of page stays clear between the header and the bar (100px of bar at 256px tall, half the
   viewport at most), its padding tightens, and its own content scrolls inside it. */
@media (max-height: 560px) {
  .cc {
    max-height: min(50vh, calc(100vh - 156px));
    max-height: min(50dvh, calc(100dvh - 156px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cc__inner { padding-block: 8px; gap: 8px 24px; }
  .cc__text { font-size: 13px; line-height: 1.45; }
  .cc__status { margin-top: 2px; }
}

/* Pause control. motion.css pins it to the bottom-left corner while html.motion.m-ui is set
   (motion.js built it). The bar keeps its content clear of the control's box at each of
   motion.css's sizes, so the control is never covered and never covers a banner control:
   above 1200px a 38px pill about 153px wide at left 20px; 1200px and below a 36px circle at
   left 2px; 768px and below a 40px circle at left 8px; 480px and below 34px at left 4px.
   Wide: the whole bar starts to the right of it. Stacked: only the button row shares its
   height, so only that row moves. */
@media (min-width: 1201px) {
  html.motion.m-ui .cc { padding-left: calc(196px - var(--gutter) + env(safe-area-inset-left, 0px)); }
}
@media (min-width: 769px) and (max-width: 1200px) {
  html.motion.m-ui .cc { padding-left: calc(52px - var(--gutter) + env(safe-area-inset-left, 0px)); }
}
@media (max-width: 768px) {
  html.motion.m-ui .cc__actions { padding-left: calc(60px - var(--gutter)); }
}
@media (max-width: 480px) {
  html.motion.m-ui .cc__actions { padding-left: calc(48px - var(--gutter)); }
}

/* While the bar is open, focus scrolling (Tab, anchor jumps) keeps controls above it.
   consent.js writes --cc-h (the bar's height) on the root while it is open. The second selector
   outranks motion.css's html.motion.m-ui scroll-padding-bottom. */
html.cc-open,
html.motion.m-ui.cc-open { scroll-padding-bottom: calc(var(--cc-h, 0px) + 16px); }

/* Slides up once when shown; no movement for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cc:not([hidden]) { animation: cc-in .35s var(--ease-out) both; }
}
@keyframes cc-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media print {
  .cc, .cc-spacer { display: none !important; }
}