/* Word Hunter palette for the consent banner and preferences modal (see application.tailwind.css). */
#cc-main {
  --cc-font-family: inherit;
  --cc-bg: #F8FAF4;
  --cc-primary-color: #17231B;
  --cc-secondary-color: #56655A;
  --cc-btn-primary-bg: #17231B;
  --cc-btn-primary-color: #F8FAF4;
  --cc-btn-primary-border-color: #17231B;
  --cc-btn-primary-hover-bg: #2A3A2F;
  --cc-btn-primary-hover-color: #F8FAF4;
  --cc-btn-primary-hover-border-color: #2A3A2F;
  --cc-btn-secondary-bg: #E1E7DB;
  --cc-btn-secondary-color: #17231B;
  --cc-btn-secondary-border-color: #E1E7DB;
  --cc-btn-secondary-hover-bg: #D3DBCC;
  --cc-btn-secondary-hover-color: #17231B;
  --cc-btn-secondary-hover-border-color: #D3DBCC;
  --cc-separator-border-color: #DDE4D7;
  --cc-toggle-on-bg: #E9501A;
  --cc-toggle-off-bg: #B4BEB5;
  --cc-toggle-readonly-bg: #DDE4D7;
  --cc-cookie-category-block-bg: #EBEFE4;
  --cc-cookie-category-block-border: #DDE4D7;
  --cc-cookie-category-block-hover-bg: #E1E7DB;
  --cc-cookie-category-block-hover-border: #C6D0C1;
  --cc-footer-bg: #EBEFE4;
  --cc-footer-color: #56655A;
  --cc-footer-border-color: #DDE4D7;
  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 8px;
  --cc-link-color: #17231B;
}

/* Compact consent banner on phones. The stock "box" layout goes full width and ~320px tall below 640px,
   covering the bottom of the Daily Hunt board and the Scout button. Loaded after cookieconsent.css.
   The vendored phone rules use !important, so these must too; `html` raises specificity above them. */
@media screen and (max-width: 640px) {
  html #cc-main .cm--box {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    max-width: none;
    width: auto;
  }

  html #cc-main .cm--box .cm__texts {
    padding: 0.75rem 0 0;
  }

  html #cc-main .cm--box .cm__title {
    font-size: 0.875rem;
    padding: 0 0.875rem !important;
  }

  html #cc-main .cm--box .cm__desc {
    font-size: 0.8125rem;
    line-height: 1.35;
    max-height: none;
    padding: 0.25rem 0.875rem 0 !important;
  }

  html #cc-main .cm--box .cm__btns {
    border-top: 0 !important;
    padding: 0.625rem 0.875rem 0.5rem !important;
  }

  /* Accept / Reject side by side; Manage preferences as a slim text link under them. */
  html #cc-main .cm--box .cm__btn-group {
    flex-direction: row !important;
    gap: 0.5rem;
  }

  html #cc-main .cm--box .cm__btn + .cm__btn {
    margin: 0 !important;
  }

  html #cc-main .cm--box .cm__btn-group + .cm__btn-group {
    margin: 0.25rem 0 0 !important;
  }

  html #cc-main .cm--box .cm__btn {
    flex: 1 1 0 !important;
    min-height: 2.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  html #cc-main .cm--box .cm__btn[data-role="show"] {
    min-height: 1.75rem;
    padding: 0.25rem;
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    font-weight: 500;
  }

  /* While the banner is up, let the page scroll everything above it. */
  html.show--consent body {
    padding-bottom: 10rem;
  }
}