/* site-cleanup.css
 * Audit visual dos botoes/links do clone GoFundMe.
 *
 * O front esta clonado mas nao tem backend para a maioria dos paths
 * (/discover, /c/start, /sign-in, /search, /c/blog, etc.). O script
 * site-hydrate.js neutraliza esses links em runtime (sanitizeLinks)
 * setando href="#" + preventDefault. Mas existe um flash entre carregar
 * o HTML e o JS rodar, e o cursor segue em "pointer" mesmo depois.
 *
 * Aqui dimmamos visualmente qualquer link/botao que claramente nao leva
 * a lugar nenhum, mantendo intactos os elementos que SAO parte do fluxo
 * de doacao. Sem !important agressivo: regras mais especificas do design
 * system do GoFundMe ganham normalmente.
 */

/* 1. Links inertes: href vazio, hash puro, ou javascript:* */
a[href="#"]:not([href="#skipnav"]),
a[href=""],
a[href^="javascript:"] {
  opacity: 0.55;
  cursor: default;
}

/* 2. Links para o dominio gofundme.com original (search, blog, careers,
 *    sign-in, etc.) — ainda navegam para fora se clicados, o que quebra
 *    o funil. Dimmamos visualmente. */
a[href^="https://www.gofundme.com/"],
a[href^="https://support.gofundme.com/"],
a[href^="https://gofundme.com/"] {
  opacity: 0.65;
}

/* 3. Links sociais ficam intactos (facebook, instagram, youtube, etc.)
 *    porque sao destinos reais. Restauramos sua opacidade. */
a[href^="https://www.facebook.com/"],
a[href^="https://www.instagram.com/"],
a[href^="https://www.youtube.com/"],
a[href^="https://twitter.com/"],
a[href^="https://x.com/"],
a[href^="https://www.tiktok.com/"] {
  opacity: 1;
}

/* 4. SEMPRE manter clicaveis e opacos os elementos do fluxo de doacao
 *    e helpers de UX. Mais especifico que as regras acima. */
a[href^="/donate"],
a[href^="./donate"],
a[href="/"],
a[href="#skipnav"],
button.hrt-primary-button,
button.hrt-text-button,
button[data-element-id^="btn_donate"],
button[data-element-id^="btn_story_read-more"],
button[data-element-id="btn_donations"],
button[aria-label="Menu"],
button.hrt-pagination-dots-dot-button,
button[aria-label="Previous"],
button[aria-label="Next"],
button[aria-label*="Scroll to organisers"],
.cp-success-back {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

/* 5. Indicador visual para itens dimmed: muda o cursor para default
 *    quando hover, deixando claro que nao acontece nada. */
a[href="#"]:not([href="#skipnav"]):hover,
a[href=""]:hover,
a[href^="javascript:"]:hover,
a[href^="https://www.gofundme.com/"]:not([href^="https://www.gofundme.com/f/"]):hover,
a[href^="https://support.gofundme.com/"]:hover {
  text-decoration: none;
}

/* 6. Faixa preta gigante "Faith Hinitt" sobre o topo da foto.
 *    O container .hero-media-viewer_bylineContainer__* tem gradient
 *    linear-gradient(to top, rgba(0,0,0,0.92)) que cobre 124px do
 *    topo da imagem em mobile, tampando o rosto. Eliminamos por
 *    completo, ja que o nome "Faith Hinitt" repete embaixo no card
 *    Organiser. */
[class*="hero-media-viewer_bylineContainer"],
.hero-media-viewer_bylineContainer__NpTkY {
  display: none !important;
}

/* 7. Restantes elementos de byline avulsos (avatar Faith Hinitt
 *    + texto) ficam visiveis em outras secoes da pagina. */

/* 8. Skeletons / loaders GoFundMe SSR que NUNCA hidrataram.
 *    O clone SSR tem dezenas de placeholders cinza que normalmente
 *    seriam substituidos por JS quando o React app monta no cliente.
 *    Como nao temos o backend nem o bundle hidratando, esses retangulos
 *    cinza ficam visiveis pra sempre (ex.: o "donor"/"donations"/"info"
 *    spot-icons no header desktop perto de "Faith Hinitt" byline, ou
 *    as linhas de skeleton de donation que o site-hydrate.js ainda nao
 *    cobre).
 *
 *    Estrategia: esconder elementos VAZIOS dessas classes via :empty,
 *    e esconder por CLASSE TODA os skeleton wrappers (sao sempre vazios
 *    em design). Os spot-icons que TIVEREM svg/img dentro continuam
 *    visiveis (sao icones reais, nao skeleton). */

/* 8.1 Skeleton placeholders puros (sempre vazios por definicao) */
[class*="skeleton_skeleton__"],
[class*="donation-skeleton_"],
[class*="donation-ticker_donationOverviewSkeleton"],
.hrt-skeleton,
.hrt-shimmer {
  display: none !important;
}

/* 8.2 Spans aria-busy="true" que so contem caracter zero-width ou
 *     skeleton inner: esconder o container inteiro pra evitar o
 *     placeholder cinza piscando enquanto JS nao terminou de injetar
 *     dados reais. */
span[aria-busy="true"][aria-live="polite"] {
  display: none !important;
}

/* 8.3 hrt-spot-icon SEM svg/img dentro: sao retangulos cinza vazios.
 *     CSS :empty so trata elementos sem nodes filhos nem texto;
 *     :not(:has(svg)):not(:has(img)) cobre o caso "tem whitespace
 *     mas nada visual". O fallback final esta no JS hideEmptySkeletons
 *     pra browsers antigos sem :has(). */
.hrt-spot-icon:empty,
.hrt-spot-icon--neutral:empty,
.hrt-spot-icon--default:empty,
.hrt-spot-icon--large:empty,
.hrt-spot-icon:not(:has(svg)):not(:has(img)):not(:has(use)),
.hrt-thumbnail:empty,
.hrt-thumbnail:not(:has(img)):not(:has(svg)) {
  display: none !important;
}

/* 8.4 Progress-circle SEM svg path interno: o site-hydrate.js cria o
 *     SVG fill no setProgressValue(). Antes disso (ou se falhar)
 *     fica um circulo cinza. Aqui escondemos quando ele esta vazio
 *     pra evitar piscada. */
.hrt-progress-circle:empty,
.hrt-progress-circle:not(:has(svg)):not(:has(circle)) {
  display: none !important;
}

/* 8.5 Marcador opt-in: qualquer elemento que o JS hideEmptySkeletons
 *     identificou como vazio recebe data-vkn-empty="1" e fica oculto.
 *     Util pra browsers antigos sem :has() ou pra elementos que
 *     ganham conteudo so depois (MutationObserver no JS). */
[data-vkn-empty="1"] {
  display: none !important;
}