/**
 * Theme chrome — nav, footer, password gate, fallback.
 *
 * These were inline JSX styles in the prototype rather than part of any route
 * stylesheet, so they're reconstructed here from the original nav spec.
 * Tokens come from style.css :root, which loads on every route.
 */

/* --- Nav ---------------------------------------------------------------- */
.wmd-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 48px;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
  transition:
    background .4s var(--wmd-ease),
    padding .4s var(--wmd-ease),
    border-color .4s var(--wmd-ease),
    backdrop-filter .4s var(--wmd-ease);
}

.wmd-nav.scrolled {
  padding: 16px 48px;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(247, 247, 245, .09);
}

.wmd-nav-logo a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.wmd-nav-links {
  display: flex;
  align-items: center;
}

.wmd-nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.wmd-nav-menu li { position: relative; }

.wmd-nav-menu a {
  color: var(--wmd-gray);
  text-decoration: none;
  transition: color .3s;
}

.wmd-nav-menu a:hover { color: var(--wmd-white); }

.wmd-nav-menu li.is-active > a,
.wmd-nav-menu li.current-menu-item > a { color: var(--wmd-white); }

/*
 * Active-section underline, matching the prototype's scroll-spy indicator.
 *
 * Two different things mark a nav item active, and both have to be styled.
 * The scroll-spy in wmd.js only tracks menu items whose href holds a hash it
 * can resolve to a section on the page, so it drives .is-active for Work,
 * Process, Services, Tools, About and Testimonials. Contact is a real page
 * link with no hash — the spy skips it entirely, and the only class it ever
 * gets is WordPress's own .current-menu-item. Without this second selector
 * Contact is the one tab that never underlines.
 */
.wmd-nav-menu li.is-active > a::after,
.wmd-nav-menu li.current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 1px;
  background: var(--wmd-peri);
}

.wmd-nav-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * .wmd-nav-cta is also declared in portfolio.css, but that file only loads on
 * the homepage — every other route (contact, free-quote, proposal) rendered the
 * shared nav's buttons as bare underlined links. The nav is chrome, so its
 * styling belongs here where it loads on every page. Values match the
 * prototype's originals.
 */
.wmd-nav-cta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .05em;
  border: 1px solid var(--wmd-line-strong);
  padding: 10px 20px;
  border-radius: 100px;
  color: var(--wmd-white);
  text-decoration: none;
  white-space: nowrap;
  transition: all .35s var(--wmd-ease);
}

.wmd-nav-cta:hover {
  border-color: var(--wmd-peri);
  background: var(--wmd-peri);
  color: var(--wmd-black);
}

.wmd-nav-cta--primary {
  background: var(--wmd-peri);
  border-color: var(--wmd-peri);
  color: var(--wmd-black);
}

.wmd-nav-cta--primary:hover {
  background: transparent;
  border-color: var(--wmd-peri);
  color: var(--wmd-peri);
}

/* --- Mobile nav --------------------------------------------------------- */
.wmd-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--wmd-line-strong);
  border-radius: 50%;
  cursor: pointer;
}

.wmd-nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--wmd-white);
  transition: transform .3s var(--wmd-ease), opacity .2s;
}

.wmd-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.wmd-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1100px) {
  .wmd-nav { padding: 18px 24px; }
  .wmd-nav.scrolled { padding: 14px 24px; }

  /*
   * The toggle is also the close button — its bars rotate into an X once
   * aria-expanded flips. But .wmd-nav-links below is position:fixed while the
   * toggle was static, and inside .wmd-nav's stacking context that means the
   * open panel paints straight over the button. The X was there the whole
   * time; it just couldn't be clicked, so an opened menu had no way out.
   * Lifting the toggle above the panel lets it close what it opened.
   */
  .wmd-nav-toggle {
    display: flex;
    position: relative;
    z-index: 2;
  }

  .wmd-nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    padding: 96px 24px 32px;
    background: rgba(8, 8, 10, .97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--wmd-line);
    transform: translateY(-100%);
    transition: transform .45s var(--wmd-ease);
  }

  .wmd-nav-links.open { transform: translateY(0); }

  .wmd-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    font-size: 20px;
    font-family: 'Space Grotesk', sans-serif;
  }

  .wmd-nav-ctas { display: none; }
}

