/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for MirumCares.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

html,
body {
  overscroll-behavior: none;
}

:root {
  --background: rgba(251, 248, 246, 1);
  --foreground: rgba(25, 25, 25, 1);

  --card: rgba(255, 255, 255, 1);
  --card-foreground: rgba(25, 25, 25, 1);

  --primary: rgba(255, 255, 255, 1);
  --primary-foreground: rgba(125, 65, 116, 1);

  --secondary: rgba(251, 248, 246, 1);
  --secondary-foreground: rgba(101, 132, 89, 1);

  --accent: rgba(255, 255, 255, 1);
  --accent-foreground: rgba(76, 40, 71, 1);

  --muted: rgba(88, 46, 81, 1);
  --muted-foreground: rgba(88, 46, 81, 0.05);

  --popover: rgba(231, 242, 246, 1);
  --popover-foreground: rgba(11, 90, 115, 1);

  --destructive: rgba(212, 13, 48, 1); 
  --destructive-foreground: rgba(255, 255, 255, 1);

  --border: rgba(246, 140, 90, 1);
  --form-border: rgba(204, 196, 182, 1);

  /* Override one of the default webform variables */
  --color-red-500: rgba(212, 13, 48, 1); 

  --input: rgba(35, 31, 32, 1);
  --ring: rgba(88, 46, 81, 1);
  --chart-1: rgb(145, 197, 255);
  --chart-2: rgb(58, 129, 246);
  --chart-3: rgb(37, 99, 239);
  --chart-4: rgb(26, 78, 218);
  --chart-5: rgb(31, 63, 173);
  --sidebar: rgb(250, 250, 250);
  --sidebar-foreground: rgb(10, 10, 10);
  --sidebar-primary: rgb(23, 23, 23);
  --sidebar-primary-foreground: rgb(250, 250, 250);
  --sidebar-accent: rgb(245, 245, 245);
  --sidebar-accent-foreground: rgb(23, 23, 23);
  --sidebar-border: rgb(229, 229, 229);
  --sidebar-ring: rgb(161, 161, 161);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-heading: "Bricolage Grotesque", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.625rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.justify-inherit {
  justify-content: inherit;
}

.items-inherit {
  align-items: inherit;
}

.dark {
  --background: rgb(10, 10, 10);
  --foreground: rgb(250, 250, 250);
  --card: rgb(23, 23, 23);
  --card-foreground: rgb(250, 250, 250);
  --popover: rgb(38, 38, 38);
  --popover-foreground: rgb(250, 250, 250);
  --primary: rgb(229, 229, 229);
  --primary-foreground: rgb(23, 23, 23);
  --secondary: rgb(38, 38, 38);
  --secondary-foreground: rgb(250, 250, 250);
  --muted: rgb(38, 38, 38);
  --muted-foreground: rgb(161, 161, 161);
  --accent: rgb(64, 64, 64);
  --accent-foreground: rgb(250, 250, 250);
  --destructive: rgb(255, 100, 103);
  --destructive-foreground: rgb(250, 250, 250);
  --border: rgb(40, 40, 40);
  --input: rgb(52, 52, 52);
  --ring: rgb(115, 115, 115);
  --chart-1: rgb(145, 197, 255);
  --chart-2: rgb(58, 129, 246);
  --chart-3: rgb(37, 99, 239);
  --chart-4: rgb(26, 78, 218);
  --chart-5: rgb(31, 63, 173);
  --sidebar: rgb(23, 23, 23);
  --sidebar-foreground: rgb(250, 250, 250);
  --sidebar-primary: rgb(20, 71, 230);
  --sidebar-primary-foreground: rgb(250, 250, 250);
  --sidebar-accent: rgb(38, 38, 38);
  --sidebar-accent-foreground: rgb(250, 250, 250);
  --sidebar-border: rgb(40, 40, 40);
  --sidebar-ring: rgb(82, 82, 82);
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: 2px;
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 5);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

h1, h2, .font-extrabold {
  font-weight: 800;
}

.impact-text {
  font-family: var(--font-heading);
}

.tabular-nums {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.button {
  border-radius: 80px;
  font-family: var(--font-heading);
}

.hide-to-480px {
  @media (max-width: 479px) {
    display: none;
  }
}
.hide-to-768px {
  @media (max-width: 767px) {
    display: none;
  }
}
.hide-to-1024px {
  @media (max-width: 1023px) {
    display: none;
  }
}

.button.bg-primary {
  box-shadow: 4px 4px 0 0 var(--primary-foreground);
}

.region.region-header {
  background-color: var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.region-content {
  min-height: calc(100vh - 285px);
}

.sdc--accordion-container {
  width: 100%;
}

.accordion-container {
  padding: 8px 0 16px;
  border-bottom: 1px solid rgb(0, 0, 0, .1);

  @media (min-width: 768px) {
  padding: 24px 0 40px;
  }
}

.sdc--accordion-container:first-of-type .accordion-container {
  padding-top: 1px;
}

.accordion-container + .accordion-container::before {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  display: inline-block;
  height: 1px;
  left: 1em;
  margin-bottom: 0.5em;
  max-width: calc(100% - 2em);
  position: relative;
  width: 100%;
}

.accordion--title {
  color: rgba(172, 98, 63, 1);
  padding: 0 5px 5px 0;
}

.accordion--title .accordion--icon {
  background-color: var(--primary);
  border: 1px solid var(--primary-foreground);
  border-radius: 80px;
  box-shadow: 4px 4px 0 0 var(--primary-foreground);
  color: var(--primary-foreground);
  padding: 0.4em;
}

.accordion--content {
  color: var(--muted);
}

.billboard-carousel h1,
.billboard-carousel h2,
.billboard-carousel h3,
.billboard-carousel h4,
.billboard-carousel h5,
.billboard-carousel h6 {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  font-size: 32px;
  letter-spacing: -1.5%;
  line-height: 1;

  @media (min-width: 768px) {
    font-size: 52px;
  }
}

.header-div-1 {
  order: 3;
  flex-grow: 1;
  background: var(--primary-foreground);
  height: 40px;
  width: 100%;

  @media (max-width: 767px) {
    .button {
      font-size: 14px;
      height: 40px;
    }
  }
}
.header-div-2 {
  line-height: 0; /* fixes spacing bug */
  padding: 24px 0 24px 16px;

  img {
    width: 112px
  }
}
.header-div-3 {
  padding-right: 16px;

  @media (max-width: 767px) {
    .button {
      font-size: 16px;
      height: 48px;
    }
  }
}

  @media (min-width: 768px) {
    .region.region-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    .header-div-1 {
      order: 1;
      flex-grow: 1;
      background: var(--border);
      height: auto;
      justify-content: start;
      width: unset;
    }
    .header-div-2 {
      order: 2;
      flex-basis: auto;
      padding-left: 0;

      img {
        width: 132px;
      }
    }
    .header-div-3 {
      order: 3;
      flex-basis: auto;
      padding-right: 16px;
      flex-grow: 1;
    }
  }

span.sdc--text div.text-disclaimer {
  font-size: 15px;
  font-family: var(--font-heading);
  line-height: 1;
  margin-top: 14px;

  @media (min-width: 768px) {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: -1rem;
    margin-left: -15%;
    margin-right: -15%;
    text-align: right;
  }
}

.home-page-border-container {
  padding: 24px 0 32px;
  @media (min-width: 768px) {
    padding: 40px 0;
  }
}

.border-container-shift {
  margin-top: -50px;
  position: relative;
  padding: 0;
  @media (min-width: 768px) {
    margin-top: -80px;
    padding: 0 1em;
  }
}
.home-page-steps-subheader,
.border-container-group-subheader {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
  padding-left: 0;
  padding-right: 0;
  @media (min-width: 768px) {
    font-size: 26px;
    line-height: 40px;
  }
}

.home-page-steps-subtext,
.border-container-subtext {
  font-size: 16px;
  line-height: 24px;
  @media (min-width: 768px) {
    font-size: 18px;
    line-height: 28px;
  }
}

.divs-with-the-button {
  margin: 8px 0 40px;
  @media (min-width: 768px) {
    margin: 8px 0 12px;
  }
}

@media (max-width: 767px) {
  .divs-with-the-button,
  .divs-with-the-button .sdc--button {
    width: 100%;
  }
}

.background-green-wave div {
  @media (max-width: 767px) {
    background-size: 60% !important;
    background-position: bottom !important;
  }
}

.home-page-accordion .accordion--title {
  column-gap: 8px;
  @media (max-width: 767px) {
    font-size: 18px;
    line-height: 28px;
  }
}

.faq-page-accordion {
  @media (min-width: 1024px) {
    padding: 16px 0 0 32px; 
  }
}

.steps-column .steps-heading {
  order: 1;
  @media (min-width: 768px) {
      order: -1;
  }
}

footer .region.region-footer {
  background-color: var(--accent-foreground);
}

.footer-group-ph {
  color: var(--primary);
  font-size: 14px;
  align-items: center;
  column-gap: 2em;
  flex-wrap: wrap;
  padding-top: 24px;

  @media (min-width: 1024px) {
    max-width: 1316px;
    flex-wrap: unset;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .sdc--image {
    min-width: 124px;
    margin-bottom: 1.5em;
    @media (min-width: 1024px) {
      min-width: 156px;
    }
  }

  .sdc--text {
    margin-bottom: 1.5em;
    @media (min-width: 1024px) {
      text-wrap: nowrap;
    }
  }

  nav {
    margin-left: 0;
    width: 100%;
    @media (min-width: 1024px) {
      margin-left: auto;
      width: unset;
    }
  
    ul {
      gap: 0;
      margin: 0 0 1.5em 0;
      li {
        width: 50%;
        @media (min-width: 1024px) {
          margin-left: 1.5em;
          width: unset;
        }
      }
    }
  }
}

.sticky-sidebar {
  color: var(--accent-foreground);

  .sticky-sidebar-copy {
    padding: 24px 0 0;
  }

  h2, h3, h4, h5, h6 {
    font-size: var(--text-4xl);
    margin-bottom: 8px;
  }

  p {
    font-size: var(--text-lg);
    line-height: 120%;
  }

  .billboard-carousel,
  .sdc--image {
    display: none;
  }

  @media (min-width: 768px) {
    background: var(--primary-foreground);
    color: white;

    .billboard-carousel,
    .sdc--image {
      display: block;
    }
    .sticky-sidebar-copy {
      padding: 24px 16px;
    }
  }

  @media (min-width: 1024px) {
    background: var(--primary-foreground);
    color: white;

    .sticky-sidebar-copy {
      padding: 40px 40px 0 32px;
    }

    h2, h3, h4, h5, h6 {
      font-size: 64px;
      line-height: 72px;
    } 
    p {
       font-size: 32px;
    }

    p:last-of-type {
      margin-bottom: 64px;
    }
  }
}

.site-map-list {
  ul {
    max-width: 1060px;
    margin: 0 auto;
    list-style-type: none;
    padding: 0;
  }
  li {
    font-size: 26px;
    line-height: 40px;
    margin-bottom: 16px;
    font-weight: var(--font-weight-semibold);
  }
}

.mcc-hierarchical-parent-wrapper > .form-item > label article {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.orange-links a {
  color: rgba(207, 72, 41, 1);
}

.purple-links a {
  color: var(--muted);
}

.label-black label {
  color: rgba(0, 0, 0, 1);
}

.text-small {
  font-size: var(--text-sm);
}

.faq-thank-you,
.join-thank-you,
.data-thank-you {
  @media (max-width: 767px) {
    .sdc--image {
      display: none;
    }
  }
}

input[type="date"] {
  max-width: 100%;
}

input::-webkit-datetime-edit {
  display: block;
  padding: 0;
}