/* site.css (mobile nav section) */

/* Hide mobile-only UI on desktop by default */
.mobile-topbar,
.kebab-btn,
.kebab-drawer {
  display: none;
}

/* Shared site CSS: mobile top bar, kebab, and hide sidebar on small screens */
@media (max-width: 860px){
  /*__mobile_display_fix__*/
  .mobile-topbar,
  .kebab-btn,
  .kebab-drawer {
    display: block;
  }

  .layout > aside{
    display:none !important;
  }

  .mobile-topbar{
    position:fixed;
    top:12px;
    left:12px;
    right:64px;
    z-index:999;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:transparent;
    pointer-events:none;
  }

  .mobile-topbar .brand{
    display:flex;
    gap:10px;
    align-items:center;
    text-decoration:none;
    font-family:Inter,system-ui,sans-serif;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:14px;
    color:inherit;
    background:#ffffff;
    border:1px solid #00000014;
    border-radius:12px;
    padding:8px 12px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    pointer-events:auto;
  }

  .mobile-topbar img{
    width:20px;
    height:20px;
    border-radius:4px;
  }

  /* Canary gold hamburger in upper-right */
  .kebab-btn{
    position:fixed;
    top:12px;
    right:12px;
    z-index:1000;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid #E0C86B;
    background:#F6D97A; /* soft canary gold */
    color:#3a2f15;
    box-shadow:0 8px 28px rgba(0,0,0,.16);
    font-size:20px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  .kebab-btn:hover{
    background:#f4d25e;
  }

  .kebab-drawer[hidden]{
    display:none;
  }

  .kebab-drawer{
    position:fixed;
    top:60px;
    right:12px;
    z-index:1001;
    background:#fff;
    border:1px solid #00000014;
    border-radius:14px;
    box-shadow:0 14px 44px rgba(0,0,0,.2);
    padding:8px;
    min-width:220px;
  }

  .kebab-drawer a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    text-decoration:none;
    color:inherit;
    font-family:Inter,system-ui,sans-serif;
    border:1px solid transparent;
  }

  .kebab-drawer a:hover{
    background:#f3f4f6;
    border-color:#e5e7eb;
  }
}

@media (prefers-color-scheme: dark){
  @media (max-width: 860px){
    /*__mobile_display_fix__*/
    .mobile-topbar,
    .kebab-btn,
    .kebab-drawer {
      display:block;
    }

    .mobile-topbar .brand{
      background:#1f232b;
      color:#e5e7eb;
      border-color:#ffffff22;
    }

    .kebab-btn{
      background:#d8b751; /* darker canary for dark mode */
      color:#1a1a1a;
      border-color:#f0d872;
      box-shadow:0 8px 28px rgba(0,0,0,.4);
    }

    .kebab-drawer{
      background:#1f232b;
      border-color:#ffffff22;
    }

    .kebab-drawer a:hover{
      background:#2a3138;
      border-color:#39424a;
      color:#eaf0f4;
    }
  }
}