/**
 * O bloco da medida do pé — **o que é igual nos dois sítios onde ele existe**.
 *
 * A página do produto e o localizador pedem a mesma coisa, e o cliente que vem de um para o outro
 * tem de reconhecer o mesmo campo. Isto esteve escrito duas vezes, uma em cada folha, e já tinha
 * começado a divergir: o "Como medir?" a 0,875em de um lado e a 0,8125em do outro, e o painel com
 * borda em cima num e à esquerda no outro. Duas folhas nunca carregadas ao mesmo tempo é
 * precisamente a situação em que uma diferença dessas passa meses sem ninguém dar por ela.
 *
 * O que **não** está aqui é o que é mesmo de cada lado: a caixa e os filtros do localizador, a
 * tabela e o resultado da página do produto. Este ficheiro é o controlo, não a página.
 *
 * Carregado antes das duas — é dependência declarada no `wp_enqueue_style` de cada uma.
 */

:root {
    /* O laranja da loja. Um tema que tenha o seu pode redefinir esta variável. */
    --mpsg-accent: #f07c1f;
    --mpsg-accent-soft: rgba(240, 124, 31, 0.08);
}

.mpsg-label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: 600;
}

/*
 * A medida e a unidade na mesma linha — também no telemóvel, que é onde isto se usa. O campo é o
 * único que encolhe; a unidade tem a largura do seu conteúdo e não cede. Num ecrã estreito de mais,
 * o `flex-wrap` deixa a unidade cair para a linha seguinte em vez de espremer as duas — mas só aí,
 * e sem nunca empurrar a página para o lado.
 */
.mpsg-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

.mpsg-input {
    flex: 1 1 5em;
    min-width: 4.5em;
    max-width: 8em;
    padding: 0.55em 0.6em;
}

/* ── unidade: mm | cm ──────────────────────────────────────────────────────────────────────── */

/*
 * Dois botões colados, com uma só moldura à volta. O estado desenha-se a partir do `aria-pressed`,
 * o mesmo atributo que o leitor de ecrã anuncia: não há uma segunda fonte de verdade para o CSS
 * poder discordar do que é anunciado.
 */
.mpsg-units {
    display: inline-flex;
    flex: 0 0 auto;

    /* A altura é a da linha, não a do próprio texto: campo, unidade e botão alinham sozinhos, por
       muito que o tema mexa no tamanho de letra ou no `padding` dos `input`. */
    align-self: stretch;

    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

/*
 * Deliberadamente mais pequeno do que o resto da linha: é a legenda do número que está ao lado, não
 * uma ação. Com `font: inherit` sozinho herdava o corpo de texto do tema e ficava com o peso visual
 * de um botão principal.
 */
.mpsg-unit-btn {
    padding: 0 0.55em;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.8125em;
    line-height: 1.15;
    cursor: pointer;
}

.mpsg-unit-btn + .mpsg-unit-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.mpsg-unit-btn[aria-pressed="true"] {
    background: var(--mpsg-accent);
    color: #fff;
    font-weight: 600;
}

/* ── "Como medir?" ─────────────────────────────────────────────────────────────────────────── */

.mpsg-how {
    font-size: 0.8125em;
    opacity: 0.9;
}

.mpsg-how-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* A seta é desenhada a partir do `aria-expanded` do botão: não pode dessincronizar-se do painel. */
.mpsg-how-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.4em solid currentColor;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.mpsg-how-toggle[aria-expanded="true"] .mpsg-how-arrow {
    transform: rotate(0deg);
}

/* Fechado é fechado. O `!important` é contra o tema: era CSS de tema a forçar `display` nos filhos
   que punha o painel sempre aberto, quando isto era um <details>. */
.mpsg-how-body[hidden] {
    display: none !important;
}

/*
 * O painel ocupa a largura toda do bloco. No localizador é irmão do botão e item do mesmo flex —
 * daí o `flex-basis`, que é inerte quando o pai é um bloco normal, como na página do produto.
 */
.mpsg-how-body {
    flex: 1 0 100%;
    margin-top: 0.6em;
    padding: 0.6em 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mpsg-how-body ol {
    margin: 0;
    padding-left: 1.3em;
}

.mpsg-how-why {
    margin: 0.6em 0 0;
    opacity: 0.85;
}

/* O vídeo, quando a loja tiver um. Sem vídeo não é impresso, e não deixa espaço por ocupar. */
.mpsg-how-video {
    margin: 0.7em 0 0;
}

.mpsg-video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 600;
}

.mpsg-video-play {
    font-size: 0.85em;
    opacity: 0.9;
}