/* Shared nav for hand-built (non-WordPress-templated) pages: meet-your-inner-child/,
   download/meet-your-inner-child/, and any future standalone page in that mold.
   WordPress/Astra-exported pages (about/, work-with-me/, 21-days/, etc.) already have
   their own working mobile nav and should NOT use this file.

   Requires these brand variables defined in the page's own <style> :root block:
   --rose, --text-strong, --edge, --gold, --gold-soft
   (copy them from any existing custom page if starting a new one)

   See /assets/partials/custom-page-header.html for the matching markup,
   and /assets/js/custom-page-nav.js for the toggle behavior. */

.site-nav {
  width: 100%; max-width: 1100px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; padding: 24px 0; margin-bottom: 36px;
  flex-wrap: wrap;
}
.site-nav-logo img { width: 220px; height: auto; display: block; }
.site-nav-links { display: flex; align-items: center; gap: 26px; row-gap: 10px; flex-wrap: wrap; }
.site-nav-links a { font-family: "IBM Plex Serif", Georgia, serif; font-size: 18px; font-weight: 400; color: var(--rose); text-decoration: none; }
.site-nav-links a:hover, .site-nav-links a.current { color: var(--text-strong); }
.site-nav-cta { background: var(--gold); color: #fff !important; padding: 12px 20px; border-radius: 5px; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; }
.site-nav-cta:hover { background: var(--gold-soft); }

.site-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.site-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-strong); margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.site-nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle.active span:nth-child(2) { opacity: 0; }
.site-nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .site-nav-toggle { display: block; }
  .site-nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; margin-top: 4px; border-top: 1px solid var(--edge); }
  .site-nav-links.open { display: flex; }
}