/* Interaction/accessibility overrides for mario-esquivel.com */
html {
  overflow-x: clip;
  scroll-padding-top: 96px;
}

body {
  overflow-x: clip;
}

section,
#top {
  scroll-margin-top: 96px;
}

body,
a,
button,
.mode-toggle,
.toggle-track,
.work-card {
  cursor: auto;
}

.nav-logo {
  text-decoration: none;
}

.nav-controls {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.js-enabled .nav-controls {
  display: flex;
}

.nav-menu-toggle,
.lang-toggle,
.mode-toggle {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'JetBrains Mono', monospace;
  color: inherit;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu-toggle,
.lang-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.75rem 0.9rem;
  text-transform: uppercase;
}

.js-enabled .lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

.lang-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.mode-toggle {
  color: var(--text);
  font: inherit;
  min-width: 44px;
}

button.mode-toggle {
  font-family: 'JetBrains Mono', monospace;
}

/* Decorative cursor is hidden until JS confirms a fine hover pointer. */
.cursor,
.cursor-ring {
  display: none;
}

body.custom-cursor-enabled,
body.custom-cursor-enabled a,
body.custom-cursor-enabled button,
body.custom-cursor-enabled .mode-toggle,
body.custom-cursor-enabled .toggle-track,
body.custom-cursor-enabled .work-card {
  cursor: none;
}

body.custom-cursor-enabled .cursor,
body.custom-cursor-enabled .cursor-ring {
  display: block;
}

.cursor[hidden],
.cursor-ring[hidden] {
  display: none !important;
}

.mode-toggle:focus-visible,
.nav-menu-toggle:focus-visible,
.lang-toggle:focus-visible,
a:focus-visible,
button:focus-visible,
.work-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.contact-link:hover,
.contact-link:focus-visible {
  color: var(--text);
}

.hero-tagline,
.work-desc,
.about-text p,
.contact-sub .mode-engineer,
.contact-sub .mode-writer,
.colophon-meta,
.skill-tag,
.work-meta,
.colophon-cities,
.signature-byline,
.author-lang-toggle {
  color: #b8b0a0;
}

.work-card[data-type="code"] .work-meta span:last-child,
.work-card[data-type="code"] .work-meta span:first-child::before,
.work-card[data-type="prose"] .work-meta span:first-child::before {
  opacity: 1;
}

.work-card[data-type="prose"] .work-meta,
.colophon-fine {
  color: #8d8375;
}

.works-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.work-card,
.syntax-panel,
.author-card,
.manifesto,
.hero-content,
.contact-row,
.colophon {
  min-width: 0;
}

.author-bio-es[hidden] {
  display: none !important;
}

.author-bio-es:not([hidden]) {
  display: block;
}

/* Comfortable WCAG-sized touch targets without changing the desktop composition. */
@media (pointer: coarse), (hover: none) {
  .cursor,
  .cursor-ring {
    display: none !important;
  }

  body,
  body *,
  a,
  button,
  .mode-toggle,
  .toggle-track,
  .work-card {
    cursor: auto !important;
  }

  a,
  button,
  .mode-toggle {
    touch-action: manipulation;
  }

  .btn,
  .contact-link,
  .author-lang-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 84px;
  }

  section,
  #top {
    scroll-margin-top: 84px;
  }

  nav {
    gap: 0.65rem;
    padding: 0.85rem 1rem;
  }

  .nav-logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .js-enabled .nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-controls {
    gap: 0.45rem;
  }

  .mode-toggle {
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
  }

  .toggle-label {
    font-size: 10px;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem 1rem 0.75rem;
    background: rgba(13, 13, 13, 0.97);
    border-bottom: 1px solid var(--border);
  }

  .js-enabled .nav-links {
    display: none;
  }

  .js-enabled .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    display: block;
    min-height: 44px;
    padding: 0.9rem 0;
  }

  .hero,
  section,
  .manifesto,
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-name {
    font-size: clamp(3rem, 18vw, 4.6rem);
  }

  .works-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card {
    padding: 2rem 1.25rem 1.6rem;
  }
}

@media (max-width: 380px) {
  nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .nav-logo {
    font-size: 11px;
  }

  .nav-menu-toggle,
  .lang-toggle {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .mode-toggle .toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mode-toggle {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .dual-syntax,
  .author-card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Respect users who request less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}