/* =========================================================================
   INFOHAS.STORE — Fundação visual (Visual Refresh 2.0 · V1)
   =========================================================================

   O QUE ISTO É
   Os tokens e a casca global. Não é um framework e não substitui nada: as
   folhas antigas (`css/style.css`, `loja/style.css`) continuam a valer para
   as páginas que ainda não foram refeitas, e o Bootstrap continua a dar a
   grelha ao catálogo.

   PORQUE AS CLASSES SÃO `.ih-*`
   As folhas antigas já estilizam `body`, `.navbar`, `footer` e `.btn-primary`.
   Construir a casca nova sobre essas classes seria uma guerra de
   especificidade com páginas que esta Wave não pode tocar — cinco delas têm
   trabalho não commitado do proprietário. Com um prefixo próprio, o antigo e
   o novo não se cruzam: o que é novo é novo, e o resto fica exatamente como
   estava até a sua Wave chegar.

   PALETA
   Derivada do que já existia — o verde e o laranja da INFOHAS, e os neutros
   que o Customer Account já usava nos `--acc-*`. Nenhuma cor inventada.

   O LARANJA GANHOU UM TRABALHO
   Era um bloco de rodapé a gritar. Passa a ser acento: a linha do rodapé e,
   sobretudo, o anel de foco — onde a sua saturação é uma virtude, porque tem
   de se ver contra o verde do cabeçalho e contra o branco da página.
   ========================================================================= */

:root {
    /* --- marca ---------------------------------------------------------- */
    --ih-green:        #008000;   /* 5.1:1 sobre branco — legível como texto */
    --ih-green-hover:  #006400;
    --ih-green-soft:   #e8f3e8;
    --ih-orange:       #ff6600;   /* 3.0:1 — acento e foco, NUNCA texto      */
    --ih-orange-soft:  #fff1e6;

    /* --- superfícies e neutros (alinhados com os --acc-* da conta) ------- */
    --ih-bg:           #f4f7f4;
    --ih-surface:      #ffffff;
    --ih-surface-2:    #fafcfa;
    --ih-border:       #e2e8e2;
    --ih-border-strong:#cfd9cf;
    --ih-text:         #1d2320;
    --ih-muted:        #5d6b62;
    /* Era #8a968f: 3.07:1 sobre branco, quando a AA pede 4.5 para texto
       normal. Falhava em todo o lado onde é usado como texto — cabeçalhos de
       tabela, rótulos de cartão, a subcategoria no cartão de produto, a letra
       pequena da conta. Escurecido o mínimo necessário, com a mesma matiz:
       4.97:1 sobre branco, 4.82 sobre --ih-surface-2, 4.60 sobre --ih-bg. */
    --ih-faint:        #69726d;

    /* --- estados -------------------------------------------------------- */
    --ih-success:      #17632a;
    --ih-warning:      #a34400;
    --ih-danger:       #b4232a;
    --ih-focus:        var(--ih-orange);

    /* --- forma ---------------------------------------------------------- */
    --ih-radius-sm:    6px;
    --ih-radius-md:    10px;
    --ih-radius-lg:    16px;
    --ih-shadow-sm:    0 1px 2px rgba(29, 35, 32, .06),
                       0 1px 3px rgba(29, 35, 32, .04);

    /* --- larguras ------------------------------------------------------- */
    --ih-page-max:     1280px;   /* catálogo, grelhas, tabelas              */
    --ih-content-max:  900px;    /* leitura corrida, detalhe                */
    --ih-form-max:     460px;    /* entrar, criar conta, contacto           */

    /* --- tipografia ----------------------------------------------------- */
    --ih-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
}

/* =========================================================================
   Tipografia e base
   ========================================================================= */