@media (max-width: 560px) {
  .wmd-nav-logo svg { height: 18px !important; }
}

/* --- Footer ------------------------------------------------------------- */
.wmd-footer {
  border-top: 1px solid var(--wmd-line);
  padding: 56px 48px;
  background: var(--wmd-black);
}

.wmd-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.wmd-footer-brand svg { opacity: .8; }

.wmd-footer-meta {
  margin: 14px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wmd-gray-dim);
}

.wmd-footer-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
}

.wmd-footer-links a {
  color: var(--wmd-gray);
  text-decoration: none;
  transition: color .3s;
}

.wmd-footer-links a:hover { color: var(--wmd-peri); }

.wmd-footer-copy {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--wmd-gray-dim);
}

/* The DevQ credit sits with the copyright but shouldn't compete with it. */
.wmd-footer-credit::before {
  content: '·';
  margin: 0 6px;
  color: var(--wmd-gray-dim);
}

.wmd-footer-credit a {
  color: var(--wmd-gray-dim);
  text-decoration: none;
  transition: color .3s;
}

.wmd-footer-credit a:hover,
.wmd-footer-credit a:focus-visible {
  color: var(--wmd-peri);
}

@media (max-width: 480px) {
  /* Stacked, the separator dot reads as a typo. */
  .wmd-footer-credit { display: block; }
  .wmd-footer-credit::before { content: none; }
}

@media (max-width: 800px) {
  .wmd-footer { padding: 40px 24px; }
  .wmd-footer-inner { align-items: flex-start; flex-direction: column; gap: 24px; }
}

/* --- Password gate ------------------------------------------------------ */
.wmd-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 24px 80px;
}

.wmd-gate-inner {
  width: 100%;
  max-width: 480px;
  padding: 44px;
  background: var(--wmd-black-soft);
  border: 1px solid var(--wmd-line);
  border-radius: 20px;
}

.wmd-gate-title {
  margin: 18px 0 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--wmd-white);
}

.wmd-gate-copy {
  margin: 0 0 26px;
  color: var(--wmd-gray);
  font-size: 14px;
  line-height: 1.7;
}

.wmd-gate .post-password-form { margin: 0; }

.wmd-gate .post-password-form p {
  margin: 0 0 14px;
  color: var(--wmd-gray);
  font-size: 13px;
  line-height: 1.6;
}

.wmd-gate .post-password-form label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wmd-peri);
}

.wmd-gate .post-password-form input[type="password"] {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  background: rgba(247, 247, 245, .04);
  border: 1px solid var(--wmd-line-strong);
  border-radius: 10px;
  color: var(--wmd-white);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}

.wmd-gate .post-password-form input[type="password"]:focus {
  border-color: var(--wmd-peri);
  outline: none;
}

.wmd-gate .post-password-form input[type="submit"] {
  margin-top: 16px;
  padding: 13px 26px;
  background: var(--wmd-white);
  border: 1px solid var(--wmd-white);
  border-radius: 100px;
  color: var(--wmd-black);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, border-color .3s;
}

.wmd-gate .post-password-form input[type="submit"]:hover {
  background: var(--wmd-peri);
  border-color: var(--wmd-peri);
}

/* --- Fallback / 404 ----------------------------------------------------- */
.wmd-fallback {
  min-height: 76vh;
  display: flex;
  align-items: center;
  padding: 180px 48px 100px;
}

.wmd-fallback-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.wmd-fallback-title {
  margin: 18px 0 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -.02em;
  line-height: 1.02;
  color: var(--wmd-white);
}

.wmd-fallback-copy {
  max-width: 420px;
  margin: 0 0 32px;
  color: var(--wmd-gray);
  font-size: 16px;
  line-height: 1.7;
}

.wmd-fallback-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.wmd-fallback-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--wmd-line);
}

.wmd-fallback-item h2 {
  margin: 0 0 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 26px;
}

.wmd-fallback-item a { text-decoration: none; transition: color .3s; }
.wmd-fallback-item a:hover { color: var(--wmd-peri); }
.wmd-fallback-excerpt { color: var(--wmd-gray); font-size: 14px; line-height: 1.7; }

@media (max-width: 800px) {
  .wmd-fallback { padding: 140px 24px 80px; }
}