/* ============================================================
   Cordelle marketing site — cookie consent banner.

   Built by /assets/site.js, which creates every element in here at
   runtime. Nothing in the page HTML refers to these classes; the only
   thing a page needs is the <link> to this file.

   The look is borrowed, not invented: colours, radii, shadows and the
   type scale all come from the tokens in styles.css. Every var() below
   carries a literal fallback so that a page which somehow loads this
   file without styles.css still renders a readable, usable bar rather
   than unstyled text over the content.

   LIGHT-COMMITTED, like the rest of the site. styles.css declares
   `color-scheme: light` and has no prefers-color-scheme block anywhere
   — the marketing pages paint their own ground on purpose. A banner
   that flipped to dark on a dark-mode phone would be the only dark
   surface on an otherwise light page. So this paints light explicitly
   too, which is what "match the site" means here.
   ============================================================ */

/* The bar itself. z-index 90 clears the sticky nav (40) and the open
   mobile menu (60), and stays under the skip link (100) so "Skip to
   content" is still the first thing a keyboard lands on. */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--surface, #FFFFFF);
  color: var(--text, #12141C);
  border-top: 1px solid var(--line, rgba(18, 20, 28, 0.11));
  /* shadow-3, mirrored upward — the bar casts onto the page above it. */
  box-shadow: 0 -18px 60px rgba(24, 28, 45, .16);
  font-family: var(--f-text, "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  /* Long text on a small phone must not push the buttons off-screen. */
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Same measure as .wrap, so the banner's text lines up with the page's. */
.cc-inner {
  width: min(100% - 40px, var(--wrap, 1180px));
  margin-inline: auto;
  padding: 22px 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px 36px;
}

.cc-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text, #12141C);
}

/* Body copy sits at the page's own 17px and in full-strength --text, not
   the muted --dim used for footer chrome. This is the one paragraph on
   the page a visitor is being asked to act on; it should be the easiest
   to read, not the hardest. */
.cc-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text, #12141C);
  max-width: 68ch;
}

.cc-body + .cc-body { margin-top: 10px; }

