/*
==================================================================
Theme Name: Agrícola Triviño
Version: 1.0
Author: Balinot
==================================================================
*/

/* General */

html,
body {
	font-family: "tahoma", sans-serif;
    font-weight: 400;
    font-style: normal;
 	font-optical-sizing: auto;
	color: var(--dark);
	font-size: var(--size-400);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.title {
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
}

body figure {
	margin: 0;
}

body.active {
	overflow: hidden;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
	width: 100%;
    font-family: "Fjalla One", sans-serif;
    font-weight: var(--weight-400);
    line-height: 1.4;
	margin: 0;
}


.hover-main:hover {
	transition: all 280ms ease;
}

.hover-main:hover {
	color: var(--main);
}

.hover-secondary:hover {
	color: var(--main);
}

.hover-scale {
	overflow: hidden;
}

.hover-scale img {
	transition: all 320ms ease
}

.hover-scale:hover img {
	scale: 1.2;
}

p,
li {
	width: 100%;
	margin: 0;
	line-height: 1.4;
}

.content p:not(:last-child) {
	margin-bottom: 20px;
}

a {
	text-decoration: none;
	transition: all 320ms ease;
}

.btn {
	width: fit-content;
	display: flex;
	gap: 10px;
	border: 1px solid currentColor;
	transition: all 420ms ease;
	text-transform: uppercase;
	padding: var(--space-15) var(--space-25);
	font-size: var(--size-200);
	white-space: nowrap;
}


/* Header */

#flogo img,
#logo img {
    width: 160px;
    height: auto;
    mix-blend-mode: multiply;
}

#flogo img {
    width: 200px;
    height: auto;
    mix-blend-mode: multiply;
}

#header .btn {
    font-size: var(--size-200);
    font-weight: var(--weight-400);
    color: white;
    background: var(--main);
    border: 1px solid var(--main);
    padding: var(--space-10) var(--space-15);
    border-radius: 3px;
    transition: all 320ms ease;
}


#header .btn:hover {
    color: var(--main);
    background: transparent;
}

/* Blog */

#hero .block-1 {
    min-height: 500px;
}

.cats > a  {
    color: var(--main);
    background: transparent;
    padding: var(--space-5) var(--space-10);
    border-radius: 3px;
    border: 1px solid var(--main);
    transition: all 320ms ease;
}

.cats > a:hover,
.cats > a.current  {
    color: white;
    background: var(--main);
}

article.post .term,
.post .categories a {
    background: #FFFFFF66;
    transition: all 320ms ease;
} 

.post .categories a:hover {
    background: #ffffff94;
}

.content p,.content li {
	color: var(--grey);
    font-size: var(--size-300)
}

.content p:not(:last-child) {
    margin-bottom: var(--space-20)
}

.content a {
	color: var(--main);
}

.content figure {
	max-width: 100%;
    margin-bottom: var(--space-30);
}

.content h2,.content h3,.content h4,.content h5 {
    margin-bottom: var(--space-20)
}

.content ol,.content ul {
    padding-left: 20px;
    margin-bottom: var(--space-20)
}
.content ol li,
.content ul li {
    margin-bottom: var(--space-10);
    position: relative
}

.content ol li:last-child,
.content ul li:last-child {
    margin-bottom: 0
}

.content ul li:before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: var(--main);
    position: absolute;
    left: -14px;
    top: 10px
}

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%
}

.wp-block-embed__wrapper>* {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.content ol li {
    list-style: decimal;
}

.content ol li::marker {
    color: var(--main);
    font-weight: 700
}

#related article {
    min-height: 400px;
}

#related article .term {
    top: var(--space-20);
    right: var(--space-20);
}

#hero figure::before,
article.post figure:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: all 320ms ease;
}

article.post:hover figure:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
}

article.post .terms {
    width: fit-content;
    position: absolute;
    top: var(--space-20);
    right: var(--space-20);
}

.blog article.post:hover h3 {
    color: var(--grey);
}

#pagination span.current {
    background: var(--main);
    color: #fff
}

#pagination span,#pagination a {
    color: var(--main);
    background: #fff;
    font-size: var(--size-100);
    padding: var(--space-10)var(--space-15);
    border-radius: 3px;
    transition: all .42s ease;
    border: 1px solid var(--main);
    text-transform: uppercase;
}

#pagination a:hover {
    background: var(--main);
    color: #fff
}

.regular #hero .block-1 {
    min-height: auto;
}