/*!
Theme Name: AUX WordPress Parent Theme
Theme URI: https://github.com/tamu-edu/aux-wordpress
Author: Texas A&M University Web Team
Author URI: https://web.tamu.edu/
Description: The <a href="https://web.tamu.edu/aggie-ux-help-center/wordpress/">Aggie UX (AUX) WordPress theme</a> enables Texas A&M University campus members to create brand-compliant, accessible and user-focused websites. This is a hybrid WordPress theme, combining PHP templates with support for basic Gutenberg functionality. <a href="https://web.tamu.edu/aggie-ux-help-center/wordpress/how-to-install-the-aggie-ux-wordpress-theme/">Installation instructions</a>.
Version: 2.0.1
Tested up to: 7.0.0
Requires PHP: 8.1
License:
License URI:
Text Domain: marcomm-aux
Tags:


* WordPress specific CSS overrides and customizations for the AUX PHP theme.
* For example - styling for a form or gallery plugin or html that is unique to WP.
*
* This css file is only loaded on the front-end.
* Enqueue function: wp_enqueue_style
* Enqueue file: /inc/WP_AUX/Services/HeadService.php
*
* @since 1.0.0
*/


/* --------------------------------------------------------------------------
START: STYLES FOR CONTENT OUTSIDE OF COMPONENTS
This ensures content like paragraphs, headings, and images outside of AUX components don't span the full screen and have appropriate margins.
-------------------------------------------------------------------------- */

/*
  Align html elements output by native WP blocks and the Classic block on body content
  with AUX components on pages that don't have a sidebar.

  AUX components are wrapped in a .section-wrap element. There are many cases in WordPress where
  either native WordPress blocks, the Classic block or plugins output content. There's no way to account
  for every possible case, so we're targeting immediate children of #main-content and immediate children
  of .aux-body-content when it is an immediate child of #main-content to position them.

  This feels brittle. I'd like to find a way to identify when one or more non-aux elements are output and
  wrap them in a .section-wrap element. - Jeremy
*/

body.aux-sidebar--none:not(.news-template-default) .aux-body-content {
  > p,
  > h2,
  > h3,
  > h4,
  > h5,
  > h6,
  > ul,
  > ol,
  > hr,
  > blockquote,
  > table,
  > dl,
  > pre,
  > audio,
  > video,
  > img,
  > figure:not(.captioned-media--slab, .captioned-media--small, .wp-block-gallery),
  > iframe,
  > form {
    max-width: calc(.6666 * 1400px);
    margin: 0 auto;
    margin-bottom: 0px;
    margin-bottom: 1rem;
    padding: 0 .75rem;
    width: calc(66.66666%);
    /* very delicate media query; matches behavior of custom content */
    @media screen and (max-width:calc(1400px + 3rem)) {
      max-width:unset;
      width:calc(66.66666% - 3.6rem);
      padding:0;
    }
    @media screen and (max-width:992px) {
      width:100%;
      padding:0 2.25rem;
    }
  }
  > figure.captioned-media--slab {
    margin-bottom:6rem;
    @media screen and (max-width: 992px) {
      margin-bottom:2.25rem;
    }
  }
  > figure:not(.captioned-media--slab, .wp-block-gallery) {
    img, figcaption {
      width:100%;
    }
    figcaption {
      padding:1rem;
    }
  }
  > audio,
  > video,
  > img,
  > figure:not(.captioned-media, .wp-block-image, .wp-block-gallery, .wp-block-table),
  > iframe {
    width:100%;
    display:block;
  }
  > video {
    aspect-ratio:16/9;
    object-fit:cover;
    height:100%;
  }
  /* indenting lists */
  > ol,
  > ul {
    padding-left:1.75rem;
    /* accouting for media queries established above */
    @media screen and (max-width:calc(1400px + 3rem)) {
      padding-left:1rem;
    }
    @media screen and (max-width:992px) {
      padding-left:3.25rem;
    }
  }
  /* removing padding from earlier */
  > figure table {
    padding:0;
    margin-bottom:0;
  }
  /* adding back padding */
  > pre {
    padding:.5rem;
    @media screen and (max-width:calc(1400px + 3rem)) {
      padding:.5rem;
    }
    @media screen and (max-width:992px) {
      padding:.5rem;
    }
  }
}

