/* ==========================================================================
   One to One Thousand — style.css
   Colour palette sampled directly from the original site artwork
   (img/hero-one-to-one-thousand.jpg) and the original landing.css:

     sage   #a7be90  hero / band background   (dominant colour of the artwork)
     mint   #8cdda3  brand + title green      (the "One to One Thousand" wordmark)
     ink    #222222  headings                 (original h1 colour)
     muted  #808080  body copy                (original .mcnTextContent colour)
     page   #f7f7f7  page background          (original body colour)
     white  #ffffff  content surfaces         (original .contentContainer colour)
   ========================================================================== */

:root {
  --o2k-sage: #a7be90;
  --o2k-sage-dark: #8ba173;
  --o2k-sage-soft: #eef3e8;
  --o2k-mint: #8cdda3;
  --o2k-mint-dark: #4fb377;
  --o2k-ink: #222222;
  --o2k-muted: #808080;
  --o2k-page: #f7f7f7;
  --o2k-white: #ffffff;
  --o2k-line: #e3e3e3;

  /* Nudge Bootstrap's own variables toward the brand palette */
  --bs-primary: #4fb377;
  --bs-primary-rgb: 79, 179, 119;
  --bs-body-color: var(--o2k-ink);
  --bs-body-bg: var(--o2k-page);
  --bs-link-color: #3d8f5e;
  --bs-link-color-rgb: 61, 143, 94;
  --bs-link-hover-color: #2d6e48;
  --bs-border-color: var(--o2k-line);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  /* The original template used Helvetica throughout — kept for fidelity */
  font-family: Helvetica, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--o2k-muted);
  background-color: var(--o2k-page);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#site-content {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--o2k-ink);
  font-weight: bold;
  letter-spacing: normal;
}

h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.lead-muted {
  font-size: 1.0625rem;
  color: var(--o2k-muted);
}

a {
  text-underline-offset: 2px;
}

.text-muted-o2k {
  color: var(--o2k-muted) !important;
}

.section-block {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.section-block-tight {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

hr {
  border-color: var(--o2k-line);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--o2k-white);
  border-bottom: 1px solid var(--o2k-line);
  box-shadow: 0 1px 3px rgba(34, 34, 34, .06);
}

.site-header .navbar {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.brand-mark {
  height: 42px;
  width: auto;
}

.brand-text {
  display: block;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--o2k-ink);
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--o2k-sage-dark);
}

.site-header .nav-link {
  color: var(--o2k-ink);
  font-size: .9375rem;
  padding-left: .85rem;
  padding-right: .85rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--o2k-mint-dark);
}

.site-header .nav-link.active {
  color: var(--o2k-mint-dark);
  font-weight: bold;
}

.navbar-toggler {
  border-color: var(--o2k-line);
}

/* --------------------------------------------------------------------------
   Buttons / badges
   -------------------------------------------------------------------------- */

.btn-brand {
  background-color: var(--o2k-mint);
  border: 1px solid var(--o2k-mint-dark);
  color: #1d2b1f;
  font-weight: bold;
  padding: .55rem 1.5rem;
  border-radius: .35rem;
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
  background-color: var(--o2k-mint-dark);
  border-color: var(--o2k-mint-dark);
  color: #ffffff;
}

.btn-outline-ink {
  border: 1px solid var(--o2k-ink);
  color: var(--o2k-ink);
  font-weight: bold;
  padding: .55rem 1.5rem;
  border-radius: .35rem;
}

.btn-outline-ink:hover,
.btn-outline-ink:focus {
  background-color: var(--o2k-ink);
  color: #ffffff;
}

.o2k-badge {
  display: inline-block;
  background-color: var(--o2k-sage-soft);
  color: #4f6b3a;
  border: 1px solid var(--o2k-sage);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: bold;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .85rem;
}

/* --------------------------------------------------------------------------
   Hero — sage band with the original artwork on a white card
   -------------------------------------------------------------------------- */

.hero {
  background-color: var(--o2k-sage);
  padding: 2.5rem 0 2.75rem;
}

.hero-frame {
  background-color: var(--o2k-white);
  border-radius: .5rem;
  padding: .6rem;
  box-shadow: 0 18px 40px -22px rgba(34, 34, 34, .55);
}

.hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .35rem;
}

.hero-headline {
  margin: 0 0 .75rem;
  text-align: center;
}

.hero-sub {
  font-size: 1.125rem;
  color: var(--o2k-muted);
  text-align: center;
}

.hero-punch {
  font-weight: bold;
  font-size: 1.125rem;
  color: var(--o2k-ink);
  text-align: center;
}

/* Page banner for the inner pages (keeps hero imagery without the big art) */
.page-banner {
  background-color: var(--o2k-sage);
  color: #ffffff;
  padding: 2.5rem 0;
  text-align: center;
}

