/*
Theme Name:   ecoAlarife
Theme URI:    https://ecoalarife.com
Description:  Child theme de Blocksy para ecoAlarife — bioconstrucción, permacultura e ingeniería ecológica. Design tokens, tipografías Fraunces + Inter, hooks de Meta Pixel/CAPI, WhatsApp tracking y newsletter optin.
Author:       ecoAlarife
Author URI:   https://ecoalarife.com
Template:     blocksy
Version:      2.0.0
License:      GNU General Public License v2 or later
Text Domain:  ecoalarife-bs
*/

/* =========================================================================
   1) Design system — tokens CSS variables
   ========================================================================= */

:root {
  --eca-leaf-deep: #1f3a2b;
  --eca-leaf:      #2f5d3a;
  --eca-terra:     #b85a2a;
  --eca-sun:       #e9b54a;
  --eca-sand:      #fdf8ee;
  --eca-sand-2:    #f4ecda;
  --eca-ink:       #1a2418;
  --eca-line:      #e3dac4;
  --eca-muted:     #6b7568;
}

/* =========================================================================
   2) Tipografía base
   ========================================================================= */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--eca-ink);
  background: var(--eca-sand);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--eca-leaf-deep);
  letter-spacing: -0.005em;
}

a { color: var(--eca-leaf); }
a:hover, a:focus { color: var(--eca-leaf-deep); }

/* =========================================================================
   3) Shortcode helper [eca_eyebrow]
   ========================================================================= */

.eca-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eca-leaf);
  font-weight: 700;
}

/* =========================================================================
   4) WhatsApp CTA — botón verde con icono
   ========================================================================= */

.eca-wa-cta {
  text-align: center;
  padding: 32px 24px;
  font-family: 'Inter', system-ui, sans-serif;
}

.eca-wa-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #25D366;
  color: #fdf8ee !important;
  padding: 20px 44px;
  border-radius: 100px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.32);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  letter-spacing: .01em;
}

.eca-wa-button:hover,
.eca-wa-button:focus {
  background: #1ebe57;
  color: #fdf8ee !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.42);
  text-decoration: none !important;
}

.eca-wa-button svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.eca-wa-note {
  margin: 22px auto 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--eca-muted);
  opacity: .85;
  font-style: italic;
}

@media (max-width: 768px) {
  .eca-wa-button { font-size: 16px; padding: 16px 32px; }
}

/* =========================================================================
   5) Newsletter optin (sección al final de las pages)
   ========================================================================= */

.eca-newsletter {
  background: var(--eca-leaf-deep);
  color: var(--eca-sand);
  padding: 80px 24px;
}

.eca-newsletter__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
}

.eca-newsletter__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eca-sun);
  font-weight: 700;
  margin: 0 0 14px;
}

.eca-newsletter__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--eca-sand);
  margin: 0 0 18px;
}

.eca-newsletter__copy {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(253, 248, 238, 0.85);
  margin: 0 0 32px;
}

.eca-newsletter__form {
  display: grid;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

.eca-newsletter__form input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(253, 248, 238, 0.25);
  background: rgba(253, 248, 238, 0.08);
  color: var(--eca-sand);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.eca-newsletter__form input::placeholder { color: rgba(253, 248, 238, 0.55); }

.eca-newsletter__form input:focus {
  border-color: var(--eca-sun);
  background: rgba(253, 248, 238, 0.12);
}

.eca-newsletter__btn {
  background: var(--eca-sun);
  color: var(--eca-ink);
  border: 0;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, transform .18s ease;
  margin-top: 6px;
}

.eca-newsletter__btn:hover:not(:disabled) {
  background: #d9a234;
  transform: translateY(-2px);
}

.eca-newsletter__btn:disabled { opacity: .6; cursor: wait; }

.eca-newsletter__msg {
  margin: 16px 0 0;
  font-size: 14px;
  min-height: 1.5em;
}
.eca-newsletter__msg.is-success { color: var(--eca-sun); }
.eca-newsletter__msg.is-error   { color: #ff8a6a; }

/* =========================================================================
   6) Layout overrides — pages full-width sin padding del container GP
   ========================================================================= */

/* CRÍTICO: NO tocar .ct-container ni .ct-header en general — los usa el header.
   Solo aplicamos full-width al CONTENT de pages, no al header del theme. */

/* Article y main content: edge-to-edge */
body.page #main,
body.page main#main,
body.page article.page,
body.page article.entry,
body.page #main > article > .entry-content,
body.page article.entry > .entry-content,
body.page article.page > .entry-content,
body.page article > .entry-content,
body.page .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* El container interno del article SOLO en pages — sin tocar el header */
body.page #main > .ct-container-full,
body.page main#main > .ct-container-full,
body.page #main > .ct-container,
body.page main#main > .ct-container,
body.page .ct-main-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* .alignfull rompe el container y pega al borde del viewport */
body.page .entry-content > .alignfull,
body.page .entry-content > .wp-block-cover.alignfull,
body.page .entry-content > .wp-block-group.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.page .wp-block-cover.alignfull {
  padding: 0 !important;
}

/* Reducir altura del header de Blocksy.
   Blocksy aplica min-height: 120px en .ct-container y [data-column] del header.
   Bajamos a auto para que el header se ajuste al contenido (~60px). */
header#header.ct-header [data-row="middle"] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
header#header.ct-header .ct-container,
header#header.ct-header [data-column],
header#header.ct-header [data-items="primary"] {
  min-height: auto !important;
}

/* Quitar TODO el title bar de Blocksy en pages (.hero-section es el wrapper que contiene
   el <h1 class="page-title"> dentro de <header class="entry-header">) */
body.page .hero-section,
body.page header.entry-header,
body.page h1.page-title,
body.page .ct-page-title,
body.page .page-hero,
body.page .entry-header-meta {
  display: none !important;
}

/* -------------------------------------------------------------------------
   DROPDOWN del menu — color de marca verde profundo (en lugar de azul Blocksy)
   ------------------------------------------------------------------------- */

header.ct-header .sub-menu,
header.ct-header ul.sub-menu,
header.ct-header .menu-item-has-children > .sub-menu,
header.ct-header [data-id="menu"] .sub-menu,
header.ct-header [data-id="menu"] ul ul {
  background-color: var(--eca-leaf-deep) !important;
  border-color: rgba(253, 248, 238, 0.1) !important;
  box-shadow: 0 12px 32px rgba(31, 58, 43, 0.25) !important;
  border-radius: 8px !important;
}

header.ct-header .sub-menu a,
header.ct-header .sub-menu .ct-menu-link {
  color: var(--eca-sand) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

header.ct-header .sub-menu a:hover,
header.ct-header .sub-menu .ct-menu-link:hover {
  color: var(--eca-sun) !important;
  background-color: rgba(253, 248, 238, 0.06) !important;
}

/* =========================================================================
   7) WordPress core blocks — pequeños ajustes
   ========================================================================= */

.wp-block-button__link {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}

.wp-block-cover .wp-block-cover__inner-container {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  border-radius: 10px;
}

/* Separator subtle */
.wp-block-separator {
  border-color: var(--eca-line);
  opacity: 0.5;
}

/* =========================================================================
   7) Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: .01ms !important;
  }
}