/*
 * The seebee look over stock Bootstrap 5.3 (vendor/assets/stylesheets/bootstrap.min.css), which the
 * layout loads first. Converted by hand from the old application.sass, which compiled Bootstrap with
 * these colours as Sass variables (#4).
 */

/* Bootstrap's bg-* and text-* utilities read the -rgb triplets, so each colour sets both forms. */
:root {
  --seebee-yellow: #FFFF4D;
  --seebee-orange: #FB6E02;
  --seebee-red: #FB2E01;
  --seebee-blue: #16A6FD;
  --seebee-green: #247968;

  --bs-info: #16A6FD;
  --bs-info-rgb: 22, 166, 253;
  --bs-warning: #FB6E02;
  --bs-warning-rgb: 251, 110, 2;
  --bs-danger: #FB2E01;
  --bs-danger-rgb: 251, 46, 1;
  --bs-success: #247968;
  --bs-success-rgb: 36, 121, 104;

  /* Bootstrap 5.0's corner radii; 5.3 rounds cards, inputs and the accordion more. */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-border-radius-lg: 0.3rem;
}

/* Bootstrap 5.3 gives cards the body text colour; the feature cards inherit white from their
   column, as they did on 5.0. */
.card {
  color: inherit;
}

accordion-shell,
accordion-item,
accordion-item-body-wrapper,
accordion-item-body {
  display: block;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--seebee-yellow);
  padding-top: env(safe-area-inset-top, 0);
}

ul {
  list-style-type: none;
}

menu {
  padding-inline-start: 0;
}

.pb-6 {
  padding-bottom: 5rem !important;
}

.text-canada-red {
  color: #FF0000;
}

.btn-orange {
  color: var(--seebee-orange);
}

.bg-yellow {
  background-color: var(--seebee-yellow);
}

.f-lemon {
  font-family: 'Lemon';
}

.f-francois {
  font-family: 'Francois One';
}

.f-comfortaa {
  font-family: 'Comfortaa';
}

.fs-24px {
  font-size: 24px;
}

.fs-7 {
  font-size: 0.90rem;
}

.text-transform-none {
  text-transform: none;
}

.bg-light-primary {
  background-color: rgba(251, 110, 2, 0.2);
}

.card-shadow {
  box-shadow: 6px 10px 4px rgba(0, 0, 0, 0.15), 10px 16px 4px rgba(0, 0, 0, 0.1);
}

/* Bootstrap 5.3 paints :hover, :focus-visible, :active and :disabled (the sign-up button while its
   request is in flight) from these variables; left unset they blank the button. */
.btn {
  --bs-btn-hover-bg: var(--seebee-orange);
  --bs-btn-hover-color: black;
  --bs-btn-active-bg: var(--seebee-orange);
  --bs-btn-active-color: black;
  --bs-btn-disabled-bg: var(--seebee-orange);
  --bs-btn-disabled-color: white;
  text-decoration: none;
  font-family: 'Lemon';
  transition: all 0.2s;
  color: white;
  border-radius: 2rem !important;
  padding: 1rem 3rem;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.5);
  background-color: var(--seebee-orange);
  background-image: linear-gradient(160deg, var(--seebee-blue), var(--seebee-green));
}

.btn:hover {
  color: black;
  background-image: none;
}

.btn:active {
  box-shadow: none;
}

.modal .btn {
  box-shadow: 4px 8px 5px rgba(125, 125, 125, 0.5);
}

.modal .btn:active {
  box-shadow: none;
}

.btn-sm {
  padding: 0.4rem 2.5rem;
}

.menu-bar-wrapper {
  transition: opacity 1s;
  display: none;
  width: 100%;
  color: white;
}

.menu-bar-wrapper a.btn {
  box-shadow: none;
  font-family: 'Lemon';
  font-size: 1.2rem;
  border-radius: 0 !important;
  color: var(--seebee-yellow);
  background-color: black !important;
  background-image: none !important;
  opacity: 0.8;
  width: 100%;
}

.menu-bar-wrapper a.btn:hover {
  color: var(--seebee-yellow) !important;
}

accordion-shell {
  transition: all 0.5s;
}

accordion-shell button:hover {
  text-decoration: underline;
}

accordion-shell:active {
  box-shadow: none;
}

/* The open testimonial header read Bootstrap blue on orange before #4; 5.3's !important .text-black
   would turn it black. */
.accordion-button:not(.collapsed).text-black {
  color: #0c63e4 !important;
}

.has-banner-bg-image {
  background-color: var(--seebee-yellow);
}

@media (min-width: 992px) {
  .has-banner-bg-image {
    background-image: url("/assets/banner-seebee-f41b9bbe.png");
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.video-container {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .video-container {
    width: 65%;
  }
}

/* The sign-up honeypot: off-screen, not display: none, which some bots skip. */
.sign-up-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modal-backdrop.show {
  opacity: 0.95;
}

.links-light a {
  color: #f8f9fa;
}

.links-light a:hover,
.links-light a:focus {
  color: #f9fafb;
}

figcaption {
  font-style: italic;
}

code {
  color: blue;
}