/**
 * Regras que ficam fora do build scss.
 *
 * CSS puro de propósito: o pipeline do tema usa node-sass 4, que não compila em
 * Node moderno. Arquivo enfileirado à parte em functions.php, depois do
 * main.css, para não depender de rebuild do scss.
 */

/**
 * Ícones sociais do topo.
 *
 * O "CSS adicional" do Personalizar (wp-custom-css, guardado no banco) fixa
 * `.top-header a > img { width: 15px }`. Como o facebook.svg é 14x25 (vertical),
 * travar a largura deixa ele com ~27px de altura, bem maior que instagram
 * (15x15) e youtube (15x10,6). Aqui a restrição passa a ser a altura.
 *
 * O wp-custom-css é impresso depois dos estilos enfileirados, então este
 * seletor precisa ser mais específico que `.top-header a > img` para vencer.
 */
.top-header a > img[alt="Facebook"] {
  width: auto;
  height: 15px;
}

/**
 * Facade dos vídeos do YouTube — ver assets/js/script.js.
 *
 * As alturas replicam as regras de `.video iframe` e `.video__card iframe`
 * (assets/scss/components/_about.scss) para não haver salto de layout quando
 * o <iframe> substitui o facade no clique.
 */

.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

.yt-facade__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.25rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  transition: background 0.2s ease;
}

.yt-facade__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.625rem 0 0.625rem 1.0625rem;
  border-color: transparent transparent transparent #fff;
}

.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
  background: #ff0000;
}

.yt-facade:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* Vídeo principal ("Nosso protocolo acelerado"). */
.video .yt-facade {
  height: 39rem;
}

/* Slides do carrossel de casos — precisa vir depois para vencer a regra acima. */
.video__card .yt-facade {
  height: 15rem;
}

@media (max-width: 768px) {
  .video .yt-facade {
    height: 15rem;
  }
}