/*!
Theme Name: AUX-WordPress
Theme URI: https://github.com/tamu-edu/aux-wordpress
Author: Texas A&M University Web Team
Author URI: https://marcomm.tamu.edu/web/
Description: A WordPress theme implementing the AggieUX design system. This is a hybrid WordPress theme, combining PHP templates with support for basic Gutenberg functionality.
Version: 1.0.2
Tested up to: 6.9
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
*/

/* Baseline styles supporting AUX in Wordpress for AUX and AUX-child themes */
body.h-spacing-kluge main .aux-container--fluid-mw>.row>.col-9>h2 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

body.h-spacing-kluge main .aux-container--fluid-mw>.row>.col-9>h2:first-child {
  margin-top: .5rem;
}

.search-result .card__image img {
  height: auto;
}

.search-result .superhead span:after,
.search-result .search-result-tags span:after {
  display: inline;
  content: ", ";
}

.search-result .superhead span:last-child:after,
.search-result .search-result-tags span:last-child:after {
  content: "";
}

/* Captioned Image Styles */
figure figcaption {
  margin-top: -10px;
}

.caption {
  padding: 1.5rem;
}

.caption__caption {
  font-size: 0.875rem;
  font-weight: 400;
  color: #434343;
}

.caption__attribution {
  line-height: 1.5;
  font-style: italic;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  display: block;
  color: #3e3e3e;
}

.caption__divider {
  width: 6.25rem;
  border-color: black;
  margin-left: 0;
}

figure.alignnone {
  max-width: 100%;
  width: 100%;
  margin: 1rem auto;
}

figure.alignnone 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;
}

figure.alignleft {
  margin-right: 1rem;
}

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

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

figure.alignright {
  margin-left: 1rem;
}

.tag {
  text-transform: capitalize;
}

.card {
  .heading-group {
    >.tag {
      display: inline-block;
      margin-bottom: .5rem;
    }

    .tag-collection {
      margin-bottom: .5rem;
    }
  }
}

.news-page-header .news-page-header__container .news-page-header__byline .date-author .date::after {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  width: 2px;
  display: inline-block;
}

