/* Path: app/static/css/style.css */


/*
  Variables
*/
:root {
  --vt-font-family: quasimoda, sans-serif;
  --vt-font-style: normal;
  --vt-font-weight: 400;
  --vt-font-size-desktop: 19.2px;
  --vt-line-height-desktop: 28.8px;
  --vt-font-size-mobile: 18px;
  --vt-line-height-mobile: 27px;

  --vt-blue: #c1e9fb;
  --vt-blue-light: #e9faff;
  --vt-blue-dark: #30a8e0;
  --vt-blue-gradient: linear-gradient(to right, var(--vt-blue), var(--vt-blue-light));

  --vt-deep-blue: #0D6EBA;
  --vt-deep-blue-light: #A4C9F3;
  --vt-deep-blue-gradient: linear-gradient(to right, var(--vt-deep-blue), var(--vt-deep-blue-light));

  --vt-yellow: #fff3ab;
  --vt-yellow-light: #faf6e8;
  --vt-yellow-dark: #f7e967;
  --vt-yellow-gradient: linear-gradient(to right, var(--vt-yellow), var(--vt-yellow-light));
  --vt-yellow-gradient-l: linear-gradient(to left, var(--vt-yellow), var(--vt-yellow-light));

  --vt-pink: #dca2c9;
  --vt-pink-light: #efcee4;
  --vt-pink-dark: #c17ba0;
  --vt-pink-gradient: linear-gradient(to right, var(--vt-pink), var(--vt-pink-light));

  --vt-white: #ffffff;
  --vt-grey: #f0f0f0;
  --vt-grey-light: #f9f9f9;
  --vt-grey-dark: #e0e0e0;
  --vt-grey-gradient: linear-gradient(to right, var(--vt-grey), var(--vt-grey-light));
  --vt-black-faded: #555;
  --vt-black-gradient: linear-gradient(to right, black, var(--vt-black-faded));

  --vt-danger: #ff0000;

  --bt-header-grey: #F6F6F6;
  --bt-searchbar-grey: #F9F9F9F0; /* Documentation only; this gets set directly in the page meta tags. */
  --bt-cyan: #30A8E0;
  --bt-cyan-light: #CFF2FD;
  --bt-yellow: #F4EB17;
  --bt-yellow-light: #FFFCCA;
  --bt-magenta: #E5168A;
  --bt-magenta-light: #FFCAEB;
  --bt-hover-state-grey: #4D4D4D;
  --bt-black: #231F20;

  --bt-radius: 6px;
  --bt-1-rem: 16px; /* WARNING! Chad confirms that this is the '1rem' measure used in BT calc() s. For the marketing site, it's effectively static.
    This is, however, not directly related to the root font size of the marketing site. (None appears to be defined once React and Wordpress have processed everything.)
    On the ordering site side, 1rem is 18px on mobile and 19.2px on desktop, as defined above. These values are set on //html and (for Bootstrap purposes) via CSS variable definition on the //body. */
  --bt-1-5-rem: calc(1.5 * var(--bt-1-rem));
  --bt-2-rem: calc(2 * var(--bt-1-rem));
  --bt-3-rem: calc(3 * var(--bt-1-rem));
  --bt-4-rem: calc(4 * var(--bt-1-rem));
  --bt-7-5-rem: calc(7.5 * var(--bt-1-rem));

  --bt-preset-spacing-30: clamp(
      calc(1.25 * var(--bt-1-rem)),
      calc(1.15 * var(--bt-1-rem) + .43vw),
      var(--bt-1-5-rem)
  );
  --bt-preset-spacing-40: clamp(
      var(--bt-1-5-rem),
      calc(1.31 * var(--bt-1-rem) + .85vw),
      var(--bt-2-rem)
  );
  --bt-preset-spacing-60: clamp(
      var(--bt-3-rem),
      calc(2.62 * var(--bt-1-rem) + 1.71vw),
      var(--bt-4-rem)
  );
  --bt-preset-spacing-70: clamp(
      var(--bt-4-rem),
      calc(2.65 * var(--bt-1-rem) + 5.98vw),
      var(--bt-7-5-rem)
  );

  --bt-nav-height: 107px;
  @media(width < 1250px) {
    --bt-nav-height: calc(.83vw + 81.49px);
  }
  --bt-footer-padding-y: 80px; /* 1600px viewport */
  @media(width < 576px) {
    --bt-footer-padding-y: var(--bt-3-rem);
  }

  --bt-max-content-width: 1472px; /* See marketing site, --wp--style--global--wide-size */
  --page-side-x-margin: var(--bt-preset-spacing-40);
  @media(width >= 1536px) {
    --page-side-x-margin: calc((100vw - var(--bt-max-content-width)) / 2); /* Limit the max CW to 1472 and center it. */
  }
  --bt-hero-section-y-margin: var(--bt-4-rem);
  @media(width < 576px) {
    --bt-hero-section-y-margin: var(--bt-3-rem);
  }
  --bt-section-margin: var(--bt-7-5-rem);
  @media(width < 576px) {
    --bt-section-margin: var(--bt-4-rem);
  }


  --viewport-width-scale-px: calc(100vw / 1600);
  /*--1600-to-992-scale-px: clamp(992px, 100vw, 1600px);*/

  --bt-wp-custom-animation-default-transition: all 0.3s;
}

