/*
Theme Name: Escusel & Asociados
Theme URI: https://escusel.pe
Author: Rosalynd Marketing
Author URI: https://rosalynd.marketing/es/
Description: Tema a medida para Escusel & Asociados, estudio juridico en Lima, Peru. Colores, tipografia y estructura segun el Brand Book del estudio (navy, terracota, crema, Lora + Poppins).
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: escusel
*/

/* ---------- Variables de marca ---------- */
:root {
  --navy: #12233F;
  --terra: #C1662F;
  --crema: #F5F0E6;
  --grafito: #23262B;
  --muted: #6B7A63;
  --linea: #DCD3BE;
  --blanco: #FFFFFF;
  --radio: 10px;
  --sombra: 0 8px 24px rgba(18, 35, 63, 0.08);
}

/* ---------- Reset basico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--grafito);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--terra);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 0.6em;
}

.content-inner, .header-inner, .footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Cuando hay sesion de WordPress iniciada, la barra negra de admin se monta
   sobre el header sticky y tapa el boton de WhatsApp. Bajamos el header
   la altura exacta de esa barra (solo lo ve quien tiene sesion abierta). */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-branding { flex-shrink: 1; min-width: 0; overflow: hidden; }
.site-branding img { max-height: 68px; width: auto; max-width: 100%; }
.site-branding .custom-logo-link { display: inline-block; }
.nav-toggle, .whatsapp-btn { flex-shrink: 0; }
.site-branding .site-title {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
}
.site-nav { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: flex-end; }
.nav-menu-wrap { display: flex; }
.nav-menu, .footer-menu {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.nav-menu a, .footer-menu a {
  color: var(--navy);
  font-weight: 500;
  font-size: 0.98rem;
}
.nav-menu a:hover, .footer-menu a:hover { color: var(--terra); text-decoration: none; }

/* ---------- Menu desplegable (sub-menus) ---------- */
.nav-menu li { position: relative; }
.nav-menu li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  flex-direction: column;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.nav-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu li.menu-item-has-children:focus-within > .sub-menu {
  display: flex;
}
.nav-menu .sub-menu li { width: 100%; }
.nav-menu .sub-menu a {
  display: block;
  padding: 8px 20px;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .nav-menu .sub-menu {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 4px 0 4px 16px;
  }
  .nav-menu li.menu-item-has-children:hover > .sub-menu,
  .nav-menu li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}
.whatsapp-btn {
  background: var(--terra);
  color: var(--blanco) !important;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.whatsapp-btn:hover { background: #A8541F; text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); display: block; }

/* ---------- Contenido de paginas ---------- */
.page-content, .single-post, .archive-wrap, .search-results-wrap {
  padding: 56px 0 72px;
}
.error-404 { padding: 90px 0; text-align: center; }
.page-title { margin-bottom: 0.6em; }
.entry-content h2 { margin-top: 1.4em; }
.entry-content > *:first-child { margin-top: 0; }
.post-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.4em; }
.post-thumb { margin-bottom: 1.6em; border-radius: var(--radio); overflow: hidden; }

.front-page .page-content { padding-top: 40px; }
.front-page .entry-content > h1:first-child,
.front-page .entry-content > h2:first-child {
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  max-width: 780px;
}

/* ---------- Bloques de Gutenberg ---------- */
.wp-block-button__link,
input[type="submit"],
button.wpforms-submit {
  background: var(--terra);
  color: var(--blanco);
  border-radius: 30px;
  padding: 13px 28px;
  font-weight: 600;
  border: none;
  font-family: 'Poppins', sans-serif;
}
.wp-block-button__link:hover { background: #A8541F; text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--navy); color: var(--blanco); }

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 8px;
}
.entry-content ul, .front-page .entry-content ul { margin: 0 0 1.8em; }
.entry-content ul + .wp-block-buttons,
.front-page .entry-content ul + .wp-block-buttons { margin-top: 28px; }

.wp-block-group.is-style-tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra);
}
.wp-block-group.is-style-tarjeta h2,
.wp-block-group.is-style-tarjeta h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.wp-block-group.is-style-tarjeta h3 a { color: inherit; text-decoration: none; }
.wp-block-group.is-style-tarjeta h3 a:hover { color: var(--terra); }
.card-accent {
  width: 44px;
  height: 8px;
  border-radius: 4px;
  background: var(--terra);
  margin-bottom: 16px;
}

