/* Global Styles */

@import "colors.css";

html {
  font-family: 'TrendaRegular';
  color: #000;
}

/* Body Styles */
body {
  font-family: 'TrendaRegular';
  color: #000 !important;
  font-size: 1em; /* Adjust font size as needed */
  hyphens: none;
}

/* Headings Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'TrendaBold';
}

/* Hide Slogan on Small Screens */
@media (max-width: 767px) {
  /* .slogan {
    display: none;
  } */
  .name-slogan {
    display: none;
  }
}

/* Flex Layout Styles */
.break {
  flex-basis: 100%;
  height: 0;
}

.item {
  padding: 5px;
}

/* Navbar Styles */
.navbar-expand-lg .navbar-collapse,
.navbar>.container {
  justify-content: center;
}

/* Center Navbar Content on Medium Screens */
@media (max-width: 992px) {
  .navbar>.container {
    justify-content: center;
  }
}

/* Navbar Navigation Styles */
.navbar-nav {
  padding-right: 25px;
}

/* Navbar Link Styles */
.nav-link.active {
  background-color: black !important;
  color: white !important;
}

.nav-link {
  color: black;
}


/* .nav-tabs .nav-link.active {
  background-color: black !important;
  color: white !important;
}

.nav-tabs .nav-link {
  background-color: gray !important;
  color: black !important;
} */


/* Logo Styles */
.logo {
  padding: 1rem;
}

/* Name-Slogan Heading Styles */
.name-slogan h2 {
  font-size: 2.0rem;
}

.name-slogan h3 {
  font-size: 1.25rem;
}

/* Name-Slogan Image Styles */
.name-slogan img {
  height: 50px;
  margin-top: auto;
  margin-bottom: auto;
  float: left;
  padding-right: 1rem;
}

/* Navbar Brand Image Styles */
.navbar-brand img {
  height: 100px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Navbar Navigation Link Styles */
.navbar-nav li,
.navbar-nav span,
.navbar-nav a {
  font-size: 1.25rem;
  font-family: 'TrendaSemibold';
  color: var(--primary-t1) !important;
}

/* Hover Styles for Navbar Links */
.navbar-nav a:hover {
  color: var(--primary-t2) !important;
}

/* Footer Styles */
.site-footer .row {
  --bs-gutter-x: 0.5rem;
}

/* Placeholder Text Color */
#textSearch.form-control::placeholder {
  color: white;
}

/* Node Teaser Heading Link Color */
.node--view-mode-teaser h2 a {
  color: var(--primary-t1);
  text-decoration: none;
}
.node--view-mode-teaser h3 a {
  color: var(--primary-t1);
  text-decoration: none;
}

.node--view-mode-teaser h3 a:hover,
.node--view-mode-teaser h3 a:focus {
  color: var(--primary-t2);
  text-decoration: underline;
}

/* Hover and Focus Styles for Titles */
.node--view-mode-teaser h2 a:hover,
.node--view-mode-teaser h2 a:focus {
  color: var(--primary-t2);
  text-decoration: underline;
}

/* Generic Link Styles */
a, .link {
  color: var(--primary-t1);
}

/* Hover and Focus Styles for Generic Links */
a.link:hover, a.link:focus {
  color: var(--primary-t2) !important;
}

/* Image Alignment Styles */
.align-left img {
  padding-right: 1em;
  float: left;
  margin-bottom: 0px;
}

/* Text Alignment Styles */
.content-center {
  text-align: center;
}

.content-left {
  text-align: left;
}

.content-right {
  text-align: right;
}

