/* Brand theme for cookieconsent v3, using the cream/editorial palette shared with the site.
   Loaded after vendor/cookieconsent/cookieconsent.css. */
#cc-main {
  --cc-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 8px;
  --cc-z-index: 2147483000;

  --cc-bg: #F6F0E8;
  --cc-primary-color: #2D2420;
  --cc-secondary-color: #5A5149;
  --cc-link-color: #2D2420;
  --cc-separator-border-color: #E2D9CE;
  --cc-overlay-bg: rgba(45, 36, 32, .55);

  --cc-btn-primary-bg: #2D2420;
  --cc-btn-primary-color: #F6F0E8;
  --cc-btn-primary-border-color: #2D2420;
  --cc-btn-primary-hover-bg: #453931;
  --cc-btn-primary-hover-color: #F6F0E8;
  --cc-btn-primary-hover-border-color: #453931;

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #2D2420;
  --cc-btn-secondary-border-color: #C4BAB0;
  --cc-btn-secondary-hover-bg: #EDE4D8;
  --cc-btn-secondary-hover-color: #2D2420;
  --cc-btn-secondary-hover-border-color: #9D8B7E;

  --cc-cookie-category-block-bg: #FBF9F6;
  --cc-cookie-category-block-border: #E2D9CE;
  --cc-cookie-category-block-hover-bg: #EDE4D8;
  --cc-cookie-category-block-hover-border: #9D8B7E;
  --cc-cookie-category-expanded-block-bg: #FBF9F6;
  --cc-cookie-category-expanded-block-hover-bg: #EDE4D8;
  --cc-section-category-border: #E2D9CE;

  --cc-footer-bg: #EDE4D8;
  --cc-footer-color: #5A5149;
  --cc-footer-border-color: #E2D9CE;

  --cc-toggle-on-bg: #2D2420;
  --cc-toggle-off-bg: #C4BAB0;
  --cc-toggle-on-knob-bg: #F6F0E8;
  --cc-toggle-off-knob-bg: #F6F0E8;
  --cc-toggle-readonly-bg: #DED4C8;
  --cc-toggle-readonly-knob-bg: #F6F0E8;
  --cc-toggle-readonly-knob-icon-color: #9D8B7E;
  --cc-toggle-enabled-icon-color: #F6F0E8;
  --cc-toggle-disabled-icon-color: #F6F0E8;

  --cc-webkit-scrollbar-bg: #C4BAB0;
  --cc-webkit-scrollbar-hover-bg: #9D8B7E;
}

/* Compact consent banner: deliberately small and out of the way, bottom right.
   Only the first-visit banner (.cm) is shrunk; the preferences modal (.pm) keeps
   its default size because it carries the cookie tables.

   Padding sits on the inner blocks, never on `.cm` itself. The footer strip is
   full-bleed with its own background, so padding on the container insets it and
   leaves its square corners poking past the container radius. The footer gets
   its own matching bottom radius instead.

   Do NOT add `overflow: hidden` here to solve that. At high browser zoom the
   banner can grow taller than the space above the bottom edge, and hiding the
   overflow silently amputates the Accept/Reject buttons. `max-height` plus
   `overflow-y: auto` keeps them reachable instead. */
#cc-main .cm {
  max-width: 21rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
#cc-main .cm__body { padding: .9rem 1rem .75rem; }
/* The library gives the title its own horizontal padding, which indents it
   relative to the description. Zeroed so both align to the body padding. */
#cc-main .cm__title { font-size: 1rem; margin-bottom: .35rem; padding: 0; }
#cc-main .cm__desc {
  font-size: .78rem;
  line-height: 1.5;
  padding: 0;
}
#cc-main .cm__texts { padding: 0 0 .75rem; }
/* The library draws a divider above the button row; removed so the compact
   banner reads as one block. */
#cc-main .cm__btns { padding: 0; border-top: 0; }
#cc-main .cm__btn {
  font-size: .78rem;
  padding: .55rem .8rem;
  min-height: 0;
  /* Pinned rather than left to `normal`: the library's own rules gave Accept a
     taller content box than Reject, so the two primary choices rendered at
     different heights. Equal prominence is a compliance requirement. */
  line-height: 1.2;
}
/* Accept and Reject share a group, so lay it out as a row and the banner stays
   short. They keep identical size and position; only the fill differs. */
#cc-main .cm__btn-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: .5rem;
}
/* `flex: 1` alone left Accept taller than Reject: the library puts an auto
   margin and its own cross-axis alignment on these items, so Reject sat
   bottom-aligned at its natural height instead of stretching. Neutralising the
   margin and pinning align-self makes the two choices identical in size. */
#cc-main .cm__btn-group .cm__btn {
  flex: 1;
  align-self: stretch;
  margin: 0;
  height: auto;
}

/* Reject all takes the outlined treatment rather than the filled one. */
#cc-main .cm__btn[data-role="necessary"] {
  background: var(--cc-btn-secondary-bg);
  color: var(--cc-btn-secondary-color);
  border-color: var(--cc-btn-secondary-border-color);
}
#cc-main .cm__btn[data-role="necessary"]:hover {
  background: var(--cc-btn-secondary-hover-bg);
  color: var(--cc-btn-secondary-hover-color);
  border-color: var(--cc-btn-secondary-hover-border-color);
}

/* Manage preferences reads as a link rather than a third button: it is a
   secondary route into detail, not one of the two primary choices. */
#cc-main .cm__btn[data-role="show"] {
  flex: 0 0 auto;
  align-self: center;
  background: none;
  border: 0;
  padding: .15rem 0;
  font-size: .72rem;
  font-weight: 500;
  color: var(--cc-secondary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cc-main .cm__btn[data-role="show"]:hover {
  background: none;
  color: var(--cc-primary-color);
}
/* The group holding only that link should centre it, not stretch it. */
#cc-main .cm__btn-group:has([data-role="show"]) { justify-content: center; }
#cc-main .cm__footer {
  font-size: .7rem;
  padding: .45rem 1rem;
  /* Matches --cc-modal-border-radius so the full-bleed strip follows the
     container's corners without needing overflow clipping. */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Note: do not reserve page space for the banner by padding the footer while
   `show--consent` is set. It was tried and reverted: it leaves a large empty
   band under the footer that looks broken, which is worse than the banner
   briefly overlapping the footer. The banner is small and disappears as soon as
   a choice is made. */

@media (max-width: 640px) {
  #cc-main .cm { max-width: none; }
}

/* Without this, inline links inside the banner and modal copy read as plain
   bold text, so underline them to make them recognisable as links. */
#cc-main .cm__desc a,
#cc-main .pm__section p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The consent modal title uses the display serif, matching page headings. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}