@media screen and (max-width:639px) {
  .menu-header-navigation-container {
    .menu {
      .menu-item {
        a {
          padding: 1rem;

          &:hover,
          &:active,
          &:focus {
            background: #eaeaea;
            text-decoration: underline;
            color: #732f2f;
          }
        }
      }
    }
  }

  .menu-item.menu-item--dropdown .dropdown-toggle {
    color: #000000;
    width: 100%;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 1.25rem;
    padding: 1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: dotted #d1d1d1 2px;
    transition: 0.2s ease;
    position: relative;

    &:hover,
    &:active,
    &:focus {
      padding-right: 0.75rem;
      background: #eaeaea;
      text-decoration: underline;
      color: #732f2f;
    }

    &:focus-visible {
      outline: dotted #af8846 2px;
      outline-offset: 3px;
    }

    &::after {
      content: "\002B";
      position: absolute;
      right: 1rem;
    }

    &[aria-pressed="true"] {
      &::after {
        content: "\002D";
      }
    }
  }

  .menu-item {
    margin-bottom: 0;

    .dropdown {
      .dropdown-items {
        background: #f6f6f6;
        margin: 0;
        list-style-type: none;

        li {
          margin-bottom: 0;

          &:last-child {
            border-bottom: none;
          }

          a {
            padding: 1rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
}

body.aux-sidebar--none {
  .section-wrap.section-wrap--border {
    border: none;
    margin: 0;

    >* {
      border: solid #500000 1px;
      padding: 3rem;

      @media screen and (max-width:576px) {
        padding: 1.5rem;
      }
    }
  }
}

/* Temporary mobile nav styling. This can be removed when the new navigation is implemented */
.menu-main-navigation-container {
  width: 100%;
}

.mobile-nav__primary .mobile-search__container {
  margin: 1rem auto;
  width: 100%;
}

.mobile-nav__primary .menu-item a {
  color: #000;
  width: 100%;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 1.25rem;
  padding: 1rem 0.5rem;
  padding-right: 0.5rem;
  border: none;
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  border-bottom: dotted #d1d1d1 2px;
  transition: 0.2s ease;
}

.mobile-nav__primary .menu-item a:hover,
.mobile-nav__primary .menu-item a:focus,
.mobile-nav__primary .menu-item a:active {
  padding-right: 0.25rem;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 45%);
  text-decoration: underline;
  color: #732f2f;
}

.mobile-nav__primary ol.menu,
.mobile-nav__primary ul.menu {
  width: 100%;
  list-style-type: none;
  margin-left: 0;
}


/* ------------------------------------------
    CSS below moved from aux-wp-styles.css
  ------------------------------------------ */

/* 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;
}

/*
  Align html elements output by native WP blocks and the Classic block on body content
  with AUX components on pages that have a sidebar.
*/
.aux-sidebar--left .aux-body-content {

  &>ul,
  &>ol {
    padding-left: 1rem;
  }
}

/*
  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
*/
#main-content,
.aux-sidebar--none #main-content>.aux-body-content {

  &>p,
  &>ul,
  &>ol,
  &>img,
  &>h2,
  &>h3,
  &>h4,
  &>h5,
  &>h6,
  &>table,
  &>figure,
  &>.alert {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  table {
    tr th, tr td, thead, tfoot {
      border-color:#d1d1d1;
    }
  }

  &>ul,
  &>ol {
    padding-left: 1rem;
  }

  &>figure.captioned-media--left,
  &>figure.captioned-media--right {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    width: calc(100% - 3rem);
  }
  /* margin and padding adjustments for plain text */
  .feature-cta, .section-wrap--gray-100, .section-wrap--dynamic-gray-100, .section-wrap--maroon, .section-wrap--dynamic-maroon, .section-wrap--gray-900, .section-wrap--dynamic-gray-900 {
    + p, + h2, + h3, + h4, + h5, + h6 {
      margin-top:1rem;
    }
  }
}
/* if a pargraph is the last direct child on a page, give it some margin to push it away from the footer */
#main-content > p:last-child {
  margin-bottom:3rem;
}

/* media queries for captioned media fix above */
@media screen and (min-width:992px) {

  #main-content,
  .aux-sidebar--none #main-content>.aux-body-content {

    &>p,
    &>ul,
    &>ol,
    &>img,
    &>h2,
    &>h3,
    &>h4,
    &>h5,
    &>h6,
    &>table,
    &>figure,
    &>.alert {
      margin-left: 10%;
      margin-right: 10%;
    }

    &>.captioned-media:not(.captioned-media--right, .captioned-media--left, .captioned-media--slab) {
      margin: 0 auto;
      margin-bottom: 1rem;
    }

    &>figure.captioned-media--left {
      margin-left: calc(50% - 500px);
      margin-right: 1rem;
      width: inherit;
    }

    &>figure.captioned-media--right {
      margin-left: 1rem;
      margin-right: calc(50% - 500px);
      width: inherit;
    }
  }
}

@media screen and (min-width:1200px) {

  #main-content,
  .aux-sidebar--none #main-content>.aux-body-content {

    &>p,
    &>ul,
    &>ol,
    &>img,
    &>h2,
    &>h3,
    &>h4,
    &>h5,
    &>h6,
    &>table,
    &>figure:not(.captioned-media),
    &>.alert {
      width: 75%;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/* END ALIGNMENT FIXES */


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

  figcaption {
    margin-top: 0;
  }
}

/* wordpress gallery and captions styling */
.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 {
  box-sizing: none;
  color: black;
  text-align: left;
  text-shadow: none;
  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;
  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%
  }
}

/* Add to AUX - height: auto fixes bug with really tall images.*/
.card .card__image img {
  height: auto;
}

/* mobile clamp styles - move to AUX at a later date */
.menu-header-navigation-container {
  width: 100%;
}

@media (max-width: 1000px) {
  .aux-footer .aux-footer__container .footer__column {
    width: 33%;
  }
}

@media (max-width: 500px) {
  .aux-footer .aux-footer__container {
    flex-direction: column;
  }

  .aux-footer .aux-footer__container .footer__column {
    width: 99%;
  }
}

@media screen and (max-width:768px) {
  .news-page-header.news-page-header--featured {
    margin-bottom: 0;

    .news-page-header__container {
      padding-bottom: 3rem;

      .news-page-header__title {
        h1 {
          font-size: 3rem;
        }
      }
    }
  }
}

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

/* featured news captioned media styles */
body.single-news.aux-header--featured {
  .aux-container--fluid-mw {
    .aux-body-content {
      padding: 2rem 2rem 0 2rem;
      background: #ffffff;

      @media screen and (max-width:768px) {
        padding-top: 0;
      }
    }
  }

  .captioned-media:first-child {
    margin: -2.5rem -2.5rem 2.5rem -2.5rem;

    @media screen and (max-width:768px) {
      margin: 0 0 2.5rem 0;
    }

    &.captioned-media--small {
      margin-top: 0;
      margin-bottom: 1rem;

      &.captioned-media--left {
        margin-right: 1rem;
        margin-left: 0;
      }

      &.captioned-media--right {
        margin-left: 1rem;
        margin-right: 0;
      }
    }
  }
}

body.post-type-archive .inline-card-group + .pagination {
  margin-top:3rem;
}
.pagination .pagination__list .pagination__item .pagination__page.dots {
  pointer-events: none;
  border: none;
}

/* news post breakout styles */
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;
  }
}

