/* ------------------------------------------------------------------
   TEMA — Ana Mendes Photografy
   Alinha a loja com o site anamendesphotografy.pt:
     · Jost no texto e Gilda Display nos títulos (as fontes do site dela)
     · Rosa #F54F92 — retirado do próprio logótipo
   Carregado por cima do desenho base; sobrevive às atualizações do IMAGO.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Gilda+Display&display=swap');

:root {
    --am-rosa: #F54F92;
    --am-rosa-escuro: #E03A7E;
    --am-tinta: #000000;   /* o site dela é preto puro, não cinzento-escuro */
    --am-fundo: #F1F3F3;   /* o cinzento claro do fundo do site */
    --am-suave: #8A8A8A;
}

/* O Tailwind do CDN injeta os estilos DEPOIS deste ficheiro, por isso a classe
   bg-slate-50 do <body> ganhava. Daí o !important nas regras que a contrariam. */
body {
    /* Medido no site: Jost a peso 300 (leve), texto preto, entrelinha generosa
       e fundo #F1F3F3. Antes tinha aqui um fundo rosado que inventei — o site
       dela é mesmo um cinzento claro e frio. */
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    line-height: 1.75;
    background: var(--am-fundo) !important;
    color: var(--am-tinta);
}
/* Cartões e cabeçalho BRANCOS sobre o fundo cinzento — é o contraste que lhes dá relevo */
.bg-white { background-color: #FFFFFF; border-color: #EDEDED; }

/* As classes do Tailwind (font-bold, text-slate-800) ganham à regra do elemento,
   por isso o peso e a cor têm de ser repetidos com a mesma força — senão os títulos
   saíam a 700 e cinzentos, em vez do 400 preto do site dela. */
body.text-slate-700, body.text-slate-800 { color: var(--am-tinta); }
h1.text-slate-800, h2.text-slate-800, h3.text-slate-800,
h1.text-slate-700, h2.text-slate-700, h3.text-slate-700 { color: var(--am-tinta); }
h1.font-bold, h2.font-bold, h3.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold { font-weight: 400; }

h1, h2, h3 {
    font-family: 'Gilda Display', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* A cor de marca do IMAGO passa a ser o rosa do logótipo */
.bg-brand-500 { background-color: var(--am-rosa) !important; }
.hover\:bg-brand-600:hover { background-color: var(--am-rosa-escuro) !important; }
.text-brand-600, .text-brand-500 { color: var(--am-rosa) !important; }
.border-brand-500 { border-color: var(--am-rosa) !important; }
.bg-brand-50 { background-color: #FEF0F6 !important; }
.hover\:bg-brand-50:hover { background-color: #FEF0F6 !important; }
.focus\:border-brand-500:focus { border-color: var(--am-rosa) !important; }
.focus\:ring-brand-500\/20:focus { --tw-ring-color: rgba(245, 79, 146, 0.2) !important; }

/* Menu no estilo do site: Jost 13px, MAIÚSCULAS e bem espaçado (1.3px) */
header nav a, #navPanel a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.3px;
    font-weight: 400;
}

/* Cabeçalho branco translúcido sobre o fundo cinzento */
header.bg-white {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom-color: #EDEDED;
}

/* ---------- Rodapé (réplica do site) ---------- */
.am-footer {
    background: var(--am-fundo);   /* acompanha o fundo, senão ficava uma faixa à parte */
    border-top: 1px solid #EDEDED;
    padding: 55px 24px 25px;
    text-align: center;
    margin-top: 72px;
}
.am-footer__nome {
    font-family: 'Gilda Display', Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: #000;
    margin-bottom: 18px;
}
.am-footer__redes { display: flex; justify-content: center; gap: 18px; margin-bottom: 22px; }
.am-footer__redes a { color: #000; transition: color .2s; }
.am-footer__redes a:hover { color: var(--am-rosa); }
.am-footer__links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 26px; margin-bottom: 20px;
}
.am-footer__links a {
    font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase;
    color: #000; transition: color .2s;
}
.am-footer__links a:hover { color: var(--am-rosa); }
.am-footer__copy { font-size: 12px; color: var(--am-suave); }

@media (max-width: 640px) {
    .am-footer { padding: 40px 20px 22px; margin-top: 48px; }
    .am-footer__links { gap: 8px 18px; }
}

/* ------------------------------------------------------------------
   Largura das páginas (entrar, criar conta, recuperar, carrinho…)

   O <main> do layout é um contentor flex em COLUNA. Nesse tipo de
   contentor, um filho com `mx-auto` NÃO estica — as margens automáticas
   absorvem o espaço e o bloco encolhe até ao conteúdo: a caixa do login
   ficava com 262px em vez de 448, e igual no telemóvel.

   A regra vive aqui no CSS (e não só na marcação do layout) porque o
   theme.css é um ficheiro estático: chega ao servidor mal se extrai o
   zip, sem depender da cache das páginas compiladas.
   ------------------------------------------------------------------ */
main > *,
.page-offset > * { width: 100%; }