/* Styles the CMS needs that the approved design does not cover.
 *
 * Kept apart from main.css on purpose: main.css is the design, byte for byte,
 * so it can be diffed against design/index.html and re-extracted if the design
 * changes. Anything the design never specified — form controls, flash
 * messages, the body of an ordinary content page — belongs here, and is built
 * from the design's own tokens so it does not look bolted on.
 */

/* ---------- O rodapé no fundo do ecrã ---------- */
/* Uma página curta deixava uma faixa da cor do fundo por baixo do rodapé — o
   rodapé acabava a meio do ecrã e a página continuava vazia até baixo. A coluna
   flexível resolve-o sem medir nada: o <main> fica com o espaço que sobra e o
   rodapé encosta ao fundo. Numa página comprida não muda nada.

   `svh` e não `vh`: no telemóvel o `vh` conta com a barra do browser recolhida,
   e a página ficava alta de mais enquanto ela estivesse à vista. */
body{min-height:100svh;display:flex;flex-direction:column;}
body > main{flex:1 0 auto;}
body > .site-footer{flex:none;}

/* ---------- Ordinary content pages ---------- */
/* The site header is fixed, so anything that is not the full-bleed hero needs
   to start below it. A medida acompanha o cabeçalho: 88px de logótipo mais
   22px de margem de cada lado dão 132px, e o mínimo aqui é isso mais uma folga
   para o primeiro título não nascer encostado. No telemóvel o logótipo tem
   58px, o cabeçalho 102px, e o mínimo desce com ele.

   Está numa variável porque não é só o .page-shell que precisa dela: o ecrã de
   entrada também passa por baixo do mesmo cabeçalho. Tinha 130px escritos à
   mão, de quando o cabeçalho era mais baixo, e o título ficou a tocar-lhe assim
   que o logótipo cresceu. Uma medida, dois sítios — e a próxima vez que o
   cabeçalho mudar, muda aqui e nada fica para trás. */
:root { --shell-top: clamp(152px, 15vh, 190px); }
@media (max-width: 900px) {
  :root { --shell-top: clamp(122px, 14vh, 150px); }
}
.page-shell { padding-top: var(--shell-top); }

.page-body h1 { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 1.5rem; }
.page-body h2 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); margin: 2.5rem 0 1rem; }
.page-body h3 { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.8vw, 22px); margin: 2rem 0 .75rem; }
.page-body p,
.page-body li { color: var(--ink); margin: 0 0 1.1rem; max-width: 68ch; }
.page-body ul,
.page-body ol { padding-left: 1.4rem; }
.page-body a { color: var(--ocean); text-decoration: underline; text-underline-offset: .18em; }
.page-body img { margin: 1.5rem 0; }
.page-body blockquote {
  margin: 1.75rem 0; padding-left: 1.25rem;
  border-left: 2px solid var(--grey); color: var(--muted);
}
.page-body table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
.page-body th,
.page-body td { border: 1px solid rgba(0, 0, 0, .12); padding: .6rem .8rem; text-align: left; }

/* ---------- Forms ---------- */
.form-narrow { max-width: 26rem; }

.field { margin-bottom: 1.25rem; }

.field label,
.form-narrow label {
  display: block; margin-bottom: .4rem;
  font-family: var(--body); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%; padding: .85rem 1rem;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  color: var(--ink); background: var(--white);
  border: 1px solid rgba(0, 0, 0, .22); border-radius: 2px;
  transition: border-color .25s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--grey); }