/* Search results */
.search-result {
  .term-link {
    height: 1.5rem;

    &::after {
      display: none;
    }

    img {
      height: 1.5rem;
      margin-right: .25rem;
      width: auto;
      float: left;
    }
  }
}

/* signup feature - gravity forms styling */
.signup-feature__content {
  .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%;
          }
        }
      }
    }
  }
}

.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;
          }
        }
      }
    }
  }
}

.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;
          }
        }
      }
    }
  }
}

/* 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;
      }
    }
  }
}

/* gforms confirmation message styles */
.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;
  }
}

/* landing page hero CSS fixes - to be added to AUX 1.10.1 */
.hero {
  position: relative;
}

.hero:not(.hero--tall, .hero--narrow) {
  .hero__video {
    height: 560px;

    @media screen and (max-width:1400px) {
      aspect-ratio: 2.5/1;
    }
  }
}

/* home page styles markup simplification - to be added to AUX at a later date*/
.hero.hero--main {
  .hero__container {
    .hero__content {
      .button-group {
        margin-top: 1rem;
      }

      .button-group.button-group--primary {
        .btn:only-child {
          width: 100%;
        }
      }

      .button-group.button-group--primary[data-buttons="4"] {
        flex-wrap: wrap;

        .btn.btn--primary {
          width: calc(50% - 0.5rem);
        }
      }
    }
  }
}

.hero.hero--bold {
  .hero__container {
    .hero__content {
      .heading-group {
        h1 {
          font-family: "Work Sans", sans-serif;
          font-weight: 900;
          color: #500000;
          font-size: 3rem;
          font-style: italic;
          text-transform: uppercase;
        }
      }

      .heading-group::after {
        content: "";
        display: inline-block;
        width: 5rem;
        height: 0.75rem;
        background-color: #732f2f;
        margin-top: 0.5rem;
      }
    }
  }
}

.hero.hero--elegant {
  .hero__container {
    .hero__content {
      .heading-group {
        h1 {
          font-weight: 400;
          color: #500000;
          text-transform: none;
          font-family: Georgia, serif;
          font-size: 3rem;
        }
      }
    }
  }
}

body.search #main-content>.aux-container--fluid-mw>.row>.col>.section-wrap>.dismissible-tag-collection {
  position: relative;
  top: -3rem;
}

/* section intro fix for text centering on internal pages, updated to left-align text */
[class*="internal"] .section-intro.section-intro--center .section-intro__container .section-intro__content .heading-group {
  text-align: left;
}

/* added margin to elegant heroes so there's no overlap with content/text below */
.hero.hero--elegant .hero__container .hero__content {
  margin-bottom: 1rem;
}