/* Aqui van los estilos personalizados de AlianzaJoven.
 * Author: AlianzaJoven
 */

/* Fonts */
@import url(../fonts/avenir-next-regular/font.css);
@import url(../fonts/avenir-next-demibold/font.css);
@import url(../fonts/avenir-next-bold/font.css);
@import url(../fonts/factoria-black/stylesheet.css);
@import url(../fonts/factoria-book/stylesheet.css);



/* Variables */
:root {
    --verde-aj: #34e7c0;
    --negro-aj: #000;
    --blanco-aj: #fff;

    --avenir-next-regular: 'AvenirNext-Regular', Helvetica, Arial, sans-serif;
    --avenir-next-demibold: 'AvenirNext-DemiBold', Helvetica, Arial, sans-serif;
    --avenir-next-bold: 'AvenirNext-Bold', Helvetica, Arial, sans-serif;
    --factoria-black: 'factoriablack', Helvetica, Arial, sans-serif;
    --factoria-book: 'factoriabook', Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--avenir-next-regular);
    --bs-body-color: var(--negro-aj);
    --bs-link-hover-color-rgb: 52, 231, 192;
}

/* Backgrounds */
.bg-verde-aj { background-color: var(--verde-aj); }
.bg-verde-aj.wrapper.angled.lower-end:after,
.bg-verde-aj.wrapper.angled.lower-start:after,
.bg-verde-aj.wrapper.angled.upper-end:before,
.bg-verde-aj.wrapper.angled.upper-start:before  {
  border-color: var(--verde-aj);
}

.bg-negro-aj { background-color: var(--negro-aj); }
.bg-blanco-aj { background-color: var(--blanco-aj); }

/* Links */
.link-body { color: var(--negro-aj); }

a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb) !important;
}

.link-dark:hover,
a.text-reset:hover,
.text-reset a:hover {
  color: var(--verde-aj) !important;
}

/* Fuentes */
.font-1-r { font-family: var(--avenir-next-regular);}
.font-1-b { font-family: var(--avenir-next-bold);}
.font-1-db { font-family: var(--avenir-next-demibold);}
.font-2-r { font-family: var(--factoria-book);}
.font-2-b { font-family: var(--factoria-black);}

.color-1 { color: var(--verde-aj) !important; }
.color-2, 
.color-2-hijo a { color: var(--negro-aj) !important; }
.color-3 { color: var(--blanco-aj) !important; }

body {
  font-family: var(--bs-body-font-family) ;
}


/* SECTION NAVBAR */
.navbar-dark .dropdown-item {
  color: rgba(255, 255, 255, 0.5) !important;
}

.nav-link:hover,
.navbar-dark .dropdown-item:hover {
  color: var(--verde-aj) !important;
}

.navbar-nav .nav-link.is-active,
/* .navbar-nav .nav-link.show, */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .dropdown-item.is-active {
  color: var(--verde-aj) !important;
}

.navbar-nav .dropdown-menu {
  background-color: var(--negro-aj) !important;;
}

a.nav-link-search {
  color: var(--blanco-aj);
}
/* en estilo page-frame el menu no debe ser afectado sino quedar igual */
.page-frame.header-absolute header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}


/* SECTION BLOG */
.page-view-blog-lists section.title-wrapper > .container  {
  padding-top: 0 !important;
  padding-bottom: 20px !important;
}

/* Angulo mas reducido y verde */
.page-view-blog-lists .wrapper.angled.lower-end:after {
  border-bottom-width: 1rem;
  bottom: -1rem;
  border-color: var(--verde-aj);
}


.page-view-blog-lists .block-title {
  font-family: var(--factoria-black);
}

.post-category a { color: var(--negro-aj); }
.post-header h1, 
.post-header .post-meta {
  font-family: var(--avenir-next-demibold);
}

/* SECTION FOOTER */
footer > .container { padding-bottom: 0 !important; }


.search-form .form-control {
  border-color: var(--verde-aj);
  color: var(--verde-aj);
}

/* SECTION FOOTER */
.search-form .form-control::placeholder {
  color: var(--verde-aj);
}

.search-form:before {
  color: var(--verde-aj) !important;
}


/* TABS AJ ESTILO 1 */
.nav-tabs-aj.nav-tabs.nav-tabs-bg .nav-link {
  background: var(--negro-aj);
  opacity:initial;
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.2;
  border-radius: 0.8rem !important;
}

.nav-tabs-aj .nav-link h3 { color: var(--verde-aj);}

.nav-tabs-aj.nav-tabs.nav-tabs-bg .nav-link:hover,
.nav-tabs-aj.nav-tabs.nav-tabs-bg .nav-link.active { 
  background: var(--verde-aj);
}

.nav-tabs-aj .nav-link:hover h3,
.nav-tabs-aj .nav-link.active h3{ color: var(--negro-aj);}