/* ============================================================
   HOMEPAY — HelpScout Knowledge Base
   Custom Stylesheet v6.0 — Definitivo
   ============================================================
   Fixes definitivos:
   - form sin overflow:hidden — permite que serp-dd salga
   - border-radius aplicado individualmente en input y btn
   - serp-dd estilizado como dropdown flotante separado
   - links del dropdown en navy, hover teal
   - cards en columnas con flex
   - footer gris claro
   - article headings sin bordes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&family=Host+Grotesk:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --hp-navy:        #04293A;
  --hp-teal:        #7FA4A5;
  --hp-sage:        #D4E1CA;
  --hp-sage-light:  #EEF3E9;
  --hp-white:       #FFFFFF;
  --hp-gray-50:     #F7F8F8;
  --hp-gray-200:    #E5E9EA;
  --hp-gray-500:    #6B7F83;
  --hp-text:        #1A3340;
  --hp-radius:      10px;
  --hp-radius-sm:   6px;
  --hp-shadow-sm:   0 1px 3px rgba(4,41,58,0.07), 0 1px 2px rgba(4,41,58,0.04);
  --hp-shadow-md:   0 4px 16px rgba(4,41,58,0.10);
  --hp-shadow-dd:   0 8px 24px rgba(4,41,58,0.12);
}

/* ── BASE ───────────────────────────────────────────────── */
html body {
  font-family: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: var(--hp-text) !important;
  background-color: var(--hp-white) !important;
  -webkit-font-smoothing: antialiased;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  font-family: 'Lexend', 'Helvetica Neue', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hp-navy) !important;
  letter-spacing: -0.02em;
}

html body ::selection {
  background: var(--hp-sage);
  color: var(--hp-navy);
}

/* ── HEADER ─────────────────────────────────────────────── */
html body header.navbar {
  background-color: var(--hp-navy) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html body header.navbar a,
html body header.navbar .navbar-brand,
html body header.navbar span {
  color: rgba(255,255,255,0.88) !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-weight: 400 !important;
}

html body header.navbar a:hover {
  color: var(--hp-sage) !important;
  text-decoration: none !important;
}

html body header.navbar .btn.btn-navbar {
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH — SOLUCIÓN DEFINITIVA v6
   
   Problema raíz de versiones anteriores:
   overflow:hidden en el form recortaba el dropdown #serp-dd.
   
   Solución: 
   - form tiene overflow:visible y position:relative
   - border-radius se aplica con clip-path o directamente
     en input (izquierda) y btn (derecha)
   - La línea divisoria entre input y btn se crea con
     un border-right en el input (color teal, opacity baja)
   - #serp-dd flota libremente por debajo del form
   ═══════════════════════════════════════════════════════════ */

/* FORM — contenedor flex, SIN overflow:hidden */
html body form#searchBar {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  overflow: visible !important;         /* CRÍTICO: permite que el dropdown salga */
  max-width: 600px;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Sin borde propio — lo tienen los hijos */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* INPUT — tiene el borde completo menos el lado derecho */
html body form#searchBar input[type="text"],
html body form#searchBar input.search-query {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  display: block !important;
  height: 48px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 15px !important;
  color: var(--hp-navy) !important;
  background-color: var(--hp-white) !important;
  /* Borde en todos los lados menos el derecho */
  border-top: 1.5px solid var(--hp-gray-200) !important;
  border-right: none !important;
  border-bottom: 1.5px solid var(--hp-gray-200) !important;
  border-left: 1.5px solid var(--hp-gray-200) !important;
  border-radius: var(--hp-radius) 0 0 var(--hp-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: unset !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

html body form#searchBar input[type="text"]:focus,
html body form#searchBar input.search-query:focus {
  border-color: var(--hp-teal) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Cuando el form tiene focus-within, resaltar también el btn */
html body form#searchBar:focus-within input[type="text"],
html body form#searchBar:focus-within input.search-query {
  border-color: var(--hp-teal) !important;
}

html body form#searchBar:focus-within button[type="submit"] {
  border-color: var(--hp-teal) !important;
  background-color: var(--hp-teal) !important;
}

/* BOTÓN — tiene borde en todos los lados menos el izquierdo */
html body form#searchBar button[type="submit"] {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 48px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  background-color: var(--hp-teal) !important;
  color: var(--hp-white) !important;
  /* Borde en todos los lados menos el izquierdo */
  border-top: 1.5px solid var(--hp-teal) !important;
  border-right: 1.5px solid var(--hp-teal) !important;
  border-bottom: 1.5px solid var(--hp-teal) !important;
  border-left: none !important;
  border-radius: 0 var(--hp-radius) var(--hp-radius) 0 !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
  vertical-align: unset !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html body form#searchBar button[type="submit"]:hover {
  background-color: var(--hp-navy) !important;
  border-color: var(--hp-navy) !important;
}

