/* ============================================================
   GRUPO MADRIGAL - Custom Styles
   ============================================================ */

/* ── Base Resets ──────────────────────────────────────────── */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
  }
  body {
    overscroll-behavior: none;
  }
  main > :first-child {
    margin-top: 0 !important;
  }
  main > :last-child {
    margin-bottom: 0 !important;
  }
}

/* Hide scrollbar */
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* ── Smooth Scrolling ────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Active Nav Link ─────────────────────────────────────── */
.nav-link.active {
  background-color: #e5a93c; /* primary-container */
  color: #5e4000;            /* on-primary-container */
  font-weight: 600;
  border-radius: 0.25rem;
}

/* ── Mobile Menu Hamburger Animation ─────────────────────── */
.mobile-menu-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.mobile-menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-open .hamburger-line:nth-child(3) {
  width: 1.5rem;
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Header Scroll State ─────────────────────────────────── */
.header-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ── Scroll Reveal Animations ────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate].animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for grid children */
[data-animate]:nth-child(2) { transition-delay: 0.1s; }
[data-animate]:nth-child(3) { transition-delay: 0.2s; }
[data-animate]:nth-child(4) { transition-delay: 0.3s; }
[data-animate]:nth-child(5) { transition-delay: 0.4s; }
[data-animate]:nth-child(6) { transition-delay: 0.5s; }

/* ── Form Focus States ───────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* ── Selection Color ─────────────────────────────────────── */
::selection {
  background: rgba(255, 198, 101, 0.3);
  color: #dbe2f5;
}

/* ── Mobile gutter override ──────────────────────────────── */
@media (max-width: 640px) {
  .px-gutter {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}