/** Blocks **/
@import url("css/blocks/_block-announcements-slider.css");
@import url("css/blocks/_block-communication-bulletins.css");

/** Card **/
.vaya-card-white {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0px 0px 80px 0px color-mix(in srgb, var(--color-deep) 10.2%, transparent);
  min-height: 265px;
}

.provider-ribbon {
  display:flex;
  align-items:center;
  width: 300px;
  height:35px;
  margin-left: -12px;
  margin-top: 5px;
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg width="234" height="40" viewBox="0 0 234 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H234L209 20L234 40H23L0 0Z" fill="url(%23paint0_linear_4208_131)"/><defs><linearGradient id="paint0_linear_4208_131" x1="179" y1="20" x2="13" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="%23F8C35E"/><stop offset="1" stop-color="%23FBDDA4"/></linearGradient></defs></svg>');
  background-repeat: no-repeat;
  background-position:center;
}

.provider-ribbon-text {
  font-family: 'Montserrat', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

@media (max-width:810px){
  .provider-ribbon {
    margin-bottom:15px;
    width:250px;
  }

  .provider-ribbon-text {
    font-size:7px;
  }
  .provider-ribbon-col {
    flex-wrap:wrap;
  }
}


.gb-button-text {
  font-weight:400;
}

a.gb-button-text:hover {
  color:white !important;
}

.provider-portal-button a {
  background: linear-gradient(90deg, var(--color-secondary) 2.01%, var(--color-deep) 95.9%);
  padding: 5px 20px 5px 20px !important;
  border-radius: 50px;
  color: white !important;
  font-weight: 400 !important;
}
/* "Provider Central" ribbon in the native header (functions.php): beside the logo from 500px, on its own row
   under the logo on phones. The outer box places it; the inner span is the flag. */
.provider-central-ribbon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}

/* The base theme stretches the logo link across spare space below desktop, which pushed the ribbon
   away from the logo. Size the link to the logo instead so the ribbon always sits right beside it. */
.tw\:nav-bar:has(.provider-central-ribbon) .tw\:nav-logo {
  flex-grow: 0;
  flex-basis: auto;
}

/* Beside the logo, the ribbon's auto margin pushes the rest of the row right. Drop the menu button's own auto
   margin there, or the two split the space and leave the tablet search floating in the middle. */
@media (min-width: 500px) {
  .tw\:nav-bar:has(.provider-central-ribbon) .tw\:nav-menu-button {
    margin-left: 0;
  }
}

.provider-central-ribbon-flag {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 26px 0 22px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-gold) 55%, var(--color-white)), var(--color-gold));
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 12px 100%);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-primary-dark);
}

@media (max-width: 499px) {
  .tw\:nav-bar:has(.provider-central-ribbon) {
    flex-wrap: wrap;
  }

  .provider-central-ribbon {
    order: 99;
    flex-basis: 100%;
    margin-right: 0;
  }

  .provider-central-ribbon-flag {
    height: 22px;
    padding: 0 22px 0 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 9px 100%);
    font-size: 9px;
    letter-spacing: 1.2px;
  }
}

@media (min-width: 1280px) {
  .provider-central-ribbon {
    margin-left: 16px;
  }

  .provider-central-ribbon-flag {
    height: 40px;
    padding: 0 40px 0 34px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 50%, 100% 100%, 18px 100%);
    font-size: 13px;
    letter-spacing: 2px;
  }
}