/**
 * Navbar del blog - espejo del navbar de la app Rails (chita.cl / .com.co / .pe)
 *
 * Port a CSS plano de:
 *   - public/landing_clean/components/_navbar_clean.scss
 *   - public/landing_clean/components/_buttons_clean.scss (.chita-btn-outline / .chita-btn-primary-landing)
 *   - public/landing_clean/base/_variables_clean.scss (--layout-px)
 *
 * Breakpoints: >=1280 desktop | 768-1279 tablet (offcanvas) | <768 mobile (offcanvas + grid)
 * No incluye pre-nav, variantes --simple / --ccs ni dropdown de teléfono.
 */

/* ===== Variables ===== */
:root {
  --layout-px: 16px;
}

@media (min-width: 768px) {
  :root {
    --layout-px: 32px;
  }
}

@media (min-width: 1280px) {
  :root {
    --layout-px: 80px;
  }
}

/* ===== Navbar (sin bootstrap) ===== */
.chita-navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #fff;
}

/* Barra de administración de WordPress */
.admin-bar .chita-navbar {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .chita-navbar {
    top: 46px;
  }
}

@media (min-width: 1280px) {
  .chita-navbar {
    padding: 32px 0;
  }
}

.chita-navbar__container {
  margin: 0 auto;
  padding: 0px var(--layout-px) !important;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.chita-navbar__brand {
  flex-shrink: 0;
}

.chita-navbar__brand img {
  display: block;
  height: 50px !important;
  width: auto;
  /* style.css trae `img { max-width: 100% }`, que dejaba encoger el logo dentro del flex */
  max-width: none;
}

.chita-navbar__toggle {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  display: none;
  color: #241752;
}

.chita-navbar__content {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.chita-navbar .main-navigation {
  display: block;
  width: auto;
  clear: none;
}

.chita-navbar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  /* Tipografía equivalente a .title-medium.font-roboto-condensed.font-bold.uppercase (sin la clase del footer) */
  font-family: 'Roboto Condensed', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.chita-navbar__nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chita-navbar__item {
  display: inline-flex;
}

.chita-navbar__link {
  text-decoration: none;
  color: #241752;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  /* !important: style.css (tema viejo) trae `nav ul li a { padding: 10px 15px !important }` */
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
  font-family: 'Roboto Condensed', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
  white-space: nowrap;
}

.chita-navbar__link:hover,
.chita-navbar__link:focus {
  color: #241752;
  text-decoration: none;
}

.chita-navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chita-navbar__auth {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  width: 100%;
}

/* =========================
   NAVBAR MOBILE OFFCANVAS
   ========================= */

.logo-mobile {
  display: none;
}

.offcanvas-collapse.chita-navbar__panel {
  width: 100%;
}

/* ===== Dropdowns del menú (wp_nav_menu): .chita-dropdown + .is-open ===== */
.chita-dropdown {
  position: relative;
}

/* Flecha (chevron) en el link que abre el submenú */
.chita-dropdown > a {
  display: inline-flex;
  align-items: center;
}

.chita-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.3792 11.819L14.954 7.24401C15.1095 7.08864 15.3051 7.00908 15.5406 7.00534C15.7759 7.00178 15.975 7.08134 16.1378 7.24401C16.3005 7.40688 16.3818 7.60418 16.3818 7.83593C16.3818 8.06769 16.3005 8.26499 16.1378 8.42786L11.0899 13.4758C10.9847 13.5808 10.8738 13.6549 10.7572 13.6981C10.6406 13.7414 10.5146 13.763 10.3792 13.763C10.2439 13.763 10.1179 13.7414 10.0013 13.6981C9.88465 13.6549 9.77373 13.5808 9.66853 13.4758L4.62063 8.42785C4.46525 8.27229 4.38569 8.07676 4.38195 7.84127C4.37839 7.60596 4.45795 7.40688 4.62063 7.24401C4.78349 7.08134 4.9808 7 5.21255 7C5.4443 7 5.64161 7.08134 5.80447 7.24401L10.3792 11.819Z' fill='%23241752'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.chita-dropdown__menu {
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 224px;
  padding: 8px 0;
  margin: 2px 0 0;
  font-size: 16px;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
}

.chita-dropdown__menu li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chita-dropdown__menu .dropdown-item {
  display: block;
  clear: both;
  color: #241752;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
  font-family: 'Open Sans', Arial, sans-serif;
  padding: 4px 24px;
}

.chita-dropdown__menu .dropdown-item-small {
  display: block;
  width: 100% !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: normal !important;
  text-transform: none !important;
  padding: 4px 24px;
  /* !important para ganarle a `nav ul li a` de style.css; mismos valores que Rails */
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.chita-dropdown__menu .dropdown-item-small:hover {
  background-color: #F4F2FA;
  color: #241752;
  border-radius: 4px;
}

.chita-dropdown.is-open > .chita-dropdown__menu {
  display: block;
}

/* Ícono de teléfono en el item de menú #119 */
#menu-item-119 > a,
.chita-menu-phone > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#menu-item-119 > a::before,
.chita-menu-phone > a::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 30px;
  display: inline-block;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231B0F4C' d='M14.9 17.2c.3-.4 1.5-2.3 3.2-1.7 1.8.6 6.4 2.2 4.2 5C15.2 30.3-6.4 8.6 3.3 1.4c2.8-2.1 4.4 2.4 5 4.2.6 1.8-1.2 2.9-1.7 3.2C5.3 10 13.9 18.5 14.9 17.2'/%3E%3Cpath fill='%2346D646' d='M20.1 6.9c0 1.7-1.4 3.2-3.2 3.2-1.7 0-3.2-1.4-3.2-3.2s1.4-3.2 3.2-3.2c1.8 0 3.2 1.4 3.2 3.2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== Tablet + Mobile / Offcanvas (.offcanvas-collapse.open) ===== */
@media (max-width: 1279px) {
  .chita-navbar__toggle {
    display: inline-flex;
  }

  .offcanvas-collapse.chita-navbar__panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    background: #fff;

    transform: translateX(100%);
    transition: transform .2s ease;
    z-index: 1001;

    padding: 16px;
    overflow-y: auto;
  }

  .offcanvas-collapse.chita-navbar__panel.open {
    transform: translateX(0);
  }

  .chita-navbar__content {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
  }

  .chita-navbar__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .chita-navbar__actions {
    width: 100%;
    align-items: flex-start;
  }

  /* --- Panel lateral al estilo original del blog ---
     Logo arriba, lista en columna, submenús siempre desplegados
     e ítem del teléfono del ejecutivo (#menu-item-119) incluido. */
  /* Espaciado idéntico al de la app Rails: panel 16px, gap 10px entre ítems,
     links con 6px vertical y 20px lateral (ver .chita-navbar__link). */
  .chita-navbar .main-navigation {
    width: 100%;
  }

  .chita-navbar__nav {
    width: 100%;
  }

  .chita-navbar__nav > li > a {
    color: #08004e;
  }

  /* Despegable de Factoring: sin overrides en móvil, igual que Rails
     (caja con borde 1px rgba(0,0,0,.15), radio 4px, fondo blanco;
     se muestra al tocar el item padre con .is-open). */
}

/* ===== HOTFIX: el preflight no debe afectar el navbar ===== */
.navbar-chita img,
.navbar-chita svg {
  display: inline-block;
  vertical-align: middle;
}

.logo-desktop {
  display: block;
}

.logo-mobile {
  display: none;
}

@media (max-width: 1279px) {
  .logo-desktop {
    display: block;
  }

  .logo-mobile {
    display: block;
  }
}

/* Mobile: botones NO deben ser 100% en el header */
@media (max-width: 767px) {
  .chita-navbar__auth .chita-btn-outline,
  .chita-navbar__auth .chita-btn-primary-landing {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }
}

/* ===== TABLET portrait + landscape (768px - 1279px) ===== */
/* Logo left, buttons + hamburger right, single row */
@media (min-width: 768px) and (max-width: 1279px) {
  .chita-navbar__container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 40px !important;
  }

  .logo-desktop {
    order: 1;
    flex-shrink: 0;
    position: static !important;
    transform: none !important;
  }

  .offcanvas-collapse.chita-navbar__panel {
    z-index: 2001;
  }

  .chita-navbar__toggle {
    order: 3;
    position: relative;
    z-index: 2005;
    flex-shrink: 0;
  }

  .chita-navbar__auth {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    flex: 1;
    justify-content: flex-end;
  }

  .chita-navbar__auth .chita-btn-outline,
  .chita-navbar__auth .chita-btn-primary-landing {
    min-width: 120px !important;
  }
}

