/* ===== brasilhits — hotfix do player (volume + ícones) =====
   Injetado via nginx sub_filter (ver /etc/nginx/sites-available/brasilhits).
   Fica FORA do dist, então sobrevive aos redeploys do build.
   Correção definitiva: replicar no componente PlayerSidebar no fonte Astro. */

/* 1) Volume do desktop: VERTICAL, grosso, alto e fixo enquanto ajusta */
input[type="range"][aria-label="Volume"].w-24 {
  writing-mode: vertical-lr;   /* navegadores modernos (Chrome 121+, Firefox, Safari) */
  direction: rtl;              /* arrastar para cima = mais volume */
  width: 22px !important;      /* área de clique larga = fácil de pegar */
  height: 132px !important;    /* curso longo = ajuste preciso */
  accent-color: #22c55e;
  cursor: pointer;
}
/* fallback p/ WebKit/Chromium antigos (onde slider-vertical ainda existe) */
@supports (-webkit-appearance: slider-vertical) {
  input[type="range"][aria-label="Volume"].w-24 {
    -webkit-appearance: slider-vertical;
    writing-mode: horizontal-tb;
    direction: ltr;
  }
}
/* popover do volume: abre no hover E continua aberto enquanto arrasta (focus-within),
   com uma "ponte" que elimina o vão morto até o botão (era o que fechava no meio) */
[class~="group/vol"]:hover [class*="group-hover/vol:opacity-100"],
[class~="group/vol"]:focus-within [class*="group-hover/vol:opacity-100"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}
[class*="group-hover/vol:opacity-100"] {
  margin-bottom: 0 !important;
  padding-bottom: 12px !important;
}

/* 2) Mobile: remover o volume (não funciona no touch — é popover de hover) */
@media (max-width: 640px) {
  div:has(> input[type="range"][aria-label="Volume"]) {
    display: none !important;
  }
}

/* 3) Ícones do player espremidos: só manter o tamanho dos botões (sem quebrar linha,
   senão a linha desce e o root overflow-hidden corta o botão — ex.: coração) */
button[class*="place-items-center"][class*="rounded-full"] {
  flex-shrink: 0 !important;
}

/* 4) Player: remover o contorno redondo (border) dos botões de ícone, deixando
   os ícones "soltos". O play (verde, sem border) não é afetado. Resolve também o
   coração que parecia cortado por causa da bordinha nas views compactas. */
button[class*="place-items-center"][class*="rounded-full"][class*="border"] {
  border-color: transparent !important;
}
/* Coração: o path original é assimétrico e lê como "cortado". Esconde o SVG e
   desenha um coração simétrico (Lucide) via máscara no ::before do botão. */
button[aria-label^="Coracion"] svg,
button[aria-label*="corações"] svg { display: none !important; }
button[aria-label^="Coracion"]::before,
button[aria-label*="corações"]::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
button[aria-label^="Coracion"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%27/%3E%3C/svg%3E"); }
button[aria-label*="corações"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%27/%3E%3C/svg%3E"); }

/* 7) Player: esconder o rodapé "No ar desde 2008" (único text-white/25 na aside). */
aside[class*="lg:h-screen"] p[class*="text-white/25"] { display: none !important; }

/* 8) Header mobile: reexibir "Por que ouvir" e "Dúvidas" (eram hidden sm:inline).
   O nav já é overflow-x-auto, então acomoda os pills em telas estreitas. */
@media (max-width: 639px) {
  header nav a[href="/#porque"],
  header nav a[href="/#faq"] { display: inline-flex !important; }
  /* deixa o nav ROLAR dentro do espaço em vez de empurrar o botão "Entrar" */
  header nav { min-width: 0 !important; }
  header > div:first-child { min-width: 0 !important; flex: 1 1 auto !important; }
}

/* 9) Card de rádio: truncar o "tocando agora" (data-live-np) numa linha —
   títulos de música longos quebravam linha e AUMENTAVAM a altura do card. */
[data-live-np] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 5) Cards de rádio: tirar o nome (uppercase) e o emoji de cima da CAPA.
   O nome continua embaixo do card (no <h2>) e os selos (ouvintes/mais ouvida) ficam. */
.station-card span.text-3xl,
.station-card span.uppercase { display: none !important; }

/* 6) Player desktop em telas de POUCA ALTURA (ex.: 1366x768 — com a barra do
   navegador a viewport útil cai p/ ~560-660px). O player passava da altura da
   tela e, por estar centralizado (justify-center) e sem rolagem, o botão de
   play (na base) ficava CORTADO. Correção em camadas: quando pode faltar
   altura, alinhar ao topo e permitir rolar na própria sidebar; quando aperta
   de vez, compactar logo/capa p/ caber sem rolagem. Só afeta >=1024px. */
@media (min-width: 1024px) and (max-height: 680px) {
  /* overflow como rede de segurança, mas com a barra ESCONDIDA (feia); a
     rolagem por roda/trackpad continua funcionando se algo não couber. */
  aside[class*="lg:h-screen"] {
    overflow-y: auto !important;
    scrollbar-width: none !important;        /* Firefox */
    -ms-overflow-style: none !important;     /* IE/Edge antigo */
  }
  aside[class*="lg:h-screen"]::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Chrome/Safari */
  aside[class*="lg:h-screen"] > div[class*="lg:justify-center"] {
    justify-content: flex-start !important;
  }
}
@media (min-width: 1024px) and (max-height: 640px) {
  aside[class*="lg:h-screen"] a[aria-label^="Brasil Hits"] img { height: 3rem !important; }
  aside[class*="lg:h-screen"] div[class*="max-w-[240px]"][class*="aspect-square"] {
    max-width: 176px !important;
  }
}
@media (min-width: 1024px) and (max-height: 560px) {
  aside[class*="lg:h-screen"] a[aria-label^="Brasil Hits"] img { height: 2.5rem !important; }
  aside[class*="lg:h-screen"] div[class*="max-w-[240px]"][class*="aspect-square"] {
    max-width: 140px !important;
  }
}