/*
 * Hand-written theme CSS.
 * Loaded after Tailwind's utilities, so rules here can override them.
 */

/* --------------------------------
   Social icon tooltips
   Pure CSS, no JS. Pseudo-elements sit outside the accessibility tree,
   so this is purely visual — aria-label on the <a> already covers a11y.
-------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  color: #fff;
  /* --font-outfit comes from the @theme block in src/tailwind.css */
  font-family: var(--font-outfit, 'Outfit', sans-serif);
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

@media (hover: hover) {
  [data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* --------------------------------
   WPConsent preferences modal overrides
   Targets the cookie‑settings overlay opened via
   the .wpconsent-open-preferences footer link.
-------------------------------- */

::part(wpconsent-preferences-content),
::part(wpconsent-banner) {
  padding: 40px;
  border-radius: 0;
  border: solid 1px rgba(199, 201, 203, 0.3);
}

::part(wpconsent-banner-body) {
  text-align: left;
  padding-bottom: 10px;
}