/* Override BS containers so it looks like they aren't being applied. */
.container-fluid.container-fluid, .container.container, .container-sm.container-sm,
.container-md.container-md, .container-lg.container-lg, .container-xl.container-xl {
  --bs-gutter-x: calc(2 * var(--page-side-x-margin));
}
.container.container, .container-sm.container-sm, .container-md.container-md,
.container-lg.container-lg, .container-xl.container-xl {
  max-width: 100%;
}

section {
  margin-top: var(--bt-section-margin);
  margin-bottom: var(--bt-section-margin);
  &.bt-hero-section, &:first-of-type {
    margin-top: var(--bt-hero-section-y-margin);
    margin-bottom: var(--bt-hero-section-y-margin);
  }
  &.bt-hero-section + section {
    margin-top: var(--bt-hero-section-y-margin);
  }
  &:has(+ footer) {
    margin-bottom: 0;
  }
}

html {
  /* Scrolling/overflow behavior; this directly impacts how the header behaves.
      WARNING: sticky headers only seem to work correctly when the body's X overflow and Y overflow are both visible. */
  overflow-x: visible;
  overflow-y: visible;
  &:has(#mobile-toggles-on.show), &:has(#mobile-toggles-on.collapsing) {
    /* When mobile nav is open... */
    body {
      /* Lock the body, and ... */
      overflow-y: hidden;
      overscroll-behavior-y: contain;
      header {
        /* Force header to fill screen. */
        height: 100lvh;
        padding-bottom: calc(105lvh - 100dvh); /* On iOS, make sure the screen is always filled; on Android, make sure the bottommost two buttons are visible at all */
        justify-content: stretch;
        overflow-y: scroll;
        overscroll-behavior-y: contain;
      }
    }
  }
  /* Apply root fonts, text size, etc. */
  font-family: var(--vt-font-family);
  font-style: var(--vt-font-style);
  font-weight: var(--vt-font-weight);
  @media (width < 576px) {
    font-size: var(--vt-font-size-mobile);
    line-height: var(--vt-line-height-mobile);
  }
  @media (width >= 576px) {
    font-size: var(--vt-font-size-desktop);
    line-height: var(--vt-line-height-desktop);
  }
  body {
    /* Set Bootstrap root font. */
    --bs-body-font-family: var(--vt-font-family);
    --bs-body-font-style: var(--vt-font-style);
    --bs-body-font-weight: var(--vt-font-weight);
    color: var(--bt-black); /* The default font color should be Baytek's black. */
    @media (width < 576px) {
      --bs-body-font-size: var(--vt-font-size-mobile);
      --bs-body-line-height: var(--vt-line-height-mobile);
    }
    @media (width >= 576px) {
      --bs-body-font-size: var(--vt-font-size-desktop);
      --bs-body-line-height: var(--vt-line-height-desktop);
    }
    .eyebrow {
      text-transform: uppercase;
      font-weight: 850;
      @media(width < 576px) {
        font-size: 18px; /* 18/18 */
        line-height: 27px; /* 27/27 */
      }
      @media(width >= 576px) {
        font-size: 20px; /* 18/19.2 */
        line-height: 30px; /* 30/28.8 */
      }
    }
    .h0 {
     /* Baytek's internal name for the special formatting used in the hero's title. */
      font-weight: 850;
      @media(width <= 576px) {
        font-size: 47.63px;
        line-height: 53.8px;
      }
      @media(width > 576px) {
        font-size: 60px;
        line-height: 72.3px;
      }
    }
    h1 {
      font-weight: 850;
      @media(width <= 576px) {
        font-size: 27.63px;
        line-height: 33.8px;
      }
      @media(width > 576px) {
        font-size: 40px;
        line-height: 48px;
      }
    }
    h2 {
      font-weight: 850;
      @media(width <= 576px) {
        font-size: 24.58px;
        line-height: 29.49px;
      }
      @media(width > 576px) {
        font-size: 32px;
        line-height: 38.4px;
      }
    }
    h3 {
      font-weight: 850;
      @media(width <= 576px) {
        font-size: 23.05px;
        line-height: 27.66px;
      }
      @media(width > 576px) {
        font-size: 28px;
        line-height: 38.6px;
      }
    }
    h4 {
      font-weight: 850;
      /* Note: Baytek specifies the same sizes in mobile and desktop. */
      font-size: 20px;
      line-height: 24px;
    }
    h5 {
      font-weight: 800;
      /* Note: Baytek specifies the same sizes in mobile and desktop. */
      font-size: 16px;
      line-height: 24px;
    }
  }
}


