/* vgalli.art: styles shared by every page. Page-specific rules sit in each page's <style>.
   Palette and type: visual_identity/CLAUDE.md. Vertical unit 28px. No italic anywhere. */

/* Type: Cormorant until the Adobe Fonts web project for Silva Text exists. To switch, add the kit's
   <link> to every page and set --texto to its family name (and --corpo to 17px: Silva sets larger). */
:root {
  --screen: 100svh; --u: 28px;
  /* side margin: a gutter on small screens; from ~1280px wide the content holds a 1120px column, centred,
     while coloured bands still run edge to edge */
  --side: max(clamp(1.25rem, 6vw, 6rem), calc((100vw - 1120px) / 2));
  --tronco: #442D1A; --capim: #B2A76E; --cerrado: #D89D6F; --ceu: #131D28; --algodao: #F2ECE1;
  --header: calc(var(--u) * 3);
  --focus: var(--ceu);
  --texto: "Cormorant", Georgia, serif; --corpo: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; scroll-padding-top: var(--header); font-size: 112.5%; } /* Cormorant reads small: rem is 18px */
body { background: var(--algodao); color: var(--tronco); font-family: var(--texto); font-size: var(--corpo); line-height: var(--u); overflow-x: hidden; }
/* grain: the cream reads as cotton, not screen */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; transition: color .5s ease, border-color .5s ease, background-color .5s ease, opacity .5s ease; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header. On the home it is transparent over the photo and takes the cream ground from the first
   scroll (.scrolled); on every other page it starts solid (.solido) ---------- */
header.site { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--header); color: var(--ceu);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--side);
  transition: background-color .5s ease, box-shadow .5s ease; }
header.site.scrolled, header.site.solido { background: rgba(242,236,225,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(68,45,26,.12); }
header.site .brand { justify-self: start; width: 150px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
header.site.scrolled .brand, header.site.solido .brand { opacity: 1; visibility: visible; }
header.site .brand img { display: block; width: 100%; height: auto; }
nav.primary { display: none; gap: .75rem; justify-self: center; align-items: center; }
nav.primary a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; font-size: 1.15rem; font-weight: 500; line-height: 1.15; color: var(--ceu); }
nav.primary a:hover, nav.primary a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cerrado); text-underline-offset: 6px; }
/* encomendas (conversion 1) stays in the header at every width; on phones it sits beside the menu button */
header.site .acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .25rem; }
/* encomendas as a cloth tag: near-square corners, set like the nav */
.etiqueta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25em; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--ceu); color: var(--capim); font-family: inherit; font-size: 1.15rem; font-weight: 500; line-height: 1.15; }
.etiqueta:hover { color: var(--cerrado); }
.menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; background: none; border: 0; font-family: inherit; font-size: 1.15rem; font-weight: 500; color: var(--ceu); cursor: pointer; }
.menu-panel { --focus: var(--cerrado); position: fixed; inset: 0; z-index: 30; background: var(--ceu); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .25rem; padding: var(--side); color: var(--capim); }
.menu-panel[hidden] { display: none; }
.menu-panel a { display: flex; align-items: center; min-height: 56px; font-size: 2.1rem; line-height: 1.2; }
.menu-panel a[aria-current="page"] { color: var(--cerrado); }
/* menu open: the header drops its ground so it sits on the navy panel */
body.menu-open header.site { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open header.site .brand, body.menu-open header.site .etiqueta { visibility: hidden; }
body.menu-open .menu-btn { color: var(--capim); --focus: var(--cerrado); }
@media (max-width: 899px) { header.site .brand { width: 104px; } header.site .etiqueta { padding: 0 .8em; font-size: 1.05rem; } .menu-btn { padding: 0 .5rem; } }
@media (min-width: 900px) { nav.primary { display: flex; } .menu-btn { display: none; } }

/* ---------- shared pieces ---------- */
.cabeca h1 { font-weight: 400; font-size: clamp(2.8rem, 8vw, 5.5rem); line-height: 1; color: var(--ceu); letter-spacing: -.01em; }
.titulo { font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; color: var(--ceu); }
.ligacao { font-size: 1.15rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--cerrado); min-height: 44px; display: inline-flex; align-items: center; }
.ligacao:hover { color: var(--ceu); }

/* ---------- forms (contacto, encomendas). Labels always visible, never placeholders ---------- */
.formulario { display: flex; flex-direction: column; gap: var(--u); max-width: 36rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; border: 0; }
.campo label, .campo legend { font-size: 1.15rem; font-weight: 500; color: var(--ceu); }
.campo .ajuda { font-size: 1.05rem; line-height: 1.4; }
.campo input[type="text"], .campo input[type="email"], .campo textarea { font: inherit; font-size: 1.15rem; color: var(--tronco); background: rgba(255,255,255,.4); border: 1px solid var(--tronco); border-radius: 2px; padding: .65rem .8rem; min-height: 48px; width: 100%; }
.campo textarea { min-height: calc(var(--u) * 6); resize: vertical; line-height: 1.5; }
.campo input:focus-visible, .campo textarea:focus-visible { outline-offset: 2px; }
.opcoes { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .25rem; }
.opcoes label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1.15rem; font-weight: 400; color: var(--tronco); cursor: pointer; }
.opcoes input { width: 20px; height: 20px; accent-color: var(--ceu); }
.formulario .etiqueta { align-self: flex-start; }
.estado { font-size: 1.1rem; line-height: 1.5; }
.estado:empty { display: none; }

/* ---------- footer: on the cotton ground, her hands in black and white beside the details, set small.
   A hairline parts it from the cream pages above ---------- */
.rodape { --focus: var(--ceu); background: var(--algodao); color: var(--tronco); border-top: 1px solid rgba(68,45,26,.18); padding: calc(var(--u) * 3) var(--side) calc(var(--u) * 1.5); }
.rodape .corpo { display: grid; gap: calc(var(--u) * 1.5); align-items: end; }
.rodape figure img { display: block; width: 100%; height: auto; }
.rodape .colunas { display: grid; gap: var(--u); font-size: .95rem; line-height: 1.5; }
.rodape .colunas p { max-width: 30ch; }
.rodape .colunas a { display: inline-flex; align-items: center; min-height: 40px; }
.rodape .colunas a:hover { color: var(--ceu); text-decoration: underline; text-decoration-color: var(--cerrado); text-underline-offset: 4px; }
.rodape nav { display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
.rodape .base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--u); margin-top: calc(var(--u) * 2); padding-top: var(--u); border-top: 1px solid rgba(68,45,26,.18); font-size: .9rem; }
.rodape .base img { display: block; width: 150px; height: auto; }
@media (min-width: 900px) { .rodape .corpo { grid-template-columns: 7fr 5fr; column-gap: calc(var(--u) * 2.5); } }

/* languages, each named in its own; the current one marked as the current page is */
.idiomas { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
/* terracotta is too faint on the cream for text, so the current language is navy and underlined */
.rodape .idiomas a[aria-current="page"] { color: var(--ceu); text-decoration: underline; text-decoration-color: var(--cerrado); text-underline-offset: 4px; }
.menu-panel .idiomas { justify-content: flex-end; margin-top: calc(var(--u) * 1.5); }
.menu-panel .idiomas a { min-height: 44px; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }