/**
 * Complianz cookie banner mapped to the Héjakút design system.
 */

/* The consent dialog is reopened from the permanent footer link instead. */
#cmplz-manage-consent .cmplz-manage-consent {
  display: none;
}

.cmplz-show-banner {
  cursor: pointer;
}

.hk-site-footer .cmplz-show-banner {
  color: var(--wp--preset--color--white);
  font-weight: 600;
  text-decoration: none;
}

.hk-site-footer .cmplz-show-banner:is(:hover, :focus-visible) {
  opacity: 0.82;
  text-decoration: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 1rem 3rem rgb(0 64 56 / 20%);
  color: var(--wp--preset--color--body-text);
  font-family: var(--wp--preset--font-family--body);
  gap: var(--wp--preset--spacing--xs);
  max-height: min(40rem, calc(100dvh - 1rem));
  max-width: min(31rem, calc(100vw - 1rem));
  overflow-y: auto;
  padding: 1.25rem;
  scrollbar-color: var(--wp--preset--color--primary) var(--wp--preset--color--surface-mint);
}

#cmplz-cookiebanner-container .cmplz-header {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--sm);
  grid-template-columns: auto;
}


#cmplz-cookiebanner-container .cmplz-title {
  color: var(--wp--preset--color--foreground);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--h-5);
  font-weight: 700;
  line-height: 1.1;
}

#cmplz-cookiebanner-container .cmplz-close {
  align-items: center;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: 50%;
  color: var(--wp--preset--color--primary);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
  width: 2.25rem;
}

#cmplz-cookiebanner-container .cmplz-close svg {
  height: 1rem;
  width: 1rem;
}

#cmplz-cookiebanner-container .cmplz-close:is(:hover, :focus-visible) {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
  outline: none;
}

#cmplz-cookiebanner-container :where(.cmplz-divider-header, .cmplz-footer) {
  background: var(--wp--preset--color--neutral-200);
  height: 1px;
}

#cmplz-cookiebanner-container .cmplz-message {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.45;
}

#cmplz-cookiebanner-container .cmplz-message p {
  margin: 0;
}

#cmplz-cookiebanner-container .cmplz-categories {
  margin-block: var(--wp--preset--spacing--xs);
}

#cmplz-cookiebanner-container .cmplz-category + .cmplz-category {
  margin-block-start: var(--wp--preset--spacing--xs);
}

#cmplz-cookiebanner-container .cmplz-category {
  background: var(--wp--preset--color--surface-mint);
  border: 1px solid var(--wp--preset--color--neutral-200);
  border-radius: var(--wp--custom--radius--sm);
  overflow: hidden;
}

#cmplz-cookiebanner-container .cmplz-category-header {
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  min-height: 2.5rem;
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}

#cmplz-cookiebanner-container .cmplz-category-title {
  color: var(--wp--preset--color--foreground);
  font-weight: 600;
}

#cmplz-cookiebanner-container .cmplz-category-toggle {
  color: var(--wp--preset--color--primary);
}

#cmplz-cookiebanner-container .cmplz-category-toggle:is(:hover, :focus-visible) {
  color: var(--wp--preset--color--primary-dark);
}

#cmplz-cookiebanner-container .cmplz-description {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.45;
  padding: 0 var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs);
}

#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label {
  background: var(--wp--preset--color--neutral-200);
  border-color: var(--wp--preset--color--neutral-200);
}

#cmplz-cookiebanner-container .cmplz-banner-checkbox input:checked + .cmplz-label {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

#cmplz-cookiebanner-container .cmplz-buttons {
  display: grid;
  gap: var(--wp--preset--spacing--xs);
      grid-template-columns: 1fr 1fr 1fr;
}

#cmplz-cookiebanner-container .cmplz-btn {
  align-items: center;
  background: transparent;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--ui);
  font-size: clamp(0.625rem, 0.55rem + 0.15vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 2.625rem;
  padding: var(--wp--preset--spacing--xs);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

#cmplz-cookiebanner-container :where(.cmplz-accept, .cmplz-save-preferences) {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

#cmplz-cookiebanner-container .cmplz-btn:is(:hover, :focus-visible) {
  background: var(--wp--preset--color--primary-dark);
  border-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--white);
  outline: none;
}

/*
 * Complianz normally hides its detailed controls until preferences are
 * opened. Do not set a base display value on those elements: doing so would
 * reveal both consent states at once. In the expanded state, keep only the
 * two compact actions requested by the design.
 */
#cmplz-cookiebanner-container
  .cmplz-cookiebanner.cmplz-categories-visible
  .cmplz-buttons {
  grid-template-columns: repeat(2, max-content);
  justify-content: end;
}

#cmplz-cookiebanner-container
  .cmplz-cookiebanner.cmplz-categories-visible
  .cmplz-buttons
  :where(.cmplz-accept, .cmplz-deny) {
  display: none;
}

#cmplz-cookiebanner-container
  .cmplz-cookiebanner.cmplz-categories-visible
  .cmplz-buttons
  :where(.cmplz-save-preferences, .cmplz-manage-options) {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 2.25rem;
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  white-space: nowrap;
}

#cmplz-cookiebanner-container .cmplz-links ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#cmplz-cookiebanner-container .cmplz-link {
  color: var(--wp--preset--color--primary-dark);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  text-decoration: none;
}

#cmplz-cookiebanner-container .cmplz-link:is(:hover, :focus-visible) {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

@media (max-width: 47.9375rem) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
    bottom: 0;
    left: 0;
    max-height: min(82dvh, 40rem);
    max-width: none;
    padding: var(--wp--preset--spacing--sm);
    right: 0;
    width: 100%;
  }

  #cmplz-cookiebanner-container .cmplz-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #cmplz-cookiebanner-container
    .cmplz-cookiebanner.cmplz-categories-visible
    .cmplz-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cmplz-cookiebanner-container *,
  #cmplz-cookiebanner-container *::before,
  #cmplz-cookiebanner-container *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}