/* ==========================================================
   LinkBio — Estilo público
   Minimalista, elegante, mobile-first e totalmente responsivo
   (celular pequeno -> celular deitado -> tablet -> desktop)
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img { max-width: 100%; }

:root { --page-max: 440px; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'Poppins'), sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

/* Dark mode automático via preferência do sistema */
html[data-mode="auto"] body {
  --bg: light-dark(var(--bg), #14110F);
}
html[data-mode="dark"] body,
html[data-mode="auto"] body {
  color-scheme: light dark;
}

/* Modo escuro manual (classe aplicada via JS) */
body.theme-dark {
  --bg: #14110F;
  --text: #F3EFEA;
  --secondary: #A79E92;
}

/* ---------- Estrutura da página ---------- */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* respiro fluido + áreas seguras (notch / barras do iPhone) */
  padding-top: calc(clamp(28px, 7vh, 72px) + env(safe-area-inset-top, 0px));
  padding-right: max(clamp(16px, 5vw, 28px), env(safe-area-inset-right, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(16px, 5vw, 28px), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
}

.hero-photo-wrap { margin-bottom: clamp(14px, 3vh, 20px); }

.hero-photo {
  /* nunca maior que 38% da largura da tela, em qualquer aparelho */
  width: min(var(--photo-size, 120px), 38vw);
  height: min(var(--photo-size, 120px), 38vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 12px 28px -12px rgba(0,0,0,0.25);
}

.hero-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: calc(min(var(--photo-size, 120px), 38vw) * 0.4);
}

.hero-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 2px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-username {
  margin: 0 0 10px;
  color: var(--secondary);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-message {
  margin: 0 0 8px;
  color: var(--secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: min(320px, 100%);
}

.hero-bio {
  margin: 0 0 8px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.6;
  max-width: min(320px, 100%);
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* ---------- Links ---------- */
.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.4vw, 14px);
  margin-top: clamp(22px, 5vh, 34px);
}

.link-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 14px);
  width: 100%;
  min-width: 0;
  padding: 10px clamp(12px, 4vw, 22px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  text-decoration: none;
  font-size: clamp(1rem, 0.9rem + 1.1vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

body:not(.theme-dark) .link-item {
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.04);
}

body.theme-dark .link-item { border-color: rgba(255,255,255,0.14); }

/* hover só em aparelhos com mouse (no toque ele "grudava" depois de clicar) */
@media (hover: hover) and (pointer: fine) {
  .link-item:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
  }
  .social-icon:hover { color: var(--accent); transform: translateY(-2px); }
}

.link-item:active { transform: scale(0.97); }

/* foco por teclado (acessibilidade) */
.link-item:focus-visible,
.social-icon:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.link-icon {
  width: clamp(44px, 13vw, 54px);
  height: clamp(44px, 13vw, 54px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.1);
}
.link-icon svg { width: 55%; height: 55%; }
.link-icon img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 50%; }
.link-icon .link-emoji { font-size: 1.5rem; line-height: 1; display: inline-flex; }

.link-title {
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.empty-hint { color: var(--secondary); font-size: 0.9rem; }

/* ---------- Redes sociais ---------- */
.socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(22px, 4.5vh, 34px);
}

.social-icon {
  /* área de toque de 44px, ícone visual de 20px */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, transform .18s ease;
}
.social-icon svg { width: 20px; height: 20px; }

/* ---------- Rodapé ---------- */
.footer {
  margin-top: auto;
  padding-top: 32px;
  color: var(--secondary);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- Toggle de tema ---------- */
.theme-toggle {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--bg);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.theme-dark .theme-toggle { border-color: rgba(255,255,255,0.14); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
body.theme-dark .theme-toggle .icon-sun { display: none; }
body.theme-dark .theme-toggle .icon-moon { display: block; }

/* ---------- Animações de entrada ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-1 { animation: rise .6s ease both; }
.fade-in-2 { animation: rise .6s ease both .12s; }
.fade-in-3 { animation: rise .6s ease both .3s; }
.fade-in-links { animation: rise .5s ease both calc(.2s + var(--d, 0s)); }

@media (prefers-reduced-motion: reduce) {
  .fade-in-1, .fade-in-2, .fade-in-3, .fade-in-links { animation: none; }
}

/* ---------- Presets de estilo ---------- */
html[data-preset="elegante"] .link-item { border-radius: 14px; }
html[data-preset="elegante"] .hero-name { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem); }

html[data-preset="dark_premium"] body { background-color: #0F0D0C; color: #F3EFEA; }
html[data-preset="dark_premium"] .link-item { border-color: rgba(255,255,255,0.12); }
html[data-preset="dark_premium"] .theme-toggle { display: none; }

/* ==========================================================
   Pontos de quebra
   ========================================================== */

/* Celulares muito pequenos (iPhone SE antigo, 320px) */
@media (max-width: 359px) {
  .hero-bio, .hero-message { font-size: 0.88rem; }
  .link-item { min-height: 56px; }
}

/* Tablet e acima: um pouco mais de largura, sem exagero */
@media (min-width: 600px) {
  :root { --page-max: 480px; }
}

/* Notebook / desktop: mantém a página compacta e elegante */
@media (min-width: 1024px) {
  :root { --page-max: 520px; }
  .page { padding-top: calc(clamp(40px, 9vh, 88px) + env(safe-area-inset-top, 0px)); }
}

/* Celular deitado / telas baixas: compacta o topo para os links aparecerem */
@media (max-height: 520px) and (orientation: landscape) {
  .page { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .hero-photo {
    width: min(var(--photo-size, 120px), 84px);
    height: min(var(--photo-size, 120px), 84px);
  }
  .hero-photo-wrap { margin-bottom: 10px; }
  .links { margin-top: 18px; gap: 10px; }
  .link-item { min-height: 56px; }
  .footer { padding-top: 20px; }
}