/* =========================================================
    MOBILE (até 639px) — ajustes finos para melhorar legibilidade
    e toque, mantendo o visual do desktop intacto.
   ========================================================= */

/* Base: tipografia um pouco menor e respiros */
html, body {
    font-size: 14px;        /* ~text-sm */
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

/* Header / Navbar */
header nav {
    padding-left: 0.75rem;  /* px-3 */
    padding-right: 0.75rem;
    padding-top: 0.5rem;    /* py-2 */
    padding-bottom: 0.5rem;
}

/* Botão hambúrguer maior área de toque */
#mobile-menu-toggle {
    min-height: 36px;
    min-width: 36px;
}

/* Menu mobile (container) — já controlado por data-open no core.css,
   aqui só ajustes de layout e toques */
#mobile-menu {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.75rem;
    border-radius: 1rem;
}

#mobile-left-list > a,
#mobile-left-list > button {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

/* Painel direito (opções de Tema/Idioma) */
#mobile-right-panel {
    padding: 0.75rem;
    border-radius: 0.75rem;
}
#mobile-right-panel button {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

/* HERO */
section .justify-self-center img {
    width: 9.5rem;   /* ~w-38 (entre 36 e 40) */
    height: 9.5rem;  /* mantém proporção visual */
    border-radius: 1rem;
}

/* Título e subtítulo mais compactos */
h1 {
    font-size: 1.75rem;   /* ~text-2xl/3xl */
    line-height: 1.2;
}
[data-i18n="hero.subtitle"] {
    font-size: 1rem;      /* ~text-base */
    opacity: 0.9;
}

/* TAGS (skills) */
.hero-tags,
section .flex.flex-wrap.justify-center.gap-2 {
    row-gap: 0.375rem;
    column-gap: 0.375rem;
}

/* Cada tag: toque confortável e fonte legível */
section .flex.flex-wrap.justify-center.gap-2 > span {
    padding: 0.375rem 0.625rem;  /* px-2.5 py-1.5 */
    font-size: 0.85rem;
    border-radius: 9999px;
}

/* Limites de altura — no mobile removemos o clamp para não cortar skills */
section .flex.flex-wrap.justify-center.gap-2 {
    max-height: none !important;
    overflow: visible !important;
}

/* CTAs do herói: grid 2 col > 1 col se espaço ficar curto */
@media (max-width: 420px) {
    .hero-cta,
    .mt-6.grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Botões (Projects / Talk to me) com hit-area maior */
a[data-i18n="hero.ctaProjects"],
a[data-i18n="hero.ctaContact"] {
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.75rem;
    text-align: center;
    display: inline-block;
}

/* Seção About: melhora leitura */
#about p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Cards das seções (Works/Projects) */
#works article,
#projects article {
    border-radius: 1rem;
    padding: 1rem;          /* p-4 */
}
#works h3, #projects h3 {
    font-size: 1.1rem;
}
#works p, #projects p {
    font-size: 0.9rem;
}

/* CV — grid em 1 coluna com botões grandes */
#cv .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
}
#cv a {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    text-align: center;
    display: inline-block;
}

/* Contact — forçar quebra correta e toque confortável */
#contact .flex.flex-wrap.gap-6 {
    gap: 0.75rem;
}
#contact .inline-flex.items-center.gap-2 a {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

/* Scroll margin para âncoras (menos que no desktop) */
.scroll-mt-24 { scroll-margin-top: 5rem; }
.scroll-mt-28 { scroll-margin-top: 5.5rem; }

/* Pequenas correções de contraste em dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) #mobile-menu {
        background-color: rgba(15, 23, 42, 0.95); /* slate-900/95 */
    }
}

/* Evitar zoom nos inputs em iOS (caso adicione inputs depois) */
input, select, textarea {
    font-size: 16px;
}