/* Font utilities */

.vt-large {
  font-size: 1.46em; /* Calculated on desktop: 28, 38.6 relative to desktop base size of 19.2, 28.2. */
  line-height: 1.34lh;
}
.bt-bold {
  /* Note Figma composition as [Desktop]/default bold, [Desktop]/small bold; there is no mobile variant. */
  /* font-weight: 800;  Nominal value; in reality, this appears significantly darker when rendered. */
  font-weight: 700;  /* Manually selected as the closest to what they have rendered in Figma. I suspect Figma has better interpolation or something...? */
}
.bt-small {
  /* NOT actually a general utility. TODO This is actually the footer font sizing, for both mobile and desktop. Move it down there. */
  font-size: 16px;
  line-height: 24px;
}

/*
 * Margin, color, and text utilities
 */

.bg-vt-blue-light {
  background-color: var(--vt-blue-light);
}

.pink-text {
  color: var(--vt-pink);
}

.dark-pink-text {
  color: var(--vt-pink-dark);
}

/* Margins */

.mb-100px {
  margin-bottom: 100px;
}

.mb-200px {
  margin-bottom: 200px;
}

.mt-100px {
  margin-top: 100px;
}

.mt-200px {
  margin-top: 200px;
}

/* BT margins */

.bt-mt-3 {
  margin-top: var(--bt-3-rem);
}

/* TODO Rename these classes as bt-mt-*. */
.mt-bt-8 {
  margin-top: 8px;
}
.mt-bt-24 {
  margin-top: 24px;
}
.mt-bt-32 {
  margin-top: 32px;
}
.mb-bt-32 {
  margin-bottom: 32px;
}
.mt-bt-48 {
  margin-top: 48px;
}
.mt-bt-large {
  margin-top: 48px;
  @media(width < 576px) {
    margin-top: 32px;
  }
}

/* Text/font */

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.std-font {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 200;
}

.std-font-bold {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 600;
}

.std-font-bolder {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 900;
}

.dark-bold-text {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 800 !important;
  color: black;
}

.dark-thin-text {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-size: 1.2em;
  color: black;
}

