/*
 * nav.css — Smart Catering Child · Fase 1
 *
 * Replica fiel de .sc-nav del prototipo HTML (08-entregables/rework-prototipo/).
 *
 * Specificity strategy:
 *   - Todo vive dentro de @layer components (declarado en tokens.css).
 *   - PLAN B redundante: usamos selector body.scc-fase0 .sc-nav para subir
 *     specificity por si Elementor Kit reapareciera fuera de layers en el
 *     futuro.
 *   - Los selectores fuera del layer (body.scc-fase0 ...) actuan como red de
 *     seguridad. Si Kit no compite por estos selectores especificos (nav no
 *     existe en Elementor TB en paginas con template custom), no hay
 *     conflicto practico.
 */

@layer components {

  /* ─── Scroll progress bar ─────────────────────────────────────────── */
  /* Polish 2026-06-07: width-animation → scaleX. GPU-accelerated, sin layout
   * thrash. --scc-progress ahora es unitless 0..1 (ver assets/js/nav.js). */
  body.scc-fase0 .scc-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(var(--scc-progress, 0));
    transform-origin: left;
    background: var(--color-gold);
    z-index: 9999;
    transition: transform 0.1s linear;
    pointer-events: none;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    body.scc-fase0 .scc-scroll-progress { transition: none; }
  }

  /* ─── NAV pill ────────────────────────────────────────────────────── */
  body.scc-fase0 .sc-nav {
    position: fixed;
    top: 20px;
    left: 16px;
    right: 16px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      0 20px 50px -18px rgba(5, 4, 24, 0.22),
      0 4px 12px -4px rgba(5, 4, 24, 0.08),
      0 0 0 1px rgba(5, 4, 24, 0.06);
    color: var(--color-dark);
    will-change: transform;
    transition:
      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      top 0.35s ease,
      background 0.35s ease,
      box-shadow 0.35s ease,
      color 0.3s ease;
    font-family: var(--font-sans);
  }

  body.scc-fase0 .sc-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.6rem var(--space-6);
  }

  body.scc-fase0 .sc-nav.is-scrolled {
    top: 12px;
    background: #ffffff;
    box-shadow:
      0 24px 60px -20px rgba(5, 4, 24, 0.28),
      0 6px 16px -6px rgba(5, 4, 24, 0.10),
      0 0 0 1px rgba(5, 4, 24, 0.06);
    color: var(--color-dark);
  }

  body.scc-fase0 .sc-nav.is-top {
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 8px 28px -12px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  body.scc-fase0 .sc-nav.is-top .sc-nav__link,
  body.scc-fase0 .sc-nav.is-top .sc-nav__burger { color: #fff; }

  body.scc-fase0 .sc-nav.is-top .sc-nav__cta {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
  }
  body.scc-fase0 .sc-nav.is-top .sc-nav__cta:hover {
    background: #fff;
    color: var(--color-dark);
    border-color: #fff;
  }

  body.scc-fase0 .sc-nav.is-hidden { transform: translateY(-200%); }

  @media (max-width: 640px) {
    body.scc-fase0 .sc-nav { left: 8px; right: 8px; top: 12px; }
    body.scc-fase0 .sc-nav.is-scrolled { top: 8px; }
  }

  /* ─── Logo ────────────────────────────────────────────────────────── */
  body.scc-fase0 .sc-nav__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }
  body.scc-fase0 .sc-nav__logo img {
    height: 42px;
    width: auto;
    display: block;
  }
  body.scc-fase0 .sc-nav__logo .sc-logo--light { display: none; }
  body.scc-fase0 .sc-nav.is-top .sc-nav__logo .sc-logo--dark { display: none; }
  body.scc-fase0 .sc-nav.is-top .sc-nav__logo .sc-logo--light { display: block; }
  @media (max-width: 640px) {
    body.scc-fase0 .sc-nav__logo img { height: 36px; }
  }

  /* ─── Menu list (desktop) ─────────────────────────────────────────── */
  body.scc-fase0 .sc-nav__menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-8);
    align-items: center;
  }
  @media (min-width: 1024px) {
    body.scc-fase0 .sc-nav__menu { display: flex; }
  }

  body.scc-fase0 .sc-nav__link {
    position: relative;
    display: inline-block;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
  }
  /* Polish 2026-06-07: width-anim → scaleX. Mismo efecto visual (underline
   * crece desde left), pero GPU sin layout thrash. */
  body.scc-fase0 .sc-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
  body.scc-fase0 .sc-nav__link:hover::after,
  body.scc-fase0 .sc-nav__item.current-menu-item > .sc-nav__link::after { transform: scaleX(1); }

  /* ─── Right cluster (utility + cta + burger) ──────────────────────── */
  body.scc-fase0 .sc-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  body.scc-fase0 .sc-nav__utility {
    display: none;
  }
  @media (min-width: 1024px) {
    body.scc-fase0 .sc-nav__utility {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      color: inherit;
      opacity: 0.85;
    }
    body.scc-fase0 .sc-nav__utility a,
    body.scc-fase0 .sc-nav__utility button {
      color: inherit;
      background: none;
      border: 0;
      padding: 0;
      font: inherit;
      cursor: pointer;
      transition: color 0.2s;
      text-decoration: none;
    }
    body.scc-fase0 .sc-nav__utility a:hover,
    body.scc-fase0 .sc-nav__utility button:hover { color: var(--color-gold); }
    body.scc-fase0 .sc-nav__utility .sep { opacity: 0.35; }
    body.scc-fase0 .sc-nav__utility .is-inactive { opacity: 0.45; }
    body.scc-fase0 .sc-nav__utility .is-current { opacity: 1; }
  }

  /* ─── CTA ─────────────────────────────────────────────────────────── */
  body.scc-fase0 .sc-nav__cta {
    display: none;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-gold);
    color: #000;
    padding: 0.7rem 1.4rem;
    font-weight: var(--fw-medium);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
    border: 1px solid transparent;
  }
  body.scc-fase0 .sc-nav__cta:hover {
    background: var(--color-dark);
    color: #fff;
    transform: translateY(-2px);
  }
  body.scc-fase0 .sc-nav__cta .arrow { transition: transform 0.3s; }
  body.scc-fase0 .sc-nav__cta:hover .arrow { transform: translateX(4px); }
  @media (min-width: 768px) {
    body.scc-fase0 .sc-nav__cta { display: inline-flex; }
  }

  /* ─── Burger ──────────────────────────────────────────────────────── */
  body.scc-fase0 .sc-nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0.5rem;
    color: inherit;
    cursor: pointer;
  }
  @media (min-width: 1024px) {
    body.scc-fase0 .sc-nav__burger { display: none; }
  }

  /* ─── Mobile menu ─────────────────────────────────────────────────── */
  body.scc-fase0 .sc-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--color-dark);
    color: #fff;
    z-index: 200;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    overflow-y: auto;
    visibility: hidden;
  }
  body.scc-fase0 .sc-mobile-menu.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  body.scc-fase0 .sc-mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
  }
  body.scc-fase0 .sc-mobile-menu__header img { height: 42px; width: auto; }

  body.scc-fase0 .sc-mobile-menu__close {
    background: none;
    border: 0;
    color: #fff;
    padding: 0.5rem;
    cursor: pointer;
  }

  body.scc-fase0 .sc-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-light);
  }
  body.scc-fase0 .sc-mobile-menu__list a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
  }
  body.scc-fase0 .sc-mobile-menu__list a:hover { color: var(--color-gold); }

  body.scc-fase0 .sc-mobile-menu__lang {
    padding: 0 var(--space-6) var(--space-8);
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    opacity: 0.85;
  }
  body.scc-fase0 .sc-mobile-menu__lang a {
    color: inherit;
    text-decoration: none;
  }
  body.scc-fase0 .sc-mobile-menu__lang a.is-current { color: var(--color-gold); }

}

