/*
Theme Name: Movvi Theme
Theme URI: https://movvi.co
Description: Theme propio de Movvi (app de delivery hiperlocal de Ciudad Verde, Soacha). Autónomo: no depende de ningún theme padre. Trae el CSS de marca tokenizado, la capa responsive, las fuentes locales, el subset de Lucide y la lógica JS portada del Design Component original. Compatible con Elementor y con el Theme Builder de Elementor Pro. Los widgets de sección viven en el plugin "Movvi Addons".
Author: Movvi
Author URI: https://movvi.co
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: movvi
Tags: elementor, landing-page, one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/*
 * El CSS de marca NO se trae con @import: se encola desde functions.php en
 * cuatro hojas con sus dependencias declaradas (tokens → base → components
 * → responsive). Así el navegador las pide en paralelo en vez de en cadena,
 * y cada una lleva su propio cache-buster por filemtime.
 *
 * Si prefieres la variante con @import (una sola pieza, más portable pero
 * con peticiones serializadas), descomenta este bloque y quita la llamada a
 * movvi_enqueue_brand_css() en functions.php:
 *
 *   @import url('assets/css/movvi-tokens.css');
 *   @import url('assets/css/movvi-base.css');
 *   @import url('assets/css/movvi-components.css');
 *   @import url('assets/css/movvi-responsive.css');
 *
 * Lo que sigue es el "chrome" del theme: lo que necesita un theme autónomo
 * para páginas que NO son el landing (entradas, resultados de búsqueda, 404)
 * y para la cabecera y el pie de reserva, los que se usan cuando no hay una
 * plantilla de Elementor Pro publicada. Todo sale de los mismos tokens, así
 * que el blog hereda la identidad de la marca.
 */

/* ------------------------------------------------- Estructura base --- */
body{
  font-family:var(--mv-font);
  color:var(--mv-ink);
  background:var(--mv-surface);
}
.mv-main{display:block}
.mv-wrap{
  width:100%;
  max-width:var(--mv-maxw);
  margin:0 auto;
  padding:0 var(--mv-gutter);
}
.mv-wrap--narrow{max-width:780px}

/* En el landing las secciones van a sangre completa y cada widget gestiona su
   propio ancho: el <main> no debe limitar nada. */
.movvi-landing .mv-main{max-width:none;padding:0}

/* ------------------------------------- Cabecera y pie de reserva ----- */
/* Solo se pintan si no hay una cabecera/pie de Elementor Pro publicados y la
   página no es el landing (que trae sus propios widgets de nav y footer). */
.mv-site-header{
  background:var(--mv-surface-2);
  border-bottom:1px solid var(--mv-line);
}
.mv-site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:18px;padding-bottom:18px;
}
.mv-site-brand{
  display:flex;align-items:center;gap:12px;
  font-size:var(--mv-fs-h4);font-weight:var(--mv-fw-black);
  letter-spacing:-.5px;color:var(--mv-green-900);
}
.mv-site-brand img{width:38px;height:38px;object-fit:contain;display:block}
.mv-site-brand a{color:inherit}
.mv-site-brand__tag{
  font-size:var(--mv-fs-label);font-weight:var(--mv-fw-semi);
  color:var(--mv-ink-500);letter-spacing:0;
}
.mv-site-nav ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;
  margin:0;padding:0;list-style:none;
  font-size:var(--mv-fs-body-sm);font-weight:var(--mv-fw-semi);
}
.mv-site-nav a{color:var(--mv-green-700)}
.mv-site-nav .current-menu-item>a{color:var(--mv-green-500)}

.mv-site-footer{
  background:var(--mv-surface);
  border-top:2px solid var(--mv-line);
  padding-top:40px;padding-bottom:48px;
  font-size:var(--mv-fs-meta);color:var(--mv-ink-600);
}
.mv-site-footer__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.mv-site-footer .mv-site-nav ul{gap:20px;font-size:var(--mv-fs-meta)}