/* Icono lupa en sidebar */
html body form#searchBar button[type="submit"] i.icon-search {
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Ocultar icono lupa en home (usa texto "Cerca") */
html body form#searchBar:not(.sm) button[type="submit"] i.icon-search {
  display: none !important;
}

/* Texto "Cerca" */
html body form#searchBar button[type="submit"] span:not(.sr-only) {
  line-height: 1 !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-weight: 500 !important;
}

/* Accesibilidad: ocultar sr-only visualmente */
html body form#searchBar button[type="submit"] span.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── DROPDOWN DE SUGERENCIAS #serp-dd ───────────────────── */
/*
  Este div es position:absolute dentro del form.
  Con overflow:visible en el form, puede salir libremente.
  Lo estilizamos como un panel flotante separado del input.
*/
html body form#searchBar #serp-dd,
html body #serp-dd {
  position: absolute !important;
  top: calc(100% + 6px) !important;  /* 6px de separación del input */
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 200 !important;
  background-color: var(--hp-white) !important;
  border: 1.5px solid var(--hp-gray-200) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow-dd) !important;
  overflow: hidden !important;        /* clip radius en los hijos */
  padding: 6px 0 !important;
}

/* Lista de sugerencias */
html body #serp-dd ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #serp-dd ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--hp-gray-200) !important;
}

html body #serp-dd ul li:last-child {
  border-bottom: none !important;
}

/* Link de cada sugerencia */
html body #serp-dd ul li a {
  display: block !important;
  padding: 12px 18px !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--hp-text) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

html body #serp-dd ul li a:hover {
  background-color: var(--hp-sage-light) !important;
  color: var(--hp-navy) !important;
  text-decoration: none !important;
}

/* ── SECCIONES DE CATEGORÍA ─────────────────────────────── */
html body section.collection-category {
  margin-bottom: 52px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

html body section.collection-category > h2 {
  font-family: 'Lexend', sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: var(--hp-navy) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 12px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--hp-gray-200) !important;
  box-shadow: none !important;
  background: none !important;
  letter-spacing: -0.01em;
}

html body section.collection-category > h2 a {
  color: var(--hp-navy) !important;
  text-decoration: none !important;
}

html body section.collection-category > h2 a:hover {
  color: var(--hp-teal) !important;
}

html body section.collection-category > h2 i {
  color: var(--hp-teal) !important;
  font-size: 14px !important;
  margin-right: 5px;
}

/* ── GRID DE CARDS ──────────────────────────────────────── */
html body section.category-list,
html body .category-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body section.category-list.two-col > a.category,
html body .category-list.two-col > a.category {
  flex: 1 1 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  min-width: 200px !important;
  box-sizing: border-box !important;
}

html body section.category-list.three-col > a.category,
html body .category-list.three-col > a.category {
  flex: 1 1 calc(33.333% - 8px) !important;
  max-width: calc(33.333% - 8px) !important;
  min-width: 180px !important;
  box-sizing: border-box !important;
}