.dark-bold-link {
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 800 !important;
  color: black;
  text-decoration: none;
  &:hover {
    text-decoration: none;
    color: black;
    text-shadow: 2px 2px #FFFF33;
  }
}

/* Block/display utilities */

.break-425 {
  display: none;
}
@media (max-width: 425px) {
  .break-425 {
    display: block;
  }
}

.proud-flag {
  width: 60px;
}

/*
 * Links, and elements styled to look and act like links.
 */

a:not(.btn) {
  /* The default link settings correspond to the Figma spec Link-Button typography class.
      It's pretty clear from the context in the spec that, regardless of implementation, the *-Link-Button
       formats are never meant to present as buttons, but always as links.
     WARNING: The heightened specificity shouldn't be removed. Not only does it clarify
      intent, it's also necessary for the ruleset to apply in precendence of Bootstrap. */
  color: var(--bt-cyan);
  font-weight: 700;
  text-decoration: underline;
  transition: var(--bt-wp-custom-animation-default-transition);
  &:hover {
    opacity: 75%;
  }
}

a, button {
  &.bt-nav-link, &.bt-nav-group-toggler {
    /* Nav members which are styled as links. */
    color: var(--bt-black);
    font-weight: 700; /* Nominally 800, visually closer to 700. Not sure how my 700 is closer to their 800...but my 800 is heavier than Kinsta. */
    text-decoration: none;
    transition: var(--bt-wp-custom-animation-default-transition);
    /*&:hover {*/
    /*  opacity: 75%;*/
    /*}*/
    /* In all existing Figma layouts... */
    text-align: center;
  }
}

button.bt-nav-group-toggler {
  /* Make bt-nav-link buttons act like links, and override Bootstrap defaults for unstyled buttons.
     (Note: Not .btn styling, element name = button styling.) */
  display: inline-block;
  border: 0;
  appearance: unset;
  background-color: inherit;
  @media (width < 1250px) {
    /* Override normal sizes after collapse; this is necessary so Bootstrap's button (NOT .btn) styling doesn't override ours. */
    font-size: var(--vt-font-size-mobile); /* 18px/18px mobile body size */
    line-height: var(--vt-line-height-mobile); /* 27px/27px mobile LH */
  }
}
/*
 * Image Utilities
 */

.product-title-v-logo {
  width: 40px;
  margin-top: -0.4em;
}

img.checkered-background {
  background-image: url('/static/img/graphics/background.png');
}

/* "Base" class; intended for override via inclusion in later compound selectors */
.sanitizes-image {
  /* Note that the containing element determines width, and so this image will generally scale smoothly as the parent does. */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--bt-black);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--bt-radius);
  @media (width < 576px) {
    width: 100% !important; /* Override any widths that callers specified for desktop mode. */
  }
  &.image-width-scaled-to-600 {
    @media (576px <= width < 1600px) {
      width: calc(600 * var(--viewport-width-scale-px));
    }
    @media (1600px <= width) {
      width: 600px;
    }
  }
}

.text-and-image-row {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  row-gap: var(--bt-preset-spacing-60);
  column-gap: var(--bt-preset-spacing-70);
  align-items: center;
  .text-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    flex: 1 .5 55%;
    /*flex: 1 .5 auto;*/
  }
  .image-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    flex: .5 1 45%;
  }
  @media(width < 576px) {
    flex-flow: column nowrap;
    row-gap: var(--bt-3-rem);
    .text-column {
      width: 100%; /* MUST increase to parent column width */
    }
    .image-column {
      width: 100%; /* MUST increase to parent column width */
    }
  }
}

/*
 * Buttons and Button Groups
 */