/* ------------------------------------------- Contenido editorial ----- */
.mv-page{padding:120px 0 80px}
.mv-page__header{margin-bottom:40px;padding-bottom:28px;border-bottom:2px solid var(--mv-line)}
.mv-page__title{
  margin:0;font-size:clamp(34px,5vw,56px);line-height:1.02;
  font-weight:var(--mv-fw-black);letter-spacing:-2px;text-wrap:pretty;
}
.mv-page__meta{
  margin-top:12px;font-size:var(--mv-fs-label);font-weight:var(--mv-fw-semi);
  color:var(--mv-ink-500);
}
.mv-entry{margin-bottom:56px}
.mv-entry__title{
  margin:0 0 10px;font-size:clamp(24px,3vw,34px);line-height:1.1;
  font-weight:var(--mv-fw-black);letter-spacing:-1px;
}
.mv-entry__title a{color:inherit}
.mv-entry__title a:hover{color:var(--mv-green-500)}
.mv-entry__thumb img{
  width:100%;height:auto;display:block;
  border-radius:var(--mv-r-xl);margin-bottom:20px;
}
.mv-prose{font-size:var(--mv-fs-body);line-height:1.7;color:var(--mv-ink-600)}
.mv-prose h2{
  font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-1px;
  font-weight:var(--mv-fw-black);color:var(--mv-ink);margin:40px 0 12px;
}
.mv-prose h3{
  font-size:var(--mv-fs-h4);font-weight:var(--mv-fw-black);
  letter-spacing:-.5px;color:var(--mv-ink);margin:32px 0 10px;
}
.mv-prose a{text-decoration:underline;text-underline-offset:3px}
.mv-prose img{max-width:100%;height:auto;border-radius:var(--mv-r-lg)}
.mv-prose blockquote{
  margin:28px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--mv-green-500);
  font-size:var(--mv-fs-lead-sm);color:var(--mv-ink);font-weight:var(--mv-fw-med);
}
.mv-prose code{
  background:var(--mv-tint);color:var(--mv-green-900);
  padding:2px 6px;border-radius:6px;font-size:.92em;
}
.mv-prose ul,.mv-prose ol{padding-left:22px}
.mv-prose li{margin-bottom:8px}

.mv-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mv-green-500);color:var(--mv-on-dark);
  font-size:var(--mv-fs-body-sm);font-weight:var(--mv-fw-bold);
  padding:14px 22px;border-radius:var(--mv-r-sm);
  box-shadow:var(--mv-sh-nav-cta);
}
.mv-btn:hover{color:var(--mv-on-dark)}

.mv-pagination{
  display:flex;gap:10px;flex-wrap:wrap;
  padding-top:28px;border-top:2px solid var(--mv-line);
  font-weight:var(--mv-fw-bold);
}
.mv-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--mv-line);border-radius:var(--mv-r-sm);
  background:var(--mv-surface-2);color:var(--mv-green-700);
}
.mv-pagination .page-numbers.current{
  background:var(--mv-green-900);border-color:var(--mv-green-900);color:var(--mv-on-dark);
}

.mv-comments{margin-top:56px;padding-top:32px;border-top:2px solid var(--mv-line)}
.mv-comments__title{
  font-size:var(--mv-fs-h4);font-weight:var(--mv-fw-black);
  letter-spacing:-.5px;margin:0 0 20px;
}
.mv-comments .comment-list{list-style:none;margin:0;padding:0}
.mv-comments .comment-list li{
  background:var(--mv-surface-2);border:1px solid var(--mv-line);
  border-radius:var(--mv-r-lg);padding:20px;margin-bottom:14px;
}
.mv-comments input[type=text],
.mv-comments input[type=email],
.mv-comments input[type=url],
.mv-comments textarea{
  width:100%;font:inherit;font-size:var(--mv-fs-body-sm);
  padding:12px 14px;border:1px solid var(--mv-line);
  border-radius:var(--mv-r-sm);background:var(--mv-surface-2);color:var(--mv-ink);
}
.mv-comments .submit{
  font:inherit;font-weight:var(--mv-fw-bold);cursor:pointer;
  background:var(--mv-green-500);color:var(--mv-on-dark);
  border:0;padding:14px 22px;border-radius:var(--mv-r-sm);
}

/* ------------------------------------------------------------- 404 --- */
.mv-404{
  min-height:70vh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:18px;
  padding:140px 0 100px;
}
.mv-404__code{
  font-size:clamp(72px,14vw,160px);line-height:.9;
  font-weight:var(--mv-fw-black);letter-spacing:-6px;color:var(--mv-green-500);
}

