/* stylelint-disable no-descending-specificity */

/* styles/base/base.css */

/* Load core tokens first */
@import url('./variables.css');

/* Load resets */
@import url('./reset.css');

/* Load Light/Dark Theme */
@import url('./theme.css');

/* Grid */
@import url('./grid.css');

/* profile role based css */
@import url('./profile-type.css');

/* Buttons (must be last) */
@import url('./buttons.css');



.section {
  & > div {
    padding: 0 var(--spacing-container);
    width: 100%;
    max-width: var(--site-container-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide library-metadata-wrapper if it only contains .library-metadata elements or is empty */
.library-metadata-wrapper:not(:has(> :not(.library-metadata))),
.library-metadata {
  display: none;
}

/* Typography Styles */
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
ol,
ul,
pre,
blockquote {
  margin: 0;
  padding: 0;
}

/* Vertical spacing system */
h1,
h2,
h3,
h4 {
  margin-bottom: 24px;
}

h5,
h6 {
  margin-bottom: 16px;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-bottom: 16px;
}

/* paragraph Styles */
.text-style-lg p,
.text-style-lg-medium p,
.text-style-lg-bold p {
  font: var(--para-font-lg);
}

.text-style-md p,
.text-style-md-medium p,
.text-style-md-bold p {
  font: var(--para-font-md);
}

.text-style-sm p,
.text-style-sm-medium p,
.text-style-sm-bold p {
  font: var(--para-font-sm);
}

.text-style-lg-medium p,
.text-style-md-medium p,
.text-style-sm-medium p {
  font-weight: var(--fw-medium);
}

.text-style-lg-bold p,
.text-style-md-bold p,
.text-style-sm-bold p {
  font-weight: var(--fw-bold);
}

/* Any paragraph above a heading in a block should be treated as an eyebrow */
.default-content-wrapper {
  p:has(+ :is(h1, h2, h3, h4, h5, h6)) {
    font: var(--eyebrow);
  }

  &:has(> h2:only-child) {
    h2:has(code) {
      background: var(--color-light-tan);
      padding: var(--spacing-xs) 0;
      margin: var(--spacing-md) 0;
      border-left: 4px solid var(--color-oak);
      margin-left: 0;
      margin-right: 0;
      
      code {
        padding: var(--spacing-sm) var(--spacing-sm);
        color: var(--color-blue-dark);
        font: var(--heading-font-s);

        @media (min-width: 992px) {
          font: var(--heading-font-l);
        }
      }
    }
  }
}

ol,
ul {
  li {
      font: var(--list-font);
      margin-bottom: 0;

      .text-style-sm & {
        font: var(--para-font-sm);
      }

      .text-style-lg & {
        font: var(--para-font-lg);
      }

      .text-style-md & {
        font: var(--para-font-md);
      }
    }
}

.text-style-bullet-list-dark,
.text-style-bullet-list-light {
  ol,
  ul:not(.card-lists) {
    display: flex;
    gap: 12px;
    list-style: none;
    padding-left: 0;
    flex-direction: column;

    li {
      padding-left: 32px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        background: url('/icons/check-circle-dark.svg') no-repeat center / contain;
      }

      p {
        margin-bottom: 0;
        display: inline;
      }
    }
  }

  &.text-style-sm ul:not(.card-lists) li {
    padding-left: 26px;

    &::before {
      width: 18px;
      height: 18px;
    }
  }
}

.text-style-bullet-list-light {
  ul:not(.card-lists), ol {
    li {
      &::before {
        background: url('/icons/check-circle-light.svg') no-repeat center / contain;
      }
    }
  }
}

.label {
  font: var(--label-font);
  color: var(--c-primary-dark);
  letter-spacing: 0.16px;

  @media (min-width: 992px) {
    letter-spacing: 0.48px;
  }
}

.label-sm,
.pretitle {
  font: var(--label-font-sm);
  color: var(--c-primary-dark);
  letter-spacing: 0.3px;

  @media (min-width: 992px) {
    letter-spacing: 0.48px;
  }
}

.content-align-left,
.section-align-left {
  text-align: left;
  align-items: flex-start;
}

.content-align-center,
.section-align-center {
  text-align: center;
  align-items: center;
}

.content-align-right,
.section-align-right {
  text-align: right;
  align-items: flex-end;
}

.icon-xxbig { --icon-size: var(--icon-size-xxbig); } /* 70px */
.icon-xbig { --icon-size: var(--icon-size-xbig); } /* 40px */
.icon-xl { --icon-size: var(--icon-size-xl); } /* 34px */
.icon-lg { --icon-size: var(--icon-size-lg); } /* 24px */
.icon-md { --icon-size: var(--icon-size-md); } /* 18px */
.icon-sm { --icon-size: var(--icon-size-sm); } /* 16px */

header {
  --icon-size: var(--icon-size-lg);
}

footer {
  --icon-size: var(--icon-size-xl);
}

.icon:has(svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--theme-text-color);
}

.icon svg {
  width: var(--icon-size, var(--icon-size-md));
  height: var(--icon-size, var(--icon-size-md));
}

[class*="icon-"] {
  .icon:has(img) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;

    img {
      width: var(--icon-size, var(--icon-size-md));
      height: var(--icon-size, var(--icon-size-md));
    }
  }
}