/* ──────────────────────────────────────────────────────────────────────
 * UNLAYERED OVERRIDES — Fase 1 fix 2026-06-03
 *
 * Estas reglas viven FUERA de @layer components a propósito. GeneratePress
 * y Elementor declaran reglas sin layer (img { height: auto }, a { color }, etc.)
 * y por la cascade de CSS, las UNLAYERED rules ganan a cualquier @layer.
 *
 * Aquí ponemos los overrides críticos sin layer, con alta specificity, para
 * fijar:
 *   - Logo del nav: height 42px / 36px mobile.
 *   - Color de texto del nav (links + CTA + utility) en estado is-top: #fff.
 *   - Color de texto del nav en estado is-scrolled: var(--color-dark).
 *   - CTA color blanco siempre que no esté en :hover dorado.
 * ────────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-nav__logo img.sc-logo--dark,
body.scc-fase0 .sc-nav__logo img.sc-logo--light {
  height: 42px;
  width: auto;
  max-width: none;
  display: block;
}
body.scc-fase0 .sc-nav__logo img.sc-logo--light { display: none; }
body.scc-fase0 .sc-nav.is-top .sc-nav__logo img.sc-logo--dark { display: none; }
body.scc-fase0 .sc-nav.is-top .sc-nav__logo img.sc-logo--light { display: block; }
@media (max-width: 640px) {
  body.scc-fase0 .sc-nav__logo img.sc-logo--dark,
  body.scc-fase0 .sc-nav__logo img.sc-logo--light { height: 36px; }
}

/* Mobile menu header logo — UNLAYERED override (same reason as nav logo).
 * Sin esto, al abrir el menu burger a viewports anchos, GP `img { height: auto; max-width: 100% }`
 * (unlayered) gana a `.sc-mobile-menu__header img { height: 42px }` (que vive en @layer components)
 * y el logo escala hasta ~1900px de ancho. */
