/*GRAPHICS*/

html,
body {
  overflow-x: hidden;
}

:root {
  --dots-width: 75rem; /* 1200px */
  --dots-height: 125rem; /* 2000px */
  --fingerprint-width: 114.375rem; /* 1830px */
  --fingerprint-height: 87.5rem; /* 1400px */
}

.deco-graphic {
  pointer-events: none;
}

img.deco-graphic {
  max-width: 100%;
  height: auto;
  position: absolute;
  z-index: 1;
}

.separator-top-royal10:after {
  content: "";
  background-image: url("../../../../../themes/custom/byu/images/Separator-Top-Blue.svg");
}

.separator:after,
.separator:before {
  height: 3.75rem; /* 60px */
  z-index: 1;
  position: relative;
  z-index: 10;
}

@media only screen and (min-width: 768px) {
  .separator:after,
  .separator:before {
    height: 5rem; /* 80px */
  }
}

@media only screen and (min-width: 1024px) {
  .separator:after,
  .separator:before {
    height: 7.5rem; /* 120px */
  }
}

.separator-top-white:before {
  content: "";
  display: block;
  width: 100% !important;
  background-size: cover;
  background-image: url("../../../../../themes/custom/byu/images/Separator-Top.svg");
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: 5rem; /*80px*/
}

.separator-top-blue:before {
  content: "";
  display: block;
  width: 100% !important;
  background-size: cover;
  background-image: url("../../../../../themes/custom/byu/images/Separator-Top-Blue.svg");
  background-repeat: no-repeat;
  background-position: top center;
  margin-bottom: 5rem; /*80px*/
}