/* clearing float so floated content at the bottom of the container doesn't overlap and break the footer */
footer.footer--slim {
  clear:both;
}
/* --------------------------------------------------------------------------
END: STYLES FOR CONTENT OUTSIDE OF COMPONENTS
This ensures content like paragraphs, headings, and images outside of AUX components don't span the full screen and have appropriate margins.
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: WORDPRESS GALLERY AND NATIVE IMAGE STYLES
-------------------------------------------------------------------------- */
figure.alignnone {
  max-width: 100%;
  width: 100%;
  margin: 1rem auto;
  img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}

figure.alignleft {
  float: left;
  width: auto;
  max-width: 350px;
  margin-right: 2rem;
  clear: right;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
}

figure.alignright {
  float: right;
  width: auto;
  max-width: 350px;
  margin-right: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  clear: left;
  margin-left: 1rem;
}

figure.alignleft,
figure.alignright {
  img {
    max-width: 350px;
    height: auto;
  }
}

.wp-element-caption {
  background: transparent;
  color: black;
  padding: 1rem;
  text-align: left;
  text-shadow: none;
  padding: .5rem;
  font-family: "Work Sans", sans-serif;
  font-size: .9rem;
  font-weight: 400;
  background: none;
  border: none;
  line-height: 1.5;
  font-style: italic;
}

.wp-block-gallery figcaption {
  text-align: left;
}

.caption__attribution {
  line-height: 1.5;
  font-style: italic;
  margin-top: 0.75rem;
  display: block;
}

figure.wp-block-gallery.has-nested-images {
  margin-top: 3.25rem;
  margin-bottom: 3.25rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
  backdrop-filter: none;
  content: none;
  -webkit-mask-image: none;
  mask-image: none;
  max-height: 100%;
  content: none;
  position: unset;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  color: black;
  text-align: left;
  text-shadow: none;
  padding: .5rem;
  font-family: "Work Sans", sans-serif;
  font-size: .9rem;
  font-weight: 400;
  background: none;
  border: none;
  position: unset;
}

.wp-block-gallery.has-nested-images figcaption {
  flex-basis: 0;
  flex-grow: 0;
  flex-basis: 100%;
  flex-grow: 1;
  max-width: 800px;
  margin: 0 auto;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
  @media screen and (max-width: 350px) {
    width: calc(100% - var(--wp--style--unstable-gallery-gap, 16px)/2);
  }

  a,
  img {
    flex: 1 auto;
    height: auto;
    width: 100%
  }
}
/* --------------------------------------------------------------------------
END: WORDPRESS GALLERY AND NATIVE IMAGE STYLES
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: NEWS-FOCUSED STYLES
includes styles for standard and featured news posts
-------------------------------------------------------------------------- */

/*
featured news header mobile adjustment
removing dynamic angle and overlap
*/
@media screen and (max-width: 768px) {
  .news-page-header.news-page-header--featured {
    background:#500000;
    margin-bottom:0;
    .news-page-header__bg {
      display:none;
    }
    .news-page-header__container {
      padding-bottom:3rem;
      margin-bottom:0;
    }
  }
}

/* aligning news footer with content and removing left padding from section wraps on standard news posts */
.news-template-default .news-page-header + .aux-container--fluid-mw {
  .aux-body-content .section-wrap {
    padding-left:0;
    padding-right:0;
  }
  .aux-body-content + .section-wrap {
    padding-left:0;
    padding-right:0;
    .news-footer {
      .news-footer__divider, .news-footer__container {
        padding-left:0;
        padding-right:0;
      }
    }
  }
}

/* adding bottom margin to sidebar if it's longer than the article */
.sidebar-feed {
  margin-bottom:1.5rem;
}

/* styling white bg overlap on featured news posts */
body.single-news.aux-header--featured {
  .aux-container--fluid-mw {
    .aux-body-content {
      padding: 2rem;
      padding-bottom:0;
      background: #ffffff;
      /* z-index is needed so the white bg doesn't sit on top of media features */
      z-index: 0;
      @media screen and (max-width: 767px) {
        margin-top:.75rem;
      }
      @media screen and (max-width: 500px) {
        padding:1rem;
      }
    }
  }
}