/* ===== MOBILE (< 768px) ===== */
@media (max-width: 767px) {
  .offcanvas-collapse .chita-btn-outline,
  .offcanvas-collapse .chita-btn-primary-landing,
  .offcanvas-collapse .chita-btn-outline--fluid,
  .offcanvas-collapse .chita-btn-primary-landing--fluid {
    width: 100% !important;
  }

  .chita-navbar__container {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 16px 16px 24px 16px !important;
  }

  .chita-navbar__toggle {
    position: relative;
    z-index: 2005;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .logo-desktop {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: static !important;
    transform: none !important;
  }

  /* Row 2: buttons side by side */
  .chita-navbar__auth {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
    align-items: center;
    width: 100%;
  }

  .chita-navbar__auth .chita-btn-outline,
  .chita-navbar__auth .chita-btn-primary-landing {
    width: 100% !important;
  }

  .offcanvas-collapse.chita-navbar__panel {
    z-index: 2001;
  }
}

/* =========================
   BOTÓN OUTLINE
   ========================= */

.chita-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  height: 40px;
  padding: 0 24px;

  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid #DB8C00;

  background: transparent;
  color: #DB8C00;

  font-family: 'Roboto Condensed', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;

  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}

.chita-btn-outline:hover {
  background: linear-gradient(109deg, #F1D250 -13.24%, #D69C46 105.52%);
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
}

.chita-btn-outline:active {
  transform: translateY(0);
}

.chita-btn-outline:focus {
  outline: none;
}

.chita-btn-outline:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 201, 76, .35);
}

