/*
 * Shared public header/navigation layout.
 * Loaded after every theme so the header and navigation remain separate and consistent.
 */

/* Requested public reading rhythm. Headings keep their own heading line-height. */
body{line-height:1.30rem!important}
.site-content{line-height:1.30rem!important}
.site-content p,
.site-content li,
.site-content blockquote,
.site-content td,
.site-content th,
.site-content .content-index-date,
.site-content .content-index-title,
.site-content .content-index-preview,
.site-content .meta,
.site-content .entry-meta{line-height:1.30rem!important}

/* Header is its own row and contains only the site identity. */
.site-header{position:relative;z-index:20}
.site-header-inner{display:flex!important;align-items:center!important;width:min(calc(100% - (var(--site-gutter) * 2)),var(--page-width));margin:0 auto;min-width:0}
.site-header .brand{min-width:0}

/* Navigation is a separate full-width bar directly below the header. */
.site-menu-bar{position:relative;z-index:19;width:100%;border-top:1px solid transparent;border-bottom:1px solid transparent}
.site-menu-inner{width:min(calc(100% - (var(--site-gutter) * 2)),var(--page-width));min-height:46px;margin:0 auto;display:flex;align-items:center;min-width:0}
.site-menu-bar .site-nav{position:static!important;inset:auto!important;width:100%;min-width:0;margin:0!important;padding:0!important;max-height:none;opacity:1;visibility:visible;overflow:visible}
.site-menu-bar .site-nav-main{min-width:0;max-width:100%}
.site-menu-bar .menu-toggle{display:none}

html[data-appearance="light"] .site-menu-bar{background:#f6f7f8;color:#111827;border-color:#d1d5db}
html[data-appearance="light"] .site-menu-bar .nav-link{color:#1f2937}
html[data-appearance="light"] .site-menu-bar .nav-link.is-current{color:var(--theme-color)}
html[data-appearance="dark"] .site-menu-bar{background:#111827;color:#f1f5f9;border-color:#334155}
html[data-appearance="dark"] .site-menu-bar .nav-link{color:#e5e7eb}
html[data-appearance="dark"] .site-menu-bar .nav-link.is-current{color:var(--theme-color)}

@media (max-width:720px){
  .site-header-inner{display:flex!important}

  .site-menu-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;
    row-gap:0;
    align-items:center;
    width:100%!important;
    max-width:none!important;
    min-height:50px;
    margin:0!important;
    padding:0!important;
  }

  .site-menu-bar .menu-toggle{
    display:block!important;
    grid-column:2;
    margin:6px var(--site-gutter) 6px auto!important;
    position:relative;
    z-index:2;
  }

  .site-menu-bar .site-nav{
    grid-column:1 / -1;
    width:100%!important;
    min-width:0;
    margin:0!important;
    padding:0!important;
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden!important;
    border-top:0 solid transparent;
    transition:max-height .2s ease,opacity .14s ease,border-color .14s ease;
  }

  .site-menu-bar .site-nav.is-open{
    display:block!important;
    max-height:min(70vh,560px);
    opacity:1;
    visibility:visible;
    border-top-width:1px;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }

  .site-menu-bar .site-nav-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    white-space:normal!important;
    text-align:left;
  }

  .site-menu-bar .nav-link{
    display:flex!important;
    align-items:center;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:52px;
    box-sizing:border-box;
    padding:14px var(--site-gutter)!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)!important;
    border-radius:0!important;
    font-size:14px;
    line-height:1.30rem!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  .site-menu-bar .nav-link:last-child{border-bottom:0!important}
  .site-menu-bar .nav-link + .nav-link{margin-top:0!important}
  .site-menu-bar .site-nav-main::before,.site-menu-bar .site-nav-main::after{content:none!important}
  body.menu-open{overflow:auto}

  html[data-appearance="light"] .site-menu-bar .site-nav{background:#f6f7f8!important;color:#111827!important;border-color:#d1d5db!important}
  html[data-appearance="light"] .site-menu-bar .nav-link{color:#111827!important;border-bottom-color:#e5e7eb!important}
  html[data-appearance="light"] .site-menu-bar .nav-link:hover{background:#eef0f2!important}
  html[data-appearance="light"] .site-menu-bar .nav-link.is-current{color:var(--theme-color)!important;background:color-mix(in srgb,var(--theme-color) 8%,#f6f7f8)!important}
  html[data-appearance="light"] .site-menu-bar .menu-toggle{color:#111827!important;border-color:#9ca3af!important}

  html[data-appearance="dark"] .site-menu-bar .site-nav{background:#111827!important;color:#f1f5f9!important;border-color:#334155!important}
  html[data-appearance="dark"] .site-menu-bar .nav-link{color:#f1f5f9!important;border-bottom-color:#293548!important}
  html[data-appearance="dark"] .site-menu-bar .nav-link:hover{background:#172033!important}
  html[data-appearance="dark"] .site-menu-bar .nav-link.is-current{color:var(--theme-color)!important;background:color-mix(in srgb,var(--theme-color) 12%,#111827)!important}
  html[data-appearance="dark"] .site-menu-bar .menu-toggle{color:#f1f5f9!important;border-color:#64748b!important}

  .menu-open .menu-toggle span:not(.sr-only):nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-toggle span:not(.sr-only):nth-child(2){opacity:0}
  .menu-open .menu-toggle span:not(.sr-only):nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

@media print{.site-menu-bar{display:none!important}}