/* ==========================================================================
   netts.io — Global chrome (nav + footer)
   /css/chrome.css
   Light header + dark footer, aligned with About page visual language.
   Depends on: Bootstrap 5 (navbar collapse + dropdown) + Bootstrap Icons
   ========================================================================== */

:root{
  --nt-blue:#2d4bdb;
  --nt-blue-hover:#3e68ff;
  --nt-blue-soft:#eef1ff;
  --nt-ink:#0b1020;
  --nt-ink-soft:#1a2240;
  --nt-text:#3a4366;
  --nt-text-soft:#5c6690;
  --nt-muted:#8892b8;
  --nt-line:#e2e6f2;
  --nt-line-soft:#eef0f7;
  --nt-bg:#ffffff;
  --nt-bg-soft:#f7f8fc;

  --nt-dark-bg:#0a0e1f;
  --nt-dark-panel:#0f1530;
  --nt-dark-line:#1d2449;
  --nt-dark-line-2:#252d52;
  --nt-dark-ink:#e9edff;
  --nt-dark-text:#9aa4cc;
  --nt-dark-muted:#4c5891;

  --nt-radius:10px;
  --nt-radius-sm:8px;
  --nt-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nt-font:"Urbanist","Inter",system-ui,-apple-system,Arial,sans-serif;
}

/* ==========================================================================
   NAVBAR  (light, sticky, Bootstrap-based)
   ========================================================================== */
.modern-navbar{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--nt-line);
  padding:10px 0;
  font-family:var(--nt-font);
  z-index:1030;
}
.modern-navbar .container-fluid{max-width:1440px;margin:0 auto}

/* brand */
.modern-brand{padding:4px 0;margin-right:18px;display:flex;align-items:center}
.modern-brand img{height:34px;width:auto;display:block}

/* nav list */
.modern-nav-menu{gap:0;flex-wrap:wrap}
.modern-nav-item{list-style:none;display:flex;align-items:center}
.modern-nav-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--nt-text) !important;
  font-size:14px;font-weight:500;
  padding:8px 12px !important;
  border-radius:var(--nt-radius-sm);
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.modern-nav-link:hover,
.modern-nav-link:focus{
  color:var(--nt-ink) !important;
  background:var(--nt-bg-soft);
}
.modern-nav-link i.bi{font-size:14px;opacity:.7;transition:opacity .15s}
.modern-nav-link:hover i.bi{opacity:1;color:var(--nt-blue)}

/* subtle separator between items */
.nav-divider{
  width:1px;height:14px;
  background:var(--nt-line);
  margin:0 4px;
  align-self:center;
  list-style:none;
}
.nav-separator{
  width:1px;height:22px;
  background:var(--nt-line);
  margin:0 10px;
  align-self:center;
  list-style:none;
}

/* dropdowns */
.modern-nav-link.dropdown-toggle::after{
  border:none;
  content:"\f282"; /* bi-chevron-down */
  font-family:"bootstrap-icons";
  font-size:9px;
  margin-left:4px;
  opacity:.55;
  vertical-align:0;
}
.modern-nav-menu .dropdown-menu{
  border:1px solid var(--nt-line);
  border-radius:var(--nt-radius);
  box-shadow:0 16px 40px -12px rgba(10,14,31,.12),0 4px 10px -4px rgba(10,14,31,.06);
  padding:6px;
  margin-top:8px !important;
  min-width:240px;
  background:#fff;
}
.modern-nav-menu .dropdown-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border-radius:6px;
  color:var(--nt-text);
  font-size:13px;font-weight:500;
  transition:background .15s,color .15s;
}
.modern-nav-menu .dropdown-item:hover,
.modern-nav-menu .dropdown-item:focus{
  background:var(--nt-bg-soft);
  color:var(--nt-ink);
}
.modern-nav-menu .dropdown-item i.bi{
  font-size:13px;
  opacity:.7;
  width:16px;
  text-align:center;
  color:var(--nt-text-soft);
}
.modern-nav-menu .dropdown-item:hover i.bi{color:var(--nt-blue);opacity:1}

/* language selector */
.modern-nav-menu #languageSelect,
.modern-nav-menu .form-select{
  font-family:var(--nt-font);
  font-size:13px;
  font-weight:600;
  color:var(--nt-ink);
  background-color:var(--nt-bg-soft);
  border:1px solid var(--nt-line);
  border-radius:var(--nt-radius-sm);
  padding:7px 28px 7px 12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%235c6690' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
  cursor:pointer;
  max-width:170px;
  transition:border-color .15s;
}
.modern-nav-menu #languageSelect:hover{border-color:var(--nt-blue)}
.modern-nav-menu #languageSelect:focus{
  border-color:var(--nt-blue);
  box-shadow:0 0 0 3px rgba(45,75,219,.14);
  outline:none;
}

