/*
 * Condo Buzzer brand theme for vanilla-cookieconsent.
 * Loaded AFTER css/vendor/cookieconsent.css to override its CSS variables.
 *
 * Palette note: the banner deliberately uses a NEUTRAL CHARCOAL accent
 * (gray-900 #111827 / gray-700 #374151) rather than the brand taupe (#bd9a8e).
 * The taupe is reserved for the site's call-to-action buttons; using it here
 * made the consent banner look like a giant CTA. Charcoal matches the site's
 * dark nav/footer, reads as a neutral system notice, and gives much stronger
 * contrast. Keeping this in a separate file means the vendor file can be
 * updated without losing our customizations.
 */
#cc-main {
  /* Typography — match the site's Cabin stack. */
  --cc-font-family: 'Cabin', system-ui, sans-serif;

  /* Surfaces & text. */
  --cc-bg: #ffffff;
  --cc-primary-color: #111827;          /* gray-900 body text */
  --cc-secondary-color: #4b5563;        /* gray-600 muted text */

  /* Rounded corners to match rounded-lg cards/buttons. */
  --cc-btn-border-radius: 0.5rem;
  --cc-modal-border-radius: 1rem;

  /* Primary ("Accept all") button — neutral charcoal fill, white text,
     gray-700 on hover. Distinct from the brand-taupe CTA buttons. */
  --cc-btn-primary-bg: #111827;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #111827;
  --cc-btn-primary-hover-bg: #374151;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #374151;

  /* Secondary buttons — light neutral. */
  --cc-btn-secondary-bg: #f3f4f6;       /* gray-100 */
  --cc-btn-secondary-color: #111827;
  --cc-btn-secondary-border-color: #f3f4f6;
  --cc-btn-secondary-hover-bg: #e5e7eb; /* gray-200 */
  --cc-btn-secondary-hover-color: #111827;
  --cc-btn-secondary-hover-border-color: #e5e7eb;

  /* Category toggles — charcoal accent when enabled. */
  --cc-toggle-on-bg: #111827;
  --cc-toggle-off-bg: #9ca3af;          /* gray-400 */
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #d1d5db;     /* gray-300 */
  --cc-toggle-readonly-knob-bg: #ffffff;

  /* Links inside the banner/modal. */
  --cc-link-color: #374151;             /* gray-700 for readable links */

  /* Preference-modal category blocks. */
  --cc-cookie-category-block-bg: #f9fafb;            /* gray-50 */
  --cc-cookie-category-block-border: #e5e7eb;        /* gray-200 */
  --cc-cookie-category-block-hover-bg: #f3f4f6;
  --cc-cookie-category-block-hover-border: #d1d5db;
}

/* Charcoal focus outline for keyboard users. */
#cc-main button:focus-visible,
#cc-main a:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

/* ---- "Notice / Preferences" tab header (injected by cookieconsent-config.js) ---- */

/* The "Notice" tab acts as the visible heading, so hide the text title but keep
   it available to screen readers (it's the modal's accessible label). */
#cc-main .cm__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#cc-main .cb-cc-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}

#cc-main .cb-cc-tab {
  flex: 1 1 0;
  text-align: center;
  padding: 0.625rem 1rem;
  margin-bottom: -1px;            /* sit the active underline on the border */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #4b5563;                 /* gray-600 for the inactive tab */
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;  /* render-match the rest of the modal */
  transition: color 0.15s ease, border-color 0.15s ease;
}

#cc-main button.cb-cc-tab:hover {
  color: #111827;                 /* gray-900 */
  border-bottom-color: #d1d5db;   /* gray-300 hint on hover */
}

#cc-main .cb-cc-tab--active {
  color: #111827;                 /* gray-900 */
  border-bottom-color: #111827;   /* charcoal underline */
  cursor: default;
}

/* Remove the default top gap above the banner body text. The "Notice" tab now
   sits directly above it, but the library still applies (a) padding-top on
   .cm__texts and (b) a `.cm__title + .cm__desc` margin because the (now hidden)
   title is still a DOM sibling. Override both at matching/higher specificity. */
#cc-main .cm__texts {
  padding-top: 0;
}
#cc-main .cm__title + .cm__desc {
  margin-top: 0;
}

/* "Reject all" button — outlined / ghost style: charcoal border line, dark text,
   no fill. This distinguishes it from the solid charcoal "Accept all" button,
   which keeps the default --cc-btn-primary styling. The buttons stay the same
   size, so reject remains as easy to use as accept. */
#cc-main .cm__btn[data-role="necessary"] {
  background: transparent;
  border: 1px solid #111827;        /* charcoal outline */
  color: #111827;                   /* gray-900 dark text */
}
#cc-main .cm__btn[data-role="necessary"]:hover {
  background: rgba(17, 24, 39, 0.06); /* faint charcoal wash on hover */
  border-color: #374151;            /* gray-700 */
  color: #111827;
}