/*
 * The cookie banner.
 *
 * Drawn as the assistant's sibling, not as a generic consent bar. It is the
 * other thing on this site that floats above the page rather than belonging to
 * it, so it borrows the assistant's language exactly: the same warm off-white
 * surface, the same brand gold hairline, the same DM Mono uppercase
 * letterspaced controls the nav and the buttons use, and the same graded
 * corners - 16px on the floating panel, 10px on the controls inside it, and
 * nothing rounded into a pill. See the corner note in ai-chat.css; the values
 * here are deliberately the same ones rather than a second set.
 *
 * Colour. The brand gold is 3.7:1 on white. So, as in the assistant, gold
 * carries rules, fills and the 12px uppercase UI, and anything at reading size
 * uses the ink or the deepened gold that clears 4.5:1. Nothing is distinguished
 * by colour alone: the two decisions are told apart by their words.
 *
 * Refusal and agreement. .mf-cc__btn--main is one style used twice. Reject all
 * and Accept all differ in nothing but their text - same box, same weight, same
 * row, adjacent - because a refusal that is visibly cheaper to ignore is not a
 * refusal. Resist styling either as the primary one.
 *
 * It does not cover the page. No overlay, no scroll lock; it is a band at the
 * bottom that the page keeps scrolling behind.
 */

.mf-cc {
  --mf-cc-gold: #a28114;
  --mf-cc-gold-deep: #7d6210;
  --mf-cc-ink: #14100a;
  --mf-cc-surface: #fffefb;
  --mf-cc-line: rgba(20, 16, 4, .22);
  --mf-cc-line-soft: rgba(20, 16, 4, .10);
  --mf-cc-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mf-cc-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* The assistant's graded corners, not a second scale. */
  --mf-cc-r-panel: 16px;
  --mf-cc-r-ctl: 10px;
  --mf-cc-r: 3px;
  --mf-cc-t: .16s cubic-bezier(.2, .6, .3, 1);

  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  /* Above the assistant, because it is the thing being answered first. */
  z-index: 9100;
  padding: 16px;
  font-family: var(--mf-cc-mono);
  color: var(--mf-cc-ink);
  /* The wrapper spans the viewport only so the card can be centred in it; it
     must not swallow clicks on the page behind the empty part of that span. */
  pointer-events: none;
}

.mf-cc[hidden] { display: none; }

.mf-cc__inner {
  pointer-events: auto;
  box-sizing: border-box;
  inline-size: min(100%, 1140px);
  margin-inline: auto;
  max-block-size: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px;
  border: 1px solid var(--mf-cc-gold);
  border-radius: var(--mf-cc-r-panel);
  background: var(--mf-cc-surface);
  /* Neutral and shallow. The site has no coloured shadows anywhere. */
  box-shadow: 0 10px 40px rgba(20, 16, 4, .18);
  display: grid;
  gap: 16px;
}

/* ---- text -------------------------------------------------------------- */

.mf-cc__title {
  margin: 0 0 6px;
  font-family: var(--mf-cc-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--mf-cc-ink);
}

.mf-cc__body {
  margin: 0;
  max-inline-size: 78ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mf-cc-ink);
}

.mf-cc__link {
  color: var(--mf-cc-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mf-cc__link:hover { color: var(--mf-cc-ink); }

.mf-cc__link:focus-visible,
.mf-cc__btn:focus-visible,
.mf-cc__check:focus-visible {
  outline: 2px solid var(--mf-cc-ink);
  outline-offset: 2px;
  border-radius: var(--mf-cc-r);
}

/* ---- the detailed choices --------------------------------------------- */

.mf-cc__prefs[hidden] { display: none; }

.mf-cc__set {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--mf-cc-line-soft);
  border-radius: var(--mf-cc-r-ctl);
  background: rgba(162, 129, 20, .04);
  display: grid;
  gap: 14px;
}

.mf-cc__legend {
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-cc-gold-deep);
}

.mf-cc__pref {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.mf-cc__check {
  inline-size: 18px;
  block-size: 18px;
  margin: 2px 0 0;
  accent-color: var(--mf-cc-gold-deep);
  cursor: pointer;
}

.mf-cc__check:disabled { cursor: default; opacity: .75; }

.mf-cc__pref-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--mf-cc-ink);
  cursor: pointer;
}

.mf-cc__check:disabled + .mf-cc__pref-text .mf-cc__pref-label { cursor: default; }

