/* Only displays banner on home page */
body:not(.site-page-home) .main-banner {
     display: none;
}

/* Defines font */
body {
  font-family: "UT Industry", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* UT Industry font */
@font-face {
  font-family: "UT Industry";
  src:
    url("https://cdn.utah.gov/design-system/fonts/ut-industry/ttf/UTIndustry-Regular.ttf") format("truetype"),
    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff/UTIndustry-Regular.woff") format("woff"),
    url("https://cdn.utah.gov/design-system/fonts/ut-industry/woff2/UTIndustry-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

h1 {
   font-size: 2.5em;
   margin-bottom: 0.2em;
   font-family: "UT Industry";
}

h2 {
   font-size: 2em;
   font-family: "UT Industry";
}

h3 {
   font-size: 1.5em;
   font-family: "UT Industry";
}

h4 {
   font-size: 1em;
}

h5 {
  font-size: .8em;
}

h6 {
  font-size: .8em;
}

/* Intended to standardize rendering on mobile devices. It may not work */
@media all and (max-width: 650px) {
   #content .page-layout-normal {
      margin-bottom: 10px
   }
}

/* Center link text to items/assets */
.link-title {
     text-align: center
}

.side-by-side {
    display: flex;
    align-items: center;  /* Vertically centers the text against the image */
    gap: 20px;           /* Creates space between image and text */
} 

/* I don't think this worked
.image-container img {
    max-width: 300px;     Limits image size 
    height: auto;
}  */

/* Optional: Stack vertically on mobile 
@media (max-width: 600px) {
    .side-by-side {
        flex-direction: column;
    }
} */

/* POUR Side-by-Side CSS */

/* POUR Section Container */
.pour-section {
    margin: 3rem 0;
}

/* Flex row for side-by-side layout */
.pour-entry-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 40px;
    margin-bottom: 4rem;
    align-items: flex-start;
} 

/* Left Column - Text/Captions */
.pour-text-col {
    flex: 1;
    min-width: 300px;
}

.pour-caption p {
    font-size: 1.75rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Right Column - Media & Box */
.pour-media-col {
    flex: 1;
    min-width: 300px;
}

.pour-media-box {
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #eee;
}

.pour-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.pour-media-title h3 {
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
}

.pour-media-title h3 a {
    text-decoration: none;
    color: #0056b3;
}

/* Responsive: Stacks columns on tablet/mobile */
@media (max-width: 768px) {
    .pour-entry-row {
        flex-direction: column;
    }
    .pour-text-col, .pour-media-col {
        width: 100%;
    }
}

/* Changes top bar color and removes max-width constraint */
.main-header__main-bar {
  background-color: #3F1EAD
}

.main-header__main-bar.container {
  max-width: 100%
}

/* Changes navigation button text color */
.main-navigation .navigation>li>a {
    color: white
}

/* Adjust banner image proportions, from default of 53% */
.main-banner__image-wrapper {
  width: 48%
}

/* Larger captions */
.media-embed .resource .caption {
  font-size:  1.1rem
}

/* Larger captions */
.caption {
  font-size: 1.1rem
}

/* Center image titles */
.media-embed .resource {
  text-align: center
}