/* Legend Helm — Green theme override
   Matches the desktop app's "CareTrack Green" palette
   (BuildNotes Section 18.4) for brand consistency between
   the Windows app and the public website.

   Values:
     Primary/accent : #3A8F72  (RGB 58,143,114  — medium teal green, SidebarBg)
     Surface (light): #E8F7F2  (RGB 232,247,242 — light mint, Surface/chrome)
     Alt surface     : #F0FAF6  (RGB 240,250,246 — pale mint, GridRowAlt)
     Selected/hover  : #7BCFAC  (RGB 123,207,172 — mid mint, GridRowSelected)

   This file loads after main.css and overrides Nexa's CSS custom
   properties — no changes made to the vendored template file itself.
*/

:root {
  --background-color: #ffffff;
  --default-color: #333333;
  --heading-color: #1a1a1a;
  --accent-color: #3A8F72;
  --surface-color: #E8F7F2;
  --contrast-color: #ffffff;
}

:root {
  --nav-color: #333333;
  --nav-hover-color: #3A8F72;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #333333;
  --nav-dropdown-hover-color: #3A8F72;
}

.light-background {
  --background-color: #F0FAF6;
  --surface-color: #E8F7F2;
}

/* .header locally hardcodes --background-color in main.css (#070708) and
   .scrolled .header does the same on scroll (rgba(7,7,8,0.8)) — both must
   be overridden here directly, since a :root override alone does not win
   against a more specific same-property declaration on .header itself. */
.header {
  --background-color: #ffffff;
}

.scrolled .header {
  --background-color: rgba(255, 255, 255, 0.9);
}

/* Nav hover/active — color alone (green-on-white) reads as low-contrast
   at a glance, so pair it with weight + a slight size bump for a clearer
   "selected" signal. */
@media (min-width: 1200px) {
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    font-weight: 700;
    font-size: 17px;
  }
}

/* Hero paragraph wraps a single word onto its own line at 600px — give it
   a bit more room. */
.hero .hero-content p {
  max-width: 700px;
}

/* main.css zeroes out .section-title p margin-bottom (and Bootstrap's
   reboot already zeroes margin-top), which is fine for the template's
   usual single intro paragraph. helmeditions.html stacks three
   paragraphs under the Editions heading, and with no fix they render
   with zero gap between them — one dense run-on block, worse on narrow
   phone widths where each sentence already wraps to multiple lines.
   Restore spacing between stacked paragraphs; keep the last one flush
   with the section-title's own bottom margin, matching original intent. */
.section-title p {
  margin-bottom: 0.75rem;
}

.section-title p:last-of-type {
  margin-bottom: 0;
}

/* main.css scopes .btn-get-started / .btn-learn-more button styling to
   `.about .content .cta-buttons` only. Generalize it here so any
   `.cta-buttons` row (e.g. inside a .pricing-card, as on
   helmeditions.html) renders as real buttons instead of falling back to
   plain unstyled links. */
.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-buttons .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 500;
  transition: 0.3s;
  display: grid;
  place-items: center;
}

.cta-buttons .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: translateY(-3px);
}

.cta-buttons .btn-learn-more {
  background-color: transparent;
  color: var(--accent-color);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 500;
  /* Was a color-mix() border at 80% transparent — visually so faint it read
     as plain text rather than a button, especially on mobile screens (see
     Cowork conversation, July 2026). A fully-opaque accent-color border
     keeps the pill outlined and recognizable as a button at any size. */
  border: 2px solid var(--accent-color);
  transition: 0.3s;
}

.cta-buttons .btn-learn-more:hover {
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  transform: translateY(-3px);
}

/* The "Why we built it" section still carries the original Nexa .about
   .content wrapper classes underneath its Option 4A relabeling. main.css's
   own scoped rule (`.about .content .cta-buttons .btn-learn-more`) has
   higher specificity than the general `.cta-buttons .btn-learn-more` rule
   above, so it was winning there and keeping the old near-invisible 80%-
   transparent border on that one button ("See our editions") even after
   the general fix — exactly the "some section links render as buttons,
   some as text only" inconsistency reported. Re-declaring it at matching
   specificity here (loaded after main.css) makes the fix apply everywhere. */
