/*
 * Site theme for CookieConsent 3.1.0 on jackborkowski.com.
 *
 * Kept separate from assets/css/cookieconsent.css so the vendor file stays
 * byte-identical to the published library and can be verified by checksum.
 * Touches nothing else: no styles.css, no HTML, no JavaScript, no consent logic.
 *
 * Palette, radii and type are taken from assets/css/styles.css, which this file
 * does not modify and does not depend on being loaded first — every value is
 * written out literally so the banner looks the same even in isolation.
 *
 *   --navy-900 #071a2c   --navy-700 #143b5c   --blue-600 #15679f
 *   --blue-50  #eaf3fa   --paper    #f5f9fc   --surface  #ffffff
 *   --ink      #0a1622   --body     #3c4a57   --muted    #5a6773
 *   --line     #d7e3ed   --focus    #f0a53a   --radius   12px
 */

#cc-main {
  /* type — the same system stack as the rest of the site, no web fonts */
  --cc-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;

  /* surfaces */
  --cc-bg: #ffffff;
  --cc-primary-color: #0a1622;              /* headings            17.0:1 on white */
  --cc-secondary-color: #3c4a57;            /* body text            9.1:1 on white */
  --cc-link-color: #15679f;                 /* links                6.0:1 on white */
  --cc-separator-border-color: #d7e3ed;
  --cc-overlay-bg: rgba(7, 26, 44, .55);    /* navy, not black */

  /* geometry — matches --radius: 12px */
  --cc-btn-border-radius: 12px;
  --cc-modal-border-radius: 12px;
  --cc-pm-toggle-border-radius: 20px;
  --cc-modal-margin: 1rem;
  --cc-z-index: 2000;                        /* above sticky header (50) and skip-link (100) */

  /* no entrance animation: the banner appears, it does not slide or fade */
  --cc-modal-transition-duration: 0s;

  /*
   * THE TWO CHOICES ARE THE SAME BUTTON.
   * "Allow advertising" (data-role="all") and "Reject" (data-role="necessary")
   * both use the library's PRIMARY styling, so neither can be favoured by
   * colour, fill or contrast. Only the label differs.
   */
  --cc-btn-primary-bg: #15679f;
  --cc-btn-primary-color: #ffffff;           /* 6.0:1 */
  --cc-btn-primary-border-color: #15679f;
  --cc-btn-primary-hover-bg: #143b5c;
  --cc-btn-primary-hover-color: #ffffff;     /* 11.5:1 */
  --cc-btn-primary-hover-border-color: #143b5c;

  /*
   * "Privacy Choices" is a third, lesser action — outlined, never filled.
   * The border carries 6.0:1 contrast, so it is a visible control boundary
   * and not a low-contrast afterthought.
   */
  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: #15679f;
  --cc-btn-secondary-border-color: #15679f;
  --cc-btn-secondary-hover-bg: #eaf3fa;
  --cc-btn-secondary-hover-color: #143b5c;
  --cc-btn-secondary-hover-border-color: #143b5c;

  /* preferences modal: category blocks */
  --cc-cookie-category-block-bg: #f5f9fc;
  --cc-cookie-category-block-border: #d7e3ed;
  --cc-cookie-category-block-hover-bg: #eaf3fa;
  --cc-cookie-category-block-hover-border: #15679f;
  --cc-cookie-category-expanded-block-bg: #ffffff;
  --cc-cookie-category-expanded-block-hover-bg: #f5f9fc;
  --cc-section-category-border: #d7e3ed;

  /* toggles */
  --cc-toggle-on-bg: #15679f;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-bg: #6b7f90;               /* 3.8:1 on white — visible when off */
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-enabled-icon-color: #ffffff;
  --cc-toggle-disabled-icon-color: #ffffff;
  --cc-toggle-readonly-bg: #d7e3ed;
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-icon-color: #5a6773;

  /* modal footer */
  --cc-footer-bg: #f5f9fc;
  --cc-footer-color: #5a6773;
  --cc-footer-border-color: #d7e3ed;

  --cc-webkit-scrollbar-bg: #d7e3ed;
  --cc-webkit-scrollbar-hover-bg: #5a6773;
}