.custom-scrollbar {
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--theme-dots-default);
  
  .custom-thumb {
    width: 50px;
    height: 100%;
    background: var(--theme-dots-active);
    z-index: 1;
    position: relative;
    cursor: pointer;
  }
}

.dark-theme .custom-scrollbar {
  background: var(--color-white);
}

.dark-theme .custom-thumb {
  background: var(--color-oak-dark);
}

.slider-arrows {
  width: 60px;
  height: 60px;
  background-image: url('../../icons/arrows-sprite.svg');
  background-repeat: no-repeat;
  background-size: 240px 60px;
  position: absolute;
  top: auto;
  transform: translate(0);
  margin: 0;
  right: 0;
  bottom: -108px;
}

.dark-theme .slider-arrows {
  background-image: url('../../icons/arrows-sprite-dark.svg');
}

/* LEFT */
.arrow-prev {
  background-position: 0 0;
  right: 94px;

  &[disabled] {
    background-position: -120px 0;
  }
}

/* RIGHT */
.arrow-next {
  background-position: -60px 0;

  &[disabled] {
    background-position: -180px 0;
  }
}

/* Color utility classes */
.color-txt-oak {
  color: var(--color-oak);
}

.color-txt-oak-dark {
  color: var(--color-oak-dark);
}

.color-txt-dark-tan {
  color: var(--color-dark-tan);
}

.color-txt-tan {
  color: var(--color-tan);
}

.color-txt-light-tan {
  color: var(--color-light-tan);
}

.color-txt-blue-dark {
  color: var(--color-blue-dark);
}

.color-txt-blue-hover {
  color: var(--color-blue-hover);
}

.color-txt-blue-mid {
  color: var(--color-blue-mid);
}

.color-txt-blue-light {
  color: var(--color-blue-light);
}

.color-txt-blue-lightest {
  color: var(--color-blue-lightest);
}

.color-txt-blue-bright {
  color: var(--color-blue-bright);
}

.color-txt-soft-black {
  color: var(--color-soft-black);
}

.color-txt-mid-soft-black {
  color: var(--color-mid-soft-black);
}

.color-txt-warm-white {
  color: var(--color-warm-white);
}

.color-txt-white {
  color: var(--color-white);
}

.color-txt-error {
  color: var(--color-error);
}

.color-txt-confirmation {
  color: var(--color-confirmation);
}

.background-white {
  background-color: var(--color-white);
}

.background-oak {
  background-color: var(--color-oak);
}

.background-oak-dark {
  background-color: var(--color-oak-dark);
}

.background-dark-tan {
  background-color: var(--color-dark-tan);
}

