/* General Page Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Guarantees the native `hidden` attribute always actually hides an
   element. Without this, any class that also sets `display` (e.g.
   `.backtest-results { display: flex }`) silently wins over the browser's
   own low-priority `[hidden] { display: none }` UA-stylesheet rule --
   confirmed directly: the Simulate Portfolio modal's results section
   stayed fully visible on screen even while `hidden` was `true` in the
   DOM, because `.backtest-results`'s `display: flex` overrode it. This
   app toggles `hidden` on many elements across many stylesheets, so a
   single global safeguard here is far more reliable than auditing every
   class that might set `display` on a `[hidden]`-toggled element.  */
[hidden] {
    display: none !important;
}

html {
  -webkit-text-size-adjust: 100%; /* Fixes iOS Safari auto-scaling */
  text-size-adjust: 100%;         /* Fixes standard browser auto-scaling */
  font-size: 16px;                /* Forces a consistent baseline across all pages */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    min-height: 100%;
    overflow-x: hidden;

    /* Set the path to your image */
    background-color: #050816;
    /* Not `!important`: the `@media (max-width: 600px)` block below needs
       to be able to null this out on mobile (in favor of the fixed-inset
       `::before` pseudo-element) using plain cascade order. It used to be
       `!important` here, which silently beat that mobile override (which
       wasn't itself `!important`) -- so this `background-attachment: fixed`
       image stayed active on phones the whole time, layered underneath the
       intended fix. `background-attachment: fixed` ties this image's paint
       box to the *visual* viewport, which several mobile browsers resize as
       the address bar/toolbar collapses while scrolling, so the image
       visibly jumped in scale on every scroll. */
    background-image: url("/images/Generated%20Image%20of%20Moonshot2.jpg");
    
    /* Prevent the image from repeating like a grid */
    background-repeat: no-repeat; 
    
    /* Scale the image to perfectly cover the entire viewport */
    background-size: cover; 
    
    /* Anchored to the top-right (not centered) so the moon -- the
       desktop image's most visually distinctive feature -- always stays
       fully in view. Confirmed by direct pixel measurement: the moon's
       disk sits only ~4% from the image's top edge and ~2% from its
       right edge. Centering crops symmetrically from both sides of
       whichever dimension "cover" has to shrink to fill the viewport, so
       on a wide/short window (crops top+bottom) that reached the moon's
       top edge almost immediately, and on a narrow/tall window (crops
       left+right) it reached the moon's right edge almost immediately --
       the same class of bug already fixed for the mobile background
       image lower in this file. */
    background-position: right top;
    
    /* Optional: Keep background fixed in place while scrolling */
    background-attachment: fixed; 
}

body {
    min-height: 100vh;
}