body {
    font-family: var(--ih-font);
    background: var(--ih-bg);
    color: var(--ih-text);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;

    /* Rodapé no fim da página, não a meio dela. Numa página curta — o
       Sign In é o caso — o rodapé aparecia logo a seguir ao formulário e
       deixava metade do ecrã em branco por baixo. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.ih-page { flex: 1 0 auto; }
.ih-footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.15rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.6rem); font-weight: 650; }
h3 { font-size: 1.18rem; font-weight: 600; }
small, .ih-small { font-size: .875rem; color: var(--ih-muted); }

/* =========================================================================
   Foco visível — o P1 que a V0 encontrou
   -------------------------------------------------------------------------
   O site público não tinha uma única regra de foco: navegar com teclado era
   navegar às cegas. O anel é laranja porque tem de se ver tanto sobre o verde
   do cabeçalho como sobre o branco da página, e 3px a 3:1 cumprem o mínimo
   para um indicador de interface.

   `:focus-visible` mostra-o a quem navega por teclado sem o impor a quem
   clica. O `:focus` fica como recurso para navegadores que não o suportem —
   nunca se remove um contorno sem pôr outro no lugar.
   ========================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ih-focus);
    outline-offset: 2px;
    border-radius: var(--ih-radius-sm);
}
@supports not selector(:focus-visible) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus {
        outline: 3px solid var(--ih-focus);
        outline-offset: 2px;
    }
}

/* =========================================================================
   Casca: cabeçalho
   ========================================================================= */

.ih-header {
    position: sticky;   /* sticky e não fixed: dispensa o <div> espaçador de
                           80px que a casca antiga precisava de ter          */
    top: 0;
    z-index: 1030;
    background: var(--ih-green);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.ih-header-inner {
    max-width: var(--ih-page-max);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
}
.ih-wordmark {
    color: #fff;
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: .045em;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 0;
}
.ih-wordmark:hover, .ih-wordmark:focus { color: #fff; }

.ih-nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}
.ih-nav a, .ih-nav button {
    display: inline-flex;
    align-items: center;
    /* 40px de altura: um alvo que se acerta com o polegar sem ampliar */
    min-height: 40px;
    padding: 8px 14px;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--ih-radius-sm);
    cursor: pointer;
}
.ih-nav a:hover, .ih-nav button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ih-nav a[aria-current="page"] {
    /* O véu branco clareava o verde para #2e972e e deixava o texto branco a
       3.76:1 — abaixo da AA, e logo no item que devia ser o mais legível da
       barra. Escurecer em vez de clarear mantém o realce e leva o contraste
       a 6.95:1. */
    background: rgba(0, 0, 0, .18);
    color: #fff;
}
.ih-header :focus-visible { outline-color: #fff; }

/* =========================================================================
   Casca: contentores
   -------------------------------------------------------------------------
   Três larguras, porque três é quantas o site precisa: uma grelha larga, uma
   leitura confortável e um formulário. As Waves seguintes escolhem a sua.
   ========================================================================= */

.ih-page { padding: 28px 0 44px; }
.ih-container {
    max-width: var(--ih-page-max);
    margin: 0 auto;
    padding: 0 20px;
}
.ih-container--content { max-width: var(--ih-content-max); }
.ih-container--form    { max-width: var(--ih-form-max); }

/* =========================================================================
   Casca: rodapé
   -------------------------------------------------------------------------
   Era um bloco laranja com texto branco por cima — cerca de 1.6:1, ilegível.
   Agora o laranja é uma linha de acento e o texto tem contraste a sério.
   ========================================================================= */

.ih-footer {
    border-top: 3px solid var(--ih-orange);
    background: var(--ih-surface);
    color: var(--ih-muted);
    margin-top: 40px;
}
.ih-footer-inner {
    max-width: var(--ih-page-max);
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: space-between;
    font-size: .875rem;
}
/* 19px de altura de linha ficava abaixo do mínimo de 24x24 do WCAG 2.2 para
   alvos de apontamento. O padding não muda o aspecto e resolve. */
.ih-footer a {
    display: inline-block;
    padding: 4px 0;
    color: var(--ih-muted);
    text-decoration: none;
}
.ih-footer a:hover { color: var(--ih-text); text-decoration: underline; }
.ih-footer-marca { color: var(--ih-text); font-weight: 600; letter-spacing: .03em; }

/* =========================================================================
   Botões de marca
   -------------------------------------------------------------------------
   Existem para as Waves V2–V5 migrarem os azuis do Bootstrap contexto a
   contexto. NÃO se sobrepõe `.btn-primary` globalmente: isso mudaria páginas
   com trabalho em curso do proprietário sem ninguém ter pedido.
   ========================================================================= */

.ih-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--ih-border-strong);
    border-radius: var(--ih-radius-sm);
    background: var(--ih-surface);
    color: var(--ih-text);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.ih-btn:hover { background: var(--ih-surface-2); color: var(--ih-text); }
.ih-btn--primary {
    background: var(--ih-green);
    border-color: var(--ih-green);
    color: #fff;
}
.ih-btn--primary:hover { background: var(--ih-green-hover); color: #fff; }
.ih-btn--ghost { background: none; border-color: transparent; color: var(--ih-green); }
.ih-btn--ghost:hover { background: var(--ih-green-soft); color: var(--ih-green-hover); }

/* --- Saltar para o conteúdo: invisível até receber foco ------------------ */
.ih-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ih-surface);
    color: var(--ih-text);
    padding: 10px 16px;
    border-radius: var(--ih-radius-sm);
    z-index: 2000;
}
.ih-skip:focus { left: 12px; top: 12px; }

