/* Global tokens */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-900: #171717;
  --color-neutral-600: #525252;
  --gradient-base: linear-gradient(148deg, #f9fafb 8.89%, #d2d6db 100.48%);
  --gradient-light: linear-gradient(176deg, #f9fafb 0.94%, #edf0f3 316.54%);

  /* Typography */
  --text-sm: 0.875rem/1.25rem; /* 14px */
  --text-base: 1rem/1.5rem; /* 16px */
  --font-primary: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  /* Dimensions */
  --footer-height: 32px;
}

/* Flex utility classes */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Global box-sizing reset */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  /* Font smoothing (cross-browser) */
  -webkit-font-smoothing: antialiased; /* WebKit (Chrome/Safari) */
  -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
  text-rendering: optimizeLegibility; /* enable kerning/ligatures when possible */
}

/* Basic reset for media elements and form controls */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Utility class for fixed-size images */
.img-fixed {
  max-width: none;
  height: auto;
  flex-shrink: 0; /* prevent shrinking inside flex containers */
}

button,
input,
textarea,
select {
  font: inherit; /* inherits the font from body */
}

li {
  list-style: none;
}

/* Basic page structure */
.page {
  max-width: 1440px;
  height: 100vh;
  margin: 0 auto;
  background: var(--gradient-base);
}

/* Footer */
.credits {
  min-height: var(--footer-height);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: clamp(16px, 9vw - 17.8px, 112px);
}

.navbar__logo-img {
  width: 112px;
  height: 32px;
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__menu {
  display: flex;
  gap: 12px;
}

.navbar__menu-container {
  display: flex;
  align-items: center;
  gap: 64px;
}

.navbar__link {
  color: var(--color-neutral-600);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px; /* small space for hover background */
}

.navbar__link:hover,
.navbar__link:focus {
  background: var(--color-neutral-200); /* highlight suave */
  border-radius: 4px;
  color: var(--color-indigo-700); /* cor de destaque */
}

.navbar__link--disabled {
  color: var(--color-neutral-200);
  pointer-events: none; /* prevent click */
  cursor: not-allowed;
}

.navbar__actions {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.navbar__button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  font-weight: 500;
  font-size: 16px;
  padding: 8px 16px;
  color: var(--color-neutral-900);
  background: var(--color-white);
}

.navbar__button:hover {
  outline: 5px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}

.navbar__button:focus {
  outline: 1px solid var(--color-neutral-500);
  background: var(--color-neutral-50);
  box-shadow: 0 0 0 4px rgba(68, 76, 231, 0.12);
}

.navbar__button--primary {
  color: var(--color-white);
  background: var(--color-indigo-700);
}

.navbar__button--primary:hover {
  background: var(--color-indigo-800);
}

.navbar__button--primary:focus {
  background: var(--color-indigo-800);
  box-shadow: 0 0 0 4px rgba(68, 76, 231, 0.12);
}

/* Desktop (>=1100px) */
@media (min-width: 1100px) {
  /* Hide toggle button */
  .navbar__toggle {
    display: none !important;
  }

  /* Hide close button */
  .navbar__close {
    display: none;
  }

  .navbar__logo-img--menu {
    display: none;
  }
}

/* Tablet (<=1100px) */
@media (max-width: 1100px) {
  .navbar {
    padding-right: 0;
  }

  .navbar__container {
    position: relative;
    width: 100%;
    padding-right: clamp(16px, 9vw - 17.8px, 112px);
  }

  .navbar__menu-container {
    display: none;
  }

  .navbar__menu-container--active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 300px; /* fixed */
    height: 100vh;
    padding-inline: clamp(16px, 9vw - 17.8px, 112px);
    padding-bottom: 24px;
    background: var(--color-white);
    gap: 0;
    z-index: 1000;
  }

  .navbar__menu-header {
    display: flex;
    justify-content: flex-end;
    align-self: stretch;

    height: 80px;
    align-items: center;
  }

  .navbar__close {
    font-size: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-neutral-600);
  }

  .navbar__logo-img--menu {
    display: none;
  }

  .navbar__menu {
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    width: 100%;
  }

  .navbar__toggle {
    display: block; /* show toggle on mobile */
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex; /* center icon */
    justify-content: center;
    align-items: center;
    border: none; /* clean look */
    background: transparent;
    cursor: pointer;
  }

  .navbar__link {
    display: block; /* make full row clickable */
    padding: 12px 0; /* vertical padding */
    min-height: 44px; /* touch-friendly size */
  }

  .navbar__link:hover,
  .navbar__link:focus {
    padding-left: 12px;
    transition: background 0.4s ease, color 0.4s ease, padding-left 0.4s ease;
  }

  .navbar__actions {
    flex-direction: column;
    margin-top: auto;
    justify-content: center;
    width: 100%;
  }

  .navbar__button {
    width: 100%;
    min-height: 44px;
  }
}

/* Mobile (<=475px) */
@media (max-width: 475px) {
  .page {
    background: var(--color-white);
  }

  .navbar__menu-container {
    width: 100%;
  }

  .navbar__logo-img--menu {
    display: block;
  }

  .navbar__menu-header {
    justify-content: space-between;
  }
}