body.scc-fase0 .sc-mobile-menu__header img {
  height: 42px;
  width: auto;
  max-width: none;
  display: block;
}

/* Nav link + CTA color states — beat GP/Elementor unlayered */
body.scc-fase0 .sc-nav a.sc-nav__link,
body.scc-fase0 .sc-nav .sc-nav__utility a,
body.scc-fase0 .sc-nav .sc-nav__utility button { color: inherit; }

body.scc-fase0 .sc-nav.is-top a.sc-nav__link,
body.scc-fase0 .sc-nav.is-top .sc-nav__utility a,
body.scc-fase0 .sc-nav.is-top .sc-nav__utility button,
body.scc-fase0 .sc-nav.is-top .sc-nav__burger { color: #fff; }

body.scc-fase0 .sc-nav.is-scrolled a.sc-nav__link,
body.scc-fase0 .sc-nav.is-scrolled .sc-nav__utility a,
body.scc-fase0 .sc-nav.is-scrolled .sc-nav__utility button,
body.scc-fase0 .sc-nav.is-scrolled .sc-nav__burger { color: var(--color-dark); }

/* WCAG AA fix 2026-06-03: texto #fff sobre dorado #d99e39 daba ratio 2.36:1.
 * Texto negro sobre dorado da 8.91:1 (AAA). is-top conserva blanco porque
 * el fondo allí es transparente sobre hero dark. */
body.scc-fase0 .sc-nav a.sc-nav__cta {
  color: #000;
  background: var(--color-gold);
}
body.scc-fase0 .sc-nav.is-top a.sc-nav__cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
body.scc-fase0 .sc-nav a.sc-nav__cta:hover {
  background: var(--color-dark);
  color: #fff;
}
body.scc-fase0 .sc-nav.is-top a.sc-nav__cta:hover {
  background: #fff;
  color: var(--color-dark);
  border-color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────
 * SERVICIOS DROPDOWN — T-0.5 (wedding-niche-landings SLICE 0)
 *
 * Desktop: hover/focus-within on .sc-nav__item--has-dropdown reveals the
 * submenu. JS (.is-open class + aria-expanded) handles keyboard + click.
 * Mobile: .sc-mobile-menu__sub — always collapsed until toggle pressed.
 * Motion: transform + opacity only, ≤200ms, ≤300ms ceiling. GPU-safe.
 * ────────────────────────────────────────────────────────────────────── */

@layer components {

  /* ─── Desktop dropdown container ─────────────────────────────────── */
  body.scc-fase0 .sc-nav__item--has-dropdown {
    position: relative;
  }

  /* Chevron toggle button */
  body.scc-fase0 .sc-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0.2rem 0.25rem;
    margin-left: 0.1rem;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease-out;
    vertical-align: middle;
  }
  body.scc-fase0 .sc-nav__item--has-dropdown.is-open > .sc-nav__dropdown-toggle {
    transform: rotate(180deg);
  }

  /* Dropdown list */
  body.scc-fase0 .sc-nav__dropdown {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow:
      0 20px 50px -18px rgba(5, 4, 24, 0.22),
      0 4px 12px -4px rgba(5, 4, 24, 0.08),
      0 0 0 1px rgba(5, 4, 24, 0.06);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.15s ease-out,
      transform 0.15s ease-out;
    z-index: 110;
  }

  /* Open state — hover (desktop) or .is-open class (JS keyboard/click) */
  body.scc-fase0 .sc-nav__item--has-dropdown:hover > .sc-nav__dropdown,
  body.scc-fase0 .sc-nav__item--has-dropdown.is-open > .sc-nav__dropdown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* Menu items */
  body.scc-fase0 .sc-nav__dropdown [role="menuitem"] {
    display: block;
    padding: 0.55rem 1.25rem;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    font-family: var(--font-sans);
    color: var(--color-dark);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    margin: 0 0.4rem;
    transition: background 0.15s ease, color 0.15s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
  body.scc-fase0 .sc-nav__dropdown [role="menuitem"]:hover,
  body.scc-fase0 .sc-nav__dropdown [role="menuitem"]:focus-visible {
    background: rgba(5, 4, 24, 0.05);
    color: var(--color-dark);
    outline-color: var(--color-gold);
  }

  /* ─── Mobile sub-list ─────────────────────────────────────────────── */
  body.scc-fase0 .sc-mobile-menu__item-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  /* Left spacer mirrors the chevron box so the "Servicios" label stays optically
   * centered (matching the other mobile menu items), not shifted left by the toggle. */
  body.scc-fase0 .sc-mobile-menu__item-row::before {
    content: "";
    flex: 0 0 calc(14px + 0.7rem);
  }

  body.scc-fase0 .sc-mobile-menu__subtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.35rem;
    cursor: pointer;
    transition: transform 0.2s ease-out, color 0.2s;
    flex-shrink: 0;
  }
  body.scc-fase0 .sc-mobile-menu__item--has-sub.is-open .sc-mobile-menu__subtoggle {
    transform: rotate(180deg);
    color: var(--color-gold);
  }

  body.scc-fase0 .sc-mobile-menu__sub {
    list-style: none;
    margin: 0.75rem 0 0.25rem;
    padding: 0 0 0 1rem;
    display: none; /* hidden by default; .is-open on parent toggles visibility */
    flex-direction: column;
    gap: 0.65rem;
  }
  body.scc-fase0 .sc-mobile-menu__item--has-sub.is-open > .sc-mobile-menu__sub {
    display: flex;
  }
  body.scc-fase0 .sc-mobile-menu__sub a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--fs-lg, 1.2rem);
    font-weight: var(--fw-regular);
    transition: color 0.2s;
  }
  body.scc-fase0 .sc-mobile-menu__sub a:hover,
  body.scc-fase0 .sc-mobile-menu__sub a:focus { color: var(--color-gold); }

  /* prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    body.scc-fase0 .sc-nav__dropdown,
    body.scc-fase0 .sc-nav__dropdown-toggle,
    body.scc-fase0 .sc-mobile-menu__subtoggle {
      transition: none;
    }
  }

}

/* Dropdown link colors — UNLAYERED override to beat GP/Elementor */
body.scc-fase0 .sc-nav__dropdown [role="menuitem"] {
  color: var(--color-dark);
}
body.scc-fase0 .sc-nav__dropdown [role="menuitem"]:hover,
body.scc-fase0 .sc-nav__dropdown [role="menuitem"]:focus-visible {
  color: var(--color-dark);
  background: rgba(5, 4, 24, 0.05);
}