.separator-bottom-white:after {
  content: "";
  display: block;
  width: 100% !important;
  background-size: cover;
  background-image: url("../../../../../themes/custom/byu/images/Separator-Bottom.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  margin-top: 5rem;
}

.separator-bottom-mt-2xl:after {
  margin-top: 8rem !important;
}

.separator-bottom-blue:after {
  content: "";
  display: block;
  width: 100% !important;
  background-size: cover;
  background-image: url("../../../../../themes/custom/byu/images/Separator-Bottom-Blue.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  margin-top: 5rem;
}

.deco-graphic.dots:after {
  position: absolute;
  content: "";
  display: block;
  height: var(--dots-height);
  width: var(--dots-width);
  background-size: 100% 100%;
  background-image: url("../../../../../themes/custom/byu/images/Dots-1.svg");
  background-repeat: no-repeat;

  z-index: -1;
}

.deco-graphic.fingerprint:after {
  position: absolute;
  content: "";
  display: block;
  height: var(--fingerprint-height);
  width: var(--fingerprint-width);
  background-size: 100% 100%;
  background-image: url("../../../../../themes/custom/byu/images/Fingerprint.svg");
  background-repeat: no-repeat;
}

/*DECORATION POSITIONING*/

:root {
  --neg-05: -5rem; /* -80px */
  --neg-1: -11.875rem; /* -190px */
  --neg-2: -15.625rem; /* -250px */
  --neg-3: -21.875rem; /* -350px */
  --neg-4: -31.25rem; /* -500px */
  --neg-5: -37.5rem; /* -600px */
  --neg-6: -43.75rem; /* -700px */
  --neg-7: -56.25rem; /* -900px */
  --neg-8: -65.625rem; /* -1050px */
  --neg-9: -75rem; /* -1200px */
  --neg-10: -78.125rem; /* -1250px */
}

z-index-1 {
  z-index: 1 !important;
}
img.deco-graphic {
  z-index: 2;
}

.deco-graphic.neg-top-1:after,
img.deco-graphic.neg-top-1 {
  margin-top: var(--neg-1) !important;
}
.deco-graphic.neg-top-5:after,
img.deco-graphic.neg-top-5 {
  margin-top: var(--neg-5) !important;
}
.deco-graphic.neg-top-7:after,
img.deco-graphic.neg-top-7 {
  margin-top: var(--neg-7) !important;
}
.deco-graphic.neg-top-8:after,
img.deco-graphic.neg-top-8 {
  margin-top: var(--neg-8) !important;
}
.deco-graphic.neg-top-9:after {
  margin-top: var(--neg-9) !important;
}
.deco-graphic.neg-top-10:after {
  margin-top: var(--neg-10) !important;
}

.deco-graphic.neg-left-1:after,
img.deco-graphic.neg-left-1 {
  margin-left: var(--neg-1) !important;
}
.deco-graphic.neg-left-5:after {
  margin-left: var(--neg-5) !important;
}
.deco-graphic.neg-left-9:after,
img.deco-graphic.neg-left-9 {
  margin-left: var(--neg-9) !important;
}

.deco-graphic.neg-right-5:after {
  right: var(--neg-5) !important;
}
.deco-graphic.neg-right-6:after {
  right: var(--neg-6) !important;
}
.deco-graphic.neg-right-9:after {
  right: var(--neg-9) !important;
}

@media only screen and (max-width: 480px) {
  :root {
    --section-padding: 5rem 1.25rem; /* 80px 20px */

    --dots-width: 43.75rem; /* 700px */
    --dots-height: 68.75rem; /* 1100px */
    --fingerprint-width: 63.4375rem; /* 1015px */
    --fingerprint-height: 53.125rem; /* 850px */

    --neg-5: -21.875rem; /* -350px */
    --neg-6: -25rem; /* -400px */
    --neg-7: -37.5rem; /* -600px */
    --neg-8: -43.75rem; /* -700px */
    --neg-9: -46.875rem; /* -750px */
    --neg-10: -50rem; /* -800px */
    --neg-10: -56.25rem; /* -900px */
  }

  .deco-graphic.sm-position-relative:after,
  img.deco-graphic.sm-position-relative {
    position: relative;
  }

  .deco-graphic.sm-neg-top-6:after {
    margin-top: var(--neg-6) !important;
  }
  .deco-graphic.sm-neg-top-8:after {
    margin-top: var(--neg-8) !important;
  }
  .deco-graphic.sm-neg-top-9:after {
    margin-top: var(--neg-9) !important;
  }
  .deco-graphic.sm-neg-top-10:after {
    margin-top: var(--neg-10) !important;
  }
  .deco-graphic.sm-neg-top-11:after {
    margin-top: var(--neg-11) !important;
  }
}

.deco-graphic:after {
  pointer-events: none;
  z-index: 1;
}

section.overflow-section {
  overflow: visible;
}

section.separator-top-royal10:before {
  content: "";
  display: block;
  width: 100%;
  background-size: cover;
  background-image: url("../../../../../themes/custom/byu/images/Separator-Top-Blue.svg");
  background-repeat: no-repeat;
  background-position: top center;
  height: 3.75rem; /* 60px */
}

.section-content,
.section-container,
.component-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem; /* equivalent to max-w-7xl */
  position: relative;
}
@media (min-width: 768px) {
  .section-content-container {
    padding-left: 1.5rem; /* lg:px-14 */
    padding-right: 1.5rem; /* lg:px-14 */
  }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .section-content-container {
    padding-left: 3.5rem; /* lg:px-14 */
    padding-right: 3.5rem; /* lg:px-14 */
  }
}


.component-container {
  z-index: 99;
}

@media (min-width: 1536px) {
  /* 2xl breakpoint */
  .section-container,
  .component-container {
    max-width: 80rem; /* equivalent to max-w-8xl */
  }
}

/* You can also adjust the height in media queries just like the others if needed */
@media only screen and (min-width: 768px) {
  .separator-top-royal10:before {
    height: 5rem; /* 80px */
  }
}

@media only screen and (min-width: 1024px) {
  .separator-top-royal10:before {
    height: 7.5rem; /* 120px */
  }
}

/* todo move to tailwind css */

.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pt-20 {
  padding-top: 5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-content {
  position: relative;
}

/*makes the content above the decorations*/
.section-content .layout__region {
  position: relative;
  z-index: 3;
}

/*makes images within a media block 100% width*/
.img-w-full img {
  width: 100%;
}

.img-w-half img {
  width: 50%;
}

.img-m-height-5 img {
  max-height: 1.25rem;
}

/*vertical center elements withing a section*/
.content-align-items-center .section-content {
  align-items: center;
}

/*align items at the bottom added for this site
*/
.content-align-items-end {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}

/*makes elements within a section same height*/
.content-height-equal .section-content .block {
    height: 100%;
}

/*fixes the mobile style for the columns and accept the custom classes*/

@media (max-width: 767px) {
  .section-content-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .section-content {
    grid-template-columns: inherit !important;
  }
}

/************
ICON BLOCKS
*************/

.icon-block {
  text-align: center;
}
.icon-block img {
  max-height: 4.5rem;
  margin: 0 auto 1.25rem;
}
@media (min-width: 768px) { /* Mobile styles go here */
  .icon-block img {
    max-height: 7.5rem;
  }
}
.icon-block p {
  color: var(--gray-medium, #666666);
}

.min-height-50vh {
  min-height: 50vh;
}
.min-height-70vh {
  min-height: 70vh;
}
.min-height-90vh {
  min-height: 90vh;
}
.min-height-100vh {
  min-height: 100vh;
}

.inline-content .layout__region,
.inline-content > div {
  display: flex;
  gap: .5rem; /*assign to its own class*/
  align-items: center;
}



.content-spotlight-2-cols-white .section-content {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  background-color: white;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-radius: 1rem;
  max-width: 80%;
  position: relative;
  z-index: 10;
}

/*TABLE*/

.table-container:not(table.table-container) {
  display: flex;
  flex-direction: row;
  padding: 1rem .60rem;
  color: #333;
}

.table-container > div {
  width: 100%;
}

.table-container > div > table,
table.table-container {
  width: 100%;
  border-collapse: collapse;
}

.table-container > div > table tr:nth-child(even),
table.table-container tr:nth-child(even) {
  background-color: var(--gray-lightest);
}

.table-container > div > table td,
table.table-container td {
  padding: 1rem;
}

.table-container > div > table strong,
table.table-container strong {
  color: var(--dark-navy);
}

/*Content Card Outlined*/
.content-cards-outlined .section-content .layout__region {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-light);
  border-radius: 1rem;
  padding: 2rem;
}


/*Stacked Card Alternative*/

/* Mobile first (default layout) */
.block-inline-blockstacked-card.stacked-alternative {
  display: flex;
  flex-direction: column; /* Stack content vertically on mobile */
  gap: 1.5rem;
}

.block-inline-blockstacked-card.stacked-alternative .field--type-text-with-summary {
  width: 100%;
}

.block-inline-blockstacked-card.stacked-alternative .media--type-icon {
  width: 8rem;
  margin-bottom: 1rem; /* Add spacing below the icon */
}

.icon-block.block-inline-blockstacked-card.stacked-alternative .media--type-icon {
  max-width: 16rem;
  margin-bottom: 1rem; /* Add spacing below the icon */
}
.icon-block.block-inline-blockstacked-card.stacked-alternative .media--type-icon img {
  width: 100%;
  max-height: initial;
}

.icon-block.block-inline-blockstacked-card.stacked-alternative {
  gap: 4rem;
  text-align: left;
}

/* For larger screens (e.g., tablets and desktops) */
@media (min-width: 768px) {
  .block-inline-blockstacked-card.stacked-alternative {
    flex-direction: row-reverse; /* Reverse the layout, icon on the right */
  }

  .block-inline-blockstacked-card.stacked-alternative .media--type-icon {
    margin-bottom: 0; /* Remove the margin-bottom */
    margin-left: 1.5rem; /* Add space between text and icon on the left */
    width: 8rem;
  }
}