.background-tan {
  background-color: var(--color-tan);
}

.background-light-tan {
  background-color: var(--color-light-tan);
}

.background-blue-dark {
  background-color: var(--color-blue-dark);
}

.background-blue-mid {
  background-color: var(--color-blue-mid);
}

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

.background-blue-lightest {
  background-color: var(--color-blue-lightest);
}

.background-blue-bright {
  background-color: var(--color-blue-bright);
}

.background-mid-blue {
  background-color: var(--color-mid-blue);
}

.background-soft-black {
  background-color: var(--color-soft-black);
}

.background-mid-soft-black {
  background-color: var(--color-mid-soft-black);
}

.background-warm-white {
  background-color: var(--color-warm-white);
}

.background-black {
  background-color: var(--color-black);
}

.border-all-dark-tan {
  border: 1px solid var(--color-dark-tan);
}

.quick-links {
  &.columns .columns-wrapper {
    border: 1px solid var(--color-tan);
    gap: 1px;
    background: var(--color-tan);
    justify-content: space-evenly;
    overflow-x: auto;
    align-items: stretch;
    
    @media (max-width: 991px) {
      grid-template-columns: repeat(2, 1fr);
      border: none;
      background: none;

      & > .button-container { 
        border: 1px solid var(--color-tan);

        &:nth-child(2n) {
          border-left: none;
        }

        &:nth-child(n + 3) {
          border-top: none;
        }
      }
    }

    & > .button-container {
     flex: auto;
     margin-bottom: 0;

     p {
      flex: 1;
     }
     
     .button.btn-with-icon {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: 8px;
        width: 100%;
        font: var(--para-font-md-medium);
      }

      & + .button-container .button {
        @media (min-width: 992px) {
          border-left: 0;
        }
      }

      &, * {
        display: flex;
      }
    }
  }

  &.tan-theme .button.btn-with-icon {
    border: none;

    --btn-bg: var(--btn-with-icon-bg);
    --btn-bg-hover: var(--color-tan);
    --btn-txt: var(--color-oak);
    --btn-txt-hover: var(--color-oak);
    --btn-focus: var(--btn-primary-focus-outline);

    svg {
      color: var(--color-oak);

      path {
        stroke: var(--color-oak);
      }
    }
  }
}