.cc-body a {
  color: var(--accent-deep, #1B32A0);
  font-weight: 600;
  /* Underlined, not colour-only: colour alone is a weak signal for older
     eyes and for anyone with a colour-vision difference. */
  text-underline-offset: 3px;
}
.cc-body a:hover { color: var(--accent, #2645C5); }

/* Shown only when the bar is reopened from the footer link. */
.cc-current {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-deep, #1B32A0);
}

/* ── the two choices ──────────────────────────────────────────────────
   Accept and Decline are the SAME button. Same box, same fill, same
   type, same size — the only difference is the word inside. Nothing
   here nudges: no ghost/outline treatment on one of them, no tucking
   Decline into small grey text, no pre-checked anything. If a change to
   this file ever makes the two look different, it has stopped being an
   honest choice.
   ------------------------------------------------------------------- */
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cc-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Comfortably past the 44px floor: this is the whole point of the bar
     and it is being tapped by people wearing reading glasses. */
  min-height: 54px;
  min-width: 190px;
  padding: 14px 28px;
  background: var(--accent, #2645C5);
  color: var(--on-accent, #FFFFFF);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 12px);
  cursor: pointer;
  transition: background .14s ease;
}

.cc-btn:hover { background: var(--accent-deep, #1B32A0); }

.cc-btn:focus-visible {
  outline: 3px solid var(--accent-deep, #1B32A0);
  outline-offset: 3px;
}

/* Close is not a third choice — it appears only when a choice already
   exists and the visitor reopened the bar to look at it. It is styled as
   chrome, deliberately unlike the two buttons, so it can never read as
   "the easy way out of deciding". */
.cc-close {
  position: absolute;
  top: 10px;
  right: max(20px, calc((100% - var(--wrap, 1180px)) / 2));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--dim, #565D72);
  border: 1px solid transparent;
  border-radius: var(--r-sm, 12px);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cc-close:hover {
  color: var(--text, #12141C);
  border-color: var(--line, rgba(18, 20, 28, 0.11));
}
.cc-close:focus-visible {
  outline: 3px solid var(--accent-deep, #1B32A0);
  outline-offset: 2px;
}

/* No `position: relative` here, however much it looks like it belongs.
   .cc-has-close lands on the same element as .cc, has the same specificity
   and comes later in the file, so a position declaration wins outright and
   knocks the bar out of `fixed` — it drops into normal flow at the top of
   the document and shoves the page down under it. `position: fixed` is
   already a containing block for an absolutely positioned child, so
   .cc-close has everything it needs without it. */
.cc-has-close .cc-inner { padding-top: 26px; }

/* ── the copy that a phone does not get ───────────────────────────────
   site.js writes the bar's two paragraphs with their droppable clauses
   wrapped in .cc-long, and one short replacement tail in .cc-short. The
   swap happens at the same breakpoint as the layout below, for the same
   reason: measured at 375×667 the full copy made the bar 600px of a 667px
   viewport. See the comment above showBanner() in site.js for what is
   allowed to live in .cc-long — the short version has to remain a complete,
   honest description of the same offer, not a teaser for it. */
.cc-short { display: none; }

/* ── phones, small tablets, and any short window ──────────────────────
   One column, buttons full width and stacked. Both still identical.

   The max-height half of this query is not decoration. On a 320×568
   phone the copy alone is taller than the 90vh cap, so the bar scrolls
   internally — and the first build of this put both buttons below its
   fold, leaving a visitor with a wall of text and no visible way to
   answer it. Measured: the Decline button's top sat at y=645 in a 568px
   viewport. Hence the sticky action row below, and hence this query
   firing on short windows at any width, not just narrow ones. */
@media (max-width: 860px), (max-height: 620px) {
  .cc-long { display: none; }
  .cc-short { display: inline; }

  .cc-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0 22px;
  }
  .cc-actions {
    flex-direction: column;
    align-items: stretch;
    /* Pinned to the bottom of the bar's own scrollport, so the choice is
       on screen from the first frame however long the copy runs. */
    position: sticky;
    bottom: 0;
    background: var(--surface, #FFFFFF);
    padding-top: 14px;
    padding-bottom: 2px;
  }
  .cc-btn { width: 100%; min-width: 0; }
  .cc-title { font-size: 19px; }
  .cc-body { font-size: 16.5px; }
}

/* No entrance animation, on purpose. A slide-up from translateY(100%) is
   the obvious flourish here and it was tried; it parks the bar exactly one
   bar-height below the viewport for the whole time the tab is in the
   background, because browsers pause CSS animations on hidden tabs and the
   animation never leaves frame 0. Anyone who opens the site in a background
   tab and comes back to it later can be looking at a page whose cookie
   banner is off the bottom of the screen. A consent control is not the
   place to spend a failure mode on decoration. */
@media (prefers-reduced-motion: reduce) {
  .cc-btn { transition: none; }
}

/* Keep the fixed bar from sitting on top of the last of the page. JS
   measures the bar and writes --cc-h; the fallback covers the frame
   before that measurement lands. */
body.cc-open {
  padding-bottom: calc(var(--cc-h, 240px) + 12px);
}

/* ── the way back: "Cookie choices" in the footer ─────────────────────
   A <button>, because it changes a setting rather than going anywhere,
   dressed to sit in the .footer-links column beside real links. */
.cc-footer-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--dim, #565D72);
  cursor: pointer;
}
.cc-footer-btn:hover { color: var(--accent, #2645C5); }
.cc-footer-btn:focus-visible {
  outline: 2px solid var(--accent, #2645C5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A printed page cannot be clicked. */
@media print {
  .cc { display: none !important; }
  body.cc-open { padding-bottom: 0; }
}