/* ------------------------------------------------------ Responsive --- */
@media (max-width:860px){
  .mv-site-header__inner{flex-direction:column;align-items:flex-start;gap:14px}
  .mv-site-nav ul{gap:18px}
}
@media (max-width:640px){
  .mv-page{padding:96px 0 56px}
  .mv-entry{margin-bottom:40px}
  .mv-site-footer__inner{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
 * SANGRE COMPLETA — las secciones de Movvi ocupan el 100% del ancho
 * =====================================================================
 * Cada widget imprime su propia <section> con su padding y su max-width
 * (1280px) interno. Elementor, por su parte, mete por defecto:
 *   · 10px de padding en cada columna (.elementor-element-populated)
 *   · un ancho "boxed" de 1140px en secciones y contenedores
 * Eso es el margen que se veía a los lados. Aquí se anula.
 *
 * La clase .movvi-landing la pone el plugin en cuanto detecta un widget de
 * Movvi en la página, y también la plantilla "Landing Movvi" del theme.
 * ------------------------------------------------------------------- */

/* 1. El envoltorio del propio widget, siempre. */
[class*="elementor-widget-movvi_"] > .elementor-widget-container{
  margin:0;
  padding:0;
}

/* 1 bis. Elementor separa los widgets con 20px por defecto
   (.elementor-widget:not(:last-child){margin-block-end:20px}). Entre las
   secciones de Movvi eso deja franjas en blanco: las secciones van pegadas,
   cada una trae su propio padding vertical. */
.elementor-element[class*="elementor-widget-movvi_"],
.elementor-element[class*="elementor-widget-movvi_"]:not(:last-child){
  margin:0;
  margin-block-end:0;
}

/* 2. Contenedores de Elementor en una página con secciones de Movvi:
      secciones clásicas y contenedores flex/grid (e-con) a ancho completo. */
.movvi-landing .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:none;
}
.movvi-landing .elementor-section > .elementor-container,
.movvi-landing .elementor-section{
  padding-left:0;
  padding-right:0;
}
.movvi-landing .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.movvi-landing .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
.movvi-landing .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
.movvi-landing .elementor-column-gap-wide > .elementor-column > .elementor-element-populated{
  padding:0;
}
.movvi-landing .e-con,
.movvi-landing .e-con-inner{
  --container-default-padding-left:0px;
  --container-default-padding-right:0px;
  --container-default-padding-block-start:0px;
  --container-default-padding-block-end:0px;
  --container-max-width:100%;
  --gap:0px;
  --row-gap:0px;
  --column-gap:0px;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  padding-bottom:0;
  gap:0;
  max-width:100%;
}
.movvi-landing .e-con.e-con-boxed > .e-con-inner{
  max-width:none;
}

/* 3. Y el <main> del theme no limita nada en el landing. */
.movvi-landing .mv-main,
.movvi-landing .mv-wrap{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

/* 4. Lo mismo, pero sin depender de la clase del body: se ataca solo al
      contenedor que lleva DENTRO un widget de Movvi. Así funciona también
      dentro del editor de Elementor (donde la página aún no se ha guardado)
      y en cualquier página suelta. Requiere :has(), soportado por Chrome,
      Safari y Firefox actuales; si el navegador no lo tiene, mandan las
      reglas de arriba con .movvi-landing. */
@supports selector(:has(*)){
  .elementor-section:has(.elementor-widget-wrap > [class*="elementor-widget-movvi_"]) > .elementor-container{
    max-width:none;
  }
  .elementor-section:has(.elementor-widget-wrap > [class*="elementor-widget-movvi_"]) .elementor-element-populated{
    padding:0;
  }
  .elementor-section:has(.elementor-widget-wrap > [class*="elementor-widget-movvi_"]){
    padding-top:0;
    padding-bottom:0;
  }
  .e-con:has(> .e-con-inner > [class*="elementor-widget-movvi_"]),
  .e-con:has(> [class*="elementor-widget-movvi_"]){
    --container-default-padding-left:0px;
    --container-default-padding-right:0px;
    --container-default-padding-block-start:0px;
    --container-default-padding-block-end:0px;
    --container-max-width:100%;
    --gap:0px;
    --row-gap:0px;
    --column-gap:0px;
    max-width:100%;
    padding:0;
    gap:0;
  }
  .e-con:has(> .e-con-inner > [class*="elementor-widget-movvi_"]) > .e-con-inner{
    max-width:none;
    padding:0;
    gap:0;
  }
  [class*="elementor-widget-movvi_"]{width:100%}
}