/* Site-wide fixes on top of the Webflow CSS: consistent spacing, readable articles, dark mode.
   Loaded last on every page (inserted by scripts/learn.mjs). Dark mode is html[data-theme="dark"],
   set before first paint by the inline script in each page's <head>. */

:root {
  --g: clamp(16px, 4vw, 40px);
  --read: 720px;
  --link: #5f6537;
  color-scheme: light;
}

/* ---------- spacing ---------- */

.navigation-bar > .w-container,
.footer > .w-container {
  padding-left: var(--g);
  padding-right: var(--g);
}

.navigation-bar .brand-link {
  padding-left: 0;
}

.section {
  padding: clamp(40px, 7vw, 80px) var(--g);
}

/* Homepage hero: Webflow leaves an empty title group and a placeholder subheading. */
.navigation-bar + .section .section-title-group:empty,
.navigation-bar + .section .section-subheading {
  display: none;
}

@media (max-width: 767px) {
  .navigation-bar + .section {
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .navigation-bar + .section .section-heading.h1 {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.2;
  }
  .navigation-bar + .section h2.section-heading {
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: 0;
  }
  .section.accent .w-col {
    padding-left: 0;
    padding-right: 0;
  }
  .section.accent .w-col + .w-col {
    margin-top: 40px;
  }
  .section.accent .hollow-button {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Articles: one readable column at every size. */
.container-5.w-container {
  margin-top: clamp(16px, 3vw, 28px);
  margin-bottom: 12px;
  padding: 0 var(--g);
}

.container-5 .heading {
  max-width: var(--read);
  padding: 0;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
}

.image-3 {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}

.rich-text-block,
.rich-text-block.w-richtext {
  max-width: calc(var(--read) + 2 * var(--g));
  padding: 8px var(--g) 0;
  margin: 0 auto 40px;
}

.rich-text-block p,
.rich-text-block li {
  font-size: 17px;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .rich-text-block p,
  .rich-text-block li {
    font-size: 18px;
  }
}

.rich-text-block img {
  max-width: 100%;
  height: auto;
}

.rich-text-block a:not(.xlink) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.rich-text-block a:not(.xlink):hover {
  text-decoration-color: currentColor;
}

/* Footer: stacked, aligned, with real tap targets on phones. */
.footer-link-wrapper.w-clearfix {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-link-wrapper.w-clearfix::before,
.footer-link-wrapper.w-clearfix::after {
  display: none;
}

.footer-link-wrapper .info-icon {
  float: none;
  flex: none;
  margin: 0 0 6px;
}

.footer-link-wrapper .footer-link.with-icon {
  flex: 1;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .footer .w-col {
    padding-left: 0;
    padding-right: 0;
  }
  .footer .w-col + .w-col {
    margin-top: 24px;
  }
  .footer .spc {
    margin-bottom: 0;
  }
  .footer .footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    margin-bottom: 0;
  }
  .footer .submit-button-5 {
    width: 100%;
    min-height: 44px;
  }
}

/* 404: the message sits under the nav, not centered in a full-screen box. */
.utility-page-wrap {
  height: auto;
  min-height: 50vh;
  padding: 64px var(--g);
  box-sizing: border-box;
}

.utility-page-content {
  width: auto;
  max-width: 420px;
}

.lx-404-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

/* Land Data and other Webflow sections share the gutter. */
.hero-heading-left {
  padding-left: var(--g);
  padding-right: var(--g);
}

/* Mobile menu: Webflow puts translucent white text on bright olive (about 2.5:1). */
@media (max-width: 991px) {
  .navigation-menu.w-nav-menu {
    background-color: #5f6537;
  }
  .navigation-menu .navigation-link,
  .navigation-menu .navigation-link.w--current {
    color: #fff;
    font-weight: 600;
    padding-left: var(--g);
    padding-right: var(--g);
  }
  [data-theme="dark"] .navigation-menu.w-nav-menu {
    background-color: #1c1f19;
    border-bottom: 1px solid #2f3329;
  }
  [data-theme="dark"] .navigation-menu .navigation-link,
  [data-theme="dark"] .navigation-menu .navigation-link.w--current {
    color: #f2f2ea;
  }
}

/* Filled buttons: a deeper olive so white text clears 4.5:1. */
.submit-button-5,
.submit-button-5.w-button {
  background-color: #646b3c;
}

/* ---------- theme toggle ---------- */

.theme-toggle {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 10px 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #676770;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: rgba(134, 142, 79, 0.12);
  color: #5f6537;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .t-sun,
[data-theme="dark"] .theme-toggle .t-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .t-sun {
  display: block;
}

@media (max-width: 991px) {
  .theme-toggle {
    margin: 9px 4px 0 0;
  }
}

/* ---------- dark mode ---------- */

[data-theme="dark"] {
  --link: #b9c17e;
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: #141612;
  color: #d4d6ca;
}

/* Long text reads in neutral light; olive is kept for headings, labels and links. */
[data-theme="dark"] h2.section-heading:not(.h1),
[data-theme="dark"] .hero-split p,
[data-theme="dark"] .hero-heading-left p,
[data-theme="dark"] .container-2 p,
[data-theme="dark"] .section p:not(.white-text) {
  color: #d4d6ca;
}

[data-theme="dark"] .navigation-bar,
[data-theme="dark"] .section,
[data-theme="dark"] .utility-page-wrap {
  background-color: #141612;
}

[data-theme="dark"] .navigation-link {
  color: #c9ccbd;
}

[data-theme="dark"] .navigation-link.w--current,
[data-theme="dark"] .navigation-link:hover {
  color: #b9c17e;
}

@media (max-width: 991px) {
  [data-theme="dark"] .navigation-link {
    color: #f2f2ea;
  }
}

[data-theme="dark"] .w-icon-nav-menu,
[data-theme="dark"] .theme-toggle {
  color: #e9e9e2;
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .theme-toggle:focus-visible {
  background: rgba(185, 193, 126, 0.14);
  color: #b9c17e;
}

[data-theme="dark"] .w-nav-button.w--open {
  background-color: #2f3329;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .heading {
  color: #f2f2ea;
}

[data-theme="dark"] .section-heading,
[data-theme="dark"] .footer-h5s,
[data-theme="dark"] .text-block-10,
[data-theme="dark"] .field-label-7 {
  color: #b9c17e;
}

[data-theme="dark"] .rich-text-block,
[data-theme="dark"] .rich-text-block p,
[data-theme="dark"] .rich-text-block li,
[data-theme="dark"] .rich-text-block blockquote {
  color: #e3e4dc;
}

[data-theme="dark"] .rich-text-block blockquote {
  border-left-color: #4f5530;
}

[data-theme="dark"] .rich-text-block figcaption {
  color: #a7aa9c;
}

[data-theme="dark"] .section.accent {
  background-color: #4a5030;
}

[data-theme="dark"] .white-box:not(.transparent),
[data-theme="dark"] .hero-heading-left {
  background-color: #1c1f19;
  border-color: #2f3329;
}

[data-theme="dark"] .link {
  color: #b9c17e;
}

[data-theme="dark"] .footer {
  background-color: #181a15;
  border-top: 1px solid #2f3329;
}

[data-theme="dark"] .footer-link {
  color: #b9c17e;
  border-bottom-color: #2f3329;
}

[data-theme="dark"] .info-icon {
  filter: invert(1) brightness(0.92);
}

[data-theme="dark"] .w-input {
  background-color: #1c1f19;
  border-color: #3a3f33;
  color: #e9e9e2;
}

[data-theme="dark"] .w-input::placeholder {
  color: #8b8e80;
}

[data-theme="dark"] .w-form-done,
[data-theme="dark"] .w-form-fail {
  background-color: #1c1f19;
  color: #e9e9e2;
}