/* ==========================================================================
   KMEDIA shared navigation & footer styles (loaded on every page)
   Keeps header/footer identical across the site and fixes mobile nav UX.
   ========================================================================== */

.navbar { background: #111; padding: 0.75rem 0; }
.navbar-brand img { height: 80px; width: auto; transition: transform 0.3s, height 0.3s ease; }
.navbar-brand img:hover { transform: scale(1.05); }

.navbar .nav-link { color: #fff; margin: 0 0.4rem; font-weight: 500; transition: color 0.3s; position: relative; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #EA7023; }
.navbar .nav-link.active { color: #EA7023; }
.navbar .nav-link.active::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -4px; height: 2px; background: #EA7023; border-radius: 2px; }

.btn-partner { background: #EA7023; color: #fff !important; border-radius: 25px; padding: 0.5rem 1.5rem; font-weight: 600; transition: background 0.3s, transform 0.2s; white-space: nowrap; }
.btn-partner:hover { background: #ff8c42; transform: translateY(-1px); }

/* ------------------- Custom animated menu toggler -------------------- */
.kb-toggler {
  position: relative;
  width: 48px;
  height: 44px;
  border: 1px solid rgba(234,112,35,.5);
  border-radius: 12px;
  background: rgba(234,112,35,.08);
  padding: 0 13px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.kb-toggler:hover { background: rgba(234,112,35,.18); border-color: #EA7023; }
.kb-toggler:focus { box-shadow: 0 0 0 3px rgba(234,112,35,.4); outline: none; }

.kb-bar {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: #EA7023;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, width .35s cubic-bezier(.22,.61,.36,1), background .3s;
}
/* Staggered widths give it character when closed; middle bar grows on hover */
.kb-bar1 { width: 22px; }
.kb-bar2 { width: 14px; }
.kb-bar3 { width: 22px; }
.kb-toggler:hover .kb-bar2 { width: 22px; }

/* Morph into an X while the menu is open (Bootstrap toggles aria-expanded) */
.kb-toggler[aria-expanded="true"] { background: #EA7023; border-color: #EA7023; }
.kb-toggler[aria-expanded="true"] .kb-bar { background: #111; width: 22px; }
.kb-toggler[aria-expanded="true"] .kb-bar1 { transform: translateY(7.5px) rotate(45deg); }
.kb-toggler[aria-expanded="true"] .kb-bar2 { opacity: 0; transform: translateX(10px); }
.kb-toggler[aria-expanded="true"] .kb-bar3 { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------- Mobile navigation ------------------------- */
@media (max-width: 991.98px) {
  .navbar-brand img { height: 56px; }

  .navbar-collapse {
    background: #0d0d0d;
    margin-top: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 3px solid #EA7023;
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
  }
  .navbar-nav { text-align: center; }
  .navbar .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,.06); }
  .navbar .nav-link { display: block; padding: 0.85rem 0.5rem; margin: 0; font-size: 1.02rem; }
  .navbar .nav-link.active::after { display: none; }
  .navbar .nav-link.active { background: rgba(234,112,35,.12); border-radius: 8px; }

  .navbar .btn-partner,
  .navbar .nav-cta { display: block; width: 100%; margin: 0.75rem 0 0 !important; text-align: center; }
}

/* Smooth collapse animation */
.navbar-collapse.collapsing { transition: height .25s ease; }

/* ------------------------------ Footer ------------------------------- */
footer { background: #111; padding: 3rem 1rem; color: #fff; }
footer h4 { color: #EA7023; margin-bottom: 1rem; }
footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: 0.5rem; }
footer ul li a { color: #fff; transition: color 0.3s; }
footer ul li a:hover { color: #EA7023; }
footer .social-icons a { color: #fff; margin-right: 1rem; font-size: 1.5rem; transition: color 0.3s; }
footer .social-icons a:hover { color: #EA7023; }
footer .footer-bottom { border-top: 1px solid #333; padding-top: 1rem; text-align: center; }