/* =============================================================
   high-contrast.css — tema "Alto Contraste" (2026-09-25, Fase 2 do plano de UX)

   Carregado em toda página pelo BaseLayout, DEPOIS de home.css/exam.css. Só age com
   <html class="high-contrast"> (botão "Alto Contraste", ver site.js).

   Antes era html.high-contrast { filter: invert(1) hue-rotate(180deg) } com reinversão só
   em <img>. Toda foto de FUNDO via CSS ficava negativa (achado real: a foto da Coleta
   Domiciliar na seção Serviços), e filtro na raiz se comporta diferente entre navegadores.

   Agora é um tema de verdade, no estilo gov.br mas com a cor da marca no lugar do amarelo
   (decisão do usuário, 24/09): fundo preto, texto branco, destaques em #2DC7C7
   (--brand-accent, já da paleta oficial: ≈10:1 sobre preto, AAA). O teal principal #047691
   dá só 4:1 sobre preto e reprova até AA pra texto, por isso não é usado aqui.

   Especificidade: a regra-base usa :where() pra ficar em (0,1,2) -- baixa o bastante pras
   regras específicas abaixo (botões, links, estrelas) vencerem, e alta o bastante pra
   vencer as regras "!important" de cor do site (h1..h6, body/p, .footer p...), que têm no
   máximo 1 classe. Detalhes: Manuais/Arquitetura_Frontend_Astro.md, seção 13.
   ============================================================= */

html.high-contrast {
  color-scheme: dark;
  --hc-bg: #000000;
  --hc-text: #ffffff;
  --hc-accent: #2DC7C7;
  /* Tokens do site redefinidos: cobrem o que a regra-base não alcança (pseudo-elementos
     ::before/::after, barras de rolagem, SVG com stroke="var(--brand)"). */
  --brand: #2DC7C7;
  --brand-dark: #2DC7C7;
  --brand-accent: #2DC7C7;
  --text-navy: #ffffff;
  --text-ink: #ffffff;
  --text-gray: #ffffff;
  --text-storm: #ffffff;
  --bg-white: #000000;
  --bg-light: #000000;
  --bg-highlight: #000000;
  --border: #000000;
}

