/* WordPress Block Style Variations */

/* Button Variations - Low Priority */
:root :where(.wp-block-button[class*="is-style-low-priority"] .wp-block-button__link){
  background-color: transparent;
  border-style: none;
  color: var(--wp--preset--color--brand-alt-1-700);
  box-shadow: none;
}

/* Button Variations - White Background */
:root :where(.wp-block-button[class*="is-style-white-background"] .wp-block-button__link){
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--gray-300);
  border-width: 1px;
  border-style: solid;
  color: var(--wp--preset--color--button-text);
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.09) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.025) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.025);
}

:root :where(.wp-block-button[class*="is-style-white-background"] .wp-block-button__link:hover){
  background-color: rgba(244, 244, 244, 0.96);
}

/* Button Variations - Transparent Background */
:root :where(.wp-block-button.is-style-transparent-background--7 .wp-block-button__link,
.wp-block-button.is-style-transparent-background--40 .wp-block-button__link){
  background-color: rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  border-color: var(--wp--preset--color--white);
  border-width: 1px;
  border-style: solid;
  color: var(--wp--preset--color--white);
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.09) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.025) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.025);
  backdrop-filter: blur(2px);
  box-shadow: none;
}

:root :where(.wp-block-button.is-style-transparent-background--7 .wp-block-button__link:hover,
.wp-block-button.is-style-transparent-background--40 .wp-block-button__link:hover){
  background-color: rgba(255, 255, 255, 0.37);
}

/* List Variations - White Rounded Checkmarks */
:root :where(.wp-block-list.is-style-white-rounded-checkmarks-list--5){
  padding-left: 0;
}

:root :where(.wp-block-list.is-style-white-rounded-checkmarks-list--5 li){
  margin-bottom: var(--wp--preset--spacing--small);
  list-style: none !important;
  padding-left: 2em;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Check icon'%3E%3Crect width='24' height='24' rx='12' fill='white'/%3E%3Cpath id='Icon' d='M7.5 12L10.5 15L16.5 9' stroke='%23535862' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A") 0 1px no-repeat !important;
}

/* Slider Variations - Masked Edges */
:root :where(.wp-block-makeiteasy-slider[class*="is-style-masked-edges"]){
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 13.4%, rgba(0, 0, 0, 1) 86.6%, rgba(0, 0, 0, 0) 100% );
}

/* Group Variations - Gray Background */
:root :where(.wp-block-group[class*="is-style-gray-background"]){
  background-color: var(--wp--preset--color--background-gray);
}

/* Media Text Variations - With Buttons */
:root :where([class*="is-style-media-text-with-buttons"] h3){
  font-size: clamp(1.185rem, 1.185rem + ((1vw - 0.2rem) * 1.232), 1.875rem);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-with-buttons"]){
  gap: var(--wp--preset--spacing--medium-large) var(--wp--preset--spacing--x-large);
}

:root :where(.wp-block-media-text[class*="is-style-media-text-with-buttons"] p){
  margin-top: 1rem;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-with-buttons"] .wp-block-buttons){
  margin-top: 2rem;
}

/* Media Text Variations - Gray Image Background */
:root :where([class*="is-style-media-text-gray-image-background"] h3){
  font-size: clamp(1.185rem, 1.185rem + ((1vw - 0.2rem) * 1.232), 1.875rem);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-gray-image-background"]){
  gap: var(--wp--preset--spacing--medium-large) var(--wp--preset--spacing--x-large);
}

:root :where(.wp-block-media-text[class*="is-style-media-text-gray-image-background"] p){
  margin-top: 1rem;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-gray-image-background"] .wp-block-buttons){
  margin-top: 2rem;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-gray-image-background"] .wp-block-media-text__media){
  background: #f5f5f5;
  border-radius: 1.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: clamp(16.875rem, 14.0141rem + 12.2066vw, 25rem) !important;
}

:root :where(.wp-block-media-text[class*="is-style-media-text-gray-image-background"] .wp-block-media-text__media img){
  max-height: 100%;
  object-fit: contain;
}

/* Image Variations - Featured Icon (all numbered instances) */
:root :where(.wp-block-image.is-style-featured-icon){
  width: 3.5rem;
  height: 3.5rem !important;
  background: #CEFEFF;
  border-radius: 50%;
  border: 0.5rem solid #EBFFFF;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root :where(.wp-block-image.is-style-featured-icon img){
  width: 1.5rem;
  height: 1.5rem !important;
}

