/* ═══════════════════════════════════════════════════════════════
   Money.net Theme — Base Styles
   Brand variables + utilities not expressible in Tailwind config
   ═══════════════════════════════════════════════════════════════ */

/* CSS custom properties */
:root {
  --mn-navy:  #041E3F;
  --mn-brand: #094087;
  --mn-sky:   #639BC9;
  --mn-white: #ffffff;
  --mn-font-display: "League Spartan", system-ui, sans-serif;
  --mn-font-body:    "Inter", system-ui, sans-serif;
}

/* Base body font — Tailwind's preflight doesn't set a body font */
body {
  font-family: var(--mn-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dot-grid overlay used in navy hero sections */
.dot-grid {
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* FAQ accordion animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 300px;
}

/* Monospace for API code blocks */
.code-block {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
}

/* ─── Theme-rendered page content ──────────────────────────────────────────── */
/* Wraps template-parts/pages/*. Keeps the 10px gutter these pages had inside
   their Elementor container, so moving them into the theme changes nothing. */
.mn-page-content {
  padding: 10px;
}

/* Legal pages once Elementor is off — the layout of the boxed Elementor
   container they used to sit in (see mn_the_page_content()). */
.mn-boxed {
  max-width: 1160px; /* 1140px of content + 10px padding each side (border-box) */
  margin: 0 auto;
  padding: 10px;
  color: #0F172A;
}

/* Legal pages (Privacy Policy, Terms) still use Elementor text editor widgets,
   which take the kit's Roboto. Set them in the theme body font, Inter. This
   rule can go once Elementor is deactivated — the body font then applies. */
#mn-content .elementor-widget-text-editor {
  font-family: var(--mn-font-body);
}

/* ─── WordPress Nav Menu — sub-nav styling ───────────────────────────────────── */
/* Styles the menu output from wp_nav_menu() in both nav templates.
   Active state is automatic via WordPress's current-menu-item class. */

.mn-subnav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 0;
  overflow-x: auto;
}

.mn-subnav li a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

.mn-subnav li a:hover {
  color: #041E3F;
  background-color: #F1F5F9;
}

/* Active state — WordPress sets these classes automatically on the current page */
.mn-subnav li.current-menu-item > a,
.mn-subnav li.current-menu-ancestor > a,
.mn-subnav li.current_page_item > a,
.mn-subnav li.current_page_ancestor > a {
  color: #094087;
  background-color: rgba(9, 64, 135, 0.1);
}

/* ─── Mobile nav menu ────────────────────────────────────────────────────────── */
.mn-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mn-mobile-nav li a {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #334155;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.15s;
}

.mn-mobile-nav li a:hover {
  color: #041E3F;
  background-color: #F1F5F9;
}

.mn-mobile-nav li.current-menu-item > a,
.mn-mobile-nav li.current_page_item > a {
  color: #094087;
  background-color: rgba(9, 64, 135, 0.08);
}

/* ─── Signup page ────────────────────────────────────────────────────────────── */

/* Reusable input style — apply with class="mn-input" */
.mn-input {
  display: block;
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #1E293B;
  background-color: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.mn-input:focus {
  outline: none;
  border-color: #094087;
  box-shadow: 0 0 0 3px rgba(9, 64, 135, 0.12);
}

/* Restore dropdown arrow on <select> elements — Tailwind/appearance:none removes it */
select.mn-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem 1rem;
  padding-right: 2.25rem;
  cursor: pointer;
}

/* Form disabled state while submitting */
.sending-form {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Feedback messages in #results ── */
#results {
  min-height: 0;
  transition: min-height 0.3s ease;
}

.signup-success {
  display: block;
  text-align: center;
  padding: 6rem 1rem;
  font-size: 1.5rem;
  line-height: 2.25rem;
  color: #094087;
  font-weight: 600;
}

.signup-error {
  display: block;
  background-color: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #DC2626;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}
.signup-error a {
  color: #094087;
  text-decoration: underline;
}
.signup-error strong {
  display: block;
  margin-top: 0.5rem;
}

/* ─── Restore list styles stripped by Tailwind preflight ────────────────────── */
/* Tailwind resets all ul/ol to list-style:none. This restores bullets and
   numbers inside any page content area.                                     */
#mn-content ul,
#mn-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
#mn-content ul {
  list-style-type: disc;
}
#mn-content ol {
  list-style-type: decimal;
}
#mn-content li {
  margin-bottom: 0.35rem;
  padding-left: 0.25rem;
}
/* Nested lists */
#mn-content ul ul {
  list-style-type: circle;
  margin-top: 0.35rem;
  margin-bottom: 0;
}
#mn-content ul ul ul {
  list-style-type: square;
}

/* ─── WordPress admin bar offset ─────────────────────────────────────────────── */
.admin-bar header.sticky {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar header.sticky {
    top: 46px;
  }
}