/* Legacy Punla Styles */

:root {
  --bs-irri-rgb: #216438;
  --bs-irri-hover: #19512c;
}

body {
  min-height: 100vh;
}

img.card-img-top {
  object-fit: cover;
}

.color-irri {
  color: var(--bs-irri-rgb) !important;
}

.bg-irri {
  background-color: var(--bs-irri-rgb) !important;
}

.btn-irri {
  --bs-btn-color: #fff;
  --bs-btn-bg: #216438;
  --bs-btn-border-color: #216438;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #19512c;
  --bs-btn-hover-border-color: #164a28;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #164a28;
  --bs-btn-active-border-color: #144424;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #216438;
  --bs-btn-disabled-border-color: #216438;
}

.btn-outline-irri {
  --bs-btn-color: #216438;
  --bs-btn-border-color: #216438;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #216438;
  --bs-btn-hover-border-color: #216438;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #216438;
  --bs-btn-active-border-color: #216438;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #216438;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #216438;
  --bs-gradient: none;
}

.text-irri {
  --bs-text-opacity: 1;
  color: var(--bs-irri-rgb) !important;
}

/* New SPECTRA styles */

:root {
  --bs-body-font-size: 1.15rem;
}

#vg-tooltip-element {
  font-family: 'Source Sans 3', var(--bs-body-font-family);
  font-size: 0.8em;
}

#vg-tooltip-element table tr td.key {
  color: var(--bs-irri-rgb);
}

body {
  font-family: 'Source Sans 3', var(--bs-body-font-family);
  font-optical-sizing: auto;  
}

.upcase {
  text-transform: uppercase;
}

.serif {
  font-family: 'Libre Bodoni', serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.emphasis {
  font-family: 'Montserrat', var(--bs-body-font-family);
  font-optical-sizing: auto;
}

.navbar {
  /*--bs-navbar-brand-color: var(--bs-irri-rgb);
  --bs-navbar-brand-hover-color: var(--bs-irri-hover);*/
  --bs-navbar-active-color: var(--bs-irri-rgb);
  --bs-navbar-brand-font-size: 1.85rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-nav {
  --bs-nav-link-color: #fff;
  --bs-nav-link-hover-color: #f2b545;
}

.lockup-img { 
  height: 1.15em;
  vertical-align: text-top;
}

.img-constrain {
  width: 100%;
  height: 100%;
  min-height: 17rem;
  object-fit: cover;
  border-top-left-radius: var(--bs-border-radius);
}

@media (max-width: 767px) {
  .img-constrain{
    border-top-right-radius: var(--bs-border-radius);
  }
}

@media (min-width: 768px) {
  .img-constrain{
    border-bottom-left-radius: var(--bs-border-radius);
  }
}

.cover-left {
  object-position: left;
}


.cover-right {
  object-position: right;
}

.card-text {
  font-size: calc(var(--bs-body-font-size) * 1.2);
}

.card-link {
  display: block;
  color: var(--bs-irri-rgb);
  text-decoration: none;
  font-size: calc(var(--bs-body-font-size) * 1.25);
}

.card-link + .card-link {
  margin-left: unset;
}

.card-link:hover {
  color: var(--bs-irri-hover);
}

.card-link::after {
  content: "\F285";
  font-family: bootstrap-icons;
  font-size: 1.15rem;
  vertical-align: text-top;
  padding: 0.15rem;
}

.form-select-sm {
  font-size: 1rem;
}

p {
  font-size: calc(var(--bs-body-font-size) * 1.2);
}

/* Container scales to your layout and holds the layers together */
.hero-split-container {
  position: relative;
  width: 100%;
  height: 600px;    
  overflow: hidden;
}

/* Forces the img tag to behave like a responsive background */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The static color layer that sits perfectly on top of the image */
.hero-color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows user clicks to pass through to the image */
  
  /* Left side is solid color, fading out seamlessly in the middle halfway zone */
  background: linear-gradient(
    to right,
    rgb(253, 238, 223) 0%,           /* Solid color starts at the left edge */
    rgba(253, 238, 223, 0) 50%, /* Seamlessly fades completely out by 65% width */
    rgba(253, 238, 223, 0) 100% /* Stays transparent to reveal the right half of the image */
  );
}

.card-row > .card {
  min-width: 800px;
  margin-right: 2rem;
}