/* =====================================================================
 * MENU DO CELULAR — Blog Canela RS
 * Criado em 16/09/2026. Opção A: uma linha só, com a palavra MENU.
 *
 * Fica em themes/wc_blogcanelars/wc_css/ porque o index.php carrega
 * sozinho todo .css dessa pasta.
 *
 * ---------------------------------------------------------------------
 * O QUE EXISTIA
 *
 * O menu do celular é gerado pelo plugin "menumaker" (js/menumaker.min.js,
 * chamado em js/custom-script.js). Ele injeta <div id="menu-button">Menu</div>
 * dentro do #navigation, e o css/style.css do template RealWed desenhava
 * esse botão como uma CAIXA ESCURA de largura inteira, com os três riscos
 * posicionados em absolute no canto direito.
 *
 * Como o #navigation e os ícones sociais estão em duas colunas col-12 do
 * Bootstrap, no celular elas empilhavam: uma faixa para o menu, outra só
 * para os ícones. Três faixas no total com o logo, consumindo cerca de
 * 27% da primeira tela antes da foto aparecer.
 *
 * ---------------------------------------------------------------------
 * O QUE MUDA
 *
 * 1. As duas colunas passam a dividir UMA linha: menu à esquerda, redes
 *    à direita. Só no celular — no computador nada muda.
 * 2. A caixa escura some. Os riscos vão para a esquerda, antes da palavra.
 * 3. O menu aberto vira uma camada absoluta sobre o conteúdo, em vez de
 *    empurrar a página para baixo.
 *
 * Nada aqui vale acima de 768px, que é o mesmo ponto de corte que o
 * menumaker usa para ligar a classe .small-screen. Os dois precisam
 * concordar: se um virar em 768 e o outro em 767, existe uma largura em
 * que o menu fica sem botão.
 * ===================================================================== */

@media (max-width: 768px) {

    /* -----------------------------------------------------------------
     * 1. UMA LINHA SÓ
     *
     * O seletor precisa desta especificidade para vencer o .col-12 do
     * Bootstrap, que fixa flex: 0 0 100%.
     * ----------------------------------------------------------------- */
    .wc-cab-mobile {
        position: relative;   /* âncora do menu aberto, item 3 */

        /* A faixa tinha 12px de folga em cima e embaixo, herdados de
           .header. Com o botão já medindo 44px de altura — o mínimo
           confortável para o dedo — esses 24px extras só engordavam a
           barra. Em 4px a faixa fecha em ~52px. */
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* MEDIDO, não suposto: sem esta linha o menu aberto saía com 95px de
       largura. As colunas deste tema carregam position: relative, então
       o "left: 0; right: 0" do item 3 se media pela COLUNA do botão, e
       não pela faixa inteira. Deixando as colunas estáticas, a âncora
       passa a ser o .wc-cab-mobile. */
    .wc-cab-mobile .row > [class*="col-"] {
        position: static;
    }

    .wc-cab-mobile .row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .wc-cab-mobile .row > [class*="col-"]:first-child {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-right: 0;
    }

    .wc-cab-mobile .row > [class*="col-"]:last-child {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        padding-left: 0;
        text-align: right;
    }

    /* -----------------------------------------------------------------
     * 2. O BOTÃO: riscos à esquerda, palavra à direita
     * ----------------------------------------------------------------- */
    #navigation.small-screen #menu-button {
        display: flex;
        align-items: center;
        gap: 8px;

        /* a caixa escura sai */
        background: transparent;
        margin: 0;
        padding: 14px 0;

        font-size: 10px;          /* mesmo corpo das etiquetas dos cards */
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #fff;
        line-height: 1;
    }

    /* Os riscos antigos eram ::before e ::after em absolute, no canto
       direito. Ficam desligados; quem desenha agora é o .wc-riscos, que
       é um elemento de verdade e por isso pode ser posicionado no fluxo. */
    #navigation.small-screen #menu-button::before,
    #navigation.small-screen #menu-button::after {
        content: none;
        display: none;
    }

    /* Três riscos em um elemento só: borda em cima, borda embaixo, e o
       do meio como fundo centralizado. Evita ter que empilhar spans. */
    #navigation.small-screen #menu-button .wc-riscos {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 22px;
        height: 16px;
        box-sizing: border-box;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        background: linear-gradient(#fff, #fff) center center / 100% 2px no-repeat;
    }

    /* Aberto: os três viram um X. As bordas somem e duas barras
       sobrepostas giram em sentidos opostos. */
    #navigation.small-screen #menu-button.menu-opened .wc-riscos {
        border-color: transparent;
        background: none;
    }

    #navigation.small-screen #menu-button.menu-opened .wc-riscos::before,
    #navigation.small-screen #menu-button.menu-opened .wc-riscos::after {
        content: '';
        position: absolute;
        left: 0;
        top: 7px;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    #navigation.small-screen #menu-button.menu-opened .wc-riscos::before {
        transform: rotate(45deg);
    }

    #navigation.small-screen #menu-button.menu-opened .wc-riscos::after {
        transform: rotate(-45deg);
    }

    /* Foco visível pelo teclado. O botão hoje é alcançável por Tab
       (o JS acrescenta tabindex), então precisa mostrar onde está. */
    #navigation.small-screen #menu-button:focus-visible {
        outline: 2px solid #ffd9ee;
        outline-offset: 3px;
        border-radius: 4px;
    }

    /* -----------------------------------------------------------------
     * 3. O MENU ABERTO COMO CAMADA
     *
     * O #navigation tem position: relative no css do template. Se ficasse
     * assim, o "left: 0; right: 0" abaixo se mediria pela COLUNA do menu,
     * que agora é estreita — e a lista abriria com a largura do botão.
     * Deixando o #navigation em static, a referência passa a ser o
     * .wc-cab-mobile, que ocupa a faixa inteira.
     * ----------------------------------------------------------------- */
    #navigation.small-screen {
        position: static;
    }

    #navigation.small-screen > ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        background: #3d0f2c;
        text-align: left;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    }

    #navigation.small-screen > ul > li {
        border-top: 1px solid rgba(255, 255, 255, .10);
    }

    #navigation.small-screen > ul > li:first-child {
        border-top: 0;
    }

    #navigation.small-screen > ul > li > a {
        padding: 14px 18px;
        font-size: 14px;
        color: #f3dcea;
    }

    #navigation.small-screen > ul > li > a:hover,
    #navigation.small-screen > ul > li > a:focus {
        background: rgba(255, 255, 255, .06);
        color: #fff;
    }

    /* -----------------------------------------------------------------
     * 4. OS ÍCONES DAS REDES
     *
     * Eram 40x40 numa faixa só para eles. Agora dividem a linha com o
     * menu, então encolhem — mas ficam em 34px, acima do mínimo de 32
     * que ainda se acerta com o dedo.
     * ----------------------------------------------------------------- */
    .wc-cab-mobile .social-icons {
        margin-top: 0;
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        align-items: center;
    }

    .wc-cab-mobile .social-icons .icon-square {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 6px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

/* ---------------------------------------------------------------------
 * Acima de 768px o botão nem existe — o menumaker esconde. Mas o
 * .wc-riscos ficaria visível dentro dele se algum dia a regra acima
 * falhasse, então fica explícito.
 * ------------------------------------------------------------------- */
@media (min-width: 769px) {
    #menu-button .wc-riscos {
        display: none;
    }
}