/* CSS Maintenance Fixes - CorderoAI */

/* .reveal: la animación la controla index.html (IntersectionObserver); con movimiento reducido,
   ver el bloque prefers-reduced-motion al final. */

.menu-toggle { display: none; }
.menu-toggle[hidden] { display: none !important; }
section { scroll-margin-top: 100px; }
@media (max-width: 760px) {
  nav { flex-wrap: wrap; gap: 10px; }
  nav .links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px; }
  nav .links a:not(.nav-cta) { display: block; }
  nav.menu-ready .menu-toggle {
    display: block; margin-left: auto; min-height: 44px; padding: 8px 16px;
    border: 2px solid var(--ink); border-radius: 999px; background: #fff;
    color: var(--ink); font: inherit; font-weight: 800;
  }
  nav.menu-ready .links { display: none; }
  nav.menu-open { background: rgba(255,255,255,.97); }
  nav.menu-open .links { display: flex; flex-direction: column; align-items: stretch; }
  nav.menu-open .links a { color: var(--ink); text-shadow: none; padding: 12px; text-align: center; }
  nav.menu-open .brand { color: var(--ink); text-shadow: none; }
}

/* 1. Accessibility: High Contrast for :focus-visible */
*:focus-visible {
  outline: 3px solid var(--ink) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px #fff !important;
}

/* 2. Mobile Menu/Navigation improvements (Preparation for JS implementation) */
@media (max-width: 760px) {
  nav {
    padding: 14px 4vw; /* Slightly tighter padding on mobile */
  }
  
  /* Ensure the brand is always visible and large enough to tap */
  .brand {
    min-width: 120px;
  }

  /* El botón Menú solo se muestra cuando maintenance.js lo habilita (nav.menu-ready) */
  .menu-toggle { cursor: pointer; }
}

/* 3. Content Visibility (No JS Mode support) */
/* Ensure that if JS fails to add the .on class, the content is still readable */
/* We rely on the .reveal elements being present in HTML, but we can provide 
   a fallback opacity for extreme cases or broken transitions. */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Smooth out the parallax to avoid motion sickness */
  #scene, #bgSky, #cloudsBack, #cloudsFront, #hillWrap, .butterfly svg g {
    transition: none !important;
    transform: none !important;
  }
}

/* 4. SEO/UX: Favicon and Theme Color (Metadata via CSS) */
/* Note: meta theme-color should be in HTML <head>, but we can reinforce it here if needed */
:root {
  --theme-color: #7db6e8; /* Matching the sky color from line 44 of index.html */
}