/* ============================================================================
   Luara Oliveira — Portfólio
   base.css · Esqueleto compartilhado (landing + cases)
   ----------------------------------------------------------------------------
   Estratégia: um único esqueleto (nav, footer, ritmo de seção, eyebrow, tags,
   selo, botões, estados de foco) parametrizado por custom properties. A landing
   usa o tema "navy" definido em :root. Cada case sobrescreve apenas os tokens
   de cor via [data-theme], mantendo tipografia, espaçamento e componentes.
   Tokens de cor validados para WCAG 2.1 AA (texto ≥ 4.5:1, UI ≥ 3:1).
   ========================================================================== */

/* ---- 1. Reset enxuto -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; }

/* ---- 2. Tokens — tema navy (landing, padrão) ------------------------------- */
:root {
  /* Cor */
  --bg-base:        #0d1a2e;
  --bg-card:        #1a2f4a;
  --bg-hover:       #1f3a58;
  --accent-primary: #a8c4d4;   /* 9.5:1 sobre bg  */
  --accent-bright:  #c8dde8;
  --accent-secondary:#5a8fa8;  /* 4.9:1 sobre bg  */
  --text-primary:   #e8f0f5;   /* 15:1            */
  --text-body:      #7a9db5;   /* 6.1:1 bg        */
  --text-meta:      #88a0b3;   /* 6.4:1 bg        */

  /* Derivados (linhas, fundos translúcidos) */
  --line-soft:      rgba(168,196,212,.12);
  --line-hair:      rgba(168,196,212,.06);
  --tint-accent:    rgba(168,196,212,.06);
  --tint-strong:    rgba(168,196,212,.12);
  --nav-bg:         rgba(13,26,46,.82);
  --grid-rgb:       168,196,212;
  --focus:          var(--accent-bright);   /* anel de foco — override por tema */

  /* Tipografia */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Layout */
  --maxw: 860px;
  --pad-x: 8px;
  --sec-pad: 46px;     /* respiro vertical compacto entre seções */
  --radius: 2px;
}

/* ---- 3. Base de página ----------------------------------------------------- */
body {
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Textura de grid sutil (~2.5%), puramente decorativa */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--grid-rgb), .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), .025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* ---- 4. Acessibilidade: skip-link + foco ----------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  background: var(--accent-primary);
  color: var(--bg-base);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: var(--radius);
  transition: top .18s ease;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Some o anel apenas onde o mouse age; teclado sempre vê o foco */
:focus:not(:focus-visible) { outline: none; }

/* ---- 5. Navegação fixa ----------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
/* Conteúdo do nav segue a mesma coluna de leitura do restante da página
   (--maxw / --pad-x, igual a .wrap) — evita que marca e ícones fiquem
   colados às bordas físicas da tela em telas largas, e garante que os
   dois lados tenham exatamente o mesmo respiro lateral. */
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--pad-x);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__brand:hover { color: var(--accent-bright); }

.nav__sections {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__sections::-webkit-scrollbar { display: none; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-meta);
  text-decoration: none;
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: color .16s, background .16s;
}
.nav__link:hover { color: var(--accent-bright); background: var(--tint-accent); }
.nav__link[aria-current="true"] { color: var(--accent-bright); background: var(--tint-accent); }

.nav__right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* Ícones sociais */
.nav__socials { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--text-meta);
  transition: color .16s, background .16s;
}
.icon-btn:hover { color: var(--accent-bright); background: var(--tint-accent); }
.icon-btn svg { width: 17px; height: 17px; }

/* Seletor de idioma */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--text-meta);
  text-decoration: none;
  padding: 6px 7px;
  border-radius: var(--radius);
  transition: color .16s, background .16s;
}
.lang a:hover { color: var(--accent-bright); background: var(--tint-accent); }
.lang a[aria-current="true"] { color: var(--bg-base); background: var(--accent-primary); }