.page-banner h1 {
  color: #ffffff;
  margin-bottom: .5rem;
}

.page-banner p {
  margin-bottom: 0;
  color: #f3f7ee;
}

/* --------------------------------------------------------------------------
   Cards / content blocks
   -------------------------------------------------------------------------- */

.card-soft {
  background-color: var(--o2k-white);
  border: 1px solid var(--o2k-line);
  border-radius: .5rem;
  padding: 1.5rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(34, 34, 34, .45);
}

.card-soft h3 {
  font-size: 1.125rem;
  margin-bottom: .5rem;
}

.card-soft p:last-child {
  margin-bottom: 0;
}

.card-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--o2k-mint-dark);
  margin-bottom: .6rem;
}

.surface {
  background-color: var(--o2k-white);
  border: 1px solid var(--o2k-line);
  border-radius: .5rem;
  padding: 1.75rem;
}

/* --------------------------------------------------------------------------
   The 1000-step concept + episode list
   -------------------------------------------------------------------------- */

.step-line {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--o2k-line);
}

.step-line:last-child {
  border-bottom: 0;
}

.step-number {
  flex: 0 0 auto;
  min-width: 4.25rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--o2k-mint-dark);
}

.step-title {
  font-weight: bold;
  color: var(--o2k-ink);
}

.episode-card .episode-meta {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--o2k-sage-dark);
  margin-bottom: .35rem;
}

.episode-card .episode-title {
  font-size: 1.0625rem;
  font-weight: bold;
  color: var(--o2k-ink);
  margin-bottom: .4rem;
}

.episode-card p {
  margin-bottom: 0;
}

.progress-thin {
  height: .5rem;
  background-color: var(--o2k-sage-soft);
}

.progress-thin .progress-bar {
  background-color: var(--o2k-mint-dark);
}

/* --------------------------------------------------------------------------
   Waitlist / contact card — wraps the Web3Forms contact form in the homepage
   waitlist section.
   -------------------------------------------------------------------------- */

.waitlist {
  background-color: var(--o2k-white);
  border: 1px solid var(--o2k-line);
  border-radius: .5rem;
  padding: 1.75rem;
}

.waitlist .form-label {
  font-weight: bold;
  color: var(--o2k-ink);
  font-size: .875rem;
  margin-bottom: .25rem;
}

.waitlist .asterisk {
  color: #c0392b;
}

.waitlist-note {
  font-size: .8125rem;
  color: var(--o2k-muted);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contact form (homepage #waitlist) — posted to Web3Forms by js/main.js
   -------------------------------------------------------------------------- */

/* The status slot is hidden until the script writes a message into it */
#form-status {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: .875rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  background-color: var(--o2k-ink);
  color: #b9b9b9;
  font-size: .875rem;
  padding: 2.25rem 0 1.25rem;
  margin-top: 3rem;
}

.site-footer h2 {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--o2k-mint);
  margin-bottom: .85rem;
}

.site-footer a {
  color: #dedede;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--o2k-mint);
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-footer li {
  margin-bottom: .4rem;
}

.footer-bottom {
  border-top: 1px solid #3a3a3a;
  margin-top: 1.75rem;
  padding-top: 1rem;
  font-size: .8125rem;
  color: #8f8f8f;
}

.footer-logo {
  height: 38px;
  width: auto;
  margin-bottom: .75rem;
}

/* Floating "back to top" control, revealed by js/main.js */
#back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  box-shadow: 0 10px 24px -12px rgba(34, 34, 34, .6);
}

/* --------------------------------------------------------------------------
   FAQ accordion — themed to the brand palette instead of Bootstrap's blue
   -------------------------------------------------------------------------- */

.accordion {
  --bs-accordion-color: var(--o2k-muted);
  --bs-accordion-bg: var(--o2k-white);
  --bs-accordion-border-color: var(--o2k-line);
  --bs-accordion-btn-color: var(--o2k-ink);
  --bs-accordion-btn-focus-border-color: var(--o2k-sage);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(140, 221, 163, .45);
  --bs-accordion-active-color: #2d6e48;
  --bs-accordion-active-bg: var(--o2k-sage-soft);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222222'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232d6e48'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
  font-weight: bold;
  font-size: 1rem;
}

.accordion-body {
  font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .site-header .nav-link {
    padding-left: 0;
    padding-right: 0;
  }

  .brand-mark {
    height: 36px;
  }
}

@media (max-width: 575.98px) {
  .hero {
    padding: 1.25rem 0 1.5rem;
  }

  .hero-frame {
    padding: .35rem;
  }

  .page-banner {
    padding: 1.75rem 0;
  }

  .surface,
  .waitlist {
    padding: 1.25rem;
  }

  .step-line {
    display: block;
  }

  .step-number {
    min-width: 0;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-soft,
  .card-soft:hover {
    transition: none;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}