/* Developing Themes Dot: brand logo + responsive header navigation.
   Loaded after the theme stylesheet on every public page. */

/* Logo */
.site-header .brand,.site-footer .brand{display:inline-flex;align-items:center;min-width:0;flex:0 1 auto}
.brand-logo{display:block;height:48px;width:auto;max-width:100%}
.site-footer .brand-logo{height:34px}
.brand-logo--dark{display:none}
html[data-color=dark] .brand-logo--light{display:none}
html[data-color=dark] .brand-logo--dark{display:block}

/* Hamburger button (hidden on desktop) */
.nav-toggle{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:42px;height:42px;margin-left:auto;padding:0;border:1px solid var(--line,#d9ddd7);border-radius:8px;background:transparent;color:var(--ink,#171b19);cursor:pointer}
.mode-toggle+.nav-toggle{margin-left:8px}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-open .nav-toggle-bars{background:transparent}
.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:3px solid var(--blue,#235be2);outline-offset:2px}

@media (max-width:1000px){
  .brand-logo{height:42px}
}

@media (max-width:760px){
  .site-body .site-header .header-row,.site-header .header-row{position:relative;flex-wrap:nowrap;gap:10px;min-height:68px;height:auto;padding:12px 0}
  .brand-logo{height:38px;max-width:62vw}
  .site-footer .brand-logo{height:30px}
  .site-body .mode-toggle{margin-left:auto}
  .nav-toggle{display:inline-flex}

  /* Collapsed dropdown menu */
  .site-body .site-nav,.site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;order:0;width:auto;margin:0;padding:6px 16px 10px;flex-direction:column;align-items:stretch;gap:0;overflow:visible;background:var(--paper,#fff);border:1px solid var(--line,#d9ddd7);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(0,0,0,.12);font-size:15px}
  .site-header.nav-open .site-nav{display:flex}
  .site-body .site-nav a,.site-header .site-nav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line,#e4e7e2);box-shadow:none!important}
  .site-body .site-nav a:last-child,.site-header .site-nav a:last-child{border-bottom:0}
  .site-body .site-nav .active,.site-header .site-nav .active{color:var(--blue,#235be2)}
}

@media (max-width:380px){
  .brand-logo{height:32px}
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}
}