/* DoulaFlow site nav, including the Features menu.
 *
 * Every rule for the nav lives here and nowhere else. The markup lives in partials/nav.html
 * and is stamped into every page by build-nav.py, which also fails its --check if a page's
 * own <style> starts styling .df-nav, .df-logo or .df-mega again. Change the nav here and
 * in the partial, then run python3 build-nav.py.
 *
 * Self-contained on purpose: index.html and get-paid.html do not link css/site.css, so
 * nothing here may rely on it (fonts, link colour, line-height are all set locally).
 *
 * The Features menu opens on hover for a mouse, and on click everywhere. .open and
 * .menu-open are added by inline onclick handlers in the partial, so they look dead to
 * a scan that only reads <script> bodies. They are not.
 */

.df-nav-wrap { position: sticky; top: 0; z-index: 100; background: rgba(var(--ground-rgb),.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); font-family: var(--font-body); line-height: 1.5; }
.df-nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 2.5rem; }
.df-nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.df-nav a { color: inherit; text-decoration: none; }
.df-logo { display: inline-flex; align-items: center; }
.df-logo img { height: 30px; width: auto; display: block; }

.df-nav-links { display: flex; gap: 2rem; align-items: center; align-self: stretch; font-size: 14px; }
.df-nav-links > a, .df-nav-drop { color: var(--text-2); font-size: 14px; font-weight: 400; transition: color .2s; }
.df-nav-links > a:hover, .df-nav-links > a.active,
.df-nav-drop:hover, .df-nav-drop.active, .df-nav-item.open .df-nav-drop { color: var(--text); }
.df-nav-item { display: flex; align-items: center; align-self: stretch; }
.df-nav-drop { display: inline-flex; align-items: center; gap: .3rem; height: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-body); line-height: 1.5; }
.df-nav-drop .ti { width: 14px; height: 14px; transition: transform .2s; }
.df-nav-item.open .df-nav-drop .ti { transform: rotate(180deg); }

.df-nav-right { display: flex; gap: .75rem; align-items: center; }
.df-nav .df-nav-login { background: transparent; color: var(--accent); border: 1.5px solid var(--border); padding: 9px 20px; border-radius: 50px; font-size: 14px; font-weight: 400; }
.df-nav .df-nav-cta { background: var(--accent); color: var(--ground); border: none; padding: 10px 22px; border-radius: 50px; font-size: 14px; font-weight: 500; }
.df-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--accent); line-height: 0; }
.df-nav-ml { display: none; }
.df-nav-wrap a:focus-visible, .df-nav-wrap button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the Features menu: a full-width panel under the bar, four groups across */
.df-mega { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ground); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(var(--accent-rgb),.10); }
.df-nav-item.open .df-mega { display: block; }
.df-mega-in { max-width: 1120px; margin: 0 auto; padding: 1.8rem 2.5rem 1.3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.75rem; }
.df-mega .df-mega-h { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 0 0 .5rem .6rem; }
.df-mega .df-mega-link { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .6rem; border-radius: 10px; color: var(--text); transition: background .15s; }
.df-mega .df-mega-link:hover, .df-mega .df-mega-link[aria-current] { background: var(--surface); }
.df-mega-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--rust); font-size: 16px; }
.df-mega-link:hover .df-mega-ico, .df-mega-link[aria-current] .df-mega-ico { background: var(--ground); }
.df-mega-link strong { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.df-mega-link small { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 300; line-height: 1.4; margin-top: 2px; }
.df-mega-foot { border-top: 1px solid var(--rule); }
.df-mega-foot-in { max-width: 1120px; margin: 0 auto; padding: .85rem 3.1rem 1rem; display: flex; gap: 1.75rem; }
.df-mega .df-mega-foot a { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-size: 14px; font-weight: 500; }
.df-mega .df-mega-foot a:hover { color: var(--text); }

/* the audience menu is a two-card panel, not four columns */
.df-mega-sm .df-mega-in { max-width: 680px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); padding-bottom: 1.8rem; }

@media (hover: hover) and (min-width: 821px) {
  .df-nav-item:hover .df-mega { display: block; }
  .df-nav-item:hover .df-nav-drop { color: var(--text); }
  .df-nav-item:hover .df-nav-drop .ti { transform: rotate(180deg); }
}

@media (max-width: 1000px) and (min-width: 821px) {
  .df-mega-in { grid-template-columns: repeat(2, 1fr); }
}

/* phones: the links drop down under the bar, and Features opens as an accordion inside them */
@media (max-width: 820px) {
  .df-nav-inner { padding: 0 1.5rem; }
  .df-nav-login { display: none; }
  /* without this the CTA keeps its desktop size and wraps in the cramped nav row */
  .df-nav .df-nav-cta { padding: 9px 16px; font-size: 13px; line-height: 1.3; white-space: nowrap; }
  .df-nav-toggle { display: inline-flex; align-items: center; }
  .df-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground);  /* solid: a blur nested inside the bar's own blur renders see-through */
    border-bottom: 1px solid var(--rule); padding: 0.5rem 0;
    box-shadow: 0 12px 28px rgba(var(--accent-rgb),0.10);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .df-nav-wrap.menu-open .df-nav-links { display: flex; }
  .df-nav-links > a { padding: 0.9rem 1.5rem; font-size: 16px; }
  .df-nav-item { display: block; }
  .df-nav-drop { width: 100%; justify-content: space-between; padding: 0.9rem 1.5rem; font-size: 16px; }
  .df-nav-drop .ti { width: 18px; height: 18px; }
  .df-mega { position: static; background: transparent; border: 0; box-shadow: none; }
  .df-mega-in { grid-template-columns: 1fr; padding: 0 1rem .4rem; gap: .8rem; }
  .df-mega-sm .df-mega-in { grid-template-columns: 1fr; max-width: none; padding-bottom: .4rem; }
  .df-mega .df-mega-h { margin: .2rem 0 .2rem .9rem; }
  .df-mega .df-mega-link { padding: .5rem .9rem; align-items: center; }
  .df-mega-ico { width: 28px; height: 28px; }
  .df-mega-link strong { font-size: 15.5px; }
  .df-mega-link small { display: none; }
  .df-mega-foot { border: 0; }
  .df-mega-foot-in { padding: .3rem 1.9rem .9rem; flex-direction: column; gap: .75rem; }
  .df-nav-ml { display: block; border-top: 1px solid var(--rule); margin-top: 0.4rem; padding-top: 1rem; }
}

/* never print the nav (the birth plan builder prints its plan) */
@media print {
  .df-nav-wrap { display: none; }
}