/* ---------- Bloques a ancho completo (para secciones tipo "Sobre Giovanni" en navy) ---------- */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.alignfull > .wp-block-columns,
.alignfull.wp-block-columns {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 24px;
}
.alignwide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-columns img { border-radius: var(--radio); }
.has-navy-background-color { background-color: var(--navy); color: var(--crema); }
.has-navy-background-color h2, .has-navy-background-color h3 { color: var(--crema); }
.has-crema-color { color: var(--crema); }
.has-terracota-color { color: var(--terra); }

.wp-block-quote {
  border-left: 3px solid var(--terra);
  padding-left: 20px;
  margin-left: 0;
  font-style: italic;
  color: var(--navy);
}

/* ---------- Blog / archivo ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0 40px;
}

/* ---------- Formularios (WPForms hereda tipografia/color) ---------- */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea {
  border: 1px solid var(--linea) !important;
  border-radius: 6px !important;
  font-family: 'Poppins', sans-serif !important;
}
/* El boton "Envia" de WPForms trae su propio color por defecto (azul),
   controlado por variables CSS que el plugin fija por formulario. Se
   sobreescriben aqui con !important, que en la cascada gana incluso sobre
   un estilo puesto en linea por el plugin, para que el boton respete la
   marca sin depender de que alguien lo configure a mano en cada formulario. */
.wpforms-container {
  --wpforms-button-background-color: #C1662F !important;
  --wpforms-button-background-color-alt: #A8541F !important;
  --wpforms-button-border-color: #C1662F !important;
  --wpforms-button-border-color-alt: #A8541F !important;
  --wpforms-button-text-color: #FFFFFF !important;
}
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"],
.wpforms-container .wpforms-submit-container button {
  background-color: var(--terra) !important;
  border-color: var(--terra) !important;
  color: var(--blanco) !important;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover,
.wpforms-container .wpforms-submit-container button:hover {
  background-color: #A8541F !important;
  border-color: #A8541F !important;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #C9D2E0;
  margin-top: 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  padding: 48px 24px 28px;
}
.footer-brand .site-title, .footer-brand .site-title { color: var(--crema); font-size: 1.2rem; }
.footer-brand img { max-height: 84px; width: auto; max-width: 100%; margin-bottom: 10px; }
.footer-brand .custom-logo-link { display: inline-block; }
.footer-brand .tagline { color: #9FACC2; margin-top: 6px; }
.footer-social { display: flex; gap: 18px; margin-top: 18px; }
.footer-social a { color: var(--crema); display: inline-flex; }
.footer-social a svg { width: 24px; height: 24px; }
.footer-social a:hover { color: var(--terra); }
.footer-contact p { margin: 0 0 6px; }
.footer-contact a { color: var(--crema); }
.footer-contact a:hover { color: var(--terra); }
.footer-menu { flex-direction: column; gap: 10px; }
.footer-menu a { color: #C9D2E0; }
.footer-menu a:hover { color: var(--terra); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  padding: 16px 24px;
  font-size: 0.85rem;
  color: #7F8CA3;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-menu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--linea);
    display: none;
    padding: 8px 24px 20px;
  }
  .nav-menu-wrap.is-open { display: block; }
  .nav-menu { flex-direction: column; gap: 14px; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .site-branding img { max-height: 46px; }
  .whatsapp-btn { padding: 8px 14px; font-size: 0.85rem; }
  .header-inner { gap: 12px; }
}