// Estilos base gerados a partir de SCSS (compilar com `npm run build:css` na pasta frontend).
:root {
  --plyr-color-main: #7fbd90;
  --plyr-video-control-background-hover: rgba(127, 189, 144, 0.2);
  --plyr-video-control-background: #7fbd90;
  --plyr-video-control-background-hover: rgba(127, 189, 144, 0.2);
  --plyr-video-control-background-active: #7fbd90;
  --plyr-video-control-background-active-hover: rgba(127, 189, 144, 0.2);
  --plyr-video-control-background-active-hover: rgba(127, 189, 144, 0.2);
}

html {
  text-rendering: optimizeLegibility;
}

body {
  font-family: $font-family-base !important;
  font-size: $font-size-global !important;
  font-weight: $font-weight-normal !important;
  line-height: normal !important;
  color: #808080; // Sem click
}

strong,
b {
  font-weight: $font-weight-bold !important; // Medium 16pt (herdado do body)
}

// Configuração para Títulos (H1 a H6 ou classe dedicada)
h2,
h3,
h4,
h5,
h6,
.custom-title {
  font-size: $font-size-global !important;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;

  span {
    font-weight: $font-weight-normal !important; // Medium 16pt (herdado do body)
  }
}

h1 {
  font-size: 12px !important;
  text-transform: uppercase;
  line-height: 100% !important;
  font-weight: 300 !important;
  margin-top: 50px !important;
  margin-bottom: 50px !important;
  display: flex;
  align-items: center;

  &:before {
    content:'';
    display:inline-block;
    width: 12px;
    height: 12px;
    background-color: #000;
    margin-right: .5em;
  }
}

[href],
a,
.clickable {
  color: #333333;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    color: lighten(#333333, 10%);
  }
}

.navbar-nav {
  text-transform: uppercase;

  .dropdown-menu {
    border-radius: 0 !important;
    border: none !important;
  }

  --bs-dropdown-link-active-bg: #808080 !important;
  --bs-dropdown-link-active-color: #fff !important;
}

.img-container {
  display: block;
  position: relative;


  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }

  .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;

    .title {
      font-weight: 300 !important;
    }
  }

  &:hover {
    .img-overlay {
      opacity: 1;
    }
  }
}

.slider-header {
    text-transform: lowercase;
    color: rgba(0,0,0, .3);

    .swiper-button-prev-custom, .swiper-button-next-custom {
        color: rgba(0,0,0, .3);

        &:hover {
            color: #000;
        }
    }
}