/* ================================================================
   Keytos redesign — global navbar  (.knav-* namespace)
   Matches Figma "Templates" desktop nav (node 9:3142) and the
   Design-System dropdown / tablet / mobile variants.
   Interactivity: static/js/knav-interact.js
   Breakpoints: desktop >= 1073px | tablet 768-1072px | mobile < 768px
   ================================================================ */

/* ---- Local reset scoped to the nav ----------------------------- */
.knav-root *,
.knav-root *::before,
.knav-root *::after { box-sizing: border-box; }
.knav-root ul { list-style: none; padding: 0; margin: 0; }
.knav-root p { margin: 0; }
.knav-root a,
.knav-root button { font-family: var(--font-family-secondary); }
.knav-ico { display: block; flex-shrink: 0; }

/* ---- Root / bar ------------------------------------------------- */
.knav-root {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border-default);
}
.knav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: var(--nav-height);
  /* content (logo -> contact) reaches 1280 like page sections; 48px is the min gutter, outside the 1280 */
  max-width: calc(var(--content-max) + 2 * var(--nav-pad-x));
  margin: 0 auto;
  padding: 0 var(--nav-pad-x);
}

/* ---- Logo ------------------------------------------------------- */
.knav-logo { line-height: 0; flex-shrink: 0; text-decoration: none; }
.knav-logo img { height: 48px; width: auto; display: block; }

/* ---- Centered desktop menu ------------------------------------- */
.knav-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.knav-item { position: relative; display: flex; align-items: center; gap: var(--space-4); padding-inline: 12px; }

.knav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
  padding-inline: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.knav-link:hover,
.knav-link[aria-expanded="true"] { color: var(--color-text-brand); }
.knav-link.knav-current { color: var(--color-text-brand); }

.knav-chev { transition: transform 0.2s ease; }
.knav-link[aria-expanded="true"] .knav-chev { transform: rotate(180deg); }

/* ---- Right-side controls --------------------------------------- */
.knav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
}

/* Language switcher */
.knav-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  transition: color 0.15s ease;
}
.knav-lang:hover,
.knav-lang[aria-expanded="true"] { color: var(--color-text-brand); }
.knav-lang .knav-chev { width: 12px; height: 12px; }
.knav-lang[aria-expanded="true"] .knav-chev { transform: rotate(180deg); }

.knav-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dd);
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1051;
}
.knav-lang-wrap { position: relative; display: flex; align-items: center; padding: var(--space-8); gap: var(--space-4); }
.knav-lang-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.knav-lang-menu a {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-b3);
  color: var(--color-text-primary);
  text-decoration: none;
}
.knav-lang-menu a:hover { background: var(--color-info-background); color: var(--color-info-default); }

/* Contact Us pill */
.knav-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: var(--color-btn-primary-default);
  color: var(--color-text-button-fill);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.knav-contact:hover { background: var(--color-btn-primary-hover); color: var(--color-text-button-fill); }

/* Hamburger (tablet / mobile) */
.knav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border: none;
  background: none;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.knav-burger:hover { color: var(--color-text-brand); }

/* ================================================================
   Desktop mega-dropdown
   ================================================================ */
