/* ------------------------------------------------------------------
   TEMA — Jorge Figueiral Fotografia
   Alinha a loja com o site jorgefigueiral.com.

   Tudo aqui foi retirado do próprio site (estilos computados no browser),
   não adivinhado:
     · Aboreto nos títulos de secção        (32px, peso 200, #A09B9B)
     · Castoro Titling nos subtítulos       (20px, peso 500, #080808)
     · League Spartan no texto e nos menus  (18px/14px, pesos 200-300)
     · Taupe #C0B0B0 — a barra do rodapé do site; é a cor de marca dele
   Carregado por cima do desenho base; sobrevive às atualizações do IMAGO.
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Castoro+Titling&family=League+Spartan:wght@200;300;400;500;600&display=swap');

:root {
    --jf-tinta:        #0F0F0F;  /* preto dos subtítulos — botões e destaques */
    --jf-menu:         #8E937C;  /* verde-sálvia da barra de menus do site */
    /* O site usa #F0EBEB a peso 200 sobre o verde — dá 2,7:1, abaixo do mínimo
       recomendado para leitura. Aqui fica branco puro e um pouco mais encorpado:
       é o mesmo aspeto, com o melhor contraste possível dentro da paleta dele. */
    --jf-menu-texto:   #FFFFFF;
    --jf-taupe:        #C0B0B0;  /* a barra do rodapé do site */
    --jf-taupe-escuro: #9A8787;  /* o mesmo tom, escurecido para se ler sobre branco */
    --jf-cinza:        #A09B9B;  /* títulos de secção do site */
    --jf-texto:        #333333;
    --jf-linha:        #E8E4E4;
}

/* O Tailwind do CDN injeta os estilos DEPOIS deste ficheiro, por isso as
   classes dele ganhavam. Daí o !important nas regras que as contrariam. */
body {
    font-family: 'League Spartan', system-ui, sans-serif;
    font-weight: 300;
    /* Fundo levemente quente, na família do taupe da marca — o branco puro deixava
       os cartões e o cabeçalho a desaparecer. O cinzento frio do IMAGO destoava
       da paleta dele, por isso o cinzento aqui puxa ao bege. */
    background: #F8F6F5 !important;
    color: var(--jf-texto);
    letter-spacing: .005em;
}

h1, h2, h3 {
    font-family: 'Aboreto', Georgia, serif;
    font-weight: 400;
}
/* As classes do Tailwind (text-slate-800, text-slate-700) ganham à regra do
   elemento, por isso a cor tem de ser repetida com a mesma força. */
h2, h3,
h2.text-slate-800, h3.text-slate-800,
h2.text-slate-700, h3.text-slate-700 { color: var(--jf-tinta); }
/* Os títulos de secção do site são num cinza quente, não a preto */
h1, h1.text-slate-800, h1.text-slate-700 { color: var(--jf-cinza); }
body.text-slate-800 { color: var(--jf-texto); }

/* Cartões BRANCOS sobre o fundo bege — é esse contraste que lhes dá relevo. */
.bg-white { background-color: #FFFFFF; border-color: var(--jf-linha); }

/* ---------- Cabeçalho: o verde-sálvia da barra de menus do site ----------
   Medido no próprio site (a faixa com "Início · Loja · Contacto"): #8E937C.
   Como o fundo passa a ser escuro, tudo o que lá vive tem de ser claro. */
header.bg-white {
    background: var(--jf-menu) !important;
    border-bottom-color: rgba(0, 0, 0, .08);
}
/* Ligações do menu, em branco e a peso 500 (o site usa 200, fino demais a 14px) */
header nav a, header .text-slate-600, header .text-slate-700 {
    color: var(--jf-menu-texto) !important;
    font-weight: 500;
}
header nav a:hover, header .hover\:bg-slate-100:hover, header .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, .16) !important;
    color: #FFFFFF !important;
}
/* Página atual: pastilha translúcida, discreta. (O sublinhado que aqui esteve
   parecia um risco solto por baixo da palavra.) */
/* Só `.bg-brand-50` — que é o que marca a página atual. Incluir aqui
   `.text-brand-600` apanhava também o "Criar conta", que ficava preenchido
   em vez de só contornado. */
