/* ============================================================
   LUNCHBOX.KIDS — LUNCHBOX MANUAL PAGE
   Loads after styles.css + home.css.
   Navy background theme (matches Tools page).
   ============================================================ */

/* ====== DESKTOP ====== */
.page-manual.shell > main {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-manual.shell > main > footer { margin-top: auto; }

/* Top nav on navy */
.page-manual.shell > main > .topnav {
  background: var(--navy);
  border-bottom: 1px solid rgba(248,244,236,.12);
}
.page-manual.shell > main > .topnav .topnav-link { color: rgba(248,244,236,.75); }
.page-manual.shell > main > .topnav .topnav-link:hover,
.page-manual.shell > main > .topnav .topnav-link.active { color: var(--cream); }
.page-manual.shell > main > .topnav .sb-cta { background: var(--mint); color: var(--navy); }
.page-manual.shell > main > .topnav .sb-cta:hover { background: #a1f2af; }
.page-manual.shell > main > .topnav .sb-cta-disc { background: var(--navy); color: var(--mint); }

/* Hero — Formula banner on navy */
.page-manual.shell > main .hero {
  background: var(--navy);
  color: var(--cream);
}
/* Eyebrow label + rule line match the Tools page inverted look */
.page-manual.shell > main .eyebrow {
  --section-label-color: var(--cream);
  --section-rule-color: var(--navy-section-rule-color);
}
.page-manual.shell > main .hero .hero-h1 { color: var(--cream); }
.page-manual.shell > main .hero .hero-lede { color: rgba(248,244,236,.78); }
.page-manual.shell > main .hero .trust-item { color: rgba(248,244,236,.85); }
.page-manual.shell > main .hero .formula-cta-form .legal-optin { color: rgba(248,244,236,.55); }
.page-manual.shell > main .hero .formula-cta-form .legal-optin a { color: var(--cream); }

.page-manual.shell > main .hero .hero-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.page-manual.shell > main .hero .hero-card-media {
  background: transparent;
}

.page-manual.shell > main .hero .hero-card-caption { color: rgba(248,244,236,.6); }

.page-manual.shell > main .hero .cta-form {
  background: rgba(248,244,236,.08);
  border: 1px solid rgba(248,244,236,.18);
}
.page-manual.shell > main .hero .cta-form input { color: var(--cream); background: transparent; }
.page-manual.shell > main .hero .cta-form input::placeholder { color: rgba(248,244,236,.45); }
.page-manual.shell > main .hero .cta-form:focus-within {
  border-color: var(--mint);
  box-shadow: 0 6px 24px -16px rgba(0,0,0,.4);
}

.page-manual.shell > main .hero .cta-btn { background: var(--mint); color: var(--navy); }
.page-manual.shell > main .hero .cta-btn:hover { background: #a1f2af; }
.page-manual.shell > main .hero .cta-btn .disc { background: var(--navy); color: var(--mint); }
.page-manual.shell > main .hero .cta-btn:hover .disc { background: var(--navy); color: var(--mint); }

/* ====== MOBILE ====== */
@media (max-width: 768px) {
  .page-manual.m-only { background: var(--navy); }
  .page-manual .m-header {
    background: var(--navy);
    border-bottom: 1px solid rgba(248,244,236,.12);
  }
  .page-manual .m-header-cta { background: var(--mint); color: var(--navy); }
  .page-manual .m-header-cta .disc { background: var(--navy); color: var(--mint); }
  .page-manual .m-content { background: var(--navy); }

  .page-manual .fm-hero {
    color: var(--cream);
    padding-bottom: 40px;
  }
  .page-manual .fm-hero .eyebrow {
    --section-label-color: var(--cream);
    --section-rule-color: var(--navy-section-rule-color);
  }
  .page-manual .fm-hero .m-h1 { color: var(--cream); margin-bottom: 14px; }
  .page-manual .fm-hero .m-h1 .accent-i { color: var(--peri); }
  .page-manual .fm-hero .m-lede { color: rgba(248,244,236,.78); }
  .page-manual .fm-hero .trust-item { color: rgba(248,244,236,.85); }

  .page-manual .fm-hero .m-form input[type="email"] {
    background: rgba(248,244,236,.08);
    border: 1px solid rgba(248,244,236,.18);
    color: var(--cream);
  }
  .page-manual .fm-hero .m-form input[type="email"]::placeholder { color: rgba(248,244,236,.45); }
  .page-manual .fm-hero .m-form .cta-pill {
    background: var(--mint);
    color: var(--navy);
    width: 100%;
    justify-content: center;
  }
  .page-manual .fm-hero .m-form .cta-pill .disc { background: var(--navy); color: var(--mint); }

  .page-manual .fm-hero .legal-optin { color: rgba(248,244,236,.55); }
  .page-manual .fm-hero .legal-optin a { color: var(--cream); }

  .page-manual .fm-hero-photo-wrap { position: relative; margin-bottom: 28px; }
  .page-manual .fm-hero-photo {
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.45);
  }
  .page-manual .fm-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  .page-manual .fm-hero-photo-wrap .circle-stamp {
    position: absolute;
    bottom: -16px;
    right: -8px;
    width: 90px;
    height: 90px;
    z-index: 3;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
    animation: stampFloat 6s ease-in-out infinite;
  }
  .page-manual .fm-hero-photo-wrap .circle-stamp svg { width: 100%; height: 100%; display: block; }
  .page-manual .fm-hero-pill-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(248,244,236,.85);
    color: var(--navy);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
    white-space: nowrap;
  }
}

/* Manual mobile: keep area below the footer cream (page bg is navy). */
@media (max-width: 767px) {
  .page-manual .m-content { background: var(--cream); }
  .page-manual .fm-hero { background: var(--navy); }
  .page-manual .m-footer { margin-bottom: 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px) + 16px); }
}