/* Header, mobile menu, reading progress, sections and footer. */

/* header */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
  padding-top: env(safe-area-inset-top, 0px);
}
.hdr.scrolled { border-bottom-color: var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 700; font-size: 1.1875rem; letter-spacing: -.02em; }
.brand { white-space: nowrap; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; padding: 8px 14px; border-radius: 10px; opacity: .82; transition: opacity .2s, background .2s; }
.nav a:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tools button { font-size: .8125rem; font-weight: 600; }
.hdr .btn { min-height: 40px; padding: 0 16px; font-size: .875rem; }

/* language pill: highlights the active language */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px; border: 1px solid var(--line); border-radius: 999px; }
.lang-toggle span { padding: 4px 8px; border-radius: 999px; color: var(--muted); transition: background .3s, color .3s; }
.lang-toggle[data-lang="pt"] .l-pt, .lang-toggle[data-lang="en"] .l-en { background: var(--chip); color: var(--chip-fg); }

/* theme button: sun while dark, moon while light */
.theme-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); }
.theme-toggle:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .5s var(--ease-soft), opacity .3s; }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.theme-toggle[aria-pressed="true"] .i-sun { opacity: 1; transform: none; }
.theme-toggle[aria-pressed="true"] .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }

/* mobile menu */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: currentColor; transition: transform .35s var(--ease-soft); }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mmenu {
  position: fixed; z-index: 29; left: 0; right: 0; bottom: 0;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  background: var(--bg);
  padding: 16px max(20px, env(safe-area-inset-left, 0px)) 32px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .3s, transform .35s var(--ease-soft), visibility .3s;
}
.mmenu.is-open { opacity: 1; transform: none; visibility: visible; }
.mmenu a { text-decoration: none; font-size: 1.5rem; font-weight: 600; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.mmenu .btn { margin-top: 20px; border-bottom: 0; font-size: 1rem; }

/* reading progress */
.progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--cobalto), var(--menta));
}

/* sections */
main { overflow-x: clip; }
.sec { padding-block: 104px; }
.sec.flush { padding-top: 0; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px calc(28px + env(safe-area-inset-bottom, 0px)); }
.fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.fgrid p { margin: 12px 0 0; color: var(--muted); max-width: 34ch; }
.fgrid h2 { margin: 0 0 10px; font-size: .875rem; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); }
.fgrid a { text-decoration: none; }
.fgrid a:hover { color: var(--fg); }
.fbottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* very narrow phones: keep brand + three controls on one line */
@media (max-width: 380px) {
  .hdr .wrap { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 1.0625rem; gap: 8px; }
  .brand svg { width: 26px; height: 26px; }
  .tools { gap: 6px; }
  .lang-toggle span { padding: 4px 5px; }
  .theme-toggle { width: 40px; }
  .menu-btn { width: 40px; }
  .menu-btn span { left: 11px; right: 11px; }
}
@media (max-width: 960px) {
  .nav, .hdr .btn-p { display: none; }
  .menu-btn { display: inline-block; }
  .fgrid { grid-template-columns: 1fr; }
  .sec { padding-block: 72px; }
}