/*
breakout styles for featured news posts
allows components with a section wrap to display full-width
*/
body.single-news.aux-sidebar--none {
  .section-wrap {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2);
    padding-bottom: 3rem;
  }

  .section-wrap.section-wrap--maroon,
  .section-wrap.section-wrap--dynamic-maroon,
  .section-wrap.section-wrap--gray-100,
  .section-wrap.section-wrap--dynamic-gray-100,
  .section-wrap.section-wrap--gray-900,
  .section-wrap.section-wrap--dynamic-gray-900 {
    margin-bottom: 1rem;
  }

  .captioned-media.captioned-media--slab,
  .feature-cta,
  .cta-feature,
  .media-feature,
  .split-feature {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: calc(-1 * (100vw - 100%) / 2);
  }

  .captioned-media.captioned-media--slab {
    margin-bottom: 4rem;
  }

  .feature-cta,
  .cta-feature,
  .media-feature,
  .split-feature {
    margin-bottom: 1rem;
  }
}
/* -------------------------------------
END: NEWS-FOCUSED STYLES
includes styles for standard and featured news posts
------------------------------------- */





/* -------------------------------------
START: ARCHIVE PAGE STYLES
------------------------------------- */
body.post-type-archive .inline-card-group + .pagination {
  margin-top:3rem;
}
.pagination .pagination__list .pagination__item .pagination__page.dots {
  pointer-events: none;
  border: none;
}
/* --------------------------------------------------------------------------
END: ARCHIVE PAGE STYLES
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: SEARCH AND SEARCH RESULTS STYLES
-------------------------------------------------------------------------- */

/* hiding default chrome x button in search fields */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}


/* search result styles */
.search-result {
  .term-link {
    height: 1.5rem;
    &::after {
      display:none;
    }
    img {
      height: 1.5rem;
      margin-right: .25rem;
      width: auto;
      float: left;
    }
  }
}

/* search page layout styles */
body.search .col {
  .dismissible-tag-collection {
    margin-bottom:3rem;
  }
  .section-wrap:first-child {
    padding-top:0;
  }
}
/* --------------------------------------------------------------------------
END: SEARCH AND SEARCH RESULTS STYLES
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: GRAVITY FORMS STYLES
includes styling for forms placed on a page or inside components (sign-up feature)
-------------------------------------------------------------------------- */

.signup-feature__content {
  /* removing styling from aux */
  .gfield, .gform_heading {
    margin-bottom:0;
    border-bottom:0;
    padding:0;
  }

  /* adding aux styles for gforms markup */
  /* default styling */
  .gform_wrapper {
    .gform_heading {
      .gform_title {
        text-transform: uppercase;
        font-size: 2.25rem;
      }

      .gform_description {
        margin-top: .5rem;
      }
    }

    form {
      display: flex;
      align-items: center;

      @media screen and (max-width:450px) {
        flex-direction: column;
      }

      label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }

      .gform_body {
        width: 100%;

        input {
          height: 60px;
        }
      }

      .gform_footer {
        @media screen and (max-width:450px) {
          width: 100%;
        }

        .gform_button {
          margin: 0;
          height: 60px;
          border-radius: 0;
          background: #500000;
          border: solid #500000 2px;

          &:hover,
          &:active,
          &:focus {
            background: #732f2f;
          }

          @media screen and (max-width:450px) {
            width: 100%;
          }
        }
      }
    }
  }
}
/* bold styling */
.signup-feature--bold {
  .signup-feature__content {
    .gform_wrapper {
      .gform_heading {
        .gform_title {
          font-family: "Work Sans", Arial, sans-serif;
          font-weight: 700;
          font-size: 2.625rem;
          text-transform: none;
          font-style: italic;

          &::before {
            content: "";
            border-bottom: 7px solid #732f2f;
            display: block;
            width: 2.5rem;
            margin-bottom: 0.5rem;
          }
        }
      }

      form {
        .gform_body {
          input {
            border: solid #500000 4px;
          }
        }
      }
    }
  }
}
/* elegant styling */
.signup-feature--elegant {
  .signup-feature__content {
    .gform_wrapper {
      .gform_heading {
        .gform_title {
          font-family: Georgia, Times, serif;
          font-size: 2.5rem;
          text-transform: none;
          font-style: italic;
        }
      }

      form {
        .gform_body {
          input {
            border: solid #500000 1px;
          }
        }
      }
    }
  }
}