/* Not colour alone: it says "always on" in words. */
.mf-cc__always {
  padding: 3px 8px;
  border: 1px solid var(--mf-cc-gold);
  border-radius: var(--mf-cc-r);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--mf-cc-gold-deep);
  text-transform: uppercase;
}

.mf-cc__pref-desc {
  margin: 6px 0 0;
  max-inline-size: 78ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mf-cc-ink);
  opacity: .82;
}

/* ---- actions ----------------------------------------------------------- */

.mf-cc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mf-cc__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mf-cc__btn {
  margin: 0;
  padding: 13px 20px;
  border-radius: var(--mf-cc-r-ctl);
  font-family: var(--mf-cc-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--mf-cc-t), color var(--mf-cc-t), border-color var(--mf-cc-t);
}

.mf-cc__btn[hidden] { display: none; }

/*
 * All four states are written under .mf-cc rather than on the class alone.
 *
 * The theme's reset (hello-elementor assets/css/reset.css) paints every bare
 * <button> #c36 on :hover and :focus, at a specificity of (0,1,1) that beats a
 * one-class rule - so a state rule that does not name its own background gets
 * a pink one, and a mouse click leaves :focus set without :focus-visible. The
 * extra .mf-cc lifts these to (0,2,0) and (0,3,0) so the banner keeps its own
 * colours in every state. The :focus rules come before the :hover ones so that
 * hovering a focused button still reads as hover.
 */
.mf-cc .mf-cc__btn--main,
.mf-cc .mf-cc__btn--main:focus {
  border: 1px solid var(--mf-cc-gold);
  background: var(--mf-cc-ink);
  color: var(--mf-cc-gold);
}

.mf-cc .mf-cc__btn--main:hover,
.mf-cc .mf-cc__btn--main:focus-visible {
  background: var(--mf-cc-gold);
  color: var(--mf-cc-ink);
}

/* The longer road, not the refusal. */
.mf-cc .mf-cc__btn--quiet,
.mf-cc .mf-cc__btn--quiet:focus {
  border: 1px solid var(--mf-cc-line);
  background: transparent;
  color: var(--mf-cc-ink);
}

.mf-cc .mf-cc__btn--quiet:hover,
.mf-cc .mf-cc__btn--quiet:focus-visible {
  background: transparent;
  border-color: var(--mf-cc-gold);
  color: var(--mf-cc-gold-deep);
}

/*
 * The assistant's launcher lives in the same bottom corner. While the banner
 * is up it moves above it by the banner's measured height, so neither covers
 * the other and the visitor can still open the assistant - the banner is a
 * question, not a gate.
 */
body.mf-cc-open .mf-ai {
  inset-block-end: calc(20px + var(--mf-cc-h, 0px));
  transition: inset-block-end var(--mf-cc-t, .16s);
}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 819px) {
  .mf-cc { padding: 10px; }
  .mf-cc__inner { padding: 18px 18px 20px; gap: 14px; border-radius: 14px; }
  .mf-cc__title { font-size: 17px; }
  .mf-cc__set { padding: 14px; }
  /*
   * On a phone the detailed view is taller than the sheet, so the card scrolls
   * - and the buttons must not scroll away with it. Pinned to the bottom of
   * the card, with the negative margins letting its background cover the
   * card's own padding so the list runs under a solid bar rather than under a
   * floating one. Without this, opening the choices put "Save my choices"
   * below the fold, which is the one control that view exists for.
   */
  .mf-cc__actions {
    display: grid;
    gap: 10px;
    /* The base rule lays this out as a flex row with space-between. As a grid
       that same value sizes the single track to its content instead of
       stretching it, which left both buttons half width. */
    justify-content: stretch;
    align-items: stretch;
    position: sticky;
    inset-block-end: 0;
    margin: 0 -18px -20px;
    padding: 12px 18px 20px;
    background: var(--mf-cc-surface);
    border-block-start: 1px solid var(--mf-cc-line-soft);
  }
  .mf-cc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mf-cc__btn { padding: 14px 12px; inline-size: 100%; }
  /* Save replaces the pair when the detailed view is open, so it spans both. */
  .mf-cc__pair #mf-cc-save:not([hidden]) { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .mf-cc__inner { padding: 16px; }
  .mf-cc__actions { margin: 0 -16px -16px; padding: 12px 16px 16px; }
  .mf-cc__body, .mf-cc__pref-desc { font-size: 13px; }
  .mf-cc__btn { letter-spacing: .1em; padding: 14px 8px; }
  .mf-cc__pref { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-cc__btn, body.mf-cc-open .mf-ai { transition: none; }
}