/* post-template.scss
 * Description: styles for the post template block
 * Author: Caroline Ferraby
 * Date: 02 June 2025
 */
/* _variables.scss
 * Description: variable definitions to be used in sass partials and in theme.json
 * Author: Caroline Ferraby
 * Date: 01 May 2025
 */
/* ---------------------------------------------------
   Defining colors
--------------------------------------------------- */
:root {
  --tf--color--0: #000000;
  --tf--color--05: #05252C;
  --tf--color--1: #055157;
  --tf--color--2: #4A848D;
  --tf--color--3: #8FB5BB;
  --tf--color--4: #E54C39;
  --tf--color--5: #EB7524;
  --tf--color--6: #ECC6A1;
  --tf--color--f2: #F2EBE7;
  --tf--color--f: #FFFFFF;
}

/* ---------------------------------------------------
   Assigning colors
   [background]--[foreground element]:[foreground color]
--------------------------------------------------- */
/* ---------------------------------------------------
   Font family and weight
--------------------------------------------------- */
/* ---------------------------------------------------
   Spacing Definitions
--------------------------------------------------- */
/* post-template.scss
 * Description: styles for the post template block
 * Author: Caroline Ferraby
 * Date: 02 June 2025
 */
/* _utilities.scss
 * Description: styles for utilities that can be used as helper classes
 * Author: Caroline Ferraby
 * Date: 01 May 2025
 */
/* ---------------------------------------------------
   For Administrators (use all caps)
--------------------------------------------------- */
.FLAG {
  color: #FF00FF;
}

