/* Host Líder Stream — cabeçalho compacto: player do topo (barra), barra de contatos, logo e menu
 * Carregado por último (depois de layout.css / theme.css / hls-modern.css).
 * Cores: usa --hls-primary (definida no <header> a partir da cor principal do painel; padrão #a80c0c).
 */

/* ---------- Medidas (a altura do cabeçalho define o recuo do conteúdo) ---------- */
:root {
    --hls-tb-h: 40px;      /* barra superior (celular) */
    --hls-main-h: 56px;    /* faixa da logo + menu (celular/tablet) */
    --hls-logo-max: 38px;  /* altura máxima da logo */
}
@media (min-width: 768px) {
    :root { --hls-tb-h: 38px; }
}
@media (min-width: 1025px) {
    :root { --hls-main-h: 64px; --hls-logo-max: 46px; }
}

/* O cabeçalho é fixo: o corpo recebe exatamente a altura dele (evita cobrir o início das páginas).
   --hls-pb-h = altura do Player do Topo (barra horizontal, definida em hls-radiobar.css). */
body { padding-top: var(--hls-main-h); }
body.hls-has-radiobar { padding-top: calc(var(--hls-main-h) + var(--hls-pb-h, 0px)); }
@media (min-width: 768px) {
    body.hls-has-topbar { padding-top: calc(var(--hls-main-h) + var(--hls-tb-h)); }
    body.hls-has-topbar.hls-has-radiobar { padding-top: calc(var(--hls-main-h) + var(--hls-tb-h) + var(--hls-pb-h, 0px)); }
}
/* A barra de contatos continua escondida no celular (como era) */
@media (max-width: 767px) {
    body.hls-has-topbar #top-header { display: none; }
}

/* ---------- Barra superior ---------- */
#top-header.hls-topbar { position: relative; }
.hls-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--hls-tb-h);
}
.hls-topbar .th-text {
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    min-width: 0;
}
.hls-topbar .th-text .th-item { line-height: 1; padding-top: 3px; padding-bottom: 3px; }
.hls-tb-contacts {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hls-tb-clock { flex: 0 0 auto; white-space: nowrap; }
.hls-topbar .th-text .th-item:last-child { padding-right: 0; }
.hls-topbar #clockbox { background: none; }

/* ---------- Barra superior: ajustes responsivos (o player do topo fica em hls-radiobar.css; o do rodapé em hls-player.css) ---------- */
/* Tablet estreito: some o relógio */
@media (max-width: 991px) {
    .hls-tb-clock { display: none; }
}
/* Celular */
@media (max-width: 767px) {
    .hls-topbar-row { gap: 0; }
}

/* ---------- Logo + menu ---------- */
/* clearfix do Bootstrap viraria item do flexbox e deslocaria a logo */
#mainHeader nav.navbar:before, #mainHeader nav.navbar:after,
#mainHeader .navbar-header:before, #mainHeader .navbar-header:after,
#mainHeader .navbar-collapse:before, #mainHeader .navbar-collapse:after { display: none; content: none; }
#mainHeader nav.navbar { min-height: 0; margin: 0; }
#mainHeader .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hls-main-h);
    margin: 0;
}
#mainHeader .navbar-toggle {
    order: 2;
    float: none;
    flex: 0 0 auto;
    margin: 0 0 0 12px;
}
.hls-brand {
    order: 1;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
    padding: 0;
}
.hls-brand .site-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* "Altura do logotipo" do painel vale como teto, limitado ao que cabe no cabeçalho compacto */
    max-height: min(var(--hls-logo-h, 70px), var(--hls-logo-max));
    margin: 0;
}

/* Menu aberto no celular/tablet: nunca passa da tela */
@media (max-width: 1024px) {
    #mainMenu { max-height: min(75vh, calc(100vh - 110px)); }
}

@media (min-width: 1025px) {
    #mainHeader nav.navbar { display: flex; align-items: stretch; height: var(--hls-main-h); }
    #mainHeader .navbar-header { float: none; flex: 0 0 auto; margin-right: 20px; }
    #mainMenu.navbar-collapse.collapse {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: stretch;
        height: var(--hls-main-h) !important;
        max-height: none;
        padding: 0;
        overflow: visible !important;
    }
    #mainMenu .navbar-nav {
        float: none !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        margin: 0;
    }
    #mainMenu .navbar-nav > li { float: none; display: flex; align-items: stretch; }
    #mainMenu .navbar-nav > li.sep { display: none; }
    #mainMenu .navbar-nav > li > a {
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: .03em;
        white-space: nowrap;
    }
    #mainMenu .navbar-nav ul { top: var(--hls-main-h); }

    /* Botão "Ouvir agora": destaque vermelho, centralizado na faixa */
    #mainMenu #btn-ouvir {
        align-self: center;
        height: 38px;
        padding: 0 14px;
        margin: 0 4px 0 6px;
        border-radius: 3px;
    }
    #mainMenu #btn-ouvir:before {
        font-family: FontAwesome;
        font-weight: normal;
        content: "\f025"; /* fone de ouvido */
        margin-right: 7px;
        font-size: 14px;
    }
}
@media (min-width: 1200px) {
    #mainMenu .navbar-nav > li > a { padding: 0 14px; font-size: 13px; letter-spacing: .05em; }
    #mainMenu #btn-ouvir { padding: 0 16px; }
}

/* Home: a margem do slider compensava o cabeçalho alto (que cobria o topo dele).
   Com o cabeçalho compacto, o slider encosta direto nele, como nas páginas internas. */
#homeFlex { margin-top: 0; }