/* bywill.ai header nav (r11): sticky header + "Resources" dropdown.
   Self-contained: copy nav.css + nav.js + the <header> markup to any page (e.g. /blog/). */

/* Sticky header. main{overflow:hidden} would stop sticky, so clip instead (same visual clipping). */
main { overflow: hidden; overflow: clip; }
.site-header { position: sticky; top: 0; z-index: 60; }
/* in-page anchors land just below the sticky header */
main section[id], #services, #examples, #tools { scroll-margin-top: 82px; }
@media (max-width: 1050px) { main section[id], #services, #examples, #tools { scroll-margin-top: 72px; } }

/* Dropdown – shared */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-toggle {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; color: inherit; cursor: pointer;
  font: inherit; font-weight: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 0;
}
.nav-dd-toggle:hover { border-color: var(--ink, #0f0f0f); }
.nav-dd-toggle:focus-visible, .nav-dd-menu a:focus-visible { outline: 2px solid var(--ink, #0f0f0f); outline-offset: 3px; }
.nav-dd-caret { width: 10px; height: 10px; transition: transform .2s ease; }
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }

/* Desktop: floating panel, opens on hover, focus or click */
@media (min-width: 1051px) {
  .nav-dd-menu {
    position: absolute; top: calc(100% + 14px); left: -1.1rem; min-width: 210px; z-index: 70;
    background: var(--paper, #fff); border: 1px solid var(--line, #e3e3e3); border-radius: 14px;
    box-shadow: 0 18px 35px rgba(15, 15, 15, .1); padding: .45rem;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  /* invisible bridge so the hover doesn't drop crossing the gap */
  .nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-dd.is-open .nav-dd-menu { transition: opacity .18s ease, transform .18s ease, visibility 0s; }
  .nav-dd.is-open .nav-dd-menu,
  .nav-dd:has(.nav-dd-menu a:focus) .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  @media (hover: hover) {
    .nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }
  }
  .site-header nav .nav-dd-menu a { border: 0; border-radius: 9px; padding: .7rem .8rem; white-space: nowrap; }
  .site-header nav .nav-dd-menu a:hover { background: rgba(15, 15, 15, .05); }
}

/* Mobile / tablet: expandable row inside the slide-down menu */
@media (max-width: 1050px) {
  .site-header nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-dd { display: block; border-bottom: 1px solid var(--line, #e3e3e3); }
  .nav-dd-toggle { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: .86rem; font-weight: 700; border: 0; }
  .nav-dd-menu { display: none; padding: 0 0 .6rem .9rem; }
  .nav-dd.is-open .nav-dd-menu { display: flex; flex-direction: column; }
  .site-header nav .nav-dd-menu a { border-bottom: 0; padding: .7rem 0; }
}
@media (max-width: 720px) {
  .nav-dd-toggle { font-size: .95rem; padding: .85rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-menu, .nav-dd-caret { transition: none; }
}