.knav-dd {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-dd);
  padding: var(--space-24);
  display: flex;
  gap: var(--space-24);
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1049;
  width: 860px;                                      /* fixed for all tabs; sized so Partner's longest button ("Managed service providers") fits on one line with a full 20px icon */
  max-width: calc(100vw - 2 * var(--nav-pad-x));
}
.knav-dd.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* Spanish needs a little more: the width above is sized so the longest English
   button fits on one line, and the longest Spanish one ("Contactar al equipo de
   socios") wants 288px against the 278px cell 860px yields. .knav-btn span is
   nowrap, so it overflowed the button instead of wrapping. 888px applies the
   same "longest button fits on one line" rule to the Spanish labels. The mega
   menu only renders at >=1073px, where max-width (100vw - 96px = 977px) is
   still above this, so the cap never binds. */
.knav-dd:lang(es) { width: 888px; }

/* Left column: category list */
.knav-dd-left { display: flex; flex-direction: column; gap: var(--space-12); flex-shrink: 0; }
.knav-dd-label {
  font-size: var(--font-size-b4);
  line-height: var(--line-height-l1);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.knav-dd-options { display: flex; flex-direction: column; gap: var(--space-4); }
.knav-opt {
  display: grid;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.knav-opt > span { grid-area: 1 / 1; white-space: nowrap; }
/* Ghost reserves the Medium-weight (selected) width so the column doesn't
   resize when a different option becomes active. */
.knav-opt::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 500;
  height: 0;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.knav-opt:hover { background: var(--color-surface-canvas); color: var(--color-text-primary); }
.knav-opt.is-active { background: var(--color-info-background); color: var(--color-info-default); }
.knav-opt.is-active > span { font-weight: 500; }

/* Vertical divider */
.knav-dd-divider { width: 1px; background: var(--color-border-default); align-self: stretch; flex-shrink: 0; }

/* Right column */
.knav-dd-right { position: relative; flex: 1; min-width: 0; }

/* --- Product / partner preview panel --- */
.knav-prod { display: none; flex-direction: column; gap: var(--space-16); }
.knav-prod.is-visible { display: flex; }
.knav-prod-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
/* Uniform logo height, aspect locked, left-aligned */
.knav-prod-logo { height: 36px; width: auto; display: block; }
.knav-prod-tagline {
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  color: var(--color-text-secondary);
}
.knav-prod-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}
.knav-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-btn-secondary-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.knav-btn:hover { border-color: var(--color-btn-secondary-border-selected); color: var(--color-text-brand); }
.knav-btn-ico { flex-shrink: 0; }
.knav-btn-ico--filled { display: none; }
.knav-btn:hover .knav-btn-ico:not(.knav-btn-ico--filled) { display: none; }
.knav-btn:hover .knav-btn-ico--filled { display: block; }
.knav-btn span { white-space: nowrap; }
.knav-btn .knav-chev-r { color: currentColor; }
/* Reuse the down-chevron glyph, rotated to point right */
.knav-chev-r { transform: rotate(-90deg); }

/* --- Blog preview panel --- */
.knav-blog { display: none; flex-direction: column; gap: var(--space-16); width: 100%; }
.knav-blog.is-visible { display: flex; }
.knav-blog-title {
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--color-text-primary);
}
.knav-blog-featrow { display: flex; align-items: center; justify-content: space-between; }
.knav-blog-featured { font-size: var(--font-size-b4); line-height: var(--line-height-b4); color: var(--color-text-secondary); }
.knav-more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-b4); line-height: var(--line-height-b4);
  color: var(--color-link-rest); text-decoration: none;
}
.knav-more:hover { color: var(--color-text-brand); }
.knav-blog-cards { display: flex; gap: var(--space-16); }
.knav-card {
  display: flex; flex-direction: column;
  flex: 1 1 0; min-width: 0;
  background: var(--color-surface-canvas);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
}
.knav-card-img { width: 100%; aspect-ratio: 500 / 173; background: linear-gradient(135deg, #1c2438, #0071a2); }
.knav-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* flex:1 + space-between: the two cards in a row stretch to equal height, but
   .knav-card-img is aspect-locked and the body is only as tall as its content,
   so a card whose title wraps to one line while its neighbour wraps to two used
   to leave dead space under its meta row. The body now absorbs that height and
   pins the title to the top and the author/date row to the bottom, so both
   cards' meta rows line up. The existing gap still sets the minimum separation,
   so two-line-title cards are unchanged. */
.knav-card-body { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) var(--space-8) var(--space-16); }
.knav-card-title {
  font-size: var(--font-size-b3); line-height: var(--line-height-b3); color: var(--color-text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.knav-card-meta { display: flex; align-items: center; justify-content: space-between; }
.knav-card-author { display: flex; align-items: center; gap: var(--space-4); }
.knav-card-author img { height: 16px; width: auto; object-fit: contain; }
.knav-card-author span { font-size: var(--font-size-b4); line-height: var(--line-height-l1); font-weight: 600; color: var(--color-text-secondary); }
.knav-card-date { font-size: var(--font-size-b4); line-height: var(--line-height-b4); color: var(--color-text-secondary); }

/* ================================================================
   Mobile / tablet slide panel  (shared markup, CSS-switched)
   ================================================================ */
.knav-panel {
  position: fixed;
  background: var(--color-surface-card);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  max-height: 100dvh;              /* hug content; scroll only if taller than viewport */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.knav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--panel-nav-h, 64px);   /* align the X with the navbar hamburger */
  padding: 0 var(--panel-pad-x, 24px);
  flex-shrink: 0;
}
.knav-panel-head .knav-logo img { height: 32px; }
.knav-close {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-8);
  border: none; background: none; color: var(--color-text-primary);
  cursor: pointer; border-radius: var(--radius-sm); margin-left: auto;
}
.knav-close:hover { color: var(--color-text-brand); }

/* .knav-panel prefix beats the `.knav-root ul` reset (0,1,1) so padding applies */
.knav-panel .knav-acc { display: flex; flex-direction: column; padding: 0 var(--panel-pad-x, 24px); }
.knav-acc-item { border-top: 1px solid var(--color-border-default); }
.knav-acc-item:first-child { border-top: none; }
.knav-acc-trigger,
.knav-acc-top-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  width: 100%;
  padding: var(--space-16) 0;
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b3); line-height: var(--line-height-b3); font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
}
.knav-acc-trigger[aria-expanded="true"],
.knav-acc-top-link.knav-current { color: var(--color-text-brand); }
.knav-acc-item.is-open .knav-acc-trigger .knav-chev { transform: rotate(180deg); }
/* Collapsed by default; shown only when its item is open. Driving display off
   .is-open (not the [hidden] attr) because the .knav-panel-scoped rule would
   otherwise override [hidden]{display:none}. */
