/* =========================================
   PAGES FOOTER — HORIZON NUIT
   Directory, coordinate & bottom
   ========================================= */

.pfn-directory{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(25px,4vw,55px);
}

.pfn-nav__head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.pfn-nav__head span{
  color:#ff774d;
  font-size:.63rem;
  font-weight:950;
  letter-spacing:.1em;
}

.pfn-nav__head p{
  margin:0;
  color:rgba(245,240,229,.9);
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.pfn-nav > a{
  position:relative;
  display:flex;
  align-items:center;
  width:fit-content;
  margin:9px 0;
  padding-left:0;
  color:rgba(245,240,229,.63);
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
  transition:
    color .2s var(--ease),
    padding-left .2s var(--ease);
}

.pfn-nav > a::before{
  content:"";
  width:0;
  height:1px;
  margin-right:0;
  background:#ff774d;
  transition:
    width .2s var(--ease),
    margin-right .2s var(--ease);
}

.pfn-nav > a:hover{
  color:#fff;
}

.pfn-nav > a:hover::before{
  width:14px;
  margin-right:7px;
}

.pfn-coordinate{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}

.pfn-coordinate__point{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff774d;
  box-shadow:0 0 14px rgba(255,119,77,.65);
}

.pfn-coordinate__line{
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(255,119,77,.35),
      rgba(255,255,255,.09)
    );
}

.pfn-coordinate__line:nth-of-type(4){
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.09),
      rgba(255,119,77,.35)
    );
}

.pfn-coordinate strong{
  color:rgba(245,240,229,.66);
  font-size:.65rem;
  font-weight:950;
  letter-spacing:.3em;
}

.pfn-bottom{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center;
  padding-top:18px;
  color:rgba(245,240,229,.38);
  font-size:.72rem;
}

.pfn-bottom > div:first-child{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pfn-separator{
  color:rgba(255,119,77,.55);
}

.pfn-bottom__links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.pfn-bottom a{
  color:inherit;
  text-decoration:none;
}

.pfn-bottom a:hover{
  color:rgba(245,240,229,.8);
}

.pages-footer--night a:focus-visible{
  outline:2px solid rgba(255,119,77,.75);
  outline-offset:4px;
  border-radius:2px;
}