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

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

    @media (max-width: 992px) {
      justify-content: center;
    }
  }

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

    li, span, a {
      font-size: 1.25rem;
      font-family: 'TrendaSemibold';
      color: var(--primary-t1) !important;
    }

    a:hover {
      color: var(--primary-t2) !important;
    }
  }

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

  .nav-link {
    color: black;
  }

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

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

    h3 {
      font-size: 1.25rem;
    }

    img {
      height: 50px;
      margin-top: auto;
      margin-bottom: auto;
      float: left;
      padding-right: 1rem;
    }

    @media (max-width: 767px) {
      display: none;
    }
  }

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

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

    .content,
    .content a {
      color: black;
    }
  }

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

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

      &:hover,
      &:focus {
        color: var(--primary-t2);
        text-decoration: underline;
      }
    }
  }

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

    &:hover, &: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;

    img {
      border-radius: 10px;

      &:hover {
        transform: scale(1.1);
      }
    }
  }

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

    @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) {
      font-size: 1.0125rem;
      line-height: 1.215rem;
    }

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

    a {
      color: white;
      font-style: italic;
      text-decoration: none;
      text-transform: uppercase;
      position: relative;

      &:hover {
        color: white;
        opacity: 0.8;
      }

      &:after {
        font-family: FontAwesome;
        content: '\f054';
        color: white;
        right: -30px;
        position: absolute;
        font-style: normal;
      }
    }
  }

  /* Separator Styles */
  .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 */

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

      @media screen and (min-width: 768px) {
        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 */
      }
    }

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

    &.is-mercury-edit-mode {
      img {
        margin: auto;
        height: 350px;
      }

    {
      height: 400px;
    }
    }
  }

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

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

    .background {
      width: 100vw;
      max-width: 100vw;
      margin:0 calc(-50vw + 50%) !important;
      float: none;
    }
  }

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

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

    &::before {
      content:'\201c';
      top: 20px;
      left: -50px;
    }

    &::after {
      content:'\201d';
      bottom: -42px;
    }

    &::before, &::after {
      font-size: 5.2em;
      position: absolute;
    }

    @media screen and (max-width: 550px) {
      float: none;
      font-size: 1.3em;
      width: 70%;
      margin: 40px auto 100px auto;

      &::before {
        top:16px;
        left: -40px;
      }

      &::after {
        bottom: -35px;
      }
    }
  }

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

  .blockquote-footer div::before {
    content: "— ";
  }

  /* Sticky Navbar Active State Styles */
  .stickynav-active {
    z-index: 999 !important;
    animation: fadeIn 1s;

    img{
      height: 75px;
      margin-top: auto;
      margin-bottom: auto;
    }

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

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

  /* Paragraph Image Styles */
  .paragraph--type--ama-bp-card,
  .paragraph--type--ama-photos {
    .field--type-image {
      margin: 0;
      float: none;

      img {
        margin: 0;
      }
    }
  }

  /* Paragraph Column Styles */
  .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) */

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

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

  .view-padding {
    padding: 1rem;
  }

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

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

    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, .l__main {
      display: block;
    }
  }

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

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

  .item {
    padding: 5px;
  }
}

.pagination {
  justify-content: center;
}

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