.field-help { font-size: .82rem; color: var(--muted); margin: .4rem 0 0; }
.field-error { font-size: .82rem; color: #a3261f; margin: .4rem 0 0; }

/* The design's .btn is an <a>; make a submit button match it exactly. */
button.btn { font-family: var(--body); }

/* ---------- Flash messages ---------- */
.flash {
  margin: 0 0 1.25rem; padding: .85rem 1.1rem; border-radius: 2px;
  font-size: .92rem; border: 1px solid transparent;
}
.flash--success { background: #eef4ee; border-color: #b9d3bb; color: #24502a; }
.flash--error   { background: #fbeeed; border-color: #e2b8b4; color: #7d201a; }
.flash--warning { background: #fbf5e8; border-color: #e3cfa2; color: #6b4d12; }

/* ---------- Keyboard focus ---------- */
/* The design defines no focus style, which leaves keyboard users with nothing
   visible over the dark photographic sections. Invisible until tabbed to, so
   it changes nothing about how the site looks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 3px;
}
.site-header a:focus-visible,
.hero a:focus-visible,
.banner a:focus-visible,
.extra-banner a:focus-visible,
.feature-banner a:focus-visible,
.site-footer a:focus-visible { outline-color: #fff; }

/* ---------- Header on pages without a hero ---------- */
/* The design's header is transparent because it sits over a dark photograph.
   On an ordinary page that leaves the light logo on white, so those pages get
   the background the design already uses once scrolled.

   O tamanho do logótipo não se toca aqui. Estava escrito duas vezes, e por ser
   `body.page-view` ganhava também ao tamanho de telemóvel do desenho: nestas
   páginas o telemóvel mostrava 67px onde a homepage mostrava 58 — maior no
   sítio onde havia menos ecrã. A medida é uma só e vive em main.css. */
body.page-view .site-header {
  background: rgba(74, 74, 73, .96);
  background: color-mix(in srgb, var(--grey) 96%, transparent);
  backdrop-filter: blur(6px);
}


/* ---------- Wordmark fallback ---------- */
/* Shown when no logo has been uploaded yet. A project starts with none, and an
   empty header reads as a broken page rather than as an unfinished setting. */
.site-header .logo-text {
  font-family: var(--display); font-weight: 500; font-size: 1.35rem;
  letter-spacing: .01em; color: #fff; white-space: nowrap;
}
.site-footer .flogo-text {
  font-family: var(--display); font-weight: 500; font-size: 1.5rem;
  color: var(--brand-yellow, #f5f2a6);
}

/* ---------- Signing in, resetting a password ---------- */
/* One task on the screen, so it goes in the middle of it. The flex column is
   what keeps the footer at the bottom of the window on these short pages
   instead of riding up under the last line of the form. Scoped to the class so
   the rest of the site, whose sections size themselves, is untouched. */
.auth-view { min-height: 100vh; display: flex; flex-direction: column; }
.auth-view #content { flex: 1 0 auto; display: grid; place-items: center; }
.auth-view .site-footer { flex-shrink: 0; }

/* Só a folga que o cabeçalho fixo pede; o centrar é da grelha acima, e um
   padding grande aqui lutava com ela e empurrava o cartão para cima. A folga é
   a mesma das outras páginas — ver --shell-top. */
.auth-shell {
  width: 100%;
  padding: var(--shell-top) var(--gutter) 70px;
}
.auth-card { width: 100%; max-width: 26rem; margin-inline: auto; }
.auth-card h1 { margin-bottom: 1.8rem; }
.auth-card .form-narrow { max-width: none; }
/* The inputs stack, so each label needs air above it or it reads as a caption
   for the field before it rather than a heading for the one after. */
.auth-card .form-narrow label { margin-top: 1.3rem; }
.auth-card .form-narrow label:first-of-type { margin-top: 0; }
.auth-card .btn { width: 100%; margin-top: 1.8rem; }
.auth-card > p { margin-top: 1.6rem; font-size: .92rem; }
.auth-card > p:first-of-type { margin-top: 0; margin-bottom: 1.8rem; color: var(--muted); }
.auth-card .field-help { margin-top: .5rem; }

/* ---------- 404: o viajante que se desviou ----------
   A página inteira muda de fundo, e não só o bloco: o creme tem de chegar ao
   rodapé, senão fica uma faixa branca por baixo do desenho em ecrãs altos. */
.error-view { background: var(--sand); }
.error-view #content { background: var(--sand); }

.lost {
  text-align: center;
  padding: var(--shell-top) var(--gutter) clamp(64px, 9vw, 120px);
}

/* O tamanho vive aqui e não nos filhos. O desenho mede-se em em, por isso
   encolher o número encolhe a figura com ele e a sobreposição aguenta-se em
   qualquer largura sem uma media query por cada passo. */
.lost-art {
  position: relative;
  display: inline-block;
  /* Uma só expressão, sem ponto de corte. Com um clamp de vw puro o número
     ficava minúsculo no telemóvel, e com uma media query a corrigi-lo havia um
     degrau: 150px aos 560 e 120px aos 561, encolher ao alargar o ecrã. O
     offset em px dá o tamanho mínimo decente e o vw dá o crescimento. */
  font-size: clamp(110px, calc(86px + 13.2vw), 290px);
  line-height: .86;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.lost-code {
  /* A Urbanist e não a Unbounded. O número do mockup é estreito e de
     terminais rectos; a fonte dos títulos é larga e arredondada, e com ela
     o "404" ficava com metade da largura do ecrã. */
  font-family: var(--body);
  font-weight: 700;
  font-size: 1em;
  color: var(--grey);
  letter-spacing: -.01em;
  display: block;
}
/* Por cima do número e a transbordar por cima dele. O desenho tem os panos
   preenchidos a branco, e é esse branco que tapa o algarismo do meio e deixa
   só o anel do zero à vista — que é o efeito do mockup. */
.lost-figure {
  position: absolute;
  left: 50%;
  bottom: -.17em;
  translate: -50% 0;
  width: auto;
  height: 1.62em;
  max-width: none;
  pointer-events: none;
}

.lost-text {
  font-family: var(--body);
  font-size: clamp(.78rem, 1.5vw, .95rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.75;
  color: var(--grey);
  /* A medida é o que parte a frase, e não um <br>: em português cai em duas
     linhas, e nas outras línguas cai onde tiver de cair. Em px e não em ch
     porque o ch mede o "0" sem o letter-spacing, e com .16em a conta sai
     sempre curta. */
  max-width: min(560px, 92vw);
  /* Equilibra as linhas em vez de encher a primeira. Em português isso faz a
     quebra cair na vírgula, que é onde o mockup a põe, e nas outras línguas
     cai onde a frase delas pedir — que é a razão de não haver aqui um <br>. */
  text-wrap: balance;
  margin: 0 auto clamp(26px, 4vw, 42px);
}

.lost-cta { margin: 0; }

/* Num telefone o desenho precisa de mais altura relativa, senão o número
   ocupa a largura toda e a figura fica um boneco pequeno em cima dele. */
@media (max-width: 560px) {
  .lost-figure { height: 1.78em; }
  .lost-text { letter-spacing: .12em; max-width: 34ch; }
}

/* A ligação para a política, dentro do aviso de cookies. Sublinhada e na
   mesma linha do texto: é a continuação da frase que acaba de explicar o que
   se faz com os dados, e não uma terceira acção a competir com os botões. */
.cookie-more { text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.cookie-more:hover, .cookie-more:focus-visible { color: var(--muted); }