/* ==========================================================================
   THE CLUB'S COOKIE BANNER
   Loaded after /vendor/vanilla-cookieconsent/3.1.0/cookieconsent.css, and only
   overrides it. Nothing here depends on the page it sits on, so the banner is
   the same on every page of the site.
   Colours are the site's own: cream #F6F4F0, forest #202F27, sand #E8E4D9, with
   the club's CTA convention (forest fill, cream label) on the accept button.
   Sizes: the library's own are generous — these are tightened so the banner is a
   small card on a laptop and, on a phone, never more than a few lines with the
   three buttons on one row. Radii follow the site's rounded-md (8px).
   ========================================================================== */

#cc-main {
  /* type: the site's own face, and a base size the em-based rules scale from */
  --cc-font-family: var(--font-archivo, "Archivo Expanded", sans-serif);
  font-size: 15px;

  /* surface */
  --cc-bg: #ffffff;
  --cc-overlay-bg: rgba(32, 47, 39, 0.66);
  --cc-modal-margin: 16px;
  --cc-modal-border-radius: 8px;
  --cc-btn-border-radius: 8px;

  /* text */
  --cc-primary-color: #202f27;
  --cc-secondary-color: #3a443f;
  --cc-link-color: #202f27;

  /* rules */
  --cc-separator-border-color: #ecebe6;
  --cc-footer-bg: transparent;
  --cc-footer-color: #6e6c68;
  --cc-footer-border-color: transparent;

  /* the accept button: the club's own CTA — forest fill, cream label */
  --cc-btn-primary-bg: #202f27;
  --cc-btn-primary-color: #f6f4f0;
  --cc-btn-primary-border-color: #202f27;
  --cc-btn-primary-hover-bg: #0b1611;
  --cc-btn-primary-hover-color: #f6f4f0;
  --cc-btn-primary-hover-border-color: #0b1611;

  /* and the quiet one: white, forest hairline. Same size as the other, never
     smaller — rejecting has to be as easy as accepting. */
  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: #202f27;
  --cc-btn-secondary-border-color: rgba(32, 47, 39, 0.24);
  --cc-btn-secondary-hover-bg: #f2f0ea;
  --cc-btn-secondary-hover-color: #202f27;
  --cc-btn-secondary-hover-border-color: rgba(32, 47, 39, 0.42);

  /* toggles, in the preferences modal */
  --cc-toggle-on-bg: #202f27;
  --cc-toggle-off-bg: #d5d2cb;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #c9d8ce;
  --cc-toggle-readonly-knob-bg: #202f27;
  --cc-toggle-enabled-icon-color: #ffffff;

  /* category blocks */
  --cc-cookie-category-block-bg: #f7f6f3;
  --cc-cookie-category-block-border: #ecebe6;
  --cc-cookie-category-block-hover-bg: #f2f0ea;
  --cc-cookie-category-block-hover-border: #e2dfd8;
  --cc-cookie-category-expanded-block-bg: #f7f6f3;
  --cc-cookie-category-expanded-block-hover-bg: #ecebe6;
}

/* --------------------------------------------------------------------------
   THE BANNER
   A small card, bottom-left on a laptop; on a phone it takes the width and sits
   just above the bottom edge. The library stacks the buttons on a phone — the
   three of them on one row is the whole reason this stylesheet exists.
   -------------------------------------------------------------------------- */
#cc-main .cm {
  border: 1px solid rgba(32, 47, 39, 0.08);
  box-shadow: 0 10px 30px rgba(32, 47, 39, 0.12), 0 2px 6px rgba(32, 47, 39, 0.06);
  max-width: 27rem;
}

#cc-main .cm__texts { padding: 14px 0 0; }
#cc-main .cm__title,
#cc-main .cm__desc { padding: 0 16px; }

#cc-main .cm__desc {
  color: var(--cc-secondary-color);
  font-size: 13px;
  line-height: 19px;
  max-height: 36vh;
  padding-bottom: 12px;
}

#cc-main .cm__btns {
  border-top: 1px solid var(--cc-separator-border-color);
  padding: 11px 16px 13px;
}

/* The library keeps the buttons in groups — accept and reject in one, "customise"
   in the next — and on a phone it stacks every group. Dissolving the groups
   (display:contents) makes the three buttons siblings of one row, so they share
   the width equally and never stack: the thing CookieYes could not be made to do. */
#cc-main .cm__btns,
#cc-main .cm__links {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

#cc-main .cm__btn-group { display: contents !important; }

#cc-main .cm__btn {
  flex: 1 1 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
  padding: 11px 8px;
}

/* the library spaces stacked buttons with margins; the row is spaced with gap */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }

#cc-main .cm__links { padding: 0 16px 2px; }
#cc-main .cm__link-group { font-size: 11px; }

#cc-main .cm__footer {
  border-top: none;
  font-size: 11px;
  line-height: 16px;
  padding: 0 0 10px;
}

#cc-main .cm__footer a,
#cc-main .cm__link-group a { color: var(--cc-footer-color); text-decoration: underline; text-underline-offset: 0.2em; }
#cc-main .cm__footer a:hover,
#cc-main .cm__link-group a:hover { color: var(--cc-primary-color); }

/* --------------------------------------------------------------------------
   THE PREFERENCES MODAL
   -------------------------------------------------------------------------- */
#cc-main .pm {
  border: 1px solid rgba(32, 47, 39, 0.08);
  box-shadow: 0 18px 50px rgba(32, 47, 39, 0.22);
  max-width: 30rem;
}

#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__footer { padding: 14px 18px; }

#cc-main .pm__title {
  font-size: 15px;
  letter-spacing: -0.01em;
}

#cc-main .pm__section-desc-wrapper { color: var(--cc-secondary-color); font-size: 12.5px; }
#cc-main .pm__section-desc { line-height: 19px; }
#cc-main .pm__section-table { font-size: 12px; }
#cc-main .pm__section-table th { color: var(--cc-primary-color); font-weight: 600; padding: 6px 8px 6px 0; text-align: left; }
#cc-main .pm__section-table td { color: var(--cc-secondary-color); padding: 6px 8px 6px 0; vertical-align: top; }
#cc-main .pm__btn { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; padding: 11px 16px; }

/* --------------------------------------------------------------------------
   A PHONE
   The library's 640px breakpoint turns the buttons into a stacked, full-width
   column with !important — these have to be !important too, and this file wins
   because it loads after it. Everything gets a little tighter at the same time.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  #cc-main { --cc-modal-margin: 8px; }

  /* full width with an even 8px either side. The card does not simply follow
     --cc-modal-margin — the library also gives it a slant-side margin — so both
     sides are pinned and the margins dropped. */
  #cc-main .cm {
    left: 8px !important;
    right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  #cc-main .cm__texts { padding-top: 12px; }
  #cc-main .cm__title,
  #cc-main .cm__desc,
  #cc-main .cm__btns,
  #cc-main .cm__links {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #cc-main .cm__desc { font-size: 12.5px; line-height: 18px; padding-bottom: 10px; }

  /* the row that CookieYes could not give us */
  #cc-main .cm__btn-group { flex-direction: row !important; }
  #cc-main .cm__btn {
    flex: 1 1 0 !important;
    font-size: 12px;
    padding: 11px 4px !important;
  }
  #cc-main .cm__btn + .cm__btn,
  #cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }

  #cc-main .pm__header,
  #cc-main .pm__body,
  #cc-main .pm__footer { padding: 12px 14px !important; }
  #cc-main .pm__btn-group { flex-direction: row !important; }
  #cc-main .pm__btn { font-size: 12.5px; padding: 11px 10px; }
  #cc-main .pm__btn + .pm__btn { margin: 0 0 0 8px !important; }
}

/* --------------------------------------------------------------------------
   Give the page back the band the consent card sits on.

   The card is fixed to the bottom of the viewport, so while it is waiting for
   an answer it covers whatever is beneath it — at the end of a page that is the
   last ~151px, which cannot be reached at all because the page cannot scroll
   further: the footer's social row, and the bottom of the course page's last
   card. Padding the body by the card's height (151px at every width down to
   320px) plus the 8px it floats above the edge means the page can always scroll
   the last of its content clear of it.

   `show--consent` is on <html> only while the card is unanswered, so the space
   disappears the moment the visitor chooses — it costs a first-time visitor a
   little scroll and costs a returning one nothing.
   -------------------------------------------------------------------------- */
html.show--consent body {
  padding-bottom: 176px;
}