/* Use the same full-viewport background on every HTML page. */
body.app-page {
    background-color: #050816;
    /* Not `!important` -- see the base `body` rule above; the mobile
       override (`body.app-page { background-image: none; }` below) needs
       plain cascade order to win here. */
    background-image: url("/images/Generated%20Image%20of%20Moonshot2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right top;
    background-attachment: fixed;
}

/* Header & Navigation Styling */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    min-height: 68px;
    padding: 20px 10%;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.logo {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo:hover {
    color: #00b7ff;
}

.market-env-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    border: 1px solid rgba(0, 183, 255, 0.35);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.market-env-btn:hover {
    background: rgba(0, 183, 255, 0.18);
    border-color: #00b7ff;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(0, 183, 255, 0.45);
    transform: translateY(-1px);
}

.market-env-btn:active {
    transform: translateY(0);
}

.mobile-nav-toggle {
    display: none;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.3s;
}

.nav-links a:visited {
    color: white;
}

.nav-links a:hover {
    color: #00b7ff;
}

/* Hero / Welcome Section Layout */
.welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.hero-content {
    max-width: 600px;
}

.hero-content h1 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.hero-content h3 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 30px;
}

/* Call To Action Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-primary {
    background-color: #3498db;
    color: #fff;
}

.btn-primary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #3498db;
    color: #fff;
    border: none;
}

.btn-secondary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
  /* Unified structural sizing for all pages */
  html, body, body.app-page {
    min-height: 100svh;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    text-size-adjust: 100%;
  }

  /* The background image is painted on a fixed-position pseudo-element
     (sized to the viewport) rather than directly on `html`/`body` with
     `background-attachment: scroll` as before. That older approach sized
     the "cover" background against the *element's own box* -- which, for
     `body`, stretches to fit however tall that page's content is -- not
     the viewport. Confirmed directly: on a short page (e.g. Contact) the
     image rendered correctly, but on a long page (e.g. About, especially
     after this session added several new sections) the exact same CSS
     rendered a dramatically more zoomed-in crop of the same image, since
     "cover" had to scale up to fill a much taller box. Using
     `position: fixed` gives a box that is always exactly the viewport,
     regardless of page content length, so every page renders the same
     background consistently -- without reintroducing
     `background-attachment: fixed` directly on `body`, which is unreliable
     on several mobile browsers (the original reason this was set to
     `scroll` here in the first place).

     Height is pinned with `100lvh` (the "large" viewport height -- the
     size of the viewport when the browser's address bar/toolbar is fully
     retracted) instead of `inset: 0` or plain `vh`. Mobile browsers
     collapse/expand that toolbar *while the user scrolls*, which resizes
     the *dynamic* (a.k.a. *small*) viewport mid-scroll -- so sizing this box with
     `inset: 0` (or `vh`, which several mobile browsers tie to the small
     viewport) made its height change during the scroll gesture itself,
     forcing `background-size: cover` to keep re-scaling the image and
     producing the visible "resizing" glitch. `100lvh` stays constant
     through that toolbar show/hide, so the box -- and the cover scale
     computed from it -- never changes while scrolling. */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* fallback for browsers without lvh support */
    height: 100lvh;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    /* Anchored to the top-right corner (not centered) so the moon -- the
       image's most visually distinctive feature, positioned near the
       image's top edge and close to its right edge (only ~8% of the image's
       width separates the moon's right limb from the image's own right
       border) -- always stays fully in view.

       Vertical: on tall/narrow portrait screens "cover" already shows the
       image's full height with no vertical crop, so anchoring to the top
       has no visible effect there; on short/landscape screens (a phone
       rotated sideways, or any viewport under this 600px breakpoint with
       limited height), "cover" must crop most of the image's height to fill
       the narrow box, and a vertically-centered crop cut the moon out
       entirely, leaving a plain, moon-less starfield band.

       Horizontal: on portrait screens taller/narrower than the image's own
       ~1:1.83 aspect ratio (most modern phones -- confirmed on a
       390x844 viewport), "cover" must also crop the image's width, and
       since the moon sits close to the image's right edge, a horizontally
       centered crop left only a few pixels of margin past the moon's right
       limb -- easily eaten by the crop, clipping the moon's right side.
       Anchoring right instead guarantees that edge is never cropped. On
       viewports wide enough to show the image's full width already (no
       horizontal crop needed, e.g. that same short/landscape case above),
       this has no visible effect, matching the vertical case. */
    background-position: right top;
  }

  /* Paint exactly one viewport-sized layer. Leaving the image attached to
     body as well creates competing cover calculations on mobile browsers
     while their browser chrome expands or collapses during scrolling. */
  body,
  body.app-page {
    background-image: none;
    background-attachment: scroll;
    background-color: transparent;
    isolation: isolate;
  }

  body::before {
    background-image: url("/images/Generated%20Image%20of%20Moonshot2_mobile.jpg") !important;
  }

  /* Header & Navigation Styling */
  .header {
    position: relative;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
    background: transparent;
    min-height: 96px;
  }

  .logo {
    font-size: 1.1rem;
  }

  .header-brand {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
  }

  .market-env-btn {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    position: absolute;
    top: 18px;
    left: 8px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 32px;
    padding: 7px 8px;
    border: 1px solid rgba(0, 183, 255, 0.35);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.65);
    cursor: pointer;
  }

  .mobile-nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: #e2e8f0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .header.nav-expanded .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .header.nav-expanded .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .header.nav-expanded .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .header nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 8px;
    z-index: 10;
    width: min(220px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid rgba(0, 183, 255, 0.35);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .header.nav-expanded nav {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-links a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background: rgba(0, 183, 255, 0.18);
  }

  /* Layout Sections */
  .welcome-container {
    padding: 24px 16px;
  }

  .hero-content {
    width: 100%;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .cta-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }

  .btn {
    padding: 9px 16px;
    font-size: 14px;
  }
}

/* Phones in landscape: caught by viewport *height* (not width) since a
   phone rotated sideways is typically 560-930px wide -- well above the
   600px portrait breakpoint above, so without this it fell through to the
   plain desktop `.header` rule (flex row, no wrap, 10% side padding). The
   brand (logo + 2 buttons) and the 6-link nav don't both fit on one row
   at those widths, so with no wrap allowed they got squeezed by flexbox
   until the button labels themselves wrapped onto multiple lines,
   ballooning the header to ~225px tall on a 375px-tall viewport -- nearly
   two-thirds of the screen consumed by a garbled, misaligned nav bar.
   Real phones landscape height tops out around 430px; tablets/desktops in
   landscape are comfortably taller than 500px, so this doesn't affect them. */
@media (orientation: landscape) and (max-height: 500px) {
  .header {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px 16px;
    padding: 8px 16px;
    min-height: 0;
    text-align: center;
  }

  .header-brand {
    flex-wrap: nowrap;
    width: auto;
    gap: 10px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .market-env-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
  }

  .mobile-nav-toggle {
    display: none;
  }

  .header nav {
    display: block;
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav-links {
    flex-direction: row;
    align-items: center;
    gap: 4px 14px;
  }

  .nav-links a {
    display: inline-block;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.3;
  }
}

/* Footer Styling */
.app-footer {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    background: transparent;
}

.app-footer p {
    margin: 0;
}