/* Teaser Styles */
.teaser {
  float: left;
  margin-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

/* Teaser Image Styles */
.teaser img {
  border-radius: 10px;
}

/* Teaser Hover Effect */
.teaser:hover img {
  transform: scale(1.1);
}

/* Learn More Styles */
.learn-more {
  font-family: "TrendaHeavyIt";
  font-weight: 800;
  font-style: normal;
  color: white;
  letter-spacing: 0em;
}

/* Responsive Learn More Font Sizes */
@media (min-width: 0px) and (max-width: 479px),
       (min-width: 480px) and (max-width: 620px),
       (min-width: 621px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 1023px),
       (min-width: 1024px) and (max-width: 1219px) {
  .learn-more {
    font-size: 1.0125rem;
    line-height: 1.215rem;
  }
}

@media (min-width: 1220px) {
  .learn-more {
    font-size: 1.2rem;
    line-height: 1.44rem;
  }
}

/* Learn More Link Styles */
.learn-more a {
  color: white;
  font-style: italic;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

/* Hover Styles for Learn More Links */
.learn-more a:hover {
  color: white;
  opacity: 0.8;
}

/* FontAwesome Icon for Learn More Links */
.learn-more a:after {
  font-family: FontAwesome;
  content: '\f054';
  color: white;
  right: -30px;
  position: absolute;
  font-style: normal;
}

/* Separator Image Styles (Mercury Edit Mode) */
.is-mercury-edit-mode .separator img {
  margin: auto;
  height: 350px;
}

/* Separator Styles (Mercury Edit Mode) */
.is-mercury-edit-mode .separator {
  height: 400px;
}

.separator {
  height: 376px; /* Set the fixed height of the container */
  position: relative; /* To ensure that the image resizes relative to the container */
  overflow: hidden; /* Hide any overflowing content */
  display: flex; /* Create a flex container to center the image horizontally */
  justify-content: center; /* Center-align the image horizontally */
}

@media screen and (max-width: 767px) {
  .separator {
    height: 250px;
  }
}

/* Full-Width Image Styles */
.separator img {
  max-width: none; /* Allow the image to exceed its intrinsic width */
  width: auto; /* Allow the width to adjust automatically for smaller screens */
  height: 100%; /* Set the height to 100% of the container height */
  object-fit: cover; /* Maintain the aspect ratio and cover the container */
  object-position: center center; /* Center the image horizontally and vertically */
  display: block; /* Remove any extra spacing or alignment issues */
  margin: 0; /* Remove any margin */
}

/* Full Width on Larger Screens */
@media screen and (min-width: 768px) {
  .separator img {
    width: 100vw; /* Set the width to 100% of the viewport width for larger screens */
    max-width: 100vw; /* Set the maximum width to 100% of the viewport width for larger screens */
    margin: 0 calc(-50vw + 50%); /* Center-align the image horizontally for larger screens */
  }
}

/* Full-Width Horizontal Rule Styles */
.full-width-hr {
  width: 100vw;
  max-width: 100vw;
  margin:0 calc(-50vw + 50%) !important;
}

/* Firefox-Specific Styles (Full-Width Images) */
@-moz-document url-prefix() {
  .full-width img {
    margin: 0 !important; /* This will reset the margin only in Firefox */
  }
}

/* Full-Width Container Styles */
.full-width {
  /* height: 366px; */
  width: 100vw;
  max-width: 100vw;
  margin:0 calc(-50vw + 50%) !important;
}

/* Normal-Width Container Styles */
.normal-width {
  width: 100%;
  max-width: 100%;
}

/* Full-Width Background Container Styles */
.full-width .background {
  width: 100vw;
  max-width: 100vw;
  margin:0 calc(-50vw + 50%) !important;
  float: none;
}

/* Normal-Width Background Container Styles */
.normal-width .background {
  width: 100%;
  max-width: 100%;
}

/* Pull Quote Styles */
.pquote {
  width: 45%;
  float: right;
  margin: 20px 26px 20px 75px;
  padding: 0px;
  font-size: 1.5em;
  line-height: 1.5em;
  font-family: 'Georgia', serif;
  color: #0aaef0;
  position: relative;
}

/* Pull Quote Opening Quote Styles */
.pquote::before {
  content:'\201c';
  top: 20px;
  left: -50px;
}

/* Pull Quote Closing Quote Styles */
.pquote::after {
  content:'\201d';
  bottom: -42px;
}

/* Positioning for Opening and Closing Quotes */
.pquote::before, .pquote::after {
  font-size: 5.2em;
  position: absolute;
}

/* Responsive Pull Quote Styles for Small Screens */
@media screen and (max-width: 550px) {
  .pquote {
    float: none;
    font-size: 1.3em;
    width: 70%;
    margin: 40px auto 100px auto;
  }
  .pquote::before {
    top:16px;
    left: -40px;
  }
  .pquote::after {
    bottom: -35px;
  }
}

/* Blockquote Footer Styles */
.blockquote-footer::before {
  content: " ";
}

/* Blockquote Footer Content Styles */
.blockquote-footer div::before {
  content: "— ";
}

/* Sticky Navbar Active State Styles */
.stickynav-active {
  /*max-width: 1146px;*/
  z-index: 490 !important; /* Lowered z-index to be below Gin toolbar (which uses 501) */
  animation: fadeIn 1s;
}

.sticky-top {
  z-index: 300;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Sticky Navbar Image Styles */
.stickynav-active img{
  height: 75px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Node Image Styles */
.node .field--type-image {
  margin: 0;
  float: none;
}

/* Paragraph Image Styles (AMA Block Paragraph) */
.paragraph--type--ama-bp-card .field--type-image {
  margin: 0;
  float: none;
}

/* Paragraph Image Styles (AMA Photos Paragraph) */
.paragraph--type--ama-photos .field--type-image {
  margin: 0;
  float: none;
}

/* Image Styles (AMA Photos Paragraph) */
.paragraph--type--ama-photos .field--type-image img {
  margin: 0
}

/* Paragraph Column Styles (Layout) */
.paragraph__column .row {
  padding: 15px 0px 15px 0px;
  justify-content: center;
}

/* Override layout paragraph region size */
.js-lpb-region {
  min-height: 70px;
}

/* Style Oembed Videos */
.field--name-field-media-oembed-orv {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 18.9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Style Oembed Video Content */
.media-oembed-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Centered Text Alignment */
.align-center {
  text-align: center;
}

/* Figcaption Styles */
figcaption {
  font-size: .875em;
  color: #6c757d;
}

/* Card Styles */
.card {
  border: none;
}

/* Layout Paragraph Component Form Styles */
.layout-paragraphs-component-form {
  max-width: 95%;
  width: 1000px;
}

/* Layout Paragraphs Styles */
.lpb-layout {
  padding: 25px;
}

/* Ad Container Styles */
.ad-container {
  text-align: center; /* Center the ads */
  padding: 10px; /* Optional spacing around ads */
}

/* Ad Styles */
.ad {
  display: inline-block;
  width: 100%; /* Ads will take the full width of their container */
  max-width: 500px; /* Set a maximum width for larger screens */
  /* Add additional styling as needed */
}

.block-views-blockafs-diy-block-4 .field--name-field-media-image img {
  margin-bottom: -1rem;
}

/*.block-views h2{
  padding-top: 1rem;
  text-align: center;
}*/

.view-padding {
  padding: 1rem;
}

.site-footer .content,
.site-footer .content a {
  color: black;
}

/* .paragraph--type--ama-block {
  padding: 1em;
} */

.content-padding {
  padding: 1rem;
}

.justify-content {
  margin: 1rem auto; /* Center horizontally by setting left and right margins to auto */
  text-align: start;
}

@media (min-width: 768px) {
  .custom-padding-md {
    padding-left: 5rem;  /* Or any value you prefer */
    padding-right: 5rem; /* Or any value you prefer */
  }
}

.view-display-id-block_1 {
  margin: auto;
}

/* .paragraph--type--ama-banner {
  margin-top: -25px;
} */

/* .paragraph__column .layout {
padding: 5px;
} */

.bg-white a.nav-link--user-logout::before {
  background-image: url('data:image/svg+xml,<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 00-1 1v5a1 1 0 001 1h7a1 1 0 001-1V9a1 1 0 00-1-1zm-7-1a2 2 0 00-2 2v5a2 2 0 002 2h7a2 2 0 002-2V9a2 2 0 00-2-2h-7zm0-3a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/></svg>');
}

.bg-white a.nav-link--user::before {
  background-image: url('data:image/svg+xml,<svg class="bi bi-person-check" width="1em" height="1em" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM1.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM6 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zm6.854.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708L12.5 7.793l2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"/></svg>');
}

.field--name-field-page-top {
  margin-top: -27px;
}

.teaser-container {
  height: 225px;
}

.block-views-blockarticles-block-1  h2 {
  text-align: center;
}

.paragraph--view-mode--teaser .layout {
  display: block;
}

.paragraph--view-mode--teaser .l__main {
  display: block;
}

 #block-ama-barrio-pagetop {
  margin-top: 20px;
}

.pagination {
  justify-content: center;
}

.affix {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 300;
  left: 0;
}