/* ---------- editorial restraint: flat surfaces, one hairline border ---------- */

#cc-main .cm,
#cc-main .pm {
  border: 1px solid #d7e3ed;
  box-shadow: 0 18px 40px -28px rgba(7, 26, 44, .55);
}

#cc-main .cm__title,
#cc-main .pm__title {
  letter-spacing: -.02em;
  font-weight: 660;
  line-height: 1.15;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  line-height: 1.6;
}

#cc-main a {
  color: #15679f;
  text-underline-offset: 3px;
}

#cc-main a:hover {
  color: #143b5c;
}

/* ---------- the two choices: identical box, identical weight ---------- */

#cc-main .cm__btn-group,
#cc-main .pm__btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
}

#cc-main .cm__btn-group .cm__btn,
#cc-main .pm__btn-group .pm__btn {
  flex: 1 1 0;
  min-width: 0;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: 0;
  padding: .85rem 1.2rem;
  border-width: 1px;
  border-style: solid;
  /* only a colour change on hover — the same .15s used by .btn in styles.css */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  #cc-main .cm__btn,
  #cc-main .pm__btn {
    transition: none;
  }
}

/* Equal width for the two real choices, whatever the label length. */
#cc-main .cm__btn[data-role="all"],
#cc-main .cm__btn[data-role="necessary"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* "Privacy Choices" stays easy to find: full width under the two choices on
   narrow screens, its own line on wide ones — never hidden in small grey text. */
#cc-main .cm__btn--secondary {
  flex: 1 1 100%;
}

/* ---------- focus: the same ring the rest of the site uses ---------- */

#cc-main button:focus-visible,
#cc-main a:focus-visible,
#cc-main input:focus-visible,
#cc-main [tabindex]:focus-visible {
  outline: 3px solid #f0a53a;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- action bar must never cover content ----------
 *
 * The library caps the preferences modal at `max-height: 37.5em` (600px) and
 * forces `height: calc(100% - 2em)`. At 1440x900 that leaves a 430px scroll
 * area for 552px of content, so "More information" began 11px above the
 * bottom edge and read as sliding under the action bar. Three fixes:
 *
 *   1. let the modal size itself to its content, capped by the viewport,
 *      so on a normal desktop screen nothing has to scroll at all;
 *   2. a clearance block after the last section, so that whenever the body
 *      DOES scroll, content never ends flush against the bar;
 *   3. give the bar an opaque background, so it is a band and not a
 *      transparent strip that content appears to run beneath.
 *
 * Scoped above 640px: below that the library switches the modal to a
 * full-screen layout, which is correct and is left alone.
 */

@media (min-width: 40.0625em) {
  #cc-main .pm--box {
    height: auto;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
  }
}

/* Clearance below the last section. Applied with ::after rather than
   padding-bottom, because the library sets the body padding with !important. */
#cc-main .pm__body::after {
  content: "";
  display: block;
  height: 1.75rem;
}

#cc-main .pm__body {
  scroll-padding-bottom: 1.75rem;
}

/* The bar is an opaque band. The library applies --cc-footer-bg to the
   consent banner only, leaving the preferences footer transparent. */
#cc-main .pm__footer {
  background: #f5f9fc;
  border-top: 1px solid #d7e3ed;
}

/* ---------- 390 px ---------- */

@media (max-width: 30em) {
  #cc-main {
    --cc-modal-margin: .75rem;
  }

  #cc-main .cm {
    max-width: none;
  }

  /* On a phone the two choices stack, each full width — same size, same colour,
     "Allow advertising" first only because it is the affirmative answer. */
  #cc-main .cm__btn-group .cm__btn {
    flex: 1 1 100%;
  }

  #cc-main .cm__btn,
  #cc-main .pm__btn {
    padding: .9rem 1rem;
  }
}