/* styling gforms validation error */
.signup-feature__content {
  .gform_validation_error {
    .gform_submission_error {
      font-size: 1.1rem;
      font-family: "Open Sans", sans-serif;
      line-height: 1.5;
      color: #95463b;
      margin-bottom: 1rem;

      &::before {
        content: "";
        mask-image: url(https://aux.tamu.edu/icons/aux-prod-icons/circle-outline-xmark.svg);
        -webkit-mask-image: url(https://aux.tamu.edu/icons/aux-prod-icons/circle-outline-xmark.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 25px;
        mask-repeat: no-repeat;
        mask-size: 25px;
        display: block;
        width: 25px;
        height: 25px;
        background: #d04343;
        margin-bottom: .25rem;
      }
    }

    form {
      align-items: flex-end;

      .gfield--type-email {
        display: flex;
        flex-direction: column;

        .gfield_validation_message {
          order: 1;
          margin-bottom: .5rem;
          color: #d04343;
        }

        .ginput_container_email {
          order: 2;

          input {
            border: solid #d04343 2px;
          }
        }
      }

      .gform_footer {
        margin-top: .75rem;
      }
    }
  }
}

/* styling gforms confirmation message */
.gform_confirmation_message {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;

  svg {
    width: 30px;
    height: 30px;
    fill: #732f2f;
  }

  h2 {
    font-family: "Open Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #500000;

    &::before {
      content: "";
      mask-image: url(https://aux.tamu.edu/icons/aux-prod-icons/circle-outline-check.svg);
      -webkit-mask-image: url(https://aux.tamu.edu/icons/aux-prod-icons/circle-outline-check.svg);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 25px;
      mask-repeat: no-repeat;
      mask-size: 25px;
      display: block;
      width: 25px;
      height: 25px;
      background: #732f2f;
      margin-bottom: .25rem;
    }
  }

  p {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
END: GRAVITY FORMS STYLES
includes styling for forms placed on a page or inside components (sign-up feature)
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: STYLES THAT SHOULD EVENTUALLY BE ADDED TO AUX
These are fixes we found in wordpress, but would be applicable fixes across all platforms.
-------------------------------------------------------------------------- */

/* sizing for locally uploaded video in captioned media */
figure.captioned-media {
  video {
    width: 100%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
END: STYLES THAT SHOULD EVENTUALLY BE ADDED TO AUX
These are fixes we found in wordpress, but would be applicable fixes across all platforms.
-------------------------------------------------------------------------- */





/* --------------------------------------------------------------------------
START: GRAVITY FORMS STYLES
-------------------------------------------------------------------------- */

/* if the gravity forms has a section wrap on a page with a sidebar */
.col-9 .section-wrap[data-shortcode="gravityform"] {
  padding: 0 0 3rem 0;
  .gform_wrapper {
    padding: 0;
  }
}

/* full width if on page with sidebar */
.col-9 {
  .gform_wrapper {
    > * {
      width: 100%;
    }
  }
}

/* honeypot */
.gform_wrapper .gfield--type-honeypot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

.gform_wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
  > * {
    margin: 0 auto;
    width: 66.66666667%;
    @media screen and (max-width:992px) {
      width: 100%;
    }
  }
}

.gform-footer input[type="submit"] {
  margin-bottom: 0;
}
.gform_heading {
  padding: 0 1rem;
  margin-bottom: 1rem;
  .gform_description {
    margin-bottom: 0;
  }
}

/* progress bar */
.gf_progressbar_wrapper {
  padding: 0 1rem 1.5rem 1rem;
}
.gf_progressbar_title {
  font-family: "Work Sans", sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.gf_progressbar {
  border-top: 3px dotted #500000;
}
.gf_progressbar_percentage {
  border-top: 4px solid #500000;
  margin-top: -3px;
}
.gf_progressbar_percentage span {
  display: none;
}

fieldset.gfield {
  .ginput_container span {
    display: block;
    margin-bottom: 0.5rem;
  }
  .gform-field-label {
    margin-bottom: 0.25rem;
  }
}

/* individual fields */
.gfield_description,
.screen-reader-text {
  font-family: "Work Sans", sans-serif;
  color: #3e3e3e;
}

.gfield_required_text {
  font-weight: 400;
  margin-left: 0.25rem;
}

.gfield {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  border-bottom: dotted #d1d1d1 2px;
  padding: 1rem;
  padding-top: 0;
  label {
    order: 1;
  }
  .gfield_description {
    order: 2;
  }
  .ginput_container:not(.ginput_container_time) {
    order: 3;
  }
}
.ginput_container {
  margin-top: 0.25rem;
}

/* list groups */
.gfield_list_groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gfield_list_group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
  .gfield_list_group_item {
    width: 100%;
  }
  .gfield_list_icons {
    display: flex;
    flex-wrap: nowrap;
  }
}
.gfield_list_header {
  display: flex;
  gap: 0.5rem;
  .gform-field-label {
    width: 100%;
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
  }
  .gfield_header_item--icons {
    min-width: 147px;
  }
}
/* select all button */
.gfield_choice_all_toggle {
  font-family: "Work Sans", sans-serif;
  font-size: 0.9rem;
  color: #000000;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  transition: 0.2s ease;
  cursor: pointer;
  border: solid #500000 2px;
  border-radius: 12px;
  margin-top: 0.5rem;
  &:hover,
  &:active,
  &:focus {
    background: #eaeaea;
    color: #500000;
  }
}
/* add/remove buttons */
.add_list_item,
.delete_list_item {
  font-family: "Work Sans", sans-serif;
  font-size: 0.9rem;
  color: #000000;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: 0.2s ease;
  cursor: pointer;
  &:hover,
  &:active,
  &:focus {
    background: #eaeaea;
    color: #500000;
  }
}

.ginput_container select {
  height: auto;
  padding: 1rem;
  margin: 0;
  font-size: 1rem;
}

/* time */
.hour_minute_colon {
  margin-top: 1rem;
}
.gfield--type-time {
  .ginput_container {
    display: flex;
    gap: 0.5rem;
    .ginput_container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .gfield_time_ampm {
      width: 250px;
    }
  }
}

.ginput_container.ginput_container_multiselect .large.gfield_select {
  height: 130px;
  background: none;
  padding: 0;
  option {
    padding: 1rem;
    border-bottom: dotted #d1d1d1 2px;
    &:last-child {
      border-bottom: none;
    }
  }
}

.gfield--type-section {
  padding-bottom: 0;
  border: none;
}

/* address fieldset */
.gfield--type-address {
  .ginput_container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.ginput_container_image_choice {
  .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* name fieldset */
.gfield--type-name .ginput_container--name {
  display: flex;
  gap: 1.5rem;
}
.ginput_complex.ginput_container.ginput_container--name {
  display: flex;
  gap: 0.5rem;
  .gform-grid-col {
    width: 100%;
  }
}

/* file upload */
.ginput_container.ginput_container_fileupload {
  display: flex;
  flex-direction: column;
  .gfield_description {
    margin-top: 0.5rem;
  }
}
input[type="file"] {
  font-family: "Work Sans", sans-serif;
  font-size: 1rem;
  &::file-selector-button {
    padding: 1rem;
    border: solid #500000 2px;
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
    background: #ffffff;
    transition: 0.2s ease;
    cursor: pointer;
    &:hover,
    &:active,
    &:focus {
      background: #500000;
      color: #ffffff;
    }
  }
}

/* validation */
.validation_message {
  color: #d04343;
  font-weight: bold;
  display: block;
  margin: 0.25rem 0;
}

.gform_submission_error {
  border-left: solid #d04343 8px;
  padding: 1rem 1.25rem;
  color: #d04343;
  font-family: "Work Sans", sans-serif;
  font-size: 1.25rem;
  margin: 0 0.75rem 0.75rem;
  font-weight: bold;
  background: #d0434315;
}
.gform_submission_error::before {
  content: "";
  mask-image: url(https://aux.tamu.edu/icons/aux-prod-icons/circle-outline-xmark.svg);
  mask-repeat: no-repeat;
  mask-position: bottom;
  mask-size: 2rem;
  width: 2rem;
  height: 2rem;
  display: block;
  background: #d04343;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
END: GRAVITY FORMS STYLES
-------------------------------------------------------------------------- */


/* Footer Option A */
.footer--slim {

  /*
    Texas A&M University logo
    Only shown if "Text Identity" and "Texas A&M University Logo" and "Footer Option A" are selected in the Customizer.
    Adding CSS here b/c this isn't in Storybook yet.
  */
  .identity-primary-stacked {
    img {
      width: auto;
      max-width: 200px;
    }
  }
}