.knav-panel .knav-acc-sub { display: none; flex-direction: column; padding: 0 0 var(--space-8) var(--space-16); }
.knav-panel .knav-acc-item.is-open .knav-acc-sub { display: flex; }
.knav-acc-link {
  display: block;                 /* block so the vertical padding actually spaces the links */
  padding: var(--space-8) 0;
  font-size: var(--font-size-b3); line-height: var(--line-height-b3);
  color: var(--color-text-primary); text-decoration: none;
}
.knav-acc-link:hover { color: var(--color-text-brand); }
.knav-panel-contact {
  margin: var(--space-16) var(--panel-pad-x, 24px) var(--space-24);
  justify-content: center;
}

/* Overlay behind the panel */
.knav-overlay {
  position: fixed; inset: 0;
  background: rgba(24, 29, 35, 0.4);
  z-index: 1199;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.knav-overlay.is-open { opacity: 1; pointer-events: auto; }
body.knav-lock { overflow: hidden; }

/* ================================================================
   Responsive
   ================================================================ */

/* --- Desktop (>=1073): no hamburger, so the slide panel must not render --- */
@media (min-width: 1073px) {
  .knav-panel { display: none; }
}

/* --- Tablet & mobile: hide desktop menu + language, show burger --- */
@media (max-width: 1072px) {
  .knav-menu,
  .knav-lang-wrap,
  .knav-dd { display: none; }
  .knav-burger { display: inline-flex; }
}

/* --- Tablet (768-1072): top-right sheet, narrower, bottom-left radius only --- */
@media (min-width: 768px) and (max-width: 1072px) {
  .knav-bar { height: var(--nav-height-tablet); padding: 0 32px; }
  .knav-logo img { height: 40px; }

  .knav-panel {
    --panel-pad-x: 32px;
    --panel-nav-h: var(--nav-height-tablet);
    top: 0;
    right: 0;
    width: min(400px, 100vw);
    border-bottom-left-radius: var(--radius-lg);
    transform: translateY(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Shadow only while open, so the hidden (translated-up) panel doesn't bleed a shade at the top */
  .knav-panel.is-open { transform: translateY(0); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
  /* Tablet: hide the logo in the panel head (X only) */
  .knav-panel .knav-panel-head .knav-logo { display: none; }
}

/* --- Mobile (< 768): full-width top sheet, hugs content --- */
@media (max-width: 767px) {
  .knav-bar { height: var(--nav-height-mobile); padding: 0 16px; }
  .knav-logo img { height: 32px; }
  .knav-actions .knav-contact { display: none; }   /* no contact pill in mobile bar */

  .knav-panel {
    --panel-pad-x: 16px;
    --panel-nav-h: var(--nav-height-mobile);
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    transform: translateY(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Shadow only while open, so the hidden (translated-up) panel doesn't bleed a shade at the top */
  .knav-panel.is-open { transform: translateY(0); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
}