/* ---------- 1. Base: preto, texto branco, sem sombra. Imagem/vídeo/iframe/SVG fora ---------- */
html.high-contrast body,
html.high-contrast body :where(*:not(img, video, iframe, svg, svg *)) {
  background-color: var(--hc-bg) !important;
  color: var(--hc-text) !important;
  border-color: var(--hc-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* background-image com url() (fotos, ex.: .service-collect-img) continua; só os degradês
   decorativos somem. */
html.high-contrast .blog-img-1,
html.high-contrast .blog-img-2 { background-image: none !important; }
html.high-contrast img,
html.high-contrast video { filter: none !important; }

/* ---------- 2. Ícones: seguem a cor do texto em volta ---------- */
html.high-contrast svg[stroke]:not([stroke="none"]),
html.high-contrast svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }

/* ---------- 3. Links dentro de texto: accent + sublinhado ---------- */
html.high-contrast :is(p, li, .breadcrumb, .catalog-breadcrumb, .faq-inner, .body-text) a,
html.high-contrast .footer a:not(.footer-social-btn, .footer-gnext-link) {
  color: var(--hc-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
/* Links/ações só de texto (não são botões): accent pra se destacar do texto comum.
   (23/10/2026) + "Limpar filtros" do catálogo (ficava branco como o texto comum; aprovado pelo usuário). */
html.high-contrast :is(.hero-dual-link, .exam-cat-arrow, .blog-card-cta, .rel-link, .exam-detail,
  .results-cta-steps-link, .review-card-toggle, .footer-units-link, .blog-read-more,
  .catalog-quick-page, .catalog-filter-clear) {
  color: var(--hc-accent) !important;
}
/* Divisória entre "Ir para:" e "Filtrar por categoria:" no topo da /busca (2026-10-09): a
   regra-base a deixaria preta sobre preto. */
html.high-contrast .catalog-quick-sep { background-color: var(--hc-text) !important; }
/* O texto às vezes está num filho (ex.: <span> do "Ler mais"), e a regra-base pinta cada
   elemento de branco diretamente, não por herança -- os filhos herdam a cor do pai aqui. */
html.high-contrast :is(:is(p, li, .breadcrumb, .catalog-breadcrumb, .faq-inner, .body-text) a, .hero-dual-link,
  .exam-cat-arrow, .blog-card-cta, .rel-link, .exam-detail, .results-cta-steps-link,
  .review-card-toggle, .footer-units-link, .blog-read-more, .catalog-quick-page, .catalog-filter-clear) :where(*:not(svg, svg *)) {
  color: inherit !important;
  background-color: transparent !important;
}

/* ---------- 4. Botões ---------- */
/* Primários: fundo accent, texto preto (≈10:1).
   (23/10/2026) + "Aplicar filtros" do catálogo: sem borda, a base pintava o fundo de preto e ele parecia
   texto solto (desde 08/10); aprovado pelo usuário. */
html.high-contrast :is(.btn-primary, .header-btn-solid, .hero-search-btn, .btn-exam,
  .mobile-drawer .highlight-link, .js-font-btn.is-default, .js-contrast-toggle[aria-pressed="true"],
  .city-pill.active, .catalog-trending-chip.is-on, .promo-dot.active, .skip-link, .float-wpp,
  .catalog-filter-apply) {
  background-color: var(--hc-accent) !important;
  color: #000000 !important;
  border-color: var(--hc-accent) !important;
}
html.high-contrast :is(.btn-primary, .header-btn-solid, .hero-search-btn, .btn-exam,
  .mobile-drawer .highlight-link, .js-font-btn.is-default, .js-contrast-toggle[aria-pressed="true"],
  .city-pill.active, .catalog-trending-chip.is-on, .skip-link, .catalog-filter-apply) :where(*:not(svg, svg *)) {
  background-color: transparent !important;
  color: inherit !important;
}
/* Contorno: fundo preto, borda e texto accent. */
html.high-contrast :is(.btn-outline, .header-btn-outline, .city-pill:not(.active), .hero-drop,
  .footer-social-btn) {
  background-color: #000000 !important;
  color: var(--hc-accent) !important;
  border: 1.5px solid var(--hc-accent) !important;
}
html.high-contrast :is(.btn-outline, .header-btn-outline, .city-pill:not(.active), .hero-drop,
  .footer-social-btn) :where(*:not(svg, svg *)) {
  background-color: transparent !important;
  color: inherit !important;
}
/* Hover/foco dos botões de contorno: invertem pra accent (o hover original, fundo teal,
   perdia pra regra-base e ficava sem retorno visual nenhum). */
html.high-contrast :is(.btn-outline, .header-btn-outline, .city-pill, .hero-drop,
  .footer-social-btn):is(:hover, :focus-visible) {
  background-color: var(--hc-accent) !important;
  color: #000000 !important;
}
/* Pontos do slider promocional e botões A-/A+ não pressionados: borda pra aparecerem. */
html.high-contrast .promo-dot { border: 1.5px solid var(--hc-text) !important; }

/* ---------- 5. Cartões ---------- */
/* Cartão que é link: borda accent, sem sublinhado. */
html.high-contrast :is(a.quick-card, a.exam-cat-card, a.blog-card, a.exam-card, a.rel-card,
  a.hero-rating-badge, a.contact-link-card, a.unit-card) {
  border: 1.5px solid var(--hc-accent) !important;
  text-decoration: none !important;
}
/* Caixa que não é link: borda branca fina (sem a sombra, preto no preto sumia). */
html.high-contrast :is(.review-card, .unit-card, .service-block, .who-card, .prep-box, .buy-card,
  .step-row, .fact-item, div.exam-card, .reviews-box, .exam-cta-box, .highlight-box, .warn-box,
  .nav-dropdown, .clean-box, .social-proof-inner, .step, div.hero-rating-badge,
  .exam-badge-pill, .price-discount-badge, .exam-discount-badge, .rel-cat, .exam-category-badge,
  .service-tag, .buy-discount) {
  border: 1px solid var(--hc-text) !important;
}
/* Números dos passos e o check da preparação: o círculo teal virava só um número solto. */
html.high-contrast :is(.step-circle, .step-number, .chk-icon) {
  border: 1.5px solid var(--hc-accent) !important;
}

/* ---------- 6. Estrelas: accent (nada de amarelo) ---------- */
html.high-contrast :is(.star, .star-big, .review-star, .review-card-stars, .hero-rating-stars,
  .reviews-score-stars, .exam-rating-stars) {
  color: var(--hc-accent) !important;
}

/* ---------- 7. Detalhes que a regra-base não alcança ---------- */
/* Seta do menu suspenso (::before, fundo branco fixo no CSS do site). */
html.high-contrast .nav-dropdown::before {
  background: #000000 !important;
  border-color: var(--hc-text) !important;
}
/* Pontos de status das unidades (fundo colorido; viravam preto no preto). */
html.high-contrast .unit-status-dot-open { background-color: #31AB6F !important; }
html.high-contrast .unit-status-dot-closed { background-color: var(--hc-text) !important; }
/* Fundo da gaveta mobile: escurece em vez de tampar tudo de preto sólido. */
html.high-contrast .mobile-backdrop { background-color: rgba(0, 0, 0, 0.85) !important; }
/* Separador do breadcrumb tinha opacity 0.4 (≈3:1 sobre preto). */
html.high-contrast :is(.breadcrumb-sep, .catalog-breadcrumb-sep) { opacity: 1 !important; }

/* Logo do header (27/10/2026, pedido do usuário: "o mesmo formato da logo do footer, sem fundo branco"): no
   tema escuro entra o logo de letras brancas do rodapé (img .site-logo-escuro do Header.astro). Antes, o logo de
   letras escuras ficava sobre uma "placa" branca (padding 6 px, cantos de 8 px). Fora do tema, o escuro some. */
.site-logo-escuro { display: none; }
html.high-contrast .site-logo .site-logo-claro { display: none !important; }
html.high-contrast .site-logo .site-logo-escuro { display: block; }

/* ---------- 8. Foco e campos ---------- */
html.high-contrast :focus-visible {
  outline: 3px solid var(--hc-text) !important;
  outline-offset: 2px !important;
}
html.high-contrast ::placeholder { color: #C8D3D8 !important; opacity: 1 !important; }

/* ---------- Páginas do paciente (Fase 9, 2026-09-29) ---------- */
/* Os degradês do lado azul da réplica do login e do quadro "vídeo em breve" viram preto
   (a regra-base troca só o background-color; o degradê é background-image). A etiqueta
   "Prévia ilustrativa" tem borda tracejada, que continua visível (a base a pinta de branco). */
html.high-contrast :is(.pac-login-side, .pac-video-ph) { background-image: none !important; }

/* ---------- Páginas de unidade (Fase 10, 2026-10-02) ---------- */
/* Bolinhas do carrossel: a base pintava a pílula e as bolinhas de preto (sumiam no preto). */
html.high-contrast .pac-slider-dots { border: 1px solid var(--hc-text) !important; }
html.high-contrast .pac-slider-dot span { background-color: var(--hc-text) !important; }
html.high-contrast .pac-slider-dot[aria-pressed="true"] span { background-color: var(--hc-accent) !important; }
/* "Fechado agora": o vermelho do patient.css tem !important próprio (≈2:1 sobre preto). */
html.high-contrast .pac-unit-now .mix-status.is-closed :is(p, p span) { color: var(--hc-text) !important; }
/* Bolinha de status (::before, fora da regra-base): branca; verde quando aberto, sem o halo. */
html.high-contrast .pac-unit-status::before { background-color: var(--hc-text) !important; box-shadow: none !important; }
html.high-contrast .pac-unit-status.is-open::before { background-color: #31AB6F !important; }
/* "▶" decorativo do quadro "Vídeo em breve": com a opacidade de 25% da referência ficava 2:1. */
html.high-contrast .pac-ph .blog-img-pattern { opacity: 1 !important; }
/* Caixas sem borda que sumiam no preto: faixa, situação de agora, mapa e vídeo. */
html.high-contrast :is(.pac-unit-band, .pac-unit-now .mix-status, .pac-embed) { border: 1px solid var(--hc-text) !important; }
html.high-contrast .pac-embed.pac-embed-sem-caixa { border: 0 !important; } /* mosaico solto no lugar do vídeo (03/11/2026) */

/* ---------- Blog e Área Técnica (Fase 11, 2026-10-06) ---------- */
/* Busca do blog: a base pintava de preto o fundo retangular do campo, que cobria as pontas
   arredondadas da borda da pílula; o fundo preto fica só na pílula. O "Buscar" não estava
   na lista de botões e virava texto solto: fica como os botões primários. */
html.high-contrast :is(.pac-blog-search-input, #blogSearch) { background-color: transparent !important; }
html.high-contrast .pac-blog-search-submit { background-color: var(--hc-accent) !important; color: #000000 !important; }

/* ---------- Hub de unidades (Fase 16, 2026-10-13): o mapa ---------- */
/* O quadro do mapa não tem borda: o quadro de espera (fundo claro) sumia no preto. */
html.high-contrast .pac-map-box { border: 1px solid var(--hc-text) !important; }
/* A regra-base pintava de preto o fundo de cada pino (um quadrado preto em volta do desenho). */
html.high-contrast .pac-pin { background-color: transparent !important; }
/* Botões de aproximar e o "i" dos créditos: o ícone do MapLibre é uma imagem escura, que sumia no
   fundo preto; invertido, fica claro. O fundo do próprio ícone fica transparente (invertido, o
   preto da regra-base virava branco); o preto vem do botão e da caixa dos créditos. */
/* (27/10/2026) As mesmas regras valem para o mapa da página de unidade (.pac-map), que passou ao modelo do hub;
   :is() com as duas classes não muda a especificidade das regras do hub. */
html.high-contrast :is(.pac-map-box, .pac-map) :is(.maplibregl-ctrl-icon, .maplibregl-ctrl-attrib-button) { background-color: transparent !important; filter: invert(1); }
/* Balão: preto com borda branca; os links como os outros links de texto. A ponta é um triângulo
   feito de bordas, e a regra-base pintava as 4 de branco (virava um retângulo): só o lado que
   aponta para o pino fica branco. */
html.high-contrast :is(.pac-map-box, .pac-map) .maplibregl-popup-content { border: 1px solid var(--hc-text) !important; }
html.high-contrast .pac-map-pop a { color: var(--hc-accent) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html.high-contrast :is(.pac-map-box, .pac-map) .maplibregl-popup-tip { border-color: transparent !important; }
html.high-contrast :is(.pac-map-box, .pac-map) :is(.maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, .maplibregl-popup-anchor-bottom-right) .maplibregl-popup-tip { border-top-color: var(--hc-text) !important; }
html.high-contrast :is(.pac-map-box, .pac-map) :is(.maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, .maplibregl-popup-anchor-top-right) .maplibregl-popup-tip { border-bottom-color: var(--hc-text) !important; }
html.high-contrast :is(.pac-map-box, .pac-map) .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--hc-text) !important; }
html.high-contrast :is(.pac-map-box, .pac-map) .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--hc-text) !important; }

/* Fase 17 (2026-10-15): a seta entre as etapas da Gestão da Qualidade tinha opacity 0.5 (5,3:1 sobre
   preto, abaixo da meta do tema), como o separador do breadcrumb acima. */
html.high-contrast .step-arrow { opacity: 1 !important; }

/* Teste das capas (16/10/2026, opção E): no Alto Contraste a faixa fica preta, sem o fundo desfocado
   (manchas coloridas atrás da arte), e a arte ganha a borda do tema. */
html.high-contrast .pac-capa-faixa { background: #000 !important; }
html.high-contrast .pac-capa-faixa::before { display: none !important; }
html.high-contrast .pac-capa-faixa > .pac-cover-img { box-shadow: none !important; outline: 1px solid var(--hc-text) !important; }

/* Logos dos convênios (20/10/2026): o quadro do logo fica branco. No fundo preto do tema, o
   mix-blend-mode: multiply da referência apagava o logo (tudo vezes preto dá preto), e os logos têm
   cores próprias que não se leem no preto. Só o quadro com imagem: o do nome continua no tema. */
html.high-contrast .logo-ph:has(img) { background: #ffffff !important; }
/* (21/10/2026) O mesmo para o logo dos parceiros: o quadro do card de Descontos e o do topo da página
   do convênio ou parceiro (os logos têm o fundo transparente; azul ou escuro sumiria no preto). */
html.high-contrast .partner-logo { background: #ffffff !important; }
/* (22/10/2026) O mesmo para os logos da "Na mídia" (O Laboratório e página de autor): no fundo preto, o
   O Globo some inteiro, e o "ECONÔMICO" do Valor e o "PORTAL" do Portal Correio também. A 1ª versão punha
   um quadro branco só em volta do logo (um retângulo branco dentro do card preto); pedido do usuário no
   mesmo dia: o card inteiro branco, como o quadro dos convênios. Só o card com logo: o do nome (marcação)
   continua no tema. */
html.high-contrast .about-media-card:has(.about-media-img) { background: #ffffff !important; }
/* (21/10/2026) Imagem do topo da página de categoria (catalog.css): fora do Alto Contraste. O degradê é da
   cor clara do topo e a foto ficaria atrás do texto branco no fundo preto; o tema fica com o topo de antes. */
html.high-contrast .catalog-hero-media { display: none !important; }