/* Appearance only: HubSpot owns the banner, wording, position, visibility and
   consent events. Never override its display, animation, opacity or transforms.
   The account injects inline variables, so these token mappings need !important. */
#hs-banner-parent {
  --hs-banner-font-family: var(--font-body) !important;
  --hs-banner-font-size: var(--text-base) !important;
  --hs-banner-text-color: var(--color-ink) !important;
  --hs-banner-color: var(--color-bg-soft) !important;
  --hs-banner-corners: var(--radius) !important;
  --hs-banner-width: var(--maxw) !important;
  --hs-banner-padding: var(--gutter) !important;
  --hs-banner-button-corners: 999px !important;
  /* Equal emphasis and dark text on both gradients keep choices readable. */
  --hs-banner-accept-color: linear-gradient(90deg, var(--color-cobalt), var(--color-cobalt-deep)) !important;
  --hs-banner-decline-color: linear-gradient(90deg, var(--color-cobalt), var(--color-cobalt-deep)) !important;
  --hs-banner-accept-text-color: var(--color-navy) !important;
  --hs-banner-decline-text-color: var(--color-navy) !important;
  --hs-banner-accept-border-color: transparent !important;
  --hs-banner-decline-border-color: transparent !important;
  --hs-banner-settings-text-color: var(--color-accent) !important;
}

/* html adds specificity above HubSpot's late-injected two-ID rules. */
html #hs-banner-parent #hs-eu-cookie-confirmation {
  max-width: calc(100% - var(--gutter) * 2);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow);
}

html #hs-banner-parent #hs-eu-policy-wording,
html #hs-banner-parent #hs-eu-cookie-disclaimer {
  line-height: var(--leading);
  overflow-wrap: anywhere;
}

html #hs-banner-parent #hs-eu-cookie-disclaimer {
  color: var(--color-slate);
}

html #hs-banner-parent #hs-eu-policy-wording a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

html #hs-banner-parent #hs-eu-policy-wording a:hover {
  color: var(--color-heading);
}

html #hs-banner-parent #hs-eu-opt-in-buttons {
  gap: calc(var(--gutter) / 2);
}

html #hs-banner-parent #hs-eu-confirmation-button,
html #hs-banner-parent #hs-eu-decline-button {
  padding: calc(var(--gutter) / 2) var(--gutter);
  height: auto;
  min-height: 44px;
  font-weight: 700;
  line-height: var(--leading);
}

html #hs-banner-parent #hs-eu-confirmation-button:hover,
html #hs-banner-parent #hs-eu-decline-button:hover {
  filter: brightness(1.12);
}

html #hs-banner-parent #hs-eu-cookie-confirmation :is(a, button):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  #hs-banner-parent {
    --hs-banner-padding: calc(var(--gutter) * .75) !important;
  }

  html #hs-banner-parent #hs-eu-cookie-confirmation {
    max-width: calc(100% - var(--gutter));
  }

  html #hs-banner-parent #hs-eu-confirmation-button-group,
  html #hs-banner-parent #hs-eu-opt-in-buttons {
    width: 100%;
  }

  html #hs-banner-parent #hs-eu-confirmation-button,
  html #hs-banner-parent #hs-eu-decline-button {
    min-width: 0;
  }
}

/* Phone-only appearance. The existing 600–640px presentation stays unchanged.
   No height cap: all account wording must remain readable if it grows. */
@media (width < 600px) {
  #hs-banner-parent {
    --hs-banner-font-size: 14px !important;
    --hs-banner-padding: 10px !important;
  }

  html #hs-banner-parent #hs-eu-cookie-confirmation-inner {
    gap: 6px;
  }

  html #hs-banner-parent #hs-eu-policy-wording,
  html #hs-banner-parent #hs-eu-policy-wording p,
  html #hs-banner-parent #hs-eu-policy-wording a,
  html #hs-banner-parent #hs-eu-cookie-disclaimer {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
  }

  html #hs-banner-parent #hs-eu-opt-in-buttons {
    gap: 8px;
  }

  html #hs-banner-parent #hs-eu-confirmation-button,
  html #hs-banner-parent #hs-eu-decline-button {
    padding: 10px 12px;
    min-height: 44px;
    font-size: 14px;
    line-height: 1.4;
  }
}