.btn {
  --bs-btn-border-radius: var(--bt-radius);
  &.bt-btn {
    --bs-btn-border-width: 0;
    --bs-btn-bg-color: inherit;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-font-weight: 850;
    --bs-btn-font-size: 18px;
    --bs-btn-line-height: 27px;
    --bs-btn-padding-y: 16px;
    --bs-btn-padding-x: 24px;
    text-transform: uppercase;
    transition: background-color .2s ease-in-out;
  }
  &.bt-btn-outline {
    /* Figma: 'Outline-Button' */
    border-color: var(--bt-black);
    --bs-btn-hover-border-color: var(--bt-black);
    border-width: 1px;
    color: var(--bt-black);
    background-color: inherit;
    &:hover {
      color: var(--bt-hover-state-grey);
    }
    /* :active has the same formatting as normal. */
  }
  &.bt-btn-primary {
    /* Figma: 'Blue-Button' */
    color: var(--bt-black);
    background-color: var(--bt-cyan);
    &:hover {
      color: var(--bt-black);
      background-color: var(--bt-cyan-light);
    }
    &:active {
      /* We override the Bootstrap variables because this rule isn't high-specificity enough otherwise. */
      --bs-btn-active-color: var(--bt-cyan-light);
      --bs-btn-active-bg: var(--bt-black);
    }
  }
  &.bt-btn-black {
    /* Figma: 'Black-Button' */
    color: var(--vt-white);
    background-color: var(--bt-black);

    &:hover {
      color: var(--vt-white); /* If not specified, Bootstrap's .btn hover color applies with higher specificity. */
      background-color: var(--bt-hover-state-grey);
    }

    /* :active has the same formatting as normal. */
  }

  &.btn-selected-blue-border {
    border: 3px solid var(--vt-blue-dark) !important;
    /*box-shadow: rgba(60,60,60,.6) 6px 8px 6px;*/
  }

  &.small-mobile-font {
    @media (max-width: 576px) {
      font-size: .8em;
    }
  }

  &.bt-btn-icon {
    display: inline-block;
  }

  &.btn-white-on-blue {
    background-color: var(--vt-blue-dark);
    color: white;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-blue-dark) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-black-on-white {
    background-color: white;
    color: black;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid white !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-white-on-black {
    background-color: black;
    color: var(--vt-grey);
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid black !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-white-on-black:hover {
    background-color: black !important;
    color: var(--vt-grey-light) !important;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-grey) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-pink-on-black {
    background-color: black;
    color: var(--vt-pink-light);
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid black !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-pink-on-black:hover {
    background-color: black;
    color: var(--vt-pink-light) !important;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-pink-light) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-yellow-on-black {
    background-color: black;
    color: var(--vt-yellow);
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid black !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-yellow-on-black:hover {
    background-color: black;
    color: var(--vt-yellow-light) !important;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-yellow) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-vt-danger {
    background-color: var(--vt-danger);
    color: white;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-danger) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-vt-danger:hover {
    background-color: var(--vt-danger);
    color: white;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-grey-light) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }
  &.btn-selected-blue {
    background-color: white;
    color: black;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    border: 3px solid var(--vt-blue-dark) !important;
    /*box-shadow: rgba(60,60,60,.6) 6px 8px 6px;*/
  }

  &.btn-blue-on-black {
    background-color: black;
    color: var(--vt-blue-light);
    font-family: quasimoda, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 20px;
    border: 3px solid black !important;
    margin-top: -4px;
    line-height: 2;
    padding-top: .45em;
    box-shadow: rgba(150, 150, 150, 1) 4px 4px 8px;
  }

  &.btn-blue-on-black:hover {
    background-color: black;
    color: var(--vt-blue-light) !important;
    font-family: quasimoda, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 20px;
    border: 3px solid var(--vt-blue-light) !important;
    box-shadow: rgba(150, 150, 150, 1) 4px 4px 8px;
  }

  &.btn-black-on-blue {
    background-color: var(--vt-blue-light);
    color: black;
    font-family: quasimoda, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    border: 3px solid var(--vt-blue-light) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-black-on-pink {
    background-color: var(--vt-pink-light);
    color: black;
    font-family: quasimoda, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    border: 3px solid var(--vt-pink-light) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }

  &.btn-black-on-yellow {
    background-color: var(--vt-yellow);
    color: black;
    font-family: quasimoda, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    border: 3px solid var(--vt-yellow) !important;
    box-shadow: rgba(60, 60, 60, .6) 6px 8px 6px;
  }
}

/*
 * Button groups
 */

.buttons-stack-on-mobile {
  display: flex;
  /* Main mode: row. */
  flex-flow: row nowrap;
  flex: 0 0 auto;
  gap: clamp(calc(.015 * 992px), 1.5vw, 24px); /* Basis measured from Figma as 24px gap at 1600px wide, and extrapolated down to mobile transition. */
  .input-group {
    /* Bootstrap has already made this a flex row with width 100% */
    width: max-content;
  }
  @media (width < 576px) {
    flex-flow: column nowrap;
    flex: 1 0 100%;
    row-gap: 24px;
    .input-group {
      margin-left: auto;
      margin-right: auto;
    }
    .btn, .input-group {
      align-self: stretch;
    }
  }
  &.push-buttons-to-ends {
    justify-content: space-between;
  }
}


.button-pair-stacks-on-overflow {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
  column-gap: 24px;
  row-gap: 24px;
  text-align: center;
  .bt-btn.btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/*
 * Forms...ish
 */

.radio-input-row {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  column-gap: .7rem;
  input[type="radio"] {
    flex: 0 0 .8rem;
  }
  input[type="radio"] + label {
    flex: 1 1 max-content;
  }
}

.checkbox-input-row {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  column-gap: .7rem;
  input[type="checkbox"] {
    flex: 0 0 1rem;
    color: var(--bt-black);
  }
  input[type="checkbox"] + label {
    flex: 1 1 max-content;
  }
}

.text-input-row {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  column-gap: .7rem;
  label {
    flex: 0 0 max-content;
  }
  input[type="text"] {
    flex: 1 1 min-content;
    min-width: 0; /* Override user agent default field size (which sets an effective min-width) */
  }
}

.radio-input-row + .radio-input-row {
  margin-top: .1rlh;
}

.radio-input-row + .text-input-row:has(#referral-other) {
  margin-top: .2rlh;
  font-size: .8rem;
  line-height: .8rem;
  label {
    margin-left: 1.5rem; /* Lines up as though it was an option label */
  }
}
/*
 *  Nav links and buttons; header
 */

.bt-hamburger-collapse-button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  border-width: 0;
  background-position: center;
  background-repeat: no-repeat;
  width: var(--bt-2-rem);
  aspect-ratio: 1 / 1;
  background-image: url("../img/icons/hamburger-x-from-marketing-site.svg");
  &.collapsed {
    background-image: url("../img/icons/wordpress_bars-solid_marketing.svg");
  }
}

.bt-nav-group, .bt-nav-group-contents {
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
}

.bt-brand-icon {
  flex-grow: 0;
  flex-shrink: 0;
  width: 220px;
  aspect-ratio: 220 / 44;
  &.btn {
    padding: 0;
  }
}

nav {
  .bt-btn-icon {
    min-width: 18px;
    aspect-ratio: 1 / 1;
  }
  .bt-btn.bt-btn-nav {
    padding: 16px 24px;
    --bs-btn-font-size: var(--vt-font-size-mobile);
    --bs-btn-line-height: var(--vt-line-height-mobile);
  }
  .bt-nav-link, .bt-nav-group-toggler {
    &:hover {
      /* DO NOT change color or opacity on hover. */
      opacity: unset;
      color: initial;
      background-color: initial;
    }
  }
}

/* Combined styling hierarchy */
.bt-nav-group {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  /* Defaults are for desktop, closed. */
  .bt-nav-group-toggler {
    /* Chevrons. */
    &::after {
      display: inline-block;
      width: .65em;
      margin-inline-start: .5em;
      aspect-ratio: 1 / 1;
      border: 0; /* Remove Bootstrap arrow */
      vertical-align: baseline; /* Override BS alignment */
      content: url('/static/img/icons/chevron-down-solid.svg'); /* Closed */
    }
  }
  .bt-nav-group-contents {
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    .bt-nav-link, .bt-nav-group-toggler {
      font-weight: 400; /* Not bold when inside a dropdown/collapse group */
    }
  }
  @media (width < 1250px) {
    .bt-nav-group-contents {
      display: none; /* Normally hidden */
      &.collapsing, &.collapse.show {
        /* Bootstrap handles collapses */
        display: flex;  /* Use flex, not the default (box) */
        padding-top: 24px;
        row-gap: 24px;
      }
      /* Note: JS is used to "open" dropdowns via Bootstrap on hover on desktop. See header template. */
    }
  }
  @media (1250px <= width) {
    position: relative; /* ONLY desktop. */
    .bt-nav-group-contents {
      position: absolute;
      display: none; /* Starts closed */
      flex-shrink: 0;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 24px 24px !important;
      border-radius: 0 0 8px 8px;
      border: 0;
      width: max-content;
      background-color: var(--bt-black) !important;
      .bt-nav-link, .bt-nav-group-toggler {
        & + .bt-nav-link, & + .bt-nav-group-toggler {
          padding-top: 24px;
        }
        color: var(--bt-header-grey);
        &:hover, &:focus {
          background-color: var(--bt-black);
          /*font-weight: 600; !* Replaces original underline highlighting *!*/
          text-decoration: underline;
          color: var(--vt-white);
          text-decoration-color: var(--vt-white);
          transition: all .2s ease-in-out;
        }
      }
    }
  }
  @media (width < 1250px) {
    &.bt-nav-group-toggler[data-bs-toggle="collapse"].collapsed::after {
      content: url('/static/img/icons/chevron-up-solid.svg'); /* Open */
    }
  }
  @media (width >= 1250px) {
    &.bt-nav-group-open {
      .bt-nav-group-contents {
        display: flex;
      }
      .bt-nav-group-toggler::after {
        content: url('/static/img/icons/chevron-up-solid.svg'); /* Open */
      }
    }
  }
}

header {
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--bt-header-grey);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1020;  /* Match Bootstrap's expected .sticky-* Z */
  #alert-banner {
    display: none; /* Turned off per comment from Chad, 2025-08-06 (https://app.productive.io/35395-baytek/task/13176609?taskActivityId=194751244):
    * ...we may end up launching without it...I think for now you can omit it.
    */
   /* From Chad's note, once we turn it back on, TODO: make the alert banner act non-sticky or be otherwise hidden on scroll.
    * "As far as functionality is concerned it would be at the top of the page but would not be part of the header when scrolling."
    * The easiest way to do this might be to make the nav sticky and fullisize on dropdown, rather than the entire header. Messy, but it works.
    */
    flex: 0 0 fit-content;
    text-align: center;
    color: var(--vt-white);
    background-color: var(--bt-black);
    font-size: var(--bt-1-rem);
    line-height: var(--bt-1-5-rem);
    font-weight: 700; /* Spec says 800, but this matches visually. */
    padding-top: calc(.5 * 1lh);
    padding-bottom: calc(.5 * 1lh);
  }
  /* Desktop nav */
  nav#desktop-nav #desktop-always-on {
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    @media(width < 1250px) { /* Content-based; measured near min width. The marketing site breaks at 1180, per Andre. */
      display: none;
    }
    @media(1250px <= width) {
      display: flex;
      height: var(--bt-nav-height);
    }
    .btn, .bt-btn-icon {
      margin-top: auto;
      margin-bottom: auto;
    }
    div:not(.bt-nav-group-contents), button.bt-nav-group-toggler {
      height: 100%; /* Make any dropdown button and its parents as tall as nav (so dropdown positions correctly when opened) */
      padding: 0;
    }
    div#desktop-links-and-buttons {
      display: flex;
      flex-flow: row nowrap;
      flex: 0 0 auto;
      column-gap: var(--bt-preset-spacing-40);
      .buttons-stack-on-mobile {
        column-gap: var(--bt-preset-spacing-30);
      }
    }
  }
  /* Mobile */
  nav#mobile-nav {
    @media(width < 1250px) {
      display: flex;
      flex: 1 1 auto;
      .bt-btn-nav {
        /* Text buttons fill column. */
        width: 100%;
        align-self: stretch;
        display: block;
      }
    }
    @media(width >= 1250px) {
      display: none;
    }
    flex-flow: column nowrap;
    align-content: stretch;
    .container#mobile-always-on {
      flex: 0 0 var(--bt-nav-height);
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
    .container#mobile-toggles-on {
      flex-flow: column nowrap;
      flex: 1 1 auto;
      justify-content: space-between; /* Force buttons to bottom */
      align-content: stretch;
      padding-top: 48px;
      padding-bottom: 48px;
      &.show, &.collapsing {
        display: flex;
      }
      div#mobile-links, div#mobile-buttons {
        flex: 0 0 auto;
        display: flex;
        flex-flow: column nowrap;
        &#mobile-links {
          row-gap: 32px;
          padding-bottom: 32px;
        }
        &#mobile-buttons {
          row-gap: 24px;
        }
        .adjusted-for-chatbox {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          padding-left: 33%;
          padding-right: 33%;
        }
      }
    }
  }
}