@media (max-width: 575.98px) {
    .ih-header-inner { padding: 8px 14px; }
    .ih-container { padding: 0 14px; }
    .ih-nav { margin-left: 0; width: 100%; }
    .ih-nav a, .ih-nav button { padding: 8px 10px; }
}

/* =========================================================================
   Formulários e cartões de autenticação (V2)
   -------------------------------------------------------------------------
   Um só conjunto para Sign In, Create Account e Contact. Se cada página
   tivesse o seu, as três divergiriam à terceira alteração.
   ========================================================================= */

.ih-auth-card {
    background: var(--ih-surface);
    border: 1px solid var(--ih-border);
    border-radius: var(--ih-radius-lg);
    box-shadow: var(--ih-shadow-sm);
    padding: 28px 26px;
}
.ih-auth-card h1 { margin: 0 0 6px; font-size: 1.6rem; }
.ih-auth-intro { margin: 0 0 22px; color: var(--ih-muted); font-size: .95rem; }

.ih-form-group { margin-bottom: 16px; }
.ih-label {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ih-text);
}
.ih-input {
    display: block;
    width: 100%;
    /* 44px: o alvo mínimo que se acerta com o polegar sem ampliar */
    min-height: 44px;
    padding: 10px 13px;
    font: inherit;
    font-size: 1rem;   /* 16px impede o zoom automático do iOS ao focar */
    color: var(--ih-text);
    background: var(--ih-surface);
    border: 1px solid var(--ih-border-strong);
    border-radius: var(--ih-radius-sm);
}
.ih-input::placeholder { color: var(--ih-faint); }
.ih-input:hover { border-color: var(--ih-muted); }
textarea.ih-input { min-height: 120px; resize: vertical; }

/* O consentimento: caixa e texto na mesma linha de base, e a caixa grande o
   suficiente para se acertar. */
.ih-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 6px;
}
.ih-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--ih-green);
}
.ih-check label { font-size: .92rem; line-height: 1.45; margin: 0; }

.ih-form-help { margin: 6px 0 0; font-size: .82rem; color: var(--ih-muted); }
.ih-form-error {
    margin: 6px 0 0;
    font-size: .85rem;
    color: var(--ih-danger);
    font-weight: 550;
}
/* O erro do formulário inteiro. Não depende só da cor: leva rótulo e borda,
   porque quem não distingue vermelho tem de o perceber na mesma. */
.ih-form-alerta {
    margin: 0 0 20px;
    padding: 12px 15px;
    border: 1px solid var(--ih-danger);
    border-left-width: 4px;
    border-radius: var(--ih-radius-sm);
    background: #fdf3f3;
    color: #7d1b20;
    font-size: .92rem;
}
.ih-form-aviso {
    margin: 0 0 20px;
    padding: 12px 15px;
    border: 1px solid #e6c68a;
    border-left-width: 4px;
    border-radius: var(--ih-radius-sm);
    background: var(--ih-orange-soft);
    color: var(--ih-warning);
    font-size: .92rem;
}
.ih-form-acoes { margin-top: 22px; }
.ih-form-acoes .ih-btn { width: 100%; }

.ih-auth-links {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--ih-border);
    font-size: .92rem;
    color: var(--ih-muted);
}
.ih-auth-links a {
    display: inline-block;
    padding: 4px 0;      /* 17px -> 25px: mínimo de alvo do WCAG 2.2 */
    color: var(--ih-green);
    font-weight: 600;
}

/* --- Contacto ----------------------------------------------------------- */
.ih-contact-card { }
.ih-contact-lista { list-style: none; margin: 18px 0 0; padding: 0; }
.ih-contact-lista li {
    padding: 16px 0;
    border-top: 1px solid var(--ih-border);
}
.ih-contact-lista li:last-child { padding-bottom: 0; }
.ih-contact-lista b { display: block; margin-bottom: 3px; }
.ih-contact-lista p { margin: 0 0 10px; color: var(--ih-muted); font-size: .93rem; }

@media (min-width: 576px) {
    .ih-auth-card { padding: 32px 34px; }
    .ih-form-acoes .ih-btn { width: auto; min-width: 190px; }
}