.chita-btn-outline[disabled],
.chita-btn-outline.is-disabled {
  opacity: .55;
  pointer-events: none;
}

.chita-btn-outline--fluid {
  width: 100%;
}

.chita-btn-outline--no-max-width {
  max-width: none !important;
}

/* Tablet: equal sizing */
@media (min-width: 768px) and (max-width: 1024px) {
  .chita-btn-outline {
    height: 40px;
    min-width: 120px;
    max-width: 160px;
    width: 100%;
  }
}

/* Desktop: increase height */
@media (min-width: 1025px) {
  .chita-btn-outline {
    height: 48px;
    max-width: 230px;
  }
}

/* Mobile: mantiene 40px */
@media (max-width: 767px) {
  .chita-btn-outline {
    height: 40px;
    padding: 0 16px;
    min-width: 0;
  }
}

/* =========================
   BOTÓN PRIMARY
   ========================= */

.chita-btn-primary-landing {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 230px;
  padding: 0 24px;

  box-sizing: border-box;
  border-radius: 4px;

  background: linear-gradient(109deg, #F1D250 -13.24%, #D69C46 105.52%);
  color: #ffffff;

  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;

  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.chita-btn-primary-landing:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.chita-btn-primary-landing:active {
  transform: translateY(0);
  box-shadow: none;
}

.chita-btn-primary-landing:focus {
  outline: none;
}

.chita-btn-primary-landing:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 201, 76, .35);
}

.chita-btn-primary-landing[disabled],
.chita-btn-primary-landing.is-disabled {
  opacity: .6;
  pointer-events: none;
}

.chita-btn-primary-landing--fluid {
  width: 100% !important;
  max-width: none !important;
}

/* Excepción para botones del navbar que no deben ocupar todo el ancho */
.chita-btn-primary-landing--fluid.chita-btn-only-navbar {
  max-width: 230px !important;
}

.chita-btn-primary-landing--no-max-width {
  max-width: none !important;
}

/* Tablet: equal sizing */
@media (min-width: 768px) and (max-width: 1024px) {
  .chita-btn-primary-landing {
    height: 40px;
    min-width: 120px;
    max-width: 160px;
    width: 100%;
  }

  .chita-btn-primary-landing--fluid {
    max-width: none !important;
  }

  .chita-btn-primary-landing--no-max-width {
    max-width: 160px !important;
  }
}

/* Desktop: increase height */
@media (min-width: 1025px) {
  .chita-btn-primary-landing {
    height: 48px;
    max-width: 230px;
  }

  .chita-btn-primary-landing--fluid {
    max-width: none !important;
  }
}

/* Mobile: mantiene 40px */
@media (max-width: 767px) {
  .chita-btn-primary-landing {
    height: 40px;
    padding: 0 16px;
    min-width: 0;
    font-size: 14px;
  }
}