header nav a.bg-brand-50 {
    background-color: rgba(255, 255, 255, .18) !important;
    color: #FFFFFF !important;
    box-shadow: none;
}
/* Nome do site (quando não há logótipo carregado) */
header .text-brand-600 { color: #FFFFFF !important; }

/* ---------- Botões do cabeçalho ----------
   O preto era duro demais ao lado do logótipo em manuscrito e do verde suave.
   Fica UMA só ação cheia — o "Log In", em marfim — e tudo o resto em contorno
   claro. Cantos ligeiramente arredondados (não em pastilha). */
header .border-brand-500,
header a[aria-label="Carrinho"] {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #FFFFFF !important;
    box-shadow: none;
}
header .border-brand-500:hover,
header a[aria-label="Carrinho"]:hover {
    background-color: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .9) !important;
}
/* "Log In": a única ação preenchida — marfim com texto verde-escuro */
header nav a.bg-brand-500 {
    background-color: #F5F2EC !important;
    color: #40453A !important;
    box-shadow: none;
}
header nav a.bg-brand-500:hover { background-color: #FFFFFF !important; }
/* O contador do carrinho tem de se ler sobre o contorno claro */
header #cartBadge { background-color: #F5F2EC !important; color: #40453A !important; }
/* Botão do menu no telemóvel */
header #navToggle { color: var(--jf-menu-texto) !important; }
/* O painel que abre no telemóvel é uma superfície branca por cima do verde */
header #navPanel { background: #FFFFFF; border-top-color: rgba(0, 0, 0, .1); }
header #navPanel a { color: var(--jf-texto) !important; }
header #navPanel a:hover { background-color: #F3F0F0 !important; color: var(--jf-tinta) !important; }

/* ---------- Cor de marca ----------
   O taupe do site é claro demais para texto branco por cima (não se leria),
   por isso os botões usam o preto dos subtítulos e o taupe fica para os
   realces — que é como o site o usa. */
.bg-brand-500                { background-color: var(--jf-tinta) !important; }
.hover\:bg-brand-600:hover   { background-color: var(--jf-taupe-escuro) !important; }
.text-brand-600,
.text-brand-500              { color: var(--jf-taupe-escuro) !important; }
.border-brand-500            { border-color: var(--jf-tinta) !important; }
.bg-brand-50                 { background-color: #F6F2F2 !important; }
.hover\:bg-brand-50:hover    { background-color: #F6F2F2 !important; }
.focus\:border-brand-500:focus { border-color: var(--jf-taupe-escuro) !important; }
.focus\:ring-brand-500\/20:focus { --tw-ring-color: rgba(154, 135, 135, .25) !important; }

/* Botões e menus na letra do site, não na do sistema */
button, .btn, nav a, a[class*="rounded-lg"] {
    font-family: 'League Spartan', system-ui, sans-serif;
    letter-spacing: .01em;
}

/* ---------- Rodapé (réplica do site) ---------- */
.jf-footer { margin-top: 72px; }

.jf-footer__topo {
    /* Acompanha o fundo da página: branco criava uma faixa a cortar o ecrã mesmo
       antes da barra taupe. No site dele o rodapé também segue o fundo. */
    background: #F8F6F5;
    border-top: 1px solid var(--jf-linha);
    padding: 52px 24px 34px;
    text-align: center;
}
.jf-footer__nome {
    font-family: 'Castoro Titling', Georgia, serif;
    font-size: 20px;
    color: #080808;
    margin-bottom: 14px;
}
.jf-footer__morada {
    font-size: 14px;
    font-weight: 300;
    color: var(--jf-texto);
    line-height: 1.9;
}
.jf-footer__morada a { color: var(--jf-texto); transition: color .2s; }
.jf-footer__morada a:hover { color: var(--jf-taupe-escuro); }

.jf-footer__menu {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 26px; margin-top: 20px;
}
.jf-footer__menu a {
    font-size: 16px; font-weight: 300; color: #080808; transition: color .2s;
}
.jf-footer__menu a:hover { color: var(--jf-taupe-escuro); }

/* A barra de baixo é o taupe do site */
.jf-footer__barra {
    background: var(--jf-taupe);
    padding: 30px 20px;
    text-align: center;
}
.jf-footer__legais {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 22px; margin-bottom: 14px;
}
.jf-footer__legais a {
    font-size: 14px; font-weight: 300; color: #686868; transition: color .2s;
}
.jf-footer__legais a:hover { color: #080808; }
.jf-footer__direitos {
    font-size: 13px; font-weight: 300; color: #5C5252; letter-spacing: .04em;
}

@media (max-width: 640px) {
    .jf-footer { margin-top: 48px; }
    .jf-footer__topo { padding: 38px 20px 26px; }
    .jf-footer__menu { gap: 6px 18px; }
    .jf-footer__legais { gap: 6px 14px; }
}