/* Fonts */
@import "https://fonts.googleapis.com/css2?family=Work+Sans:wght@100..900&display=swap";

.aux-components {
  * {
    box-sizing: border-box;
  }

  div,
  span,
  h1,
  h2,
  h3,
  p,
  a,
  section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  h2, h3 {
      margin-bottom: 1rem;
  }

  section {
    display: block;
    padding: 1rem;
  }

  /* Section Wrappers & Layout */
  .section-wrap > * {
    --aux-gutter-x: 1.5rem;
    --aux-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--aux-gutter-x) * .5);
    padding-left: calc(var(--aux-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--aux-gutter-y));
    margin-right: calc(-0.5 * var(--aux-gutter-x));
    margin-left: calc(-0.5 * var(--aux-gutter-x));
  }

  .section-wrap > * > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--aux-gutter-x) * .5);
    padding-left: calc(var(--aux-gutter-x) * .5);
    margin-top: var(--aux-gutter-y);
  }

  /* Typography - Paragraphs */
  p {
    font-family: "Open Sans", Arial, sans-serif;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  [class*="primary-brand"] p {
    color: #fff;
  }

  /* Typography - Headings */
  h1 {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 400;
    color: #500000;
    font-size: 2.75rem;
    line-height: 1.2;
  }

  h2,
  .linked-card .linked-card__content .heading-group h2,
  .linked-card .linked-card__content .heading-group h3,
  .slab-intro h3 {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 400;
    color: #500000;
    font-size: 2rem;
    line-height: 1.2;
  }

  h3,
  .card .heading-group h2,
  .card .heading-group h3 {
    font-family: "Work Sans", Arial, sans-serif;
    font-weight: 600;
    color: #732f2f;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .subhead {
    font-size: 1rem;
    font-style: italic;
    font-family: "Work Sans", Arial, sans-serif;
    font-weight: 400;
    color: #3e3e3e;
    display: block;
  }

  [class*="primary-brand"] .subhead {
    color: #d1d1d1;
  }

  /* Links */
  & a {
    color: #500000;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    font-weight: bold;
    transition: 0.2s ease;
    display: inline;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    position: relative;
    cursor: pointer;
  }

  & a:hover:not(.btn),
   & a:focus:not(.btn),
   & a:active:not(.btn) {
    color: #732f2f;
    text-decoration: none;
        background-color: transparent;
  }

   & a:focus-visible {
    outline: dotted #af8846 2px;
    outline-offset: 3px;
  }
   & a.btn--primary-alt:hover, a.btn--primary-alt:focus, a.btn--primary-alt:active, .btn--primary-alt:hover, .btn--primary-alt:focus, .btn--primary-alt:active, button.btn--primary-alt:hover, button.btn--primary-alt:focus, button.btn--primary-alt:active {
  background-color: #732f2f;
  color: #fff;
}

 & a.btn--primary:hover, a.btn--primary:focus, a.btn--primary:active, button.btn--primary[type="submit"]:hover, button.btn--primary[type="submit"]:focus, button.btn--primary[type="submit"]:active, .btn--primary:hover, .btn--primary:focus, .btn--primary:active, button.btn--primary:hover, button.btn--primary:focus, button.btn--primary:active {
  background-color: #732f2f;
  color: white;
}

  /* Arrow icons for links */
  .heading-group a:not(.tag) {
    font-size: 1.1rem;
    font-family: "Open Sans", Arial, sans-serif;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
  }

  .heading-group a:not(.tag)::after {
    content: "";
    transition: 0.2s ease;
    display: inline-block;
    background-color: #500000;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 0.8rem;
    -webkit-mask-position: bottom;
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: 0.8rem;
    width: 1.1rem;
    height: 1rem;
    -webkit-mask-image: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg");
    mask-image: url("https://aux.tamu.edu/icons/aux-prod-icons/angles-right.svg");
    margin-left: 0.3rem;
  }

  /* Buttons */
  .btn,
  a.btn {
    font-family: "Work Sans", Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 0.65rem 2rem;
    border-bottom: none;
    text-align: center;
    width: fit-content;
    margin-bottom: 1rem;
  }

  .btn--primary {
    background: #500000;
    color: #fff;
    border: 2px solid #3c0000;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0px 0px 0px 0px #3c0000;
    font-size: 1rem;
    border-radius: 0;
  }

  .btn--primary:hover {
    background-color: #732f2f;
    color: #fff;
  }
.page-header .page-header__container .standalone-factoid {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
.standalone-factoid {
    padding: 1rem;
  border: solid #d1d1d1 2px;
  border-radius: 12px;
       
    }
    .standalone-factoid p:last-child {
        margin-bottom: 0;
    }
    .quick-fact__heading {
        margin-bottom: .3rem;
    }
    .quick-fact__heading .heading {
        font-size: 1.5rem;
        line-height: 1.2;
        color: #732f2f;
        font-style: italic;
        text-transform: uppercase;
        font-weight: 800;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-family: "Work Sans", Arial, sans-serif
    }
    .quick-fact__heading .heading svg {
        flex: 0 0 25px;
        margin-top: .25rem;
        height: 25px;
        fill: #732f2f
    }
    .page-header--primary-brand .standalone-factoid {
        border: 2px solid #732f2f
    }
    .page-header--primary-brand .standalone-factoid p {
        color: #fff
    }
    .page-header--primary-brand .standalone-factoid .quick-fact__heading .heading {
        color: #d6d3c4
    }
    .page-header--primary-brand .standalone-factoid .quick-fact__heading .heading svg {
        fill: #d6d3c4
    }
    .page-header--primary-brand .standalone-factoid .quick-fact__heading .subhead {
        color: #d1d1d1
    }
    .page-header {
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 1.5rem
    }
    @media(max-width: 768px) {
        .page-header {
            flex-direction: column
        }
    }
    .page-header .page-header__container {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 2rem;
        gap: 1.5rem
    }
    @media(max-width: 768px) {
        .page-header .page-header__container .standalone-factoid {
            width: 100%
        }
    }
    @media(max-width: 768px) {
        .page-header .page-header__container {
            flex-wrap: wrap;
            position: relative;
            order: 2;
            padding: 1.5rem
        }
    }
    @media(max-width: 576px) {
        .page-header .page-header__container {
            padding: 1rem
        }
    }
    .page-header .page-header__container .page-header__content {
     
    }
    @media(max-width: 768px) {
        .page-header .page-header__container .page-header__content {
            width: 100%
        }
    }
    .page-header .page-header__container .page-header__content .heading-group.heading-group--display .subhead {
        line-height: 1.2;
        font-size: 1.25rem
    }
    @media(max-width: 576px) {
        .page-header .page-header__container .page-header__content .heading-group.heading-group--display .subhead {
            font-size: 1.1rem
        }
    }
    .page-header .page-header__container .page-header__content p {
        font-size: 1.1rem;
        margin-bottom: .75rem
    }
    @media(max-width: 576px) {
        .page-header .page-header__container .page-header__content p {
            font-size: 1rem
        }
    }
    .page-header .page-header__container .page-header__content p:first-of-type {
        margin-top: .75rem
    }
    .page-header .page-header__container .page-header__content>.btn {
        margin-bottom: 0
    }
    .page-header .page-header__container .page-header__content .heading-group.heading-group--display+.button-group {
        margin-top: .75rem
    }
    .page-header .page-header__container .page-header__content .button-group {
        justify-content: flex-start
    }
    .page-header .page-header__container .page-header__content .divider--mini {
        margin: 0;
        margin-top: 2rem
    }
    @media(max-width: 768px) {
        .page-header .page-header__container .page-header__content .divider--mini {
            display: none;
            visibility: hidden
        }
    }
  /* Primary Brand Overrides (White/Maroon flip) */
  [class*="primary-brand"] {
    background: #500000;
  }

  [class*="primary-brand"] .btn--primary {
    background: #fff;
    color: #500000;
    border: 2px solid #af8846;
  }

  /* Cards */
  .card {
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
  }

  .linked-card {
    display: flex;
    position: relative;
    border: 2px solid #500000;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0);
    transition: all 0.3s ease;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    overflow: hidden;
  }

  .linked-card:hover {
    box-shadow: -0.5rem 0.5rem 0 0 #3c0000;
    background: rgba(0, 0, 0, 0.05);
    border: 2px solid #3c0000;
    cursor: pointer;
  }

  /* Dividers & Icons */
  .divider-hash {
    display: block;
    width: 100%;
    background: #707070;
    --svg: url("https://aux.tamu.edu/icons/aux-prod-icons/hash-divider.svg");
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    height: 20px;
  }

  .icon-wrapper svg {
    width: 100%;
    height: 100%;
    fill: #500000;
  }
  .callout .icon-wrapper {
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
}



.card-slab {
  align-items: center;
}

.card-slab .slab-intro {
  width: 33.33333%;
}

.card-slab .linked-card {
  padding: 0;
  width: calc(33.33333% - 1.5rem);
  align-self: stretch;
  margin: 0 .75rem;
    margin-top: 0px;
    padding: 1rem;
}

  /* Responsive Media Queries */
  @media (max-width: 992px) {
    .card-slab {
      flex-wrap: wrap;
    }
    .card-slab .slab-intro {
      width: 100%;
      margin-bottom: 1.5rem;
    }
    .card-slab .card.card--featured {
      width: 50%;
    }
  }

  @media (max-width: 768px) {
    .page-header {
      flex-direction: column;
    }
    .page-header .page-header__container .standalone-factoid {
      width: 100%;
    }
    .callout .callout__container {
      flex-wrap: wrap;
      width: 100%;
      gap: 0.5rem;
    }
    .callout .callout__container {
        padding-left: 2rem;
    }
        .card-slab .linked-card {
            width: calc(50% - 1.5rem);
        }
  }
    @media (max-width: 500px) {
       .callout .callout__container {
            padding-left: 2rem;
            }
  }

  @media (max-width: 576px) {
        .button-group.button-group--primary .btn {
          width: 100%;
        }
        .card-slab .linked-card {
            width: 100%;
            margin-bottom: 1rem;
            }
    }
}



.aux-components [class*="leading"] a:not(.btn),
.aux-components .link--cta-leading {
  display: inline-block;
  margin-left: 1.4rem;
  font-size: 1.1rem;
  font-family: "Open Sans", Arial, sans-serif;
  border: none;
}

.aux-components [class*="leading"] a:not(.btn)::before,
.aux-components .link--cta-leading::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1rem;
  margin-left: -1.4rem;
  margin-right: 0.3rem;

  background-color: #500000;
  transition: 0.2s ease;

  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cpath d='M58.83 34.83a4.008 4.008 0 0 0 0-5.66l-24-24c-1.56-1.56-4.1-1.56-5.66 0s-1.56 4.1 0 5.66L50.35 32 29.19 53.18c-1.56 1.56-1.56 4.1 0 5.66s4.1 1.56 5.66 0l24-24Zm-48 24 24-24a4.008 4.008 0 0 0 0-5.66l-24-24c-1.56-1.56-4.1-1.56-5.66 0s-1.56 4.1 0 5.66L26.35 32 5.18 53.18c-1.56 1.56-1.56 4.1 0 5.66s4.1 1.56 5.66 0Z'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 0.8rem;
  -webkit-mask-position: bottom;

  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cpath d='M58.83 34.83a4.008 4.008 0 0 0 0-5.66l-24-24c-1.56-1.56-4.1-1.56-5.66 0s-1.56 4.1 0 5.66L50.35 32 29.19 53.18c-1.56 1.56-1.56 4.1 0 5.66s4.1 1.56 5.66 0l24-24Zm-48 24 24-24a4.008 4.008 0 0 0 0-5.66l-24-24c-1.56-1.56-4.1-1.56-5.66 0s-1.56 4.1 0 5.66L26.35 32 5.18 53.18c-1.56 1.56-1.56 4.1 0 5.66s4.1 1.56 5.66 0Z'/%3e%3c/svg%3e");
  mask-repeat: no-repeat;
  mask-size: 0.8rem;
  mask-position: bottom;
}

.aux-components a,
.aux-components .link {
  color: #500000;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  transition: 0.2s ease;
  cursor: pointer;
}



.aux-components .sidebar-item__container {
  padding: 1rem;

}

.aux-components .sidebar-item .divider--mini {
  margin: 0.5rem 0 1rem;
  background: #d1d1d1;
}

.aux-components .divider--mini.divider-hash {
  width: 45.3px;
  height: 10px;
}

.aux-components ul li {
  list-style-type: none;
  margin-left: -12px;
  line-height: 1.8;
}
.aux-components .section-wrap.section-wrap--maroon {
  padding: 2rem;
  background-color: #500000;
}

.aux-components .section-wrap.section-wrap--maroon h2, .aux-components .section-wrap.section-wrap--maroon p, .aux-components .section-wrap.section-wrap--maroon a {
  color: #ffffff;
}

.aux-components .section-wrap.section-wrap--maroon [class*="leading"] a:not(.btn)::before {
  background-color: #fff;
  }