/* Botão flutuante "← Portfólio" -----------------------------------------------
   FAB de retorno compartilhado por páginas de case e pela página "em
   construção": fixo logo abaixo da barra e alinhado à marca "Luara Oliveira".
   Substitui o link de retorno no nav e qualquer link em fluxo. O comportamento
   responsivo (vira estático em telas estreitas) vive na seção 11. */
.case-fab {
  position: fixed; z-index: 90;
  top: 76px; left: var(--pad-x);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-primary); text-decoration: none;
  padding: 9px 16px; border-radius: 999px;
  background: var(--nav-bg); border: 1px solid var(--line-soft);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .16s, border-color .16s, color .16s;
}
.case-fab::before { content: '←'; transition: transform .18s; }
.case-fab:hover { color: var(--accent-bright); border-color: var(--accent-secondary); background: var(--bg-hover); }
.case-fab:hover::before { transform: translateX(-4px); }

/* ---- 6. Layout de seção ---------------------------------------------------- */
main { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); min-width: 0; }

.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); border-top: 1px solid var(--line-hair); }
.section:first-of-type { border-top: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  margin-bottom: 18px;
}
.section__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--text-primary);
  margin-bottom: 18px;
  text-wrap: balance;
}
.section__title em { font-style: italic; color: var(--accent-primary); }
.section__lead {
  font-size: 16.5px;
  color: var(--text-body);
  max-width: 60ch;
  line-height: 1.7;
}

/* ---- 7. Tags & selo (componentes de classificação) ------------------------- */
/* Selo = natureza do case (real / conceitual). Sempre separado das tags. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}
.selo::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.selo--real      { color: var(--accent-bright);   background: var(--tint-strong); }
.selo--conceito  { color: var(--text-meta); }

/* Tags = skills / disciplinas tratadas no case */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-body);
  border: 1px solid var(--line-soft);
  padding: 6px 11px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ---- 8. Botões / CTAs ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  color: var(--accent-primary);
  min-height: 44px;
  transition: background .16s, border-color .16s, color .16s;
}
.btn:hover { background: var(--tint-accent); border-color: var(--accent-secondary); color: var(--accent-bright); }
.btn--fill {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-base);
}
.btn--fill:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--bg-base); }
.btn svg { width: 15px; height: 15px; }

/* ---- 9. Footer ------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line-soft);
  padding: 30px var(--pad-x);
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer__inner p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-meta);
}

/* ---- 10. Utilidades -------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- 11. Responsivo -------------------------------------------------------- */
@media (max-width: 860px) {
  .nav__sections { display: none; }   /* prioriza marca, sociais e idioma */
}
@media (max-width: 640px) {
  :root { --pad-x: 36px; --sec-pad: 40px; }
  .nav__inner { gap: 10px; }
  .nav__brand { font-size: 17px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  :root { --pad-x: 28px; }
}

/* Telas estreitas: a barra vira duas linhas previsíveis —
   linha 1: marca (largura total); linha 2: sociais à esquerda + idioma à
   direita (space-between), sem sobreposição e com alvos de toque de 44px. */
@media (max-width: 560px) {
  .nav { height: auto; }
  .nav__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav__brand { width: 100%; }
  .nav__right {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 4px;
  }
  .nav__socials { gap: 0; }
  .lang {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .hero { padding-top: 126px; }

  /* Case: o botão de retorno passa a fluir no documento (não fixo),
     logo abaixo da barra — elimina qualquer sobreposição com o menu. */
  .case-fab {
    position: static;
    margin: 132px 0 4px var(--pad-x);
  }
  .case-hero { padding-top: 14px; }
}

/* Telas muito estreitas (ex.: 320px): 4 ícones de 44px + seletor de idioma
   somados excedem a largura disponível. Reduz apenas o padding interno do
   seletor de idioma e o gap entre os grupos — os ícones seguem com 44px. */
@media (max-width: 360px) {
  .lang a { padding: 6px 5px; }
  .nav__right { gap: 2px; }
}

/* ---- 12. Movimento reduzido ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}