/* theme toggle (unused for now but styled) */
.theme-toggle-btn{
  width:36px;height:36px;
  border-radius:var(--nt-radius-sm);
  background:var(--nt-bg-soft);
  border:1px solid var(--nt-line);
  color:var(--nt-ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .15s,color .15s;
}
.theme-toggle-btn:hover{border-color:var(--nt-blue);color:var(--nt-blue)}
.theme-toggle-btn i{font-size:15px}

/* hamburger toggler — clean custom look.
   Note: `display` intentionally has NO !important so Bootstrap's
   `.navbar-expand-lg .navbar-toggler { display:none }` still wins on
   desktop (>=992px). Without this, the hamburger shows everywhere. */
.modern-toggler{
  border:1px solid var(--nt-line) !important;
  background:#fff !important;
  padding:9px 11px !important;
  border-radius:var(--nt-radius-sm) !important;
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  box-shadow:none !important;
}
.modern-toggler:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(45,75,219,.14) !important;
}
.modern-toggler .toggler-line{
  display:block !important;
  width:22px;height:2px;
  margin:0 !important;
  background:var(--nt-ink) !important;
  border-radius:2px;
  transition:transform .2s,opacity .2s;
  opacity:1 !important;
}
.modern-toggler[aria-expanded="true"] .toggler-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.modern-toggler[aria-expanded="true"] .toggler-line:nth-child(2){opacity:0}
.modern-toggler[aria-expanded="true"] .toggler-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* breakpoints */
@media (max-width:1399.98px){
  .modern-nav-link{padding:7px 10px !important;font-size:13.5px}
  .nav-divider{margin:0 2px}
}
@media (max-width:1199.98px){
  .modern-nav-link i.bi{display:none}
  .modern-nav-link{padding:7px 10px !important}
}
@media (max-width:991.98px){
  .modern-navbar .container-fluid{padding-left:20px !important;padding-right:20px !important}
  .modern-nav-menu{
    background:#fff;
    border:1px solid var(--nt-line);
    border-radius:var(--nt-radius);
    padding:10px !important;
    margin-top:12px;
    gap:2px;
    flex-direction:column;
    align-items:stretch !important;
  }
  .modern-nav-item{width:100%}
  .modern-nav-link{
    width:100%;
    padding:11px 14px !important;
    font-size:14.5px;
  }
  .modern-nav-link i.bi{display:inline-block}
  .nav-divider,.nav-separator{display:none}
  .modern-nav-menu .dropdown-menu{
    box-shadow:none;
    border:0;
    padding:0 0 6px 26px;
    margin:0 !important;
    min-width:0;
    background:transparent;
  }
  .modern-nav-menu .dropdown-item{padding:8px 10px}
  .modern-nav-menu #languageSelect,
  .modern-nav-menu .form-select{
    max-width:none;
    width:100%;
    margin-top:6px;
  }
}

/* ==========================================================================
   FOOTER  (dark, multilingual)
   ========================================================================== */
.footer-new{
  background:var(--nt-dark-bg);
  color:var(--nt-dark-text);
  padding:72px 0 28px;
  width:100%;
  font-family:var(--nt-font);
  position:relative;
  border-top:1px solid var(--nt-dark-line-2);
}
/* faint grid backdrop */
.footer-new::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(62,104,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(62,104,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 85%);
}
.footer-new .container{
  max-width:1200px;
  position:relative;
  padding-left:20px;padding-right:20px;
  margin-left:auto;margin-right:auto;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:56px;
  width:100%;
}

.footer-column{display:flex;flex-direction:column;align-items:flex-start}

.footer-title{
  color:#fff;
  font-family:var(--nt-mono);
  font-size:13px;
  font-weight:700;
  margin:0 0 22px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.footer-text{
  color:var(--nt-dark-text);
  font-size:14px;
  line-height:1.55;
  margin:0 0 10px;
  max-width:34ch;
}
.footer-text:last-of-type{margin-bottom:14px}

.footer-links{
  display:flex;flex-direction:column;gap:12px;
  width:100%;
}

.footer-link{
  color:var(--nt-dark-text);
  text-decoration:none;
  font-size:14px;
  line-height:1.4;
  transition:color .2s,transform .2s;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-link:hover{
  color:#7a96ff;
  text-decoration:none;
  transform:translateX(2px);
}
.footer-link i.bi{
  font-size:13px;
  opacity:.75;
  width:16px;
  text-align:center;
}
.footer-link:hover i.bi{opacity:1;color:#7a96ff}

/* social icons */
.footer-social{display:flex;gap:10px;margin-top:6px}
.social-icon{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
  transition:background .2s,transform .2s;
  text-decoration:none;
}
.social-icon:hover{
  background:rgba(62,104,255,.2);
  transform:translateY(-2px);
}
.social-icon i.bi{
  font-size:15px;
  color:var(--nt-dark-text);
  transition:color .2s;
}
.social-icon:hover i.bi{color:#fff}

/* footer bottom bar (added by PHP) */
.footer-bottom{
  max-width:1200px;
  margin:48px auto 0;
  padding:22px 20px 0;
  border-top:1px solid var(--nt-dark-line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  font-family:var(--nt-mono);
  font-size:11px;
  color:var(--nt-dark-muted);
  letter-spacing:.04em;
  position:relative;
  text-transform:uppercase;
}
.footer-bottom .fb-right{color:var(--nt-dark-text)}

/* breakpoints */
@media (max-width:1024px){
  .footer-new{padding:56px 0 24px}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .footer-title{font-size:12px;margin-bottom:18px}
}
@media (max-width:640px){
  .footer-new{padding:48px 0 22px}
  .footer-grid{grid-template-columns:1fr;gap:32px;text-align:left}
  .footer-column{align-items:flex-start}
  .footer-links{align-items:flex-start}
  .footer-bottom{
    margin-top:32px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    font-size:10px;
  }
}