/* ──────────────────────────────────────────────────────────────────────
 * Chevron toggle reset — UNLAYERED override (2026-06-29).
 *
 * GeneratePress declares an UNLAYERED `button { background:#55555e; padding:10px 20px }`
 * rule that beats our @layer components reset, painting an ugly grey box around
 * the chevron. We re-reset it here, unlayered + high specificity, so it renders
 * as a clean inline caret with no box.
 * ────────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-nav__dropdown-toggle,
body.scc-fase0 .sc-nav__dropdown-toggle:hover,
body.scc-fase0 .sc-nav__dropdown-toggle:focus,
body.scc-fase0 .sc-nav__dropdown-toggle:active {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.2rem 0.25rem;
  width: auto;
  height: auto;
  min-height: 0;
  line-height: 0;
  color: inherit;
}
body.scc-fase0 .sc-nav__dropdown-toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Mobile sub-menu chevron — same GeneratePress grey-box leak, same reset */
body.scc-fase0 .sc-mobile-menu__subtoggle,
body.scc-fase0 .sc-mobile-menu__subtoggle:hover,
body.scc-fase0 .sc-mobile-menu__subtoggle:focus,
body.scc-fase0 .sc-mobile-menu__subtoggle:active {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.35rem;
  width: auto;
  height: auto;
  min-height: 0;
  line-height: 0;
  color: rgba(255, 255, 255, 0.7);
}
body.scc-fase0 .sc-mobile-menu__subtoggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Chevron follows the same color as the nav links per state */
body.scc-fase0 .sc-nav.is-top .sc-nav__dropdown-toggle { color: #fff; }
body.scc-fase0 .sc-nav.is-scrolled .sc-nav__dropdown-toggle { color: var(--color-dark); }

/* ──────────────────────────────────────────────────────────────────────
 * Dropdown panel — glass variant over hero (2026-06-29).
 *
 * Default (is-scrolled / solid nav) keeps the white panel (see @layer above).
 * Over the hero (is-top) the bar is dark translucent glass; a pure white panel
 * clashed with it. Here the panel inherits the same glass language: dark
 * translucent fill + backdrop blur + white text, so it reads as part of the bar.
 * ────────────────────────────────────────────────────────────────────── */
body.scc-fase0 .sc-nav.is-top .sc-nav__dropdown {
  background: rgba(22, 20, 30, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.scc-fase0 .sc-nav.is-top .sc-nav__dropdown [role="menuitem"] {
  color: #fff;
}
body.scc-fase0 .sc-nav.is-top .sc-nav__dropdown [role="menuitem"]:hover,
body.scc-fase0 .sc-nav.is-top .sc-nav__dropdown [role="menuitem"]:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}