@keyframes global-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner,
.global-loading-spinner {
    position: relative;
    pointer-events: none;
    height: auto;
    background-attachment: fixed;
  
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: var(--color-white);
      opacity: 0.3;
      z-index: 99;
    }

    &::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 4px solid rgb(95 79 61 / 20%);
      border-top-color: var(--color-oak);
      animation: global-loading-spin 0.8s linear infinite;
      z-index: 1;
      left: calc(50% - 20px);
      top: calc(50% - 20px);
    }

    button[type="submit"] {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

/* pagination section styles */
.pagination-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    flex-wrap: wrap;
    
    @media (min-width: 992px) {
      margin-top: 16px;
    }
    
    .items-per-page-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .items-per-page-label {
        font: var(--para-font-sm-medium);
        color: #333;
        white-space: nowrap;
    }

    .items-per-page-select {
        padding: 8px 15px;
        border: var(--section-border-width) solid var(--section-border-color);
        background-color: #FAFAFA;
        font-size: 14px;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        min-width: 70px;
    }

    .items-per-page-select:hover {
        border-color: #525252;
    }

    .items-per-page-select:focus {
        outline: 2px solid #dc4405;
        outline-offset: 2px;
    }

    /* Items range display */
    .items-range-display {
        font: var(--para-font-sm-medium);
        color: #333;
        white-space: nowrap;
        flex: 1;
        min-height: 36px;
        min-width: 18ch;
        font-variant-numeric: tabular-nums;
        align-content: center;
        text-align: right;

        @media (min-width: 992px) {
          text-align: center;
        }
    }

    /* Pagination controls */
    .pagination-controls {
        display: flex;
        align-items: center;
        gap: 7.5px;
        min-height: 36px;
        width: 100%;
        flex-wrap: wrap;

        @media (min-width: 992px) {
          justify-content: center;
          width: auto;
        } 
    }

    /* Active/Current page styling */
    .pagination-controls button.active,
    .pagination-controls button[aria-current="page"],
    .pagination-controls .dropin-button.active,
    .pagination-controls .dropin-button[aria-current="page"] {
        border-color: var(--color-dark-tan);
        background: var(--color-light-tan);
        font-weight: 500;
    }

    /* Ellipsis styling - no border, just text */
    .pagination-controls .pagination-ellipsis,
    .pagination-controls span:not([class], [role]) {
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #6B7280;
        border: none;
        background: none;
        min-width: auto;
        min-height: auto;
    }

    /* First and last page buttons */
    .pagination-controls .pagination-first-page,
    .pagination-controls .pagination-last-page {
        padding: 8px 6px;
        background-color: #FFF;
        color: #374151;
        font-size: 16px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .pagination-controls .pagination-first-page:disabled,
    .pagination-controls .pagination-last-page:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-controls button {
       min-width: 32px;
      min-height: 32px;
      padding: 10px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: var(--section-border-width) solid var(--section-border-color);
      background-color: #FFF;
      width: 32px;
      height: 32px;
    }

    button.pagination-first-page {
        background-image: url('/icons/pagination_first.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    button.pagination-last-page {
        background-image: url('/icons/pagination_last.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    button.pagination-arrow--backward {
        background-image: url('/icons/pagination_prev.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    button.pagination-arrow--forward {
        background-image: url('/icons/pagination_next.svg');
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Dropin pagination container to ensure proper flex layout */
    .pagination-controls .pagination-container {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .items-per-page-dropdown-ul {
        position: relative;
        display: inline-block;
    }

    .items-per-page-button {
        padding: 8px 40px 8px 15px;
        background-color: #FFF;
        border: var(--section-border-width) solid var(--section-border-color);
        cursor: pointer;
        font: var(--para-font-sm-medium);
        color: var(--color-soft-black);
        text-align: left;
        width: 100%;
        position: relative;
        appearance: none;
        background-image: url("/icons/angle-down.svg");
        background-repeat: no-repeat;
        background-position: right;
        background-size: 50%;
    }

    .items-per-page-dropdown-ul.is-open .items-per-page-button::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .items-per-page-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border: var(--section-border-width) solid var(--section-border-color);
        border-radius: 0;
        box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 1000;
        display: none;
    }

    .items-per-page-dropdown-ul.is-open .items-per-page-list {
        display: block;
    }

    .items-per-page-option {
        padding: 8px 16px;
        cursor: pointer;
        font: var(--para-font-sm-medium);
        color: var(--color-soft-black);
    }

    .items-per-page-option:hover {
        background-color: #f5f5f5;
    }

    .items-per-page-option.active {
        background-color: #dc4405;
        color: #fff;
        font-weight: 700;
    }
}



.content-block-containers {
    &.border-all {
        border: 1px solid var(--section-border-color);
    }

    .content-block {
        padding-block: var(--layout-padding);
        margin-inline: var(--layout-padding);

        .content-text {
          @media (min-width: 992px) {
            align-items: center;

            &:has(.icon) {
              align-items: flex-start;

              .icon {
                margin-top: 6px;
              }
            }
          }

            p {
                display: inline-flex;

                &:has(a),
                &:has(span:not(.icon)) {
                  display: block;
                }
            }
        }

        &+.content-block {
            border-top: .5px solid var(--color-blue-light);
        }

        h6 strong {
            font: var(--para-font-md-bld);
        }
    }
}

.has-block-error {
  border: 4px solid #ff9990;
  border-radius: 8px;
  overflow: hidden;

  > .title {
    color: var(--color-soft-black);
    background-color: #ff9990;
    padding: 4px 6px 8px;
    margin: 0 0 12px;
    font: var(--heading-font-s);
  }
}