html body a.category {
  display: block !important;
  background-color: var(--hp-white) !important;
  border: 1px solid var(--hp-gray-200) !important;
  border-radius: var(--hp-radius) !important;
  padding: 22px 24px !important;
  box-shadow: var(--hp-shadow-sm) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

html body a.category:hover {
  border-color: var(--hp-teal) !important;
  box-shadow: var(--hp-shadow-md) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

html body a.category h3 {
  font-family: 'Lexend', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--hp-navy) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

html body a.category p,
html body a.category .article-count {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 13px !important;
  color: var(--hp-gray-500) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* ── FOOTER ─────────────────────────────────────────────── */
html body footer,
html body footer.center {
  background-color: var(--hp-gray-50) !important;
  border-top: 1px solid var(--hp-gray-200) !important;
  color: var(--hp-gray-500) !important;
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 13px !important;
  padding: 20px 32px !important;
}

html body footer a,
html body footer.center a {
  color: var(--hp-gray-500) !important;
  text-decoration: none !important;
}

html body footer a:hover {
  color: var(--hp-navy) !important;
}

/* ── ARTÍCULO ────────────────────────────────────────────── */
html body .article-wrap,
html body article.article,
html body .article {
  background-color: var(--hp-white) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html body h1.article-title,
html body .article h1 {
  font-family: 'Lexend', sans-serif !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  color: var(--hp-navy) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 24px !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

html body .article-body {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: var(--hp-text) !important;
}

html body .article-body p {
  margin-bottom: 16px !important;
  font-weight: 300 !important;
}

/* Headings internos — sin bordes absolutamente */
html body .article-body h1,
html body .article-body h2,
html body .article-body h3,
html body .article-body h4 {
  font-family: 'Lexend', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hp-navy) !important;
  margin: 36px 0 12px !important;
  padding: 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  letter-spacing: -0.01em;
}

html body .article-body h2 { font-size: 19px !important; }
html body .article-body h3 { font-size: 16px !important; }

html body .article-body ul,
html body .article-body ol {
  padding-left: 22px !important;
  margin-bottom: 16px !important;
}

html body .article-body li {
  margin-bottom: 6px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
}

html body .article-body strong,
html body .article-body b {
  font-weight: 500 !important;
  color: var(--hp-navy) !important;
}

html body .article-body a {
  color: var(--hp-teal) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(127,164,165,0.4) !important;
  text-underline-offset: 2px !important;
}

html body .article-body a:hover {
  color: var(--hp-navy) !important;
  text-decoration-color: var(--hp-navy) !important;
}

html body .article-body code {
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  background-color: var(--hp-sage-light) !important;
  color: var(--hp-navy) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
}

html body .article-body blockquote {
  border: none !important;
  border-left: 3px solid var(--hp-teal) !important;
  background-color: var(--hp-sage-light) !important;
  margin: 20px 0 !important;
  padding: 16px 20px !important;
  border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0 !important;
}

html body .article-body hr {
  border: none !important;
  border-top: 1px solid var(--hp-gray-200) !important;
  margin: 32px 0 !important;
}

html body .article-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--hp-radius) !important;
  border: 1px solid var(--hp-gray-200) !important;
}

html body .article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
  border: 1px solid var(--hp-gray-200) !important;
}

html body .article-body th {
  background-color: var(--hp-navy) !important;
  color: var(--hp-white) !important;
  font-family: 'Lexend', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

html body .article-body td {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--hp-gray-200) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}

html body .article-body tr:last-child td { border-bottom: none !important; }
html body .article-body tr:nth-child(even) td { background-color: var(--hp-gray-50) !important; }

/* ── SIDEBAR ────────────────────────────────────────────── */
html body .sidebar a,
html body .left-nav a {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 14px !important;
  color: var(--hp-text) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

html body .sidebar a:hover,
html body .left-nav a:hover { color: var(--hp-teal) !important; }
html body .sidebar a.active { color: var(--hp-navy) !important; font-weight: 500 !important; }

/* ── BREADCRUMB ─────────────────────────────────────────── */
html body .breadcrumb {
  font-family: 'Host Grotesk', sans-serif !important;
  font-size: 13px !important;
  color: var(--hp-gray-500) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .breadcrumb a { color: var(--hp-gray-500) !important; }
html body .breadcrumb a:hover { color: var(--hp-navy) !important; }

/* ── ACCESIBILIDAD ──────────────────────────────────────── */
html body *:focus-visible {
  outline: 2px solid var(--hp-teal) !important;
  outline-offset: 2px !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hp-gray-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hp-teal); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  html body section.category-list.three-col > a.category,
  html body .category-list.three-col > a.category {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

@media (max-width: 600px) {
  html body section.category-list.two-col > a.category,
  html body section.category-list.three-col > a.category,
  html body .category-list.two-col > a.category,
  html body .category-list.three-col > a.category {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  html body form#searchBar {
    max-width: 100% !important;
  }
}