.about .content .cta-buttons .btn-learn-more {
  border: 2px solid var(--accent-color);
}

.about .content .cta-buttons .btn-learn-more:hover {
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

/* The hero's "Learn more" link is a section-link button (scrolls to
   #services) exactly like the .cta-buttons .btn-learn-more links at the
   bottom of every other section — but main.css styles it via the older
   Nexa .hero-btns treatment instead (dark outline, uppercase, bold), which
   looked inconsistent scrolling past the other four section-link buttons
   using the lighter accent-color pill style above. Restyle it to match the
   one section-link button look used everywhere else on the page. Sizing
   (padding, flex layout) is left alone so it still pairs visually with the
   "Get in touch" primary button beside it. */
.hero .hero-content .hero-btns .btn-outline {
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.hero .hero-content .hero-btns .btn-outline:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

/* Note: the hero's "See what Legend Helm does" scroll-down indicator
   (previously styled here) was removed from index.html now that the
   sticky header's story-nav row and the hero's own "Learn more" button
   both already get a visitor to the same place — a third redundant path
   just added clutter. */

/* Story nav — second header row on index.html (Option 4A). This reuses
   main.js's generic `.navmenu a` scrollspy selector via the compound class
   `navmenu story-navmenu`, so it gets active-link highlighting for free.
   But main.css's mobile rules for `.navmenu` (the *first* row — Home/
   Privacy/Terms/Contact) turn it into an absolute-positioned slide-out
   panel behind a hamburger toggle below 1200px, and this second row has no
   toggle button of its own. Rather than build a second mobile menu, this
   block opts the story-nav fully out of main.css's `.navmenu` positioning
   at every width and always renders it as a plain, wrapping, centered
   button row — `!important` is needed because main.css's mobile
   `.navmenu ul` rule is itself in a `@media` block with matching
   specificity that would otherwise win by source order. */
.story-nav {
  background-color: var(--background-color);
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.story-nav .story-navmenu {
  position: static !important;
  display: block !important;
  padding: 0;
  background: none !important;
}

.story-nav .story-navmenu ul {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  width: 100%;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.story-nav .story-navmenu li {
  position: static;
}

.story-nav .story-navmenu a {
  display: block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--default-color);
  white-space: nowrap;
  transition: 0.3s;
}

/* main.css's desktop `.navmenu li:last-child a { padding-right: 0; }` is
   meant to flush the ORIGINAL single-row nav's last item against the edge
   of the header container. The story-nav is centered, not edge-aligned, so
   that rule just leaves its last pill (FAQ) with no right-hand padding,
   making its label look cramped against the pill's own edge compared to
   every other item. Restore it here. */
.story-nav .story-navmenu li:last-child a {
  padding-right: 14px;
}

.story-nav .story-navmenu a:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.story-nav .story-navmenu a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-weight: 600;
  font-size: 14px;
}

.story-nav .story-navmenu i {
  display: none;
}

@media (max-width: 575px) {
  .story-nav .story-navmenu ul {
    gap: 4px 6px;
    padding: 8px 6px;
  }

  .story-nav .story-navmenu a {
    padding: 5px 10px;
    font-size: 13px;
  }

  .story-nav .story-navmenu li:last-child a {
    padding-right: 10px;
  }
}

/* The header is now two rows tall (utility nav + story-nav) on index.html.
   main.css's `.section { scroll-margin-top: 90px }` (66px on mobile) was
   tuned for the old single-row header — with the second row added, a
   smooth-scroll or scrollspy jump now lands a section heading partly
   underneath the story-nav bar. Bump it to clear both rows. The taller
   header is index.html-only, but scroll-margin-top is harmless on other
   pages (they don't have a story-nav to clip), so setting it site-wide is
   simplest and keeps every page's scroll-margin consistent. */
.section {
  scroll-margin-top: 150px;
}

@media (max-width: 575px) {
  .section {
    scroll-margin-top: 120px;
  }
}