/* ==========================================================================
   The only stylesheet written for this page.

   The header, navigation, headings, orange italic taglines, links, footer,
   spacing and colour all come from rootedinbitcoin.com's own CSS, loaded
   ahead of this file. The main site has no form anywhere, so Bootstrap's
   form controls need a little tuning to sit inside the theme. That is all
   this file does.

   Values below are the theme's own, read from its stylesheets:
     #F7931A   orange   (layout.css, .btn.btn-primary and h3)
     #2f3200   ink      (output.css, .nav-link and .text-black)
     .25rem    radius   (layout.css applies it to .form-control and .btn)
   They appear only as fallbacks behind --bs-primary.
   ========================================================================== */

.waitlist-form .form-label{
  font-weight:600;
  margin-bottom:.4rem;
}
.waitlist-form .req{color:#F7931A}

.waitlist-form .form-control,
.waitlist-form .form-select{
  color:#2f3200;
  background-color:#fff;
  border:1px solid rgba(47,50,0,.2);
  padding:.65rem .8rem;
  font-size:1rem;
  line-height:1.35;
}
.waitlist-form .form-control:focus,
.waitlist-form .form-select:focus{
  border-color:var(--bs-primary,#F7931A);
  box-shadow:0 0 0 .2rem rgba(247,147,26,.25);
}
.waitlist-form .form-control::placeholder{color:rgba(47,50,0,.45)}

.waitlist-form .form-check-input:checked{
  background-color:var(--bs-primary,#F7931A);
  border-color:var(--bs-primary,#F7931A);
}
.waitlist-form .form-check-input:focus{
  border-color:var(--bs-primary,#F7931A);
  box-shadow:0 0 0 .2rem rgba(247,147,26,.25);
}
.waitlist-form .form-check-label{font-size:.9rem;line-height:1.4}


/* The theme gives every <b> inside a freetext block a 2.6em min-height so
   column headings line up. Inline emphasis therefore uses <strong>, and this
   keeps the two visually identical. */
.freetext-block strong{font-weight:600}

.waitlist-error{
  border-left:3px solid #a33b16;
  padding-left:1rem;
  color:#a33b16;
}

.waitlist-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   Call to action

   The theme defines a pill button, .btn gets border-radius:500px!important in
   output.css, but rootedinbitcoin.com never uses it. Every call to action on
   the live site is an orange text link with a trailing arrow. The submit
   control matches that, and stays a real <button> for keyboard and screen
   reader users.
   -------------------------------------------------------------------------- */

.waitlist-submit{
  margin-top:1.5rem;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  font-family:inherit;
  font-size:inherit;
  font-weight:bold;          /* matches the theme's "p a" rule */
  color:#F7931A;
  cursor:pointer;
}
.waitlist-submit:hover{
  color:#F7931A;
  text-decoration:underline;
  text-underline-offset:5px;
}
.waitlist-submit:focus-visible{outline:2px solid #F7931A;outline-offset:4px}

/* --------------------------------------------------------------------------
   FAQ

   The theme hides Bootstrap's chevron (.accordion-button:after{display:none})
   and sizes h2.acc and h3.acc for the two-line row the site uses on the
   Education page: a bold dark question, an orange italic line beneath it, a
   hairline between rows and a small orange plus on the right. The rules below
   only flatten Bootstrap's default button chrome so that pattern shows
   through. The open panel is left entirely to the theme.
   -------------------------------------------------------------------------- */

.faq .accordion-item{
  border:0;
  border-bottom:1px solid rgba(47,50,0,.12);
  /* Bootstrap sets .accordion-item{background-color:#fff}, which put every
     row on a white card. The site's accordions sit on the cream page. */
  background-color:transparent;
}
.faq .accordion-button,
.faq .accordion-button:not(.collapsed){
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  width:100%;
  padding:1.5rem 0;
  background:transparent;
  box-shadow:none;
  color:inherit;
}
.faq .accordion-button:focus{box-shadow:none}
.faq .accordion-button:focus-visible{outline:2px solid #F7931A;outline-offset:4px}
.faq .faq-heads{text-align:left}
.faq .accordion-button h2.acc,
.faq .accordion-button h3.acc{margin:0}
.faq .faq-icon{
  margin-left:auto;
  flex:0 0 auto;
  margin-top:.35rem;
  color:#F7931A;
  transition:transform .3s;
}
.faq .accordion-button:not(.collapsed) .faq-icon{transform:rotate(45deg)}

/* layout.css draws an orange border on the left, right and bottom of every
   .accordion-body. That is the theme's boxed accordion; the education page,
   which is the pattern being matched here, has no box. */
.faq .accordion-body{
  border:0;
  background-color:transparent;
  padding:0 3rem 1.5rem 0;
  max-width:75ch;
}

/* --------------------------------------------------------------------------
   Comparison table

   Bootstrap sets its own ink (#212529) and grey rules (#dee2e6), neither of
   which belongs on a cream page. These follow the theme instead.
   -------------------------------------------------------------------------- */

.waitlist-table{color:inherit;border-color:rgba(47,50,0,.15)}
.waitlist-table > :not(caption) > * > *{
  background-color:transparent;
  box-shadow:none;
  padding:.7rem .75rem;
  border-bottom-color:rgba(47,50,0,.15);
}
.waitlist-table thead th{
  font-weight:600;
  border-bottom:2px solid rgba(47,50,0,.25);
}
.waitlist-table tbody th{font-weight:600}
.waitlist-table td,.waitlist-table th{font-size:.95rem;line-height:1.35}

/* Bootstrap's select chevron is grey; the theme's ink is olive. */
.waitlist-form .form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232f3200' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}