/* Image Variations - Icon Blue Background Light */
:root :where(.wp-block-image[class*="is-style-icon-blue-background-light"]){
  width: 3.5rem;
  height: 3.5rem !important;
  background: #bcf5f7;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root :where(.wp-block-image[class*="is-style-icon-blue-background-light"] > *){
  width: 1.87rem !important;
  height: 1.87rem !important;
}

/* Tabs Variations - Rounded Buttons */
:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .mie-tabs-header){
  display: flex;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .mie-tabs){
  border-radius: 999px;
  border: 1px solid #E9EAEB;
  background: #FAFAFA;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .mie-tab){
  border-radius: 999px;
  padding: 8px 12px !important;
  font-size: 16px;
  font-weight: 600;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .mie-tab.is-active){
  border: 1px solid #D5D7DA !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  background: #fff;
  color: var(--wp--preset--color--button-text) !important;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .wp-block-makeiteasy-tab){
  transition-duration: 0.3s;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--20 .tabs-container){
  margin-top: 2.25rem;
}

/* Tabs Variations - Rounded Buttons (--10 variant for advanced-attribution page) */
:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .mie-tabs-header){
  display: flex;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .mie-tabs){
  border-radius: 999px;
  border: 1px solid #E9EAEB;
  background: #FAFAFA;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .mie-tab){
  border-radius: 999px;
  padding: 8px 12px !important;
  font-size: 16px;
  font-weight: 600;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .mie-tab.is-active){
  border: 1px solid #D5D7DA !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  background: #fff;
  color: var(--wp--preset--color--button-text) !important;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .wp-block-makeiteasy-tab){
  transition-duration: 0.3s;
}

:root :where(.wp-block-makeiteasy-tabs.is-style-rounded-buttons--10 .tabs-container){
  margin-top: 2.25rem;
}

/* List Variations - Teal Light Checkmarks */
:root :where(.wp-block-list[class*="is-style-teal-light-checkmarks-list"]){
  padding-left: 0;
}

:root :where(.wp-block-list[class*="is-style-teal-light-checkmarks-list"] > li){
  margin-bottom: 1rem;
  list-style: none;
  padding-left: 2em;
  background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='28' rx='14' fill='%23CEFEFF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9458 8.62169L11.5925 16.6834L9.3758 14.315C8.96747 13.93 8.3258 13.9067 7.85913 14.2334C7.40413 14.5717 7.2758 15.1667 7.5558 15.645L10.1808 19.915C10.4375 20.3117 10.8808 20.5567 11.3825 20.5567C11.8608 20.5567 12.3158 20.3117 12.5725 19.915C12.9925 19.3667 21.0075 9.81169 21.0075 9.81169C22.0575 8.73836 20.7858 7.79336 19.9458 8.61002V8.62169Z' fill='%2303A0B7'/%3E%3C/svg%3E%0A") 0 0 no-repeat;
}

/* List Variations - Teal Checkmarks (solid teal circle with white stroke checkmark) */
:root :where(.wp-block-list[class*="is-style-teal-checkmarks-list"]){
  padding-left: 0;
}

:root :where(.wp-block-list[class*="is-style-teal-checkmarks-list"] > li){
  margin-bottom: var(--wp--preset--spacing--small);
  list-style: none;
  padding-left: 2em;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%2303A0B7'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") 0 0 no-repeat;
}

/* List Variations - Rounded Checkmarks (outline circle with stroke checkmark) */
:root :where(.wp-block-list[class*="is-style-rounded-checkmarks-list"]){
  padding-left: 0;
}

:root :where(.wp-block-list[class*="is-style-rounded-checkmarks-list"] > li){
  margin-bottom: var(--wp--preset--spacing--small);
  list-style: none;
  padding-left: 2em;
  background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.74998 14L12.25 17.5L19.25 10.5M25.6666 14C25.6666 20.4433 20.4433 25.6666 14 25.6666C7.55666 25.6666 2.33331 20.4433 2.33331 14C2.33331 7.55666 7.55666 2.33331 14 2.33331C20.4433 2.33331 25.6666 7.55666 25.6666 14Z' stroke='%2303A0B7' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") 0 0 no-repeat;
}

/* Gray Mesh Hero Background */
:root :where(.is-style-gray-mesh--5 .wp-block-post-title){
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 600;
}
:root :where(.wp-block-group.is-style-gray-mesh--5){
  background-image: url(/assets/images/site-wide/gray-mesh-2.svg);
  background-position: left 20% center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* Gradient Text Variation */
:root :where(.wp-block-heading[class*="is-style-gradient-text"]){
  background-image: var(--wp--preset--gradient--smaller-overlay);
  color: transparent;
  background-clip: text !important;
}