/* ---------------------------------------------------
   For Developers
--------------------------------------------------- */
.frame {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.flex-grow {
  flex-grow: 1;
}

.justify-space-between {
  justify-content: space-between;
}

.mt-quarter {
  margin-top: 0.25rem !important;
}

.mt-half {
  margin-top: 0.5rem !important;
}

.m-0 {
  margin: 0;
}

.m-xxs {
  margin: 0.25rem;
}

.m-xs {
  margin: 0.5rem;
}

.m-sm {
  margin: 0.8rem;
}

.m-reg {
  margin: 1rem;
}

.m-md {
  margin: 1.5rem;
}

.m-ml {
  margin: 2rem;
}

.m-lg {
  margin: 2.75rem;
}

.m-xl {
  margin: 3.75rem;
}

.m-xxl {
  margin: 5rem;
}

.m-auto {
  margin: auto;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-xxs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.my-xxs {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-xs {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.my-xs {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-sm {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}

.my-sm {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.mx-reg {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-reg {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-md {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.my-md {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mx-ml {
  margin-left: 2rem;
  margin-right: 2rem;
}

.my-ml {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mx-lg {
  margin-left: 2.75rem;
  margin-right: 2.75rem;
}

.my-lg {
  margin-top: 2.75rem;
  margin-bottom: 2.75rem;
}

.mx-xl {
  margin-left: 3.75rem;
  margin-right: 3.75rem;
}

.my-xl {
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
}

.mx-xxl {
  margin-left: 5rem;
  margin-right: 5rem;
}

.my-xxl {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mt-xxs {
  margin-top: 0.25rem;
}

.mr-xxs {
  margin-right: 0.25rem;
}

.mb-xxs {
  margin-bottom: 0.25rem;
}

.ml-xxs {
  margin-left: 0.25rem;
}

.mt-xs {
  margin-top: 0.5rem;
}

.mr-xs {
  margin-right: 0.5rem;
}

.mb-xs {
  margin-bottom: 0.5rem;
}

.ml-xs {
  margin-left: 0.5rem;
}

.mt-sm {
  margin-top: 0.8rem;
}

.mr-sm {
  margin-right: 0.8rem;
}

.mb-sm {
  margin-bottom: 0.8rem;
}

.ml-sm {
  margin-left: 0.8rem;
}

.mt-reg {
  margin-top: 1rem;
}

.mr-reg {
  margin-right: 1rem;
}

.mb-reg {
  margin-bottom: 1rem;
}

.ml-reg {
  margin-left: 1rem;
}

.mt-md {
  margin-top: 1.5rem;
}

.mr-md {
  margin-right: 1.5rem;
}

.mb-md {
  margin-bottom: 1.5rem;
}

.ml-md {
  margin-left: 1.5rem;
}

.mt-ml {
  margin-top: 2rem;
}

.mr-ml {
  margin-right: 2rem;
}

.mb-ml {
  margin-bottom: 2rem;
}

.ml-ml {
  margin-left: 2rem;
}

.mt-lg {
  margin-top: 2.75rem;
}

.mr-lg {
  margin-right: 2.75rem;
}

.mb-lg {
  margin-bottom: 2.75rem;
}

.ml-lg {
  margin-left: 2.75rem;
}

.mt-xl {
  margin-top: 3.75rem;
}

.mr-xl {
  margin-right: 3.75rem;
}

.mb-xl {
  margin-bottom: 3.75rem;
}

.ml-xl {
  margin-left: 3.75rem;
}

.mt-xxl {
  margin-top: 5rem;
}

.mr-xxl {
  margin-right: 5rem;
}

.mb-xxl {
  margin-bottom: 5rem;
}

.ml-xxl {
  margin-left: 5rem;
}

.p-0 {
  padding: 0;
}

.p-xxs {
  padding: 0.25rem;
}

.p-xs {
  padding: 0.5rem;
}

.p-sm {
  padding: 0.8rem;
}

.p-reg {
  padding: 1rem;
}

.p-md {
  padding: 1.5rem;
}

.p-ml {
  padding: 2rem;
}

.p-lg {
  padding: 2.75rem;
}

.p-xl {
  padding: 3.75rem;
}

.p-xxl {
  padding: 5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-1 {
  padding: 0.25rem;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.px-xxs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.py-xxs {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-xs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-xs {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-sm {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.py-sm {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.px-reg {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-reg {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-md {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-md {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-ml {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-ml {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.px-lg {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

.py-lg {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.px-xl {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

.py-xl {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.px-xxl {
  padding-left: 5rem;
  padding-right: 5rem;
}

.py-xxl {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pt-xxs {
  padding-top: 0.25rem;
}

.pr-xxs {
  padding-right: 0.25rem;
}

.pb-xxs {
  padding-bottom: 0.25rem;
}

.pl-xxs {
  padding-left: 0.25rem;
}

.pt-xs {
  padding-top: 0.5rem;
}

.pr-xs {
  padding-right: 0.5rem;
}

.pb-xs {
  padding-bottom: 0.5rem;
}

.pl-xs {
  padding-left: 0.5rem;
}

.pt-sm {
  padding-top: 0.8rem;
}

.pr-sm {
  padding-right: 0.8rem;
}

.pb-sm {
  padding-bottom: 0.8rem;
}

.pl-sm {
  padding-left: 0.8rem;
}

.pt-reg {
  padding-top: 1rem;
}

.pr-reg {
  padding-right: 1rem;
}

.pb-reg {
  padding-bottom: 1rem;
}

.pl-reg {
  padding-left: 1rem;
}

.pt-md {
  padding-top: 1.5rem;
}

.pr-md {
  padding-right: 1.5rem;
}

.pb-md {
  padding-bottom: 1.5rem;
}

.pl-md {
  padding-left: 1.5rem;
}

.pt-ml {
  padding-top: 2rem;
}

.pr-ml {
  padding-right: 2rem;
}

.pb-ml {
  padding-bottom: 2rem;
}

.pl-ml {
  padding-left: 2rem;
}

.pt-lg {
  padding-top: 2.75rem;
}

.pr-lg {
  padding-right: 2.75rem;
}

.pb-lg {
  padding-bottom: 2.75rem;
}

.pl-lg {
  padding-left: 2.75rem;
}

.pt-xl {
  padding-top: 3.75rem;
}

.pr-xl {
  padding-right: 3.75rem;
}

.pb-xl {
  padding-bottom: 3.75rem;
}

.pl-xl {
  padding-left: 3.75rem;
}

.pt-xxl {
  padding-top: 5rem;
}

.pr-xxl {
  padding-right: 5rem;
}

.pb-xxl {
  padding-bottom: 5rem;
}

.pl-xxl {
  padding-left: 5rem;
}

.gap-0 {
  gap: 0px !important;
}

.gap-xxs {
  gap: 0.25rem !important;
}

.gap-xs {
  gap: 0.5rem !important;
}

.gap-sm {
  gap: 0.8rem !important;
}

.gap-reg {
  gap: 1rem !important;
}

.gap-md {
  gap: 1.5rem !important;
}

.gap-ml {
  gap: 2rem !important;
}

.gap-lg {
  gap: 2.75rem !important;
}

.gap-xl {
  gap: 3.75rem !important;
}

.gap-xxl {
  gap: 5rem !important;
}

.height-100 {
  height: 100%;
}

.shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.box-shadow {
  box-shadow: var(--box-shadow);
}

.list-style-none {
  list-style: none;
}

.no-underline {
  text-decoration: none;
}

.wp-block-post-template.list-saginaw-first .wp-block-post {
  order: 1;
}
.wp-block-post-template.list-saginaw-first .wp-block-post.post-173, .wp-block-post-template.list-saginaw-first .wp-block-post.post-186, .wp-block-post-template.list-saginaw-first .wp-block-post.post-189, .wp-block-post-template.list-saginaw-first .wp-block-post.post-191 {
  order: 0;
}

.wp-block-query:has(.is-style-card) {
  margin-top: 1.5rem;
}

.wp-block-post-template.is-style-card .wp-block-post {
  position: relative;
  box-shadow: 0 6px 18px 0 rgba(5, 37, 45, 0.08);
  -webkit-transition: box-shadow 300ms ease-out;
  transition: box-shadow 300ms ease-out;
}
.wp-block-post-template.is-style-card .wp-block-post:hover {
  box-shadow: 5px 5px 25px 5px rgba(41, 51, 63, 0.08);
}
.wp-block-post-template.is-style-card .wp-block-post:hover .wp-block-post-title a {
  color: #4A848D;
}
.wp-block-post-template.is-style-card .wp-block-post:hover .wp-block-post-title a::after {
  right: 1rem;
}
.wp-block-post-template.is-style-card .wp-block-post-featured-image,
.wp-block-post-template.is-style-card .wp-block-mfb-meta-field-block:has(img) .value {
  margin: 0;
}
.wp-block-post-template.is-style-card .wp-block-post-featured-image img,
.wp-block-post-template.is-style-card .wp-block-mfb-meta-field-block:has(img) .value img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-block-post-template.is-style-card.columns-4 .wp-block-post-featured-image {
  aspect-ratio: 3/2;
}
.wp-block-post-template.is-style-card .wp-block-mfb-meta-field-block:has(img) .value {
  aspect-ratio: 4/3;
}
.wp-block-post-template.is-style-card .wp-block-post-title {
  margin: 0;
}
.wp-block-post-template.is-style-card .wp-block-post-title a {
  display: flex;
  align-items: center;
  font-family: "GT America", sans-serif;
  font-weight: normal;
  font-size: 1.125rem;
  line-height: 1.3;
  padding: 1.111rem 3rem 1.111rem 1.111rem;
  background-color: #FFFFFF;
  color: #000000;
  -webkit-transition: color 300ms ease-out;
  transition: color 300ms ease-out;
}
.wp-block-post-template.is-style-card .wp-block-post-title a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
  pointer-events: auto;
  z-index: 1;
}
.wp-block-post-template.is-style-card .wp-block-post-title a::after {
  content: "\e923";
  font-family: "CD-Project-Icons" !important;
  position: absolute;
  right: 1.15rem;
  color: #E54C39;
  font-size: 1.15rem;
  -webkit-transition: right 300ms ease-out;
  transition: right 300ms ease-out;
}
