/* ═══════════════════════════════════════
   Public pages — modern header + nav
   ═══════════════════════════════════════ */

/* Header bar */
body > header {
  background: #fff !important;
  border-bottom: 1px solid #e8ecf0;
  padding: 14px 5% !important;
  display: flex;
  align-items: center;
  width: 90% !important;
}
body > header img {
  height: 44px !important;
}
body > header p.m-hide {
  position: static !important;
  margin-left: auto;
  font-size: 13px;
  color: #64748b;
  line-height: 44px;
}
body > header p.m-hide span {
  font-size: 18px !important;
  color: #1454a8 !important;
  font-weight: 700;
}

/* Navigation */
body > nav {
  background: #0f172a !important;
  padding: 0 5% !important;
  width: 90% !important;
  border-bottom: 3px solid #1454a8;
}
body > nav ul {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
}
body > nav ul li {
  display: block !important;
  margin: 0 !important;
}
body > nav ul li a {
  display: block;
  padding: 16px 28px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  text-decoration: none;
  transition: all .2s;
  position: relative;
}
/* Remove the old dot separators */
body > nav ul li a:after {
  display: none !important;
}
/* Hover underline */
body > nav ul li a:before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background: #3b82f6 !important;
  transition: all .25s !important;
  transform: translateX(-50%);
}
body > nav ul li a:hover {
  color: #fff !important;
}
body > nav ul li a:hover:before {
  width: 70% !important;
}
/* Active state */
body > nav ul .active a {
  color: #fff !important;
}
body > nav ul .active a:before {
  width: 70% !important;
  background: #3b82f6 !important;
}
/* Push right-side items to far right */
body > nav ul .search {
  margin-left: auto !important;
}
/* If no search, config pushes right */
body > nav ul .config {
  margin-left: auto;
}
body > nav ul .search ~ .config {
  margin-left: 0;
}
/* Logout button */
body > nav ul .last {
  background: none !important;
}
body > nav ul .last a {
  background: linear-gradient(135deg, #1454a8, #2563eb) !important;
  color: #fff !important;
  padding: 10px 28px !important;
  border-radius: 6px;
  margin: 6px 0;
  font-weight: 600 !important;
  letter-spacing: .5px;
  transition: all .2s !important;
  box-shadow: 0 2px 8px rgba(20,84,168,.25);
}
body > nav ul .last a:hover {
  background: linear-gradient(135deg, #0f3d7a, #1454a8) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20,84,168,.35);
}
body > nav ul .last a:before {
  display: none !important;
}

/* Footer */
body > footer {
  background: #0f172a !important;
  border-top: 3px solid #1454a8;
  padding: 24px 5% !important;
  margin-top: 40px !important;
  width: 90% !important;
  float: left;
}
body > footer ul {
  display: flex !important;
  list-style: none !important;
  gap: 24px;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
body > footer ul li {
  padding: 0 !important;
  margin: 0 !important;
}
body > footer ul li a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: color .15s;
}
body > footer ul li a:hover {
  color: #fff !important;
}
body > footer p {
  color: #475569 !important;
  font-size: 12px !important;
  margin: 0 !important;
  width: auto !important;
}

/* Remove hover underline from config/settings icon and search */
body > nav ul .config a:before,
body > nav ul .search a:before {
  display: none !important;
}
body > nav ul .config a:hover {
  background: rgba(255,255,255,.08) !important;
  color: inherit !important;
}

/* Space between search, config and logout */
body > nav ul .search {
  margin-right: 15px !important;
}
body > nav ul .config {
  margin-right: 10px !important;
}

/* Public nav: push Login to far right when no search/config present */
body > nav ul li.last:last-child {
  margin-left: auto !important;
}

/* ═══════════════════════════════════════
   Mobile Responsive — public pages
   ═══════════════════════════════════════ */

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  /* Header */
  body > header {
    padding: 10px 4% !important;
    width: 92% !important;
  }
  body > header img {
    height: 36px !important;
  }
  body > header p.m-hide {
    display: none;
  }

  /* Nav — stack vertically */
  body > nav {
    padding: 0 4% !important;
    width: 92% !important;
    position: relative;
  }
  body > nav .nav-toggle {
    display: block;
  }
  body > nav ul {
    flex-direction: column !important;
    align-items: stretch !important;
    display: none !important;
    width: 100%;
  }
  body > nav ul.open {
    display: flex !important;
  }
  body > nav ul li {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  body > nav ul li a {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  body > nav ul li a:before {
    display: none !important;
  }
  body > nav ul .last,
  body > nav ul li.last:last-child {
    margin-left: 0 !important;
    margin-top: 4px;
  }
  body > nav ul .last a {
    text-align: center;
    border-radius: 4px;
    margin: 4px 0 8px;
  }

  /* Banner */
  .banner {
    height: 200px !important;
  }

  /* Content section — stack article + aside */
  section {
    margin: 15px 4% !important;
    width: 92% !important;
  }
  section article {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
  }
  section article h1 {
    font-size: 22px !important;
  }
  section article h2 {
    font-size: 18px !important;
  }
  section article p {
    font-size: 14px !important;
    width: 100% !important;
  }
  section article em {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  section article ul.no-bullets li {
    font-size: 14px !important;
  }

  /* Aside / callback form — full width below article */
  section aside {
    width: 100% !important;
    float: none !important;
    margin-top: 20px !important;
    padding: 16px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  section aside form {
    width: 100% !important;
  }
  section aside input[type=text],
  section aside textarea {
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  section aside input[type=submit] {
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  section aside label {
    clear: both !important;
  }
  section aside h2 {
    width: 100% !important;
  }

  /* Footer */
  body > footer {
    padding: 16px 4% !important;
    width: 92% !important;
    margin-top: 20px !important;
  }
  body > footer ul {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  body > footer ul li a {
    font-size: 12px !important;
  }

  /* Login page — box2 full width stacked */
  section .box2 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    padding: 16px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  section .box2 h1,
  section .box2 h4 {
    font-size: 18px !important;
    width: 100% !important;
  }
  section .box2 p {
    width: 100% !important;
    font-size: 14px !important;
  }
  section .box2 form {
    width: 100% !important;
  }
  section .box2 form label {
    width: 100% !important;
    clear: both !important;
  }
  section .box2 input[type=text],
  section .box2 input[type=password] {
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  section .box2 input[type=submit] {
    width: 100% !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  /* Turnstile widget */
  .cf-turnstile {
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Data pages */
  section .costs {
    overflow-x: auto;
  }
  section .costs table {
    min-width: 500px;
  }

  /* Kill all floats inside section on mobile */
  section > * {
    float: none !important;
  }
  section article,
  section aside,
  section .box2 {
    float: none !important;
    clear: both !important;
  }
}

@media screen and (max-width: 480px) {
  body > header img {
    height: 30px !important;
  }
  .banner {
    height: 150px !important;
  }
  section article h1 {
    font-size: 18px !important;
  }
  body > nav ul .last a {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
}