/*
  Toasts
 */

#toast-container {
  z-index: 10000;
}
div.toast-header {
  border: 1px solid black;
}
div.toast-body {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.toast-header.toast-warning, .toast-body.toast-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.8);
  color: black;
}
.toast-header.toast-success, .toast-body.toast-success {
  background-color: rgba(var(--bs-success-rgb), 0.8);
  color: black;
}
.toast-header.toast-danger, .toast-body.toast-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.8);
  color: black;
}

/* Named multiuse utilities */

.vt-hr {
  border: 1px solid black;
  opacity: 100%;
  width: 90%;
}

div.common-header-container {
  display: flex;
  align-items: center;
}
img.common-header-v-logo {
  width: 50px;
  margin-right: 0.6em;
}
h1.common-header-title {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  padding-top: 0;
  font-size: 2.4em;
  font-weight: 600;
}
@supports (-moz-appearance: none) {
  h1.common-header-title {
    padding-top: 14px;
  }
}

/*
  Footer
 */

section.footer-space {
  height: 100px;
}
section.footer-space-5 {
  height: 500px;
}

footer {
  position: relative;
  z-index: 999; /* Just under Bootstrap's dropdown's index. */
  background-color: var(--bt-header-grey);
  padding-top: var(--bt-footer-padding-y);
  padding-bottom: var(--bt-footer-padding-y);
  a.bt-footer-link {
    /* Note Figma composition as [Desktop]/link; there is no mobile variant. */
    font-weight: 800;
    color: var(--bt-black);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
      transition: text-decoration .2s ease-in-out;
    }
  }
  .container {
    .footer-contact-nav-link {
      font-weight: 400;
      text-decoration: underline;
    }
    @media (width >= 572px) {
      display: grid;
      grid-template-columns: 1fr auto;
      .footer-left-column {
        grid-column-start: 1;
        grid-column-end: 2;
      }

      .footer-right-column {
        grid-column-start: 2;
        grid-column-end: 3;
        align-self: flex-end;
      }

      .footer-row {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    }
    .footer-row:first-child {
      margin-bottom: 32px;
    }
    ul.footer-left-column {
      margin-bottom: 0;
      li:not(:first-child) {
        margin-top: 16px;
      }
    }
    .footer-right-column {
      @media (width < 576px) {
        margin-top: 32px; /* Add spacing when mobile transition collapses columns. */
      }
      &> dl {
        dt:not(:first-child) {
          margin-top: 16px;
        }
      }
    }
    .media-icons {
      margin-top: 32px;
      @media (width < 576px) {
        margin-top: 24px; /* Decrease spacing on mobile so cadence matches specified "gap". */
      }
      display: grid;
      max-width: 8rem;
      column-gap: 16px;
      grid-template-columns: 20px 10px 15px 16px 16px;
    }
    hr.footer-row {
      margin-top: 32px;
      margin-bottom: 32px;

      width: 100%;
      opacity: 100%;
    }
    .footer-right-column:last-child {
      @media (width < 576px) {
        margin-top: 16px;
      }
    }
  }
}