/*
 * Home's approved navigation on all public interior pages (ES and EN).
 * The HTML and behavior are NOT copies: they are shared through
 * partials/home-modern-header.blade.php + site-navigation.js.
 * Geometry, typographic hierarchy and responsive breakpoints mirror
 * the existing official home CSS; the home component remains the single navigation source.
 */
.site-interior-shared-nav header.site-top{
  width:100%;
  max-width:none;
  min-height:86px;
  position:sticky;
  top:0;
  z-index:50;
  margin:0;
  padding-inline:max(5vw,calc((100vw - 1430px)/2 + 82px));
  display:flex;
  gap:clamp(12px,2vw,29px);
  align-items:center;
  justify-content:space-between;
  /* Match the approved home's header metrics rather than site.css body typography. */
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:normal;
  color:#FFF;
  background:#0B0A17;
  border-bottom:1px solid rgba(176,138,255,.15);
  box-shadow:0 8px 24px rgba(4,5,20,.13);
}
.site-interior-shared-nav header.site-top .brand,
.site-interior-shared-nav header.site-top .brand{
  position:relative;
  min-width:0;
  margin:0;
  padding:0;
  flex:0 1 auto;
  align-items:center;
  display:inline-flex;
}
.site-interior-shared-nav header.site-top .brand img,
.site-interior-shared-nav header.site-top .brand img{
  display:block;
  width:133px;
  height:auto;
  max-width:100%;
}
.site-interior-shared-nav header.site-top .nav-links,
.site-interior-shared-nav header.site-top .nav-links{
  display:flex;
  flex:1;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:clamp(11px,1.45vw,24px);
}
.site-interior-shared-nav header.site-top .nav-links a,
.site-interior-shared-nav header.site-top .nav-links a{
  display:inline-block;
  white-space:nowrap;
  color:#F2EDF9;
  font-size:clamp(11.5px,.91vw,13px);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:normal;
}
.site-interior-shared-nav header.site-top .nav-links a:hover,
.site-interior-shared-nav header.site-top .nav-links a:hover,
.site-interior-shared-nav header.site-top .nav-links a:focus-visible,
.site-interior-shared-nav header.site-top .nav-links a:focus-visible{
  color:#CDBBFF;
}
.site-interior-shared-nav header.site-top .sample-nav-actions,
.site-interior-shared-nav header.site-top .sample-nav-actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:clamp(10px,1vw,17px);
}
.site-interior-shared-nav header.site-top .sample-language-link,
.site-interior-shared-nav header.site-top .sample-language-link{
  color:#EEE6FB;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  padding:8px;
  border:1px solid rgba(222,201,255,.24);
  white-space:nowrap;
}
.site-interior-shared-nav header.site-top .sample-language-link:hover,
.site-interior-shared-nav header.site-top .sample-language-link:hover{
  background:rgba(127,77,245,.13);
}
.site-interior-shared-nav header.site-top .nav-contact,
.site-interior-shared-nav header.site-top .nav-contact{
  background:#FFF;
  color:#160E33;
  border-radius:30px;
  padding:13px 22px;
  font-size:13px;
  line-height:normal;
  font-weight:700;
  display:inline-block;
  white-space:nowrap;
}
.site-interior-shared-nav header.site-top .nav-contact span,
.site-interior-shared-nav header.site-top .nav-contact span{margin-left:8px}
.site-interior-shared-nav header.site-top .sample-menu-toggle,
.site-interior-shared-nav header.site-top .sample-menu-toggle{display:none}
/* Exact desktop alignment: menu immediately after brand; CTA pinned right */
@media(min-width:1181px){
  .site-interior-shared-nav header.site-top,
  .site-interior-shared-nav header.site-top{
    justify-content:flex-start;
    gap:clamp(12px,1.4vw,22px);
  }
  .site-interior-shared-nav header.site-top .nav-links,
  .site-interior-shared-nav header.site-top .nav-links{
    flex:0 1 auto;
    justify-content:flex-start;
    margin-left:clamp(0px,.7vw,12px);
    gap:clamp(11px,1.3vw,20px);
  }
  .site-interior-shared-nav header.site-top .sample-nav-actions,
  .site-interior-shared-nav header.site-top .sample-nav-actions{margin-left:auto}
}
@media(max-width:1180px){
  .site-interior-shared-nav header.site-top,
  .site-interior-shared-nav header.site-top{gap:16px}
  .site-interior-shared-nav header.site-top .sample-menu-toggle,
  .site-interior-shared-nav header.site-top .sample-menu-toggle{
    margin-left:auto;
    display:flex;
    flex:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    color:#FFF;
    background:transparent;
    border:1px solid rgba(230,208,255,.36);
    cursor:pointer;
    border-radius:0;
  }
  .site-interior-shared-nav header.site-top .sample-menu-toggle span,
  .site-interior-shared-nav header.site-top .sample-menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
  }
  .site-interior-shared-nav header.site-top .nav-links,
  .site-interior-shared-nav header.site-top .nav-links{
    display:none;
    position:absolute;
    z-index:60;
    top:100%;
    left:0;
    right:0;
    padding:16px max(20px,5vw) 22px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#0B0B20;
    border-bottom:1px solid rgba(222,201,255,.24);
    box-shadow:0 25px 32px rgba(0,0,0,.27);
  }
  .site-interior-shared-nav header.site-top .nav-links.is-open,
  .site-interior-shared-nav header.site-top .nav-links.is-open{display:flex}
  /* The home keeps its 11.5–13px desktop clamp even in the mobile menu.
     Using 14px here made interior menus taller and typographically different. */
  .site-interior-shared-nav header.site-top .nav-links a{
    font-size:clamp(11.5px,.91vw,13px);
    padding:12px 10px;
    border-bottom:1px solid rgba(219,197,255,.10);
  }
  .site-interior-shared-nav header.site-top .nav-links a:last-child,
  .site-interior-shared-nav header.site-top .nav-links a:last-child{border-bottom:0}
}
@media(max-width:760px){
  .site-interior-shared-nav header.site-top,
  .site-interior-shared-nav header.site-top{min-height:70px;padding-inline:20px}
  .site-interior-shared-nav header.site-top .brand img,
  .site-interior-shared-nav header.site-top .brand img{width:112px}
  .site-interior-shared-nav header.site-top .nav-contact,
  .site-interior-shared-nav header.site-top .nav-contact{padding:11px}
}
@media(max-width:530px){
  .site-interior-shared-nav header.site-top,
  .site-interior-shared-nav header.site-top{gap:10px}
  .site-interior-shared-nav header.site-top .brand img,
  .site-interior-shared-nav header.site-top .brand img{width:112px}
  .site-interior-shared-nav header.site-top .sample-menu-toggle,
  .site-interior-shared-nav header.site-top .sample-menu-toggle{width:38px;height:38px}
  .site-interior-shared-nav header.site-top .sample-nav-actions,
  .site-interior-shared-nav header.site-top .sample-nav-actions{gap:8px}
  .site-interior-shared-nav header.site-top .sample-language-link,
  .site-interior-shared-nav header.site-top .sample-language-link{font-size:10px;padding:7px 5px}
  .site-interior-shared-nav header.site-top .nav-contact,
  .site-interior-shared-nav header.site-top .nav-contact{font-size:10px;padding:10px 11px}
  .site-interior-shared-nav header.site-top .nav-contact span,
  .site-interior-shared-nav header.site-top .nav-contact span{display:none}
}

/* Skip-to-content lives *inside* the shared header so the older site's
   anonymous line box cannot shift the entire blog navigation down 23px.
   It remains reachable by keyboard and visible when focused. */
.site-interior-shared-nav header.site-top .skip-link,
.site-interior-shared-nav header.site-top .skip-link{
  position:absolute;z-index:65;left:20px;top:-70px;
  padding:14px 18px;
  background:#FFF;color:#17112D;
  font-size:13px;line-height:normal;
}
.site-interior-shared-nav header.site-top .skip-link:focus,
.site-interior-shared-nav header.site-top .skip-link:focus{top:0}
.site-interior-shared-nav header.site-top a:focus-visible,
.site-interior-shared-nav header.site-top a:focus-visible,
.site-interior-shared-nav header.site-top button:focus-visible,
.site-interior-shared-nav header.site-top button:focus-visible{
  outline:3px solid #B888FF;outline-offset:4px;
}